diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
new file mode 100644
index 0000000..dd84ea7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
new file mode 100644
index 0000000..bbcbbe7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature-request.md
@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..8c7ac3d
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,35 @@
+<!---☝️ PR title should follow conventional commits (https://conventionalcommits.org) -->
+
+### 🔗 Linked issue
+
+<!-- Please ensure there is an open issue and mention its number as #123 -->
+
+### ❓ Type of change
+
+<!-- What types of changes does your code introduce? Put an `x` in all the boxes that apply. -->
+
+- [ ] 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
+- [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
+- [ ] 👌 Enhancement (improving an existing functionality like performance)
+- [ ] ✨ New feature (a non-breaking change that adds functionality)
+- [ ] 🧹 Chore (updates to the build process or auxiliary tools and libraries)
+- [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)
+
+### 📚 Description
+
+<!-- Describe your changes in detail -->
+<!-- Why is this change required? What problem does it solve? -->
+<!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
+
+### 📸 Screenshots (if appropriate)
+
+<!-- Add screenshots to help explain the change. -->
+
+### 📝 Checklist
+
+<!-- Put an `x` in all the boxes that apply. -->
+<!-- If your change requires a documentation PR, please link it appropriately -->
+<!-- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
+- [ ] I have linked an issue or discussion.
+- [ ] I have updated the documentation accordingly.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
new file mode 100644
index 0000000..536e9fc
--- /dev/null
+++ b/.github/workflows/release.yaml
@@ -0,0 +1,27 @@
+# .github/workflows/release.yml
+
+name: Release
+
+permissions:
+  contents: write
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b494848
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+.nuxt
+.env
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+test-results/
+playwright-report/
+vite.config.ts.timestamp*
+
+**/.vitepress/cache/*
\ No newline at end of file
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..3bd3b7d
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+shell-emulator=true
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..dc6958f
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "semi": true
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..64db0b2
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c9442fb
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,34 @@
+{
+  "vue.server.hybridMode": true,
+  "eslint.experimental.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
+}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000..b270fa6
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+hello@lemonsqueezy.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..48446e2
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,53 @@
+# Contributing to Wedges
+
+👋 Hey there! We're thrilled that you're interested in contributing to Wedges. Before submitting your contribution, please take a moment to read through this guide.
+
+## Repository Structure
+
+Our repository is managed with [PNPM](https://pnpm.io/). Make sure you have PNPM installed to work with this repository.
+
+1. **packages/wedges-vue**:
+   This is the heart of our project – the UI library itself. Here you'll find all the components and utilities Wedges UI library.
+
+2. **apps/www**:
+   Contains the Vitepress documentation site for the Wedges UI library. This is where we maintain the documentation, examples, and guides for using the library.
+
+## Tooling and Technologies
+
+In the Wedges project, we utilize a variety of tools to ensure code quality, consistency, and smooth development processes.
+
+- **[Prettier](https://prettier.io/)**: for code formatting. Our codebase adheres to the configuration specified in `.prettierrc`.
+
+- **[ESLint](https://eslint.org/)**: for code linting. Make sure to check and fix any linting issues before submitting your code.
+
+- **[vite](https://vite.dev/)**: for bundling the library files. We bundle both ESM and CJS versions of the library.
+
+## Commit Convention
+
+Our project follows the [Conventional Commits](https://www.conventionalcommits.org/) specification for commit messages.
+
+When preparing your commits for a Pull Request, ensure they adhere to our commit message format: `type(scope): description`. The `type` and `scope` help categorize the commit, making our history readable and organized.
+
+### Types of Commits
+
+Your commits should fall into one of the following categories:
+
+- `feat` (or `feature`): Introduces new code or functionality to the project.
+
+- `fix`: Addresses and resolves a bug. Linking to an issue if available is highly encouraged.
+
+- `refactor`: Code changes that neither fix a bug nor add a feature, but improve the existing codebase.
+
+- `docs`: Updates or additions to documentation, such as README files, usage guides, etc.
+
+- `build`: Changes affecting the build system, including dependency updates and additions.
+
+- `test`: Modifications involving tests, including adding new tests or refining existing ones.
+
+- `ci`: Adjustments to our continuous integration setup, like GitHub Actions or other CI tools.
+
+- `chore`: General maintenance and organizational tasks that don't fit other categories.
+
+For example, a commit message might look like: `feat(components): introduce new Button styles`.
+
+Thank you for making Wedges better! 🎉
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9100080
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 radix-vue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..2c5980d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,61 @@
+<p align="center">
+  <a href="https://lemonsqueezy.com/wedges">
+      <img width="100%" src="https://github.com/lmsqueezy/wedges/blob/c47d43f8c76271381e812a357628fe3d3b076f25/apps/docs/public/images/banner.webp" alt="Wedges UI library" />
+  </a>
+</p>
+
+# Wedges
+
+[![](https://img.shields.io/npm/v/@lemonsqueezy/wedges?style=plastic)](https://www.npmjs.com/package/@lemonsqueezy/wedges)
+[![](https://img.shields.io/npm/dw/@lemonsqueezy/wedges?style=plastic)](https://www.npmjs.com/package/@lemonsqueezy/wedges)
+
+Wedges is an ever-expanding, open-source React UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
+
+With Wedges, you get a range of pre-built, customizable components that are easy to use and integrate into your React projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.
+
+<a href="https://lemonsqueezy.com/wedges/docs"><strong>Get Started with Wedges &rarr;</strong></a>
+
+## License
+
+Wedges is licensed under the [MIT License](./LICENSE).
+
+## Getting Started
+
+Visit <a href="https://www.lemonsqueezy.com/wedges/docs" target="_blank">Wedges Docs</a> to get started.
+
+## Repository Structure
+
+This repository is organized as a monorepo and is managed with <a href="https://pnpm.io" target="_blank">PNPM</a>.
+
+## Packages
+
+- [packages/wedges-vue](./packages/wedges-vue) - This is the heart of our project – the UI library itself. Here you'll find all the components, utilities, and core functionality of the Wedges UI library.
+
+## Apps
+
+- [apps/www](./apps/docs) - Contains the Vitepress documentation site for the Wedges UI library. This is where we maintain the documentation, examples, and guides for using the library.
+
+## Development
+
+1. Clone the monorepo.
+2. Install the necessary dependencies using PNPM:
+
+```bash
+pnpm i --hoist
+```
+
+To start the development server, run:
+
+```bash
+pnpm dev
+```
+
+## Contributing
+
+Any contributions you make are greatly appreciated. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+
+Please refer to the [CONTRIBUTING](./CONTRIBUTING.md) for more information.
+
+## Connect with us
+
+Follow us <a href="https://twitter.com/lmsqueezy/" target="_blank" rel="noreferrer">@lmsqueezy</a> for the latest and coolest. Let us know what you're building with Wedges!
diff --git a/apps/docs/.vitepress/config.ts b/apps/docs/.vitepress/config.ts
new file mode 100644
index 0000000..feb68a3
--- /dev/null
+++ b/apps/docs/.vitepress/config.ts
@@ -0,0 +1,87 @@
+import path from "node:path";
+import { defineConfig, postcssIsolateStyles } from "vitepress";
+import Icons from "unplugin-icons/vite";
+import tailwind from "tailwindcss";
+import autoprefixer from "autoprefixer";
+import { cssVariables } from "./theme/config/shiki";
+
+// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers'
+import { siteConfig } from "./theme/config/site";
+import ComponentPreviewPlugin from "./theme/plugins/previewer";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: siteConfig.name,
+  titleTemplate: ":title - lemonsqueezy/wedges",
+  description: siteConfig.description,
+  head: [
+    ["link", { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
+    ["link", { rel: "shortcut icon", href: "/favicon-16x16.png" }],
+    ["link", { rel: "apple-touch-icon", href: "/apple-touch-icon.png" }],
+    ["link", { rel: "manifest", href: "/site.webmanifest" }],
+
+    ["meta", { name: "theme-color", media: "(prefers-color-scheme: light)", content: "white" }],
+    ["meta", { name: "theme-color", media: "(prefers-color-scheme: dark)", content: "black" }],
+
+    ["meta", { name: "creator", content: "raymondmuller" }],
+    ["meta", { name: "theme-color", content: "#41b883" }],
+    ["meta", { name: "og:type", content: "website" }],
+    ["meta", { name: "og:locale", content: "en" }],
+    ["meta", { name: "og:site_name", content: siteConfig.name }],
+    ["meta", { name: "og:image", content: siteConfig.ogImage }],
+    ["meta", { name: "twitter:image", content: siteConfig.ogImage }],
+
+  ],
+
+  sitemap: {
+    hostname: "https://wedges-vue.pages.dev",
+    transformItems(items) {
+      return items.filter(item => !item.url.includes("migration"));
+    },
+  },
+  appearance: false,
+
+  lastUpdated: true,
+  themeConfig: {
+    search: {
+      provider: "local",
+    },
+    editLink: {
+      pattern: "https://github.com/raymondmuller/wedges-vue/tree/main/apps/www/src/:path",
+      text: "Edit this page on GitHub",
+    },
+  },
+
+  srcDir: path.resolve(__dirname, "../src"),
+  markdown: {
+    theme: cssVariables,
+    config(md) {
+      md.use(ComponentPreviewPlugin);
+    },
+  },
+  rewrites: {
+    "content/(.*)": "(.*)",
+  },
+  vite: {
+    css: {
+      postcss: {
+        plugins: [
+
+          tailwind() as any,
+          autoprefixer(),
+          postcssIsolateStyles({
+            includeFiles: [/vp-doc\.css/, /base\.css/, /shiki\.css/, /themes\.css/],
+          }),
+        ],
+      },
+    },
+    plugins: [
+      Icons({ compiler: "vue3", autoInstall: true }),
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "../src"),
+      },
+    },
+  },
+});
diff --git a/apps/docs/.vitepress/theme/components/Announcement.vue b/apps/docs/.vitepress/theme/components/Announcement.vue
new file mode 100644
index 0000000..46e0a34
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Announcement.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ArrowRightIcon } from "@iconicicons/vue3";
+import { announcementConfig } from "../config/site";
+import { Separator } from "./ui/separator";
+</script>
+
+<template>
+  <a
+    :href="announcementConfig.link"
+    class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-lg bg-muted"
+  >
+    {{ announcementConfig.icon }} <Separator class="h-4 mx-2" orientation="vertical" />
+    <span class="sm:hidden">{{ announcementConfig.title }}</span>
+    <span class="hidden sm:inline">
+      {{ announcementConfig.title }}
+    </span>
+    <ArrowRightIcon class="w-4 h-4 ml-1" />
+  </a>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Callout.vue b/apps/docs/.vitepress/theme/components/Callout.vue
new file mode 100644
index 0000000..09081fe
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Callout.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "wedges-vue";
+
+interface CalloutProps {
+  icon?: string;
+  title?: string;
+}
+
+defineProps<CalloutProps>();
+</script>
+
+<template>
+  <Alert class="not-docs">
+    <span v-if="icon" class="mr-4 text-2xl">{{ icon }}</span>
+    <AlertTitle v-if="title">
+      {{ title }}
+    </AlertTitle>
+    <AlertDescription>
+      <slot />
+    </AlertDescription>
+  </Alert>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/CodeWrapper.ts b/apps/docs/.vitepress/theme/components/CodeWrapper.ts
new file mode 100644
index 0000000..2a978f8
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/CodeWrapper.ts
@@ -0,0 +1,26 @@
+import { type VNode, cloneVNode, defineComponent } from "vue";
+import { useConfigStore } from "@/stores/config";
+
+export default defineComponent(
+  (props, { slots }) => {
+    const { codeConfig } = useConfigStore();
+
+    return () => {
+      const clonedVNode = slots.default?.()?.[0]
+        ? cloneVNode(slots.default?.()?.[0], {
+          key: JSON.stringify(codeConfig.value),
+        })
+        : undefined;
+
+      // @ts-expect-error  cloneVNode
+      const preVNode = [...clonedVNode?.children].find((node: VNode) => node.type === "pre") as VNode;
+      // @ts-expect-error  cloneVNode
+      const codeVNode = preVNode.children?.at(0) as VNode;
+
+      if (codeVNode)
+        return clonedVNode;
+      else
+        return slots.default?.();
+    };
+  },
+);
diff --git a/apps/docs/.vitepress/theme/components/Color.vue b/apps/docs/.vitepress/theme/components/Color.vue
new file mode 100644
index 0000000..0bc9449
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Color.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps({
+  title: String,
+  hex: String,
+  class: String,
+});
+</script>
+
+<template>
+  <div class="group flex w-full flex-col">
+    <div
+      :class="cn('h-10 w-full group-first:rounded-l group-last:rounded-r', props.class)"
+    />
+
+    <span class="mt-1 pl-1 text-center text-xs text-surf ace-700 md:text-start">{{ title }}</span>
+    <span class="hidden pl-1 font-mono text-[9px] text-surface-400 md:block">{{ hex }}</span>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ColorThemable.vue b/apps/docs/.vitepress/theme/components/ColorThemable.vue
new file mode 100644
index 0000000..8e82f72
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ColorThemable.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps({
+  title: String,
+  hex: String,
+  class: String,
+});
+</script>
+
+<template>
+  <div class="group flex w-full flex-col">
+    <div
+      :class="cn('h-10 w-full rounded-sm ring-1 ring-inset ring-black/10 sm:h-12', props.class)"
+    />
+
+    <span class="mt-1.5 pl-1 text-xs text-surface-700">{{ title }}</span>
+    <span v-if="hex" class="pl-1 font-mono text-[9px] text-surface-400">{{ hex }}</span>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Colors.vue b/apps/docs/.vitepress/theme/components/Colors.vue
new file mode 100644
index 0000000..0fb5f33
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Colors.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps({
+  title: String,
+  class: String,
+});
+
+const delegatedProps = computed(() => {
+  const { title: _, class: __, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <div class="my-8">
+    <div v-if="title" class="mb-3 mt-2 flex items-center gap-2 text-sm font-medium text-surface-900">
+      <span>{{ title }}</span>
+      <span class="select-none text-xs text-surface-200">•</span>
+      <span class="not-prose font-mono text-xs text-surface-500">{{ `wg-${title.toLowerCase()}` }}</span>
+    </div>
+
+    <div :class="cn('grid grid-cols-10', props.class)" v-bind="delegatedProps">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ComponentLoader.vue b/apps/docs/.vitepress/theme/components/ComponentLoader.vue
new file mode 100644
index 0000000..84a1289
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ComponentLoader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+import { Loading } from "wedges-vue";
+
+const props = defineProps<{
+  name: string;
+}>();
+
+const Component = defineAsyncComponent({
+  loadingComponent: Loading,
+  loader: () => import(`@/components/examples/${props.name}.vue`),
+  timeout: 5000,
+  suspensible: false,
+
+});
+</script>
+
+<template>
+  <Component :is="Component" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ComponentPreview.vue b/apps/docs/.vitepress/theme/components/ComponentPreview.vue
new file mode 100644
index 0000000..ba4f7ff
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ComponentPreview.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { CodeIcon, EyeIcon, MoonIcon, SunIcon } from "@iconicicons/vue3";
+import { useToggle } from "@vueuse/core";
+import { codeToHtml } from "shiki";
+import { useData } from "vitepress";
+import { onMounted, ref, watch } from "vue";
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "wedges-vue";
+import { cn } from "wedges-vue/utils";
+import { cssVariables } from "../config/shiki";
+import ComponentLoader from "./ComponentLoader.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  name: string;
+  align?: "center" | "start" | "end";
+}>(), { align: "center" });
+
+const rawString = ref("");
+
+const codeHtml = ref("");
+
+const { isDark } = useData();
+
+const toggleDark = function () {
+  useToggle(isDark)();
+};
+
+onMounted(async () => {
+  try {
+    rawString.value = await import(`@/components/examples/${props.name}.vue?raw`).then(m => m.default);
+    codeHtml.value = `<button title=\"Copy Code\" class=\"copy\"></button><span class="lang">vue</span>` + `${await codeToHtml(rawString.value, {
+      lang: "vue",
+      theme: cssVariables,
+    })}`;
+  }
+  catch (err) {
+    console.error(err);
+  }
+});
+</script>
+
+<template>
+  <div
+    class="relative flex flex-col my-4 space-y-2 not-docs group"
+  >
+    <Tabs default-value="preview" class="relative w-full mr-auto">
+      <div class="flex items-center justify-between pb-3">
+        <TabsList class="justify-start w-full p-0 bg-transparent border-b rounded-none">
+          <TabsTrigger
+            value="preview"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            <EyeIcon class="size-6 mr-1.5" />
+            Preview
+          </TabsTrigger>
+          <TabsTrigger
+            value="code"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            <CodeIcon class="size-6 mr-1.5" />
+            Code
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent
+        value="preview" class="relative border rounded-md"
+        :class="{
+          dark: isDark,
+        }"
+      >
+        <div
+          class="relative flex min-h-[300px] w-full items-center overflow-x-auto p-10  bg-background" :class="{
+            'items-center': align === 'center',
+            'items-start': align === 'start',
+            'items-end': align === 'end',
+          }"
+        >
+          <div
+            :class="cn('preview vp-raw not-docs mx-auto block w-full min-w-fit text-center')"
+          >
+            <ComponentLoader v-bind="$attrs" :name />
+          </div>
+          <Button is-icon-only class="absolute top-3 right-3 z-10 dark:text-white" size="sm" variant="transparent" @click="toggleDark">
+            <MoonIcon v-if="isDark" />
+            <SunIcon v-else />
+          </Button>
+        </div>
+      </TabsContent>
+      <TabsContent value="code" class="!relative">
+        <div v-if="codeHtml" class="language-vue" style="flex: 1;" v-html="codeHtml" />
+        <slot v-else />
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/EditLink.vue b/apps/docs/.vitepress/theme/components/EditLink.vue
new file mode 100644
index 0000000..374d5d6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/EditLink.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { computed } from "vue";
+import { Button } from "wedges-vue";
+import { EditIcon } from "@iconicicons/vue3";
+
+const { theme, page } = useData();
+
+const link = computed(() => {
+  const { text = "Edit this page", pattern = "" } = theme.value.editLink || {};
+  let url: string;
+  if (typeof pattern === "function")
+    url = pattern(page.value);
+
+  else
+    url = pattern.replace(/:path/g, page.value.filePath);
+
+  return { url, text };
+});
+</script>
+
+<template>
+  <Button as="a" :href="link.url" target="_blank" :variant="'ghost'" class="underline mt-8">
+    <EditIcon class="mr-2" />
+    {{ link.text }}
+  </Button>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Kbd.vue b/apps/docs/.vitepress/theme/components/Kbd.vue
new file mode 100644
index 0000000..df44126
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Kbd.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cva } from "class-variance-authority";
+import { computed } from "vue";
+
+interface KbdProps {
+  as?: string;
+  size?: "xs" | "sm" | "md";
+}
+
+const props = withDefaults(defineProps<KbdProps>(), {
+  as: "kbd",
+  size: "sm",
+});
+
+const kbdClass = computed(() => {
+  return cva(
+    "inline-flex items-center pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium",
+    {
+      variants: {
+        size: {
+          xs: "min-h-4 text-[10px] h-4 px-1",
+          sm: "min-h-5 text-[11px] h-5 px-1",
+          md: "min-h-6 text-[12px] h-6 px-1.5",
+        },
+      },
+    },
+  )({
+    size: props.size,
+  });
+});
+</script>
+
+<template>
+  <component :is="props.as" :class="kbdClass">
+    <slot />
+  </component>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/LandingPage.vue b/apps/docs/.vitepress/theme/components/LandingPage.vue
new file mode 100644
index 0000000..1047b53
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/LandingPage.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { buttonVariants } from "wedges-vue";
+import { cn } from "wedges-vue/utils";
+import Announcement from "../components/Announcement.vue";
+import PageAction from "../components/PageAction.vue";
+import PageHeader from "../components/PageHeader.vue";
+import PageHeaderDescription from "../components/PageHeaderDescription.vue";
+import PageHeaderHeading from "../components/PageHeaderHeading.vue";
+import GitHubIcon from "~icons/radix-icons/github-logo";
+</script>
+
+<template>
+  <PageHeader class="page-header pb-8">
+    <Announcement />
+    <PageHeaderHeading>Wedges</PageHeaderHeading>
+    <PageHeaderDescription>
+      An ever-expanding, open-source Vue UI library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
+    </PageHeaderDescription>
+
+    <PageAction>
+      <a
+        href="/docs/introduction"
+        :class="cn(buttonVariants(), 'rounded-[6px]')"
+      >
+        Get Started
+      </a>
+      <a
+        href="https://github.com/raymondmuller/wedges-vue"
+        target="_blank"
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'rounded-[6px]',
+        )"
+      >
+        <GitHubIcon class="mr-2 h-4 w-4" />
+        GitHub
+      </a>
+    </PageAction>
+  </PageHeader>
+  <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted">
+    <img priority src="/images/banner.webp" :width="616" height="411" alt="Wedges banner" class="block w-full rounded-lg object-cover border border-surface-100">
+  </section>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/LinkCard.vue b/apps/docs/.vitepress/theme/components/LinkCard.vue
new file mode 100644
index 0000000..30d2240
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/LinkCard.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{
+  class?: string;
+  href?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <a
+    :class="cn(
+      '!text-inherit !no-underline not-prose flex min-h-[140px] w-full flex-col items-center justify-center gap-4 rounded-xl border border-surface-100 bg-white p-6 text-surface-400 shadow-wg-xs outline-primary transition-colors duration-75 hover:border-surface-200/70 hover:bg-surface-50/50 hover:text-surface-900 sm:p-10 [&>p]:text-center',
+      props.class,
+    )"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </a>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/LinkedCard.vue b/apps/docs/.vitepress/theme/components/LinkedCard.vue
new file mode 100644
index 0000000..4487050
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/LinkedCard.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+</script>
+
+<template>
+  <a :class="cn('flex w-full flex-col items-center rounded-lg border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10', $attrs.class ?? '')">
+    <slot />
+  </a>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Logo.vue b/apps/docs/.vitepress/theme/components/Logo.vue
new file mode 100644
index 0000000..589a6c7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Logo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <a href="/docs/introduction" class="mr-4 md:mr-2 lg:mr-6 flex items-center lg:space-x1 xl:space-x-2">
+    <img src="https://assets-global.website-files.com/6347244ba8d63489ba51c08e/6347244ba8d63469e851c0d6_footer%20small%20logo.svg" alt="Lemon Squeezy Logo">
+
+    <span class="font-sans text-2xl font-medium text-white md:block">
+      Wedges
+    </span>
+  </a>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Logomark.vue b/apps/docs/.vitepress/theme/components/Logomark.vue
new file mode 100644
index 0000000..2ebb07c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Logomark.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+
+defineProps<{
+  loading?: boolean;
+}>();
+</script>
+
+<template>
+  <svg
+    fill="#FFC233"
+    height="28"
+    viewBox="0 0 21 28"
+    width="21"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      :class="cn(loading && 'animate-[flash_1s_infinite_600ms]')"
+      clip-rule="evenodd"
+      d="M6.92833 17.1856L14.4396 20.6583C15.3706 21.0889 16.0278 21.8116 16.3826 22.6406C17.2803 24.7399 16.0535 26.8869 14.1276 27.6591C12.2014 28.4309 10.1486 27.9342 9.2152 25.7511L5.94628 18.0866C5.69297 17.4925 6.32931 16.9087 6.92833 17.1856"
+      fill-rule="evenodd"
+    />
+    <path
+      :class="cn(loading && 'animate-[flash_1s_infinite_400ms]')"
+      clip-rule="evenodd"
+      d="M7.37955 14.9376L15.1332 12.0066C17.7101 11.0325 20.525 12.8756 20.487 15.5536C20.4864 15.5886 20.4858 15.6235 20.4849 15.6588C20.4292 18.2666 17.6926 20.0194 15.1723 19.0968L7.38689 16.2473C6.76584 16.0201 6.76126 15.1713 7.37955 14.9376"
+      fill-rule="evenodd"
+    />
+    <path
+      :class="cn(loading && 'animate-[flash_1s_infinite_200ms]')"
+      clip-rule="evenodd"
+      d="M6.94499 13.9224L14.5671 10.6837C17.0999 9.60736 17.7427 6.37695 15.759 4.51043C15.733 4.48585 15.707 4.46156 15.6807 4.43728C13.7358 2.63207 10.5208 3.26767 9.41358 5.64539L5.99323 12.9915C5.72033 13.5773 6.3371 14.1806 6.94499 13.9224"
+      fill-rule="evenodd"
+    />
+    <path
+      :class="cn(loading && 'animate-[flash_1s_infinite_0ms]')"
+      clip-rule="evenodd"
+      d="M4.98349 12.6426L7.75465 5.04415C8.09822 4.102 8.03458 3.1412 7.67939 2.3122C6.77994 0.21378 4.34409 -0.463579 2.41853 0.309741C0.493284 1.08336 -0.594621 2.84029 0.340622 5.02253L3.63095 12.6787C3.8861 13.272 4.76261 13.2486 4.98349 12.6426"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/MobileNav.vue b/apps/docs/.vitepress/theme/components/MobileNav.vue
new file mode 100644
index 0000000..d5854b6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/MobileNav.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { Button } from "wedges-vue";
+import { docsConfig } from "../config/docs";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+import { ScrollArea } from "./ui/scroll-area";
+import Logo from "./Logo.vue";
+
+const open = ref(false);
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetTrigger as-child>
+      <Button
+        variant="ghost"
+        class="flex-shrink-0 px-2 mr-2 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+      >
+        <svg
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-5 h-5"
+        >
+          <path
+            d="M3 5H11"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3 12H16"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M3 19H21"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span class="sr-only">Toggle Menu</span>
+      </Button>
+    </SheetTrigger>
+    <SheetContent side="left" class="pr-0">
+      <Logo @click="open = false" />
+      <ScrollArea class="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+        <div class="flex flex-col space-y-3">
+          <a
+            v-for="item in docsConfig.mainNav"
+            :key="item.href"
+            :href="item.href"
+            @click="open = false"
+          >
+            {{ item.title }}
+          </a>
+        </div>
+        <div class="flex flex-col space-y-2">
+          <div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col pt-6 space-y-3">
+            <h4 class="font-medium">
+              {{ items.title }}
+            </h4>
+
+            <a
+              v-for="item in items.items" :key="item.href"
+              :href="item.href"
+              class="text-muted-foreground"
+              @click="open = false"
+            >
+              {{ item.title }}
+            </a>
+          </div>
+        </div>
+      </ScrollArea>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/PageAction.vue b/apps/docs/.vitepress/theme/components/PageAction.vue
new file mode 100644
index 0000000..419bee7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/PageAction.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </section>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/PageHeader.vue b/apps/docs/.vitepress/theme/components/PageHeader.vue
new file mode 100644
index 0000000..9e0a505
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/PageHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+
+// import WrapBalancer from 'vue-wrap-balancer'
+</script>
+
+<template>
+  <section
+    :class="cn(
+      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </section>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/PageHeaderDescription.vue b/apps/docs/.vitepress/theme/components/PageHeaderDescription.vue
new file mode 100644
index 0000000..c5e9b55
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/PageHeaderDescription.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import WrapBalancer from "vue-wrap-balancer";
+import { cn } from "wedges-vue/utils";
+</script>
+
+<template>
+  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg text-muted-foreground sm:text-xl', $attrs.class ?? '')" :prefer-native="false">
+    <slot />
+  </WrapBalancer>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/PageHeaderHeading.vue b/apps/docs/.vitepress/theme/components/PageHeaderHeading.vue
new file mode 100644
index 0000000..faea722
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/PageHeaderHeading.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { cn } from "wedges-vue/utils";
+</script>
+
+<template>
+  <h1
+    :class="cn(
+      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </h1>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Steps.vue b/apps/docs/.vitepress/theme/components/Steps.vue
new file mode 100644
index 0000000..a1d6cd8
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Steps.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="[&>h3]:step mb-12 ml-4 border-l pl-8 [counter-reset:step]"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/TabMarkdown.vue b/apps/docs/.vitepress/theme/components/TabMarkdown.vue
new file mode 100644
index 0000000..e52dae2
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/TabMarkdown.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsContent } from "wedges-vue";
+
+withDefaults(defineProps<{
+  title?: string;
+}>(), {
+  title: "",
+});
+</script>
+
+<template>
+  <TabsContent :value="title" class="relative space-y-10">
+    <slot />
+  </TabsContent>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/TabPreview.vue b/apps/docs/.vitepress/theme/components/TabPreview.vue
new file mode 100644
index 0000000..83c27ad
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/TabPreview.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "wedges-vue";
+
+const props = withDefaults(defineProps<{
+  name: string;
+  names?: string[];
+  align?: "center" | "start" | "end";
+  sfcTsCode?: string;
+  sfcTsHtml?: string;
+}>(), {
+  align: "center",
+  names: () => ["CLI", "Manual"],
+});
+</script>
+
+<template>
+  <div>
+    <Tabs :default-value="props.name" class="relative mr-auto w-full">
+      <div class="flex items-center justify-between pb-3">
+        <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+          <TabsTrigger
+            v-for="(tab, index) in props.names"
+            :key="index"
+            :value="tab"
+            class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+          >
+            {{ tab }}
+          </TabsTrigger>
+        </TabsList>
+      </div>
+      <TabsContent v-for="(tab, index) in props.names" :key="index" :value="tab" class="relative space-y-10">
+        <slot :name="tab" />
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/TableOfContent.vue b/apps/docs/.vitepress/theme/components/TableOfContent.vue
new file mode 100644
index 0000000..665cee9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/TableOfContent.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { onContentUpdated } from "vitepress";
+import { shallowRef } from "vue";
+import { buttonVariants } from "wedges-vue";
+import type { TableOfContents, TableOfContentsItem } from "../types/docs";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import { ScrollArea } from "./ui/scroll-area";
+
+import TableOfContentTree from "./TableOfContentTree.vue";
+
+const headers = shallowRef<TableOfContents>();
+
+function getHeadingsWithHierarchy(divId: string) {
+  const div = document.querySelector(divId);
+  if (!div)
+    return { items: [] };
+
+  const headings: HTMLHeadingElement[] = Array.from(
+    div.querySelectorAll("h2, h3"),
+  );
+  const hierarchy: TableOfContents = { items: [] };
+  let currentLevel: TableOfContentsItem | undefined;
+
+  headings.forEach((heading: HTMLHeadingElement) => {
+    const level = Number.parseInt(heading.tagName.charAt(1));
+    if (!heading.id) {
+      const newId = heading.textContent?.replaceAll(/[^a-zA-Z0-9 ]/g, "").replaceAll(" ", "-").toLowerCase();
+      heading.id = `${newId}`;
+    }
+
+    const item: TableOfContentsItem = {
+      title: heading.textContent || "",
+      url: `#${heading.id}`,
+      items: [],
+    };
+
+    if (level === 2) {
+      hierarchy.items.push(item);
+      currentLevel = item;
+    }
+    else if (level === 3 && currentLevel?.items) {
+      currentLevel.items.push(item);
+    }
+    else {
+      hierarchy.items.push(item);
+    }
+  });
+  return hierarchy;
+}
+
+onContentUpdated(() => {
+  headers.value = getHeadingsWithHierarchy(".vp-doc");
+});
+</script>
+
+<template>
+  <template v-if="headers?.items.length">
+    <div class="hidden xl:block">
+      <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
+        <div class="space-y-2">
+          <p class="font-medium">
+            On This Page
+          </p>
+          <TableOfContentTree :tree="headers" :level="1" />
+        </div>
+      </ScrollArea>
+    </div>
+
+    <div class="block mb-6 xl:hidden">
+      <Collapsible>
+        <CollapsibleTrigger :class="buttonVariants({ variant: 'outline' })">
+          On This Page
+        </CollapsibleTrigger>
+        <CollapsibleContent class="pl-4 mt-4 text-sm border-l">
+          <TableOfContentTree :tree="headers" :level="1" />
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  </template>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/TableOfContentTree.vue b/apps/docs/.vitepress/theme/components/TableOfContentTree.vue
new file mode 100644
index 0000000..380fca2
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/TableOfContentTree.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "vue";
+import { useRoute } from "vitepress";
+import { cn } from "wedges-vue/utils";
+import type { TableOfContentsItem } from "../types/docs";
+
+withDefaults(defineProps<{
+  level: number;
+  tree: TableOfContentsItem;
+}>(), {
+  level: 1,
+  tree: () => ({
+    items: [],
+  }),
+});
+
+const route = useRoute();
+const hash = ref("");
+function setHash() {
+  hash.value = location.hash;
+}
+onMounted(() => {
+  window.addEventListener("hashchange", setHash);
+  setHash();
+});
+onUnmounted(() => {
+  window.removeEventListener("hashchange", setHash);
+});
+watch(() => route.path, () => {
+  setHash();
+});
+</script>
+
+<template>
+  <ul :class="cn('m-0 list-none', { 'pl-4': level !== 1 })">
+    <template v-if="tree.items?.length">
+      <li v-for="item in tree.items" :key="item.title" class="mt-0 pt-2">
+        <a
+          :href="item.url"
+          :class="
+            cn('inline-block no-underline transition-colors hover:text-foreground',
+               item.url === hash
+                 ? 'font-medium text-foreground'
+                 : 'text-muted-foreground')"
+        >{{ item.title }} </a>
+
+        <TableOfContentTree v-if="item.items?.length" :tree="item" :level="level + 1" />
+      </li>
+    </template>
+  </ul>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/TabsMarkdown.vue b/apps/docs/.vitepress/theme/components/TabsMarkdown.vue
new file mode 100644
index 0000000..3c008b1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/TabsMarkdown.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue";
+import { Tabs, TabsList, TabsTrigger } from "wedges-vue";
+
+const slots = useSlots();
+
+const tabs = computed(() => slots.default?.()?.map(i => i?.props?.title as string) ?? []);
+</script>
+
+<template>
+  <Tabs :default-value="tabs[0]" class="relative mr-auto w-full">
+    <div class="flex items-center justify-between">
+      <TabsList class="w-full justify-start rounded-none border-b bg-transparent p-0">
+        <TabsTrigger v-for="tab in tabs" :key="tab" :value="tab" class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none">
+          {{ tab }}
+        </TabsTrigger>
+      </TabsList>
+    </div>
+
+    <slot />
+  </Tabs>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/Tooltip.vue b/apps/docs/.vitepress/theme/components/Tooltip.vue
new file mode 100644
index 0000000..3b6e9a6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/Tooltip.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "wedges-vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{
+  content: string;
+}>();
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent>
+        {{ content }}
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/VPImage.vue b/apps/docs/.vitepress/theme/components/VPImage.vue
new file mode 100644
index 0000000..9802b4f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/VPImage.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DefaultTheme } from "vitepress/theme";
+import { withBase } from "vitepress";
+
+defineOptions({ inheritAttrs: false });
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage;
+  alt?: string;
+}>();
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      class="VPImage"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+    >
+    <template v-else>
+      <VPImage
+        class="dark"
+        :image="image.dark"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+      <VPImage
+        class="light"
+        :image="image.light"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+.dark .VPImage.light {
+  display: none;
+}
+</style>
diff --git a/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumb.vue b/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumb.vue
new file mode 100644
index 0000000..0f8f302
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumb.vue
@@ -0,0 +1,5 @@
+<template>
+  <ol class="flex items-center whitespace-nowrap min-w-0">
+    <slot />
+  </ol>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumbItem.vue b/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumbItem.vue
new file mode 100644
index 0000000..6122b63
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/breadcrumb/BreadCrumbItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from "@iconicicons/vue3";
+import { useRoute } from "vitepress";
+
+interface BreadCrumbItemProps {
+  path?: string;
+  lastItem?: boolean;
+  as?: string | object;
+}
+
+const props = withDefaults(defineProps<BreadCrumbItemProps>(), {
+  as: "span",
+});
+const route = useRoute();
+</script>
+
+<template>
+  <li class="text-sm text-muted">
+    <component
+      :is="props.as"
+      :to="props.path"
+      class="flex items-center"
+      :class="{
+        '!font-semibold !text-foreground': route.path === props.path,
+      }"
+    >
+      <slot />
+      <ChevronRightIcon
+        v-if="!props.lastItem"
+        class="flex-shrink-0 h-3 w-3 text-muted mx-2"
+      />
+    </component>
+  </li>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/breadcrumb/index.ts b/apps/docs/.vitepress/theme/components/breadcrumb/index.ts
new file mode 100644
index 0000000..16e61ac
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/breadcrumb/index.ts
@@ -0,0 +1,2 @@
+export { default as BreadCrumb } from "./BreadCrumb.vue";
+export { default as BreadCrumbItem } from "./BreadCrumbItem.vue";
diff --git a/apps/docs/.vitepress/theme/components/index.ts b/apps/docs/.vitepress/theme/components/index.ts
new file mode 100644
index 0000000..85fe754
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/index.ts
@@ -0,0 +1,20 @@
+export { default as Callout } from "./Callout.vue";
+export { default as Color } from "./Color.vue";
+export { default as Colors } from "./Colors.vue";
+export { default as ColorThemable } from "./ColorThemable.vue";
+export { default as ComponentPreview } from "./ComponentPreview.vue";
+export { default as DataAttributesTable } from "./tables/DataAttributesTable.vue";
+export { default as EmitsTable } from "./tables/EmitsTable.vue";
+export { default as LandingPage } from "./LandingPage.vue";
+export { default as LinkCard } from "./LinkCard.vue";
+export { default as LinkedCard } from "./LinkedCard.vue";
+export { default as Logomark } from "./Logomark.vue";
+export { default as PropsTable } from "./tables/PropsTable.vue";
+export { default as SlotsTable } from "./tables/SlotsTable.vue";
+export { default as Steps } from "./Steps.vue";
+export { default as TabMarkdown } from "./TabMarkdown.vue";
+export { default as TabPreview } from "./TabPreview.vue";
+export { default as TabsMarkdown } from "./TabsMarkdown.vue";
+export { default as VPImage } from "./VPImage.vue";
+
+export { Alert, Tabs, TabsContent, TabsList, TabsTrigger } from "wedges-vue";
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseA.vue b/apps/docs/.vitepress/theme/components/prose/ProseA.vue
new file mode 100644
index 0000000..5ead0ed
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseA.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: "",
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+});
+</script>
+
+<template>
+  <NuxtLink :to="href" :target="target" class="text-sky-500 hover:underline underline-offset-3">
+    <slot />
+  </NuxtLink>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseCodeInline.vue b/apps/docs/.vitepress/theme/components/prose/ProseCodeInline.vue
new file mode 100644
index 0000000..01c41a2
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseCodeInline.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+interface ProseCodeInlineProps {
+  variant?: "primary" | "secondary";
+}
+
+const props = withDefaults(defineProps<ProseCodeInlineProps>(), {
+  variant: "primary",
+});
+</script>
+
+<template>
+  <code
+    class="py-0.5 px-1 rounded-none inline"
+    :class="`${
+      props.variant === 'primary'
+        ? 'dark:!bg-[#0F291E] dark:!text-[#4CC38A]'
+        : 'dark:!bg-neutral-600/30 dark:!text-neutral-400'
+    }`"
+  >
+    <slot />
+  </code>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseH1.vue b/apps/docs/.vitepress/theme/components/prose/ProseH1.vue
new file mode 100644
index 0000000..2dac5ea
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseH1.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+
+defineProps<{ id: string }>();
+</script>
+
+<template>
+  <h1 :id="id" class="scroll-mt-[205px] lg:scroll-mt-[156px] font-bold mb-2 !text-4xl mt-12 tracking-tight">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute h-10">
+        <Icon icon="heroicons:hashtag-20-solid" class="w-5 h-5 text-green-400 my-auto" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h1>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseH2.vue b/apps/docs/.vitepress/theme/components/prose/ProseH2.vue
new file mode 100644
index 0000000..47b3780
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseH2.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+
+defineProps<{ id: string }>();
+</script>
+
+<template>
+  <h2 :id="id" class="scroll-mt-[180px] lg:scroll-mt-[141px] font-semibold mb-2.5 text-3xl mt-12">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 py-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute my-auto">
+        <Icon icon="heroicons:hashtag-20-solid" class="w-5 h-5 text-green-400" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h2>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseH3.vue b/apps/docs/.vitepress/theme/components/prose/ProseH3.vue
new file mode 100644
index 0000000..6825c3d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseH3.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+
+defineProps<{ id: string }>();
+</script>
+
+<template>
+  <h3 :id="id" class="scroll-mt-[175px] lg:scroll-mt-[126px] font-semibold mb-1 text-xl mt-11">
+    <NuxtLink :href="`#${id}`" class="group">
+      <div class="-ml-6 pr-2 inline-flex opacity-0 group-hover:opacity-100 transition-opacity absolute h-7">
+        <Icon icon="heroicons:hashtag-20-solid" class="w-4 h-4 text-green-400 my-auto" />
+      </div>
+
+      <slot />
+    </NuxtLink>
+  </h3>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseP.vue b/apps/docs/.vitepress/theme/components/prose/ProseP.vue
new file mode 100644
index 0000000..2e8880a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseP.vue
@@ -0,0 +1,5 @@
+<template>
+  <p class="mb-5">
+    <slot />
+  </p>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseTable.vue b/apps/docs/.vitepress/theme/components/prose/ProseTable.vue
new file mode 100644
index 0000000..84cb95d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseTable.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="-mx-6 md:mx-0 overflow-x-auto mb-12 mt-5 relative">
+    <table class="w-full !table border-b border-[var(--vp-c-divider)] border-x my-0">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseTbody.vue b/apps/docs/.vitepress/theme/components/prose/ProseTbody.vue
new file mode 100644
index 0000000..09d6191
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseTbody.vue
@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseTd.vue b/apps/docs/.vitepress/theme/components/prose/ProseTd.vue
new file mode 100644
index 0000000..3726e02
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseTd.vue
@@ -0,0 +1,5 @@
+<template>
+  <td class="h-12 pb-1 [&:not(:first-child)]:pl-4 text-left">
+    <slot />
+  </td>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseTh.vue b/apps/docs/.vitepress/theme/components/prose/ProseTh.vue
new file mode 100644
index 0000000..6b6fce5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseTh.vue
@@ -0,0 +1,12 @@
+<template>
+  <th class="h-10 pb-1 [&:not(:first-child)]:pl-4 text-left">
+    <slot />
+  </th>
+</template>
+
+<style>
+th > * {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+</style>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseThead.vue b/apps/docs/.vitepress/theme/components/prose/ProseThead.vue
new file mode 100644
index 0000000..95dbdb7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseThead.vue
@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/ProseTr.vue b/apps/docs/.vitepress/theme/components/prose/ProseTr.vue
new file mode 100644
index 0000000..9cdc0cc
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/ProseTr.vue
@@ -0,0 +1,5 @@
+<template>
+  <tr class="rounded-md overflow-hidden dark:!bg-[var(--vp-code-block-bg)]">
+    <slot />
+  </tr>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/prose/index.ts b/apps/docs/.vitepress/theme/components/prose/index.ts
new file mode 100644
index 0000000..2bceca6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/prose/index.ts
@@ -0,0 +1,12 @@
+export { default as ProseA } from "./ProseA.vue";
+export { default as ProseH1 } from "./ProseH1.vue";
+export { default as ProseH2 } from "./ProseH2.vue";
+export { default as ProseH3 } from "./ProseH3.vue";
+export { default as ProseP } from "./ProseP.vue";
+export { default as ProseTh } from "./ProseTh.vue";
+export { default as ProseTd } from "./ProseTd.vue";
+export { default as ProseTr } from "./ProseTr.vue";
+export { default as ProseCodeInline } from "./ProseCodeInline.vue";
+export { default as ProseTable } from "./ProseTable.vue";
+export { default as ProseThead } from "./ProseThead.vue";
+export { default as ProseTbody } from "./ProseTbody.vue";
diff --git a/apps/docs/.vitepress/theme/components/tables/CssVariablesTable.vue b/apps/docs/.vitepress/theme/components/tables/CssVariablesTable.vue
new file mode 100644
index 0000000..3bcd304
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/CssVariablesTable.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ProseCodeInline, ProseTable, ProseTbody, ProseTd, ProseTh, ProseThead, ProseTr } from "../prose";
+
+interface KeyboardDef {
+  cssVariable: string;
+  description: string[];
+};
+
+interface DataAttributesTableProps {
+  data: KeyboardDef[];
+}
+const props = defineProps<DataAttributesTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh class="w-[45%]">
+          <span>CSS Variable</span>
+        </ProseTh>
+        <ProseTh class="w-[55%]">
+          <span>Description</span>
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.cssVariable}-${index}`">
+        <ProseTd>
+          <ProseCodeInline class="!whitespace-normal py-1">
+            {{ prop.cssVariable }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd class="">
+          <div class="flex items-center gap-1">
+            <span size="2" class="leading-5" v-html="prop.description" />
+          </div>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/DataAttributesTable.vue b/apps/docs/.vitepress/theme/components/tables/DataAttributesTable.vue
new file mode 100644
index 0000000..58909aa
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/DataAttributesTable.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import { ProseCodeInline, ProseTable, ProseTbody, ProseTd, ProseTh, ProseThead, ProseTr } from "../prose";
+
+interface KeyboardDef {
+  attribute: string;
+  values: string[];
+};
+
+interface DataAttributesTableProps {
+  data: KeyboardDef[];
+}
+const props = defineProps<DataAttributesTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <div class="absolute top-0 right-2 w-8 h-8 rounded-full border flex items-center justify-center text-[var(--vp-c-text-2)] bg-[var(--vp-button-alt-bg)] border-[var(--vp-c-gray-soft)]">
+      <Icon icon="ph:tag-light" />
+    </div>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh class="w-[45%]">
+          <span>Data Attribute</span>
+        </ProseTh>
+        <ProseTh class="w-[55%]">
+          <span>Value</span>
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.attribute}-${index}`">
+        <ProseTd>
+          <ProseCodeInline class="!text-[13px]">
+            {{ prop.attribute }}
+          </ProseCodeInline>
+        </ProseTd>
+        <ProseTd class="">
+          <ProseCodeInline v-if="Array.isArray(prop.values)" variant="secondary">
+            <span v-for="(value, propIndex) in prop.values" :key="value">
+              {{ propIndex + 1 !== prop.values.length ? `"${value}" | ` : `"${value}"` }}
+            </span>
+          </ProseCodeInline>
+          <span v-else>{{ prop.values }}</span>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/EmitsTable.vue b/apps/docs/.vitepress/theme/components/tables/EmitsTable.vue
new file mode 100644
index 0000000..81280ec
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/EmitsTable.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from "../prose";
+
+interface PropDef {
+  name?: string;
+  required?: boolean;
+  type: string;
+  typeSimple: string;
+  description?: string;
+};
+
+interface EmitsTableProps {
+  data: PropDef[];
+}
+const props = defineProps<EmitsTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <div class="absolute top-0 right-2 w-8 h-8 rounded-full border flex items-center justify-center text-[var(--vp-c-text-2)] bg-[var(--vp-button-alt-bg)] border-[var(--vp-c-gray-soft)]">
+      <Icon icon="ph:at-light" />
+    </div>
+    <thead class="">
+      <ProseTr class="">
+        <ProseTh class="w-1/3">
+          <span>Emit</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Description</span>
+        </ProseTh>
+      </ProseTr>
+    </thead>
+    <tbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
+        <ProseTd>
+          <div class="flex h-full items-start gap-1">
+            <ProseCodeInline class=" !text-[13px]">
+              {{ prop.name }}{{ prop.required ? "*" : null }}
+            </ProseCodeInline>
+          </div>
+        </ProseTd>
+        <ProseTd>
+          <div class="vp-raw [&_a]:underline flex flex-col gap-2 text-sm dark:text-neutral-300" v-html="prop.description" />
+        </ProseTd>
+      </ProseTr>
+    </tbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/KeyboardTable.vue b/apps/docs/.vitepress/theme/components/tables/KeyboardTable.vue
new file mode 100644
index 0000000..6f79eb9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/KeyboardTable.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ProseTable, ProseTbody, ProseTd, ProseTh, ProseThead, ProseTr } from "../prose";
+
+interface KeyboardDef {
+  keys: string[];
+  description: string;
+};
+
+interface DataAttributesTableProps {
+  data: KeyboardDef[];
+}
+const props = defineProps<DataAttributesTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <ProseThead>
+      <ProseTr>
+        <ProseTh class="">
+          <span>Key</span>
+        </ProseTh>
+        <ProseTh class="">
+          <span>Description</span>
+        </ProseTh>
+      </ProseTr>
+    </ProseThead>
+    <ProseTbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop}-${index}`">
+        <ProseTd>
+          <div class="flex items-center gap-1">
+            <kbd
+              v-for="(key, propIndex) in prop.keys"
+              :key="`${key}-${propIndex}`"
+              class="font-sans rounded-md border bg-gray-100 dark:bg-neutral-900 dark:border-neutral-700 border-b-2 px-1.5 py-[1px]"
+            >
+              {{ key }}
+            </kbd>
+          </div>
+        </ProseTd>
+        <ProseTd class="">
+          <div class="flex items-center gap-1">
+            <span v-html="prop.description" />
+          </div>
+        </ProseTd>
+      </ProseTr>
+    </ProseTbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/MethodsTable.vue b/apps/docs/.vitepress/theme/components/tables/MethodsTable.vue
new file mode 100644
index 0000000..ece56b1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/MethodsTable.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from "../prose";
+
+interface PropDef {
+  name?: string;
+  required?: boolean;
+  type: string;
+  typeSimple: string;
+  description?: string;
+};
+
+interface EmitsTableProps {
+  data: PropDef[];
+}
+const props = defineProps<EmitsTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <div class="absolute top-0 right-2 w-8 h-8 rounded-full border flex items-center justify-center text-[var(--vp-c-text-2)] bg-[var(--vp-button-alt-bg)] border-[var(--vp-c-gray-soft)]">
+      <Icon icon="ph:function" />
+    </div>
+    <thead class="">
+      <ProseTr class="">
+        <ProseTh class="w-1/3">
+          <span>Methods</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Type</span>
+        </ProseTh>
+      </ProseTr>
+    </thead>
+    <tbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
+        <ProseTd>
+          <div class="flex h-full items-start gap-1">
+            <ProseCodeInline class=" !text-[13px]">
+              {{ prop.name }}{{ prop.required ? "*" : null }}
+            </ProseCodeInline>
+          </div>
+        </ProseTd>
+        <ProseTd>
+          <ProseCodeInline variant="secondary">
+            {{ prop.type }}
+          </ProseCodeInline>
+          <div class="vp-raw [&_a]:underline flex flex-col gap-2  mt-2 text-sm dark:text-neutral-300" v-html="prop.description" />
+        </ProseTd>
+      </ProseTr>
+    </tbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/PropsTable.vue b/apps/docs/.vitepress/theme/components/tables/PropsTable.vue
new file mode 100644
index 0000000..2fc9628
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/PropsTable.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { SettingsSlidersIcon } from "@iconicicons/vue3";
+import { DividerHorizontalIcon } from "@radix-icons/vue";
+import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from "../prose";
+
+interface PropDef {
+  name?: string;
+  required?: boolean;
+  default?: string | boolean;
+  type: string;
+  typeSimple: string;
+  description?: string;
+}
+
+interface PropsTableProps {
+  data: PropDef[];
+}
+const props = defineProps<PropsTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <div class="absolute top-0 right-2 w-8 h-8 rounded-full border flex items-center justify-center text-[var(--vp-c-text-2)] bg-[var(--vp-button-alt-bg)] border-[var(--vp-c-gray-soft)]">
+      <SettingsSlidersIcon />
+    </div>
+    <thead class="rounded-t-xl">
+      <ProseTr class="">
+        <ProseTh class="w-1/6">
+          <span>Prop</span>
+        </ProseTh>
+
+        <ProseTh class="w-2/3">
+          <span>Type</span>
+        </ProseTh>
+        <ProseTh class="w-1/6">
+          <span>Default</span>
+        </ProseTh>
+      </ProseTr>
+    </thead>
+
+    <tbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
+        <ProseTd>
+          <div class="flex items-start h-full gap-1">
+            <ProseCodeInline class="!text-[13px]">
+              {{ prop.name }} <span v-if="prop.required">*</span>
+            </ProseCodeInline>
+          </div>
+        </ProseTd>
+
+        <ProseTd>
+          <div class="flex items-center gap-1">
+            <div>
+              <ProseCodeInline variant="secondary">
+                {{ prop.typeSimple ? prop.typeSimple : prop.type }}
+              </ProseCodeInline>
+            </div>
+          </div>
+        </ProseTd>
+
+        <ProseTd>
+          <div v-if="prop.default" class="flex items-start h-full gap-1">
+            <ProseCodeInline variant="secondary">
+              {{ prop.default }}
+            </ProseCodeInline>
+          </div>
+          <template v-else-if="prop.type === 'boolean'">
+            <ProseCodeInline variant="secondary">
+              false
+            </ProseCodeInline>
+          </template>
+          <template v-else>
+            <div as="{AccessibleIcon}" label="No default value">
+              <DividerHorizontalIcon />
+            </div>
+          </template>
+        </ProseTd>
+      </ProseTr>
+    </tbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/tables/SlotsTable.vue b/apps/docs/.vitepress/theme/components/tables/SlotsTable.vue
new file mode 100644
index 0000000..11a454f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/tables/SlotsTable.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue";
+import { ProseCodeInline, ProseTable, ProseTd, ProseTh, ProseTr } from "../prose";
+
+interface PropDef {
+  name?: string;
+  required?: boolean;
+  description?: string;
+};
+
+interface SlotsTableProps {
+  data: PropDef[];
+}
+const props = defineProps<SlotsTableProps>();
+</script>
+
+<template>
+  <ProseTable>
+    <div class="absolute top-0 right-2 w-8 h-8 rounded-full border flex items-center justify-center text-[var(--vp-c-text-2)] bg-[var(--vp-button-alt-bg)] border-[var(--vp-c-gray-soft)]">
+      <Icon icon="ph:square-logo-light" />
+    </div>
+    <thead class="">
+      <ProseTr class="">
+        <ProseTh class="w-1/3">
+          <span>Slot</span>
+        </ProseTh>
+        <ProseTh>
+          <span>Description</span>
+        </ProseTh>
+      </ProseTr>
+    </thead>
+    <tbody>
+      <ProseTr v-for="(prop, index) in props.data" :key="`${prop.name}-${index}`">
+        <ProseTd>
+          <div class="flex h-full items-start gap-1">
+            <ProseCodeInline class=" !text-[13px]">
+              {{ prop.name }}
+            </ProseCodeInline>
+          </div>
+        </ProseTd>
+        <ProseTd>
+          {{ prop.description }}
+        </ProseTd>
+      </ProseTr>
+    </tbody>
+  </ProseTable>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/collapsible/Collapsible.vue b/apps/docs/.vitepress/theme/components/ui/collapsible/Collapsible.vue
new file mode 100644
index 0000000..801de7f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { CollapsibleRoot, useForwardPropsEmits } from "radix-vue";
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue";
+
+const props = defineProps<CollapsibleRootProps>();
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleContent.vue b/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 0000000..42d722d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from "radix-vue";
+
+const props = defineProps<CollapsibleContentProps>();
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleTrigger.vue b/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 0000000..baf5fe9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from "radix-vue";
+
+const props = defineProps<CollapsibleTriggerProps>();
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/collapsible/index.ts b/apps/docs/.vitepress/theme/components/ui/collapsible/index.ts
new file mode 100644
index 0000000..fffcc3d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue";
+export { default as CollapsibleContent } from "./CollapsibleContent.vue";
diff --git a/apps/docs/.vitepress/theme/components/ui/command/Command.vue b/apps/docs/.vitepress/theme/components/ui/command/Command.vue
new file mode 100644
index 0000000..11959a5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue";
+import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
+  open: true,
+  modelValue: "",
+});
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandDialog.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..8b8191c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from "radix-vue";
+import type { DialogRootEmits, DialogRootProps } from "radix-vue";
+import { Dialog, DialogContent } from "../dialog";
+import Command from "./Command.vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandEmpty.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..c504ad7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxEmptyProps } from "radix-vue";
+import { ComboboxEmpty } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandGroup.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..486d04a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxGroupProps } from "radix-vue";
+import { ComboboxGroup, ComboboxLabel } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes["class"];
+  heading?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandInput.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..a1bf1e8
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { SearchIcon } from "@iconicicons/vue3";
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes["class"];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <div class="flex items-center px-3 border-b" cmdk-input-wrapper>
+    <SearchIcon class="w-4 h-4 mr-2 opacity-50 shrink-0" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandItem.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..126347e
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue";
+import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandList.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..496019b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue";
+import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(), {
+  dismissable: false,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandSeparator.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..5bbf67d
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import type { ComboboxSeparatorProps } from "radix-vue";
+import { ComboboxSeparator } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/CommandShortcut.vue b/apps/docs/.vitepress/theme/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..592f1d6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/command/index.ts b/apps/docs/.vitepress/theme/components/ui/command/index.ts
new file mode 100644
index 0000000..2f33b76
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/Dialog.vue b/apps/docs/.vitepress/theme/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..51367e0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/Dialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogClose.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..bc3b70a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "radix-vue";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogContent.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..c046bb3
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CloseIcon } from "@iconicicons/vue3";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <CloseIcon class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogDescription.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..ca4fbf5
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogFooter.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..04d27f9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogHeader.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..6989a58
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogScrollContent.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..1c13dd1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CloseIcon } from "@iconicicons/vue3";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <CloseIcon class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogTitle.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..01eab08
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/DialogTrigger.vue b/apps/docs/.vitepress/theme/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..7872f1c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/dialog/index.ts b/apps/docs/.vitepress/theme/components/ui/dialog/index.ts
new file mode 100644
index 0000000..b92d799
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from "./Dialog.vue";
+export { default as DialogClose } from "./DialogClose.vue";
+export { default as DialogTrigger } from "./DialogTrigger.vue";
+export { default as DialogHeader } from "./DialogHeader.vue";
+export { default as DialogTitle } from "./DialogTitle.vue";
+export { default as DialogDescription } from "./DialogDescription.vue";
+export { default as DialogContent } from "./DialogContent.vue";
+export { default as DialogScrollContent } from "./DialogScrollContent.vue";
+export { default as DialogFooter } from "./DialogFooter.vue";
diff --git a/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollArea.vue b/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 0000000..f4835b0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from "radix-vue";
+import { cn } from "wedges-vue/utils";
+import ScrollBar from "./ScrollBar.vue";
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollBar.vue b/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 0000000..b871ea0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "vertical",
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/scroll-area/index.ts b/apps/docs/.vitepress/theme/components/ui/scroll-area/index.ts
new file mode 100644
index 0000000..cd655e0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";
diff --git a/apps/docs/.vitepress/theme/components/ui/separator/Separator.vue b/apps/docs/.vitepress/theme/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..03f8ec9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/separator/Separator.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { Separator, type SeparatorProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="cn('shrink-0 bg-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+  />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/separator/index.ts b/apps/docs/.vitepress/theme/components/ui/separator/index.ts
new file mode 100644
index 0000000..aae7f1a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/Sheet.vue b/apps/docs/.vitepress/theme/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..51367e0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/Sheet.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetClose.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..bc3b70a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "radix-vue";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetContent.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..ef14b84
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { CloseIcon } from "@iconicicons/vue3";
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { cn } from "wedges-vue/utils";
+import { type SheetVariants, sheetVariants } from ".";
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes["class"];
+  side?: SheetVariants["side"];
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<SheetContentProps>();
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, side: __, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <CloseIcon class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetDescription.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..d41c1e4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { DialogDescription, type DialogDescriptionProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetFooter.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..04d27f9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetHeader.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..43d91fe
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetTitle.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..372d0d4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { DialogTitle, type DialogTitleProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/SheetTrigger.vue b/apps/docs/.vitepress/theme/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..7872f1c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/sheet/index.ts b/apps/docs/.vitepress/theme/components/ui/sheet/index.ts
new file mode 100644
index 0000000..55ff909
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/sheet/index.ts
@@ -0,0 +1,31 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+
+export const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/Toast.vue b/apps/docs/.vitepress/theme/components/ui/toast/Toast.vue
new file mode 100644
index 0000000..15d97a6
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/Toast.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+import { type ToastProps, toastVariants } from ".";
+
+const props = defineProps<ToastProps>();
+
+const emits = defineEmits<ToastRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastAction.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastAction.vue
new file mode 100644
index 0000000..fae8253
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastAction.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ToastAction, type ToastActionProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastClose.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastClose.vue
new file mode 100644
index 0000000..fa0f5f1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastClose.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ToastClose, type ToastCloseProps } from "radix-vue";
+import { CloseIcon } from "@iconicicons/vue3";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes["class"];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <CloseIcon class="h-4 w-4" />
+  </ToastClose>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastDescription.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastDescription.vue
new file mode 100644
index 0000000..ab8bb68
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastDescription.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ToastDescription, type ToastDescriptionProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastProvider.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastProvider.vue
new file mode 100644
index 0000000..707111b
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ToastProvider, type ToastProviderProps } from "radix-vue";
+
+const props = defineProps<ToastProviderProps>();
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastTitle.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastTitle.vue
new file mode 100644
index 0000000..3dbed0a
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastTitle.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ToastTitle, type ToastTitleProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/ToastViewport.vue b/apps/docs/.vitepress/theme/components/ui/toast/ToastViewport.vue
new file mode 100644
index 0000000..a8088d1
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/ToastViewport.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { ToastViewport, type ToastViewportProps } from "radix-vue";
+import { cn } from "wedges-vue/utils";
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/Toaster.vue b/apps/docs/.vitepress/theme/components/ui/toast/Toaster.vue
new file mode 100644
index 0000000..849fc03
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/Toaster.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { isVNode } from "vue";
+import { useToast } from "./use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from ".";
+
+const { toasts } = useToast();
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose />
+      </div>
+      <component :is="toast.action" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/index.ts b/apps/docs/.vitepress/theme/components/ui/toast/index.ts
new file mode 100644
index 0000000..0365b00
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/index.ts
@@ -0,0 +1,38 @@
+import type { ToastRootProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+
+export { default as Toaster } from "./Toaster.vue";
+export { default as Toast } from "./Toast.vue";
+export { default as ToastViewport } from "./ToastViewport.vue";
+export { default as ToastAction } from "./ToastAction.vue";
+export { default as ToastClose } from "./ToastClose.vue";
+export { default as ToastTitle } from "./ToastTitle.vue";
+export { default as ToastDescription } from "./ToastDescription.vue";
+export { default as ToastProvider } from "./ToastProvider.vue";
+export { toast, useToast } from "./use-toast";
+
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+                    "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+type ToastVariants = VariantProps<typeof toastVariants>;
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes["class"];
+  variant?: ToastVariants["variant"];
+  onOpenChange?: ((value: boolean) => void) | undefined;
+}
diff --git a/apps/docs/.vitepress/theme/components/ui/toast/use-toast.ts b/apps/docs/.vitepress/theme/components/ui/toast/use-toast.ts
new file mode 100644
index 0000000..58b1a68
--- /dev/null
+++ b/apps/docs/.vitepress/theme/components/ui/toast/use-toast.ts
@@ -0,0 +1,165 @@
+import { computed, ref } from "vue";
+import type { Component, VNode } from "vue";
+import type { ToastProps } from ".";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode);
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: string;
+  description?: StringOrVNode;
+  action?: Component;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+    type: ActionType["ADD_TOAST"];
+    toast: ToasterToast;
+  }
+  | {
+    type: ActionType["UPDATE_TOAST"];
+    toast: Partial<ToasterToast>;
+  }
+  | {
+    type: ActionType["DISMISS_TOAST"];
+    toastId?: ToasterToast["id"];
+  }
+  | {
+    type: ActionType["REMOVE_TOAST"];
+    toastId?: ToasterToast["id"];
+  };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return;
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+}
+
+const state = ref<State>({
+  toasts: [],
+});
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT);
+      break;
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      );
+      break;
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action;
+
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      }
+      else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false,
+            }
+          : t,
+      );
+      break;
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = [];
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId);
+
+      break;
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  };
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast(props: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    });
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id });
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss();
+      },
+    },
+  });
+
+  return {
+    id,
+    dismiss,
+    update,
+  };
+}
+
+export { toast, useToast };
diff --git a/apps/docs/.vitepress/theme/config/docs.ts b/apps/docs/.vitepress/theme/config/docs.ts
new file mode 100644
index 0000000..e85814c
--- /dev/null
+++ b/apps/docs/.vitepress/theme/config/docs.ts
@@ -0,0 +1,245 @@
+export interface NavItem {
+  title: string;
+  href?: string;
+  disabled?: boolean;
+  external?: boolean;
+  icon?: string;
+  label?: string;
+}
+
+export type SidebarNavItem = NavItem & {
+  items: SidebarNavItem[];
+};
+
+export type NavItemWithChildren = NavItem & {
+  items: NavItemWithChildren[];
+};
+
+interface DocsConfig {
+  mainNav: NavItem[];
+  sidebarNav: SidebarNavItem[];
+}
+
+export const docsConfig: DocsConfig = {
+  mainNav: [
+    {
+      title: "Docs",
+      href: "/docs/introduction",
+    },
+    {
+      title: "Components",
+      href: "/docs/components/alert",
+    },
+    {
+      title: "Figma",
+      href: "https://www.lemonsqueezy.com/wedges/figma",
+      external: true,
+    },
+    {
+      title: "GitHub",
+      href: "https://github.com/raymondmuller/wedges-vue",
+      external: true,
+    },
+  ],
+  sidebarNav: [
+    {
+      title: "Getting Started",
+      items: [
+        {
+          title: "Introduction",
+          href: "/docs/introduction",
+          items: [],
+        },
+        {
+          title: "Requirements",
+          href: "/docs/requirements",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "Installation",
+      items: [
+        {
+          title: "Default",
+          href: "/docs/installation/default",
+          items: [],
+        },
+        {
+          title: "Laravel",
+          href: "/docs/installation/laravel",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "Theming",
+      items: [
+        {
+          title: "Tailwind Plugin",
+          href: "/docs/theming/tailwind-css-plugin",
+          items: [],
+        },
+        {
+          title: "Color System",
+          href: "/docs/theming/color-system",
+          items: [],
+        },
+        {
+          title: "Default Themes",
+          href: "/docs/theming/default-themes",
+          items: [],
+        },
+        {
+          title: "Custom Themes",
+          href: "/docs/theming/custom-themes",
+          items: [],
+        },
+        {
+          title: "Additional Utilities",
+          href: "/docs/theming/additional-utilities",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "Components",
+      items: [
+        {
+          title: "Alert",
+          href: "/docs/components/alert",
+          items: [],
+        },
+        {
+          title: "Avatar",
+          href: "/docs/components/avatar",
+          items: [],
+        },
+        {
+          title: "Avatar Group",
+          href: "/docs/components/avatar-group",
+          items: [],
+        },
+        {
+          title: "Badge",
+          href: "/docs/components/badge",
+          items: [],
+        },
+        {
+          title: "Button",
+          href: "/docs/components/button",
+          items: [],
+        },
+        {
+          title: "Button Group",
+          href: "/docs/components/button-group",
+          items: [],
+        },
+        {
+          title: "Checkbox",
+          href: "/docs/components/checkbox",
+          items: [],
+        },
+        {
+          title: "Checkbox Group",
+          href: "/docs/components/checkbox-group",
+          items: [],
+        },
+        {
+          title: "Dropdown Menu",
+          href: "/docs/components/dropdown-menu",
+          items: [],
+        },
+        {
+          title: "Input",
+          href: "/docs/components/input",
+          items: [],
+        },
+        {
+          title: "Kbd",
+          href: "/docs/components/kbd",
+          label: "New",
+          items: [],
+        },
+        {
+          title: "Label",
+          href: "/docs/components/label",
+          items: [],
+        },
+        {
+          title: "Loading",
+          href: "/docs/components/loading",
+          items: [],
+        },
+        {
+          title: "Popover",
+          href: "/docs/components/popover",
+          items: [],
+        },
+        {
+          title: "Progress Bar",
+          href: "/docs/components/progress-bar",
+          label: "New",
+          items: [],
+        },
+        {
+          title: "Progress Circle",
+          href: "/docs/components/progress-circle",
+          label: "New",
+          items: [],
+        },
+        {
+          title: "Radio Group",
+          href: "/docs/components/radio-group",
+          items: [],
+        },
+        {
+          title: "Slider",
+          href: "/docs/components/slider",
+          label: "New",
+          items: [],
+        },
+        {
+          title: "Switch",
+          href: "/docs/components/switch",
+          items: [],
+        },
+        {
+          title: "Switch Group",
+          href: "/docs/components/switch-group",
+          items: [],
+        },
+        {
+          title: "Tabs",
+          href: "/docs/components/tabs",
+          items: [],
+        },
+        {
+          title: "Tag",
+          href: "/docs/components/tag",
+          items: [],
+        },
+        {
+          title: "Textarea",
+          href: "/docs/components/textarea",
+          items: [],
+        },
+        {
+          title: "Toggle",
+          href: "/docs/components/toggle",
+          items: [],
+        },
+        {
+          title: "Toggle Group",
+          href: "/docs/components/toggle-group",
+          items: [],
+        },
+        {
+          title: "Tooltip",
+          href: "/docs/components/tooltip",
+          items: [],
+        },
+      ],
+    },
+  ],
+};
diff --git a/apps/docs/.vitepress/theme/config/shiki.ts b/apps/docs/.vitepress/theme/config/shiki.ts
new file mode 100644
index 0000000..7ec8986
--- /dev/null
+++ b/apps/docs/.vitepress/theme/config/shiki.ts
@@ -0,0 +1,6 @@
+import { createCssVariablesTheme } from "shiki";
+
+export const cssVariables = createCssVariablesTheme({
+  variablePrefix: "--shiki-",
+  variableDefaults: {},
+});
diff --git a/apps/docs/.vitepress/theme/config/site.ts b/apps/docs/.vitepress/theme/config/site.ts
new file mode 100644
index 0000000..3c018be
--- /dev/null
+++ b/apps/docs/.vitepress/theme/config/site.ts
@@ -0,0 +1,17 @@
+export const siteConfig = {
+  name: "wedges-vue",
+  url: "https://github.com/raymondmuller/wedges-vue",
+  ogImage: "https://lemonsqueezy.com/wedges/docs/opengraph-image.png?c3c6e93219970a74",
+  description: "Beautifully designed components by LemonSqueezy, now available for Vue.",
+  links: {
+    twitter: "https://twitter.com/raymondmuller",
+    github: "https://github.com/raymondmuller/wedges-vue",
+  },
+  keywords: "LemonSqueezy,Wedges,Vue,Nuxt,Vue Components,TailwindCSS,Radix Vue",
+};
+
+export const announcementConfig = {
+  icon: "✨",
+  title: "Now available for Vue",
+  link: "/docs/introduction",
+};
diff --git a/apps/docs/.vitepress/theme/index.ts b/apps/docs/.vitepress/theme/index.ts
new file mode 100644
index 0000000..730b1a7
--- /dev/null
+++ b/apps/docs/.vitepress/theme/index.ts
@@ -0,0 +1,25 @@
+// https://vitepress.dev/guide/custom-theme
+import type { Theme } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import Layout from "./layout/MainLayout.vue";
+import DocsLayout from "./layout/DocsLayout.vue";
+import * as components from "./components";
+
+const examples = import.meta.glob("./examples/*.vue", { eager: true });
+import "./style.css";
+import "./styles/shiki.css";
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ app }) {
+    // ...
+    app.component("docs", DocsLayout);
+
+    for (const component of Object.keys(components))
+      app.component(component, components[component]);
+
+    for (const example of Object.keys(examples))
+      app.component(example, examples[example]);
+  },
+} satisfies Theme;
diff --git a/apps/docs/.vitepress/theme/layout/DocsLayout.vue b/apps/docs/.vitepress/theme/layout/DocsLayout.vue
new file mode 100644
index 0000000..9caeca0
--- /dev/null
+++ b/apps/docs/.vitepress/theme/layout/DocsLayout.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { useData, useRoute } from "vitepress";
+import { Badge } from "wedges-vue";
+import { ChevronRightIcon, CodeIcon, LinkIcon } from "@iconicicons/vue3";
+import { ScrollArea } from "../components/ui/scroll-area";
+import { docsConfig } from "../config/docs";
+import TableOfContentVue from "../components/TableOfContent.vue";
+import EditLink from "../components/EditLink.vue";
+
+const $route = useRoute();
+const { frontmatter } = useData();
+
+const sourceLink = "https://github.com/raymondmuller/wedges-vue/tree/main/";
+</script>
+
+<template>
+  <div class="border-b">
+    <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[250px_minmax(0,1fr)] lg:gap-10">
+      <aside
+        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
+      >
+        <ScrollArea orientation="vertical" class="relative h-full py-6 pr-6 overflow-hidden lg:py-8" :type="'auto'">
+          <div class="w-full">
+            <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
+              <h4
+                class="px-2 py-1 mb-1 text-sm font-semibold rounded-md"
+              >
+                {{ docsGroup.title }}
+              </h4>
+
+              <div
+                v-for="doc in docsGroup.items "
+                :key="doc.title"
+                class="relative [&>a]:first:after:top-4 [&>a]:last:after:bottom-4"
+              >
+                <a
+                  v-if="doc.href"
+                  :disabled="doc.disabled"
+                  :href="doc.href"
+                  class="flex w-full items-center gap-2 rounded-md py-1 pl-9 pr-3 !outline-0 hover:bg-surface text-gray-500 hover:text-slate-600 focus-visible:bg-surface-50 focus-visible:text-slate-600 before:pointer-events-none before:absolute before:left-[9px] before:top-1/2 before:z-10 before:h-[5px] before:w-[5px] before:-translate-y-1/2 before:rounded-full after:absolute after:bottom-0 after:left-[11px] after:top-0 after:w-[1px] after:bg-gray-100 dark:after:bg-gray-800 before:bg-slate-300"
+                  :class="{
+                    '!font-medium !text-primary before:bg-primary': $route.path === `${doc.href}.html`,
+                  }"
+                >
+                  {{ doc.title }}
+
+                  <Badge v-if="doc.label" color="primary" size="sm" class="ml-2 no-underline group-hover:no-underline">
+                    {{ doc.label }}
+                  </Badge>
+                </a>
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </aside>
+
+      <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_250px]">
+        <div class="w-full min-w-0 mx-auto">
+          <div class="block xl:hidden">
+            <TableOfContentVue />
+          </div>
+
+          <div class="flex items-center mb-4 space-x-1 text-sm text-muted-foreground">
+            <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+              Docs
+            </div>
+            <ChevronRightIcon class="w-4 h-4" />
+            <div class="font-medium text-foreground">
+              {{ frontmatter.title }}
+            </div>
+          </div>
+
+          <div class="space-y-2">
+            <h1 class="text-4xl font-bold tracking-tight scroll-m-20">
+              {{ frontmatter.title }}
+            </h1>
+            <p class="text-lg text-muted-foreground">
+              {{ frontmatter.description }}
+            </p>
+          </div>
+
+          <div class="flex items-center pt-4 space-x-2">
+            <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-surface text-foreground hover:bg-surface-100">
+              <LinkIcon class="mr-1" />
+              Docs
+            </a>
+            <a v-if="frontmatter.source" :href="sourceLink + frontmatter.source" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-surface text-foreground hover:bg-surface-100">
+              <CodeIcon class="mr-1" />
+              Component Source
+            </a>
+            <a v-if="frontmatter.primitive" :href="frontmatter.primitive" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-surface text-foreground hover:bg-surface-100">
+              Primitive API Reference
+            </a>
+          </div>
+
+          <div class="vp-doc not-prose">
+            <slot />
+          </div>
+
+          <EditLink />
+        </div>
+
+        <div class="hidden text-sm xl:block">
+          <div class="sticky top-16 -mt-5 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+            <TableOfContentVue />
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/layout/MainLayout.vue b/apps/docs/.vitepress/theme/layout/MainLayout.vue
new file mode 100644
index 0000000..cba47b4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/layout/MainLayout.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { useMagicKeys } from "@vueuse/core";
+import { Content, useRoute, useRouter } from "vitepress";
+import { ref, watch } from "vue";
+import { Button } from "wedges-vue";
+import Logo from "../components/Logo.vue";
+import MobileNav from "../components/MobileNav.vue";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../components/ui/command";
+import { Dialog, DialogContent } from "../components/ui/dialog";
+import { Toaster as DefaultToaster, Toaster as NewYorkSonner, Toaster as NewYorkToaster } from "../components/ui/toast";
+import { type NavItem, docsConfig } from "../config/docs";
+
+import Kbd from "../components/Kbd.vue";
+
+import SimpleIconsGithubLogo from "~icons/simple-icons/github";
+import SimpleIconsTwitterLogo from "~icons/simple-icons/x";
+
+import Circle from "~icons/radix-icons/circle";
+import File from "~icons/radix-icons/file";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const $route = useRoute();
+const $router = useRouter();
+
+const links = [
+  {
+    name: "GitHub",
+    href: "https://github.com/raymondmuller/wedges-vue",
+    icon: SimpleIconsGithubLogo,
+  },
+  {
+    name: "X",
+    href: "https://twitter.com/raymondmuller",
+    icon: SimpleIconsTwitterLogo,
+  },
+];
+
+const isOpen = ref(false);
+
+const { Meta_K, Ctrl_K } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === "k" && (e.metaKey || e.ctrlKey))
+      e.preventDefault();
+  },
+});
+
+watch([Meta_K, Ctrl_K], (v) => {
+  if (v[0] || v[1])
+    isOpen.value = true;
+});
+
+function handleSelectLink(item: NavItem) {
+  if (item.external)
+    window.open(item.href, "_blank");
+  else
+    $router.go(item.href);
+
+  isOpen.value = false;
+}
+
+watch(() => $route.path, (_) => {
+  // @ts-expect-error View Transition API not supported by all the browser yet
+  if (document.startViewTransition) {
+    // @ts-expect-error View Transition API not supported by all the browser yet
+    document.startViewTransition(() => {
+    });
+  }
+});
+</script>
+
+<template>
+  <div v-if="$route.data.frontmatter.layout === false">
+    <Content :key="$route.path" />
+  </div>
+  <div v-else class="flex flex-col min-h-screen bg-background">
+    <header class="sticky top-0 z-40 border-b bg-primary-600 backdrop-blur-lg border-border">
+      <div
+        class="container min-h-[72px] gap-6 md:grid md:min-h-[88px] md:grid-cols-[1fr_auto_1fr] mx-auto flex items-center h-14 max-w-screen-xl"
+      >
+        <div class="hidden mr-4 md:mr-1 md:flex">
+          <Logo />
+        </div>
+
+        <div>
+          <nav
+            class="flex items-center space-x-6 text-sm font-medium max-lg:space-x-4"
+          >
+            <a
+              v-for="route in docsConfig.mainNav"
+              :key="route.title"
+              :href="route.href"
+              :target="route.external ? '_target' : undefined"
+              class="transition-colors hover:text-white/80 text-white/70"
+              :class="{
+                'font-semibold !text-white': $route.path === `${route.href}.html`,
+                'hidden lg:block': route?.href?.includes('github'),
+              }"
+            >
+              {{ route.title }}
+            </a>
+          </nav>
+        </div>
+        <MobileNav />
+
+        <div class="flex items-center justify-between flex-1 space-x-2 md:justify-end">
+          <div class="flex-1 w-full md:w-auto md:flex-none">
+            <Button
+              variant="tertiary"
+              class="relative h-8 w-full justify-start sm:pr-12 md:w-40 lg:w-64"
+              @click="isOpen = true"
+            >
+              <span class="hidden lg:inline-flex">Search documentation...</span>
+              <span class="inline-flex lg:hidden">Search...</span>
+              <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                <span class="text-xs">⌘</span>K
+              </Kbd>
+            </Button>
+          </div>
+
+          <nav class="flex items-center text-white">
+            <Button
+              v-for="link in links"
+              :key="link.name"
+              as="a"
+              class="w-9 h-9"
+              :href="link.href" target="_blank"
+              variant="link"
+              size="xs-icon"
+            >
+              <component :is="link.icon" class="size-5 text-white" />
+            </Button>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <div class="flex-1 bg-background max-w-screen-xl mx-auto w-full">
+      <Transition name="fade" mode="out-in">
+        <component :is="'docs'" v-if="$route.path.includes('docs')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="'examples'" v-else-if="$route.path.includes('examples')">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </component>
+        <component :is="$route.data.frontmatter.layout" v-else-if="$route.data.frontmatter.layout">
+          <slot />
+        </component>
+        <main v-else class="container">
+          <Transition name="fade" mode="out-in">
+            <Content :key="$route.path" />
+          </Transition>
+        </main>
+      </Transition>
+    </div>
+
+    <footer class="py-6 md:px-8 md:py-0">
+      <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+        <div class="text-sm leading-loose text-center text-muted-foreground md:text-left">
+          <span class="inline-block">
+            Built and designed by
+            <a
+              href="https://lemonsqueezy.com"
+              target="_blank"
+              class="font-bold underline underline-offset-4 decoration-foreground"
+            >
+              lemon squeezy
+            </a>
+          </span>
+          <span class="ml-0.5"> . </span>
+          <span class="inline-block ml-2">
+            Ported to Vue by
+            <a
+              href="https://twitter.com/raymondmuller"
+              target="_blank"
+              class="font-bold underline underline-offset-4 decoration-foreground"
+            >
+              raymondmuller
+            </a>
+          </span>
+          <span class="ml-0.5"> . </span>
+          <span class="inline-block ml-2">
+            The code source is available on
+            <a
+              href="https://github.com/raymondmuller/wedges-vue"
+              target="_blank"
+              class="font-bold underline underline-offset-4 decoration-foreground"
+            >
+              GitHub
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+
+    <Dialog v-model:open="isOpen">
+      <DialogContent class="p-0">
+        <Command>
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandEmpty>
+            No results found.
+          </CommandEmpty>
+          <CommandList
+            @escape-key-down=" isOpen = false"
+          >
+            <CommandGroup heading="Links">
+              <CommandItem
+                v-for="item in docsConfig.mainNav"
+                :key="item.title"
+                :heading="item.title"
+                :value="item.title"
+                class="py-3"
+                @select="handleSelectLink(item)"
+              >
+                <File class="w-5 h-5 mr-2" />
+                <span>{{ item.title }}</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup v-for="item in docsConfig.sidebarNav" :key="item.title" :heading="item.title">
+              <CommandItem
+                v-for="subItem in item.items"
+                :key="subItem.title"
+                :heading="subItem.title"
+                :value="subItem.title"
+                class="py-3"
+                @select="
+                  handleSelectLink(subItem)"
+              >
+                <Circle class="w-4 h-4 mr-2" />
+                <span>{{ subItem.title }}</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+    <DefaultToaster />
+    <NewYorkSonner :theme="'system'" />
+    <NewYorkToaster />
+  </div>
+</template>
diff --git a/apps/docs/.vitepress/theme/plugins/previewer.ts b/apps/docs/.vitepress/theme/plugins/previewer.ts
new file mode 100644
index 0000000..c2a3257
--- /dev/null
+++ b/apps/docs/.vitepress/theme/plugins/previewer.ts
@@ -0,0 +1,21 @@
+import type { MarkdownRenderer } from "vitepress";
+import { parseProps } from "./utils";
+
+export default function (md: MarkdownRenderer) {
+  function addRenderRule(type: string) {
+    const defaultRender = md.renderer.rules[type];
+    md.renderer.rules[type] = (tokens, idx, options, env, self) => {
+      const token = tokens[idx];
+      const content = token.content.trim();
+      if (!content.match(/^<ComponentPreview\s/) || !content.endsWith("/>"))
+        return defaultRender!(tokens, idx, options, env, self);
+
+      const props = parseProps(content);
+      const { attrs } = props;
+      const demoScripts = `<ComponentPreview ${attrs ?? ""} v-bind='${JSON.stringify(props)}'></ComponentPreview>`.trim();
+      return demoScripts;
+    };
+  }
+  addRenderRule("html_block");
+  addRenderRule("html_inline");
+}
diff --git a/apps/docs/.vitepress/theme/plugins/utils.ts b/apps/docs/.vitepress/theme/plugins/utils.ts
new file mode 100644
index 0000000..2a497c4
--- /dev/null
+++ b/apps/docs/.vitepress/theme/plugins/utils.ts
@@ -0,0 +1,40 @@
+// Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
+
+import { baseParse } from "@vue/compiler-core";
+import type { AttributeNode, ElementNode } from "@vue/compiler-core";
+
+export interface GenerateOptions {
+  attrs?: string;
+  props: Record<string, any>;
+  path: string;
+  code: string;
+}
+
+export function isUndefined(v: any): v is undefined {
+  return v === undefined || v === null;
+}
+
+function getPropsMap(attrs: any[]) {
+  const map: Record<string, any> = {};
+  for (const { name, value, exp, arg } of attrs) {
+    if (name === "bind") {
+      if (!isUndefined(arg?.content))
+        map[arg.content] = JSON.parse(exp.content);
+      continue;
+    }
+    if (isUndefined(value?.content) || value?.content === "")
+      map[name] = true;
+    else if (["true", "false"].includes(value?.content || ""))
+      map[name] = value?.content === "true";
+    else
+      map[name] = value?.content;
+  }
+  return map;
+}
+
+export function parseProps(content: string) {
+  const ast = baseParse(content);
+  const demoElement = ast.children[0] as ElementNode;
+
+  return getPropsMap(demoElement.props as AttributeNode[]);
+}
diff --git a/apps/docs/.vitepress/theme/style.css b/apps/docs/.vitepress/theme/style.css
new file mode 100644
index 0000000..e34f94f
--- /dev/null
+++ b/apps/docs/.vitepress/theme/style.css
@@ -0,0 +1,163 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+	:root {
+		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+			
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 72.22% 50.59%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 5% 64.9%;
+		--radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+
+	html {
+		-webkit-text-size-adjust: 100%;
+		font-variation-settings: normal;
+	}
+	body {
+		@apply bg-background text-foreground min-h-screen antialiased font-sans;
+		/* font-feature-settings: "rlig" 1, "calt" 1; */
+		font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+	}
+
+	/* Mobile tap highlight */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
+	html {
+		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
+	}
+
+	/* Font face Geist font */
+
+	@font-face {
+		font-family: "geist-sans";
+		font-style: normal;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2");
+	}
+
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
+
+	/* Firefox */
+	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
+	html {
+		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
+	}
+
+	html.dark {
+		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
+	}
+
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
+
+	.antialised {
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+}
+
+
+@layer utilities {
+	.step {
+		counter-increment: step;
+	}
+
+	.step:before {
+		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+		@apply -ml-[50px] -mt-1;
+		content: counter(step);
+	}	
+}
+
+@media (max-width: 640px) {
+	.container {
+		@apply px-4;
+	}
+}
+
+div[class^="language-"] {
+	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-zinc-950 dark:!bg-zinc-900
+}
+pre {
+	@apply py-4;
+}
+
+pre code {
+	@apply relative  font-mono text-sm ;
+}
+
+pre code .line {
+	@apply  px-4 min-h-6 !py-0.5 w-full inline-block;
+} 
+
+.line-number {
+	@apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+}
\ No newline at end of file
diff --git a/apps/docs/.vitepress/theme/styles/shiki.css b/apps/docs/.vitepress/theme/styles/shiki.css
new file mode 100644
index 0000000..db00282
--- /dev/null
+++ b/apps/docs/.vitepress/theme/styles/shiki.css
@@ -0,0 +1,20 @@
+:root {
+  --shiki-foreground: #FFF8;
+  --shiki-color-background: #ffffff;
+  --shiki-token-constant: #ffffff;
+  --shiki-token-string: #ffffff88;
+  --shiki-token-comment: #ffffff88;
+  --shiki-token-keyword: #ffffff88;
+  --shiki-token-parameter: #AA0000;
+  --shiki-token-function: #ffffff;
+  --shiki-token-string-expression: #ebebeb;
+  --shiki-token-punctuation: #ffffff;
+  --shiki-token-link: #EE0000;
+}
+
+.shiki .highlighted-word {
+	border-radius: calc(var(--radius) - 2px);
+    border-color: rgba(63,63,70,.7);
+    background-color: rgba(63,63,70,.5);
+    padding: 0.25rem;
+}
\ No newline at end of file
diff --git a/apps/docs/.vitepress/theme/styles/themes.css b/apps/docs/.vitepress/theme/styles/themes.css
new file mode 100644
index 0000000..49194d9
--- /dev/null
+++ b/apps/docs/.vitepress/theme/styles/themes.css
@@ -0,0 +1,775 @@
+html {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+}
+
+.theme-zinc {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.5rem;
+}
+
+.theme-zinc.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 240 4.9% 83.9%;
+}
+
+.theme-slate {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+.theme-slate.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 212.7 26.8% 83.9;
+}
+
+.theme-stone {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24 9.8% 10%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.theme-stone.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 60 9.1% 97.8%;
+  --primary-foreground: 24 9.8% 10%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24 5.7% 82.9%;
+}
+
+.theme-gray {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 220.9 39.3% 11%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 224 71.4% 4.1%;
+
+  --radius: 0.35rem;
+}
+
+.theme-gray.dark {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 210 20% 98%;
+  --primary-foreground: 220.9 39.3% 11%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 216 12.2% 83.9%;
+}
+
+.theme-neutral {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 0% 9%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 3.9%;
+
+  --radius: ;
+}
+
+.theme-neutral.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 0 0% 9%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 0% 83.1%;
+}
+
+.theme-red {
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 45.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 3.9%;
+
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 9%;
+
+  --accent: 0 0% 96.1%;
+  --accent-foreground: 0 0% 9%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+
+  --radius: 0.4rem;
+}
+
+.theme-red.dark {
+  --background: 0 0% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --muted: 0 0% 14.9%;
+  --muted-foreground: 0 0% 63.9%;
+
+  --popover: 0 0% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --card: 0 0% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --border: 0 0% 14.9%;
+  --input: 0 0% 14.9%;
+
+  --primary: 0 72.2% 50.6%;
+  --primary-foreground: 0 85.7% 97.3%;
+
+  --secondary: 0 0% 14.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 0 0% 14.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 0 72.2% 50.6%;
+}
+
+.theme-rose {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 346.8 77.2% 49.8%;
+
+  --radius: 0.5rem;
+}
+
+.theme-rose.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 346.8 77.2% 49.8%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 346.8 77.2% 49.8%;
+}
+
+.theme-orange {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 24.6 95% 53.1%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 24.6 95% 53.1%;
+
+  --radius: 0.95rem;
+}
+
+.theme-orange.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 20.5 90.2% 48.2%;
+  --primary-foreground: 60 9.1% 97.8%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 72.2% 50.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20.5 90.2% 48.2%;
+}
+
+.theme-green {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+
+  --primary: 142.1 76.2% 36.3%;
+  --primary-foreground: 355.7 100% 97.3%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --ring: 142.1 76.2% 36.3%;
+
+  --radius: ;
+}
+
+.theme-green.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 0 0% 95%;
+
+  --muted: 0 0% 15%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --popover: 0 0% 9%;
+  --popover-foreground: 0 0% 95%;
+
+  --card: 24 9.8% 10%;
+  --card-foreground: 0 0% 95%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+
+  --primary: 142.1 70.6% 45.3%;
+  --primary-foreground: 144.9 80.4% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --ring: 142.4 71.8% 29.2%;
+}
+
+.theme-blue {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 221.2 83.2% 53.3%;
+
+  --radius: ;
+}
+
+.theme-blue.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 224.3 76.3% 48%;
+}
+
+.theme-yellow {
+  --background: 0 0% 100%;
+  --foreground: 20 14.3% 4.1%;
+
+  --muted: 60 4.8% 95.9%;
+  --muted-foreground: 25 5.3% 44.7%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 20 14.3% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 20 14.3% 4.1%;
+
+  --border: 20 5.9% 90%;
+  --input: 20 5.9% 90%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 60 4.8% 95.9%;
+  --secondary-foreground: 24 9.8% 10%;
+
+  --accent: 60 4.8% 95.9%;
+  --accent-foreground: 24 9.8% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 20 14.3% 4.1%;
+
+  --radius: 0.95rem;
+}
+
+.theme-yellow.dark {
+  --background: 20 14.3% 4.1%;
+  --foreground: 60 9.1% 97.8%;
+
+  --muted: 12 6.5% 15.1%;
+  --muted-foreground: 24 5.4% 63.9%;
+
+  --popover: 20 14.3% 4.1%;
+  --popover-foreground: 60 9.1% 97.8%;
+
+  --card: 20 14.3% 4.1%;
+  --card-foreground: 60 9.1% 97.8%;
+
+  --border: 12 6.5% 15.1%;
+  --input: 12 6.5% 15.1%;
+
+  --primary: 47.9 95.8% 53.1%;
+  --primary-foreground: 26 83.3% 14.1%;
+
+  --secondary: 12 6.5% 15.1%;
+  --secondary-foreground: 60 9.1% 97.8%;
+
+  --accent: 12 6.5% 15.1%;
+  --accent-foreground: 60 9.1% 97.8%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 60 9.1% 97.8%;
+
+  --ring: 35.5 91.7% 32.9%;
+}
+
+.theme-violet {
+  --background: 0 0% 100%;
+  --foreground: 224 71.4% 4.1%;
+
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+
+  --primary: 262.1 83.3% 57.8%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 220 14.3% 95.9%;
+  --secondary-foreground: 220.9 39.3% 11%;
+
+  --accent: 220 14.3% 95.9%;
+  --accent-foreground: 220.9 39.3% 11%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 262.1 83.3% 57.8%;
+
+  --radius: ;
+}
+
+.theme-violet.dark {
+  --background: 224 71.4% 4.1%;
+  --foreground: 210 20% 98%;
+
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+
+  --card: 224 71.4% 4.1%;
+  --card-foreground: 210 20% 98%;
+
+  --border: 215 27.9% 16.9%;
+  --input: 215 27.9% 16.9%;
+
+  --primary: 263.4 70% 50.4%;
+  --primary-foreground: 210 20% 98%;
+
+  --secondary: 215 27.9% 16.9%;
+  --secondary-foreground: 210 20% 98%;
+
+  --accent: 215 27.9% 16.9%;
+  --accent-foreground: 210 20% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 20% 98%;
+
+  --ring: 263.4 70% 50.4%;
+}
diff --git a/apps/docs/.vitepress/theme/types/colors.ts b/apps/docs/.vitepress/theme/types/colors.ts
new file mode 100644
index 0000000..7c16750
--- /dev/null
+++ b/apps/docs/.vitepress/theme/types/colors.ts
@@ -0,0 +1,13 @@
+export type Color =
+  | "zinc"
+  | "slate"
+  | "stone"
+  | "gray"
+  | "neutral"
+  | "red"
+  | "rose"
+  | "orange"
+  | "green"
+  | "blue"
+  | "yellow"
+  | "violet";
diff --git a/apps/docs/.vitepress/theme/types/docs.ts b/apps/docs/.vitepress/theme/types/docs.ts
new file mode 100644
index 0000000..ddce283
--- /dev/null
+++ b/apps/docs/.vitepress/theme/types/docs.ts
@@ -0,0 +1,9 @@
+export interface TableOfContentsItem {
+  title?: string;
+  url?: string;
+  items?: TableOfContentsItem[];
+}
+
+export interface TableOfContents {
+  items: TableOfContentsItem[];
+}
diff --git a/apps/docs/api-examples.md b/apps/docs/api-examples.md
new file mode 100644
index 0000000..6bd8bb5
--- /dev/null
+++ b/apps/docs/api-examples.md
@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
diff --git a/apps/docs/index.md b/apps/docs/index.md
new file mode 100644
index 0000000..17979e1
--- /dev/null
+++ b/apps/docs/index.md
@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Wedges Vue"
+  text: "An ever-expanding, open-source Vue library built with the Wedges Design System, Radix primitives, and Tailwind CSS."
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: Markdown Examples
+      link: /markdown-examples
+    - theme: alt
+      text: API Examples
+      link: /api-examples
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+
diff --git a/apps/docs/markdown-examples.md b/apps/docs/markdown-examples.md
new file mode 100644
index 0000000..f9258a5
--- /dev/null
+++ b/apps/docs/markdown-examples.md
@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).
diff --git a/apps/docs/package.json b/apps/docs/package.json
new file mode 100644
index 0000000..0a92ad3
--- /dev/null
+++ b/apps/docs/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "docs",
+  "type": "module",
+  "version": "0.1.0",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vitepress dev",
+    "build": "vitepress build",
+    "prebuild": "pnpm run docs:gen",
+    "preview": "vitepress preview",
+    "docs:gen": "tsx scripts/autogen.ts",
+    "typecheck": "vue-tsc",
+    "typecheck:registry": "vue-tsc -p tsconfig.registry.json",
+    "docs:dev": "vitepress dev",
+    "docs:build": "vitepress build",
+    "docs:preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
+    "@iconicicons/vue3": "^1.5.1",
+    "@lemonsqueezy/wedges": "^1.2.2",
+    "@radix-icons/vue": "^1.0.0",
+    "@tanstack/vue-table": "^8.16.0",
+    "@unovis/ts": "^1.4.0",
+    "@unovis/vue": "^1.4.0",
+    "@vee-validate/zod": "^4.12.6",
+    "@vueuse/core": "^10.9.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel": "^8.0.2",
+    "embla-carousel-autoplay": "^8.0.2",
+    "embla-carousel-vue": "^8.0.2",
+    "magic-string": "^0.30.10",
+    "radix-vue": "^1.7.2",
+    "tailwindcss-animate": "^1.0.7",
+    "v-calendar": "^3.1.2",
+    "vaul-vue": "^0.1.0",
+    "vee-validate": "4.12.5",
+    "vue": "^3.4.25",
+    "vue-sonner": "^1.1.2",
+    "vue-wrap-balancer": "^1.1.3",
+    "wedges-vue": "workspace:^",
+    "zod": "^3.23.4"
+  },
+  "devDependencies": {
+    "@babel/traverse": "^7.24.1",
+    "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify-json/simple-icons": "^1.1.100",
+    "@iconify-json/tabler": "^1.1.110",
+    "@iconify/json": "^2.2.204",
+    "@iconify/vue": "^4.1.2",
+    "@shikijs/transformers": "^1.3.0",
+    "@tailwindcss/typography": "^0.5.12",
+    "@types/lodash.template": "^4.5.3",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@vue/compiler-core": "^3.4.25",
+    "@vue/compiler-dom": "^3.4.25",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.19",
+    "class-variance-authority": "^0.7.0",
+    "fast-glob": "^3.3.2",
+    "lodash.template": "^4.5.0",
+    "markdown-it": "^14.1.0",
+    "oxc-parser": "^0.8.0",
+    "pathe": "^1.1.2",
+    "postcss": "^8.4.38",
+    "rimraf": "^5.0.5",
+    "shiki": "^1.3.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "^3.4.3",
+    "tsx": "^4.7.3",
+    "typescript": "^5.4.5",
+    "unplugin-icons": "^0.18.5",
+    "vite": "^5.2.10",
+    "vitepress": "^1.1.3",
+    "vue-component-meta": "^2.0.14",
+    "vue-tsc": "^2.0.14"
+  }
+}
diff --git a/apps/docs/scripts/autogen.ts b/apps/docs/scripts/autogen.ts
new file mode 100644
index 0000000..78d5879
--- /dev/null
+++ b/apps/docs/scripts/autogen.ts
@@ -0,0 +1,284 @@
+import { join, parse, resolve } from "node:path";
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import fg from "fast-glob";
+import MarkdownIt from "markdown-it";
+import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from "vue-component-meta";
+import { createComponentMetaChecker } from "vue-component-meta";
+import { babelParse, parse as sfcParse } from "vue/compiler-sfc";
+import _traverse from "@babel/traverse";
+import { transformJSDocLinks } from "./utils";
+
+// @ts-expect-error ignore
+const traverse = _traverse.default as typeof _traverse;
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+const components = {};
+
+// 1. Get all the components in the components folder
+const componentsFolder = resolve(__dirname, "../../../packages/wedges-vue/src/components");
+const componentFolders = readdirSync(componentsFolder, { withFileTypes: true }).filter(dirent => dirent.isDirectory());
+
+componentFolders.forEach((folder) => {
+  const folderPath = join(componentsFolder, folder.name);
+  const files = readdirSync(folderPath, { withFileTypes: true }).filter(file => file.name.includes(".vue"));
+  components[folder.name] = files.map(file => parse(file.name).name);
+});
+
+const md = new MarkdownIt();
+md.use(transformJSDocLinks);
+
+const checkerOptions: MetaCheckerOptions = {
+  forceUseTs: true,
+  printer: { newLine: 1 },
+};
+
+const tsconfigChecker = createComponentMetaChecker(
+  resolve(__dirname, "../../../packages/wedges-vue/tsconfig.json"),
+  checkerOptions,
+);
+
+const eventDescriptionMap = new Map<string, string>();
+const depTree = new Map<string, string[]>();
+let prevDeps: string[] = [];
+
+const allComponents = fg.sync(["src/**/*.vue", "!src/**/story/*.vue", "!src/**/*.story.vue"], {
+  cwd: resolve(__dirname, "../../../packages/wedges-vue"),
+  absolute: true,
+});
+
+const listOfComponents = Object.values(components).flatMap(i => i);
+const primitiveComponents = allComponents.filter(i => listOfComponents.includes(parse(i).name));
+
+// 1. Generate all the dependencies for each components
+allComponents.forEach((i) => {
+  generateDependencies(i);
+});
+
+// 2. Generate component meta
+primitiveComponents.forEach((componentPath) => {
+  const dir = parse(componentPath).dir.split("/").at(-1) ?? "";
+  const flattenDeps = [dir, ...getDependencies(dir)];
+  if (!arraysAreEqual(prevDeps, flattenDeps)) {
+    flattenDeps.forEach((dep) => {
+      getEventFromComponentPath(dep);
+    });
+    prevDeps = flattenDeps;
+  }
+
+  const componentName = parse(componentPath).name;
+  const meta = parseMeta(tsconfigChecker.getComponentMeta(componentPath));
+
+  const metaDirPath = resolve(__dirname, "../src/content/meta");
+  // if meta dir doesn't exist create
+  if (!existsSync(metaDirPath))
+    mkdirSync(metaDirPath);
+
+  const metaMdFilePath = join(metaDirPath, `${componentName}.md`);
+
+  let parsedString = "<!-- This file was automatic generated. Do not edit it manually -->\n\n";
+  if (meta.props.length)
+    parsedString += `<PropsTable :data="${JSON.stringify(meta.props, null, 2).replace(/"/g, "'")}" />\n`;
+
+  if (meta.events.length)
+    parsedString += `\n<EmitsTable :data="${JSON.stringify(meta.events, null, 2).replace(/"/g, "'")}" />\n`;
+
+  if (meta.slots.length)
+    parsedString += `\n<SlotsTable :data="${JSON.stringify(meta.slots, null, 2).replace(/"/g, "'")}" />\n`;
+
+  if (meta.methods.length)
+    parsedString += `\n<MethodsTable :data="${JSON.stringify(meta.methods, null, 2).replace(/"/g, "'")}" />\n`;
+
+  writeFileSync(metaMdFilePath, parsedString);
+});
+
+function parseTypeFromSchema(schema: PropertyMetaSchema): string {
+  if (typeof schema === "object" && (schema.kind === "enum" || schema.kind === "array")) {
+    const isFlatEnum = schema.schema?.every(val => typeof val === "string");
+    const enumValue = schema?.schema?.filter(i => i !== "undefined") ?? [];
+
+    if (isFlatEnum && /^[A-Z]/.test(schema.type))
+      return enumValue.join(" | ");
+    else if (typeof schema.schema?.[0] === "object" && schema.schema?.[0].kind === "enum")
+      return schema.schema.map((s: PropertyMetaSchema) => parseTypeFromSchema(s)).join(" | ");
+    else
+      return schema.type;
+  }
+  else if (typeof schema === "object" && schema.kind === "object") {
+    return schema.type;
+  }
+  else if (typeof schema === "string") {
+    return schema;
+  }
+  else {
+    return "";
+  }
+}
+
+// Utilities
+function parseMeta(meta: ComponentMeta) {
+  const props = meta.props
+  // Exclude global props
+    .filter(prop => !prop.global)
+    .map((prop) => {
+      let defaultValue = prop.default;
+      let type = prop.type;
+      const { name, description, required } = prop;
+
+      if (name === "as")
+        defaultValue = defaultValue ?? "\"div\"";
+
+      if (defaultValue === "undefined")
+        defaultValue = undefined;
+
+      if (!type.includes("AcceptableValue"))
+        type = parseTypeFromSchema(prop.schema) || type;
+
+      return ({
+        name,
+        description: md.render(description),
+        type: type.replace(/\s*\|\s*undefined/g, ""),
+        required,
+        default: defaultValue ?? undefined,
+      });
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  const events = meta.events
+    .map((event) => {
+      const { name, type } = event;
+      return ({
+        name,
+        description: md.render((eventDescriptionMap.get(name) ?? "").replace(/^[ \t]+/gm, "")),
+        type: type.replace(/\s*\|\s*undefined/g, ""),
+      });
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  const defaultSlot = meta.slots?.[0];
+  const slots: { name: string; description: string; type: string }[] = [];
+
+  if (defaultSlot && defaultSlot.type !== "{}") {
+    const schema = defaultSlot.schema;
+    if (typeof schema === "object" && schema.schema) {
+      Object.values(schema.schema).forEach((childMeta: PropertyMeta) => {
+        slots.push({
+          name: childMeta.name,
+          description: md.render(childMeta.description),
+          type: parseTypeFromSchema(childMeta.schema),
+        });
+      });
+    }
+  }
+
+  // exposed method
+  const methods = meta.exposed
+    .filter(expose => typeof expose.schema === "object" && expose.schema.kind === "event")
+    .map(expose => ({
+      name: expose.name,
+      description: md.render(expose.description),
+      type: expose.type,
+    }));
+
+  return {
+    props,
+    events,
+    slots,
+    methods,
+  };
+}
+
+function getEventFromComponentPath(dir: string) {
+  const files = readdirSync(resolve(__dirname, "../../../packages/wedges-vue/src/components", dir), { withFileTypes: true }).filter(file => file.name.includes(".vue"));
+
+  files.forEach((file) => {
+    const { name, path } = file;
+    const source = readFileSync(join(path, name), { encoding: "utf8" });
+    const { descriptor } = sfcParse(source, {
+      filename: name,
+    });
+
+    const code = descriptor.script?.content;
+    if (code) {
+      const result = babelParse(code, {
+        sourceType: "module",
+        plugins: ["typescript"],
+      });
+
+      for (const node of result.program.body) {
+        if (node.type === "ExportNamedDeclaration" && node.loc) {
+          if (node.declaration?.type === "TSTypeAliasDeclaration") {
+            if (node.declaration.typeAnnotation.type === "TSTypeLiteral") {
+              node.declaration.typeAnnotation.members.forEach((member) => {
+                if (member.type === "TSPropertySignature" && member.key.type === "StringLiteral" && member.leadingComments?.[0].loc) {
+                  const key = member.key.value;
+                  const description = member.leadingComments?.[0].value.replaceAll("*", "").trim();
+                  eventDescriptionMap.set(key, description);
+                }
+                else if (member.type === "TSPropertySignature" && member.key.type === "Identifier" && member.leadingComments?.[0].loc) {
+                  const key = member.key.name;
+                  const description = member.leadingComments?.[0].value.replaceAll("*", "").trim();
+                  eventDescriptionMap.set(key, description);
+                }
+              });
+            }
+            else if (node.declaration.typeAnnotation.type === "TSIntersectionType") {
+              const literalType = node.declaration.typeAnnotation.types.find(t => t.type === "TSTypeLiteral");
+              if (literalType?.type === "TSTypeLiteral") {
+                literalType.members.forEach((member) => {
+                  if (member.type === "TSPropertySignature" && member.key.type === "StringLiteral" && member.leadingComments?.[0].loc) {
+                    const key = member.key.value;
+                    const description = member.leadingComments?.[0].value.replaceAll("*", "").trim();
+                    eventDescriptionMap.set(key, description);
+                  }
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+}
+
+function generateDependencies(componentPath: string) {
+  const { name: componentName, dir: componentDir } = parse(componentPath);
+  const dir = componentDir.split("/").at(-1) ?? "";
+
+  const source = readFileSync(componentPath, { encoding: "utf8" });
+  const { descriptor } = sfcParse(source, {
+    filename: componentName,
+  });
+
+  const code = descriptor.script?.content;
+  if (code) {
+    const result = babelParse(code, {
+      sourceType: "module",
+      plugins: ["typescript"],
+    });
+
+    traverse(result, {
+      ImportDeclaration: (path) => {
+        const value = path.node.source.value.split("/").at(-1);
+        if (value && value.match(/^[A-Z]/) && !value.includes("vue")) {
+          const prev = depTree.get(dir) ?? [];
+          depTree.set(dir, [...new Set([...prev, value])]);
+        }
+      },
+    });
+  }
+}
+
+function getDependencies(dir: string, list = new Set<string>()) {
+  const deps = depTree.get(dir);
+
+  deps?.forEach((dep) => {
+    list.add(dep);
+    getDependencies(dep, list);
+  });
+  return Array.from(list);
+}
+
+function arraysAreEqual<T>(arr1: T[], arr2: T[]): boolean {
+  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
+}
diff --git a/apps/docs/scripts/utils.ts b/apps/docs/scripts/utils.ts
new file mode 100644
index 0000000..45b80a0
--- /dev/null
+++ b/apps/docs/scripts/utils.ts
@@ -0,0 +1,27 @@
+import type MarkdownIt from "markdown-it";
+
+// Define a custom plugin to transform JSDoc @link tags
+export function transformJSDocLinks(md: MarkdownIt) {
+  md.core.ruler.push("transform-jsdoc-links", (state) => {
+    state.tokens.forEach((token) => {
+      if (token.type === "inline" && token.children?.length) {
+        for (let i = 0; i < token.children.length; i++) {
+          const child = token.children[i];
+          if (child.type === "text" && child.content.startsWith("{@link")) {
+            const matches = child.content.match(/\{@link\s+(.*?)\}/);
+            if (matches) {
+              const linkText = matches[1];
+              const linkNode = new state.Token("link_open", "a", 1);
+              linkNode.attrSet("href", linkText);
+              linkNode.attrSet("target", "_blank");
+              const textNode = new state.Token("text", "", 0);
+              textNode.content = "reference";
+              token.children.splice(i, 1, linkNode, textNode, new state.Token("link_close", "a", -1));
+              i += 2; // Skip the added link and text tokens
+            }
+          }
+        }
+      }
+    });
+  });
+}
diff --git a/apps/docs/src/assets/diagrams.drawio b/apps/docs/src/assets/diagrams.drawio
new file mode 100644
index 0000000..8931a4f
--- /dev/null
+++ b/apps/docs/src/assets/diagrams.drawio
@@ -0,0 +1,176 @@
+<mxfile host="app.diagrams.net" modified="2024-03-15T08:14:00.888Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:124.0) Gecko/20100101 Firefox/124.0" etag="eUNOuIh_rCPXdI6LG0BE" version="24.0.6" type="device">
+  <diagram name="Page-1" id="10a91c8b-09ff-31b1-d368-03940ed4cc9e">
+    <mxGraphModel dx="1636" dy="971" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" background="none" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-41" value="" style="rounded=0;whiteSpace=wrap;html=1;fontColor=none;noLabel=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="30" y="70" width="1010" height="680" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-1" value="lemonsqueezy/wedges" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
+          <mxGeometry x="380" y="130" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-2" value="Packages" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
+          <mxGeometry x="160" y="250" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-3" value="Apps/www" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
+          <mxGeometry x="630" y="250" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-4" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="PaMXV6_IjdSjTMUUNi7L-27" target="62893188c0fa7362-3" edge="1">
+          <mxGeometry x="-0.3002" y="13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="62893188c0fa7362-5" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-1" target="62893188c0fa7362-2" edge="1">
+          <mxGeometry x="-0.359" y="-11" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="62893188c0fa7362-8" value="Module" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
+          <mxGeometry x="80" y="360" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-9" value="CLI" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" parent="1" vertex="1">
+          <mxGeometry x="220" y="360" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="62893188c0fa7362-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-2" target="62893188c0fa7362-8" edge="1">
+          <mxGeometry x="-0.2" y="-14" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="62893188c0fa7362-15" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-2" target="62893188c0fa7362-9" edge="1">
+          <mxGeometry x="-0.2" y="14" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="62893188c0fa7362-16" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.75;entryY=0;entryDx=0;entryDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-2" edge="1">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="644.5454545454545" y="360" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="62893188c0fa7362-17" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.25;entryY=0;entryDx=0;entryDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-1" edge="1">
+          <mxGeometry x="-0.1294" y="17" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="782.7272727272725" y="360" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-1" value="Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="720" y="370" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-2" value=".vitepress" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="420" y="370" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-3" value="Scripts" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="870" y="370" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-4" value="Src" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="570" y="370" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-7" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.333;entryY=0.017;entryDx=0;entryDy=0;exitX=1;exitY=1;exitDx=0;exitDy=0;entryPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-3">
+          <mxGeometry x="-0.1294" y="17" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="841" y="270" as="sourcePoint" />
+            <mxPoint x="910" y="320" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-9" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.358;exitY=1.017;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-3" target="PaMXV6_IjdSjTMUUNi7L-4">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="720" y="540" as="sourcePoint" />
+            <mxPoint x="613" y="600" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-11" value="Content" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="420" y="500" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-12" value="Examples" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="570" y="500" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-13" value="Lib/Registry" style="whiteSpace=wrap;html=1;rounded=1;shadow=0;labelBackgroundColor=none;strokeWidth=1;fontFamily=Garamond;fontSize=17;align=center;sketch=1;curveFitting=1;jiggle=2;" vertex="1" parent="1">
+          <mxGeometry x="720" y="500" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-14" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.308;exitY=1.033;exitDx=0;exitDy=0;exitPerimeter=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-11">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="560" y="470" as="sourcePoint" />
+            <mxPoint x="507" y="529" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-15" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-12">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="657" y="442" as="sourcePoint" />
+            <mxPoint x="540" y="560" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-16" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.75;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-4" target="PaMXV6_IjdSjTMUUNi7L-13">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="660" y="435" as="sourcePoint" />
+            <mxPoint x="660" y="555" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-20" value="Default" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" vertex="1" parent="1">
+          <mxGeometry x="650" y="630" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-21" value="New York" style="rounded=1;whiteSpace=wrap;html=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" vertex="1" parent="1">
+          <mxGeometry x="800" y="630" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-22" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-13" target="PaMXV6_IjdSjTMUUNi7L-20">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="730" y="670" as="sourcePoint" />
+            <mxPoint x="530" y="818" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-23" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;entryX=0.5;entryY=0;entryDx=0;entryDy=0;exitX=0.5;exitY=1;exitDx=0;exitDy=0;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="PaMXV6_IjdSjTMUUNi7L-13" target="PaMXV6_IjdSjTMUUNi7L-21">
+          <mxGeometry x="-0.2614" y="-13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="790" y="670" as="sourcePoint" />
+            <mxPoint x="750" y="820" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-26" value="1" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="140" y="230" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-28" value="3" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="400" y="350" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-29" value="4" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="550" y="350" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-30" value="5" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="700" y="350" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-31" value="6" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="850" y="350" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-32" value="7" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="400" y="480" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-33" value="8" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="550" y="480" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-34" value="9" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="700" y="480" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-36" value="10" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="630" y="610" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-38" value="11" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="780" y="610" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-39" value="" style="rounded=0;html=1;labelBackgroundColor=none;startArrow=none;startFill=0;startSize=5;endArrow=none;endFill=0;endSize=5;jettySize=auto;orthogonalLoop=1;strokeWidth=1;fontFamily=Garamond;fontSize=17;sketch=1;curveFitting=1;jiggle=2;shadow=0;" edge="1" parent="1" source="62893188c0fa7362-1" target="PaMXV6_IjdSjTMUUNi7L-27">
+          <mxGeometry x="-0.3002" y="13" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="500" y="189" as="sourcePoint" />
+            <mxPoint x="630" y="251" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="PaMXV6_IjdSjTMUUNi7L-27" value="2" style="strokeWidth=2;html=1;shape=mxgraph.flowchart.decision;whiteSpace=wrap;sketch=1;curveFitting=1;jiggle=2;fontFamily=Garamond;fontSize=21;" vertex="1" parent="1">
+          <mxGeometry x="610" y="230" width="40" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
diff --git a/apps/docs/src/assets/vue.svg b/apps/docs/src/assets/vue.svg
new file mode 100644
index 0000000..ca8129c
--- /dev/null
+++ b/apps/docs/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
diff --git a/apps/docs/src/components/examples/AlertExampleOne.vue b/apps/docs/src/components/examples/AlertExampleOne.vue
new file mode 100644
index 0000000..b1f6ff7
--- /dev/null
+++ b/apps/docs/src/components/examples/AlertExampleOne.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Alert, Button } from "wedges-vue";
+</script>
+
+<template>
+  <Alert
+    closable
+    color="primary"
+    title="The data export you requested is ready!"
+    variant="expanded"
+  >
+    <template #after>
+      <div class="flex items-center gap-3">
+        <Button variant="outline" size="sm" class="light:bg-white">
+          View the data
+        </Button>
+
+        <Button variant="link" size="sm" class="text-surface-500 hover:text-surface-900">
+          Maybe later
+        </Button>
+      </div>
+    </template>
+  </Alert>
+</template>
diff --git a/apps/docs/src/components/examples/AlertExampleTwo.vue b/apps/docs/src/components/examples/AlertExampleTwo.vue
new file mode 100644
index 0000000..d8780ae
--- /dev/null
+++ b/apps/docs/src/components/examples/AlertExampleTwo.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ArrowUpRightIcon, CheckIcon, EmojiSadIcon } from "@iconicicons/vue3";
+import { Alert, Button } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <!--  Example 1 -->
+    <Alert color="success" title="Successfully uploaded!" closable>
+      <template #before>
+        <CheckIcon />
+      </template>
+    </Alert>
+
+    <!--  Example 2 -->
+    <Alert
+      title="You have no credits left!"
+      color="warning"
+    >
+      Upgrade to continue.
+      <template #after>
+        <Button
+          variant="link"
+          class="text-inherit hover:text-surface-900 dark:text-wg-yellow-500 dark:hover:text-yellow-300"
+        >
+          Upgrade
+        </Button>
+      </template>
+    </Alert>
+
+    <!--  Example 3 -->
+    <Alert
+      color="error"
+      title="There was a problem with your submission"
+      variant="expanded"
+    >
+      <template #before>
+        <EmojiSadIcon />
+      </template>
+      <div>
+        <p>Must include at least 1 number</p>
+        <p>Must include at least 2 uppercase letters</p>
+      </div>
+    </Alert>
+
+    <!-- Example 4 -->
+    <Alert
+      title="A new software update is available. See what's new."
+      closable
+      color="info"
+      variant="expanded"
+    >
+      <template #after>
+        <Button
+          variant="outline"
+          class="light:bg-white"
+          size="sm"
+        >
+          View the changelog
+          <template #after>
+            <ArrowUpRightIcon />
+          </template>
+        </Button>
+      </template>
+    </Alert>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AlertPreview.vue b/apps/docs/src/components/examples/AlertPreview.vue
new file mode 100644
index 0000000..7e19be0
--- /dev/null
+++ b/apps/docs/src/components/examples/AlertPreview.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Alert, Button } from "wedges-vue";
+</script>
+
+<template>
+  <Alert title="Alert title">
+    Alert content
+
+    <template #after>
+      <Button variant="link">
+        Button
+      </Button>
+    </template>
+  </Alert>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarExampleOne.vue b/apps/docs/src/components/examples/AvatarExampleOne.vue
new file mode 100644
index 0000000..d98d640
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarExampleOne.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { Avatar } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <Avatar
+      alt="Max Quest"
+      size="lg"
+      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+      status="green"
+      notification="red"
+      initials="MQ"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarExampleThree.vue b/apps/docs/src/components/examples/AvatarExampleThree.vue
new file mode 100644
index 0000000..1f9abdf
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarExampleThree.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { AvatarFallback, AvatarImage, AvatarRoot, AvatarStatus } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-6">
+    <!-- <Tooltip content="Max Quest" side-offset="{8}"> -->
+    <AvatarRoot class="justify-center w-16 h-16 rounded-full outline outline-offset-2 outline-wg-red">
+      <AvatarImage
+        class="rounded-full"
+        src="https://images.unsplash.com/photo-1560800452-f2d475982b96?auto=format&fit=crop&w=250&h=250"
+      />
+      <AvatarFallback class="rounded-full" />
+      <span class="absolute flex items-center justify-center w-10 h-10 text-white rounded-full bg-neutral-700/50 backdrop-blur-sm">
+        MQ
+      </span>
+      <AvatarStatus class="left-1 bg-wg-red" />
+    </AvatarRoot>
+    <!-- </Tooltip> -->
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarExampleTwo.vue b/apps/docs/src/components/examples/AvatarExampleTwo.vue
new file mode 100644
index 0000000..5d2f16c
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarExampleTwo.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { Avatar } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-center gap-6">
+      <Avatar
+        alt="Max Quest"
+        size="xxs"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+
+      <Avatar
+        alt="Max Quest"
+        size="xs"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+
+      <Avatar
+        alt="Max Quest"
+        size="sm"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+
+      <Avatar
+        alt="Max Quest"
+        size="md"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+
+      <Avatar
+        alt="Max Quest"
+        size="lg"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+
+      <Avatar
+        alt="Max Quest"
+        size="2xl"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+        status="green"
+        notification="red"
+      />
+    </div>
+    <br>
+
+    <div class="flex items-center justify-center gap-6 mt-12">
+      <Avatar alt="Max Quest" size="xxs" status="green" notification="red" />
+      <Avatar alt="Max Quest" size="xs" status="green" notification="red" />
+      <Avatar alt="Max Quest" size="sm" status="green" notification="red" />
+      <Avatar alt="Max Quest" size="md" status="green" notification="red" />
+      <Avatar alt="Max Quest" size="lg" status="green" notification="red" />
+      <Avatar alt="Max Quest" size="2xl" status="green" notification="red" />
+    </div>
+
+    <div class="flex items-center justify-center gap-6 mt-12">
+      <Avatar alt="Max Quest" initials="W" size="xxs" status="green" notification="red" />
+      <Avatar alt="Max Quest" initials="E" size="xs" status="green" notification="red" />
+      <Avatar alt="Max Quest" initials="d" size="sm" status="green" notification="red" />
+      <Avatar alt="Max Quest" initials="g" size="md" status="green" notification="red" />
+      <Avatar alt="Max Quest" initials="E" size="lg" status="green" notification="red" />
+      <Avatar alt="Max Quest" initials="S" size="2xl" status="green" notification="red" />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarGroupExampleOne.vue b/apps/docs/src/components/examples/AvatarGroupExampleOne.vue
new file mode 100644
index 0000000..7770648
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarGroupExampleOne.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { AvatarGroup } from "wedges-vue";
+
+const items = [
+  {
+    src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop&crop=face",
+    alt: "Avatar 1",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?w=250&h=250&auto=format&fit=crop&crop=face",
+    alt: "Avatar 2",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=250&h=250&auto=format&fit=crop&crop=face",
+    alt: "Avatar 2",
+  },
+];
+</script>
+
+<template>
+  <div class="flex flex-col gap-12">
+    <div class="flex items-center justify-center gap-6">
+      <AvatarGroup
+        size="sm"
+        :items
+        more-label="+3"
+      />
+
+      <AvatarGroup
+        size="sm"
+        previous-on-top
+        :items
+        more-label="+3"
+      />
+    </div>
+
+    <div class="flex items-center justify-center gap-6">
+      <AvatarGroup
+        size="md"
+        :items
+        more-label="+3"
+      />
+
+      <AvatarGroup
+        size="md"
+        previous-on-top
+        :items
+        more-label="+3"
+      />
+    </div>
+
+    <div class="flex items-center justify-center gap-6">
+      <AvatarGroup
+        size="lg"
+        :items
+        more-label="+3"
+      />
+
+      <AvatarGroup
+        size="lg"
+        previous-on-top
+        :items
+        more-label="+3"
+      />
+    </div>
+
+    <div class="flex items-center justify-center gap-6">
+      <AvatarGroup
+        size="xl"
+        :items
+        more-label="+3"
+      />
+
+      <AvatarGroup
+        size="xl"
+        previous-on-top
+        :items
+        more-label="+3"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarGroupExampleThree.vue b/apps/docs/src/components/examples/AvatarGroupExampleThree.vue
new file mode 100644
index 0000000..0c518ee
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarGroupExampleThree.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { AvatarGroup } from "wedges-vue";
+
+const items = [
+  {
+    src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 1",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 2",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 2",
+  },
+];
+</script>
+
+<template>
+  <div class="mx-auto max-w-fit rounded-lg p-12 wg-bg-orange-100 dark:wg-bg-yellow-950">
+    <AvatarGroup
+      size="xl"
+      :items
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarGroupExampleTwo.vue b/apps/docs/src/components/examples/AvatarGroupExampleTwo.vue
new file mode 100644
index 0000000..b7d20d9
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarGroupExampleTwo.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { AvatarGroupItem, AvatarGroupLabel, AvatarGroupRoot } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <AvatarGroupRoot>
+      <AvatarGroupItem
+        size="md"
+        src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?auto=format&fit=crop&w=250"
+      />
+
+      <AvatarGroupItem
+        size="md"
+        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=250&h=250"
+      />
+
+      <AvatarGroupItem
+        size="md"
+        src="https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=250"
+      />
+
+      <AvatarGroupLabel class="z-40 bg-primary px-3 text-sm text-white dark:bg-primary">
+        42k likes
+      </AvatarGroupLabel>
+
+      <AvatarGroupItem
+        class="z-30"
+        size="md"
+        src="https://images.unsplash.com/photo-1589571894960-20bbe2828d0a?auto=format&fit=crop&w=250&q=60"
+      />
+      <AvatarGroupItem
+        class="z-20"
+        size="md"
+        src="https://images.unsplash.com/photo-1560800452-f2d475982b96?fit=crop&w=250&h=250&q=80"
+      />
+      <AvatarGroupItem
+        class="z-10"
+        size="md"
+        src="https://images.unsplash.com/photo-1549068106-b024baf5062d?fit=crop&w=250&q=60"
+      />
+    </AvatarGroupRoot>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarGroupPreview.vue b/apps/docs/src/components/examples/AvatarGroupPreview.vue
new file mode 100644
index 0000000..297907f
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarGroupPreview.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AvatarGroup } from "wedges-vue";
+
+const items = [{
+  src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop",
+  alt: "Avatar 1",
+}, {
+  src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?w=250&h=250&auto=format&fit=crop",
+  alt: "Avatar 2",
+}, {
+  src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=250&h=250&auto=format&fit=crop",
+  alt: "Avatar 2",
+}];
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <AvatarGroup
+      :items
+      more-label="+3"
+      size="lg"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/AvatarPreview.vue b/apps/docs/src/components/examples/AvatarPreview.vue
new file mode 100644
index 0000000..75aad40
--- /dev/null
+++ b/apps/docs/src/components/examples/AvatarPreview.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Avatar } from "wedges-vue";
+</script>
+
+<template>
+  <Avatar
+    alt="Max Quest"
+    size="xl"
+    src="https://images.unsplash.com/photo-1560800452-f2d475982b96?w=250&h=250&auto=format&fit=crop"
+  />
+</template>
diff --git a/apps/docs/src/components/examples/BadgeExampleOne.vue b/apps/docs/src/components/examples/BadgeExampleOne.vue
new file mode 100644
index 0000000..9a195f4
--- /dev/null
+++ b/apps/docs/src/components/examples/BadgeExampleOne.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import {
+  BookmarkIcon,
+  CheckIcon,
+  CloseIcon,
+  EmojiHappyIcon,
+  FlagIcon,
+  HashtagIcon,
+  HeartIcon,
+  LockIcon,
+  MinusIcon,
+  PinIcon,
+  PlayIcon,
+  ShieldTickIcon,
+  SpinnerIcon,
+  UndoIcon,
+  WifiIcon,
+} from "@iconicicons/vue3";
+import { Avatar, Badge } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-4 mx-auto max-w-fit">
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="green" shape="pill">
+        <template #before>
+          <CheckIcon />
+        </template>
+        Paid
+      </Badge>
+
+      <Badge color="green" stroke>
+        <template #before>
+          <CheckIcon />
+        </template>
+        Active
+      </Badge>
+
+      <Badge color="green" shape="pill">
+        <template #before>
+          <CheckIcon />
+        </template>
+        Paid
+      </Badge>
+
+      <Badge color="green" stroke shape="pill">
+        <template #before>
+          <CheckIcon />
+        </template>
+        200
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="red" shape="pill">
+        <template #before>
+          <CloseIcon />
+        </template>
+        Rejected
+      </Badge>
+
+      <Badge color="red" stroke>
+        <template #before>
+          <CloseIcon />
+        </template>
+        Chargeback
+      </Badge>
+
+      <Badge color="red" shape="pill" stroke>
+        <template #before>
+          <MinusIcon />
+        </template>
+        Disconnected
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge shape="pill">
+        <template #before>
+          <CloseIcon />
+        </template>
+        Void
+      </Badge>
+
+      <Badge stroke>
+        <template #before>
+          <CloseIcon />
+        </template>
+        Expired
+      </Badge>
+
+      <Badge>
+        <template #before>
+          <CloseIcon />
+        </template>
+        Draft
+      </Badge>
+
+      <Badge shape="pill" stroke>
+        <template #before>
+          <svg class="text-wg-green" fill="none" height="24" viewBox="0 0 24 24" width="24">
+            <circle cx="12" cy="12" r="4" fill="currentColor" />
+          </svg>
+        </template>
+        Online
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="blue" shape="pill">
+        <template #before>
+          <SpinnerIcon />
+        </template>
+        Processing
+      </Badge>
+
+      <Badge color="blue" stroke>
+        <template #before>
+          <FlagIcon />
+        </template>
+        Flagged
+      </Badge>
+
+      <Badge color="blue" shape="pill" stroke>
+        Washington D.C.
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="pink" shape="pill">
+        Special
+      </Badge>
+
+      <Badge color="pink" stroke>
+        Trial
+      </Badge>
+
+      <Badge color="pink">
+        <template #before>
+          <BookmarkIcon />
+        </template>
+        Bookmarked
+      </Badge>
+
+      <Badge color="pink" shape="pill" stroke>
+        <template #before>
+          <HashtagIcon />
+        </template>
+        Live
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="yellow" shape="pill">
+        <template #before>
+          <UndoIcon />
+        </template>
+        Moved
+      </Badge>
+
+      <Badge color="yellow" stroke>
+        New
+      </Badge>
+
+      <Badge color="yellow">
+        <template #before>
+          <ShieldTickIcon />
+        </template>
+        Secure
+      </Badge>
+
+      <Badge color="yellow" shape="pill" stroke>
+        <template #before>
+          <LockIcon />
+        </template>
+        Locked
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="orange" shape="pill">
+        Beta
+      </Badge>
+
+      <Badge color="orange" stroke>
+        <template #before>
+          <EmojiHappyIcon />
+        </template>
+        Hello!
+      </Badge>
+
+      <Badge color="orange">
+        <template #before>
+          <PlayIcon />
+        </template>
+        1m 30s
+      </Badge>
+
+      <Badge color="orange" shape="pill" stroke>
+        <template #before>
+          <PinIcon />
+        </template>
+        Pinned
+      </Badge>
+
+      <Badge color="orange" shape="pill" stroke>
+        4
+      </Badge>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Badge color="primary" shape="pill">
+        <template #before>
+          <HeartIcon />
+        </template>
+        Design Systems
+      </Badge>
+
+      <Badge color="primary" shape="pill">
+        <template #before>
+          <Avatar size="xxs" src="https://github.com/ormanclark.png" />
+        </template>
+        @ormanclark
+      </Badge>
+
+      <Badge color="primary" shape="pill">
+        <template #before>
+          <WifiIcon />
+        </template>
+        Free Wi-Fi
+      </Badge>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/BadgePreview.vue b/apps/docs/src/components/examples/BadgePreview.vue
new file mode 100644
index 0000000..255052c
--- /dev/null
+++ b/apps/docs/src/components/examples/BadgePreview.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from "wedges-vue";
+</script>
+
+<template>
+  <Badge>
+    Badge
+  </Badge>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonExampleOne.vue b/apps/docs/src/components/examples/ButtonExampleOne.vue
new file mode 100644
index 0000000..cf88cd3
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonExampleOne.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { PlusIcon } from "@iconicicons/vue3";
+import { Button } from "wedges-vue";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit items-start gap-10">
+    <div class="flex flex-col gap-4">
+      <Button variant="primary">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button variant="primary" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link" shape="pill">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary" shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary" shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline" shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent" shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link" shape="pill">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonExampleThree.vue b/apps/docs/src/components/examples/ButtonExampleThree.vue
new file mode 100644
index 0000000..8a30d3a
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonExampleThree.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { PlusIcon } from "@iconicicons/vue3";
+import { Button } from "wedges-vue";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit items-start gap-10">
+    <div class="flex flex-col gap-4">
+      <Button variant="primary" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button variant="primary" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link" shape="pill" destructive>
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary" shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary" shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline" shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent" shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link" shape="pill" destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonExampleTwo.vue b/apps/docs/src/components/examples/ButtonExampleTwo.vue
new file mode 100644
index 0000000..e227d7d
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonExampleTwo.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { PlusIcon } from "@iconicicons/vue3";
+import { Button } from "wedges-vue";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit items-start gap-10">
+    <div class="flex flex-col gap-4">
+      <Button variant="primary" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link">
+        <template #before>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button variant="primary" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="secondary" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="tertiary" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="outline" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="transparent" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+      <Button variant="link" shape="pill" size="sm">
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <Button shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="secondary" shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="tertiary" shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="outline" shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="transparent" shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+
+      <Button variant="link" shape="pill" size="sm">
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+        <template #after>
+          <PlusIcon />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonGroupExampleOne.vue b/apps/docs/src/components/examples/ButtonGroupExampleOne.vue
new file mode 100644
index 0000000..022cfa6
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonGroupExampleOne.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import {
+  DotsVerticalIcon,
+  GridIcon,
+  GridMasonryIcon,
+  Monitor2Icon,
+  MoonIcon,
+  PlusIcon,
+  SunIcon,
+  TableColumnsIcon,
+  TableRowsIcon,
+} from "@iconicicons/vue3";
+import { ButtonGroup, ButtonGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-6">
+    <!-- Example 1 } -->
+    <ButtonGroup orientation="vertical">
+      <ButtonGroupItem class="justify-start">
+        <template #before>
+          <SunIcon />
+        </template>
+        Light
+      </ButtonGroupItem>
+
+      <ButtonGroupItem class="justify-start">
+        <template #before>
+          <MoonIcon />
+        </template>
+        Dark
+      </ButtonGroupItem>
+
+      <ButtonGroupItem class="justify-start">
+        <template #before>
+          <Monitor2Icon />
+        </template>
+        System
+      </ButtonGroupItem>
+    </ButtonGroup>
+
+    <!-- Example 2 } -->
+    <ButtonGroup>
+      <ButtonGroupItem>
+        <template #after>
+          <GridIcon />
+        </template>
+      </ButtonGroupItem>
+      <ButtonGroupItem>
+        <template #after>
+          <GridMasonryIcon />
+        </template>
+      </ButtonGroupItem>
+      <ButtonGroupItem>
+        <template #after>
+          <TableColumnsIcon />
+        </template>
+      </ButtonGroupItem>
+      <ButtonGroupItem>
+        <template #after>
+          <TableRowsIcon />
+        </template>
+      </ButtonGroupItem>
+    </ButtonGroup>
+
+    <!-- Example 3 } -->
+    <ButtonGroup>
+      <ButtonGroupItem disabled>
+        Publish Post
+      </ButtonGroupItem>
+      <ButtonGroupItem>Draft</ButtonGroupItem>
+      <ButtonGroupItem>
+        <template #before>
+          <DotsVerticalIcon />
+        </template>
+      </ButtonGroupItem>
+    </ButtonGroup>
+
+    <!-- Example 4 } -->
+    <ButtonGroup size="sm">
+      <ButtonGroupItem destructive>
+        <template #before>
+          <PlusIcon />
+        </template>
+
+        Destructive
+      </ButtonGroupItem>
+
+      <ButtonGroupItem>
+        <template #before>
+          <PlusIcon />
+        </template>
+        Button
+      </ButtonGroupItem>
+
+      <ButtonGroupItem>
+        <template #before>
+          <PlusIcon />
+        </template>
+      </ButtonGroupItem>
+    </ButtonGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonGroupExampleTwo.vue b/apps/docs/src/components/examples/ButtonGroupExampleTwo.vue
new file mode 100644
index 0000000..6877b1e
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonGroupExampleTwo.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ChevronDownIcon, CopyIcon, DownloadIcon, EditIcon } from "@iconicicons/vue3";
+import { ButtonGroup, ButtonGroupItem, Tooltip } from "wedges-vue";
+</script>
+
+<template>
+  <ButtonGroup size="sm">
+    <Tooltip
+      align="center"
+      :animation="false"
+      content="View raw code"
+      :delay-duration="0"
+      side="top"
+    >
+      <ButtonGroupItem>Raw</ButtonGroupItem>
+    </Tooltip>
+
+    <Tooltip align="center" :animation="false" content="Copy" :delay-duration="0">
+      <ButtonGroupItem is-icon-only>
+        <CopyIcon />
+      </ButtonGroupItem>
+    </Tooltip>
+
+    <Tooltip content="Download" :delay-duration="0">
+      <ButtonGroupItem is-icon-only>
+        <DownloadIcon />
+      </ButtonGroupItem>
+    </Tooltip>
+
+    <Tooltip align="center" :animation="false" content="Edit" :delay-duration="0">
+      <ButtonGroupItem is-icon-only>
+        <EditIcon />
+      </ButtonGroupItem>
+    </Tooltip>
+
+    <Tooltip align="center" :animation="false" content="More" :delay-duration="0">
+      <ButtonGroupItem is-icon-only>
+        <ChevronDownIcon />
+      </ButtonGroupItem>
+    </Tooltip>
+  </ButtonGroup>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonGroupPreview.vue b/apps/docs/src/components/examples/ButtonGroupPreview.vue
new file mode 100644
index 0000000..7fd0f09
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonGroupPreview.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { PlusIcon } from "@iconicicons/vue3";
+import { ButtonGroup, ButtonGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <ButtonGroup>
+    <ButtonGroupItem>
+      <template #before>
+        <PlusIcon />
+      </template>
+      Button
+      <template #after>
+        <PlusIcon />
+      </template>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+      <template #before>
+        <PlusIcon />
+      </template>
+      Button
+      <template #after>
+        <PlusIcon />
+      </template>
+    </ButtonGroupItem>
+
+    <ButtonGroupItem>
+      <template #before>
+        <PlusIcon />
+      </template>
+      Button
+      <template #after>
+        <PlusIcon />
+      </template>
+    </ButtonGroupItem>
+  </ButtonGroup>
+</template>
diff --git a/apps/docs/src/components/examples/ButtonPreview.vue b/apps/docs/src/components/examples/ButtonPreview.vue
new file mode 100644
index 0000000..f82541f
--- /dev/null
+++ b/apps/docs/src/components/examples/ButtonPreview.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { PlusIcon } from "@iconicicons/vue3";
+import { Button } from "wedges-vue";
+</script>
+
+<template>
+  <Button>
+    <template #before>
+      <PlusIcon />
+    </template>
+
+    Button
+
+    <template #after>
+      <PlusIcon />
+    </template>
+  </Button>
+</template>
diff --git a/apps/docs/src/components/examples/CheckboxExampleOne.vue b/apps/docs/src/components/examples/CheckboxExampleOne.vue
new file mode 100644
index 0000000..33f061c
--- /dev/null
+++ b/apps/docs/src/components/examples/CheckboxExampleOne.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Checkbox } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-6 text-left">
+    <Checkbox label="Required" required />
+
+    <Checkbox
+      description="(optional)"
+      helper-text="Helper text"
+      label="Label"
+      tooltip="Tooltip example"
+    />
+
+    <Checkbox
+      helper-text="Indeterminate"
+      label="Label"
+      tooltip="Tooltip example"
+      checked="indeterminate"
+    />
+
+    <Checkbox default-checked disabled description="Disabled" tooltip="Tooltip example" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/CheckboxExampleTwo.vue b/apps/docs/src/components/examples/CheckboxExampleTwo.vue
new file mode 100644
index 0000000..3689ace
--- /dev/null
+++ b/apps/docs/src/components/examples/CheckboxExampleTwo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { AvatarGroup, Checkbox, CheckboxRoot } from "wedges-vue";
+
+const items = [
+  {
+    initials: "W",
+  },
+  {
+    initials: "D",
+  },
+  {
+    initials: "G",
+  },
+];
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-6 text-left">
+    <CheckboxRoot
+      as-child
+      class="flex w-80 cursor-pointer items-center justify-between rounded-lg border border-surface-100 px-4 py-3 shadow-wg-xs outline-2 -outline-offset-1 outline-primary wg-bg-white dark:wg-bg-neutral-900 [&:has([data-state=checked])]:outline"
+    >
+      <label>
+        <Checkbox />
+
+        <div class="flex grow items-center justify-between text-sm">
+          <span class="select-none">Share to 3 users</span>
+
+          <AvatarGroup
+            :items
+            size="xs"
+          />
+        </div>
+      </label>
+    </CheckboxRoot>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/CheckboxGroupExampleOne.vue b/apps/docs/src/components/examples/CheckboxGroupExampleOne.vue
new file mode 100644
index 0000000..509a775
--- /dev/null
+++ b/apps/docs/src/components/examples/CheckboxGroupExampleOne.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { CheckboxGroup, CheckboxGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-8 text-left">
+    <CheckboxGroup
+      required
+      description="(description)"
+      helper-text="Helper text"
+      label="Vertical"
+      tooltip="Tooltip example"
+    >
+      <CheckboxGroupItem label="Option 1" />
+      <CheckboxGroupItem default-checked label="Option 2" />
+      <CheckboxGroupItem disabled label="Option 3" />
+      <CheckboxGroupItem label="Option 4" />
+      <CheckboxGroupItem label="Option 5" tooltip="Optional tooltip content" />
+    </CheckboxGroup>
+
+    <CheckboxGroup
+      disabled
+      description="(disabled)"
+      helper-text="Helper text"
+      label="Horizontal"
+      orientation="horizontal"
+      tooltip="Tooltip example"
+    >
+      <CheckboxGroupItem label="Option 1" />
+      <CheckboxGroupItem default-checked label="Option 2" />
+      <CheckboxGroupItem disabled label="Option 3" />
+    </CheckboxGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/CheckboxGroupPreview.vue b/apps/docs/src/components/examples/CheckboxGroupPreview.vue
new file mode 100644
index 0000000..461c0f5
--- /dev/null
+++ b/apps/docs/src/components/examples/CheckboxGroupPreview.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { CheckboxGroup, CheckboxGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto w-fit text-left">
+    <CheckboxGroup
+      description="description"
+      helper-text="Helper text"
+      label="Label"
+      required
+      tooltip="Tooltip example"
+    >
+      <CheckboxGroupItem label="Option 1" />
+      <CheckboxGroupItem label="Option 2" />
+      <CheckboxGroupItem label="Option 3" />
+      <CheckboxGroupItem label="Option 4" />
+    </CheckboxGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/CheckboxPreview.vue b/apps/docs/src/components/examples/CheckboxPreview.vue
new file mode 100644
index 0000000..5d9a1d6
--- /dev/null
+++ b/apps/docs/src/components/examples/CheckboxPreview.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Checkbox } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto w-fit text-left">
+    <Checkbox
+      description="description"
+      helper-text="Helper text"
+      label="Label"
+      required
+      tooltip="Tooltip example"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ColorsThemableColors.vue b/apps/docs/src/components/examples/ColorsThemableColors.vue
new file mode 100644
index 0000000..7455526
--- /dev/null
+++ b/apps/docs/src/components/examples/ColorsThemableColors.vue
@@ -0,0 +1,6 @@
+<template>
+  <div class="mx-auto flex max-w-xs flex-col items-center rounded border border-surface-100 bg-surface p-20 leading-6">
+    <span class="text-surface-500">Easy Peasy</span>
+    <span class="font-medium text-surface-900">Lemon Squeezy</span>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/DropdownMenuExampleOne.vue b/apps/docs/src/components/examples/DropdownMenuExampleOne.vue
new file mode 100644
index 0000000..5174401
--- /dev/null
+++ b/apps/docs/src/components/examples/DropdownMenuExampleOne.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { DotsHorizontalIcon } from "@iconicicons/vue3";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "wedges-vue";
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button is-icon-only size="sm" variant="tertiary">
+        <DotsHorizontalIcon />
+      </Button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end" side="top">
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Bold</span>
+          <DropdownMenuShortcut :keys="['command']">
+            B
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <span>Italic</span>
+          <DropdownMenuShortcut :keys="['command']">
+            I
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <span>Underline</span>
+          <DropdownMenuShortcut :keys="['command']">
+            U
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <span>Strikethrough</span>
+          <DropdownMenuShortcut :keys="['command', 'option']">
+            X
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <span>Create link</span>
+          <DropdownMenuShortcut :keys="['command']">
+            K
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Bulleted list</span>
+          <DropdownMenuShortcut :keys="['shift', 'command']">
+            8
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <span>Numbered list</span>
+          <DropdownMenuShortcut :keys="['command']">
+            7
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/docs/src/components/examples/DropdownMenuExampleTwo.vue b/apps/docs/src/components/examples/DropdownMenuExampleTwo.vue
new file mode 100644
index 0000000..67c9ab5
--- /dev/null
+++ b/apps/docs/src/components/examples/DropdownMenuExampleTwo.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import { BellIcon, BookIcon, ChevronDownIcon, HelpCircleIcon, LockIcon, LogOutIcon, MoonIcon, SettingsIcon, UserIcon } from "@iconicicons/vue3";
+import { ref } from "vue";
+import { Avatar, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Switch } from "wedges-vue";
+
+const darkMode = ref(false);
+
+function toggleDarkMode() {
+  darkMode.value = !darkMode.value;
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <span class="group flex shrink cursor-pointer select-none items-center justify-center gap-1 rounded-lg p-1.5 px-2 text-sm text-surface-600 transition-colors duration-100 wg-antialiased hover:bg-surface dark:hover:bg-white/5">
+          <Avatar
+            size="xs"
+            src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop&crop=face"
+            status="green"
+          />
+
+          <span class=" ms-2 flex flex-col">
+            <span class="font-medium">John Doe</span>
+          </span>
+
+          <ChevronDownIcon class="trigger-icon h-5 w-5 text-surface-400" />
+        </span>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="center" class="min-w-[140px]">
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <UserIcon />
+            <span>Account</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            <SettingsIcon />
+            <span>Settings</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            <LockIcon />
+            <span>Privacy</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            <BellIcon />
+            <span>Notifications</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <BookIcon />
+            <span>Help Guide</span>
+          </DropdownMenuItem>
+
+          <DropdownMenuItem>
+            <HelpCircleIcon />
+            <span>Help Center</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            @select.prevent="toggleDarkMode"
+          >
+            <MoonIcon />
+            <span>Dark Mode</span>
+            <Switch :checked="darkMode" class="pointer-events-none ml-2" />
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <LogOutIcon />
+            <span>Log Out</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/DropdownMenuPreview.vue b/apps/docs/src/components/examples/DropdownMenuPreview.vue
new file mode 100644
index 0000000..5edf762
--- /dev/null
+++ b/apps/docs/src/components/examples/DropdownMenuPreview.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { DownloadIcon, EyeOffIcon, MailIcon, PinIcon, RedoIcon } from "@iconicicons/vue3";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "wedges-vue";
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button>Open Menu</Button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent>
+      <DropdownMenuGroup>
+        <DropdownMenuItem disabled>
+          <RedoIcon />
+          <span>Reply</span>
+          <DropdownMenuShortcut :keys="['option']">
+            R
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <PinIcon />
+          <span>Pin</span>
+          <DropdownMenuShortcut :keys="['option']">
+            P
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <DownloadIcon />
+          <span>Save this message</span>
+          <DropdownMenuShortcut :keys="['command']">
+            S
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <EyeOffIcon />
+          <span>Mark as unread</span>
+          <DropdownMenuShortcut :keys="['command', 'option']">
+            U
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <MailIcon />
+          <span>Share via email</span>
+          <DropdownMenuShortcut :keys="['command']">
+            U
+          </DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/apps/docs/src/components/examples/InputExampleOne.vue b/apps/docs/src/components/examples/InputExampleOne.vue
new file mode 100644
index 0000000..4c935b2
--- /dev/null
+++ b/apps/docs/src/components/examples/InputExampleOne.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Kbd } from "wedges-vue";
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-4">
+    <Kbd :keys="['option', 'command']" size="xs">
+      W
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="sm">
+      D
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="md">
+      G
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="lg">
+      S
+    </Kbd>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/InputPreview.vue b/apps/docs/src/components/examples/InputPreview.vue
new file mode 100644
index 0000000..8e02c25
--- /dev/null
+++ b/apps/docs/src/components/examples/InputPreview.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Input } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto max-w-sm w-full text-left">
+    <Input
+      required
+      label="Label"
+      description="description"
+      placeholder="Placeholder"
+      helper-text="Helper text"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/KbdExampleOne.vue b/apps/docs/src/components/examples/KbdExampleOne.vue
new file mode 100644
index 0000000..4c935b2
--- /dev/null
+++ b/apps/docs/src/components/examples/KbdExampleOne.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Kbd } from "wedges-vue";
+</script>
+
+<template>
+  <div class="inline-flex items-center gap-4">
+    <Kbd :keys="['option', 'command']" size="xs">
+      W
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="sm">
+      D
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="md">
+      G
+    </Kbd>
+
+    <Kbd :keys="['option', 'command']" size="lg">
+      S
+    </Kbd>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/KbdPreview.vue b/apps/docs/src/components/examples/KbdPreview.vue
new file mode 100644
index 0000000..abb36ea
--- /dev/null
+++ b/apps/docs/src/components/examples/KbdPreview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Kbd } from "wedges-vue";
+</script>
+
+<template>
+  <Kbd :keys="['option', 'command']">K</Kbd>
+</template>
diff --git a/apps/docs/src/components/examples/LabelExampleOne.vue b/apps/docs/src/components/examples/LabelExampleOne.vue
new file mode 100644
index 0000000..94b8c5b
--- /dev/null
+++ b/apps/docs/src/components/examples/LabelExampleOne.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Label, LabelHelper } from "wedges-vue";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit flex-col items-start text-start">
+    <Label description="description" required tooltip="Tooltip example">
+      Label
+    </Label>
+
+    <LabelHelper error>
+      There are errors in your form.
+    </LabelHelper>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/LabelPreview.vue b/apps/docs/src/components/examples/LabelPreview.vue
new file mode 100644
index 0000000..089d8ad
--- /dev/null
+++ b/apps/docs/src/components/examples/LabelPreview.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Label } from "wedges-vue";
+</script>
+
+<template>
+  <Label description="description" required tooltip="Tooltip example">
+    Label
+  </Label>
+</template>
diff --git a/apps/docs/src/components/examples/LoadingExampleOne.vue b/apps/docs/src/components/examples/LoadingExampleOne.vue
new file mode 100644
index 0000000..310ea07
--- /dev/null
+++ b/apps/docs/src/components/examples/LoadingExampleOne.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Loading } from "wedges-vue";
+</script>
+
+<template>
+  <div class="grid gap-y-12">
+    <div class="flex items-center justify-center gap-7">
+      <Loading type="spinner" size="xxl" />
+      <Loading type="spinner" size="xl" />
+      <Loading type="spinner" size="lg" />
+      <Loading type="spinner" size="md" />
+      <Loading type="spinner" size="sm" />
+      <Loading type="spinner" size="xs" />
+      <Loading type="spinner" size="xxs" />
+    </div>
+
+    <div class="flex items-center justify-center gap-7">
+      <Loading type="line" size="xxs" />
+      <Loading type="line" size="xs" />
+      <Loading type="line" size="sm" />
+      <Loading type="line" size="md" />
+      <Loading type="line" size="lg" />
+      <Loading type="line" size="xl" />
+      <Loading type="line" size="xxl" />
+    </div>
+
+    <div class="flex items-center justify-center gap-7">
+      <Loading type="dots" size="xxl" />
+      <Loading type="dots" size="xl" />
+      <Loading type="dots" size="lg" />
+      <Loading type="dots" size="md" />
+      <Loading type="dots" size="sm" />
+      <Loading type="dots" size="xs" />
+      <Loading type="dots" size="xxs" />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/LoadingExampleTwo.vue b/apps/docs/src/components/examples/LoadingExampleTwo.vue
new file mode 100644
index 0000000..ba7cf19
--- /dev/null
+++ b/apps/docs/src/components/examples/LoadingExampleTwo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Loading } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-10">
+    <Loading type="spinner" color="secondary" size="xs" />
+    <Loading type="line" class="text-wg-red" size="sm" />
+    <Loading type="dots" class="text-wg-green" size="md" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/LoadingPreview.vue b/apps/docs/src/components/examples/LoadingPreview.vue
new file mode 100644
index 0000000..7c52fc7
--- /dev/null
+++ b/apps/docs/src/components/examples/LoadingPreview.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Loading } from "wedges-vue";
+</script>
+
+<template>
+  <Loading type="line" size="md" />
+</template>
diff --git a/apps/docs/src/components/examples/PopoverExampleOne.vue b/apps/docs/src/components/examples/PopoverExampleOne.vue
new file mode 100644
index 0000000..0ed6ee7
--- /dev/null
+++ b/apps/docs/src/components/examples/PopoverExampleOne.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ButtonGroup, ButtonGroupItem, CheckboxGroup, CheckboxGroupItem, Popover, PopoverContent, PopoverPortal, PopoverTrigger } from "wedges-vue";
+import { ChevronDownIcon, CopyIcon, DownloadIcon } from "@iconicicons/vue3";
+
+const container = ref<HTMLElement | null>(null);
+</script>
+
+<template>
+  <div id="popover-example-1" ref="container">
+    <ButtonGroup>
+      <ButtonGroupItem is-icon-only>
+        <CopyIcon />
+      </ButtonGroupItem>
+
+      <ButtonGroupItem is-icon-only>
+        <DownloadIcon />
+      </ButtonGroupItem>
+
+      <Popover>
+        <PopoverTrigger as-child>
+          <ButtonGroupItem is-icon-only>
+            <ChevronDownIcon />
+          </ButtonGroupItem>
+        </PopoverTrigger>
+
+        <PopoverPortal v-if="container" :container>
+          <PopoverContent align="end" class="min-w-[130px]">
+            <CheckboxGroup label="Group Label">
+              <CheckboxGroupItem label="Option 1" />
+              <CheckboxGroupItem label="Option 2" />
+              <CheckboxGroupItem label="Option 3" />
+              <CheckboxGroupItem label="Option 4" />
+            </CheckboxGroup>
+          </PopoverContent>
+        </PopoverPortal>
+      </Popover>
+    </ButtonGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/PopoverExampleTwo.vue b/apps/docs/src/components/examples/PopoverExampleTwo.vue
new file mode 100644
index 0000000..ba7cf19
--- /dev/null
+++ b/apps/docs/src/components/examples/PopoverExampleTwo.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Loading } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-10">
+    <Loading type="spinner" color="secondary" size="xs" />
+    <Loading type="line" class="text-wg-red" size="sm" />
+    <Loading type="dots" class="text-wg-green" size="md" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/PopoverPreview.vue b/apps/docs/src/components/examples/PopoverPreview.vue
new file mode 100644
index 0000000..fe80e89
--- /dev/null
+++ b/apps/docs/src/components/examples/PopoverPreview.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Button, CheckboxGroup, CheckboxGroupItem, Popover, PopoverContent, PopoverTrigger } from "wedges-vue";
+import { ChevronDownIcon } from "@iconicicons/vue3";
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="tertiary" size="sm" shape="pill">
+        Show Popover
+        <template #after>
+          <ChevronDownIcon />
+        </template>
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent class="min-w-[140px]">
+      <CheckboxGroup label="Group Label">
+        <CheckboxGroupItem label="Option 1" />
+        <CheckboxGroupItem label="Option 2" />
+        <CheckboxGroupItem label="Option 3" />
+        <CheckboxGroupItem label="Option 4" />
+      </CheckboxGroup>
+    </PopoverContent>
+  </Popover>
+</template>
diff --git a/apps/docs/src/components/examples/ProgressBarExampleOne.vue b/apps/docs/src/components/examples/ProgressBarExampleOne.vue
new file mode 100644
index 0000000..598f4c7
--- /dev/null
+++ b/apps/docs/src/components/examples/ProgressBarExampleOne.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ProgressBar } from "wedges-vue";
+import { SpinnerIcon } from "@iconicicons/vue3";
+</script>
+
+<template>
+  <div class="inline-flex w-full max-w-[400px] flex-col gap-y-12">
+    <ProgressBar
+      helper-text="Helper text"
+      indicator="50%"
+      label="Label"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="50"
+    >
+      <template #afterIndicator>
+        <SpinnerIcon class="animate-spin" />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar helper-text="Helper text" :value="50" />
+
+    <ProgressBar
+      variant="inline"
+      indicator="50%"
+      label="Label"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="50"
+    >
+      <template #afterIndicator>
+        <SpinnerIcon class="animate-spin" />
+      </template>
+    </ProgressBar>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ProgressBarExampleTwo.vue b/apps/docs/src/components/examples/ProgressBarExampleTwo.vue
new file mode 100644
index 0000000..f7d6728
--- /dev/null
+++ b/apps/docs/src/components/examples/ProgressBarExampleTwo.vue
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { CloseCircleIcon, CloseIcon, SpinnerIcon } from "@iconicicons/vue3";
+import { ProgressBar } from "wedges-vue";
+</script>
+
+<template>
+  <div class="inline-flex w-full max-w-[400px] flex-col gap-y-12">
+    <ProgressBar
+
+      helper-text="27MB of 60MB"
+      indicator="50%"
+      label="Uploading..."
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="50"
+    >
+      <template #afterIndicator>
+        <SpinnerIcon class="animate-spin" />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar
+      color="green"
+      helper-text="60MB of 60MB"
+      indicator="100%"
+      label="Uploading Complete"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="100"
+    >
+      <template #afterIndicator>
+        <CheckCircleIcon class="text-wg-green" />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar
+
+      color="red"
+
+      label="Uploading Failed"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="100"
+    >
+      <template #helperText>
+        <span class="text-destructive">
+          Oops, something went wrong
+        </span>
+      </template>
+      <template #afterIndicator>
+        <CloseCircleIcon class="text-wg-red" />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar
+      color="green"
+      indicator="368"
+      label="Class A"
+      :max="500"
+      :value="368"
+      variant="inline"
+    />
+
+    <ProgressBar
+      color="orange"
+      indicator="211"
+      label="Class B"
+      :max="500"
+      :value="211"
+      variant="inline"
+    />
+
+    <ProgressBar
+      color="red"
+      indicator="96"
+      label="Class C"
+      :max="500"
+      :value="96"
+      variant="inline"
+    />
+
+    <ProgressBar
+
+      color="secondary"
+      description="(23.6MB)"
+
+      label="design system.fig"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="50"
+    >
+      <template #indicator>
+        <span class="text-surface-500">50% (9 sec left)</span>
+      </template>
+
+      <template #afterIndicator>
+        <CloseIcon />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar indicator="70%" label="Please wait..." :value="70" color="secondary" />
+
+    <ProgressBar
+
+      indicator="50%"
+      label="Progress"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value="50"
+      variant="inline"
+    >
+      <template #afterIndicator>
+        <SpinnerIcon class="animate-spin" />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar indicator="50% Complete" :value="50" variant="inline" color="blue" />
+
+    <ProgressBar
+
+      description="35%"
+      :value="35"
+      variant="inline"
+      color="yellow"
+    >
+      <template #afterIndicator>
+        <CloseIcon />
+      </template>
+    </ProgressBar>
+
+    <ProgressBar :value="70" color="pink" helper-text="(650MB/1.12GB) · 17 seconds remaining" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ProgressBarPreview.vue b/apps/docs/src/components/examples/ProgressBarPreview.vue
new file mode 100644
index 0000000..1222c5c
--- /dev/null
+++ b/apps/docs/src/components/examples/ProgressBarPreview.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { SpinnerIcon } from "@iconicicons/vue3";
+import { onMounted, ref } from "vue";
+import { ProgressBar } from "wedges-vue";
+
+const value = ref(1);
+
+onMounted(() => {
+  const interval = setInterval(() => {
+    value.value = (value.value + 1) % 101;
+  }, 150);
+
+  return () => clearInterval(interval);
+});
+</script>
+
+<template>
+  <div class="inline-block w-full max-w-[400px]">
+    <ProgressBar
+      helper-text="Helper text"
+      :indicator="`${value}%`"
+      label="Label"
+      tooltip="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :value
+      :max="100"
+    >
+      <template #afterIndicator>
+        <SpinnerIcon class="animate-spin" />
+      </template>
+    </ProgressBar>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ProgressCircleExampleOne.vue b/apps/docs/src/components/examples/ProgressCircleExampleOne.vue
new file mode 100644
index 0000000..ceb09e0
--- /dev/null
+++ b/apps/docs/src/components/examples/ProgressCircleExampleOne.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ProgressCircle } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-6">
+    <div class="flex items-center gap-6">
+      <ProgressCircle :value="75" size="xs" />
+      <ProgressCircle :value="75" size="sm" />
+      <ProgressCircle :value="75" size="md" />
+      <ProgressCircle :value="75" size="lg" />
+      <ProgressCircle :value="75" size="xl" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="green" :value="75" size="xl" />
+      <ProgressCircle color="green" :value="75" size="lg" />
+      <ProgressCircle color="green" :value="75" size="md" />
+      <ProgressCircle color="green" :value="75" size="sm" />
+      <ProgressCircle color="green" :value="75" size="xs" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="blue" :value="75" size="xs" />
+      <ProgressCircle color="blue" :value="75" size="sm" />
+      <ProgressCircle color="blue" :value="75" size="md" />
+      <ProgressCircle color="blue" :value="75" size="lg" />
+      <ProgressCircle color="blue" :value="75" size="xl" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="orange" :value="75" size="xl" />
+      <ProgressCircle color="orange" :value="75" size="lg" />
+      <ProgressCircle color="orange" :value="75" size="md" />
+      <ProgressCircle color="orange" :value="75" size="sm" />
+      <ProgressCircle color="orange" :value="75" size="xs" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="pink" :value="75" size="xs" />
+      <ProgressCircle color="pink" :value="75" size="sm" />
+      <ProgressCircle color="pink" :value="75" size="md" />
+      <ProgressCircle color="pink" :value="75" size="lg" />
+      <ProgressCircle color="pink" :value="75" size="xl" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="yellow" :value="75" size="xl" />
+      <ProgressCircle color="yellow" :value="75" size="lg" />
+      <ProgressCircle color="yellow" :value="75" size="md" />
+      <ProgressCircle color="yellow" :value="75" size="sm" />
+      <ProgressCircle color="yellow" :value="75" size="xs" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="red" :value="75" size="xs" />
+      <ProgressCircle color="red" :value="75" size="sm" />
+      <ProgressCircle color="red" :value="75" size="md" />
+      <ProgressCircle color="red" :value="75" size="lg" />
+      <ProgressCircle color="red" :value="75" size="xl" />
+    </div>
+
+    <div class="flex items-center gap-6">
+      <ProgressCircle color="secondary" :value="75" size="xl" />
+      <ProgressCircle color="secondary" :value="75" size="lg" />
+      <ProgressCircle color="secondary" :value="75" size="md" />
+      <ProgressCircle color="secondary" :value="75" size="sm" />
+      <ProgressCircle color="secondary" :value="75" size="xs" />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ProgressCirclePreview.vue b/apps/docs/src/components/examples/ProgressCirclePreview.vue
new file mode 100644
index 0000000..7564214
--- /dev/null
+++ b/apps/docs/src/components/examples/ProgressCirclePreview.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ProgressCircle } from "wedges-vue";
+
+const value = ref(0);
+
+onMounted(() => {
+  setInterval(() => {
+    value.value = (value.value + 1) % 101;
+  }, 100);
+});
+</script>
+
+<template>
+  <div class="inline-block">
+    <ProgressCircle :color="value < 33 ? 'red' : value < 66 ? 'orange' : 'green'" :value />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/RadioGroupExampleOne.vue b/apps/docs/src/components/examples/RadioGroupExampleOne.vue
new file mode 100644
index 0000000..97f77ab
--- /dev/null
+++ b/apps/docs/src/components/examples/RadioGroupExampleOne.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { RadioGroup, RadioGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-8 text-left">
+    <RadioGroup
+      required
+      description="(description)"
+      helper-text="Helper text"
+      label="Vertical"
+      tooltip="Tooltip example"
+    >
+      <RadioGroupItem value="option-1" label="Option 1" />
+      <RadioGroupItem value="option-2" label="Option 2" />
+      <RadioGroupItem value="option-3" label="Option 3" />
+      <RadioGroupItem
+        value="option-4"
+        description="(description)"
+        helper-text="Helper text"
+        label="Option 4"
+        tooltip="Tooltip example"
+      >
+        children?
+      </RadioGroupItem>
+    </RadioGroup>
+
+    <RadioGroup
+      disabled
+      description="(disabled)"
+      helper-text="Helper text"
+      label="Horizontal"
+      orientation="horizontal"
+      tooltip="Tooltip example"
+    >
+      <RadioGroupItem value="option-1" label="Option 1" />
+      <RadioGroupItem value="option-2" label="Option 2" />
+      <RadioGroupItem value="option-3" label="Option 3" />
+    </RadioGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/RadioGroupExampleTwo.vue b/apps/docs/src/components/examples/RadioGroupExampleTwo.vue
new file mode 100644
index 0000000..3689ace
--- /dev/null
+++ b/apps/docs/src/components/examples/RadioGroupExampleTwo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { AvatarGroup, Checkbox, CheckboxRoot } from "wedges-vue";
+
+const items = [
+  {
+    initials: "W",
+  },
+  {
+    initials: "D",
+  },
+  {
+    initials: "G",
+  },
+];
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-6 text-left">
+    <CheckboxRoot
+      as-child
+      class="flex w-80 cursor-pointer items-center justify-between rounded-lg border border-surface-100 px-4 py-3 shadow-wg-xs outline-2 -outline-offset-1 outline-primary wg-bg-white dark:wg-bg-neutral-900 [&:has([data-state=checked])]:outline"
+    >
+      <label>
+        <Checkbox />
+
+        <div class="flex grow items-center justify-between text-sm">
+          <span class="select-none">Share to 3 users</span>
+
+          <AvatarGroup
+            :items
+            size="xs"
+          />
+        </div>
+      </label>
+    </CheckboxRoot>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/RadioGroupPreview.vue b/apps/docs/src/components/examples/RadioGroupPreview.vue
new file mode 100644
index 0000000..8e7b69a
--- /dev/null
+++ b/apps/docs/src/components/examples/RadioGroupPreview.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { RadioGroup, RadioGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto w-fit text-left">
+    <RadioGroup
+      default-value="value-1"
+      description="description"
+      helper-text="Helper text"
+      label="Label"
+      required
+      tooltip="Tooltip example"
+    >
+      <RadioGroupItem label="Value 1" value="value-1" />
+      <RadioGroupItem label="Value 2" value="value-2" />
+      <RadioGroupItem label="Value 3" value="value-3" />
+      <RadioGroupItem label="Value 4" value="value-4" />
+    </RadioGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SliderExampleFive.vue b/apps/docs/src/components/examples/SliderExampleFive.vue
new file mode 100644
index 0000000..eb1b0c1
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderExampleFive.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+import { EmojiHappyIcon, EmojiSadIcon, MoonIcon, StarIcon, SunIcon } from "@iconicicons/vue3";
+</script>
+
+<template>
+  <div class="inline-flex w-full min-w-80 max-w-[400px] flex-col gap-y-20">
+    <Slider
+      :default-value="[5]"
+      description="(1-10)"
+      helper-text="How happy are you with the level of service?"
+      label="Rating"
+      :max="10"
+      :min="1"
+      show-tooltip="hover"
+    >
+      <template #before>
+        <div class="flex items-center gap-4">
+          <EmojiSadIcon class="size-6 opacity-50" />
+          <span>1</span>
+        </div>
+      </template>
+
+      <template #after>
+        <div class="flex items-center gap-4">
+          <span>10</span>
+          <EmojiHappyIcon class="size-6 opacity-50" />
+        </div>
+      </template>
+    </Slider>
+
+    <Slider
+      :default-value="[50]"
+      label="Brightness"
+      :max="100"
+      :min="1"
+      show-tooltip="always"
+      :render-tooltip="(val) => val <= 25 ? 'Dark' : val <= 50 ? 'Dim' : val <= 75 ? 'Bright' : 'Very Bright'"
+    >
+      <template #before>
+        <MoonIcon class="size-6 opacity-50" />
+      </template>
+
+      <template #after>
+        <SunIcon class="size-6 opacity-50" />
+      </template>
+    </Slider>
+
+    <Slider
+      after="$10,000"
+      before="$1,000"
+      :default-value="[2500, 5000]"
+      label="Price Range"
+      :max="10000"
+      :min="1000"
+      :render-tooltip="(val) => `$${val.toLocaleString('en-US')}`"
+      show-tooltip="hover"
+      :step="100"
+    />
+
+    <Slider
+      after="10"
+      :default-value="[6]"
+      :max="10"
+      :min="1"
+    >
+      <template #before>
+        <StarIcon class="size-6 opacity-50" />
+      </template>
+    </Slider>
+
+    <Slider :default-value="[50]" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SliderExampleFour.vue b/apps/docs/src/components/examples/SliderExampleFour.vue
new file mode 100644
index 0000000..875eb0c
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderExampleFour.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+import { MinusIcon, PlusIcon } from "@iconicicons/vue3";
+import { computed, ref } from "vue";
+
+const value = ref<number[]>([16]);
+
+function decrementValue() {
+  value.value = value.value && value.value.length > 0 ? [Math.max(value.value[0] - 2, 12)] : value.value;
+}
+
+function incrementValue() {
+  value.value = value.value && value.value.length > 0 ? [Math.min(value.value[0] + 2, 48)] : value.value;
+}
+
+const helperText = computed(() => value.value ? `Font size: ${value.value[0]}px` : undefined);
+
+function onValueChange(val: number[]) {
+  value.value = val;
+}
+</script>
+
+<template>
+  <Slider
+    :default-value="value"
+    :helper-text
+    label="Font Size"
+    :max="48"
+    :min="12"
+    :render-tooltip="() => `${value.toString()}px`"
+    show-tooltip="hover"
+    :step="2"
+    :model-value="value"
+    @update:model-value="onValueChange"
+  >
+    <template #before>
+      <Button size="sm" is-icon-only variant="transparent" @click="decrementValue">
+        <MinusIcon />
+      </Button>
+    </template>
+
+    <template #after>
+      <Button size="sm" is-icon-only variant="transparent" @click="incrementValue">
+        <PlusIcon />
+      </Button>
+    </template>
+  </slider>
+</template>
diff --git a/apps/docs/src/components/examples/SliderExampleOne.vue b/apps/docs/src/components/examples/SliderExampleOne.vue
new file mode 100644
index 0000000..4ba81d1
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderExampleOne.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+</script>
+
+<template>
+  <div class="inline-flex w-full min-w-80 max-w-[400px] flex-row items-center justify-center gap-12 text-surface-300">
+    <Slider :default-value="[25]" show-tooltip="hover" orientation="vertical" />
+    <Slider :default-value="[50]" show-tooltip="hover" orientation="vertical" />
+    <Slider :default-value="[75]" show-tooltip="hover" orientation="vertical" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SliderExampleThree.vue b/apps/docs/src/components/examples/SliderExampleThree.vue
new file mode 100644
index 0000000..d244d8d
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderExampleThree.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Slider } from "wedges-vue";
+
+const value = ref<number[] | undefined>([2500, 5000]);
+
+function renderTooltip(val: number) {
+  if (val)
+    return `$${val.toLocaleString("en-US")}`;
+
+  return "";
+}
+
+function onValueChange(val: number[] | undefined) {
+  value.value = val;
+}
+
+const helperText = computed(() => value.value ? `Selected range: $${value.value[0]?.toLocaleString("en-us")} - $${value.value[1]?.toLocaleString("en-us")}` : undefined);
+</script>
+
+<template>
+  <Slider
+    after="$10,000"
+    before="$1,000"
+    :default-value="[2500, 5000]"
+    label="Price Range"
+    :max="10000"
+    :min="1000"
+    show-tooltip="hover"
+    :step="100"
+    :helper-text
+    :render-tooltip="renderTooltip"
+    @update:model-value="onValueChange"
+  />
+</template>
diff --git a/apps/docs/src/components/examples/SliderExampleTwo.vue b/apps/docs/src/components/examples/SliderExampleTwo.vue
new file mode 100644
index 0000000..545e851
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderExampleTwo.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+</script>
+
+<template>
+  <div class="inline-flex w-full min-w-80 max-w-[400px] flex-col items-stretch gap-12">
+    <Slider
+      after="100"
+      before="0"
+      content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :default-value="[50]"
+      description="(description)"
+      helper-text="Helper text"
+      label="Label"
+      disabled
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SliderPreview.vue b/apps/docs/src/components/examples/SliderPreview.vue
new file mode 100644
index 0000000..21b03d1
--- /dev/null
+++ b/apps/docs/src/components/examples/SliderPreview.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+import { MinusIcon, PlusIcon } from "@iconicicons/vue3";
+import { ref } from "vue";
+
+const value = ref([50]);
+</script>
+
+<template>
+  <div class="inline-flex w-full min-w-80 max-w-[400px] flex-col gap-y-12 text-surface-300">
+    <Slider
+      v-model="value"
+      content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+      :default-value="[50]"
+      description="(description)"
+      helper-text="Helper text"
+      label="Label"
+    >
+      <template #before>
+        <MinusIcon class="size-6 text-surface-300 dark:text-gray-500" />
+      </template>
+
+      <template #after>
+        <PlusIcon class="size-6 text-surface-300 dark:text-gray-500" />
+      </template>
+    </Slider>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SwitchExampleOne.vue b/apps/docs/src/components/examples/SwitchExampleOne.vue
new file mode 100644
index 0000000..8924481
--- /dev/null
+++ b/apps/docs/src/components/examples/SwitchExampleOne.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Switch } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col gap-12">
+    <div class="mx-auto flex max-w-fit flex-col items-start gap-6 text-start">
+      <!-- Example 1 } -->
+      <Switch label="Label" tooltip="Tooltip example" />
+
+      <!-- Example 2 -->
+      <Switch
+        description="(disabled)"
+        helper-text="Helper text"
+        label="Label"
+        tooltip="Tooltip example"
+        disabled
+      />
+    </div>
+
+    <div class="mx-auto flex max-w-fit flex-col items-start gap-6 text-start">
+      <!-- Example 3 -->
+      <Switch align-label="start" label="Label" tooltip="Tooltip example" />
+
+      <!-- Example 4 -->
+      <Switch
+        align-label="start"
+        description="(disabled)"
+        helper-text="Helper text"
+        label="Label"
+        tooltip="Tooltip example"
+        disabled
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SwitchGroupExampleOne.vue b/apps/docs/src/components/examples/SwitchGroupExampleOne.vue
new file mode 100644
index 0000000..ce1648e
--- /dev/null
+++ b/apps/docs/src/components/examples/SwitchGroupExampleOne.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { SwitchGroup, SwitchGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="mx-auto flex w-fit flex-col gap-8 text-left">
+    <!-- Example 1 -->
+    <SwitchGroup
+      align-labels="end"
+      description="(description)"
+      helper-text="Helper text"
+      label="Group Label"
+      tooltip="Tooltip example"
+    >
+      <SwitchGroupItem default-checked label="Option 1" />
+      <SwitchGroupItem disabled label="Option 2" />
+      <SwitchGroupItem label="Option 3" />
+      <SwitchGroupItem
+        description="(description)"
+        helper-text="Helper text"
+        label="Option 4"
+        tooltip="Tooltip example"
+      />
+    </SwitchGroup>
+
+    <!-- Example 2 -->
+    <SwitchGroup
+      align-labels="start"
+      description="(description)"
+      helper-text="Helper text"
+      label="Group Label"
+      tooltip="Tooltip example"
+    >
+      <SwitchGroupItem default-checked label="Option 1" />
+      <SwitchGroupItem disabled label="Option 2" />
+      <SwitchGroupItem label="Option 3" />
+      <SwitchGroupItem
+        description="(description)"
+        helper-text="Helper text"
+        label="Option 4"
+        tooltip="Tooltip example"
+      />
+    </SwitchGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SwitchGroupPreview.vue b/apps/docs/src/components/examples/SwitchGroupPreview.vue
new file mode 100644
index 0000000..9de0dc6
--- /dev/null
+++ b/apps/docs/src/components/examples/SwitchGroupPreview.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { SwitchGroup, SwitchGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto w-fit text-left">
+    <SwitchGroup
+      align-labels="end"
+      description="(description)"
+      helper-text="Helper text"
+      label="Group Label"
+      tooltip="Tooltip example"
+    >
+      <SwitchGroupItem label="Option 1" />
+      <SwitchGroupItem label="Option 2" />
+      <SwitchGroupItem label="Option 3" />
+      <SwitchGroupItem label="Option 4" />
+    </SwitchGroup>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/SwitchPreview.vue b/apps/docs/src/components/examples/SwitchPreview.vue
new file mode 100644
index 0000000..bce3fc7
--- /dev/null
+++ b/apps/docs/src/components/examples/SwitchPreview.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Switch } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto w-fit text-left">
+    <Switch
+      required
+      align-label="end"
+      description="(description)"
+      :disabled="false"
+      helper-text="Helper Text"
+      label="Label"
+      tooltip="Tooltip example"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TabsExampleOne.vue b/apps/docs/src/components/examples/TabsExampleOne.vue
new file mode 100644
index 0000000..d089da6
--- /dev/null
+++ b/apps/docs/src/components/examples/TabsExampleOne.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { BoxIcon, ClockIcon, SpinnerIcon } from "@iconicicons/vue3";
+import { Badge, Tabs, TabsList, TabsTrigger } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex w-fit max-w-full flex-col gap-10 overflow-scroll p-2 text-left">
+    <!-- {/* Example 1 */} -->
+    <Tabs variant="underlined" default-value="actions">
+      <TabsList>
+        <TabsTrigger
+
+          value="actions"
+        >
+          <template #before>
+            <SpinnerIcon />
+          </template>
+          In progress
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              24
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="Shipped"
+        >
+          <template #before>
+            <BoxIcon class="text-wg-green" />
+          </template>
+          Shipped
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              19
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="delayed"
+        >
+          <template #before>
+            <ClockIcon class="text-wg-red" />
+          </template>
+          Security
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              3
+            </Badge>
+          </template>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+
+    <!-- {/* Example 2 */} -->
+    <Tabs variant="contained-bottom" default-value="actions">
+      <TabsList>
+        <TabsTrigger
+
+          value="actions"
+        >
+          <template #before>
+            <SpinnerIcon />
+          </template>
+          In progress
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              24
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger>
+          <template #before>
+            <BoxIcon class="text-wg-green" />
+          </template>
+          Shipped
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              19
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="delayed"
+        >
+          <template #before>
+            <ClockIcon class="text-wg-red" />
+          </template>
+          Security
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              3
+            </Badge>
+          </template>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+
+    <!-- {/* Example 3 */} -->
+    <Tabs variant="fill" default-value="actions">
+      <TabsList>
+        <TabsTrigger
+          value="actions"
+        >
+          <template #before>
+            <SpinnerIcon />
+          </template>
+          In progress
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              24
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+
+          value="Shipped"
+        >
+          <template #before>
+            <BoxIcon class="text-wg-green" />
+          </template>
+          Shipped
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              19
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="delayed"
+        >
+          <template #before>
+            <ClockIcon class="text-wg-red" />
+          </template>
+          Security
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              3
+            </Badge>
+          </template>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+
+    <!-- {/* Example 4 */} -->
+    <Tabs variant="contained-top" default-value="actions">
+      <TabsList>
+        <TabsTrigger
+          value="actions"
+        >
+          <template #before>
+            <SpinnerIcon />
+          </template>
+          In progress
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              24
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="Shipped"
+        >
+          <template #before>
+            <BoxIcon class="text-wg-green" />
+          </template>
+          Shipped
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              19
+            </Badge>
+          </template>
+        </TabsTrigger>
+
+        <TabsTrigger
+          value="delayed"
+        >
+          <template #before>
+            <ClockIcon class="text-wg-red" />
+          </template>
+          Security
+
+          <template #after>
+            <Badge stroke size="sm" shape="pill">
+              3
+            </Badge>
+          </template>
+        </TabsTrigger>
+      </TabsList>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TabsPreview.vue b/apps/docs/src/components/examples/TabsPreview.vue
new file mode 100644
index 0000000..cae5e28
--- /dev/null
+++ b/apps/docs/src/components/examples/TabsPreview.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { BookIcon, LockIcon, VideoIcon } from "@iconicicons/vue3";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "wedges-vue";
+</script>
+
+<template>
+  <div className="m-auto w-fit text-left">
+    <Tabs variant="contained-bottom" default-value="actions">
+      <TabsList>
+        <TabsTrigger value="actions">
+          <VideoIcon />
+          Actions
+        </TabsTrigger>
+
+        <TabsTrigger value="wiki">
+          <BookIcon />
+          Wiki
+        </TabsTrigger>
+
+        <TabsTrigger value="security">
+          <LockIcon />
+          Security
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="actions">
+        Actions tab content
+      </TabsContent>
+      <TabsContent value="wiki">
+        Wiki tab content
+      </TabsContent>
+      <TabsContent value="security">
+        Security tab content
+      </TabsContent>
+    </Tabs>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TagDotIcon.vue b/apps/docs/src/components/examples/TagDotIcon.vue
new file mode 100644
index 0000000..5fdab4d
--- /dev/null
+++ b/apps/docs/src/components/examples/TagDotIcon.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg fill="none" height="24" viewBox="0 0 24 24" width="24">
+    <circle cx="12" cy="12" r="4" fill="currentColor" />
+  </svg>
+</template>
diff --git a/apps/docs/src/components/examples/TagExampleOne.vue b/apps/docs/src/components/examples/TagExampleOne.vue
new file mode 100644
index 0000000..21c5ec4
--- /dev/null
+++ b/apps/docs/src/components/examples/TagExampleOne.vue
@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import { BookIcon, FileIcon, FolderIcon, TrashIcon } from "@iconicicons/vue3";
+import { Avatar, Tag } from "wedges-vue";
+import UKFlagIcon from "./TagUKFlagIcon.vue";
+import USFlagIcon from "./TagUSFlagIcon.vue";
+import DotIcon from "./TagDotIcon.vue";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit flex-col items-start gap-4">
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag closable>
+        Pineapple
+      </Tag>
+
+      <Tag color="yellow" closable stroke>
+        Lemons
+      </Tag>
+
+      <Tag closable>
+        Watermelon
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag color="green">
+        <template #before>
+          <DotIcon />
+        </template>
+        Online
+      </Tag>
+
+      <Tag color="red">
+        <template #before>
+          <DotIcon />
+        </template>
+        Offline
+      </Tag>
+
+      <Tag>
+        <template #before>
+          <DotIcon class="text-surface-300" />
+        </template>
+        Suspended
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag
+        closable
+        shape="pill"
+        stroke
+      >
+        <template #avatar>
+          <Avatar src="https://github.com/ormanclark.png" />
+        </template>
+
+        @ormanclark
+      </Tag>
+
+      <Tag
+
+        color="orange"
+        shape="pill"
+        stroke
+      >
+        <template #avatar>
+          <Avatar src="https://github.com/lmsqueezy.png" />
+        </template>
+        Lemon Squeezy
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag color="blue" closable>
+        <template #before>
+          <FolderIcon />
+        </template>
+        Folders
+      </Tag>
+
+      <Tag color="blue">
+        <template #before>
+          <FileIcon />
+        </template>
+        Files
+      </Tag>
+
+      <Tag color="blue" closable>
+        <template #before>
+          <BookIcon />
+        </template>
+        Guides
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag color="yellow" closable stroke>
+        New
+      </Tag>
+
+      <Tag color="orange" closable stroke>
+        Pending
+      </Tag>
+
+      <Tag color="green" closable stroke>
+        Active
+      </Tag>
+
+      <Tag color="red" closable stroke>
+        Closed
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag color="primary" closable shape="pill">
+        Free parking
+      </Tag>
+
+      <Tag color="primary" closable shape="pill">
+        Pool
+      </Tag>
+
+      <Tag color="primary" closable shape="pill">
+        Free WiFi
+      </Tag>
+
+      <Tag color="primary" closable shape="pill">
+        Gym
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag closable>
+        <template #before>
+          <UKFlagIcon />
+        </template>
+        United Kingdom
+      </Tag>
+
+      <Tag closable>
+        <template #before>
+          <USFlagIcon />
+        </template>
+        United States
+      </Tag>
+    </div>
+
+    <div class="flex flex-wrap items-center justify-start gap-4">
+      <Tag
+        closable
+        class="uppercase"
+
+        color="orange"
+        shape="pill"
+        size="sm"
+        stroke
+      >
+        <template #close-icon>
+          <TrashIcon class="h-4 w-4 text-wg-orange-600 dark:text-wg-orange" />
+        </template>
+
+        ux
+      </Tag>
+
+      <Tag
+        closable
+        class="uppercase"
+        color="orange"
+        shape="pill"
+        size="sm"
+        stroke
+      >
+        <template #close-icon>
+          <TrashIcon class="h-4 w-4 text-wg-orange-600 dark:text-wg-orange" />
+        </template>
+        ui
+      </Tag>
+
+      <Tag
+        closable
+        class="uppercase"
+        color="orange"
+        shape="pill"
+        size="sm"
+        stroke
+      >
+        <template #close-icon>
+          <TrashIcon class="h-4 w-4 text-wg-orange-600 dark:text-wg-orange" />
+        </template>
+        motion
+      </Tag>
+
+      <Tag
+        closable
+        class="uppercase"
+        color="orange"
+        shape="pill"
+        size="sm"
+        stroke
+      >
+        <template #close-icon>
+          <TrashIcon class="h-4 w-4 text-wg-orange-600 dark:text-wg-orange" />
+        </template>
+        graphics
+      </Tag>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TagPreview.vue b/apps/docs/src/components/examples/TagPreview.vue
new file mode 100644
index 0000000..013a829
--- /dev/null
+++ b/apps/docs/src/components/examples/TagPreview.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { Tag } from "wedges-vue";
+
+function close() {
+  // eslint-disable-next-line no-alert
+  alert("Custom onClose callback with preventDefault()");
+}
+</script>
+
+<template>
+  <Tag
+    closable
+    @close.prevent="close"
+  >
+    Tag
+  </Tag>
+</template>
diff --git a/apps/docs/src/components/examples/TagUKFlagIcon.vue b/apps/docs/src/components/examples/TagUKFlagIcon.vue
new file mode 100644
index 0000000..69709d2
--- /dev/null
+++ b/apps/docs/src/components/examples/TagUKFlagIcon.vue
@@ -0,0 +1,60 @@
+<template>
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none">
+    <path
+      d="M12.5 22C18.0228 22 22.5 17.5228 22.5 12C22.5 6.47715 18.0228 2 12.5 2C6.97715 2 2.5 6.47715 2.5 12C2.5 17.5228 6.97715 22 12.5 22Z"
+      fill="#F0F0F0"
+    />
+    <path
+      d="M4.56724 5.91083C3.78173 6.93282 3.18942 8.11075 2.84454 9.3904H8.0468L4.56724 5.91083Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M22.1558 9.39052C21.811 8.11091 21.2186 6.93298 20.4331 5.91099L16.9537 9.39052H22.1558Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M2.84454 14.6085C3.18946 15.8881 3.78177 17.0661 4.56724 18.088L8.04669 14.6085H2.84454Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M18.588 4.06648C17.566 3.28097 16.3881 2.68867 15.1084 2.34374V7.54597L18.588 4.06648Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M6.41163 19.9314C7.43362 20.7169 8.61155 21.3092 9.89116 21.6541V16.452L6.41163 19.9314Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M9.89112 2.34374C8.61151 2.68866 7.43358 3.28097 6.41163 4.06644L9.89112 7.54593V2.34374Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M15.1084 21.6541C16.388 21.3092 17.566 20.7169 18.5879 19.9314L15.1084 16.452V21.6541Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M16.9537 14.6085L20.4331 18.088C21.2186 17.0661 21.811 15.8881 22.1558 14.6085H16.9537Z"
+      fill="#0052B4"
+    />
+    <path
+      d="M22.4154 10.6957H13.8044L13.8044 2.08465C13.3774 2.02906 12.9421 2 12.5 2C12.0579 2 11.6226 2.02906 11.1957 2.08465V10.6956L2.58465 10.6956C2.52906 11.1226 2.5 11.5579 2.5 12C2.5 12.4421 2.52906 12.8774 2.58465 13.3043H11.1956L11.1956 21.9154C11.6226 21.9709 12.0579 22 12.5 22C12.9421 22 13.3774 21.971 13.8043 21.9154V13.3044L22.4154 13.3044C22.4709 12.8774 22.5 12.4421 22.5 12C22.5 11.5579 22.4709 11.1226 22.4154 10.6957Z"
+      fill="#D80027"
+    />
+    <path
+      d="M15.1087 14.6094L19.571 19.0717C19.7763 18.8666 19.9721 18.6521 20.1588 18.4297L16.3385 14.6093L15.1087 14.6094Z"
+      fill="#D80027"
+    />
+    <path
+      d="M9.89127 14.6093L5.42889 19.0716C5.63405 19.2769 5.84854 19.4727 6.07088 19.6595L9.89127 15.839V14.6093Z"
+      fill="#D80027"
+    />
+    <path
+      d="M9.89115 9.39093L5.4288 4.92847C5.22357 5.13363 5.02779 5.34812 4.84099 5.57047L8.66142 9.3909L9.89115 9.39093Z"
+      fill="#D80027"
+    />
+    <path
+      d="M15.1087 9.39182L19.5711 4.9294C19.3659 4.72417 19.1514 4.52839 18.9291 4.34163L15.1087 8.16206V9.39182Z"
+      fill="#D80027"
+    />
+  </svg>
+</template>
diff --git a/apps/docs/src/components/examples/TagUSFlagIcon.vue b/apps/docs/src/components/examples/TagUSFlagIcon.vue
new file mode 100644
index 0000000..ee60be8
--- /dev/null
+++ b/apps/docs/src/components/examples/TagUSFlagIcon.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg width="25" height="24" viewBox="0 0 25 24" fill="none">
+    <path
+      d="M12.5 22C18.0228 22 22.5 17.5228 22.5 12C22.5 6.47715 18.0228 2 12.5 2C6.97715 2 2.5 6.47715 2.5 12C2.5 17.5228 6.97715 22 12.5 22Z"
+      fill="#F0F0F0"
+    />
+    <path
+      d="M12.065 12L22.5 12C22.5 11.0974 22.3794 10.223 22.1552 9.39129H12.065V12Z"
+      fill="#D80027"
+    />
+    <path
+      d="M12.065 6.78211H21.032C20.4198 5.7832 19.6371 4.90027 18.7246 4.1734H12.065V6.78211Z"
+      fill="#D80027"
+    />
+    <path
+      d="M12.5 22C14.8535 22 17.0164 21.1866 18.7246 19.8261H6.27492C7.98312 21.1866 10.1465 22 12.5 22Z"
+      fill="#D80027"
+    />
+    <path
+      d="M3.96755 17.2166H21.0321C21.5235 16.4147 21.9047 15.5381 22.1553 14.6079H2.8443C3.09497 15.5381 3.4761 16.4147 3.96755 17.2166Z"
+      fill="#D80027"
+    />
+    <path
+      d="M7.13219 3.56164H8.04348L7.19582 4.17746L7.51961 5.17391L6.67199 4.55809L5.82437 5.17391L6.10406 4.31309C5.35773 4.93477 4.70359 5.66313 4.16453 6.47469H4.45652L3.91695 6.86668C3.83289 7.00691 3.75227 7.14938 3.675 7.29395L3.93266 8.08695L3.45195 7.7377C3.33246 7.99086 3.22316 8.24973 3.12492 8.51398L3.40879 9.38773H4.45652L3.60887 10.0036L3.93266 11L3.08504 10.3842L2.5773 10.7531C2.52648 11.1616 2.5 11.5777 2.5 12H12.5C12.5 6.47719 12.5 5.82609 12.5 2C10.5245 2 8.68301 2.57305 7.13219 3.56164ZM7.51961 11L6.67199 10.3842L5.82437 11L6.14816 10.0036L5.30051 9.38773H6.34824L6.67199 8.39129L6.99574 9.38773H8.04348L7.19582 10.0036L7.51961 11ZM7.19582 7.09051L7.51961 8.08695L6.67199 7.47113L5.82437 8.08695L6.14816 7.09051L5.30051 6.47469H6.34824L6.67199 5.47824L6.99574 6.47469H8.04348L7.19582 7.09051ZM11.1066 11L10.2589 10.3842L9.41133 11L9.73512 10.0036L8.88746 9.38773H9.9352L10.2589 8.39129L10.5827 9.38773H11.6304L10.7828 10.0036L11.1066 11ZM10.7828 7.09051L11.1066 8.08695L10.2589 7.47113L9.41133 8.08695L9.73512 7.09051L8.88746 6.47469H9.9352L10.2589 5.47824L10.5827 6.47469H11.6304L10.7828 7.09051ZM10.7828 4.17746L11.1066 5.17391L10.2589 4.55809L9.41133 5.17391L9.73512 4.17746L8.88746 3.56164H9.9352L10.2589 2.5652L10.5827 3.56164H11.6304L10.7828 4.17746Z"
+      fill="#0052B4"
+    />
+  </svg>
+</template>
diff --git a/apps/docs/src/components/examples/TextareaExampleOne.vue b/apps/docs/src/components/examples/TextareaExampleOne.vue
new file mode 100644
index 0000000..aa993e5
--- /dev/null
+++ b/apps/docs/src/components/examples/TextareaExampleOne.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Textarea } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto max-w-sm text-left">
+    <Textarea
+      destructive
+      required
+      description="(description)"
+      helper-text="Helper text"
+      label="Label"
+      placeholder="Placeholder"
+      tooltip="Tooltip example"
+      class="max-h-64"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TextareaExampleTwo.vue b/apps/docs/src/components/examples/TextareaExampleTwo.vue
new file mode 100644
index 0000000..094f2e6
--- /dev/null
+++ b/apps/docs/src/components/examples/TextareaExampleTwo.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Textarea } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex max-w-sm flex-col gap-10 text-left">
+    <Textarea
+      class="resize-none"
+      placeholder="Placeholder"
+      label="Label"
+      tooltip="Hello world"
+      value="Value in disabled state"
+      disabled
+    />
+
+    <Textarea
+      class="resize-none"
+      description="(description)"
+      helper-text="Helper text"
+      label="Label"
+    />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TextareaPreview.vue b/apps/docs/src/components/examples/TextareaPreview.vue
new file mode 100644
index 0000000..95d11f4
--- /dev/null
+++ b/apps/docs/src/components/examples/TextareaPreview.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Textarea } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto max-w-sm w-full text-left">
+    <Textarea label="Label" placeholder="Placeholder" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ThemingCustomThemes.vue b/apps/docs/src/components/examples/ThemingCustomThemes.vue
new file mode 100644
index 0000000..9a2b01c
--- /dev/null
+++ b/apps/docs/src/components/examples/ThemingCustomThemes.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Button } from "wedges-vue";
+</script>
+
+<template>
+  <div class="dark-blue mx-auto flex max-w-xs justify-center rounded-lg bg-background p-10 text-foreground">
+    <Button variant="primary">
+      Primary Button
+    </Button>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ThemingDarkMode.vue b/apps/docs/src/components/examples/ThemingDarkMode.vue
new file mode 100644
index 0000000..7db44bf
--- /dev/null
+++ b/apps/docs/src/components/examples/ThemingDarkMode.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { MoonIcon, SunIcon } from "@iconicicons/vue3";
+import { ref } from "vue";
+import { Button, Switch, Toggle, ToggleGroup, ToggleGroupItem, Tooltip } from "wedges-vue";
+
+const theme = ref<"light" | "dark">("light");
+
+function toggleTheme() {
+  theme.value = theme.value === "light" ? "dark" : "light";
+}
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col items-center gap-8 text-left">
+    <!-- Example 1 } -->
+    <Tooltip
+      :side-offset="8"
+      :content="`Click to switch to the ${
+        typeof theme !== 'undefined' && theme === 'dark' ? 'light' : 'dark'
+      } theme`"
+    >
+      <Button
+        variant="transparent"
+        is-icon-only
+        @click="toggleTheme"
+      >
+        <SunIcon v-if="theme === 'light'" />
+        <MoonIcon v-else />
+      </Button>
+    </Tooltip>
+
+    <!-- Example 2 } -->
+    <ToggleGroup size="sm" type="single" default-value="light">
+      <ToggleGroupItem value="light">
+        Light
+      </ToggleGroupItem>
+      <ToggleGroupItem value="dark">
+        Dark
+      </ToggleGroupItem>
+      <ToggleGroupItem value="System">
+        System
+      </ToggleGroupItem>
+    </ToggleGroup>
+
+    <!-- Example 3 } -->
+    <Toggle shape="pill">
+      Dark theme
+    </Toggle>
+
+    <!-- Example 4 } -->
+    <Switch label="Dark theme" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ToggleExampleOne.vue b/apps/docs/src/components/examples/ToggleExampleOne.vue
new file mode 100644
index 0000000..33f061c
--- /dev/null
+++ b/apps/docs/src/components/examples/ToggleExampleOne.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Checkbox } from "wedges-vue";
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-6 text-left">
+    <Checkbox label="Required" required />
+
+    <Checkbox
+      description="(optional)"
+      helper-text="Helper text"
+      label="Label"
+      tooltip="Tooltip example"
+    />
+
+    <Checkbox
+      helper-text="Indeterminate"
+      label="Label"
+      tooltip="Tooltip example"
+      checked="indeterminate"
+    />
+
+    <Checkbox default-checked disabled description="Disabled" tooltip="Tooltip example" />
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ToggleGroupExampleOne.vue b/apps/docs/src/components/examples/ToggleGroupExampleOne.vue
new file mode 100644
index 0000000..65f8edf
--- /dev/null
+++ b/apps/docs/src/components/examples/ToggleGroupExampleOne.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from "wedges-vue";
+import { ColumnsHorizontalIcon, GridIcon, GridMasonryIcon, RowsIcon, TableColumnsIcon, TableRowsIcon } from "@iconicicons/vue3";
+</script>
+
+<template>
+  <div class="mx-auto flex max-w-fit flex-col items-center gap-6">
+    <ToggleGroup type="single" default-value="days">
+      <ToggleGroupItem value="days">
+        Days
+      </ToggleGroupItem>
+      <ToggleGroupItem value="months">
+        Months
+      </ToggleGroupItem>
+      <ToggleGroupItem value="years">
+        Years
+      </ToggleGroupItem>
+    </ToggleGroup>
+
+    <ToggleGroup type="single" size="sm" default-value="grid">
+      <ToggleGroupItem value="grid">
+        <template #before>
+          <GridIcon />
+        </template>
+        Grid
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="column">
+        <template #before>
+          <ColumnsHorizontalIcon />
+        </template>
+        Column
+      </ToggleGroupItem>
+
+      <ToggleGroupItem value="row">
+        <template #before>
+          <RowsIcon />
+        </template>
+        Row
+      </ToggleGroupItem>
+    </ToggleGroup>
+
+    <div class="flex items-center gap-6">
+      <ToggleGroup orientation="vertical" size="md" default-value="grid" type="single">
+        <ToggleGroupItem value="grid">
+          <template #before>
+            <GridIcon />
+          </template>
+
+          <ToggleGroupItem value="masonry">
+            <template #before>
+              <GridMasonryIcon />
+            </template>
+          </ToggleGroupItem>
+
+          <ToggleGroupItem value="column">
+            <template #before>
+              <TableColumnsIcon />
+            </template>
+          </ToggleGroupItem>
+          <ToggleGroupItem value="row">
+            <template #before>
+              <TableRowsIcon />
+            </template>
+          </ToggleGroupItem>
+        </togglegroupitem>
+      </ToggleGroup>
+
+      <ToggleGroup orientation="vertical" size="sm" default-value="grid" type="single">
+        <ToggleGroupItem value="grid">
+          <template #before>
+            <GridIcon />
+          </template>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="masonry">
+          <template #before>
+            <GridMasonryIcon />
+          </template>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="column">
+          <template #before>
+            <TableColumnsIcon />
+          </template>
+        </ToggleGroupItem>
+        <ToggleGroupItem value="row">
+          <template #before>
+            <TableRowsIcon />
+          </template>
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ToggleGroupExampleTwo.vue b/apps/docs/src/components/examples/ToggleGroupExampleTwo.vue
new file mode 100644
index 0000000..3689ace
--- /dev/null
+++ b/apps/docs/src/components/examples/ToggleGroupExampleTwo.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { AvatarGroup, Checkbox, CheckboxRoot } from "wedges-vue";
+
+const items = [
+  {
+    initials: "W",
+  },
+  {
+    initials: "D",
+  },
+  {
+    initials: "G",
+  },
+];
+</script>
+
+<template>
+  <div class="m-auto flex w-fit flex-col gap-6 text-left">
+    <CheckboxRoot
+      as-child
+      class="flex w-80 cursor-pointer items-center justify-between rounded-lg border border-surface-100 px-4 py-3 shadow-wg-xs outline-2 -outline-offset-1 outline-primary wg-bg-white dark:wg-bg-neutral-900 [&:has([data-state=checked])]:outline"
+    >
+      <label>
+        <Checkbox />
+
+        <div class="flex grow items-center justify-between text-sm">
+          <span class="select-none">Share to 3 users</span>
+
+          <AvatarGroup
+            :items
+            size="xs"
+          />
+        </div>
+      </label>
+    </CheckboxRoot>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/ToggleGroupPreview.vue b/apps/docs/src/components/examples/ToggleGroupPreview.vue
new file mode 100644
index 0000000..b99f9d0
--- /dev/null
+++ b/apps/docs/src/components/examples/ToggleGroupPreview.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { GridIcon, GridMasonryIcon, TableColumnsIcon, TableRowsIcon } from "@iconicicons/vue3";
+import { ToggleGroup, ToggleGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <ToggleGroup orientation="horizontal" default-value="grid" type="single">
+    <ToggleGroupItem value="grid">
+      <GridIcon />
+    </ToggleGroupItem>
+
+    <ToggleGroupItem value="masonry">
+      <GridMasonryIcon />
+    </ToggleGroupItem>
+
+    <ToggleGroupItem value="table-columns">
+      <TableColumnsIcon />
+    </ToggleGroupItem>
+
+    <ToggleGroupItem value="rows">
+      <TableRowsIcon />
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>
diff --git a/apps/docs/src/components/examples/TogglePreview.vue b/apps/docs/src/components/examples/TogglePreview.vue
new file mode 100644
index 0000000..adf0189
--- /dev/null
+++ b/apps/docs/src/components/examples/TogglePreview.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { Toggle } from "wedges-vue";
+import { CropIcon } from "@iconicicons/vue3";
+</script>
+
+<template>
+  <Toggle><CropIcon /></Toggle>
+</template>
diff --git a/apps/docs/src/components/examples/TooltipExampleOne.vue b/apps/docs/src/components/examples/TooltipExampleOne.vue
new file mode 100644
index 0000000..7d30e38
--- /dev/null
+++ b/apps/docs/src/components/examples/TooltipExampleOne.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Tooltip } from "wedges-vue";
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-6 mx-auto">
+    <div class="flex items-center gap-4">
+      <Tooltip content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element." />
+
+      <Tooltip
+        color="secondary"
+        content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element."
+      />
+
+      <Tooltip
+        color="soft"
+        content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element."
+        :arrow="false"
+        :side-offset="10"
+      />
+    </div>
+
+    <div class="flex items-center gap-4">
+      <Tooltip
+        content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element. It typically contains brief, helpful text or instructions relevant to the trigger's context."
+        size="md"
+      />
+
+      <Tooltip
+        color="secondary"
+        content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element. It typically contains brief, helpful text or instructions relevant to the trigger's context."
+        size="md"
+      />
+
+      <Tooltip
+        color="soft"
+        content="A tooltip is a compact, informational box that becomes visible upon hovering the trigger element. It typically contains brief, helpful text or instructions relevant to the trigger's context."
+        :arrow="false"
+        :side-offset="10"
+        size="md"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/docs/src/components/examples/TooltipPreview.vue b/apps/docs/src/components/examples/TooltipPreview.vue
new file mode 100644
index 0000000..77e3b42
--- /dev/null
+++ b/apps/docs/src/components/examples/TooltipPreview.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Tooltip } from "wedges-vue";
+</script>
+
+<template>
+  <Tooltip
+    animation
+    content="A tooltip is a small box that appears when hovering over a UI element, providing additional information."
+    :delay-duration="0"
+  />
+</template>
diff --git a/apps/docs/src/content/docs/about.md b/apps/docs/src/content/docs/about.md
new file mode 100644
index 0000000..e5ed68c
--- /dev/null
+++ b/apps/docs/src/content/docs/about.md
@@ -0,0 +1,18 @@
+---
+title: About
+description: Powered by amazing open source projects.
+---
+
+## About
+
+[wedges-vue](https://github.com/raymondmuller/wedges-vue) is a Vue port of [Wedges](https://www.lemonsqueezy.com/wedges).
+
+## Credits
+
+- [wedges](https://www.lemonsqueezy.com/wedges) - A professionally designed design system by LemonSqueezy
+- [shadcn](https://twitter.com/shadcn) - The brilliant mind behind the designs, methodology, and implementation of the original [shadcn/ui](https://ui.shadcn.com).
+- [Radix Vue](https://radix-vue.com) - The headless components that power this project.
+- [Radix UI](https://radix-ui.com) - The headless components and examples that the original [shadcn/ui](https://ui.shadcn.com) was built on.
+
+## License
+Wedges is licensed under the MIT License.
diff --git a/apps/docs/src/content/docs/components/alert.md b/apps/docs/src/content/docs/components/alert.md
new file mode 100644
index 0000000..76f79d0
--- /dev/null
+++ b/apps/docs/src/content/docs/components/alert.md
@@ -0,0 +1,58 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+---
+
+<ComponentPreview name="AlertPreview"  />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Alert, AlertDescription, AlertTitle } from "wedges-vue";
+</script>
+
+<template>
+  <Alert>
+    <AlertTitle>Heads up!</AlertTitle>
+    <AlertDescription>
+      You can add components to your app using the cli.
+    </AlertDescription>
+  </Alert>
+</template>
+```
+## API Reference
+### Props
+<!-- @include: ../../meta/Alert.md -->
+
+### Slots
+<SlotsTable :data="[
+  {
+    'name': 'default',
+    'description': 'Is the alert closable? If true, a close button will be displayed and when clicked on it will hide the alert element.',
+  },
+  {
+    'name': 'before',
+    'description': 'Render something before the alert description.',
+  },
+  {
+    'name': 'after',
+    'description': 'Render something after the alert description.',
+  },
+]" />
+
+### Emits
+<EmitsTable :data="[
+  {
+    'name': 'close',
+    'description': 'If the alert is closable, you can use this to trigger a function when the alert gets closed.'
+  }
+]" />
+
+## Examples
+
+### Default
+<ComponentPreview name="AlertExampleOne"  />
+### Destructive
+
+<ComponentPreview name="AlertExampleTwo"  />
diff --git a/apps/docs/src/content/docs/components/avatar-group.md b/apps/docs/src/content/docs/components/avatar-group.md
new file mode 100644
index 0000000..16b3e3f
--- /dev/null
+++ b/apps/docs/src/content/docs/components/avatar-group.md
@@ -0,0 +1,82 @@
+---
+title: Avatar Group
+description: A collection of Avatar elements.
+source: packages/wedges-vue/src/components/avatar
+primitive: https://www.radix-vue.com/components/avatar.html
+---
+
+<ComponentPreview name="AvatarGroupPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { AvatarGroup } from "wedges-vue";
+
+const items = [
+  {
+    src: "https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 1",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1579613832107-64359da23b0c?q=80&w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 2",
+  },
+  {
+    src: "https://images.unsplash.com/photo-1488161628813-04466f872be2?q=80&w=250&h=250&auto=format&fit=crop",
+    alt: "Avatar 2",
+  },
+];
+</script>
+
+<template>
+  <AvatarGroup
+    :items
+  />
+</template>
+```
+
+For more advanced usage, `AvatarGroupRoot` component can be used to compose your own group of `AvatarGroupItem`.
+
+```vue
+<script setup lang="ts">
+import { AvatarGroupItem, AvatarGroupLabel, AvatarGroupRoot } from "wedges-vue";
+</script>
+
+<template>
+  <AvatarGroupRoot>
+    <AvatarGroupItem
+      alt="Avatar 1"
+      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
+    />
+    <AvatarGroupItem
+      alt="Avatar 2"
+      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
+    />
+    <AvatarGroupItem
+      alt="Avatar 3"
+      src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
+    />
+    <AvatarGroupLabel>3,000 followers</AvatarGroupLabel>
+  </AvatarGroupRoot>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/AvatarGroup.md -->
+
+## Examples
+
+The following example shows an Avatar component with an image, size set to lg, using initials 'MQ" as a fallback, and status and notification set to different colors.
+
+<ComponentPreview name="AvatarGroupExampleOne" />
+
+The following example shows more advanced usage of the `AvatarGroup` component and how you can customize it with Tailwind CSS classes.
+
+<ComponentPreview name="AvatarGroupExampleTwo" />
+
+For automatic inheritance of background color for borders in `AvatarGroup`, use the `wg-bg-{color}` utility class on parent element instead of `bg-{color}`. For example:
+
+<ComponentPreview name="AvatarGroupExampleThree" />
diff --git a/apps/docs/src/content/docs/components/avatar.md b/apps/docs/src/content/docs/components/avatar.md
new file mode 100644
index 0000000..d0bd74a
--- /dev/null
+++ b/apps/docs/src/content/docs/components/avatar.md
@@ -0,0 +1,46 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+source: packages/wedges-vue/src/components/avatar
+primitive: https://www.radix-vue.com/components/avatar.html
+---
+
+<ComponentPreview name="AvatarPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Avatar } from "wedges-vue";
+</script>
+
+<template>
+  <Avatar
+    alt="Image alt text"
+    src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
+  />
+</template>
+```
+
+## API Reference
+
+#### Avatar
+
+Represents an avatar image. Extends the <a href="https://www.radix-vue.com/components/avatar#image" rel="nofollow noreferrer" target="_blank">Radix Avatar Image</a> primitive and includes all of its props.
+
+### Props
+<!-- @include: ../../meta/Avatar.md -->
+
+## Examples
+
+The following example shows an Avatar component with an image, size set to lg, using initials "MQ" as a fallback, and status and notification set to different colors.
+
+<ComponentPreview name="AvatarExampleOne" />
+
+The following examples show different variants of the Avatar component.
+
+<ComponentPreview name="AvatarExampleTwo" />
+
+The following example shows more advanced usage of the Avatar component and how you can customize it with Tailwind CSS classes.
+
+<ComponentPreview name="AvatarExampleThree" />
diff --git a/apps/docs/src/content/docs/components/badge.md b/apps/docs/src/content/docs/components/badge.md
new file mode 100644
index 0000000..070898b
--- /dev/null
+++ b/apps/docs/src/content/docs/components/badge.md
@@ -0,0 +1,31 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+---
+
+<ComponentPreview name="BadgePreview"  />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Badge } from "wedges-vue";
+</script>
+
+<template>
+  <Badge>Badge</Badge>
+</template>
+```
+
+## API Reference
+
+The `Badge` component also includes the following props:
+
+### Props
+<!-- @include: ../../meta/Badge.md -->
+
+## Examples
+
+### Default
+
+<ComponentPreview name="BagdeExampleOne"  />
diff --git a/apps/docs/src/content/docs/components/button-group.md b/apps/docs/src/content/docs/components/button-group.md
new file mode 100644
index 0000000..ef5640a
--- /dev/null
+++ b/apps/docs/src/content/docs/components/button-group.md
@@ -0,0 +1,48 @@
+---
+title: Button Group
+description: A collection of Button elements.
+source: packages/wedges-vue/src/components/avatar
+primitive: https://www.radix-vue.com/components/avatar.html
+---
+
+<ComponentPreview name="ButtonGroupPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ButtonGroup, ButtonGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <ButtonGroup>
+    <ButtonGroupItem>Button</ButtonGroupItem>
+    <ButtonGroupItem>Button</ButtonGroupItem>
+  </ButtonGroup>
+</template>
+```
+
+### API Reference
+
+### ButtonGroup
+Alternatively, `ButtonGroupRoot` can be used in place of this component.  `ButtonGroup` includes these props:
+<!-- @include: ../../meta/ButtonGroup.md -->
+
+### ButtonGroupItem
+Includes all props from the Button component, with the exception of variant, shape, and size props.
+
+Includes all props from the `Button` component, with the exception of `variant`, `shape`, and `size` props.
+
+The type `ButtonGroupItemProps` is defined as follows:
+
+<!-- @include: ../../meta/ButtonGroupItem.md -->
+
+## Examples
+
+The following examples shows different variants of the `ButtonGroup` component.
+
+<ComponentPreview name="ButtonGroupExampleOne" />
+
+The following examples shows a combination of the `ButtonGroup` and `Tooltip` components.
+
+<ComponentPreview name="ButtonGroupExampleTwo" />
diff --git a/apps/docs/src/content/docs/components/button.md b/apps/docs/src/content/docs/components/button.md
new file mode 100644
index 0000000..b64625a
--- /dev/null
+++ b/apps/docs/src/content/docs/components/button.md
@@ -0,0 +1,27 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+---
+
+<ComponentPreview name="ButtonPreview"  />
+
+## API Reference
+
+The Button component includes the following props:
+
+### Props
+<!-- @include: ../../meta/Badge.md -->
+
+## Examples
+
+The following example shows different variants of the `Button` component.
+
+<ComponentPreview name="ButtonExampleOne"  />
+
+The following example shows various Button components with "sm" size prop.
+
+<ComponentPreview name="ButtonExampleTwo"  />
+
+Next example shows different destructive Button components.
+
+<ComponentPreview name="ButtonExampleThree"  />
diff --git a/apps/docs/src/content/docs/components/checkbox-group.md b/apps/docs/src/content/docs/components/checkbox-group.md
new file mode 100644
index 0000000..03713a1
--- /dev/null
+++ b/apps/docs/src/content/docs/components/checkbox-group.md
@@ -0,0 +1,36 @@
+---
+title: Checkbox Group
+description: A visual group of Checkbox controls, allowing for the selection of multiple options within a set.
+source: packages/wedges-vue/src/components/checkbox-group
+primitive: https://www.radix-vue.com/components/checkbox.html
+---
+
+<ComponentPreview name="CheckboxGroupPreview"  />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { CheckboxGroup } from "wedges-vue";
+</script>
+
+<template>
+  <CheckboxGroup id="terms" />
+</template>
+```
+
+### API Reference
+
+#### CheckboxGroup
+
+Alternatively, `CheckboxGroupRoot` can be used in place of this component.`CheckboxGroup` includes these props:
+
+<!-- @include: ../../meta/CheckboxGroup.md -->
+
+#### CheckboxGroupItem
+
+Shares all the properties of the `Checkbox` component. Details can be found <a href="/docs/components/checkbox#api-reference">here</a>.
+
+## Examples
+
+<ComponentPreview name="CheckboxGroupExampleOne" />
diff --git a/apps/docs/src/content/docs/components/checkbox.md b/apps/docs/src/content/docs/components/checkbox.md
new file mode 100644
index 0000000..67290b0
--- /dev/null
+++ b/apps/docs/src/content/docs/components/checkbox.md
@@ -0,0 +1,40 @@
+---
+title: Checkbox
+description: A user interface control enabling toggling between checked and unchecked states.
+source: packages/wedges-vue/src/components/checkbox
+primitive: https://www.radix-vue.com/components/checkbox.html
+---
+
+<ComponentPreview name="CheckboxPreview"  />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Checkbox } from "wedges-vue";
+</script>
+
+<template>
+  <Checkbox id="terms" />
+</template>
+```
+
+For more advanced usage you can use Checkbox.Root component to customize the appearance of the checkbox.
+
+## API Reference
+
+`Checkbox` component extends <a href="https://www.radix-vue.com/components/checkbox" target="_blank" rel='nofollow noreferrer'>Radix Checkbox</a> primitive and supports all of its props.
+
+## Props
+<!-- @include: ../../meta/Checkbox.md -->
+
+## Accessibility
+The Checkbox component supports all accessibility features of the Radix Checkbox primitive.
+
+## Examples
+
+<ComponentPreview name="CheckboxExampleOne" />
+
+The following example shows a customized Checkbox component:
+
+<ComponentPreview name="CheckboxExampleTwo"  />
diff --git a/apps/docs/src/content/docs/components/dropdown-menu.md b/apps/docs/src/content/docs/components/dropdown-menu.md
new file mode 100644
index 0000000..8a6fc2f
--- /dev/null
+++ b/apps/docs/src/content/docs/components/dropdown-menu.md
@@ -0,0 +1,103 @@
+---
+title: Dropdown Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+source: packages/wedges-vue/src/components/dropdown-menu
+primitive: https://www.radix-vue.com/components/dropdown-menu.html
+---
+
+<ComponentPreview name="DropdownMenuPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "wedges-vue";
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>Profile</DropdownMenuItem>
+      <DropdownMenuItem>Billing</DropdownMenuItem>
+      <DropdownMenuItem>Team</DropdownMenuItem>
+      <DropdownMenuItem>Subscription</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+```
+
+### API Reference
+
+<br/>
+
+#### DropdownMenu
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#root" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Root</a> primitive.
+
+#### DropdownMenuTrigger
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#trigger" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Trigger</a> primitive.
+
+#### DropdownMenuPortal
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#portal" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Portal</a> primitive.
+
+#### DropdownMenuContent
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#content" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Content</a> primitive with custom configuration.
+
+#### DropdownMenuItem
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#item" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Item</a> primitive with custom configuration.
+
+#### DropdownMenuGroup
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#group" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Group</a> primitive.
+
+#### DropdownMenuLabel
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#label" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Label</a> primitive with custom styling.
+
+#### DropdownMenuCheckboxItem
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#checkboxitem" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Checkbox Item</a> primitive with custom configuration.
+
+#### DropdownMenuRadioGroup
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#radiogroup" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Radio Group</a> primitive.
+
+#### DropdownMenuRadioItem
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#radioitem" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Radio Item</a> primitive with custom configuration.
+
+#### DropdownMenuSeparator
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#separator" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Radio Separator</a> primitive with custom styling.
+
+#### DropdownMenuSub
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#sub" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu Sub</a> primitive with custom configuration.
+
+#### DropdownMenuSubTrigger
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#subtrigger" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu SubTrigger</a> primitive with custom configuration.
+
+#### DropdownMenuSubContent
+
+Extends the <a href="https://www.radix-vue.com/components/dropdown-menu#subcontent" target="_blank" rel='nofollow noreferrer'>Radix Dropdown Menu SubContent</a> primitive with custom configuration.
+
+## Examples
+
+<ComponentPreview name="DropdownMenuExampleOne" />
+
+<ComponentPreview name="DropdownMenuExampleTwo" />
diff --git a/apps/docs/src/content/docs/components/input.md b/apps/docs/src/content/docs/components/input.md
new file mode 100644
index 0000000..cdfe911
--- /dev/null
+++ b/apps/docs/src/content/docs/components/input.md
@@ -0,0 +1,23 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+---
+
+<ComponentPreview name="InputPreview" class="max-w-xs" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Input } from "wedges-vue";
+</script>
+
+<template>
+  <Input />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Input.md -->
diff --git a/apps/docs/src/content/docs/components/kbd.md b/apps/docs/src/content/docs/components/kbd.md
new file mode 100644
index 0000000..649d430
--- /dev/null
+++ b/apps/docs/src/content/docs/components/kbd.md
@@ -0,0 +1,27 @@
+---
+title: Kbd
+description: Displays a form input field or a component that looks like an input field.
+---
+
+<ComponentPreview name="KbdPreview" class="max-w-xs" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Kbd } from "wedges-vue";
+</script>
+
+<template>
+  <Kbd keys="['option', 'command']">K</Kbd>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Kbd.md -->
+
+## Examples
+
+<ComponentPreview name="KbdExampleOne" />
diff --git a/apps/docs/src/content/docs/components/label.md b/apps/docs/src/content/docs/components/label.md
new file mode 100644
index 0000000..8a1beef
--- /dev/null
+++ b/apps/docs/src/content/docs/components/label.md
@@ -0,0 +1,31 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+source: packages/wedges-vue/src/components/label
+primitive: https://www.radix-vue.com/components/label.html
+---
+
+<ComponentPreview name="LabelPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Label } from "wedges-vue";
+</script>
+
+<template>
+  <Label for="email">Your email address</Label>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Label.md -->
+
+## Examples
+
+The following example demonstrates using the `Label` component alongside a `Label.Helper` component with the `error` prop.
+
+<ComponentPreview name="LabelExampleOne" />
diff --git a/apps/docs/src/content/docs/components/loading.md b/apps/docs/src/content/docs/components/loading.md
new file mode 100644
index 0000000..961966e
--- /dev/null
+++ b/apps/docs/src/content/docs/components/loading.md
@@ -0,0 +1,35 @@
+---
+title: Loading
+description: Renders an accessible label associated with controls.
+source: packages/wedges-vue/src/components/label
+primitive: https://www.radix-vue.com/components/label.html
+---
+
+<ComponentPreview name="LoadingPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Loading } from "wedges-vue";
+</script>
+
+<template>
+  <Loading />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Loading.md -->
+
+## Examples
+
+The following example demonstrates using the `Label` component alongside a `Label.Helper` component with the `error` prop.
+
+<ComponentPreview name="LoadingExampleOne" />
+
+Change the color using the `color` prop, or set a custom text color with a `class`.
+
+<ComponentPreview name="LoadingExampleTwo" />
diff --git a/apps/docs/src/content/docs/components/popover.md b/apps/docs/src/content/docs/components/popover.md
new file mode 100644
index 0000000..776c73e
--- /dev/null
+++ b/apps/docs/src/content/docs/components/popover.md
@@ -0,0 +1,37 @@
+---
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+source: packages/wedges-vue/src/components/popover
+primitive: https://www.radix-vue.com/components/popover.html
+---
+
+<ComponentPreview name="PopoverPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "wedges-vue";
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger>
+      Open popover
+    </PopoverTrigger>
+    <PopoverContent />
+  </Popover>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Popover.md -->
+
+## Examples
+<ComponentPreview name="PopoverExampleOne" />
diff --git a/apps/docs/src/content/docs/components/progress-bar.md b/apps/docs/src/content/docs/components/progress-bar.md
new file mode 100644
index 0000000..3d8698f
--- /dev/null
+++ b/apps/docs/src/content/docs/components/progress-bar.md
@@ -0,0 +1,35 @@
+---
+title: Progress Bar
+description: A progress bar visually showing the percentage of a task completed.
+source: packages/wedges-vue/src/components/progress
+primitive: https://www.radix-vue.com/components/progress.html
+---
+
+<ComponentPreview name="ProgressBarPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Progress } from "wedges-vue";
+</script>
+
+<template>
+  <Progress :model-value="33" />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/ProgressBar.md -->
+
+## Examples
+
+The following example shows different layout variants.
+
+<ComponentPreview name="ProgressBarExampleOne" />
+
+Next example shows different color and layout combinations.
+
+<ComponentPreview name="ProgressBarExampleTwo" />
diff --git a/apps/docs/src/content/docs/components/progress-circle.md b/apps/docs/src/content/docs/components/progress-circle.md
new file mode 100644
index 0000000..65f2a2f
--- /dev/null
+++ b/apps/docs/src/content/docs/components/progress-circle.md
@@ -0,0 +1,28 @@
+---
+title: Progress Circle
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+source: packages/wedges-vue/src/components/progress
+primitive: https://www.radix-vue.com/components/progress.html
+---
+
+<ComponentPreview name="ProgressCirclePreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Progress } from "wedges-vue";
+</script>
+
+<template>
+  <Progress :model-value="33" />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/ProgressCircle.md -->
+
+## Examples
+<ComponentPreview name="ProgressCircleExampleOne" />
diff --git a/apps/docs/src/content/docs/components/radio-group.md b/apps/docs/src/content/docs/components/radio-group.md
new file mode 100644
index 0000000..09a1fe0
--- /dev/null
+++ b/apps/docs/src/content/docs/components/radio-group.md
@@ -0,0 +1,54 @@
+---
+title: Radio Group
+description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+source: packages/wedges-vue/src/components/radio-group
+primitive: https://www.radix-vue.com/components/radio-group.html
+---
+
+<ComponentPreview name="RadioGroupPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Label } from "wedges-vue";
+import { RadioGroup, RadioGroupItem } from "wedges-group";
+</script>
+
+<template>
+  <RadioGroup default-value="option-one">
+    <div class="flex items-center space-x-2">
+      <RadioGroupItem id="option-one" value="option-one" />
+      <Label for="option-one">Option One</Label>
+    </div>
+    <div class="flex items-center space-x-2">
+      <RadioGroupItem id="option-two" value="option-two" />
+      <Label for="option-two">Option Two</Label>
+    </div>
+  </RadioGroup>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/RadioGroup.md -->
+
+<DataAttributesTable
+  :data="[
+      {
+        attribute: '[data-disabled]',
+       values: 'Present when disabled'
+       },
+        ]"
+/>
+
+#### RadioGroupItem
+
+An item in the group that can be checked. An `input` element will also be rendered when used within a form to ensure events propagate correctly.
+
+<!-- @include: ../../meta/RadioGroupItem.md -->
+
+## Examples
+
+<ComponentPreview name="RadioGroupExampleOne" />
diff --git a/apps/docs/src/content/docs/components/slider.md b/apps/docs/src/content/docs/components/slider.md
new file mode 100644
index 0000000..deceba8
--- /dev/null
+++ b/apps/docs/src/content/docs/components/slider.md
@@ -0,0 +1,49 @@
+---
+title: Slider
+description: An input where the user selects a value from within a given range.
+source: packages/wedges-vue/src/components/slider
+primitive: https://www.radix-vue.com/components/slider.html
+---
+
+<ComponentPreview name="SliderPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Slider } from "wedges-vue";
+</script>
+
+<template>
+  <Slider
+    :default-value="[33]" :max="100" :step="1"
+  />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Slider.md -->
+
+## Examples
+
+Use `orientation` prop to create vertical sliders.
+
+<ComponentPreview name="SliderExampleOne" />
+
+You can disable the slider by using the `disabled` prop.
+
+<ComponentPreview name="SliderExampleTwo" />
+
+Use range values:
+
+<ComponentPreview name="SliderExampleThree" />
+
+Controlled component:
+
+<ComponentPreview name="SliderExampleFour" />
+
+Playground:
+
+<ComponentPreview name="SliderExampleFive" />
diff --git a/apps/docs/src/content/docs/components/switch-group.md b/apps/docs/src/content/docs/components/switch-group.md
new file mode 100644
index 0000000..e3f6c35
--- /dev/null
+++ b/apps/docs/src/content/docs/components/switch-group.md
@@ -0,0 +1,29 @@
+---
+title: Switch Group
+description: A control that allows the user to toggle between checked and not checked.
+source: packages/wedges-vue/src/components/switch
+primitive: https://www.radix-vue.com/components/switch.html
+---
+
+<ComponentPreview name="SwitchGroupPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Switch } from "wedges-vue";
+</script>
+
+<template>
+  <Switch />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/SwitchGroup.md -->
+
+## Examples
+
+<ComponentPreview name="SwitchGroupExampleOne" />
diff --git a/apps/docs/src/content/docs/components/switch.md b/apps/docs/src/content/docs/components/switch.md
new file mode 100644
index 0000000..1a4f42d
--- /dev/null
+++ b/apps/docs/src/content/docs/components/switch.md
@@ -0,0 +1,29 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+source: packages/wedges-vue/src/components/switch
+primitive: https://www.radix-vue.com/components/switch.html
+---
+
+<ComponentPreview name="SwitchPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Switch } from "wedges-vue";
+</script>
+
+<template>
+  <Switch />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Switch.md -->
+
+## Examples
+
+<ComponentPreview name="SwitchExampleOne" />
diff --git a/apps/docs/src/content/docs/components/tabs.md b/apps/docs/src/content/docs/components/tabs.md
new file mode 100644
index 0000000..8935530
--- /dev/null
+++ b/apps/docs/src/content/docs/components/tabs.md
@@ -0,0 +1,44 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+source: packages/wedges-vue/src/components/tabs
+primitive: https://www.radix-vue.com/components/tabs.html
+---
+
+<ComponentPreview name="TabsPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "wedges-vue";
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]">
+    <TabsList>
+      <TabsTrigger value="account">
+        Account
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      Make changes to your account here.
+    </TabsContent>
+    <TabsContent value="password">
+      Change your password here.
+    </TabsContent>
+  </Tabs>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Tabs.md -->
+
+## Examples
+
+<ComponentPreview name="TabsExampleOne" />
diff --git a/apps/docs/src/content/docs/components/tag.md b/apps/docs/src/content/docs/components/tag.md
new file mode 100644
index 0000000..629c04e
--- /dev/null
+++ b/apps/docs/src/content/docs/components/tag.md
@@ -0,0 +1,20 @@
+---
+title: Tag
+description: Tag inputs render tags inside an input, followed by an actual text input.
+source: packages/wedges-vue/src/components/tags-input
+primitive: https://www.radix-vue.com/components/tags-input.html
+---
+
+<ComponentPreview name="TagPreview" />
+
+## Usage
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Tag.md -->
+
+## Examples
+### Tags with Combobox
+
+<ComponentPreview name="TagExampleOne" />
diff --git a/apps/docs/src/content/docs/components/textarea.md b/apps/docs/src/content/docs/components/textarea.md
new file mode 100644
index 0000000..2bbb318
--- /dev/null
+++ b/apps/docs/src/content/docs/components/textarea.md
@@ -0,0 +1,30 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+---
+
+<ComponentPreview name="TextareaPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Textarea } from "wedges-vue";
+</script>
+
+<template>
+  <Textarea />
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Textarea.md -->
+
+## Examples
+
+### Default
+
+<ComponentPreview name="TextareaExampleOne" />
+<ComponentPreview name="TextareaExampleTwo" />
diff --git a/apps/docs/src/content/docs/components/toggle-group.md b/apps/docs/src/content/docs/components/toggle-group.md
new file mode 100644
index 0000000..9607e29
--- /dev/null
+++ b/apps/docs/src/content/docs/components/toggle-group.md
@@ -0,0 +1,41 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+source: packages/wedges-vue/src/components/toggle-group
+primitive: https://www.radix-vue.com/components/toggle-group.html
+---
+
+<ComponentPreview name="ToggleGroupPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from "wedges-vue";
+</script>
+
+<template>
+  <ToggleGroup type="single">
+    <ToggleGroupItem value="a">
+      A
+    </ToggleGroupItem>
+    <ToggleGroupItem value="b">
+      B
+    </ToggleGroupItem>
+    <ToggleGroupItem value="c">
+      C
+    </ToggleGroupItem>
+  </ToggleGroup>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/ToggleGroup.md -->
+
+## Examples
+
+### Default
+
+<ComponentPreview name="ToggleGroupExampleOne" />
diff --git a/apps/docs/src/content/docs/components/toggle.md b/apps/docs/src/content/docs/components/toggle.md
new file mode 100644
index 0000000..71a5d68
--- /dev/null
+++ b/apps/docs/src/content/docs/components/toggle.md
@@ -0,0 +1,25 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+source: packages/wedges-vue/src/components/toggle
+primitive: https://www.radix-vue.com/components/toggle.html
+---
+
+<ComponentPreview name="TogglePreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Toggle } from "wedges-vue";
+</script>
+
+<template>
+  <Toggle>Toggle</Toggle>
+</template>
+```
+
+## API Reference
+
+### Props
+<!-- @include: ../../meta/Toggle.md -->
diff --git a/apps/docs/src/content/docs/components/tooltip.md b/apps/docs/src/content/docs/components/tooltip.md
new file mode 100644
index 0000000..bee282e
--- /dev/null
+++ b/apps/docs/src/content/docs/components/tooltip.md
@@ -0,0 +1,70 @@
+---
+title: Tooltip
+description: A small box that appears when hovering over a UI element, providing additional information.
+source: wedges
+primitive: https://www.radix-vue.com/components/tooltip.html
+---
+
+<ComponentPreview name="TooltipPreview" />
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "wedges-vue";
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger>Hover</TooltipTrigger>
+      <TooltipContent>
+        <p>Add to library</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>
+```
+
+## API Reference
+
+### Tooltip
+
+Use this component for a quick usage
+
+<!-- @include: ../../meta/Tooltip.md -->
+
+#### TooltipProvider
+
+Extends the <a href="https://www.radix-vue.com/components/tooltip#provider" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Provider</a> primitive with custom configuration.
+
+#### TooltipRoot
+
+Extends the <a href="https://www.radix-vue.com/components/tooltip#root" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Root</a> primitive with custom configuration.
+
+#### TooltipTrigger
+
+Extends the <a href="https://www.radix-vue.com/components/tooltip#trigger" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Trigger</a> primitive with custom styling.
+
+#### TooltipArrow
+
+Extends the <a href="https://www.radix-vue.com/components/tooltip#arrow" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Arrow</a> primitive with custom styling.
+
+#### TooltipContent
+
+Extends the <a href="https://www.radix-vue.com/components/tooltip#content" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Content</a> primitive with custom styling.
+
+#### TooltipPortal
+
+Exports the <a href="https://www.radix-vue.com/components/tooltip#portal" target="_blank" rel='nofollow noreferrer'>Radix Tooltip Portal</a> primitive.
+
+## Examples
+
+The example below demonstrates different color and size variations of the Tooltip component.
+
+<ComponentPreview name="TooltipExampleOne" />
diff --git a/apps/docs/src/content/docs/installation.md b/apps/docs/src/content/docs/installation.md
new file mode 100644
index 0000000..8adf2e5
--- /dev/null
+++ b/apps/docs/src/content/docs/installation.md
@@ -0,0 +1,27 @@
+---
+title: Installation
+description: How to install dependencies and structure your app.
+---
+
+Straightforward setup guides are available for popular frameworks, as well as a manual installation guide suitable for any framework that supports Vue and Tailwind CSS.
+
+<script setup>
+  import { Tooltip } from "wedges-vue"
+ </script>
+
+<div class='grid grid-cols-2 md:grid-cols-3 mt-[3em] gap-4'>
+
+<LinkCard href="/docs/installation/default">
+    <Logomark class='-mx-2 size-10' aria-label="Manual"/>
+    <p class='font-medium flex items-center gap-1 text-sm'>
+        <span>Default</span>
+        <Tooltip content="For any setup with Vue + Tailwind CSS."/>
+    </p>
+</LinkCard>
+
+<LinkCard href="/docs/installation/laravel">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Laravel.svg/1200px-Laravel.svg.png" alt="Laravel Logo" class="h-10">
+  <p class='font-medium text-sm'>Laravel</p>
+</LinkCard>
+
+</div>
diff --git a/apps/docs/src/content/docs/installation/default.md b/apps/docs/src/content/docs/installation/default.md
new file mode 100644
index 0000000..6f067ed
--- /dev/null
+++ b/apps/docs/src/content/docs/installation/default.md
@@ -0,0 +1,92 @@
+---
+title: Manual
+description: How to install and get started with Wedges.
+breadcrumbs:
+  - Installation
+---
+
+<Steps>
+
+### Install Wedges
+
+<Tabs variant='underlined' defaultValue='pnpm'>
+  <TabsList>
+      <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+      <TabsTrigger value="npm">npm</TabsTrigger>
+      <TabsTrigger value="yarn">yarn</TabsTrigger>
+  </TabsList>
+
+  <TabsContent value="pnpm">
+
+```bash
+  pnpm i wedges-vue
+```
+  </TabsContent>
+
+  <TabsContent value="npm">
+
+```bash
+  npm i wedges-vue
+```
+
+  </TabsContent>
+
+  <TabsContent value="yarn">
+
+```bash
+  yarn add wedges-vue
+```
+
+  </TabsContent>
+</Tabs>
+
+### Configure Tailwind CSS
+
+Wedges requires Tailwind CSS to be installed prior to use. If you haven't installed it already, follow the instructions in the <a href="https://tailwindcss.com/docs/installation/" target="_blank" rel='nofollow noreferrer'>official Tailwind CSS installation guide</a>.
+
+Once Tailwind CSS is installed, update your `tailwind.config` file to add the necessary configuration for Wedges:
+
+```ts
+import type { Config } from "tailwindcss";
+import { wedgesTW } from "wedges-vue";
+
+const config: Config = {
+  content: [
+    // ...
+    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
+  ],
+  theme: {},
+  darkMode: "class",
+  plugins: [wedgesTW()],
+};
+
+export default config;
+```
+
+### Setup pnpm (optional)
+
+If you're using pnpm, add the following line to your `.npmrc` file:
+
+```bash
+public-hoist-pattern[]=*@lmsqueezy/*
+```
+
+This ensures that pnpm correctly handles dependencies for Wedges, allowing necessary packages to be accessible at the top level of your node_modules.
+
+After updating, run `pnpm install` again to reconfigure your dependencies correctly.
+
+### Using the components
+
+That's all. You can now start using the components in your application.
+
+```vue
+<script setup lang="ts">
+import { Alert } from "wedges-vue";
+</script>
+
+<template>
+  <Alert>You're awesome!</Alert>
+</template>
+```
+
+</Steps>
diff --git a/apps/docs/src/content/docs/installation/laravel.md b/apps/docs/src/content/docs/installation/laravel.md
new file mode 100644
index 0000000..f7cda97
--- /dev/null
+++ b/apps/docs/src/content/docs/installation/laravel.md
@@ -0,0 +1,107 @@
+---
+title: Laravel
+description: Start using Wedges with Laravel + Inertia.
+breadcrumbs:
+  - Installation
+---
+
+<Steps>
+
+### Create Laravel project
+
+To set up a new Laravel project with Inertia and Vue, run the following command in your terminal:
+
+```bash
+laravel new my-laravel-app --typescript --breeze --stack=vue --git --no-interaction
+```
+
+<Alert variant="expanded" className="not-prose">
+This command requires the Laravel Installer version 5.2.0 or higher. Ensure you have this version installed to utilize the features and options specified in the command.
+</Alert>
+
+### Install Wedges
+
+<Tabs variant='underlined' defaultValue='pnpm'>
+  <TabsList>
+    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
+    <TabsTrigger value="npm">npm</TabsTrigger>
+    <TabsTrigger value="yarn">yarn</TabsTrigger>
+  </TabsList>
+
+  <TabsContent value="pnpm">
+
+```bash
+pnpm add wedges-vue
+```
+
+  </TabsContent>
+
+  <TabsContent value="npm">
+
+```bash
+npm i wedges-vue
+```
+
+  </TabsContent>
+
+  <TabsContent value="yarn">
+
+```bash
+yarn add wedges-vue
+```
+
+  </TabsContent>
+
+</Tabs>
+
+### Configure Tailwind CSS
+
+Wedges requires Tailwind CSS to be installed prior to use. If you haven't installed it already, follow the instructions in the <a href="https://tailwindcss.com/docs/installation/" target="_blank" rel='nofollow noreferrer'>official Tailwind CSS installation guide</a>.
+
+Once Tailwind CSS is installed, update your `tailwind.config.js` file to add the necessary configuration for Wedges:
+
+```js {1,10,13,14} title="tailwind.config.js" showLineNumbers
+import { wedgesTW } from "wedges-vue";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
+    "./storage/framework/views/*.php",
+    "./resources/views/**/*.blade.php",
+    "./resources/js/**/*.vue",
+    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
+  ],
+  theme: {},
+  darkMode: "class",
+  plugins: [wedgesTW()],
+};
+```
+
+### Setup pnpm (optional)
+
+If you're using pnpm, add the following line to your `.npmrc` file:
+
+```
+public-hoist-pattern[]=*@lmsqueezy/*
+```
+
+This ensures that pnpm correctly handles dependencies for Wedges, allowing necessary packages to be accessible at the top level of your node_modules.
+
+After updating, run `pnpm install` again to reconfigure your dependencies correctly.
+
+### Using the components
+
+That's all. You can now start using the components in your application.
+
+```vue
+<script setup lang="ts">
+import { Alert } from "wedges-vue";
+</script>
+
+<template>
+  <Alert>You're awesome!</Alert>
+</template>
+```
+
+</Steps>
diff --git a/apps/docs/src/content/docs/introduction.md b/apps/docs/src/content/docs/introduction.md
new file mode 100644
index 0000000..4d5bbc4
--- /dev/null
+++ b/apps/docs/src/content/docs/introduction.md
@@ -0,0 +1,39 @@
+---
+title: Introduction
+description: An ever-expanding, open-source Vue library built with the Wedges Design System, Radix primitives, and Tailwind CSS.
+breadcrumbs:
+    - Getting Started
+---
+
+<img priority src="/images/banner.webp"  :width="616" height="411" alt="Wedges banner" class="block w-full rounded-lg object-cover border border-surface-100" />
+
+### What is Wedges?
+
+Wedges is a professionally designed <a href="https://lemonsqueezy.com/wedges/figma/">design system for Figma</a> and an ever-expanding, open-source UI library that combines <a href="https://www.radix-ui.com/primitives" target="_blank" rel="noopener noreferrer">Radix UI primitives</a> and <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>. Its goal is to simplify the process of building beautiful, functional and accessible user interfaces.
+
+With Wedges, you get a range of pre-built, customizable components that are easy to use and integrate into your React or Vue projects. It also comes with full TypeScript support, ensuring type safety and developer-friendly experience.
+
+### License
+
+Wedges is licensed under the <a href="https://github.com/lmsqueezy/wedges/blob/main/LICENSE" target="_blank" rel="noreferrer noopener">MIT License</a>.
+
+### Contributing
+
+Interested in contributing to Wedges? Awesome! Start by reviewing our <a href="https://github.com/lmsqueezy/wedges/blob/main/CONTRIBUTING.md" target="_blank" rel='noopener noreferrer'>contribution guidelines</a>. We value your efforts in helping us enhance Wedges.
+
+### Credits
+
+Wedges is an open source project by <a href="https://www.lemonsqueezy.com/" target="_blank">Lemon Squeezy</a> — the all-in-one platform for software companies.
+
+- Design system by <a href="https://twitter.com/ormanclark" target="_blank" rel="noreferrer noopener">@ormanclark</a>
+- React UI component library by <a href="https://twitter.com/brankoconjic" target="_blank" rel="noreferrer noopener">@brankoconjic</a>
+- Vue UI component library by <a href="https://twitter.com/raymondmuller" target="_blank" rel="noreferrer noopener">@raymondmuller</a>
+- <a href="https://radix-ui.com/primitives/" target="_blank" rel="noreferrer noopener">Radix UI</a>
+- <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">Tailwind CSS</a>
+- Custom Tailwind CSS plugin inspired by <a href="https://github.com/L-Blondy/tw-colors" target="_blank" rel="noreferrer noopener">tw-colors</a>
+- Components code structure inspired by <a href="https://ui.shadcn.com/" target="_blank">shadcn/ui</a>
+
+### Connect
+
+Follow me <a href="https://twitter.com/raymondmuller/" target="_blank" rel="noreferrer">@raymondmuller</a> and
+follow <a href="https://twitter.com/lmsqueezy/" target="_blank" rel="noreferrer">@lmsqueezy</a> for the latest and coolest. Let us know what you're building with Wedges!
diff --git a/apps/docs/src/content/docs/requirements.md b/apps/docs/src/content/docs/requirements.md
new file mode 100644
index 0000000..a1ceb52
--- /dev/null
+++ b/apps/docs/src/content/docs/requirements.md
@@ -0,0 +1,12 @@
+---
+title: Requirements
+description: Here's what you need to get started with Wedges.
+breadcrumbs:
+  - Getting Started
+---
+
+- **Vue**: Version 3 or higher.
+- **Tailwind CSS**: Version 3 or higher.
+- **TypeScript**: Optional, but recommended for a better development experience.
+- **Module System**: ESM (ECMAScript Modules) is preferred over CJS (CommonJS) for efficiency and modern standards.
+- **Node.js**: Version 18.7 or higher.
diff --git a/apps/docs/src/content/docs/theming/additional-utilities.md b/apps/docs/src/content/docs/theming/additional-utilities.md
new file mode 100644
index 0000000..7b09ca2
--- /dev/null
+++ b/apps/docs/src/content/docs/theming/additional-utilities.md
@@ -0,0 +1,339 @@
+---
+title: Additional Utilities
+description: A collection of Wedges design system utility classes.
+breadcrumbs:
+  - Theming
+---
+
+### Font Size
+
+The following font size utilities are available with Wedges.
+<!--
+<PropsTable
+  isUtility
+  sort={false}
+  content={[
+    [
+      { value: "text-xxs" },
+      {
+        value: (
+          <div>
+            <span>font-size: 0.625rem</span>
+            <span>line-height: 1rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-xs" },
+      {
+        value: (
+          <div>
+            <span>font-size: 0.75rem</span>
+            <span>line-height: 1rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-sm" },
+      {
+        value: (
+          <div>
+            <span>font-size: 0.875rem</span>
+            <span>line-height: 1.25rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-base" },
+      {
+        value: (
+          <div>
+            <span>font-size: 1rem</span>
+            <span>line-height: 1.5rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-lg" },
+      {
+        value: (
+          <div>
+            <span>font-size: 1.125rem</span>
+            <span>line-height: 1.75rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 1.25rem</span>
+            <span>line-height: 1.75rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-2xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 1.5rem</span>
+            <span>line-height: 2rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-3xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 1.875rem</span>
+            <span>line-height: 2.25rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-4xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 2.25rem</span>
+            <span>line-height: 2.5rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-5xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 3rem</span>
+            <span>line-height: 3.5rem</span>
+            <span>letter-spacing: -0.075rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-6xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 3.75rem</span>
+            <span>line-height: 4.5rem</span>
+            <span>letter-spacing: -0.09375rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-7xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 4.5rem</span>
+            <span>line-height: 5rem</span>
+            <span>letter-spacing: -0.1125rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-8xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 6rem</span>
+            <span>line-height: 6.5rem</span>
+            <span>letter-spacing: -0.15rem</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "text-9xl" },
+      {
+        value: (
+          <div>
+            <span>font-size: 8rem</span>
+            <span>line-height: 8rem</span>
+            <span>letter-spacing: -0.2rem</span>
+          </div>
+        ),
+      },
+    ],
+  ]}
+/> -->
+
+### Box Shadow
+
+The additional box shadow utilities are available with the `shadow-wg-{scale}` classes.
+<!--
+<PropsTable
+  isUtility
+  sort={false}
+  content={[
+    [
+      { value: "shadow-wg-xs" },
+      {
+        value: (
+          <div>
+            <span>box-shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)"</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-sm" },
+      {
+        value: (
+          <div>
+            <span>
+              box-shadow: "0 1px 3px 0 rgba(18, 18, 23, 0.1), 0 1px 2px 0 rgba(18, 18, 23, 0.06)"
+            </span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-md" },
+      {
+        value: (
+          <div>
+            <span>
+              box-shadow: "0px 2px 4px -1px rgba(18, 18, 23, 0.06), 0px 4px 6px -1px rgba(18, 18,
+              23, 0.08)"
+            </span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-lg" },
+      {
+        value: (
+          <div>
+            <span>
+              box-shadow: "0px 4px 6px -2px rgba(18, 18, 23, 0.05), 0px 10px 15px -3px rgba(18, 18,
+              23, 0.08)"
+            </span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-xl" },
+      {
+        value: (
+          <div>
+            <span>
+              box-shadow: "0px 10px 10px -5px rgba(18, 18, 23, 0.04), 0px 20px 25px -5px rgba(18,
+              18, 23, 0.10)"
+            </span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-2xl" },
+      {
+        value: (
+          <div>
+            <span>box-shadow: "0px 25px 50px -12px rgba(18, 18, 23, 0.25)"</span>
+          </div>
+        ),
+      },
+    ],
+    [
+      { value: "shadow-wg-overlay" },
+      {
+        value: (
+          <div>
+            <span>
+              box-shadow: "0px 2px 4px 0px rgba(18, 18, 23, 0.04), 0px 5px 8px 0px rgba(18, 18, 23,
+              0.04), 0px 10px 18px 0px rgba(18, 18, 23, 0.03), 0px 24px 48px 0px rgba(18, 18, 23,
+              0.03), 0px 0px 0px 1px rgba(18, 18, 23, 0.10)"
+            </span>
+          </div>
+        ),
+      },
+    ],
+  ]}
+/> -->
+
+### Animations
+
+Wedges introduces a set of simple fade animation utilities. These animations are used across Wedges components, making them smoother and more visually appealing. Use them with the `animation-wg-{name}` utility.
+
+- **Fade in up**: `wg-fade-in-up`
+- **Fade in down**: `wg-fade-in-down`
+- **Fade in left**: `wg-fade-in-left`
+- **Fade in right**: `wg-fade-in-right`
+- **Fade out**: `wg-fade-out`
+
+Keyframes for these animations are defined as follows:
+
+```js showLineNumbers
+ keyframes: {
+    fadeInUp: {
+        "0%": {
+            opacity: "0",
+            transform: "translateY(5px) scale(.97)",
+        },
+        "100%": {
+            opacity: "1",
+            transform: "translateY(0px) scale(1)",
+        },
+    },
+    fadeInDown: {
+        "0%": {
+            opacity: "0",
+            transform: "translateY(-5px) scale(.97)",
+        },
+        "100%": {
+            opacity: "1",
+            transform: "translateY(0px) scale(1)",
+        },
+    },
+    fadeInLeft: {
+        "0%": {
+            opacity: "0",
+            transform: "translateX(5px) scale(.97)",
+        },
+        "100%": {
+            opacity: "1",
+            transform: "translateX(0px) scale(1)",
+        },
+    },
+    fadeInRight: {
+        "0%": {
+            opacity: "0",
+            transform: "translateX(-5px) scale(.97)",
+        },
+        "100%": {
+            opacity: "1",
+            transform: "translateX(0px) scale(1)",
+        },
+    },
+    fadeOut: {
+        "0%": {
+            opacity: "1",
+            transform: "scale(1)",
+        },
+        "100%": {
+            opacity: "0",
+            transform: "scale(.97)",
+        },
+    },
+},
+```
diff --git a/apps/docs/src/content/docs/theming/color-system.md b/apps/docs/src/content/docs/theming/color-system.md
new file mode 100644
index 0000000..79357d8
--- /dev/null
+++ b/apps/docs/src/content/docs/theming/color-system.md
@@ -0,0 +1,364 @@
+---
+title: Color System
+description: Versatile color palette and themable colors ready for your next project.
+breadcrumbs:
+  - Theming
+---
+
+Our color system is divided into three categories:
+
+- **Tailwind CSS Defaults**: The default colors provided by Tailwind CSS.
+- **Wedges Palette**: A set of core colors that are consistent across all themes.
+- **Themable Colors**: Configurable colors that adapt and change based on the active theme.
+
+### Wedges Palette
+
+When using the Wedges color palette, you need to prefix color names with `wg-`, for example: `bg-wg-gray-500`. The default Tailwind CSS colors are available without the prefix.
+
+<Colors title="Gray">
+  <Color class="bg-wg-gray-50" title="50" hex="#F7F7F8" />
+  <Color class="bg-wg-gray-100" title="100" hex="#EBEBEF" />
+  <Color class="bg-wg-gray-200" title="200" hex="#D1D1DB" />
+  <Color class="bg-wg-gray-300" title="300" hex="#A9A9BC" />
+  <Color class="bg-wg-gray-400" title="400" hex="#8A8AA3" />
+  <Color class="bg-wg-gray-500" title="500*" hex="#6C6C89" />
+  <Color class="bg-wg-gray-600" title="600" hex="#55556D" />
+  <Color class="bg-wg-gray-700" title="700" hex="#3F3F50" />
+  <Color class="bg-wg-gray-800" title="800" hex="#282833" />
+  <Color class="bg-wg-gray-900" title="900" hex="#121217" />
+</Colors>
+
+<Colors title="Yellow">
+  <Color class="bg-wg-yellow-50" title="50" hex="#FFF9EB" />
+  <Color class="bg-wg-yellow-100" title="100" hex="#FFF3D6" />
+  <Color class="bg-wg-yellow-200" title="200" hex="#FFE7AD" />
+  <Color class="bg-wg-yellow-300" title="300" hex="#FFDA85" />
+  <Color class="bg-wg-yellow-400" title="400" hex="#FFCE5C" />
+  <Color class="bg-wg-yellow-500" title="500*" hex="#FFC233" />
+  <Color class="bg-wg-yellow-600" title="600" hex="#FAAF00" />
+  <Color class="bg-wg-yellow-700" title="700" hex="#C28800" />
+  <Color class="bg-wg-yellow-800" title="800" hex="#8A6100" />
+  <Color class="bg-wg-yellow-900" title="900" hex="#523900" />
+</Colors>
+
+<Colors title="Green">
+  <Color class="bg-wg-green-50" title="50" hex="#EEFBF4" />
+  <Color class="bg-wg-green-100" title="100" hex="#DFF8EA" />
+  <Color class="bg-wg-green-200" title="200" hex="#B2EECC" />
+  <Color class="bg-wg-green-300" title="300" hex="#84E4AE" />
+  <Color class="bg-wg-green-400" title="400" hex="#56D990" />
+  <Color class="bg-wg-green-500" title="500*" hex="#2DCA72" />
+  <Color class="bg-wg-green-600" title="600" hex="#26A95F" />
+  <Color class="bg-wg-green-700" title="700" hex="#1E874C" />
+  <Color class="bg-wg-green-800" title="800" hex="#17663A" />
+  <Color class="bg-wg-green-900" title="900" hex="#0F4527" />
+</Colors>
+
+<Colors title="Blue">
+  <Color class="bg-wg-blue-50" title="50" hex="#F0FAFF" />
+  <Color class="bg-wg-blue-100" title="100" hex="#DBF3FF" />
+  <Color class="bg-wg-blue-200" title="200" hex="#ADE4FF" />
+  <Color class="bg-wg-blue-300" title="300" hex="#70D1FF" />
+  <Color class="bg-wg-blue-400" title="400" hex="#38BEFF" />
+  <Color class="bg-wg-blue-500" title="500*" hex="#00ACFF" />
+  <Color class="bg-wg-blue-600" title="600" hex="#0090D6" />
+  <Color class="bg-wg-blue-700" title="700" hex="#0075AD" />
+  <Color class="bg-wg-blue-800" title="800" hex="#005985" />
+  <Color class="bg-wg-blue-900" title="900" hex="#003E5C" />
+</Colors>
+
+<Colors title="Purple">
+  <Color class="bg-wg-purple-50" title="50" hex="#F4F1FD" />
+  <Color class="bg-wg-purple-100" title="100" hex="#E2DAFB" />
+  <Color class="bg-wg-purple-200" title="200" hex="#C6B6F7" />
+  <Color class="bg-wg-purple-300" title="300" hex="#A991F3" />
+  <Color class="bg-wg-purple-400" title="400" hex="#8D6CEF" />
+  <Color class="bg-wg-purple-500" title="500*" hex="#7047EB" />
+  <Color class="bg-wg-purple-600" title="600" hex="#5423E7" />
+  <Color class="bg-wg-purple-700" title="700" hex="#4316CA" />
+  <Color class="bg-wg-purple-800" title="800" hex="#3712A5" />
+  <Color class="bg-wg-purple-900" title="900" hex="#2B0E81" />
+</Colors>
+
+<Colors title="Orange">
+  <Color class="bg-wg-orange-50" title="50" hex="#FFF2EE" />
+  <Color class="bg-wg-orange-100" title="100" hex="#FFE8E1" />
+  <Color class="bg-wg-orange-200" title="200" hex="#FFCDBD" />
+  <Color class="bg-wg-orange-300" title="300" hex="#FFB399" />
+  <Color class="bg-wg-orange-400" title="400" hex="#FF9876" />
+  <Color class="bg-wg-orange-500" title="500*" hex="#FF7D52" />
+  <Color class="bg-wg-orange-600" title="600" hex="#FF571F" />
+  <Color class="bg-wg-orange-700" title="700" hex="#EB3A00" />
+  <Color class="bg-wg-orange-800" title="800" hex="#B82E00" />
+  <Color class="bg-wg-orange-900" title="900" hex="#852100" />
+</Colors>
+
+<Colors title="Red">
+  <Color class="bg-wg-red-50" title="50" hex="#FEF0F4" />
+  <Color class="bg-wg-red-100" title="100" hex="#FDD8E1" />
+  <Color class="bg-wg-red-200" title="200" hex="#FBB1C4" />
+  <Color class="bg-wg-red-300" title="300" hex="#F98BA6" />
+  <Color class="bg-wg-red-400" title="400" hex="#F76489" />
+  <Color class="bg-wg-red-500" title="500*" hex="#F53D6B" />
+  <Color class="bg-wg-red-600" title="600" hex="#F3164E" />
+  <Color class="bg-wg-red-700" title="700" hex="#D50B3E" />
+  <Color class="bg-wg-red-800" title="800" hex="#AF0932" />
+  <Color class="bg-wg-red-900" title="900" hex="#880727" />
+</Colors>
+
+<Colors title="Pink">
+  <Color class="bg-wg-pink-50" title="50" hex="#FEECFB" />
+  <Color class="bg-wg-pink-100" title="100" hex="#FDDDF8" />
+  <Color class="bg-wg-pink-200" title="200" hex="#FCC5F3" />
+  <Color class="bg-wg-pink-300" title="300" hex="#FA99EA" />
+  <Color class="bg-wg-pink-400" title="400" hex="#F87CE4" />
+  <Color class="bg-wg-pink-500" title="500*" hex="#F75FDE" />
+  <Color class="bg-wg-pink-600" title="600" hex="#F42AD3" />
+  <Color class="bg-wg-pink-700" title="700" hex="#DB0BB9" />
+  <Color class="bg-wg-pink-800" title="800" hex="#A5088C" />
+  <Color class="bg-wg-pink-900" title="900" hex="#70065F" />
+</Colors>
+
+#### Example
+
+```html showLineNumbers
+<div class="bg-yellow-400">Easy</div> // Tailwind color
+<div class="bg-wg-yellow-400">Peasy</div> // Wedges color
+<div class="bg-wg-yellow">Lemon Squeezy</div> // uses yellow.DEFAULT color
+```
+
+#### Color Scale
+
+Similar to Tailwind CSS, the Wedges color palette utilizes a 10-step, graded color scale, along with a `DEFAULT` value. This default value is applied when no specific grade is provided through a class, such as in `bg-wg-blue`.
+
+```tsx showLineNumbers
+interface ColorScale {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  DEFAULT: string;
+}
+```
+
+for example:
+
+```tsx showLineNumbers
+import type { ColorScale } from "wedges-vue";
+
+const wg_blue: ColorScale = {
+  50: "#F0FAFF",
+  100: "#DBF3FF",
+  200: "#ADE4FF",
+  300: "#70D1FF",
+  400: "#38BEFF",
+  500: "#00ACFF",
+  600: "#0090D6",
+  700: "#0075AD",
+  800: "#005985",
+  900: "#003E5C",
+  DEFAULT: "#00ACFF",
+};
+```
+
+#### Customization
+
+These colors can be customized under the `colors` key in the `theme` section of your `tailwind.config.ts` file:
+
+```tsx title="tailwind.config.ts" {6-9} showLineNumbers
+const config: Config = {
+  // ...
+  theme: {
+    extend: {
+      colors: {
+        "wg-red": {
+          DEFAULT: "#ff0000",
+          500: "#ff0000",
+        },
+      },
+    },
+  },
+  // ...
+};
+
+export default config;
+```
+
+### Themable Colors
+
+Themable colors are configurable and can adapt with multiple themes. By default, themable colors will adapt to `dark` and `light` themes, but you can easily add more themes to your project.
+
+The following themable colors are available:
+
+<Colors class="grid-cols-3 gap-2.5 gap-y-6 md:grid-cols-6">
+  <ColorThemable class="bg-background" title="Background" />
+  <ColorThemable class="bg-foreground" title="Foreground" />
+  <ColorThemable class="bg-primary" title="Primary" />
+  <ColorThemable class="bg-secondary" title="Secondary" />
+  <ColorThemable class="bg-destructive" title="Destructive" />
+  <ColorThemable class="bg-surface" title="Surface" />
+</Colors>
+
+By default, `background` and `foreground` colors are applied to the `<html>` element.
+
+#### Example
+
+Toggle between light and dark mode to preview each theme.
+
+<ComponentPreview name="ColorsThemableColors" />
+
+#### Color Scale
+
+Themable color scale is more flexible than Wedges Palette color scale, it is defined like this:
+
+```tsx showLineNumbers
+type ThemableColorScale = Partial<ColorScale> | string;
+
+interface ThemableColors {
+  background: string;
+  foreground: string;
+  primary: ThemableColorScale;
+  secondary: ThemableColorScale;
+  surface: ThemableColorScale;
+  destructive: ThemableColorScale;
+}
+```
+
+This structure allows for a wide range of customization options, adapting to various design needs.
+
+#### Default Values
+
+The default themable colors are defined as follows:
+
+```tsx showLineNumbers
+const themableColorsLight: ThemableColors = {
+  background: "#FFFFFF",
+  foreground: palette.gray[900],
+  primary: {
+    ...palette.purple, // `palette` is the Wedges Palette
+    DEFAULT: palette.purple[500],
+  },
+  secondary: {
+    ...palette.gray,
+    DEFAULT: palette.gray[900],
+  },
+  surface: {
+    ...palette.gray,
+    DEFAULT: palette.gray[50],
+  },
+  destructive: {
+    ...palette.red,
+  },
+};
+
+const themableColorsDark: ThemableColors = {
+  background: palette.gray[900],
+  foreground: "#FFFFFF",
+  primary: {
+    ...palette.purple,
+    DEFAULT: palette.purple[400],
+    600: palette.purple[500],
+  },
+  secondary: {
+    ...palette.white,
+    900: palette.gray[900],
+    DEFAULT: palette.white[900],
+  },
+  surface: {
+    50: "rgba(255,255,255, 0.1)",
+    100: "rgba(255,255,255, 0.2)",
+    200: "rgba(255,255,255, 0.3)",
+    300: "rgba(255,255,255, 0.4)",
+    400: "rgba(255,255,255, 0.5)",
+    500: "rgba(255,255,255, 0.5)",
+    600: "rgba(255,255,255, 0.7)",
+    700: "rgba(255,255,255, 0.8)",
+    800: "rgba(255,255,255, 0.9)",
+    900: "#FFFFFF",
+    DEFAULT: "rgba(255,255,255, 0.1)",
+  },
+  destructive: palette.red,
+};
+```
+
+#### Customization
+
+For optimal results, we suggest creating a ten-step graded color scale for your custom colors. You may find these online tools helpful in generating custom color scales: <a href="https://palettte.app/" target="_blank" rel="noreferrer nofollow">Palettte</a> and <a href="https://colors.eva.design/" target="_blank" rel="noreferrer nofollow">Eva Design System</a>.
+
+Themable colors can be customized by adding options to the `wedgesTW` plugin in your `tailwind.config.ts` file. For instance, to use yellow as the primary color for **dark theme only**, you can set it like this:"
+
+```tsx {} title="tailwind.config.ts" showLineNumbers
+import { wedgesTW } from "wedges-vue";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  // Other Tailwind CSS options...
+  plugins: [
+    wedgesTW({
+      themes: {
+        dark: {
+          colors: {
+            primary: {
+              50: "#FFF9EB",
+              100: "#FFF3D6",
+              200: "#FFE7AD",
+              300: "#FFDA85",
+              400: "#FFCE5C",
+              500: "#FFC233",
+              600: "#FAAF00",
+              700: "#C28800",
+              800: "#8A6100",
+              900: "#523900",
+              DEFAULT: "#FFC233",
+            },
+          },
+        },
+        light: {
+          colors: {
+            // Define colors for `light` theme here...
+          },
+        },
+      },
+    }),
+  ],
+};
+
+export default config;
+```
+
+If you want to use one of the Wedges Color Palette colors, `wedgesPalette` can be imported from `wedges-vue`, for example:
+
+```tsx {11} title="tailwind.config.ts" showLineNumbers /wedgesPalette/
+import { wedgesPalette, wedgesTW } from "wedges-vue";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  // Other Tailwind CSS options...
+  plugins: [
+    wedgesTW({
+      themes: {
+        dark: {
+          colors: {
+            primary: wedgesPalette.yellow,
+          },
+        },
+      },
+    }),
+  ],
+};
+
+export default config;
+```
+
+This will set all ten steps of the yellow color scale as the primary color for the dark theme.
+
+<Alert variant="expanded" class="not-prose">
+  Ensure that these changes are applied to the `wedgesTW` plugin options, rather than the `theme`
+  section in your `tailwind.config.ts` file.
+</Alert>
diff --git a/apps/docs/src/content/docs/theming/custom-themes.md b/apps/docs/src/content/docs/theming/custom-themes.md
new file mode 100644
index 0000000..24b5601
--- /dev/null
+++ b/apps/docs/src/content/docs/theming/custom-themes.md
@@ -0,0 +1,101 @@
+---
+title: Custom Themes
+description: How to create custom themes with Wedges.
+breadcrumbs:
+  - Theming
+---
+
+With Wedges you have the option to create a new theme using the default ones as a foundation. In the following example, we'll create a `dark-blue` theme, extending the standard `dark` theme.
+
+<Steps>
+
+### Define Colors
+
+For optimal results, creating a ten-step graded color scale for your custom themable colors is recommended. You may find these online tools helpful in generating custom color scales: <a href="https://palettte.app/" target="_blank" rel="noreferrer nofollow">Palettte</a> and <a href="https://colors.eva.design/" target="_blank" rel="noreferrer nofollow">Eva Design System</a>.
+
+Let's define `primaryBlue` color scale:
+
+```tsx showLineNumbers
+import type { ThemableColorScale } from "wedges-vue";
+
+const primaryBlue: ThemableColorScale = {
+  100: "#DAF0FF",
+  200: "#B5DEFF",
+  300: "#90C9FF",
+  400: "#75B6FF",
+  500: "#4796FF",
+  600: "#3374DB",
+  700: "#2356B7",
+  800: "#163C93",
+  900: "#0D297A",
+  DEFAULT: "#4796FF", // 500
+};
+```
+
+Alternatively, you can use professionally designed colors scales defined in the Wedges color palette. Import `wedgesPallette` to start using predefined colors:
+
+```tsx showLineNumbers /wedgesPalette.blue/ /wedgesPalette.orange[500]/
+import { wedgesPalette } from "wedges-vue";
+
+const primaryBlue = wedgesPalette.blue;
+const orange500 = wedgesPalette.orange[500];
+```
+
+### Update Tailwind Config
+
+To create a new theme, you need to provide a configuration object to the `wedgesTW` plugin in your `tailwind.config` file.
+
+```tsx {26-38} title="tailwind.config.ts" showLineNumbers
+import { wedgesTW } from "wedges-vue";
+import type { Config } from "tailwindcss";
+
+const primaryBlue: ThemableColorScale = {
+  100: "#DAF0FF",
+  200: "#B5DEFF",
+  300: "#90C9FF",
+  400: "#75B6FF",
+  500: "#4796FF",
+  600: "#3374DB",
+  700: "#2356B7",
+  800: "#163C93",
+  900: "#0D297A",
+  DEFAULT: "#4796FF", // 500
+};
+
+const config: Config = {
+  content: [
+    // ...
+    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
+  ],
+  theme: {},
+  darkMode: "class",
+  plugins: [
+    wedgesTW({
+      themes: {
+        "dark-blue": {
+          extend: "dark",
+          colors: {
+            // Replace primary color
+            primary: primaryBlue,
+
+            // Partially replace secondary color
+            secondary: {
+              900: "#FF6838",
+            },
+          },
+        },
+      },
+    }),
+  ],
+};
+```
+
+In the example above, we've created a new theme called `dark-blue` that extends the `dark` theme. We've also replaced the `primary` color with our custom `primaryBlue` color scale and partially replaced the `secondary` color, specifically `secondary.900` with a custom color.
+
+### Use The New Theme
+
+Now that we've created a new theme, we can use it in our application. To do so, we need to add the `dark-blue` class to the `html` or any parent element of the component we want to use the theme on.
+
+<ComponentPreview name="ThemingCustomThemes" />
+
+</Steps>
diff --git a/apps/docs/src/content/docs/theming/default-themes.md b/apps/docs/src/content/docs/theming/default-themes.md
new file mode 100644
index 0000000..cca80a5
--- /dev/null
+++ b/apps/docs/src/content/docs/theming/default-themes.md
@@ -0,0 +1,43 @@
+---
+title: Default Themes
+description: Adding dark and light themes to your application.
+breadcrumbs:
+  - Theming
+---
+
+Wedges supports dark and light themes out of the box. By default, the light theme is applied if no specific theme classes are added. The default theme can be changed with <a href="/theming/tailwind-css-plugin/#configuration">wedgesTW configuration</a>.
+
+### Using Default Themes
+
+To apply a dark theme, simply add the `dark` class to a parent element, usually the `html` or `body`. For other themes, add the appropriate class, like `light` for light theme.
+
+```html showLineNumbers /dark/
+<html class="dark">
+  ...
+</html>
+```
+
+This approach enables the dark theme for the entire app. To apply different themes to individual sections, add the corresponding theme class to each section's container.
+
+```html showLineNumbers /dark/ /light/ /orange-blue/
+<html class="dark">
+  ...
+  <div class="light">...</div>
+  <div class="orange-blue">...</div>
+  <!-- custom theme -->
+</html>
+```
+
+### Customization
+
+<!-- See <a href="/theming/color-system/#customization-1">Colors Customization</a>. -->
+
+### Theme Switching
+
+If you need to toggle between different themes consider using a theme switching library, or a custom solution for this functionality.
+
+#### Switcher Examples
+
+The following examples show how you could use Wedges components to create a theme switcher component.
+
+<ComponentPreview name="ThemingDarkMode" />
diff --git a/apps/docs/src/content/docs/theming/tailwind-css-plugin.md b/apps/docs/src/content/docs/theming/tailwind-css-plugin.md
new file mode 100644
index 0000000..06042d9
--- /dev/null
+++ b/apps/docs/src/content/docs/theming/tailwind-css-plugin.md
@@ -0,0 +1,158 @@
+---
+title: Tailwind CSS Plugin
+description: Wedges design system plugin for Tailwind CSS.
+breadcrumbs:
+  - Theming
+---
+
+Wedges provides a Tailwind CSS plugin enabling the use of Wedges design tokens and creation of custom themes in your projects. This plugin is inspired and based on the awesome <a href="https://github.com/L-Blondy/tw-colors" target="_blank" rel="nofollow noreferrer">tw-colors</a> plugin.
+
+Tailwind CSS supports dark mode, but with Wedges, you can create an unlimited number of custom themes. There's no cap on the themes and colors you can use, and it even supports nested themes for more complex use cases.
+
+### Installation
+
+If you haven't installed Tailwind CSS already, follow the instructions in the <a href="https://tailwindcss.com/docs/installation/" target="_blank" rel='nofollow noreferrer'>official Tailwind CSS installation guide</a>.
+
+Once Tailwind CSS is installed, update your `tailwind.config` file to add the necessary configuration for Wedges:
+
+```tsx {2,7,10,11} title="tailwind.config.ts" showLineNumbers
+import { wedgesTW } from "wedges-vue";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    // ...
+    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
+  ],
+  theme: {},
+  darkMode: "class",
+  plugins: [wedgesTW()],
+};
+
+export default config;
+```
+
+### Configuration
+
+#### Plugin Options
+
+The `wedgesTW` plugin accepts a configuration object allowing you to customize the plugin's behavior. This is the default structure of the configuration object:
+
+```tsx {12-24} title="tailwind.config.ts" showLineNumbers
+import { wedgesTW } from "wedges-vue";
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    // ...
+    "node_modules/wedges-vue/dist/**/*.{js,ts,vue}",
+  ],
+  theme: {},
+  darkMode: "class",
+  plugins: [
+    wedgesTW({
+      prefix: "wg", // prefix used for CSS variables
+      defaultTheme: "light", // default theme
+      defaultExtendTheme: "light", // default theme to extend when creating custom themes
+      fontSmooth: "antialiased", // specify font smoothing for Wedges components
+      themes: {
+        light: {
+          colors: {}, // light themable colors
+        },
+        dark: {
+          colors: {}, // dark themable colors
+        },
+        // ... custom themes
+      },
+    }),
+  ],
+};
+```
+
+#### Type
+
+The configuration object type is defined as follows:
+
+```tsx showLineNumbers
+interface WedgesOptions {
+  /**
+   * The prefix for CSS variables.
+   * @default "wg"
+   */
+  prefix?: string;
+
+  /**
+   * The theme definitions.
+   */
+  themes?: ConfigThemes;
+
+  /**
+   * The default theme to use.
+   * @default "light"
+   */
+  defaultTheme?: DefaultThemeType;
+
+  /**
+   * The default theme to extend. Available values are "light" and "dark".
+   * @default "light"
+   */
+  defaultExtendTheme?: "light" | "dark";
+
+  /**
+   * Specifies whether or not to apply font anti-aliasing to Wedges components.
+   *
+   * If set to `antialiased` (default), Wedges components will have anti-aliasing applied to them.
+   * If set to `inherit`, no specific styles will be set for text anti-aliasing.
+   *
+   * @default "antialiased"
+   */
+  fontSmooth?: "antialiased" | "inherit";
+}
+```
+
+```ts showLineNumbers
+interface ConfigTheme {
+  /**
+   * Whether to extend 'dark' or 'light' theme.
+   * @default "light"
+   */
+  extend?: "light" | "dark";
+
+  /**
+   * Defines an extended colors object, providing a flexible foundation for theming or custom color configurations.
+   *
+   * Key Features:
+   * 1. **Themable Colors**: Customize or extend existing themes by overriding values in the `wedgesPalette`.
+   * 2. **Custom Colors**: Introduce new color schemes by adding unique key-value pairs.
+   * 3. **Nested Colors**: Allows for the grouping of color variations under a single key, facilitating organized and hierarchical color definitions.
+   * 4. **Prefix 'wg'**: The colors defined in `wedgesPalette` are prefixed with 'wg' to prevent conflicts with the standard Tailwind color palette, ensuring a seamless integration.
+   *
+   * @example
+   * colors: {
+   *   'wg-red': '#ff0000',
+   *   customColor: {
+   *     500: '#f0f0f0',
+   *     600: '#0d0d0d',
+   *   },
+   * }
+   */
+  colors?: Partial<ThemableColors> | Record<string, string | Record<string, string>>;
+};
+```
+
+#### API Reference
+
+<!-- @include: ../../meta/TailwindPlugin.md -->
+
+### Nested Themes
+
+Wedges supports nested themes, enabling the use of multiple themes within individual sections for flexible styling.
+
+```html showLineNumbers /light/ /dark/2-3/ /orange-blue/
+<html class="light">
+  ...
+  <div class="dark">...</div>
+  <div class="orange-blue">...</div>
+  <!-- custom theme -->
+</html>
+```
diff --git a/apps/docs/src/content/index.md b/apps/docs/src/content/index.md
new file mode 100644
index 0000000..69ed041
--- /dev/null
+++ b/apps/docs/src/content/index.md
@@ -0,0 +1,6 @@
+---
+home: true
+title: Wedges for Vue
+---
+
+<LandingPage />
diff --git a/apps/docs/src/content/meta/Accordion.md b/apps/docs/src/content/meta/Accordion.md
new file mode 100644
index 0000000..cc4ae74
--- /dev/null
+++ b/apps/docs/src/content/meta/Accordion.md
@@ -0,0 +1,67 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collapsible',
+    'description': '<p>When type is &quot;single&quot;, allows closing content when clicking trigger for an open item.\nWhen type is &quot;multiple&quot;, this prop has no effect.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The default active value of the item(s).</p>\n<p>Use when you do not need to control the state of the item(s).</p>\n',
+    'type': 'string | string[]',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the accordion and all its items</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the active item(s).</p>\n<p>Use this when you need to control the state of the items. Can be binded with <code>v-model</code></p>\n',
+    'type': 'string | string[]',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the accordion.</p>\n',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be pressed at a time.</p>\n<p>This prop will be ignored if any of <code>v-model</code> or <code>defaultValue</code> is an defined, as the type will be inferred from the value.</p>\n',
+    'type': '\'single\' | \'multiple\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: string | string[]]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AccordionContent.md b/apps/docs/src/content/meta/AccordionContent.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AccordionContent.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AccordionItem.md b/apps/docs/src/content/meta/AccordionItem.md
new file mode 100644
index 0000000..190cb59
--- /dev/null
+++ b/apps/docs/src/content/meta/AccordionItem.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Whether or not an accordion item is disabled from user interaction.\nWhen <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>A string value for the accordion item. All items within an accordion should use a unique value.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AccordionTrigger.md b/apps/docs/src/content/meta/AccordionTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AccordionTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Alert.md b/apps/docs/src/content/meta/Alert.md
new file mode 100644
index 0000000..95ae5bd
--- /dev/null
+++ b/apps/docs/src/content/meta/Alert.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'closable',
+    'description': '<p>Is the alert closable? If true, a close icon will be displayed.\nIs the alert closable? If true, a close button will be displayed and\nwhen clicked on it will hide the alert element</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'color',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'info\' | \'success\' | \'error\' | \'warning\' | null',
+    'required': false
+  },
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'inline\' | \'expanded\' | null',
+    'required': false,
+    'default': '\'inline\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertCloseButton.md b/apps/docs/src/content/meta/AlertCloseButton.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertCloseButton.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AlertDescription.md b/apps/docs/src/content/meta/AlertDescription.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDescription.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AlertDialog.md b/apps/docs/src/content/meta/AlertDialog.md
new file mode 100644
index 0000000..a596c8e
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialog.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogAction.md b/apps/docs/src/content/meta/AlertDialogAction.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogAction.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogCancel.md b/apps/docs/src/content/meta/AlertDialogCancel.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogCancel.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogContent.md b/apps/docs/src/content/meta/AlertDialogContent.md
new file mode 100644
index 0000000..def03aa
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogContent.md
@@ -0,0 +1,68 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>When <code>true</code>, focus cannot escape the <code>Content</code> via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogDescription.md b/apps/docs/src/content/meta/AlertDialogDescription.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogDescription.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogFooter.md b/apps/docs/src/content/meta/AlertDialogFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AlertDialogHeader.md b/apps/docs/src/content/meta/AlertDialogHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AlertDialogTitle.md b/apps/docs/src/content/meta/AlertDialogTitle.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogTitle.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertDialogTrigger.md b/apps/docs/src/content/meta/AlertDialogTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertDialogTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AlertRoot.md b/apps/docs/src/content/meta/AlertRoot.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertRoot.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AlertTitle.md b/apps/docs/src/content/meta/AlertTitle.md
new file mode 100644
index 0000000..a8388fb
--- /dev/null
+++ b/apps/docs/src/content/meta/AlertTitle.md
@@ -0,0 +1,11 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'info\' | \'success\' | \'error\' | \'warning\' | null',
+    'required': false,
+    'default': '\'gray\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AspectRatio.md b/apps/docs/src/content/meta/AspectRatio.md
new file mode 100644
index 0000000..9f5d200
--- /dev/null
+++ b/apps/docs/src/content/meta/AspectRatio.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'ratio',
+    'description': '<p>The desired ratio. Eg: 16/9</p>\n',
+    'type': 'number',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Avatar.md b/apps/docs/src/content/meta/Avatar.md
new file mode 100644
index 0000000..fd6534e
--- /dev/null
+++ b/apps/docs/src/content/meta/Avatar.md
@@ -0,0 +1,41 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alt',
+    'description': '<p>Represents the initials displayed on the Avatar.</p>\n<ul>\n<li>Supports single characters, two characters, or full words.</li>\n<li>For full words, initials will be derived from the first letter of the\nfirst word and the first letter of the last word.</li>\n</ul>\n<p>Example: &quot;John Doe&quot; =&gt; &quot;JD&quot;</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'initials',
+    'description': '',
+    'type': 'string',
+    'required': false,
+    'default': '\'\''
+  },
+  {
+    'name': 'notification',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | null',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'2xl\' | null',
+    'required': false
+  },
+  {
+    'name': 'src',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'status',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarFallback.md b/apps/docs/src/content/meta/AvatarFallback.md
new file mode 100644
index 0000000..bbc3f73
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarFallback.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'delayMs',
+    'description': '<p>Useful for delaying rendering so it only appears for those with slower connections.</p>\n',
+    'type': 'number',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarGroup.md b/apps/docs/src/content/meta/AvatarGroup.md
new file mode 100644
index 0000000..3f33e37
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarGroup.md
@@ -0,0 +1,28 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'items',
+    'description': '<p>The items to display in the group.</p>\n',
+    'type': 'AvatarGroupAvatarProps',
+    'required': true
+  },
+  {
+    'name': 'moreLabel',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'previousOnTop',
+    'description': '<p>Whether the previous item should be on top of the stack.\nIf false, the next item will be at the top of the stack.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'2xl\'',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarGroupItem.md b/apps/docs/src/content/meta/AvatarGroupItem.md
new file mode 100644
index 0000000..a06d4a5
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarGroupItem.md
@@ -0,0 +1,40 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alt',
+    'description': '<p>Represents the initials displayed on the Avatar.</p>\n<ul>\n<li>Supports single characters, two characters, or full words.</li>\n<li>For full words, initials will be derived from the first letter of the\nfirst word and the first letter of the last word.</li>\n</ul>\n<p>Example: &quot;John Doe&quot; =&gt; &quot;JD&quot;</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'initials',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'notification',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | null',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'2xl\' | null',
+    'required': false
+  },
+  {
+    'name': 'src',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'status',
+    'description': '',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarGroupLabel.md b/apps/docs/src/content/meta/AvatarGroupLabel.md
new file mode 100644
index 0000000..918370b
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarGroupLabel.md
@@ -0,0 +1,16 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'label',
+    'description': '<p>The label to display.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the element.</p>\n',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'2xl\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarGroupRoot.md b/apps/docs/src/content/meta/AvatarGroupRoot.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarGroupRoot.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AvatarImage.md b/apps/docs/src/content/meta/AvatarImage.md
new file mode 100644
index 0000000..775ac10
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarImage.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'src',
+    'description': '',
+    'type': 'string',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarMoreLabel.md b/apps/docs/src/content/meta/AvatarMoreLabel.md
new file mode 100644
index 0000000..918370b
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarMoreLabel.md
@@ -0,0 +1,16 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'label',
+    'description': '<p>The label to display.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the element.</p>\n',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'2xl\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarNotification.md b/apps/docs/src/content/meta/AvatarNotification.md
new file mode 100644
index 0000000..04b3314
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarNotification.md
@@ -0,0 +1,11 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ring',
+    'description': '',
+    'type': '1 | 2',
+    'required': false,
+    'default': '2'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/AvatarRoot.md b/apps/docs/src/content/meta/AvatarRoot.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarRoot.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/AvatarStatus.md b/apps/docs/src/content/meta/AvatarStatus.md
new file mode 100644
index 0000000..04b3314
--- /dev/null
+++ b/apps/docs/src/content/meta/AvatarStatus.md
@@ -0,0 +1,11 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ring',
+    'description': '',
+    'type': '1 | 2',
+    'required': false,
+    'default': '2'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Badge.md b/apps/docs/src/content/meta/Badge.md
new file mode 100644
index 0000000..2f55d8e
--- /dev/null
+++ b/apps/docs/src/content/meta/Badge.md
@@ -0,0 +1,32 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '<p>The color of the badge.</p>\n',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | \'purple\' | \'orange\' | \'pink\' | \'blue\' | null',
+    'required': false,
+    'default': '\'gray\''
+  },
+  {
+    'name': 'shape',
+    'description': '<p>The shape of the badge.</p>\n',
+    'type': '\'rounded\' | \'pill\' | null',
+    'required': false,
+    'default': '\'rounded\''
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the badge.</p>\n',
+    'type': '\'sm\' | \'md\' | null',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'stroke',
+    'description': '<p>Whether the badge has border or not.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Breadcrumb.md b/apps/docs/src/content/meta/Breadcrumb.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/Breadcrumb.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/BreadcrumbEllipsis.md b/apps/docs/src/content/meta/BreadcrumbEllipsis.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbEllipsis.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/BreadcrumbItem.md b/apps/docs/src/content/meta/BreadcrumbItem.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbItem.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/BreadcrumbLink.md b/apps/docs/src/content/meta/BreadcrumbLink.md
new file mode 100644
index 0000000..523fc0a
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbLink.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'a\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/BreadcrumbList.md b/apps/docs/src/content/meta/BreadcrumbList.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbList.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/BreadcrumbPage.md b/apps/docs/src/content/meta/BreadcrumbPage.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbPage.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/BreadcrumbSeparator.md b/apps/docs/src/content/meta/BreadcrumbSeparator.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/BreadcrumbSeparator.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/Button.md b/apps/docs/src/content/meta/Button.md
new file mode 100644
index 0000000..0215005
--- /dev/null
+++ b/apps/docs/src/content/meta/Button.md
@@ -0,0 +1,56 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'button\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '<p>Specifies whether this button has a destructive action.\nIf <code>true</code>, the button should be styled differently to indicate that it will perform a destructive action.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'isIconOnly',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'shape',
+    'description': '',
+    'type': '\'rounded\' | \'pill\' | null',
+    'required': false,
+    'default': '\'rounded\''
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'sm\' | \'md\' | \'xs-icon\' | null',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'primary\' | \'link\' | \'secondary\' | \'tertiary\' | \'outline\' | \'transparent\' | null',
+    'required': false,
+    'default': '\'primary\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ButtonGroup.md b/apps/docs/src/content/meta/ButtonGroup.md
new file mode 100644
index 0000000..f8cd152
--- /dev/null
+++ b/apps/docs/src/content/meta/ButtonGroup.md
@@ -0,0 +1,25 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Disable all actions on buttons within this group.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>Orientation of the group.</p>\n',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false,
+    'default': '\'horizontal\''
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the buttons in group.</p>\n',
+    'type': '\'sm\' | \'md\'',
+    'required': false,
+    'default': '\'md\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ButtonGroupItem.md b/apps/docs/src/content/meta/ButtonGroupItem.md
new file mode 100644
index 0000000..92ddfcc
--- /dev/null
+++ b/apps/docs/src/content/meta/ButtonGroupItem.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'asChild',
+    'description': '',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'isIconOnly',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Calendar.md b/apps/docs/src/content/meta/Calendar.md
new file mode 100644
index 0000000..2d76970
--- /dev/null
+++ b/apps/docs/src/content/meta/Calendar.md
@@ -0,0 +1,38 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'columns',
+    'description': '',
+    'type': 'number',
+    'required': false,
+    'default': '1'
+  },
+  {
+    'name': 'modelModifiers',
+    'description': '',
+    'type': 'object',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '',
+    'type': 'DatePickerModel',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '',
+    'type': '\'single\' | \'range\'',
+    'required': false,
+    'default': '\'single\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: DatePickerModel]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Card.md b/apps/docs/src/content/meta/Card.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/Card.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CardContent.md b/apps/docs/src/content/meta/CardContent.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CardContent.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CardDescription.md b/apps/docs/src/content/meta/CardDescription.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CardDescription.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CardFooter.md b/apps/docs/src/content/meta/CardFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CardFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CardHeader.md b/apps/docs/src/content/meta/CardHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CardHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CardTitle.md b/apps/docs/src/content/meta/CardTitle.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CardTitle.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/Carousel.md b/apps/docs/src/content/meta/Carousel.md
new file mode 100644
index 0000000..e351e59
--- /dev/null
+++ b/apps/docs/src/content/meta/Carousel.md
@@ -0,0 +1,82 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'opts',
+    'description': '',
+    'type': 'Partial<OptionsType> | Ref<Partial<OptionsType>>',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': false,
+    'default': '\'horizontal\''
+  },
+  {
+    'name': 'plugins',
+    'description': '',
+    'type': 'CreatePluginType<LoosePluginType, {}>[] | Ref<CreatePluginType<LoosePluginType, {}>[]>',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'init-api',
+    'description': '',
+    'type': '[payload: EmblaCarouselType]'
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'carouselRef',
+    'description': '',
+    'type': 'Ref<HTMLElement | undefined>'
+  },
+  {
+    'name': 'carouselApi',
+    'description': '',
+    'type': 'Ref<EmblaCarouselType | undefined>'
+  },
+  {
+    'name': 'canScrollPrev',
+    'description': '',
+    'type': 'Ref<boolean>'
+  },
+  {
+    'name': 'canScrollNext',
+    'description': '',
+    'type': 'Ref<boolean>'
+  },
+  {
+    'name': 'scrollPrev',
+    'description': '',
+    'type': ''
+  },
+  {
+    'name': 'scrollNext',
+    'description': '',
+    'type': ''
+  },
+  {
+    'name': 'orientation',
+    'description': '',
+    'type': '\'vertical\' | \'horizontal\' | undefined'
+  }
+]" />
+
+<MethodsTable :data="[
+  {
+    'name': 'scrollPrev',
+    'description': '',
+    'type': '() => void'
+  },
+  {
+    'name': 'scrollNext',
+    'description': '',
+    'type': '() => void'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CarouselContent.md b/apps/docs/src/content/meta/CarouselContent.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CarouselContent.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CarouselItem.md b/apps/docs/src/content/meta/CarouselItem.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CarouselItem.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CarouselNext.md b/apps/docs/src/content/meta/CarouselNext.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CarouselNext.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CarouselPrevious.md b/apps/docs/src/content/meta/CarouselPrevious.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CarouselPrevious.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CheckIcon.md b/apps/docs/src/content/meta/CheckIcon.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckIcon.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/Checkbox.md b/apps/docs/src/content/meta/Checkbox.md
new file mode 100644
index 0000000..5162f20
--- /dev/null
+++ b/apps/docs/src/content/meta/Checkbox.md
@@ -0,0 +1,91 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled checked state of the checkbox. Can be binded with v-model.</p>\n',
+    'type': 'boolean | \'indeterminate\'',
+    'required': false
+  },
+  {
+    'name': 'defaultChecked',
+    'description': '<p>The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the checkbox</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>Id of the element</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the checkbox. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the checkbox before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CheckboxGroup.md b/apps/docs/src/content/meta/CheckboxGroup.md
new file mode 100644
index 0000000..de6d763
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckboxGroup.md
@@ -0,0 +1,73 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CheckboxGroupItem.md b/apps/docs/src/content/meta/CheckboxGroupItem.md
new file mode 100644
index 0000000..0155d4e
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckboxGroupItem.md
@@ -0,0 +1,83 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled checked state of the checkbox. Can be binded with v-model.</p>\n',
+    'type': 'boolean | \'indeterminate\'',
+    'required': false
+  },
+  {
+    'name': 'defaultChecked',
+    'description': '<p>The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the checkbox</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>Id of the element</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'isIndeterminate',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the checkbox. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the checkbox before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CheckboxIndeterminate.md b/apps/docs/src/content/meta/CheckboxIndeterminate.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckboxIndeterminate.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CheckboxRoot.md b/apps/docs/src/content/meta/CheckboxRoot.md
new file mode 100644
index 0000000..5f28e26
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckboxRoot.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'asChild',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CheckedBoxIcon.md b/apps/docs/src/content/meta/CheckedBoxIcon.md
new file mode 100644
index 0000000..ea51580
--- /dev/null
+++ b/apps/docs/src/content/meta/CheckedBoxIcon.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'isDisabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CircleIcon.md b/apps/docs/src/content/meta/CircleIcon.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CircleIcon.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/CloseIcon.md b/apps/docs/src/content/meta/CloseIcon.md
new file mode 100644
index 0000000..0ee2b8f
--- /dev/null
+++ b/apps/docs/src/content/meta/CloseIcon.md
@@ -0,0 +1,22 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Collapsible.md b/apps/docs/src/content/meta/Collapsible.md
new file mode 100644
index 0000000..4f5e8e2
--- /dev/null
+++ b/apps/docs/src/content/meta/Collapsible.md
@@ -0,0 +1,51 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the collapsible when it is initially rendered. &lt;br&gt; Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the collapsible.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the collapsible. Can be binded with <code>v-model</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '',
+    'type': 'boolean'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CollapsibleContent.md b/apps/docs/src/content/meta/CollapsibleContent.md
new file mode 100644
index 0000000..cac73e3
--- /dev/null
+++ b/apps/docs/src/content/meta/CollapsibleContent.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CollapsibleTrigger.md b/apps/docs/src/content/meta/CollapsibleTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/CollapsibleTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Command.md b/apps/docs/src/content/meta/Command.md
new file mode 100644
index 0000000..f481f91
--- /dev/null
+++ b/apps/docs/src/content/meta/Command.md
@@ -0,0 +1,103 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the combobox when it is initially rendered. &lt;br&gt; Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the combobox when initially rendered. Use when you do not need to control the state of the Combobox</p>\n',
+    'type': 'AcceptableValue | AcceptableValue[]',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with Combobox</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'displayValue',
+    'description': '<p>The display value of input for selected item. Does not work with <code>multiple</code>.</p>\n',
+    'type': '((val: AcceptableValue) => string)',
+    'required': false
+  },
+  {
+    'name': 'filterFunction',
+    'description': '<p>The custom filter function for filtering <code>ComboboxItem</code>.</p>\n',
+    'type': '((val: string[] | number[] | false[] | true[] | Record<string, any>[], term: string) => string[] | number[] | false[] | true[] | Record<string, any>[])',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the Combobox. Can be binded-with with <code>v-model</code>.</p>\n',
+    'type': 'AcceptableValue | AcceptableValue[]',
+    'required': false,
+    'default': '\'\''
+  },
+  {
+    'name': 'multiple',
+    'description': '<p>Whether multiple options can be selected or not.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the Combobox. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the Combobox. Can be binded-with with <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'searchTerm',
+    'description': '<p>The controlled search term of the Combobox. Can be binded-with with v-model:searchTerm.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: AcceptableValue]'
+  },
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  },
+  {
+    'name': 'update:searchTerm',
+    'description': '',
+    'type': '[value: string]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandDialog.md b/apps/docs/src/content/meta/CommandDialog.md
new file mode 100644
index 0000000..2788fbb
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandDialog.md
@@ -0,0 +1,30 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the dialog When set to <code>true</code>, &lt;br&gt;\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandEmpty.md b/apps/docs/src/content/meta/CommandEmpty.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandEmpty.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandGroup.md b/apps/docs/src/content/meta/CommandGroup.md
new file mode 100644
index 0000000..d7b09c4
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandGroup.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'heading',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandInput.md b/apps/docs/src/content/meta/CommandInput.md
new file mode 100644
index 0000000..8f422b1
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandInput.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'autoFocus',
+    'description': '<p>Focus on element when mounted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with item</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '<p>Nactive input type</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandItem.md b/apps/docs/src/content/meta/CommandItem.md
new file mode 100644
index 0000000..1d063f8
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandItem.md
@@ -0,0 +1,37 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'AcceptableValue',
+    'required': true
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: SelectEvent<AcceptableValue>]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandList.md b/apps/docs/src/content/meta/CommandList.md
new file mode 100644
index 0000000..fcbce12
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandList.md
@@ -0,0 +1,143 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'bodyLock',
+    'description': '<p>The document.body will be lock, and scrolling will be disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'dismissable',
+    'description': '<p>(alpha) Allow component to be dismissableLayer.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'position',
+    'description': '<p>The positioning mode to use, &lt;br&gt;\n<code>inline</code> is the default and you can control the position using CSS. &lt;br&gt;\n<code>popper</code> positions content in the same way as our other primitives, for example <code>Popover</code> or <code>DropdownMenu</code>.</p>\n',
+    'type': '\'inline\' | \'popper\'',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandSeparator.md b/apps/docs/src/content/meta/CommandSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/CommandShortcut.md b/apps/docs/src/content/meta/CommandShortcut.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/CommandShortcut.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/ContextMenu.md b/apps/docs/src/content/meta/ContextMenu.md
new file mode 100644
index 0000000..4446888
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenu.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable.</p>\n<p>If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the dropdown menu.</p>\n<p>When set to <code>true</code>, interaction with outside elements will be disabled and only menu content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuCheckboxItem.md b/apps/docs/src/content/meta/ContextMenuCheckboxItem.md
new file mode 100644
index 0000000..eb1f70c
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuCheckboxItem.md
@@ -0,0 +1,48 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled checked state of the item. Can be used as <code>v-model:checked</code>.</p>\n',
+    'type': 'false | true | \'indeterminate\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuContent.md b/apps/docs/src/content/meta/ContextMenuContent.md
new file mode 100644
index 0000000..b7603f8
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuContent.md
@@ -0,0 +1,99 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuGroup.md b/apps/docs/src/content/meta/ContextMenuGroup.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuGroup.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuItem.md b/apps/docs/src/content/meta/ContextMenuItem.md
new file mode 100644
index 0000000..13c553d
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuItem.md
@@ -0,0 +1,43 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuLabel.md b/apps/docs/src/content/meta/ContextMenuLabel.md
new file mode 100644
index 0000000..ce12199
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuLabel.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuPortal.md b/apps/docs/src/content/meta/ContextMenuPortal.md
new file mode 100644
index 0000000..b645bee
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuPortal.md
@@ -0,0 +1,22 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '<p>Disable teleport and render the component inline</p>\n<p><a href=\'https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport\' target=\'_blank\'>reference</a></p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'to',
+    'description': '<p>Vue native teleport component prop <code>:to</code></p>\n<p><a href=\'https://vuejs.org/guide/built-ins/teleport.html#basic-usage\' target=\'_blank\'>reference</a></p>\n',
+    'type': 'string | HTMLElement',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuRadioGroup.md b/apps/docs/src/content/meta/ContextMenuRadioGroup.md
new file mode 100644
index 0000000..e755804
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuRadioGroup.md
@@ -0,0 +1,31 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The value of the selected item in the group.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuRadioItem.md b/apps/docs/src/content/meta/ContextMenuRadioItem.md
new file mode 100644
index 0000000..e70f85d
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuRadioItem.md
@@ -0,0 +1,43 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The unique value of the item.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuSeparator.md b/apps/docs/src/content/meta/ContextMenuSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuShortcut.md b/apps/docs/src/content/meta/ContextMenuShortcut.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuShortcut.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/ContextMenuSub.md b/apps/docs/src/content/meta/ContextMenuSub.md
new file mode 100644
index 0000000..fe7d64b
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuSub.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the menu. Can be used as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuSubContent.md b/apps/docs/src/content/meta/ContextMenuSubContent.md
new file mode 100644
index 0000000..26da6ae
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuSubContent.md
@@ -0,0 +1,127 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'entryFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuSubTrigger.md b/apps/docs/src/content/meta/ContextMenuSubTrigger.md
new file mode 100644
index 0000000..8032c90
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuSubTrigger.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ContextMenuTrigger.md b/apps/docs/src/content/meta/ContextMenuTrigger.md
new file mode 100644
index 0000000..ac4c21b
--- /dev/null
+++ b/apps/docs/src/content/meta/ContextMenuTrigger.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, the context menu would not open when right-clicking.</p>\n<p>Note that this will also restore the native context menu.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Dialog.md b/apps/docs/src/content/meta/Dialog.md
new file mode 100644
index 0000000..2788fbb
--- /dev/null
+++ b/apps/docs/src/content/meta/Dialog.md
@@ -0,0 +1,30 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the dialog When set to <code>true</code>, &lt;br&gt;\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogClose.md b/apps/docs/src/content/meta/DialogClose.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogClose.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogContent.md b/apps/docs/src/content/meta/DialogContent.md
new file mode 100644
index 0000000..def03aa
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogContent.md
@@ -0,0 +1,68 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>When <code>true</code>, focus cannot escape the <code>Content</code> via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogDescription.md b/apps/docs/src/content/meta/DialogDescription.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogDescription.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogFooter.md b/apps/docs/src/content/meta/DialogFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/DialogHeader.md b/apps/docs/src/content/meta/DialogHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/DialogScrollContent.md b/apps/docs/src/content/meta/DialogScrollContent.md
new file mode 100644
index 0000000..def03aa
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogScrollContent.md
@@ -0,0 +1,68 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>When <code>true</code>, focus cannot escape the <code>Content</code> via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogTitle.md b/apps/docs/src/content/meta/DialogTitle.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogTitle.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DialogTrigger.md b/apps/docs/src/content/meta/DialogTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DialogTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Dots.md b/apps/docs/src/content/meta/Dots.md
new file mode 100644
index 0000000..301acf4
--- /dev/null
+++ b/apps/docs/src/content/meta/Dots.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'xxl\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Drawer.md b/apps/docs/src/content/meta/Drawer.md
new file mode 100644
index 0000000..39adceb
--- /dev/null
+++ b/apps/docs/src/content/meta/Drawer.md
@@ -0,0 +1,105 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'activeSnapPoint',
+    'description': '',
+    'type': 'string | number | null',
+    'required': false
+  },
+  {
+    'name': 'closeThreshold',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'dismissible',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'fadeFromIndex',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'fixed',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'nested',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'scrollLockTimeout',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'shouldScaleBackground',
+    'description': '',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'snapPoints',
+    'description': '',
+    'type': '(string | number)[]',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'close',
+    'description': '',
+    'type': '[]'
+  },
+  {
+    'name': 'drag',
+    'description': '',
+    'type': '[percentageDragged: number]'
+  },
+  {
+    'name': 'release',
+    'description': '',
+    'type': '[open: boolean]'
+  },
+  {
+    'name': 'update:activeSnapPoint',
+    'description': '',
+    'type': '[val: string | number]'
+  },
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[open: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DrawerContent.md b/apps/docs/src/content/meta/DrawerContent.md
new file mode 100644
index 0000000..def03aa
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerContent.md
@@ -0,0 +1,68 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>When <code>true</code>, focus cannot escape the <code>Content</code> via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DrawerDescription.md b/apps/docs/src/content/meta/DrawerDescription.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerDescription.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DrawerFooter.md b/apps/docs/src/content/meta/DrawerFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/DrawerHeader.md b/apps/docs/src/content/meta/DrawerHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/DrawerOverlay.md b/apps/docs/src/content/meta/DrawerOverlay.md
new file mode 100644
index 0000000..cac73e3
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerOverlay.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DrawerTitle.md b/apps/docs/src/content/meta/DrawerTitle.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DrawerTitle.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenu.md b/apps/docs/src/content/meta/DropdownMenu.md
new file mode 100644
index 0000000..6d6dfec
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenu.md
@@ -0,0 +1,36 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable.</p>\n<p>If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the dropdown menu.</p>\n<p>When set to <code>true</code>, interaction with outside elements will be disabled and only menu content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the menu. Can be used as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuCheckboxItem.md b/apps/docs/src/content/meta/DropdownMenuCheckboxItem.md
new file mode 100644
index 0000000..cdae405
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuCheckboxItem.md
@@ -0,0 +1,54 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled checked state of the item. Can be used as <code>v-model:checked</code>.</p>\n',
+    'type': 'false | true | \'indeterminate\'',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuContent.md b/apps/docs/src/content/meta/DropdownMenuContent.md
new file mode 100644
index 0000000..cb6fb8e
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuContent.md
@@ -0,0 +1,132 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false,
+    'default': '\'start\''
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuGroup.md b/apps/docs/src/content/meta/DropdownMenuGroup.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuGroup.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuItem.md b/apps/docs/src/content/meta/DropdownMenuItem.md
new file mode 100644
index 0000000..b7c3306
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuItem.md
@@ -0,0 +1,41 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuLabel.md b/apps/docs/src/content/meta/DropdownMenuLabel.md
new file mode 100644
index 0000000..ce12199
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuLabel.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuRadioGroup.md b/apps/docs/src/content/meta/DropdownMenuRadioGroup.md
new file mode 100644
index 0000000..e755804
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuRadioGroup.md
@@ -0,0 +1,31 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The value of the selected item in the group.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuRadioItem.md b/apps/docs/src/content/meta/DropdownMenuRadioItem.md
new file mode 100644
index 0000000..c415229
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuRadioItem.md
@@ -0,0 +1,49 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The unique value of the item.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuSeparator.md b/apps/docs/src/content/meta/DropdownMenuSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuShortcut.md b/apps/docs/src/content/meta/DropdownMenuShortcut.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuShortcut.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/DropdownMenuSub.md b/apps/docs/src/content/meta/DropdownMenuSub.md
new file mode 100644
index 0000000..dabb406
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuSub.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the menu. Can be used as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuSubContent.md b/apps/docs/src/content/meta/DropdownMenuSubContent.md
new file mode 100644
index 0000000..ed2d9fd
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuSubContent.md
@@ -0,0 +1,136 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '-9'
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | (Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>> & number)',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '-4'
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'entryFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuSubTrigger.md b/apps/docs/src/content/meta/DropdownMenuSubTrigger.md
new file mode 100644
index 0000000..bf24af7
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuSubTrigger.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/DropdownMenuTrigger.md b/apps/docs/src/content/meta/DropdownMenuTrigger.md
new file mode 100644
index 0000000..6816710
--- /dev/null
+++ b/apps/docs/src/content/meta/DropdownMenuTrigger.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with item</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/EmptyCheckboxIcon.md b/apps/docs/src/content/meta/EmptyCheckboxIcon.md
new file mode 100644
index 0000000..ea51580
--- /dev/null
+++ b/apps/docs/src/content/meta/EmptyCheckboxIcon.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'isDisabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/FormControl.md b/apps/docs/src/content/meta/FormControl.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/FormControl.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/FormDescription.md b/apps/docs/src/content/meta/FormDescription.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/FormDescription.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/FormItem.md b/apps/docs/src/content/meta/FormItem.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/FormItem.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/FormLabel.md b/apps/docs/src/content/meta/FormLabel.md
new file mode 100644
index 0000000..c11c317
--- /dev/null
+++ b/apps/docs/src/content/meta/FormLabel.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/FormMessage.md b/apps/docs/src/content/meta/FormMessage.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/FormMessage.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/HoverCard.md b/apps/docs/src/content/meta/HoverCard.md
new file mode 100644
index 0000000..d939e0c
--- /dev/null
+++ b/apps/docs/src/content/meta/HoverCard.md
@@ -0,0 +1,36 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'closeDelay',
+    'description': '<p>The duration from when the mouse leaves the trigger or content until the hover card closes.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the hover card when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'false',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the hover card. Can be binded as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'openDelay',
+    'description': '<p>The duration from when the mouse enters the trigger until the hover card opens.</p>\n',
+    'type': 'number',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/HoverCardContent.md b/apps/docs/src/content/meta/HoverCardContent.md
new file mode 100644
index 0000000..bc6fefa
--- /dev/null
+++ b/apps/docs/src/content/meta/HoverCardContent.md
@@ -0,0 +1,96 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '4'
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/HoverCardTrigger.md b/apps/docs/src/content/meta/HoverCardTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/HoverCardTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/InfoIcon.md b/apps/docs/src/content/meta/InfoIcon.md
new file mode 100644
index 0000000..db1037e
--- /dev/null
+++ b/apps/docs/src/content/meta/InfoIcon.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': 'number',
+    'required': false,
+    'default': '24'
+  },
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Input.md b/apps/docs/src/content/meta/Input.md
new file mode 100644
index 0000000..9dd5960
--- /dev/null
+++ b/apps/docs/src/content/meta/Input.md
@@ -0,0 +1,91 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '',
+    'type': 'any',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[modelValue: any]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Kbd.md b/apps/docs/src/content/meta/Kbd.md
new file mode 100644
index 0000000..0ecd5a8
--- /dev/null
+++ b/apps/docs/src/content/meta/Kbd.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'keys',
+    'description': '',
+    'type': 'KbdKey | KbdKey[]',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xs\' | \'sm\' | \'md\' | \'lg\' | null',
+    'required': false,
+    'default': '\'xs\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Key.md b/apps/docs/src/content/meta/Key.md
new file mode 100644
index 0000000..90dad6f
--- /dev/null
+++ b/apps/docs/src/content/meta/Key.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'keyName',
+    'description': '',
+    'type': 'null | \'shift\' | \'delete\' | \'right\' | \'left\' | \'end\' | \'command\' | \'ctrl\' | \'option\' | \'enter\' | \'escape\' | \'tab\' | \'capslock\' | \'up\' | \'down\' | \'pageup\' | \'pagedown\' | \'home\' | \'help\' | \'space\'',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Label.md b/apps/docs/src/content/meta/Label.md
new file mode 100644
index 0000000..9c3c3ee
--- /dev/null
+++ b/apps/docs/src/content/meta/Label.md
@@ -0,0 +1,47 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '<p>Additional description text, shown next to the primary label</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Indicates if the label is associated with a disabled field</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>Indicates if the label is associated with a required field</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip text to display when hovering over the label</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/LabelHelper.md b/apps/docs/src/content/meta/LabelHelper.md
new file mode 100644
index 0000000..a985ea5
--- /dev/null
+++ b/apps/docs/src/content/meta/LabelHelper.md
@@ -0,0 +1,16 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'error',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/LemonSqueezyIcon.md b/apps/docs/src/content/meta/LemonSqueezyIcon.md
new file mode 100644
index 0000000..4122b7e
--- /dev/null
+++ b/apps/docs/src/content/meta/LemonSqueezyIcon.md
@@ -0,0 +1,16 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'size',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Line.md b/apps/docs/src/content/meta/Line.md
new file mode 100644
index 0000000..1d439d0
--- /dev/null
+++ b/apps/docs/src/content/meta/Line.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'xxl\' | null',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Loading.md b/apps/docs/src/content/meta/Loading.md
new file mode 100644
index 0000000..8671493
--- /dev/null
+++ b/apps/docs/src/content/meta/Loading.md
@@ -0,0 +1,25 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': '\'primary\' | \'secondary\' | null',
+    'required': false,
+    'default': '\'primary\''
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'xxl\' | null',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'type',
+    'description': '',
+    'type': '\'line\' | \'spinner\' | \'dots\' | null',
+    'required': false,
+    'default': '\'line\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Menubar.md b/apps/docs/src/content/meta/Menubar.md
new file mode 100644
index 0000000..274bec5
--- /dev/null
+++ b/apps/docs/src/content/meta/Menubar.md
@@ -0,0 +1,36 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the menu that should be open when initially rendered. Use when you do not need to control the value state.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable.</p>\n<p>If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the menu to open. Can be used as <code>v-model</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarCheckboxItem.md b/apps/docs/src/content/meta/MenubarCheckboxItem.md
new file mode 100644
index 0000000..eb1f70c
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarCheckboxItem.md
@@ -0,0 +1,48 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled checked state of the item. Can be used as <code>v-model:checked</code>.</p>\n',
+    'type': 'false | true | \'indeterminate\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarContent.md b/apps/docs/src/content/meta/MenubarContent.md
new file mode 100644
index 0000000..1799835
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarContent.md
@@ -0,0 +1,104 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false,
+    'default': '\'start\''
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '-4'
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarGroup.md b/apps/docs/src/content/meta/MenubarGroup.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarGroup.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarItem.md b/apps/docs/src/content/meta/MenubarItem.md
new file mode 100644
index 0000000..13c553d
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarItem.md
@@ -0,0 +1,43 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarLabel.md b/apps/docs/src/content/meta/MenubarLabel.md
new file mode 100644
index 0000000..ce12199
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarLabel.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarMenu.md b/apps/docs/src/content/meta/MenubarMenu.md
new file mode 100644
index 0000000..8b7c1d7
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarMenu.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'value',
+    'description': '<p>A unique value that associates the item with an active value when the navigation menu is controlled.</p>\n<p>This prop is managed automatically when uncontrolled.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarRadioGroup.md b/apps/docs/src/content/meta/MenubarRadioGroup.md
new file mode 100644
index 0000000..e755804
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarRadioGroup.md
@@ -0,0 +1,31 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The value of the selected item in the group.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarRadioItem.md b/apps/docs/src/content/meta/MenubarRadioItem.md
new file mode 100644
index 0000000..e70f85d
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarRadioItem.md
@@ -0,0 +1,43 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The unique value of the item.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarSeparator.md b/apps/docs/src/content/meta/MenubarSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarShortcut.md b/apps/docs/src/content/meta/MenubarShortcut.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarShortcut.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/MenubarSub.md b/apps/docs/src/content/meta/MenubarSub.md
new file mode 100644
index 0000000..e26969c
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarSub.md
@@ -0,0 +1,24 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarSubContent.md b/apps/docs/src/content/meta/MenubarSubContent.md
new file mode 100644
index 0000000..26da6ae
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarSubContent.md
@@ -0,0 +1,127 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'entryFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarSubTrigger.md b/apps/docs/src/content/meta/MenubarSubTrigger.md
new file mode 100644
index 0000000..8032c90
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarSubTrigger.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'inset',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes. By default the typeahead behavior will use the <code>.textContent</code> of the item. &lt;br&gt;\nUse this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/MenubarTrigger.md b/apps/docs/src/content/meta/MenubarTrigger.md
new file mode 100644
index 0000000..6816710
--- /dev/null
+++ b/apps/docs/src/content/meta/MenubarTrigger.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with item</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenu.md b/apps/docs/src/content/meta/NavigationMenu.md
new file mode 100644
index 0000000..e89ad12
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenu.md
@@ -0,0 +1,73 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the menu item that should be active when initially rendered.</p>\n<p>Use when you do not need to control the value state.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'delayDuration',
+    'description': '<p>The duration from when the pointer enters the trigger until the tooltip gets opened.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable.</p>\n<p>If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disableClickTrigger',
+    'description': '<p>If <code>true</code>, menu cannot be open by click on trigger</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableHoverTrigger',
+    'description': '<p>If <code>true</code>, menu cannot be open by hover on trigger</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the menu item to activate. Can be used as <code>v-model</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the menu.</p>\n',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': false
+  },
+  {
+    'name': 'skipDelayDuration',
+    'description': '<p>How much time a user has to enter another trigger without incurring a delay again.</p>\n',
+    'type': 'number',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: string]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuContent.md b/apps/docs/src/content/meta/NavigationMenuContent.md
new file mode 100644
index 0000000..7365805
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuContent.md
@@ -0,0 +1,52 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuIndicator.md b/apps/docs/src/content/meta/NavigationMenuIndicator.md
new file mode 100644
index 0000000..cac73e3
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuIndicator.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuItem.md b/apps/docs/src/content/meta/NavigationMenuItem.md
new file mode 100644
index 0000000..e525b98
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuItem.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>A unique value that associates the item with an active value when the navigation menu is controlled.</p>\n<p>This prop is managed automatically when uncontrolled.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuLink.md b/apps/docs/src/content/meta/NavigationMenuLink.md
new file mode 100644
index 0000000..e9ed03e
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuLink.md
@@ -0,0 +1,31 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'active',
+    'description': '<p>Used to identify the link as the currently active page.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'select',
+    'description': '',
+    'type': '[payload: MouseEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuList.md b/apps/docs/src/content/meta/NavigationMenuList.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuList.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuTrigger.md b/apps/docs/src/content/meta/NavigationMenuTrigger.md
new file mode 100644
index 0000000..6816710
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuTrigger.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with item</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/NavigationMenuViewport.md b/apps/docs/src/content/meta/NavigationMenuViewport.md
new file mode 100644
index 0000000..cac73e3
--- /dev/null
+++ b/apps/docs/src/content/meta/NavigationMenuViewport.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PaginationEllipsis.md b/apps/docs/src/content/meta/PaginationEllipsis.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/PaginationEllipsis.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PaginationFirst.md b/apps/docs/src/content/meta/PaginationFirst.md
new file mode 100644
index 0000000..fe0d1da
--- /dev/null
+++ b/apps/docs/src/content/meta/PaginationFirst.md
@@ -0,0 +1,18 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PaginationLast.md b/apps/docs/src/content/meta/PaginationLast.md
new file mode 100644
index 0000000..fe0d1da
--- /dev/null
+++ b/apps/docs/src/content/meta/PaginationLast.md
@@ -0,0 +1,18 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PaginationNext.md b/apps/docs/src/content/meta/PaginationNext.md
new file mode 100644
index 0000000..fe0d1da
--- /dev/null
+++ b/apps/docs/src/content/meta/PaginationNext.md
@@ -0,0 +1,18 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PaginationPrev.md b/apps/docs/src/content/meta/PaginationPrev.md
new file mode 100644
index 0000000..fe0d1da
--- /dev/null
+++ b/apps/docs/src/content/meta/PaginationPrev.md
@@ -0,0 +1,18 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PinInput.md b/apps/docs/src/content/meta/PinInput.md
new file mode 100644
index 0000000..166f42d
--- /dev/null
+++ b/apps/docs/src/content/meta/PinInput.md
@@ -0,0 +1,96 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the pin input</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>Id of the element</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'mask',
+    'description': '<p>When <code>true</code>, pin inputs will be treated as password.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled checked state of the pin input. Can be binded as <code>v-model</code>.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the pin input. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'otp',
+    'description': '<p>When <code>true</code>, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'placeholder',
+    'description': '<p>The placeholder character to use for empty pin-inputs.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the pin input before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '<p>Input type for the inputs.</p>\n',
+    'type': '\'number\' | \'text\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'complete',
+    'description': '',
+    'type': '[value: string[]]'
+  },
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: string[]]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PinInputGroup.md b/apps/docs/src/content/meta/PinInputGroup.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/PinInputGroup.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PinInputInput.md b/apps/docs/src/content/meta/PinInputInput.md
new file mode 100644
index 0000000..253cc04
--- /dev/null
+++ b/apps/docs/src/content/meta/PinInputInput.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the pin input</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'index',
+    'description': '<p>Position of the value this input binds to.</p>\n',
+    'type': 'number',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PinInputSeparator.md b/apps/docs/src/content/meta/PinInputSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/PinInputSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Popover.md b/apps/docs/src/content/meta/Popover.md
new file mode 100644
index 0000000..162bd26
--- /dev/null
+++ b/apps/docs/src/content/meta/Popover.md
@@ -0,0 +1,30 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the popover when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the popover.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PopoverContent.md b/apps/docs/src/content/meta/PopoverContent.md
new file mode 100644
index 0000000..f97dd27
--- /dev/null
+++ b/apps/docs/src/content/meta/PopoverContent.md
@@ -0,0 +1,143 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false,
+    'default': '\'center\''
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>Whether focus should be trapped within the <code>MenuContent</code></p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/PopoverTrigger.md b/apps/docs/src/content/meta/PopoverTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/PopoverTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Progress.md b/apps/docs/src/content/meta/Progress.md
new file mode 100644
index 0000000..d5cee72
--- /dev/null
+++ b/apps/docs/src/content/meta/Progress.md
@@ -0,0 +1,36 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'getValueLabel',
+    'description': '<p>A function to get the accessible label text representing the current value in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
+    'type': '((value: number, max: number) => string)',
+    'required': false
+  },
+  {
+    'name': 'max',
+    'description': '<p>The maximum progress value.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The progress value. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'number | null',
+    'required': false,
+    'default': '0'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ProgressBar.md b/apps/docs/src/content/meta/ProgressBar.md
new file mode 100644
index 0000000..7da6d74
--- /dev/null
+++ b/apps/docs/src/content/meta/ProgressBar.md
@@ -0,0 +1,91 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'afterIndicator',
+    'description': '<p>The slot to be rendered after the indicator.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'color',
+    'description': '',
+    'type': '\'primary\' | \'green\' | \'yellow\' | \'red\' | \'purple\' | \'orange\' | \'pink\' | \'blue\' | \'secondary\' | null',
+    'required': false,
+    'default': '\'primary\''
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disableAnimation',
+    'description': '<p>If <code>true</code>, the progress bar CSS transition will be disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'getValueLabel',
+    'description': '<p>A function to get the accessible label text representing the current value in a human-readable format.</p>\n<p>If not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
+    'type': '((value: number, max: number) => string)',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'indicator',
+    'description': '<p>The indicator to be rendered to the right of the progress bar.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'max',
+    'description': '<p>The maximum progress value.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '100'
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The progress value.</p>\n',
+    'type': 'number | null',
+    'required': false
+  },
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'default\' | \'inline\' | null',
+    'required': false,
+    'default': '\'default\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ProgressBarWrapper.md b/apps/docs/src/content/meta/ProgressBarWrapper.md
new file mode 100644
index 0000000..b438882
--- /dev/null
+++ b/apps/docs/src/content/meta/ProgressBarWrapper.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'default\' | \'inline\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ProgressCircle.md b/apps/docs/src/content/meta/ProgressCircle.md
new file mode 100644
index 0000000..0e98b21
--- /dev/null
+++ b/apps/docs/src/content/meta/ProgressCircle.md
@@ -0,0 +1,50 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '<p>The color of the progress circle.</p>\n',
+    'type': '\'primary\' | \'green\' | \'yellow\' | \'red\' | \'purple\' | \'orange\' | \'pink\' | \'blue\' | \'secondary\'',
+    'required': false,
+    'default': '\'primary\''
+  },
+  {
+    'name': 'disableAnimation',
+    'description': '<p>If <code>true</code>, the progress bar CSS transition will be disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>If <code>true</code>, the additional styles will be applied to indicate that the progress bar is disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'getLabelValue',
+    'description': '<p>A function to get the accessible label text representing the current value in a human-readable format.\nIf not provided, the value label will be read as the numeric value as a percentage of the max value.</p>\n',
+    'type': '((value: number, max: number) => string)',
+    'required': false
+  },
+  {
+    'name': 'max',
+    'description': '<p>The maximum progress value.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '100'
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the progress circle.</p>\n',
+    'type': '\'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\'',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'value',
+    'description': '<p>The progress value.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '0'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/RadioGroup.md b/apps/docs/src/content/meta/RadioGroup.md
new file mode 100644
index 0000000..f4e4e34
--- /dev/null
+++ b/apps/docs/src/content/meta/RadioGroup.md
@@ -0,0 +1,115 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'boolean',
+    'required': true
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the radio item that should be checked when initially rendered.</p>\n<p>Use when you do not need to control the state of the radio items.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with radio items.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the radio item to check. Can be binded as <code>v-model</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the group. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the component.</p>\n',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check a radio item before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: string]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/RadioGroupItem.md b/apps/docs/src/content/meta/RadioGroupItem.md
new file mode 100644
index 0000000..468c042
--- /dev/null
+++ b/apps/docs/src/content/meta/RadioGroupItem.md
@@ -0,0 +1,65 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'boolean',
+    'required': true
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the radio item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the radio item before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ResizableHandle.md b/apps/docs/src/content/meta/ResizableHandle.md
new file mode 100644
index 0000000..d8d6591
--- /dev/null
+++ b/apps/docs/src/content/meta/ResizableHandle.md
@@ -0,0 +1,55 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Disable drag handle</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hitAreaMargins',
+    'description': '<p>Allow this much margin when determining resizable handle hit detection</p>\n',
+    'type': 'PointerHitAreaMargins',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>Resize handle id (unique within group); falls back to <code>useId</code> when not provided</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'tabindex',
+    'description': '<p>Tabindex for the handle</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'withHandle',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'dragging',
+    'description': '',
+    'type': '[isDragging: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ResizablePanelGroup.md b/apps/docs/src/content/meta/ResizablePanelGroup.md
new file mode 100644
index 0000000..2f742cf
--- /dev/null
+++ b/apps/docs/src/content/meta/ResizablePanelGroup.md
@@ -0,0 +1,55 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'autoSaveId',
+    'description': '<p>Unique id used to auto-save group arrangement via <code>localStorage</code>.</p>\n',
+    'type': 'string | null',
+    'required': false
+  },
+  {
+    'name': 'direction',
+    'description': '<p>The group orientation of splitter.</p>\n',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': true
+  },
+  {
+    'name': 'id',
+    'description': '<p>Group id; falls back to <code>useId</code> when not provided.</p>\n',
+    'type': 'string | null',
+    'required': false
+  },
+  {
+    'name': 'keyboardResizeBy',
+    'description': '<p>Step size when arrow key was pressed.</p>\n',
+    'type': 'number | null',
+    'required': false
+  },
+  {
+    'name': 'storage',
+    'description': '<p>Custom storage API; defaults to localStorage</p>\n',
+    'type': 'PanelGroupStorage',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'layout',
+    'description': '',
+    'type': '[val: number[]]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ScrollArea.md b/apps/docs/src/content/meta/ScrollArea.md
new file mode 100644
index 0000000..f584550
--- /dev/null
+++ b/apps/docs/src/content/meta/ScrollArea.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'scrollHideDelay',
+    'description': '<p>If type is set to either <code>scroll</code> or <code>hover</code>, this prop determines the length of time, in milliseconds, &lt;br&gt; before the scrollbars are hidden after the user stops interacting with scrollbars.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'type',
+    'description': '<p>Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars.</p>\n<p><code>auto</code> - means that scrollbars are visible when content is overflowing on the corresponding orientation. &lt;br&gt;\n<code>always</code> - means that scrollbars are always visible regardless of whether the content is overflowing.&lt;br&gt;\n<code>scroll</code> - means that scrollbars are visible when the user is scrolling along its corresponding orientation.&lt;br&gt;\n<code>hover</code> - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.</p>\n',
+    'type': '\'always\' | \'auto\' | \'scroll\' | \'hover\'',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ScrollBar.md b/apps/docs/src/content/meta/ScrollBar.md
new file mode 100644
index 0000000..4f7d2c3
--- /dev/null
+++ b/apps/docs/src/content/meta/ScrollBar.md
@@ -0,0 +1,30 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the scrollbar</p>\n',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': false,
+    'default': '\'vertical\''
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Select.md b/apps/docs/src/content/meta/Select.md
new file mode 100644
index 0000000..544a2f7
--- /dev/null
+++ b/apps/docs/src/content/meta/Select.md
@@ -0,0 +1,71 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'autocomplete',
+    'description': '<p>Native html input <code>autocomplete</code> attribute.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the select when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the select when initially rendered. Use when you do not need to control the state of the Select</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with Select</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the Select. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the Select. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the Select. Can be bind as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must select a value before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[value: string]'
+  },
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectContent.md b/apps/docs/src/content/meta/SelectContent.md
new file mode 100644
index 0000000..9829088
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectContent.md
@@ -0,0 +1,120 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'position',
+    'description': '<p>The positioning mode to use</p>\n<p><code>item-aligned (default)</code> - behaves similarly to a native MacOS menu by positioning content relative to the active item. &lt;br&gt;\n<code>popper</code> - positions content in the same way as our other primitives, for example <code>Popover</code> or <code>DropdownMenu</code>.</p>\n',
+    'type': '\'popper\' | \'item-aligned\'',
+    'required': false,
+    'default': '\'popper\''
+  },
+  {
+    'name': 'prioritizePosition',
+    'description': '<p>Force content to be position within the viewport.</p>\n<p>Might overlap the reference element, which may not be desired.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  },
+  {
+    'name': 'updatePositionStrategy',
+    'description': '<p>Strategy to update the position of the floating element on every animation frame.</p>\n',
+    'type': '\'always\' | \'optimized\'',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectGroup.md b/apps/docs/src/content/meta/SelectGroup.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectGroup.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectItem.md b/apps/docs/src/content/meta/SelectItem.md
new file mode 100644
index 0000000..b57165c
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectItem.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the item.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'textValue',
+    'description': '<p>Optional text used for typeahead purposes.</p>\n<p>By default the typeahead behavior will use the <code>.textContent</code> of the <code>SelectItemText</code> part.</p>\n<p>Use this when the content is complex, or you have non-textual content inside.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectItemText.md b/apps/docs/src/content/meta/SelectItemText.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectItemText.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectLabel.md b/apps/docs/src/content/meta/SelectLabel.md
new file mode 100644
index 0000000..bd3ab8a
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectLabel.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectScrollDownButton.md b/apps/docs/src/content/meta/SelectScrollDownButton.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectScrollDownButton.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectScrollUpButton.md b/apps/docs/src/content/meta/SelectScrollUpButton.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectScrollUpButton.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectSeparator.md b/apps/docs/src/content/meta/SelectSeparator.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectSeparator.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectTrigger.md b/apps/docs/src/content/meta/SelectTrigger.md
new file mode 100644
index 0000000..cf64470
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectTrigger.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SelectValue.md b/apps/docs/src/content/meta/SelectValue.md
new file mode 100644
index 0000000..6a279dc
--- /dev/null
+++ b/apps/docs/src/content/meta/SelectValue.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'placeholder',
+    'description': '<p>The content that will be rendered inside the <code>SelectValue</code> when no <code>value</code> or <code>defaultValue</code> is set.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Separator.md b/apps/docs/src/content/meta/Separator.md
new file mode 100644
index 0000000..c70a66d
--- /dev/null
+++ b/apps/docs/src/content/meta/Separator.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'decorative',
+    'description': '<p>Whether or not the component is purely decorative. &lt;br&gt;When <code>true</code>, accessibility-related attributes\nare updated so that that the rendered element is removed from the accessibility tree.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>Orientation of the component.</p>\n<p>Either <code>vertical</code> or <code>horizontal</code>. Defaults to <code>horizontal</code>.</p>\n',
+    'type': '\'vertical\' | \'horizontal\'',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Sheet.md b/apps/docs/src/content/meta/Sheet.md
new file mode 100644
index 0000000..2788fbb
--- /dev/null
+++ b/apps/docs/src/content/meta/Sheet.md
@@ -0,0 +1,30 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modal',
+    'description': '<p>The modality of the dialog When set to <code>true</code>, &lt;br&gt;\ninteraction with outside elements will be disabled and only dialog content will be visible to screen readers.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the dialog. Can be binded as <code>v-model:open</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SheetClose.md b/apps/docs/src/content/meta/SheetClose.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetClose.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SheetContent.md b/apps/docs/src/content/meta/SheetContent.md
new file mode 100644
index 0000000..c49c8c4
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetContent.md
@@ -0,0 +1,74 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableOutsidePointerEvents',
+    'description': '<p>When <code>true</code>, hover/focus/click interactions will be disabled on elements outside\nthe <code>DismissableLayer</code>. Users will need to click twice on outside elements to\ninteract with them: once to close the <code>DismissableLayer</code>, and again to trigger the element.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\' | null',
+    'required': false
+  },
+  {
+    'name': 'trapFocus',
+    'description': '<p>When <code>true</code>, focus cannot escape the <code>Content</code> via keyboard,\npointer, or a programmatic focus.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'closeAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'focusOutside',
+    'description': '',
+    'type': '[event: FocusOutsideEvent]'
+  },
+  {
+    'name': 'interactOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent | FocusOutsideEvent]'
+  },
+  {
+    'name': 'openAutoFocus',
+    'description': '',
+    'type': '[event: Event]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: PointerDownOutsideEvent]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SheetDescription.md b/apps/docs/src/content/meta/SheetDescription.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetDescription.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SheetFooter.md b/apps/docs/src/content/meta/SheetFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/SheetHeader.md b/apps/docs/src/content/meta/SheetHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/SheetTitle.md b/apps/docs/src/content/meta/SheetTitle.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetTitle.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SheetTrigger.md b/apps/docs/src/content/meta/SheetTrigger.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/SheetTrigger.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Skeleton.md b/apps/docs/src/content/meta/Skeleton.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/Skeleton.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/Slider.md b/apps/docs/src/content/meta/Slider.md
new file mode 100644
index 0000000..9c18e0c
--- /dev/null
+++ b/apps/docs/src/content/meta/Slider.md
@@ -0,0 +1,150 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'after',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'before',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the slider when initially rendered. Use when you do not need to control the state of the slider.</p>\n',
+    'type': 'number[]',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the slider.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'inverted',
+    'description': '<p>Whether the slider is visually inverted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'max',
+    'description': '<p>The maximum value for the range.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'min',
+    'description': '<p>The minimum value for the range.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'minStepsBetweenThumbs',
+    'description': '<p>The minimum permitted steps between multiple thumbs.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the slider. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'number[]',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the slider.</p>\n',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false
+  },
+  {
+    'name': 'renderTooltip',
+    'description': '<p>Tooltip render function.</p>\n',
+    'type': '((value: number) => string)',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'showTooltip',
+    'description': '<p>Should tooltip be shown always, when hoverign, or never.</p>\n',
+    'type': '\'always\' | \'hover\' | \'never\'',
+    'required': false
+  },
+  {
+    'name': 'step',
+    'description': '<p>The stepping interval.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: number[]]'
+  },
+  {
+    'name': 'valueCommit',
+    'description': '',
+    'type': '[payload: number[]]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SliderThumb.md b/apps/docs/src/content/meta/SliderThumb.md
new file mode 100644
index 0000000..ba2aa68
--- /dev/null
+++ b/apps/docs/src/content/meta/SliderThumb.md
@@ -0,0 +1,42 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ariaDisabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false,
+    'default': '\'horizontal\''
+  },
+  {
+    'name': 'shouldShowTooltip',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Sonner.md b/apps/docs/src/content/meta/Sonner.md
new file mode 100644
index 0000000..02444ba
--- /dev/null
+++ b/apps/docs/src/content/meta/Sonner.md
@@ -0,0 +1,106 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'closeButton',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'cn',
+    'description': '',
+    'type': 'CnFunction',
+    'required': false
+  },
+  {
+    'name': 'containerAriaLabel',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '',
+    'type': '\'ltr\' | \'rtl\' | \'auto\'',
+    'required': false
+  },
+  {
+    'name': 'duration',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'expand',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'gap',
+    'description': '',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'hotkey',
+    'description': '',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'icons',
+    'description': '',
+    'type': 'ToastIcons',
+    'required': false
+  },
+  {
+    'name': 'invert',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'offset',
+    'description': '',
+    'type': 'string | number',
+    'required': false
+  },
+  {
+    'name': 'pauseWhenPageIsHidden',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'position',
+    'description': '',
+    'type': '\'top-left\' | \'top-right\' | \'bottom-left\' | \'bottom-right\' | \'top-center\' | \'bottom-center\'',
+    'required': false
+  },
+  {
+    'name': 'richColors',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'theme',
+    'description': '',
+    'type': '\'light\' | \'dark\' | \'system\'',
+    'required': false
+  },
+  {
+    'name': 'toastOptions',
+    'description': '',
+    'type': 'ToastOptions',
+    'required': false
+  },
+  {
+    'name': 'visibleToasts',
+    'description': '',
+    'type': 'number',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Spinner.md b/apps/docs/src/content/meta/Spinner.md
new file mode 100644
index 0000000..301acf4
--- /dev/null
+++ b/apps/docs/src/content/meta/Spinner.md
@@ -0,0 +1,10 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'xxs\' | \'xs\' | \'sm\' | \'md\' | \'lg\' | \'xl\' | \'xxl\' | null',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Switch.md b/apps/docs/src/content/meta/Switch.md
new file mode 100644
index 0000000..a217833
--- /dev/null
+++ b/apps/docs/src/content/meta/Switch.md
@@ -0,0 +1,110 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignLabel',
+    'description': '<p>Alignment of the labels: &quot;start&quot; (usually left) or &quot;end&quot; (usually right).</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false,
+    'default': '\'end\''
+  },
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'false | true | \'true\' | \'false\' | \'grammar\' | \'spelling\'',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled state of the switch. Can be bind as <code>v-model:checked</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultChecked',
+    'description': '<p>The state of the switch when it is initially rendered. Use when you do not need to control its state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the switch.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': true
+  },
+  {
+    'name': 'label',
+    'description': '<p>Label displayed next to the switch. It can be a string, element, or any other\nrenderable node.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the switch. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the switch before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:checked',
+    'description': '',
+    'type': '[payload: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SwitchGroup.md b/apps/docs/src/content/meta/SwitchGroup.md
new file mode 100644
index 0000000..b9080c8
--- /dev/null
+++ b/apps/docs/src/content/meta/SwitchGroup.md
@@ -0,0 +1,77 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignLabels',
+    'description': '<p>Alignment of the labels: &quot;start&quot; (usually left) or &quot;end&quot; (usually right).</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'ariaInvalid',
+    'description': '<p>Aria invalid attribute.</p>\n',
+    'type': 'false | true | \'true\' | \'false\' | \'grammar\' | \'spelling\'',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Whether the switch group is disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.\nHelper text.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '<p>A unique id for the switch group.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.\nLabel for the switch group.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>Whether the switch group is required.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.\nTooltip for the switch group.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SwitchGroupItem.md b/apps/docs/src/content/meta/SwitchGroupItem.md
new file mode 100644
index 0000000..a277f7e
--- /dev/null
+++ b/apps/docs/src/content/meta/SwitchGroupItem.md
@@ -0,0 +1,95 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignLabels',
+    'description': '<p>Alignment of the labels: &quot;start&quot; (usually left) or &quot;end&quot; (usually right).</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled state of the switch. Can be bind as <code>v-model:checked</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultChecked',
+    'description': '<p>The state of the switch when it is initially rendered. Use when you do not need to control its state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the switch.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Label displayed next to the switch. It can be a string, element, or any other\nrenderable node.\nMain label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the switch. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the switch before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/SwitchLabel.md b/apps/docs/src/content/meta/SwitchLabel.md
new file mode 100644
index 0000000..c51e735
--- /dev/null
+++ b/apps/docs/src/content/meta/SwitchLabel.md
@@ -0,0 +1,107 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignLabel',
+    'description': '<p>Alignment of the labels: &quot;start&quot; (usually left) or &quot;end&quot; (usually right).</p>\n',
+    'type': '\'start\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'false | true | \'true\' | \'false\' | \'grammar\' | \'spelling\'',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'checked',
+    'description': '<p>The controlled state of the switch. Can be bind as <code>v-model:checked</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultChecked',
+    'description': '<p>The state of the switch when it is initially rendered. Use when you do not need to control its state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the switch.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'isInGroup',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Label displayed next to the switch. It can be a string, element, or any other\nrenderable node.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the switch. Submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must check the switch before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>The value given as data when submitted with a <code>name</code>.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Table.md b/apps/docs/src/content/meta/Table.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/Table.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableBody.md b/apps/docs/src/content/meta/TableBody.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableBody.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableCaption.md b/apps/docs/src/content/meta/TableCaption.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableCaption.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableCell.md b/apps/docs/src/content/meta/TableCell.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableCell.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableEmpty.md b/apps/docs/src/content/meta/TableEmpty.md
new file mode 100644
index 0000000..ee88394
--- /dev/null
+++ b/apps/docs/src/content/meta/TableEmpty.md
@@ -0,0 +1,11 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'colspan',
+    'description': '',
+    'type': 'number',
+    'required': false,
+    'default': '1'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TableFooter.md b/apps/docs/src/content/meta/TableFooter.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableFooter.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableHead.md b/apps/docs/src/content/meta/TableHead.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableHead.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableHeader.md b/apps/docs/src/content/meta/TableHeader.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableHeader.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/TableRow.md b/apps/docs/src/content/meta/TableRow.md
new file mode 100644
index 0000000..ee9f1e1
--- /dev/null
+++ b/apps/docs/src/content/meta/TableRow.md
@@ -0,0 +1 @@
+<!-- This file was automatic generated. Do not edit it manually -->
diff --git a/apps/docs/src/content/meta/Tabs.md b/apps/docs/src/content/meta/Tabs.md
new file mode 100644
index 0000000..1f21973
--- /dev/null
+++ b/apps/docs/src/content/meta/Tabs.md
@@ -0,0 +1,63 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'activationMode',
+    'description': '<p>Whether a tab is activated automatically (on focus) or manually (on click).</p>\n',
+    'type': '\'automatic\' | \'manual\'',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs</p>\n',
+    'type': 'string | number',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the tab to activate. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'string | number',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation the tabs are layed out.\nMainly so arrow navigation is done accordingly (left &amp; right vs. up &amp; down)</p>\n',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false,
+    'default': '\'horizontal\''
+  },
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'fill\' | \'underlined\' | \'contained-bottom\' | \'contained-top\' | null',
+    'required': false,
+    'default': '\'fill\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: StringOrNumber]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TabsContent.md b/apps/docs/src/content/meta/TabsContent.md
new file mode 100644
index 0000000..0a4050c
--- /dev/null
+++ b/apps/docs/src/content/meta/TabsContent.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'forceMount',
+    'description': '<p>Used to force mounting when more control is needed. Useful when\ncontrolling animation with Vue animation libraries.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>A unique value that associates the content with a trigger.</p>\n',
+    'type': 'string | number',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TabsList.md b/apps/docs/src/content/meta/TabsList.md
new file mode 100644
index 0000000..623c56a
--- /dev/null
+++ b/apps/docs/src/content/meta/TabsList.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>true</code>, keyboard navigation will loop from last tab to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'stretch',
+    'description': '<p>Should the tabs stretch to fill the available space?</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TabsTrigger.md b/apps/docs/src/content/meta/TabsTrigger.md
new file mode 100644
index 0000000..0059bf3
--- /dev/null
+++ b/apps/docs/src/content/meta/TabsTrigger.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the tab.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>A unique value that associates the trigger with a content.</p>\n',
+    'type': 'string | number',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Tag.md b/apps/docs/src/content/meta/Tag.md
new file mode 100644
index 0000000..ae82778
--- /dev/null
+++ b/apps/docs/src/content/meta/Tag.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'closable',
+    'description': '<p>Is the alert closable? If true, a close icon will be displayed.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'color',
+    'description': '<p>The color of the badge.</p>\n',
+    'type': '\'gray\' | \'primary\' | \'green\' | \'yellow\' | \'red\' | \'purple\' | \'orange\' | \'pink\' | \'blue\' | null',
+    'required': false
+  },
+  {
+    'name': 'shape',
+    'description': '<p>The shape of the badge.</p>\n',
+    'type': '\'rounded\' | \'pill\' | null',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the badge.</p>\n',
+    'type': '\'sm\' | \'md\' | null',
+    'required': false
+  },
+  {
+    'name': 'stroke',
+    'description': '<p>Whether the badge has border or not.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TagsInput.md b/apps/docs/src/content/meta/TagsInput.md
new file mode 100644
index 0000000..d2d0e16
--- /dev/null
+++ b/apps/docs/src/content/meta/TagsInput.md
@@ -0,0 +1,108 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'addOnBlur',
+    'description': '<p>When <code>true</code> allow adding tags blur input</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'addOnPaste',
+    'description': '<p>When <code>true</code>, allow adding tags on paste. Work in conjunction with delimiter prop.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'addOnTab',
+    'description': '<p>When <code>true</code> allow adding tags on tab keydown</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The value of the tags that should be added. Use when you do not need to control the state of the tags input</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'delimiter',
+    'description': '<p>The character to trigger the addition of a new tag. Also used to split tags for <code>@paste</code> event</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the tags input.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'duplicate',
+    'description': '<p>When <code>true</code>, allow duplicated tags.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'max',
+    'description': '<p>Maximum number of tags.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the tags input. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'string[]',
+    'required': false
+  },
+  {
+    'name': 'name',
+    'description': '<p>The name of the tags input submitted with its owning form as part of a name/value pair.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '<p>When <code>true</code>, indicates that the user must add the tags input before the owning form can be submitted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'invalid',
+    'description': '',
+    'type': '[payload: string]'
+  },
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: string[]]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TagsInputInput.md b/apps/docs/src/content/meta/TagsInputInput.md
new file mode 100644
index 0000000..b8dabf3
--- /dev/null
+++ b/apps/docs/src/content/meta/TagsInputInput.md
@@ -0,0 +1,35 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'autoFocus',
+    'description': '<p>Focus on element when mounted.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'maxLength',
+    'description': '<p>Maximum number of character allowed.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'placeholder',
+    'description': '<p>The placeholder character to use for empty tags input.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TagsInputItem.md b/apps/docs/src/content/meta/TagsInputItem.md
new file mode 100644
index 0000000..0d4721e
--- /dev/null
+++ b/apps/docs/src/content/meta/TagsInputItem.md
@@ -0,0 +1,29 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the tags input.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>Value associated with the tags</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TagsInputItemDelete.md b/apps/docs/src/content/meta/TagsInputItemDelete.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/TagsInputItemDelete.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TagsInputItemText.md b/apps/docs/src/content/meta/TagsInputItemText.md
new file mode 100644
index 0000000..f13bfa7
--- /dev/null
+++ b/apps/docs/src/content/meta/TagsInputItemText.md
@@ -0,0 +1,17 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TailwindPlugin.md b/apps/docs/src/content/meta/TailwindPlugin.md
new file mode 100644
index 0000000..3aac51e
--- /dev/null
+++ b/apps/docs/src/content/meta/TailwindPlugin.md
@@ -0,0 +1,33 @@
+<PropsTable hide-required :data="[
+  {
+    'name': 'fontSmooth',
+    'description': 'Font smoothing of Wedges components',
+    'type': `'antialiased' | 'inherit'`,
+    'default': 'antialiased',
+  },
+  {
+    name: 'prefix',
+    description: 'The prefix for Wedges CSS variables',
+    type: 'string',
+    default: 'wg',
+  },
+  {
+    name: 'themes',
+    description: 'Themes configuration',
+    type: 'ConfigThemes',
+    default: '{}'
+  },
+  {
+    name: 'defaultTheme',
+    description: 'The default theme to use. Any key of a theme defined in the `wedgesTW` plugin or `light` or `dark`',
+    type: 'DefaultThemeType',
+    default: 'light'
+  },
+  {
+    name: 'defaultExtendTheme',
+    description: 'The default theme to extend when creating a new theme',
+    type: `'light'|'dark'`,
+    default: 'light'
+  }
+  ]"
+/>
diff --git a/apps/docs/src/content/meta/Textarea.md b/apps/docs/src/content/meta/Textarea.md
new file mode 100644
index 0000000..b824469
--- /dev/null
+++ b/apps/docs/src/content/meta/Textarea.md
@@ -0,0 +1,91 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'ariaInvalid',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'description',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'for',
+    'description': '<p>The id of the element the label is associated with.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'helperText',
+    'description': '<p>Additional text or information to guide the user. This can be an instruction,\na hint, or any other supplementary information. It is rendered below label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'id',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'label',
+    'description': '<p>Main label displayed above radio buttons. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '',
+    'type': 'any',
+    'required': false
+  },
+  {
+    'name': 'required',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'tooltip',
+    'description': '<p>Tooltip displayed next to the label. As a prop you will need to pass it as a string.\nIf you want to render an element or any other renderable node, you will need to use the named slot.</p>\n',
+    'type': 'string',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: string | number]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TippyIcon.md b/apps/docs/src/content/meta/TippyIcon.md
new file mode 100644
index 0000000..db1037e
--- /dev/null
+++ b/apps/docs/src/content/meta/TippyIcon.md
@@ -0,0 +1,23 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'color',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': 'number',
+    'required': false,
+    'default': '24'
+  },
+  {
+    'name': 'title',
+    'description': '',
+    'type': 'string',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Toggle.md b/apps/docs/src/content/meta/Toggle.md
new file mode 100644
index 0000000..d21307e
--- /dev/null
+++ b/apps/docs/src/content/meta/Toggle.md
@@ -0,0 +1,77 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'destructive',
+    'description': '<p>Specifies whether this button has a destructive action.\nIf <code>true</code>, the button should be styled differently to indicate that it will perform a destructive action.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the toggle.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'isIconOnly',
+    'description': '',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'pressed',
+    'description': '<p>The controlled pressed state of the toggle. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'shape',
+    'description': '',
+    'type': '\'rounded\' | \'pill\' | null',
+    'required': false,
+    'default': '\'rounded\''
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'sm\' | \'md\' | \'xs-icon\' | null',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'variant',
+    'description': '',
+    'type': '\'outline\' | \'transparent\'',
+    'required': false,
+    'default': '\'outline\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:pressed',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ToggleGroup.md b/apps/docs/src/content/meta/ToggleGroup.md
new file mode 100644
index 0000000..250458d
--- /dev/null
+++ b/apps/docs/src/content/meta/ToggleGroup.md
@@ -0,0 +1,83 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The default active value of the item(s).</p>\n<p>Use when you do not need to control the state of the item(s).</p>\n',
+    'type': 'string | string[]',
+    'required': false
+  },
+  {
+    'name': 'dir',
+    'description': '<p>The reading direction of the combobox when applicable. &lt;br&gt; If omitted, inherits globally from <code>DirectionProvider</code> or assumes LTR (left-to-right) reading mode.</p>\n',
+    'type': '\'ltr\' | \'rtl\'',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the toggle group and all its items.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'loop',
+    'description': '<p>When <code>loop</code> and <code>rovingFocus</code> is <code>true</code>, keyboard navigation will loop from last item to first, and vice versa.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'modelValue',
+    'description': '<p>The controlled value of the active item(s).</p>\n<p>Use this when you need to control the state of the items. Can be binded with <code>v-model</code></p>\n',
+    'type': 'string | string[]',
+    'required': false
+  },
+  {
+    'name': 'orientation',
+    'description': '<p>The orientation of the component, which determines how focus moves: <code>horizontal</code> for left/right arrows and <code>vertical</code> for up/down arrows.</p>\n',
+    'type': '\'horizontal\' | \'vertical\'',
+    'required': false,
+    'default': '\'horizontal\''
+  },
+  {
+    'name': 'rovingFocus',
+    'description': '<p>When <code>false</code>, navigating through the items using arrow keys will be disabled.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the buttons in group.</p>\n',
+    'type': '\'sm\' | \'md\'',
+    'required': false,
+    'default': '\'md\''
+  },
+  {
+    'name': 'type',
+    'description': '<p>Determines whether a &quot;single&quot; or &quot;multiple&quot; items can be pressed at a time.</p>\n<p>This prop will be ignored if any of <code>v-model</code> or <code>defaultValue</code> is an defined, as the type will be inferred from the value.</p>\n',
+    'type': '\'single\' | \'multiple\'',
+    'required': false,
+    'default': '\'single\''
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:modelValue',
+    'description': '',
+    'type': '[payload: string]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/ToggleGroupItem.md b/apps/docs/src/content/meta/ToggleGroupItem.md
new file mode 100644
index 0000000..09c3732
--- /dev/null
+++ b/apps/docs/src/content/meta/ToggleGroupItem.md
@@ -0,0 +1,47 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'defaultValue',
+    'description': '<p>The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, prevents the user from interacting with the toggle.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'pressed',
+    'description': '<p>The controlled pressed state of the toggle. Can be bind as <code>v-model</code>.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'size',
+    'description': '',
+    'type': '\'sm\' | \'md\'',
+    'required': false
+  },
+  {
+    'name': 'value',
+    'description': '<p>A string value for the toggle group item. All items within a toggle group should use a unique value.</p>\n',
+    'type': 'string',
+    'required': true
+  }
+]" />
diff --git a/apps/docs/src/content/meta/Tooltip.md b/apps/docs/src/content/meta/Tooltip.md
new file mode 100644
index 0000000..aa2cc1d
--- /dev/null
+++ b/apps/docs/src/content/meta/Tooltip.md
@@ -0,0 +1,141 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'align',
+    'description': '<p>The preferred alignment against the trigger.\nMay change when collisions occur.</p>\n',
+    'type': '\'start\' | \'center\' | \'end\'',
+    'required': false
+  },
+  {
+    'name': 'alignOffset',
+    'description': '<p>An offset in pixels from the <code>start</code> or <code>end</code> alignment options.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'ariaLabel',
+    'description': '<p>By default, screenreaders will announce the content inside\nthe component. If this is not descriptive enough, or you have\ncontent that cannot be announced, use aria-label as a more\ndescriptive label.</p>\n',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The padding between the arrow and the edges of the content.\nIf your content has border-radius, this will prevent it from\noverflowing the corners.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'avoidCollisions',
+    'description': '<p>When <code>true</code>, overrides the side andalign preferences\nto prevent collisions with boundary edges.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'collisionBoundary',
+    'description': '<p>The element used as the collision boundary. By default\nthis is the viewport, though you can provide additional\nelement(s) to be included in this check.</p>\n',
+    'type': 'Element | (Element | null)[] | null',
+    'required': false
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The distance in pixels from the boundary edges where collision\ndetection should occur. Accepts a number (same for all sides),\nor a partial padding object, for example: { top: 20, left: 20 }.</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false
+  },
+  {
+    'name': 'color',
+    'description': '',
+    'type': '\'primary\' | \'secondary\' | \'soft\'',
+    'required': false,
+    'default': '\'primary\''
+  },
+  {
+    'name': 'content',
+    'description': '',
+    'type': 'string',
+    'required': false
+  },
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the tooltip when it is initially rendered.\nUse when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'delayDuration',
+    'description': '<p>Override the duration given to the <code>Provider</code> to customise\nthe open delay for a specific tooltip.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '200'
+  },
+  {
+    'name': 'disableClosingTrigger',
+    'description': '<p>When <code>true</code>, clicking on trigger will not close the content.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, disable tooltip</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableHoverableContent',
+    'description': '<p>Prevents Tooltip.Content from remaining open when hovering.\nDisabling this has accessibility consequences. Inherits\nfrom Tooltip.Provider.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'false'
+  },
+  {
+    'name': 'hideWhenDetached',
+    'description': '<p>Whether to hide the content when the trigger becomes fully occluded.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'ignoreNonKeyboardFocus',
+    'description': '<p>Prevent the tooltip from opening if the focus did not come from\nthe keyboard by matching against the <code>:focus-visible</code> selector.\nThis is useful if you want to avoid opening it when switching\nbrowser tabs or closing a dialog.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'side',
+    'description': '<p>The preferred side of the trigger to render against when open.\nWill be reversed when collisions occur and avoidCollisions\nis enabled.</p>\n',
+    'type': '\'top\' | \'right\' | \'bottom\' | \'left\'',
+    'required': false
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The distance in pixels from the trigger.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'sticky',
+    'description': '<p>The sticky behavior on the align axis. <code>partial</code> will keep the\ncontent in the boundary as long as the trigger is at least partially\nin the boundary whilst &quot;always&quot; will keep the content in the boundary\nregardless.</p>\n',
+    'type': '\'partial\' | \'always\'',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TooltipArrow.md b/apps/docs/src/content/meta/TooltipArrow.md
new file mode 100644
index 0000000..eae5ab3
--- /dev/null
+++ b/apps/docs/src/content/meta/TooltipArrow.md
@@ -0,0 +1,31 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'height',
+    'description': '<p>The height of the arrow in pixels.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '8'
+  },
+  {
+    'name': 'width',
+    'description': '<p>The width of the arrow in pixels.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '24'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TooltipContent.md b/apps/docs/src/content/meta/TooltipContent.md
new file mode 100644
index 0000000..ad0b8c5
--- /dev/null
+++ b/apps/docs/src/content/meta/TooltipContent.md
@@ -0,0 +1,77 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'alignOffset',
+    'description': '<p>The offset of the tooltip arrow from the edge of the tooltip</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '-12'
+  },
+  {
+    'name': 'animation',
+    'description': '<p>Whether to animate the tooltip when it opens/closes</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'arrow',
+    'description': '<p>Whether to show an arrow pointing to the target element</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
+  },
+  {
+    'name': 'arrowPadding',
+    'description': '<p>The offset of the tooltip arrow from the edge of the tooltip</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '12'
+  },
+  {
+    'name': 'collisionPadding',
+    'description': '<p>The offset of the tooltip arrow from the edge of the tooltip</p>\n',
+    'type': 'number | Partial<Record<\'top\' | \'right\' | \'bottom\' | \'left\', number>>',
+    'required': false,
+    'default': '12'
+  },
+  {
+    'name': 'color',
+    'description': '<p>The color of the tooltip</p>\n',
+    'type': '\'primary\' | \'secondary\' | \'soft\' | null',
+    'required': false
+  },
+  {
+    'name': 'content',
+    'description': '<p>The content to display inside the tooltip</p>\n',
+    'type': 'any',
+    'required': true
+  },
+  {
+    'name': 'sideOffset',
+    'description': '<p>The offset of the tooltip arrow from the edge of the tooltip</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '2'
+  },
+  {
+    'name': 'size',
+    'description': '<p>The size of the tooltip</p>\n',
+    'type': '\'sm\' | \'md\' | null',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'escapeKeyDown',
+    'description': '',
+    'type': '[event: KeyboardEvent]'
+  },
+  {
+    'name': 'pointerDownOutside',
+    'description': '',
+    'type': '[event: Event]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TooltipProvider.md b/apps/docs/src/content/meta/TooltipProvider.md
new file mode 100644
index 0000000..b86d31b
--- /dev/null
+++ b/apps/docs/src/content/meta/TooltipProvider.md
@@ -0,0 +1,40 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'delayDuration',
+    'description': '<p>The duration from when the pointer enters the trigger until the tooltip gets opened.</p>\n',
+    'type': 'number',
+    'required': false
+  },
+  {
+    'name': 'disableClosingTrigger',
+    'description': '<p>When <code>true</code>, clicking on trigger will not close the content.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, disable tooltip</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableHoverableContent',
+    'description': '<p>When <code>true</code>, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'ignoreNonKeyboardFocus',
+    'description': '<p>Prevent the tooltip from opening if the focus did not come from\nthe keyboard by matching against the <code>:focus-visible</code> selector.\nThis is useful if you want to avoid opening it when switching\nbrowser tabs or closing a dialog.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'skipDelayDuration',
+    'description': '<p>How much time a user has to enter another trigger without incurring a delay again.</p>\n',
+    'type': 'number',
+    'required': false
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TooltipRoot.md b/apps/docs/src/content/meta/TooltipRoot.md
new file mode 100644
index 0000000..eff69c7
--- /dev/null
+++ b/apps/docs/src/content/meta/TooltipRoot.md
@@ -0,0 +1,55 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'defaultOpen',
+    'description': '<p>The open state of the tooltip when it is initially rendered.\nUse when you do not need to control its open state.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'delayDuration',
+    'description': '<p>Override the duration given to the <code>Provider</code> to customise\nthe open delay for a specific tooltip.</p>\n',
+    'type': 'number',
+    'required': false,
+    'default': '200'
+  },
+  {
+    'name': 'disableClosingTrigger',
+    'description': '<p>When <code>true</code>, clicking on trigger will not close the content.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>When <code>true</code>, disable tooltip</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'disableHoverableContent',
+    'description': '<p>Prevents Tooltip.Content from remaining open when hovering.\nDisabling this has accessibility consequences. Inherits\nfrom Tooltip.Provider.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'ignoreNonKeyboardFocus',
+    'description': '<p>Prevent the tooltip from opening if the focus did not come from\nthe keyboard by matching against the <code>:focus-visible</code> selector.\nThis is useful if you want to avoid opening it when switching\nbrowser tabs or closing a dialog.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
+  {
+    'name': 'open',
+    'description': '<p>The controlled open state of the tooltip.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'update:open',
+    'description': '',
+    'type': '[value: boolean]'
+  }
+]" />
diff --git a/apps/docs/src/content/meta/TooltipTrigger.md b/apps/docs/src/content/meta/TooltipTrigger.md
new file mode 100644
index 0000000..337e321
--- /dev/null
+++ b/apps/docs/src/content/meta/TooltipTrigger.md
@@ -0,0 +1,25 @@
+<!-- This file was automatic generated. Do not edit it manually -->
+
+<PropsTable :data="[
+  {
+    'name': 'as',
+    'description': '<p>The element or component this component should render as. Can be overwrite by <code>asChild</code></p>\n',
+    'type': 'AsTag | Component',
+    'required': false,
+    'default': '\'div\''
+  },
+  {
+    'name': 'asChild',
+    'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.radix-vue.com/guides/composition.html\'>Composition</a> guide for more details.</p>\n',
+    'type': 'boolean',
+    'required': false
+  }
+]" />
+
+<EmitsTable :data="[
+  {
+    'name': 'click',
+    'description': '',
+    'type': '[e: MouseEvent]'
+  }
+]" />
diff --git a/apps/docs/src/lib/components/ui/pagination/PaginationFirst.vue b/apps/docs/src/lib/components/ui/pagination/PaginationFirst.vue
new file mode 100644
index 0000000..732f739
--- /dev/null
+++ b/apps/docs/src/lib/components/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { PaginationFirst, type PaginationFirstProps } from "radix-vue";
+import { ChevronLeftIcon } from "@iconicicons/vue3";
+import { cn } from "wedges-vue/utils";
+import {
+  Button,
+} from "../button";
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes["class"] }>(), {
+  asChild: true,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronLeftIcon class="w-4 h-4" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>../../../../../.vitepress/theme/components/ui/button
diff --git a/apps/docs/src/lib/components/ui/pagination/PaginationLast.vue b/apps/docs/src/lib/components/ui/pagination/PaginationLast.vue
new file mode 100644
index 0000000..f2dbceb
--- /dev/null
+++ b/apps/docs/src/lib/components/ui/pagination/PaginationLast.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { PaginationLast, type PaginationLastProps } from "radix-vue";
+import { ChevronRightIcon } from "@iconicicons/vue3";
+import { cn } from "wedges-vue/utils";
+import {
+  Button,
+} from "../button";
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes["class"] }>(), {
+  asChild: true,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+      <slot>
+        <ChevronRightIcon class="h-4 w-4" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>../../../../../.vitepress/theme/components/ui/button
diff --git a/apps/docs/src/lib/utils.ts b/apps/docs/src/lib/utils.ts
new file mode 100644
index 0000000..e2e1476
--- /dev/null
+++ b/apps/docs/src/lib/utils.ts
@@ -0,0 +1 @@
+export * from "wedges-vue/utils";
diff --git a/apps/docs/src/public/android-chrome-192x192.png b/apps/docs/src/public/android-chrome-192x192.png
new file mode 100644
index 0000000..c00598c
Binary files /dev/null and b/apps/docs/src/public/android-chrome-192x192.png differ
diff --git a/apps/docs/src/public/android-chrome-512x512.png b/apps/docs/src/public/android-chrome-512x512.png
new file mode 100644
index 0000000..10dbd4f
Binary files /dev/null and b/apps/docs/src/public/android-chrome-512x512.png differ
diff --git a/apps/docs/src/public/apple-touch-icon.png b/apps/docs/src/public/apple-touch-icon.png
new file mode 100644
index 0000000..6e44e9b
Binary files /dev/null and b/apps/docs/src/public/apple-touch-icon.png differ
diff --git a/apps/docs/src/public/avatars/01.png b/apps/docs/src/public/avatars/01.png
new file mode 100644
index 0000000..c190101
Binary files /dev/null and b/apps/docs/src/public/avatars/01.png differ
diff --git a/apps/docs/src/public/avatars/02.png b/apps/docs/src/public/avatars/02.png
new file mode 100644
index 0000000..b2aae01
Binary files /dev/null and b/apps/docs/src/public/avatars/02.png differ
diff --git a/apps/docs/src/public/avatars/03.png b/apps/docs/src/public/avatars/03.png
new file mode 100644
index 0000000..f04b6b0
Binary files /dev/null and b/apps/docs/src/public/avatars/03.png differ
diff --git a/apps/docs/src/public/avatars/04.png b/apps/docs/src/public/avatars/04.png
new file mode 100644
index 0000000..1129539
Binary files /dev/null and b/apps/docs/src/public/avatars/04.png differ
diff --git a/apps/docs/src/public/avatars/05.png b/apps/docs/src/public/avatars/05.png
new file mode 100644
index 0000000..e73aabf
Binary files /dev/null and b/apps/docs/src/public/avatars/05.png differ
diff --git a/apps/docs/src/public/favicon-16x16.png b/apps/docs/src/public/favicon-16x16.png
new file mode 100644
index 0000000..8fff072
Binary files /dev/null and b/apps/docs/src/public/favicon-16x16.png differ
diff --git a/apps/docs/src/public/favicon-32x32.png b/apps/docs/src/public/favicon-32x32.png
new file mode 100644
index 0000000..cf2f2c4
Binary files /dev/null and b/apps/docs/src/public/favicon-32x32.png differ
diff --git a/apps/docs/src/public/favicon.ico b/apps/docs/src/public/favicon.ico
new file mode 100644
index 0000000..8479ddf
Binary files /dev/null and b/apps/docs/src/public/favicon.ico differ
diff --git a/apps/docs/src/public/fonts/Geist/GeistVariableVF.woff2 b/apps/docs/src/public/fonts/Geist/GeistVariableVF.woff2
new file mode 100644
index 0000000..328a020
Binary files /dev/null and b/apps/docs/src/public/fonts/Geist/GeistVariableVF.woff2 differ
diff --git a/apps/docs/src/public/fonts/Geist/LICENSE.TXT b/apps/docs/src/public/fonts/Geist/LICENSE.TXT
new file mode 100644
index 0000000..df71062
--- /dev/null
+++ b/apps/docs/src/public/fonts/Geist/LICENSE.TXT
@@ -0,0 +1,92 @@
+Geist Sans and Geist Mono Font
+(C) 2023 Vercel, made in collaboration with basement.studio
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/apps/docs/src/public/images/banner.webp b/apps/docs/src/public/images/banner.webp
new file mode 100644
index 0000000..aff625d
Binary files /dev/null and b/apps/docs/src/public/images/banner.webp differ
diff --git a/apps/docs/src/public/placeholder.svg b/apps/docs/src/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/apps/docs/src/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/docs/src/public/schema.json b/apps/docs/src/public/schema.json
new file mode 100644
index 0000000..94567c9
--- /dev/null
+++ b/apps/docs/src/public/schema.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "style": {
+      "type": "string",
+      "enum": ["default", "new-york"]
+    },
+    "typescript": {
+      "type": "boolean",
+      "default": true
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "string"
+        },
+        "baseColor": {
+          "type": "string"
+        },
+        "cssVariables": {
+          "type": "boolean",
+          "default": true
+        }
+      },
+      "required": ["config", "css", "baseColor", "cssVariables"]
+    },
+    "framework": {
+      "type": "string",
+      "enum": ["nuxt", "vite", "laravel", "astro"],
+      "default": "vite"
+    },
+    "aliases": {
+      "type": "object",
+      "properties": {
+        "utils": {
+          "type": "string"
+        },
+        "components": {
+          "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        }
+      },
+      "required": ["utils", "components"]
+    }
+  },
+  "required": ["style", "tailwind", "aliases"]
+}
diff --git a/apps/docs/src/public/site.webmanifest b/apps/docs/src/public/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/apps/docs/src/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
diff --git a/apps/docs/src/stores/config.ts b/apps/docs/src/stores/config.ts
new file mode 100644
index 0000000..0760a93
--- /dev/null
+++ b/apps/docs/src/stores/config.ts
@@ -0,0 +1,24 @@
+import { useStorage } from "@vueuse/core";
+
+interface CodeConfig {
+  prefix: string;
+  componentsPath: string;
+  utilsPath: string;
+}
+
+export function useConfigStore() {
+  const codeConfig = useStorage<CodeConfig>("code-config", {
+    prefix: "",
+    componentsPath: "wedges-vue",
+    utilsPath: "wedges-vue/lib/utils",
+  });
+
+  const setCodeConfig = (payload: CodeConfig) => {
+    codeConfig.value = payload;
+  };
+
+  return {
+    codeConfig,
+    setCodeConfig,
+  };
+}
diff --git a/apps/docs/src/vite-env.d.ts b/apps/docs/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/apps/docs/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
new file mode 100644
index 0000000..5c027c9
--- /dev/null
+++ b/apps/docs/tailwind.config.ts
@@ -0,0 +1,147 @@
+import tailwindTypography from "@tailwindcss/typography";
+import { type ThemableColorScale, wedgesTW } from "wedges-vue";
+
+const primaryBlue: ThemableColorScale = {
+  100: "#DAF0FF",
+  200: "#B5DEFF",
+  300: "#90C9FF",
+  400: "#75B6FF",
+  500: "#4796FF",
+  600: "#3374DB",
+  700: "#2356B7",
+  800: "#163C93",
+  900: "#0D297A",
+  DEFAULT: "#4796FF", // 500
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: "class",
+  content: [
+    "./src/**/*.{vue,js,ts,jsx,tsx,md,css}",
+    "./.vitepress/**/*.{vue,js,ts,jsx,tsx,css,md}",
+    "node_modules/wedges-vue/**/*.{ts,vue}",
+  ],
+
+  theme: {
+    extend: {
+      screens: {
+        "2xl": "82rem",
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            pre: {
+              padding: 0,
+              borderRadius: "0.5rem",
+              margin: 0,
+            },
+          },
+        },
+      },
+      animation: {
+        "flash": "flash 1s ease-in-out infinite",
+        "fade-in": "fadeIn 0.5s ease-in-out",
+        "fade-out": "fadeOut 0.5s ease-in-out",
+      },
+      keyframes: {
+        flash: {
+          "0%, 20%": { opacity: "0.4" },
+          "70%, 100%": { opacity: "1" },
+        },
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+        fadeOut: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" },
+        },
+      },
+
+      maxWidth: {
+        "7xl": "82rem",
+        "8xl": "88rem",
+        "9xl": "96rem",
+        "10xl": "102rem",
+        "11xl": "108rem",
+      },
+      colors: {
+        "gray-50": "#F7F7F8",
+        "gray-100": "#E8E8ED",
+        "gray-500": "#6C6C89",
+        "gray-800": "#282833",
+        "gray-900": "#121217",
+        "purple-200": "#fcc5f3",
+        "purple-400": "#8D6CEF",
+        "purple-500": "#7047EB",
+        "purple-600": "#5423E7",
+        "yellow-500": "#FFC233",
+        "wtf-gainsboro": "#EAEAEB",
+        "border": "hsl(var(--border))",
+        "input": "hsl(var(--input))",
+        "ring": "hsl(var(--ring))",
+        "muted": {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        "accent": {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        "popover": {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        "card": {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      container: {
+        center: true,
+        screens: {
+          md: "100%",
+          xl: "77rem", // 72 + 5 for padding
+        },
+        padding: {
+          DEFAULT: "1.5rem",
+          md: "2.5rem",
+          xl: "2.5rem",
+        },
+      },
+      fontFamily: {
+        sans: ["Inter", "ui-sans-serif", "system-ui", "-apple-system"],
+      },
+      minHeight: {
+        "screen-dvh": "100dvh",
+      },
+      transitionDuration: {
+        180: "180ms",
+      },
+    },
+  },
+  plugins: [
+    wedgesTW({
+      themes: {
+        "dark-blue": {
+          extend: "dark",
+          colors: {
+            primary: primaryBlue,
+          },
+        },
+        "light": {
+          colors: {
+            primary: {
+              DEFAULT: "#7047EB",
+              400: "#8D6CEF",
+              500: "#7047EB",
+              600: "#5423E7",
+            },
+          },
+        },
+      },
+    }),
+    tailwindTypography,
+  ],
+};
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
new file mode 100644
index 0000000..213bd44
--- /dev/null
+++ b/apps/docs/tsconfig.json
@@ -0,0 +1,78 @@
+{
+  "module": "preserve",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "baseUrl": ".",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@/*": [
+        "docs/src/*"
+      ]
+    },
+    "types": [
+      "unplugin-icons/types/vue",
+      "node"
+    ],
+    "declaration": false,
+    "outDir": "dist",
+    "sourceMap": true
+  },
+  "include": [
+    "docs/src",
+    ".vitepress/**/*.vue",
+    ".vitepress/**/*.mts",
+    ".vitepress/**/*.ts",
+    "docs/src/lib/**/*",
+    ".vitepress/theme/components/ui/checkbox",
+    ".vitepress/theme/components/ui/collapsible",
+    ".vitepress/theme/components/ui/command",
+    ".vitepress/theme/components/ui/context-menu",
+    ".vitepress/theme/components/ui/dialog",
+    ".vitepress/theme/components/ui/drawer",
+    ".vitepress/theme/components/ui/avatar",
+    ".vitepress/theme/components/ui/badge",
+    ".vitepress/theme/components/ui/breadcrumb",
+    ".vitepress/theme/components/ui/button",
+    ".vitepress/theme/components/ui/calendar",
+    ".vitepress/theme/components/ui/card",
+    ".vitepress/theme/components/ui/alert",
+    ".vitepress/theme/components/ui/alert-dialog",
+    ".vitepress/theme/components/ui/aspect-ratio",
+    ".vitepress/theme/components/ui/carousel",
+    ".vitepress/theme/components/ui/accordion",
+    ".vitepress/theme/components/ui/dropdown-menu",
+    ".vitepress/theme/components/ui/form",
+    ".vitepress/theme/components/ui/hover-card",
+    ".vitepress/theme/components/ui/input",
+    ".vitepress/theme/components/ui/label",
+    ".vitepress/theme/components/ui/menubar",
+    ".vitepress/theme/components/ui/navigation-menu",
+    ".vitepress/theme/components/ui/pagination",
+    ".vitepress/theme/components/ui/pin-input",
+    ".vitepress/theme/components/ui/popover",
+    ".vitepress/theme/components/ui/progress",
+    ".vitepress/theme/components/ui/radio-group",
+    ".vitepress/theme/components/ui/resizable",
+    ".vitepress/theme/components/ui/scroll-area",
+    ".vitepress/theme/components/ui/select",
+    ".vitepress/theme/components/ui/separator",
+    ".vitepress/theme/components/ui/sheet",
+    ".vitepress/theme/components/ui/skeleton",
+    ".vitepress/theme/components/ui/slider",
+    ".vitepress/theme/components/ui/sonner",
+    ".vitepress/theme/components/ui/switch",
+    ".vitepress/theme/components/ui/table",
+    ".vitepress/theme/components/ui/tabs",
+    ".vitepress/theme/components/ui/tags-input",
+    ".vitepress/theme/components/ui/textarea",
+    ".vitepress/theme/components/ui/toast",
+    ".vitepress/theme/components/ui/toggle",
+    ".vitepress/theme/components/ui/toggle-group",
+    ".vitepress/theme/components/ui/tooltip"
+  ]
+}
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..56492e7
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,30 @@
+import antfu from "@antfu/eslint-config";
+
+export default antfu(
+  {
+    vue: true,
+    typescript: true,
+    stylistic: {
+      quotes: "double",
+      semi: true,
+    },
+  },
+  {
+    files: ["**/*.vue"],
+    rules: {
+      "vue/one-component-per-file": 0,
+      "vue/no-reserved-component-names": 0,
+      "vue/no-useless-v-bind": 0,
+    },
+  },
+  {
+    // Without `files`, they are general rules for all files
+    rules: {
+      "symbol-description": 0,
+      "no-console": 1,
+      "no-tabs": 0,
+      "import/first": 0,
+      "node/prefer-global/process": 0,
+    },
+  },
+);
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..97900f7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "wedges-vue-project",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "packageManager": "pnpm@8.15.5",
+  "license": "MIT",
+  "repository": "raymondmuller/wedges-vue",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "pnpm --filter docs dev",
+    "build": "pnpm --filter docs build",
+    "preview": "pnpm --filter docs preview",
+    "prepare": "pnpm simple-git-hooks",
+    "wedges:watch": "pnpm --filter wedges-vue build --watch",
+    "wedges:build": "pnpm --filter wedges-vue build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "bumpp": "bumpp package.json packages/*/package.json apps/*/package.json"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.16.2",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "bumpp": "^9.4.1",
+    "eslint": "^8.57.0",
+    "lint-staged": "^15.2.2",
+    "simple-git-hooks": "^2.11.1",
+    "typescript": "^5.4.5",
+    "vitest": "^0.34.6"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "commit-msg": "pnpm commitlint --edit ${1}"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}
diff --git a/packages/wedges-vue/.gitignore b/packages/wedges-vue/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/packages/wedges-vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/wedges-vue/.vscode/extensions.json b/packages/wedges-vue/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/packages/wedges-vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/packages/wedges-vue/README.md b/packages/wedges-vue/README.md
new file mode 100644
index 0000000..0bfecb0
--- /dev/null
+++ b/packages/wedges-vue/README.md
@@ -0,0 +1,9 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+
+- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
diff --git a/packages/wedges-vue/index.html b/packages/wedges-vue/index.html
new file mode 100644
index 0000000..dde16aa
--- /dev/null
+++ b/packages/wedges-vue/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/wedges-vue/package.json b/packages/wedges-vue/package.json
new file mode 100644
index 0000000..3b65419
--- /dev/null
+++ b/packages/wedges-vue/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "wedges-vue",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/wedges-vue.js",
+      "require": "./dist/wedges-vue.umd.cjs"
+    },
+    "./utils": "./src/lib/utils.ts"
+  },
+  "main": "./dist/wedges-vue.umd.cjs",
+  "module": "./dist/wedges-vue.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@iconicicons/vue3": "^1.5.1",
+    "@lemonsqueezy/wedges": "^1.2.2",
+    "@vueuse/core": "^10.9.0",
+    "radix-vue": "^1.7.4",
+    "vue": "^3.4.27"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/tsconfig": "^0.5.1",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.3.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vue-tsc": "^2.0.16"
+  }
+}
diff --git a/packages/wedges-vue/public/vite.svg b/packages/wedges-vue/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/packages/wedges-vue/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/packages/wedges-vue/src/assets/vue.svg b/packages/wedges-vue/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/packages/wedges-vue/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/packages/wedges-vue/src/components/alert/Alert.vue b/packages/wedges-vue/src/components/alert/Alert.vue
new file mode 100644
index 0000000..eadfefe
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/Alert.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { type HTMLAttributes, ref } from "vue";
+import { Slot } from "radix-vue";
+import { InfoIcon } from "../icons";
+import {
+  type AlertVariants,
+  alertIconVariants,
+  alertVariants,
+} from "./variants";
+import AlertRoot from "./AlertRoot.vue";
+import AlertCloseButton from "./AlertCloseButton.vue";
+import AlertTitle from "./AlertTitle.vue";
+import AlertDescription from "./AlertDescription.vue";
+import type { ClosableProps, NotClosableProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Alert",
+});
+
+const props = withDefaults(
+  defineProps<
+    {
+      class?: HTMLAttributes["class"];
+      color?: AlertVariants["color"];
+      closable?: boolean;
+      title?: string;
+      onClose?: (e: MouseEvent) => void;
+      variant?: AlertVariants["variant"];
+    } & (ClosableProps | NotClosableProps)
+  >(),
+  {
+    variant: "inline",
+  },
+);
+
+const visible = ref(true);
+
+/**
+ * Handle the close event.
+ * @param e - The event object
+ */
+function handleClose(e: MouseEvent) {
+  // Do not close if the event is prevented by the onClose callback
+  if (!e.defaultPrevented)
+    visible.value = false;
+
+  if (props.onClose)
+    props.onClose(e);
+}
+</script>
+
+<template>
+  <AlertRoot
+    v-if="visible"
+    :class="cn(alertVariants({ variant, color }), props.class)"
+    role="alert"
+  >
+    <Slot
+      :class="{
+        'pl-1': variant === 'inline',
+      }"
+    >
+      <slot name="before">
+        <InfoIcon
+          :class="
+            cn('size-6 shrink-0', alertIconVariants({ color }), props.class)
+          "
+        />
+      </slot>
+    </Slot>
+
+    <div
+      :class="
+        cn(
+          'flex grow flex-col items-start',
+          variant === 'expanded' && 'items-start gap-3 px-2',
+          variant === 'inline' && 'px-2 sm:flex-row sm:items-center sm:gap-2',
+          variant === 'inline' && closable && 'pr-1',
+        )
+      "
+    >
+      <div
+        :class="
+          cn(
+            'flex grow flex-col items-start',
+            variant === 'expanded' && 'items-start',
+            variant === 'inline' && 'sm:flex-row sm:items-center sm:gap-2',
+          )
+        "
+      >
+        <AlertTitle :color>
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </AlertTitle>
+        <AlertDescription v-if="$slots.default">
+          <slot />
+        </AlertDescription>
+      </div>
+      <Slot
+        :class="{
+          'mt-3 sm:ml-auto sm:mt-0': variant === 'inline',
+        }"
+      >
+        <slot name="after" />
+      </Slot>
+    </div>
+
+    <AlertCloseButton
+      v-if="closable"
+      :class="{
+        'pr-1': variant === 'inline',
+      }"
+      @click="handleClose"
+    />
+  </AlertRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/alert/AlertCloseButton.vue b/packages/wedges-vue/src/components/alert/AlertCloseButton.vue
new file mode 100644
index 0000000..a20efd4
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/AlertCloseButton.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Button } from "../button";
+import { CloseIcon } from "../icons";
+
+defineOptions({
+  name: "AlertCloseButton",
+});
+</script>
+
+<template>
+  <Button shape="rounded" size="xs-icon" variant="link">
+    <template #after>
+      <slot>
+        <CloseIcon />
+      </slot>
+    </template>
+  </Button>
+</template>
diff --git a/packages/wedges-vue/src/components/alert/AlertDescription.vue b/packages/wedges-vue/src/components/alert/AlertDescription.vue
new file mode 100644
index 0000000..9d72d08
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/AlertDescription.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, type Ref, onMounted, ref } from "vue";
+import { Slot } from "radix-vue";
+import { cn, refHasTextNode } from "@/lib/utils";
+
+defineOptions({
+  name: "AlertDescription",
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const descriptionRef = ref<Ref | null>(null);
+const isText = ref(false);
+
+onMounted(() => {
+  if (descriptionRef.value)
+    isText.value = refHasTextNode(descriptionRef);
+});
+</script>
+
+<template>
+  <component
+    :is="isText ? 'p' : Slot"
+    ref="descriptionRef"
+    :class="cn('text-start', props.class)"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/wedges-vue/src/components/alert/AlertRoot.vue b/packages/wedges-vue/src/components/alert/AlertRoot.vue
new file mode 100644
index 0000000..d8e92e4
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/AlertRoot.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AlertRoot",
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const defaultRootClasses
+  = "wg-antialiased flex text-sm leading-6 bg-surface dark:bg-surface dark:text-surface-500 items-start";
+</script>
+
+<template>
+  <div :class="cn(defaultRootClasses, props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/alert/AlertTitle.vue b/packages/wedges-vue/src/components/alert/AlertTitle.vue
new file mode 100644
index 0000000..dc3a228
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/AlertTitle.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import { type HTMLAttributes, type Ref, onMounted, ref } from "vue";
+import { type AlertTitleVariants, alertTitleVariants } from "./variants";
+import { cn, refHasTextNode } from "@/lib/utils";
+
+defineOptions({
+  name: "AlertTitle",
+});
+
+withDefaults(
+  defineProps<{
+    color?: AlertTitleVariants["color"];
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    color: "gray",
+  },
+);
+
+const titleRef = ref<Ref | null>(null);
+const isText = ref(false);
+
+onMounted(() => {
+  if (titleRef.value)
+    isText.value = refHasTextNode(titleRef);
+});
+</script>
+
+<template>
+  <component
+    :is="isText ? 'p' : Slot"
+    ref="titleRef"
+    :class="cn(alertTitleVariants({ color }), $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>
diff --git a/packages/wedges-vue/src/components/alert/index.ts b/packages/wedges-vue/src/components/alert/index.ts
new file mode 100644
index 0000000..41ad929
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/index.ts
@@ -0,0 +1,3 @@
+export { default as Alert } from "./Alert.vue";
+export { default as AlertTitle } from "./AlertTitle.vue";
+export { default as AlertDescription } from "./AlertDescription.vue";
diff --git a/packages/wedges-vue/src/components/alert/types.ts b/packages/wedges-vue/src/components/alert/types.ts
new file mode 100644
index 0000000..3553bb9
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/types.ts
@@ -0,0 +1,23 @@
+export interface ClosableProps {
+  /**
+   * Is the alert closable? If true, a close icon will be displayed.
+   * @default true
+   */
+  closable?: true;
+
+  /**
+   * An optional callback function to be called when the close icon is clicked.
+   * This can be used to handle the removal of the tag.
+   * If provided, the close icon will be displayed.
+   */
+  onClose?: (e: MouseEvent) => void;
+}
+
+export interface NotClosableProps {
+  /**
+   * Is the alert closable? If true, a close button will be displayed and
+   * when clicked on it will hide the alert element
+   * @default true
+   */
+  closable?: false;
+}
diff --git a/packages/wedges-vue/src/components/alert/variants.ts b/packages/wedges-vue/src/components/alert/variants.ts
new file mode 100644
index 0000000..0733f32
--- /dev/null
+++ b/packages/wedges-vue/src/components/alert/variants.ts
@@ -0,0 +1,57 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const alertVariants = cva("", {
+  variants: {
+    variant: {
+      inline: "rounded-lg px-2 py-3 sm:items-center",
+      expanded: "gap-1 rounded-r-lg border-l-2 p-4 pl-14px",
+    },
+    color: {
+      gray: "border-surface-200 text-surface-500",
+      primary: "border-primary text-surface-500",
+      info: "border-wg-blue bg-wg-blue-50 text-wg-blue-700",
+      success: "border-wg-green bg-wg-green-50 text-wg-green-700",
+      error: "border-wg-red bg-wg-red-50 text-wg-red-700",
+      warning: "border-wg-yellow bg-wg-yellow-50 text-wg-yellow-800",
+    },
+  },
+  defaultVariants: {
+    variant: "inline",
+    color: "gray",
+  },
+});
+
+export const alertTitleVariants = cva("text-start font-medium", {
+  variants: {
+    color: {
+      gray: "text-surface-900",
+      primary: "text-surface-900",
+      info: "text-wg-blue-800 dark:text-wg-blue",
+      success: "text-wg-green-800 dark:text-wg-green",
+      error: "text-wg-red-800 dark:text-wg-red",
+      warning: "text-wg-yellow-800 dark:text-wg-yellow",
+    },
+  },
+  defaultVariants: {
+    color: "gray",
+  },
+});
+
+export const alertIconVariants = cva("", {
+  variants: {
+    color: {
+      gray: "text-surface-200",
+      primary: "text-primary",
+      info: "text-wg-blue",
+      success: "text-wg-green-600",
+      error: "text-wg-red",
+      warning: "text-wg-yellow",
+    },
+  },
+  defaultVariants: {
+    color: "gray",
+  },
+});
+
+export type AlertVariants = VariantProps<typeof alertVariants>;
+export type AlertTitleVariants = VariantProps<typeof alertTitleVariants>;
diff --git a/packages/wedges-vue/src/components/avatar-group/AvatarGroup.vue b/packages/wedges-vue/src/components/avatar-group/AvatarGroup.vue
new file mode 100644
index 0000000..8daf33f
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/AvatarGroup.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import AvatarGroupItem from "./AvatarGroupItem.vue";
+import AvatarGroupLabel from "./AvatarGroupLabel.vue";
+import AvatarGroupRoot from "./AvatarGroupRoot.vue";
+import type { AvatarGroupProps } from "./types";
+import { avatarGroupVariants } from "./variants";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarGroup"
+});
+
+const props = defineProps<AvatarGroupProps>();
+</script>
+
+<template>
+  <AvatarGroupRoot :class="cn(avatarGroupVariants({ size }), props.class)">
+    <AvatarGroupItem
+      v-for="(item, i) in items"
+      :key="`avatar-${i}`"
+      v-bind="item"
+      :size
+      :style="[
+        { zIndex: previousOnTop ? items.length - i : undefined },
+        item.style,
+      ]"
+    />
+
+    <slot />
+
+    <AvatarGroupLabel
+      v-if="moreLabel?.length || hasSlotContent($slots.moreLabel)"
+      :label="moreLabel"
+      v-bind="props"
+    >
+      <slot name="moreLabel" />
+    </AvatarGroupLabel>
+  </AvatarGroupRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar-group/AvatarGroupItem.vue b/packages/wedges-vue/src/components/avatar-group/AvatarGroupItem.vue
new file mode 100644
index 0000000..5f5a61f
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/AvatarGroupItem.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import Avatar from "../avatar/Avatar.vue";
+import type { AvatarProps } from "../avatar";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarGroupItem"
+});
+
+const props = defineProps<AvatarProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <Avatar
+    :class="cn('ring-2 ring-background backdrop-blur-3xl')"
+    v-bind="props"
+  >
+    <slot />
+  </Avatar>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar-group/AvatarGroupLabel.vue b/packages/wedges-vue/src/components/avatar-group/AvatarGroupLabel.vue
new file mode 100644
index 0000000..a23894d
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/AvatarGroupLabel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Avatar } from "../avatar";
+import type { AvatarMoreLabelProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarGroupLabel"
+});
+
+const props = defineProps<AvatarMoreLabelProps>();
+</script>
+
+<template>
+  <Avatar
+    :class="
+      cn(
+        'aspect-auto h-full bg-surface-200 px-2 font-medium text-white ring-2 ring-background dark:text-white',
+        props.class,
+      )
+    "
+    :size
+  >
+    <slot>
+      <span>{{ label }}</span>
+    </slot>
+  </Avatar>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar-group/AvatarGroupRoot.vue b/packages/wedges-vue/src/components/avatar-group/AvatarGroupRoot.vue
new file mode 100644
index 0000000..02c8f1a
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/AvatarGroupRoot.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { defaultAvatarGroupClasses } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarGroupRoot"
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn(defaultAvatarGroupClasses, props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar-group/index.ts b/packages/wedges-vue/src/components/avatar-group/index.ts
new file mode 100644
index 0000000..8bc0a01
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/index.ts
@@ -0,0 +1,5 @@
+export { default as AvatarGroup } from "./AvatarGroup.vue";
+export { default as AvatarGroupItem } from "./AvatarGroupItem.vue";
+export { default as AvatarGroupRoot } from "./AvatarGroupRoot.vue";
+export { default as AvatarGroupLabel } from "./AvatarGroupLabel.vue";
+export { type AvatarGroupProps } from "./types";
diff --git a/packages/wedges-vue/src/components/avatar-group/types.ts b/packages/wedges-vue/src/components/avatar-group/types.ts
new file mode 100644
index 0000000..8ad03ac
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/types.ts
@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "vue";
+import type { AvatarProps } from "../avatar/types";
+import type AvatarGroupRoot from "./AvatarGroupRoot.vue";
+
+export type AvatarGroupAvatarProps = Omit<
+  AvatarProps,
+  "size" | "notification" | "status" | "asChild"
+>;
+
+export interface BaseAvatarGroupProps {
+  /**
+   * The items to display in the group.
+   */
+  items: AvatarGroupAvatarProps[];
+
+  /**
+   * The label to display at the end of the group.
+   */
+  moreLabel?: string;
+
+  /**
+   * Whether the previous item should be on top of the stack.
+   * If false, the next item will be at the top of the stack.
+   */
+  previousOnTop?: boolean;
+}
+
+export interface AvatarMoreLabelProps {
+  /**
+   * The label to display.
+   */
+  label?: string;
+
+  /**
+   * The size of the element.
+   */
+  size?: AvatarProps["size"];
+
+  /**
+   * The class to apply to the element.
+   */
+  class?: HTMLAttributes["class"];
+}
+
+export type AvatarGroupElement = typeof AvatarGroupRoot | null;
+export type AvatarGroupProps = BaseAvatarGroupProps & {
+  size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  class: HTMLAttributes["class"];
+};
diff --git a/packages/wedges-vue/src/components/avatar-group/variants.ts b/packages/wedges-vue/src/components/avatar-group/variants.ts
new file mode 100644
index 0000000..5aeafa3
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar-group/variants.ts
@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+/* -------------------------------- Variants -------------------------------- */
+const defaultAvatarGroupClasses
+  = "wg-antialiased flex flex-wrap items-center gap-y-1 -space-x-3";
+
+const avatarGroupVariants = cva(defaultAvatarGroupClasses, {
+  variants: {
+    size: {
+      "xs": "-space-x-1",
+      "sm": "-space-x-2",
+      "md": "-space-x-3",
+      "lg": "-space-x-4",
+      "xl": "-space-x-5",
+      "2xl": "-space-x-6",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export { avatarGroupVariants, defaultAvatarGroupClasses };
diff --git a/packages/wedges-vue/src/components/avatar/Avatar.vue b/packages/wedges-vue/src/components/avatar/Avatar.vue
new file mode 100644
index 0000000..c48a277
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/Avatar.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { AvatarFallback as Fallback } from "radix-vue";
+
+import { UserIcon } from "@iconicicons/vue3";
+import { type HTMLAttributes, computed, useSlots } from "vue";
+import LemonSqueezyIcon from "../icons/LemonSqueezyIcon.vue";
+import AvatarFallback from "./AvatarFallback.vue";
+import AvatarImage from "./AvatarImage.vue";
+import AvatarNotification from "./AvatarNotification.vue";
+import AvatarRoot from "./AvatarRoot.vue";
+import AvatarStatus from "./AvatarStatus.vue";
+import type { AvatarProps } from "./types";
+import {
+  avatarVariants,
+  fallbackVariants,
+  notificationVariants,
+  statusVariants,
+} from "./variants";
+import {
+  cn,
+  getElementFromHash,
+  hasSlotContent,
+  stringToHash,
+} from "@/lib/utils";
+
+defineOptions({
+  name: "Avatar"
+});
+
+const props = withDefaults(
+  defineProps<AvatarProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    initials: "",
+  },
+);
+
+const bgColor = computed(() => {
+  // Get a random color for initial variant.
+  const randomColors = [
+    "bg-wg-blue",
+    "bg-wg-pink",
+    "bg-wg-purple",
+    "bg-wg-green",
+    "bg-wg-orange",
+    "bg-wg-yellow",
+    "bg-wg-red",
+  ];
+
+  const identifier
+    = (props.initials ?? "")
+    + (props.size ?? "")
+    + (props.status ?? "")
+    + (props.notification ?? "")
+    + (props.src ?? "");
+  const color = getElementFromHash(stringToHash(identifier), randomColors);
+
+  return color ?? !randomColors[0];
+});
+
+const hasDefaultSlot = hasSlotContent(useSlots().default);
+</script>
+
+<template>
+  <AvatarRoot
+    :class="
+      cn(
+        avatarVariants({ size }),
+        !src && !initials && hasDefaultSlot && 'aspect-auto w-auto',
+      )
+    "
+  >
+    <template v-if="src">
+      <AvatarImage v-bind="props" :src />
+    </template>
+
+    <template v-if="hasDefaultSlot">
+      <AvatarFallback
+        :aria-label="alt"
+        :class="props.class"
+        :style="$attrs.style"
+      >
+        <slot />
+      </AvatarFallback>
+    </template>
+
+    <template v-if="!hasDefaultSlot && src && !initials">
+      <AvatarFallback
+        :aria-label="alt"
+        :class="cn('text-surface-300', props.class)"
+        :style="$attrs.style"
+      >
+        <LemonSqueezyIcon
+          aria-hidden="true"
+          class="mr-[-4.5%] w-auto fill-current stroke-none"
+          :class="cn(fallbackVariants({ size }))"
+        />
+      </AvatarFallback>
+    </template>
+
+    <template v-if="!hasDefaultSlot && initials">
+      <Fallback
+        :aria-label="alt"
+        :class="
+          cn(
+            'flex aspect-square grow select-none items-center justify-center rounded-full uppercase text-white',
+            bgColor,
+            props.class,
+          )
+        "
+        :style="$attrs.style"
+      >
+        {{ initials }}
+      </Fallback>
+    </template>
+
+    <AvatarFallback
+      v-if="!hasDefaultSlot && !src && !initials"
+      :aria-label="alt"
+      role="img"
+      :class="props.class"
+    >
+      <UserIcon :class="fallbackVariants({ size })" />
+    </AvatarFallback>
+
+    <!-- Status and Notification -->
+    <AvatarStatus
+      v-if="status"
+      :class="statusVariants({ status })"
+      :ring="size === 'xxs' ? 1 : 2"
+    />
+
+    <AvatarNotification
+      v-if="notification"
+      :class="notificationVariants({ notification })"
+      :ring="size === 'xxs' ? 1 : 2"
+    />
+  </AvatarRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/AvatarFallback.vue b/packages/wedges-vue/src/components/avatar/AvatarFallback.vue
new file mode 100644
index 0000000..a69c2da
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/AvatarFallback.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  AvatarFallbackProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <AvatarFallback
+    :class="
+      cn(
+        'flex items-center justify-center rounded-full aspect-square grow bg-surface-100 text-surface-400 dark:bg-neutral-800',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/AvatarImage.vue b/packages/wedges-vue/src/components/avatar/AvatarImage.vue
new file mode 100644
index 0000000..473b49a
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/AvatarImage.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarImage"
+});
+
+const props = defineProps<
+  AvatarImageProps & { class?: HTMLAttributes["class"] }
+>();
+</script>
+
+<template>
+  <AvatarImage
+    :class="
+      cn(
+        'object-cover object-center w-full rounded-full aspect-square grow',
+        props.class,
+      )
+    "
+    v-bind="props"
+  />
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/AvatarNotification.vue b/packages/wedges-vue/src/components/avatar/AvatarNotification.vue
new file mode 100644
index 0000000..e8fb784
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/AvatarNotification.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { notificationClasses } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarNotification"
+});
+
+const props = withDefaults(
+  defineProps<{
+    ring?: 1 | 2;
+  }>(),
+  {
+    ring: 2,
+  },
+);
+
+const ringSize = props.ring === 1 ? "ring-1" : "ring-2";
+</script>
+
+<template>
+  <span
+    :class="cn(notificationClasses, `bg-wg-gray ${ringSize} ${$attrs.class}`)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/AvatarRoot.vue b/packages/wedges-vue/src/components/avatar/AvatarRoot.vue
new file mode 100644
index 0000000..dab9d3e
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/AvatarRoot.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { AvatarRoot } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { rootClasses } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarRoot"
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <AvatarRoot :class="cn(rootClasses, props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/AvatarStatus.vue b/packages/wedges-vue/src/components/avatar/AvatarStatus.vue
new file mode 100644
index 0000000..ba01e4d
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/AvatarStatus.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { statusClasses } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "AvatarStatus"
+});
+
+const props = withDefaults(
+  defineProps<{
+    ring?: 1 | 2;
+  }>(),
+  {
+    ring: 2,
+  },
+);
+
+const ringSize = props.ring === 1 ? "ring-1" : "ring-2";
+</script>
+
+<template>
+  <span :class="cn(statusClasses, `bg-wg-gray ${ringSize} ${$attrs.class}`)">
+    <slot />
+  </span>
+</template>
diff --git a/packages/wedges-vue/src/components/avatar/index.ts b/packages/wedges-vue/src/components/avatar/index.ts
new file mode 100644
index 0000000..6960e59
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/index.ts
@@ -0,0 +1,7 @@
+export { default as Avatar } from "./Avatar.vue";
+export { default as AvatarImage } from "./AvatarImage.vue";
+export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as AvatarRoot } from "./AvatarRoot.vue";
+export { default as AvatarStatus } from "./AvatarStatus.vue";
+
+export { type AvatarProps } from "./types";
diff --git a/packages/wedges-vue/src/components/avatar/types.ts b/packages/wedges-vue/src/components/avatar/types.ts
new file mode 100644
index 0000000..c77bc8a
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/types.ts
@@ -0,0 +1,71 @@
+import type { VariantProps } from "class-variance-authority";
+import type { Primitive } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import type {
+  avatarVariants,
+  fallbackVariants,
+  notificationVariants,
+  statusVariants,
+} from "./variants";
+
+export interface AvatarProps {
+
+  /**
+   * Represents the alt text for the Avatar.
+   *
+   * - Used for accessibility purposes.
+   */
+  alt?: string;
+
+  /**
+   * Represents the initials displayed on the Avatar.
+   *
+   * - Supports single characters, two characters, or full words.
+   * - For full words, initials will be derived from the first letter of the
+   *   first word and the first letter of the last word.
+   *
+   * Example: "John Doe" => "JD"
+   */
+
+  initials?: string;
+
+  /**
+   * Represents the notification count displayed on the Avatar.
+   *
+   * - Used to indicate the number of unread messages, notifications, etc.
+   */
+
+  notification?: NotificationVariants["notification"];
+
+  /**
+   * Represents the size of the Avatar.
+   *
+   * - Used to determine the dimensions of the Avatar.
+   */
+
+  size?: AvatarVariants["size"];
+
+  /**
+   * Represents the source of the image displayed on the Avatar.
+   *
+   * - Used to display a user's profile picture, a group's logo, etc.
+   */
+  src?: string;
+
+  /**
+   * Represents the status displayed on the Avatar.
+   *
+   * - Used to indicate the availability or activity of a user.
+   */
+
+  status?: StatusVariants["status"];
+
+  style?: HTMLAttributes["style"];
+}
+
+export type AvatarElement = typeof Primitive.Image | HTMLSpanElement;
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>;
+export type NotificationVariants = VariantProps<typeof notificationVariants>;
+export type StatusVariants = VariantProps<typeof statusVariants>;
+export type FallbackVariants = VariantProps<typeof fallbackVariants>;
diff --git a/packages/wedges-vue/src/components/avatar/variants.ts b/packages/wedges-vue/src/components/avatar/variants.ts
new file mode 100644
index 0000000..8a4d226
--- /dev/null
+++ b/packages/wedges-vue/src/components/avatar/variants.ts
@@ -0,0 +1,74 @@
+import { cva } from "class-variance-authority";
+
+export const rootClasses
+  = "h-10 min-w-10 [--wg-notification-size:10px] relative inline-flex aspect-square shrink-0 items-center wg-antialiased";
+
+export const statusClasses
+  = "absolute right-0 bottom-0 aspect-square bg-wg-gray-300 h-[var(--wg-notification-size,10px)] rounded-full ring-background";
+
+export const notificationClasses
+  = "absolute right-0 top-0 aspect-square h-[var(--wg-notification-size,10px)] rounded-full ring-background";
+
+export const avatarVariants = cva(rootClasses, {
+  variants: {
+    size: {
+      "xxs": "h-4 min-w-4 text-xxs [--wg-notification-size:4px]",
+      "xs": "h-6 min-w-6 text-xs [--wg-notification-size:6px]",
+      "sm": "h-8 min-w-8 text-sm [--wg-notification-size:8px]",
+      "md": "h-10 min-w-10 text-base [--wg-notification-size:10px]",
+      "lg": "h-12 min-w-12 text-lg [--wg-notification-size:12px]",
+      "xl": "h-14 min-w-14 text-xl [--wg-notification-size:14px]",
+      "2xl": "h-16 min-w-16 text-2xl [--wg-notification-size:16px]",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const fallbackVariants = cva("", {
+  variants: {
+    size: {
+      "xxs": "size-3",
+      "xs": "size-4",
+      "sm": "size-5",
+      "md": "size-6",
+      "lg": "size-7",
+      "xl": "size-8",
+      "2xl": "size-10",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export const statusVariants = cva(statusClasses, {
+  variants: {
+    status: {
+      primary: "bg-primary",
+      gray: "bg-wg-gray",
+      green: "bg-wg-green",
+      yellow: "bg-wg-yellow",
+      red: "bg-wg-red",
+    },
+  },
+  defaultVariants: {
+    status: "gray",
+  },
+});
+
+export const notificationVariants = cva(notificationClasses, {
+  variants: {
+    notification: {
+      primary: "bg-primary",
+      gray: "bg-wg-gray",
+      green: "bg-wg-green",
+      yellow: "bg-wg-yellow",
+      red: "bg-wg-red",
+    },
+  },
+  defaultVariants: {
+    notification: "gray",
+  },
+});
diff --git a/packages/wedges-vue/src/components/badge/Badge.vue b/packages/wedges-vue/src/components/badge/Badge.vue
new file mode 100644
index 0000000..7e93e3c
--- /dev/null
+++ b/packages/wedges-vue/src/components/badge/Badge.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import type { BadgeProps } from "./types";
+import { badgeVariants, iconVariants } from "./variants";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "Badge",
+});
+
+withDefaults(defineProps<BadgeProps>(), {
+  color: "gray",
+  shape: "rounded",
+  size: "md",
+  stroke: false,
+});
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ color, shape, size, stroke }))">
+    <Slot :class="[cn(iconVariants({ color })), $attrs.class]">
+      <slot name="before" />
+    </Slot>
+    <span
+      v-if="hasSlotContent($slots.default)"
+      :class="{
+        'px-0.5': size === 'sm',
+        'px-1': size === 'md',
+      }"
+    >
+      <slot />
+    </span>
+    <slot name="after" />
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/badge/index.ts b/packages/wedges-vue/src/components/badge/index.ts
new file mode 100644
index 0000000..1069cfc
--- /dev/null
+++ b/packages/wedges-vue/src/components/badge/index.ts
@@ -0,0 +1,3 @@
+export { default as Badge } from "./Badge.vue";
+
+export type { BadgeProps } from "./types";
diff --git a/packages/wedges-vue/src/components/badge/types.ts b/packages/wedges-vue/src/components/badge/types.ts
new file mode 100644
index 0000000..1c284a4
--- /dev/null
+++ b/packages/wedges-vue/src/components/badge/types.ts
@@ -0,0 +1,24 @@
+import type { BadgeVariants } from "./variants";
+
+export interface BadgeProps {
+  /**
+   * Whether the badge has border or not.
+   */
+  stroke?: boolean;
+
+  /**
+   * The color of the badge.
+   */
+  color?: BadgeVariants["color"];
+
+  /**
+   * The shape of the badge.
+   */
+  shape?: BadgeVariants["shape"];
+
+  /**
+   * The size of the badge.
+   */
+
+  size?: BadgeVariants["size"];
+}
diff --git a/packages/wedges-vue/src/components/badge/variants.ts b/packages/wedges-vue/src/components/badge/variants.ts
new file mode 100644
index 0000000..0bb72c7
--- /dev/null
+++ b/packages/wedges-vue/src/components/badge/variants.ts
@@ -0,0 +1,102 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+const defaultDarkClasses = "dark:wg-bg-surface/5 dark:outline-surface-50";
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-lg px-2 py-1 wg-antialiased",
+  {
+    variants: {
+      size: {
+        sm: "text-xs leading-4",
+        md: "text-sm leading-5",
+      },
+      color: {
+        gray: [
+          "text-surface-900 outline-surface-200 wg-bg-surface dark:text-surface-800 dark:outline-surface-100",
+          defaultDarkClasses,
+        ],
+        green: [
+          "text-wg-green-800 outline-wg-green-200 wg-bg-wg-green-50 dark:text-wg-green",
+          defaultDarkClasses,
+        ],
+        purple: [
+          "text-wg-purple-700 outline-wg-purple-200 wg-bg-wg-purple-50 dark:text-wg-purple-400",
+          defaultDarkClasses,
+        ],
+        orange: [
+          "text-wg-orange-800 outline-wg-orange-200 wg-bg-wg-orange-50 dark:text-wg-orange",
+          defaultDarkClasses,
+        ],
+        red: [
+          "text-wg-red-700 outline-wg-red-200 wg-bg-wg-red-50 dark:text-wg-red",
+          defaultDarkClasses,
+        ],
+        pink: [
+          "text-wg-pink-800 outline-wg-pink-200 wg-bg-wg-pink-50 dark:text-wg-pink",
+          defaultDarkClasses,
+        ],
+        blue: [
+          "text-wg-blue-700 outline-wg-blue-200 wg-bg-wg-blue-50 dark:text-wg-blue",
+          defaultDarkClasses,
+        ],
+        yellow: [
+          "text-wg-yellow-800 outline-wg-yellow-300 wg-bg-wg-yellow-50 dark:text-wg-yellow",
+          defaultDarkClasses,
+        ],
+        primary: [
+          "text-primary-800 outline-primary-200 wg-bg-primary-50 dark:text-primary-300",
+          defaultDarkClasses,
+        ],
+      },
+      shape: {
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+      },
+      stroke: {
+        true: "outline outline-1 -outline-offset-1",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      color: "gray",
+      shape: "rounded",
+    },
+  },
+);
+
+export const iconVariants = cva("size-4", {
+  variants: {
+    color: {
+      gray: "text-surface-400",
+      green: "text-wg-green-700",
+      purple: "text-wg-purple-700",
+      orange: "text-wg-orange-700",
+      red: "text-wg-red-700",
+      pink: "text-wg-pink-700",
+      blue: "text-wg-blue-700",
+      yellow: "text-wg-yellow-700",
+      primary: "text-primary-700",
+    },
+  },
+  compoundVariants: [
+    {
+      color: [
+        "green",
+        "purple",
+        "orange",
+        "red",
+        "pink",
+        "blue",
+        "yellow",
+        "primary",
+      ],
+      class: "dark:text-current",
+    },
+  ],
+  defaultVariants: {
+    color: "gray",
+  },
+});
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;
diff --git a/packages/wedges-vue/src/components/button-group/ButtonGroup.vue b/packages/wedges-vue/src/components/button-group/ButtonGroup.vue
new file mode 100644
index 0000000..66393ff
--- /dev/null
+++ b/packages/wedges-vue/src/components/button-group/ButtonGroup.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { provide } from "vue";
+import type { ButtonGroupProps, ButtonGroupProviderProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "ButtonGroup"
+});
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  size: "md",
+  disabled: false,
+  orientation: "horizontal",
+});
+
+provide<ButtonGroupProviderProps>("ButtonGroup", {
+  size: props.size,
+  disabled: props.disabled,
+  orientation: props.orientation,
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'dark:shadow:none inline-flex flex-wrap items-stretch divide-surface-100 rounded-[9px] border border-surface-200 shadow-wg-xs dark:border-surface-100',
+        props.orientation === 'vertical' && 'flex-col divide-y',
+        props.orientation === 'horizontal' && 'divide-x',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/button-group/ButtonGroupItem.vue b/packages/wedges-vue/src/components/button-group/ButtonGroupItem.vue
new file mode 100644
index 0000000..56e6c2a
--- /dev/null
+++ b/packages/wedges-vue/src/components/button-group/ButtonGroupItem.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import { type HTMLAttributes, computed, inject, useSlots } from "vue";
+import Button from "../button/Button.vue";
+import type { ButtonGroupProviderProps } from "./types";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "ButtonGroupItem"
+});
+
+const props = withDefaults(
+  defineProps<{
+    asChild?: boolean;
+    isIconOnly?: boolean;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    asChild: false,
+  },
+);
+
+const provided = inject<ButtonGroupProviderProps>("ButtonGroup");
+
+if (!provided)
+  throw new Error("ButtonGroupItem must be used within a ButtonGroup");
+
+const { size, disabled, orientation } = provided;
+
+const slots = useSlots();
+
+const isIcon = computed(() => {
+  const hasDefaultSlot = hasSlotContent(slots.default);
+  const hasBeforeSlot = hasSlotContent(slots.before);
+  const hasAfterSlot = hasSlotContent(slots.after);
+
+  return (
+    (hasBeforeSlot && !hasAfterSlot && !hasDefaultSlot && size)
+    ?? (hasAfterSlot && !hasBeforeSlot && !hasDefaultSlot && size)
+    ?? props.isIconOnly === true
+    ?? false
+  );
+});
+</script>
+
+<template>
+  <Component
+    :is="asChild ? Slot : Button"
+    :class="
+      cn(
+        'flex items-center rounded-none bg-clip-padding focus-visible:z-10 focus-visible:-outline-offset-1',
+        'last-of-type:[&+span]:hidden',
+        orientation === 'horizontal'
+          ? 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg'
+          : 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
+
+        size === 'sm' && 'max-h-[30px]',
+        isIcon && size === 'sm' && 'px-2 py-6px [--wg-border-width:1px]',
+        isIcon && size === 'md' && 'px-3 py-8px [--wg-border-width:1px]',
+
+        props.class,
+      )
+    "
+    :disabled
+    :size
+    variant="transparent"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <slot />
+
+    <template #after>
+      <slot name="after" />
+    </template>
+  </Component>
+</template>
diff --git a/packages/wedges-vue/src/components/button-group/index.ts b/packages/wedges-vue/src/components/button-group/index.ts
new file mode 100644
index 0000000..9cfb4cc
--- /dev/null
+++ b/packages/wedges-vue/src/components/button-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ButtonGroup } from "./ButtonGroup.vue";
+export { default as ButtonGroupItem } from "./ButtonGroupItem.vue";
diff --git a/packages/wedges-vue/src/components/button-group/types.ts b/packages/wedges-vue/src/components/button-group/types.ts
new file mode 100644
index 0000000..56cc3fa
--- /dev/null
+++ b/packages/wedges-vue/src/components/button-group/types.ts
@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "vue";
+import type { DataOrientation } from "../types";
+import type { ButtonProps } from "../button/types";
+
+export interface ButtonGroupProps {
+  /**
+   * The size of the buttons in group.
+   */
+  size?: "sm" | "md";
+
+  /**
+   * Disable all actions on buttons within this group.
+   */
+  disabled?: boolean;
+
+  /**
+   * Orientation of the group.
+   */
+  orientation?: DataOrientation;
+
+  /**
+   * Additional classes to apply to the group.
+   */
+  class?: HTMLAttributes["class"];
+}
+
+export interface ButtonGroupProviderProps {
+  size?: ButtonGroupProps["size"];
+  disabled?: ButtonGroupProps["disabled"];
+  orientation?: ButtonGroupProps["orientation"];
+}
+
+export type ButtonGroupElement = HTMLDivElement;
+
+export type ButtonGroupItemProps = Omit<
+  ButtonProps,
+  "variant" | "shape" | "size"
+>;
diff --git a/packages/wedges-vue/src/components/button/Button.vue b/packages/wedges-vue/src/components/button/Button.vue
new file mode 100644
index 0000000..ee2b076
--- /dev/null
+++ b/packages/wedges-vue/src/components/button/Button.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { Primitive, Slot } from "radix-vue";
+import { computed, useSlots } from "vue";
+import type { ButtonProps, Size } from "./types";
+import { buttonVariants, iconVariants } from "./variants";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "Button",
+});
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  as: "button",
+  variant: "primary",
+  size: "md",
+  shape: "rounded",
+});
+
+const iconOnlyPadding: Record<Size, string | boolean> = {
+  "md": "p-8px",
+  "sm": "p-6px",
+  "xs-icon": "p-2px",
+};
+
+const slots = useSlots();
+
+const isVariantLinkOutlineTertiaryTransparent = computed(() =>
+  ["link", "outline", "tertiary", "transparent"].includes(
+    props.variant as string,
+  ),
+);
+
+const isIcon = computed(() => {
+  const hasDefaultSlot = (slots.default?.() ?? [])?.length > 0;
+  const hasBeforeSlot = (slots.before?.() ?? [])?.length > 0;
+  const hasAfterSlot = (slots.after?.() ?? [])?.length > 0;
+
+  return (
+    !!(hasBeforeSlot && !hasAfterSlot && !hasDefaultSlot && props.size)
+    || (hasAfterSlot && !hasBeforeSlot && !hasDefaultSlot && props.size)
+    || props.isIconOnly === true
+    || false
+  );
+});
+
+const isNonDestructiveIconOnly
+  = isVariantLinkOutlineTertiaryTransparent.value
+  && isIcon.value
+  && !props.destructive;
+</script>
+
+<template>
+  <Primitive
+    :as
+    :as-child
+    :class="
+      cn(
+        buttonVariants({ size, variant, shape, destructive }),
+        variant === 'link'
+          && hasSlotContent($slots.default)
+          && 'focus-visible:outline-0',
+        isIcon && size && iconOnlyPadding[size as Size],
+        props.class,
+      )
+    "
+    :disabled
+  >
+    <Slot
+      :class="[
+        cn(iconVariants({ size, variant, destructive })),
+        {
+          'group-hover:opacity-70': isNonDestructiveIconOnly,
+          'opacity-100': destructive,
+        },
+      ]"
+    >
+      <slot name="before" />
+    </Slot>
+    <slot />
+
+    <Slot
+      :class="[cn(iconVariants({ size, variant, destructive })), props.class]"
+    >
+      <slot name="after" />
+    </Slot>
+  </Primitive>
+</template>
diff --git a/packages/wedges-vue/src/components/button/index.ts b/packages/wedges-vue/src/components/button/index.ts
new file mode 100644
index 0000000..3969054
--- /dev/null
+++ b/packages/wedges-vue/src/components/button/index.ts
@@ -0,0 +1,3 @@
+export { default as Button } from "./Button.vue";
+export { type ButtonProps } from "./types";
+export { buttonVariants } from "./variants";
diff --git a/packages/wedges-vue/src/components/button/types.ts b/packages/wedges-vue/src/components/button/types.ts
new file mode 100644
index 0000000..3fe7ac0
--- /dev/null
+++ b/packages/wedges-vue/src/components/button/types.ts
@@ -0,0 +1,40 @@
+import type { PrimitiveProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import type { ButtonVariants } from "./variants";
+
+export interface ButtonProps extends PrimitiveProps {
+  /**
+   * The variant of the button.
+   */
+  variant: ButtonVariants["variant"];
+  /**
+   * The size of the button.
+   */
+  size?: ButtonVariants["size"];
+  /**
+   * The shape of the button.
+   */
+  shape?: ButtonVariants["shape"];
+  /**
+   * Specifies whether this button has a destructive action.
+   * If `true`, the button should be styled differently to indicate that it will perform a destructive action.
+   */
+  destructive?: boolean;
+
+  class?: HTMLAttributes["class"];
+
+  /** Specifies if the button only contains an icon */
+  isIconOnly?: boolean;
+
+  /**
+   * Specifies whether the button is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * Specifies whether the button is loading.
+   */
+  href?: string;
+}
+
+export type Size = "md" | "sm" | "xs-icon";
diff --git a/packages/wedges-vue/src/components/button/variants.ts b/packages/wedges-vue/src/components/button/variants.ts
new file mode 100644
index 0000000..aaaa437
--- /dev/null
+++ b/packages/wedges-vue/src/components/button/variants.ts
@@ -0,0 +1,130 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "group inline-flex shrink-0 select-none items-center justify-center text-sm font-medium leading-6 transition-colors duration-100 wg-antialiased focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none",
+  {
+    variants: {
+      size: {
+        "xs-icon": "gap-0 px-8px py-1",
+        "sm": "gap-0 px-8px py-1",
+        "md": "gap-1 px-12px py-2",
+      },
+      shape: {
+        rounded: "rounded-lg",
+        pill: "rounded-full",
+      },
+      variant: {
+        primary:
+          "bg-primary text-white outline-primary hover:bg-primary-600 disabled:opacity-50",
+
+        secondary:
+          "bg-secondary text-white outline-secondary hover:bg-secondary-700 disabled:bg-secondary-200 dark:text-secondary-900 dark:hover:bg-secondary-800 dark:disabled:text-wg-white-500",
+
+        tertiary: "bg-surface hover:bg-surface-100",
+
+        outline:
+          "dark:shadow:none border border-solid border-surface-200 shadow-wg-xs [--wg-border-width:1px] hover:bg-surface disabled:border-surface-50 dark:border-surface-100",
+
+        transparent: "bg-transparent hover:bg-surface",
+        link: "p-0 underline underline-offset-3 focus-visible:text-primary",
+      },
+
+      destructive: {
+        true: [],
+        false: [],
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        size: "md",
+        class: "py-8px",
+      },
+      {
+        variant: "outline",
+        size: "sm",
+        class: "py-4px",
+      },
+      {
+        variant: ["primary", "secondary"],
+        destructive: true,
+        class:
+          "bg-destructive text-white outline-destructive hover:bg-destructive-600 disabled:bg-destructive disabled:opacity-50 dark:text-white dark:hover:bg-destructive-600 dark:disabled:text-white",
+      },
+      {
+        variant: "tertiary",
+        destructive: true,
+        class:
+          "bg-destructive-50 hover:bg-destructive-100 disabled:bg-destructive-50 dark:bg-surface dark:hover:bg-surface-200",
+      },
+      {
+        variant: "transparent",
+        destructive: true,
+        class: "hover:bg-destructive-50 dark:hover:bg-surface",
+      },
+      {
+        variant: "outline",
+        destructive: true,
+        class:
+          "border-destructive hover:bg-destructive-50 disabled:border-destructive-100 dark:border-destructive dark:hover:bg-surface dark:disabled:border-destructive-900",
+      },
+      {
+        variant: "link",
+        destructive: true,
+        class:
+          "hover:text-destructive-800 focus-visible:text-destructive-800 dark:hover:text-destructive-400 dark:focus-visible:text-destructive-400",
+      },
+
+      {
+        variant: ["outline", "tertiary", "transparent", "link"],
+        class: "text-surface-900 outline-primary disabled:text-surface-300",
+      },
+      {
+        variant: ["outline", "tertiary", "transparent", "link"],
+        destructive: true,
+        class:
+          "text-destructive-700 outline-destructive disabled:text-destructive-300 dark:text-destructive-500 dark:disabled:text-destructive/50",
+      },
+    ],
+    defaultVariants: {
+      shape: "rounded",
+      size: "md",
+      variant: "primary",
+    },
+  },
+);
+
+export const iconVariants = cva("text-current", {
+  variants: {
+    variant: {
+      primary: "",
+      secondary: "",
+      tertiary: "",
+      outline: "",
+      transparent: "",
+      link: "",
+    },
+    destructive: {
+      true: "text-current",
+    },
+    size: {
+      "xs-icon": "size-5",
+      "sm": "size-5",
+      "md": "size-6",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: ["tertiary", "outline", "transparent", "link"],
+      class: "opacity-50",
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
+export type ButtonIconVariants = VariantProps<typeof iconVariants>;
diff --git a/packages/wedges-vue/src/components/checkbox-group/CheckboxGroup.vue b/packages/wedges-vue/src/components/checkbox-group/CheckboxGroup.vue
new file mode 100644
index 0000000..0ca72fe
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/CheckboxGroup.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits } from "radix-vue";
+import { useId } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { provide, useAttrs } from "vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import type { CheckboxGroupContextProps, CheckboxGroupProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "CheckboxGroup",
+});
+
+const props = defineProps<
+  CheckboxGroupProps & {
+    class?: HTMLAttributes["class"];
+    disabled?: boolean;
+    required?: boolean;
+    label?: string;
+    description?: string;
+    helperText?: string;
+    tooltip?: string;
+  }
+>();
+
+defineEmits<CheckboxRootEmits>();
+
+provide<CheckboxGroupContextProps>("CheckboxGroup", {
+  disabled: props.disabled,
+});
+
+const elId = useId();
+
+const ariaInvalid = useAttrs()["aria-invalid"];
+</script>
+
+<template>
+  <div
+    :aria-describedby="helperText ? `${elId}__describer` : undefined"
+    :aria-labelledby="label ? `${elId}__label` : undefined"
+    class="flex flex-col gap-4"
+    role="group"
+  >
+    <div
+      v-if="label ?? helperText ?? description ?? tooltip"
+      class="flex flex-col"
+    >
+      <div class="inline-flex flex-col">
+        <Label
+          :id="`${elId}__label`"
+          class="cursor-default"
+          :description
+          :disabled
+          :for="elId"
+          :required
+          :tooltip
+        >
+          {{ label }}
+        </Label>
+
+        <LabelHelper :id="`${elId}__describer`" :aria-invalid :disabled>
+          {{ helperText }}
+        </LabelHelper>
+      </div>
+    </div>
+
+    <div
+      v-if="$slots.default"
+      :class="
+        cn(
+          'flex flex-col gap-2',
+          orientation === 'horizontal' && 'flex-row gap-6',
+        )
+      "
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/CheckboxGroupItem.vue b/packages/wedges-vue/src/components/checkbox-group/CheckboxGroupItem.vue
new file mode 100644
index 0000000..374d90c
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/CheckboxGroupItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject } from "vue";
+import { Checkbox, type CheckboxElementProps } from "../checkbox";
+import type { CheckboxGroupContextProps } from "./types";
+
+type CheckboxGroupItemProps = CheckboxElementProps;
+
+defineOptions({
+  name: "CheckboxGroupItem",
+});
+
+defineProps<CheckboxGroupItemProps>();
+
+const injected = inject("CheckboxGroup") as CheckboxGroupContextProps | null;
+
+if (!injected)
+  throw new Error("CheckboxGroupItem must be used within a CheckboxGroup");
+
+const { disabled: ctxDisabled } = injected;
+</script>
+
+<template>
+  <Checkbox
+    class="wg-checkbox-group__item"
+    :disabled="disabled ?? ctxDisabled"
+    :label
+  />
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/CheckboxIndeterminate.vue b/packages/wedges-vue/src/components/checkbox-group/CheckboxIndeterminate.vue
new file mode 100644
index 0000000..1567ee8
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/CheckboxIndeterminate.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg class="scale-100" fill="none" height="24" viewBox="0 0 24 24" width="24">
+    <path
+      clip-rule="evenodd"
+      d="M8 4C5.79086 4 4 5.79086 4 8V16C4 18.2091 5.79086 20 8 20H16C18.2091 20 20 18.2091 20 16V8C20 5.79086 18.2091 4 16 4H8ZM9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13H15C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11H9Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/CheckboxRoot.vue b/packages/wedges-vue/src/components/checkbox-group/CheckboxRoot.vue
new file mode 100644
index 0000000..7073fe6
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/CheckboxRoot.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import { type HTMLAttributes, useSlots } from "vue";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "CheckboxRoot",
+});
+
+const props = defineProps<{
+  asChild?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const slots = useSlots();
+const useAsChild = props.asChild && hasSlotContent(slots.default);
+</script>
+
+<template>
+  <Component
+    :is="useAsChild ? Slot : 'div'"
+    :class="cn('wg-checkbox flex gap-2', props.class)"
+  >
+    <slot />
+  </Component>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/CheckedBoxIcon.vue b/packages/wedges-vue/src/components/checkbox-group/CheckedBoxIcon.vue
new file mode 100644
index 0000000..30043a9
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/CheckedBoxIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+defineProps<{
+  isDisabled?: boolean;
+}>();
+</script>
+
+<template>
+  <svg
+    :class="
+      cn(
+        'aspect-square w-full scale-100',
+        isDisabled && 'text-surface-200 dark:text-surface-100',
+      )
+    "
+    fill="none"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M8 4C5.79086 4 4 5.79086 4 8V16C4 18.2091 5.79086 20 8 20H16C18.2091 20 20 18.2091 20 16V8C20 5.79086 18.2091 4 16 4H8ZM15.7902 10.2702C16.0776 9.97186 16.0686 9.49708 15.7702 9.20976C15.4719 8.92244 14.9971 8.9314 14.7098 9.22977L10.9458 13.1385L9.31677 11.2588C9.04549 10.9458 8.57182 10.912 8.2588 11.1832C7.94579 11.4545 7.91195 11.9282 8.18323 12.2412L10.3499 14.7412C10.4879 14.9004 10.6864 14.9942 10.897 14.9997C11.1076 15.0053 11.3108 14.922 11.4569 14.7702L15.7902 10.2702Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/EmptyCheckboxIcon.vue b/packages/wedges-vue/src/components/checkbox-group/EmptyCheckboxIcon.vue
new file mode 100644
index 0000000..aa44640
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/EmptyCheckboxIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{
+  isDisabled?: boolean;
+}>();
+</script>
+
+<template>
+  <svg
+    :class="
+      cn(
+        'wg-unchecked aspect-square w-full scale-100',
+        isDisabled && 'text-surface-100 dark:text-surface-50',
+      )
+    "
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <rect
+      fill="none"
+      height="14.5"
+      rx="3"
+      ry="3"
+      stroke="currentColor"
+      stroke-width="1.5"
+      width="14.5"
+      x="4.75"
+      y="4.75"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox-group/index.ts b/packages/wedges-vue/src/components/checkbox-group/index.ts
new file mode 100644
index 0000000..4ac4d9e
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/index.ts
@@ -0,0 +1,2 @@
+export { default as CheckboxGroup } from "./CheckboxGroup.vue";
+export { default as CheckboxGroupItem } from "./CheckboxGroupItem.vue";
diff --git a/packages/wedges-vue/src/components/checkbox-group/types.ts b/packages/wedges-vue/src/components/checkbox-group/types.ts
new file mode 100644
index 0000000..b84f597
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox-group/types.ts
@@ -0,0 +1,11 @@
+import type { LabelProps } from "radix-vue";
+import type { DataOrientation, LabelHelperProps } from "../types";
+
+export type CheckboxGroupProps = LabelProps &
+  LabelHelperProps & {
+    orientation?: DataOrientation;
+  };
+
+export interface CheckboxGroupContextProps {
+  disabled?: boolean;
+}
diff --git a/packages/wedges-vue/src/components/checkbox/Checkbox.vue b/packages/wedges-vue/src/components/checkbox/Checkbox.vue
new file mode 100644
index 0000000..59cda33
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/Checkbox.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue";
+import {
+  CheckboxIndicator,
+  CheckboxRoot as CheckboxPrimitive,
+  useForwardPropsEmits,
+  useId,
+} from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { computed, inject, useAttrs } from "vue";
+import { LabelHelper } from "../label";
+import Label from "../label/Label.vue";
+import CheckboxIndeterminate from "./CheckboxIndeterminate.vue";
+import CheckboxRoot from "./CheckboxRoot.vue";
+import CheckedBoxIcon from "./CheckedBoxIcon.vue";
+import EmptyCheckboxIcon from "./EmptyCheckboxIcon.vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Checkbox"
+});
+
+const props = defineProps<
+  CheckboxRootProps & {
+    class?: HTMLAttributes["class"];
+    label?: string;
+    description?: string;
+    helperText?: string;
+    tooltip?: string;
+  }
+>();
+
+const emits = defineEmits<CheckboxRootEmits>();
+
+const labelId = useId();
+
+const isIndeterminate = computed(() => props.checked === "indeterminate");
+
+const isInGroup = !!inject("CheckboxGroup", false);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const ariaInvalid = useAttrs()["aria-invalid"];
+</script>
+
+<template>
+  <CheckboxRoot>
+    <CheckboxPrimitive
+      v-bind="forwarded"
+      :id="labelId"
+      :aria-labelledby="label ? `${labelId}__label` : undefined"
+      :class="
+        cn(
+          'group relative flex size-6 items-center justify-center rounded-lg text-surface-200 outline-primary transition-colors duration-100 focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 [&:has([data-state=checked])_.wg-unchecked]:hidden',
+          disabled
+            && 'pointer-events-none text-surface-200 dark:text-surface-100',
+          !disabled && !isIndeterminate && 'hover:text-surface-300',
+          !disabled && isIndeterminate && 'text-primary',
+          props.class,
+        )
+      "
+      :disabled
+    >
+      <template v-if="isIndeterminate">
+        <CheckboxIndeterminate />
+      </template>
+      <template v-else>
+        <EmptyCheckboxIcon />
+      </template>
+
+      <CheckboxIndicator as-child class="absolute text-primary">
+        <CheckboxIndeterminate v-if="isIndeterminate" />
+        <CheckedBoxIcon v-else />
+      </CheckboxIndicator>
+    </CheckboxPrimitive>
+    <slot>
+      <div class="inline-flex flex-col">
+        <Label
+          :id="`${labelId}__label`"
+          :class="cn(isInGroup && 'font-normal')"
+          :description
+          :disabled
+          :for="labelId"
+          :required
+          :tooltip
+        >
+          {{ label }}
+        </Label>
+
+        <LabelHelper
+          :style="`${labelId}__describer`"
+          :aria-invalid="ariaInvalid"
+          :disabled
+        >
+          {{ helperText }}
+        </LabelHelper>
+      </div>
+    </slot>
+  </CheckboxRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox/CheckboxIndeterminate.vue b/packages/wedges-vue/src/components/checkbox/CheckboxIndeterminate.vue
new file mode 100644
index 0000000..1567ee8
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/CheckboxIndeterminate.vue
@@ -0,0 +1,10 @@
+<template>
+  <svg class="scale-100" fill="none" height="24" viewBox="0 0 24 24" width="24">
+    <path
+      clip-rule="evenodd"
+      d="M8 4C5.79086 4 4 5.79086 4 8V16C4 18.2091 5.79086 20 8 20H16C18.2091 20 20 18.2091 20 16V8C20 5.79086 18.2091 4 16 4H8ZM9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13H15C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11H9Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox/CheckboxRoot.vue b/packages/wedges-vue/src/components/checkbox/CheckboxRoot.vue
new file mode 100644
index 0000000..eae82b7
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/CheckboxRoot.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import { type HTMLAttributes, useSlots } from "vue";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "CheckboxRoot"
+});
+
+const props = defineProps<{
+  asChild?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const slots = useSlots();
+const useAsChild = props.asChild && hasSlotContent(slots.default);
+</script>
+
+<template>
+  <Component
+    :is="useAsChild ? Slot : 'div'"
+    :class="cn('wg-checkbox flex gap-2', props.class)"
+  >
+    <slot />
+  </Component>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox/CheckedBoxIcon.vue b/packages/wedges-vue/src/components/checkbox/CheckedBoxIcon.vue
new file mode 100644
index 0000000..30043a9
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/CheckedBoxIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+defineProps<{
+  isDisabled?: boolean;
+}>();
+</script>
+
+<template>
+  <svg
+    :class="
+      cn(
+        'aspect-square w-full scale-100',
+        isDisabled && 'text-surface-200 dark:text-surface-100',
+      )
+    "
+    fill="none"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <path
+      clip-rule="evenodd"
+      d="M8 4C5.79086 4 4 5.79086 4 8V16C4 18.2091 5.79086 20 8 20H16C18.2091 20 20 18.2091 20 16V8C20 5.79086 18.2091 4 16 4H8ZM15.7902 10.2702C16.0776 9.97186 16.0686 9.49708 15.7702 9.20976C15.4719 8.92244 14.9971 8.9314 14.7098 9.22977L10.9458 13.1385L9.31677 11.2588C9.04549 10.9458 8.57182 10.912 8.2588 11.1832C7.94579 11.4545 7.91195 11.9282 8.18323 12.2412L10.3499 14.7412C10.4879 14.9004 10.6864 14.9942 10.897 14.9997C11.1076 15.0053 11.3108 14.922 11.4569 14.7702L15.7902 10.2702Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox/EmptyCheckboxIcon.vue b/packages/wedges-vue/src/components/checkbox/EmptyCheckboxIcon.vue
new file mode 100644
index 0000000..aa44640
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/EmptyCheckboxIcon.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{
+  isDisabled?: boolean;
+}>();
+</script>
+
+<template>
+  <svg
+    :class="
+      cn(
+        'wg-unchecked aspect-square w-full scale-100',
+        isDisabled && 'text-surface-100 dark:text-surface-50',
+      )
+    "
+    fill="none"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <rect
+      fill="none"
+      height="14.5"
+      rx="3"
+      ry="3"
+      stroke="currentColor"
+      stroke-width="1.5"
+      width="14.5"
+      x="4.75"
+      y="4.75"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/checkbox/index.ts b/packages/wedges-vue/src/components/checkbox/index.ts
new file mode 100644
index 0000000..8462a5d
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/index.ts
@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.vue";
+export { default as CheckboxRoot } from "./CheckboxRoot.vue";
+export type { CheckboxElement, CheckboxElementProps } from "./types";
diff --git a/packages/wedges-vue/src/components/checkbox/types.ts b/packages/wedges-vue/src/components/checkbox/types.ts
new file mode 100644
index 0000000..e70fef6
--- /dev/null
+++ b/packages/wedges-vue/src/components/checkbox/types.ts
@@ -0,0 +1,8 @@
+import type { CheckboxRoot, CheckboxRootProps } from "radix-vue";
+import type { LabelHelperProps } from "../types";
+
+export type CheckboxElement = typeof CheckboxRoot;
+export type CheckboxElementProps = CheckboxRootProps &
+  LabelHelperProps & {
+    isIndeterminate?: boolean;
+  };
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenu.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 0000000..36fc120
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRoot,
+  type DropdownMenuRootEmits,
+  type DropdownMenuRootProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+
+defineOptions({
+  name: "DropdownMenu"
+});
+
+const props = defineProps<DropdownMenuRootProps>();
+
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 0000000..42304a0
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CheckIcon } from "../icons";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuCheckboxItem"
+});
+
+const props = defineProps<
+  DropdownMenuCheckboxItemProps & {
+    class?: HTMLAttributes["class"];
+    destructive?: boolean;
+  }
+>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, destructive: __, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'wg-dropdown-menu__checkbox-item relative flex cursor-pointer select-none items-center px-4 py-1 pl-[var(--wg-offset-padding-left,1rem)] outline-none focus:bg-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-40 dark:focus:bg-white/5',
+        !destructive
+          && 'text-surface-900 dark:text-surface-700 [&_svg]:text-surface-900 [&_svg]:opacity-40',
+        destructive && 'text-destructive',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <CheckIcon class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuContent.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 0000000..fba8dac
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuContent"
+});
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 8,
+    align: "start",
+    collisionPadding: 8,
+    inset: false,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          // state animations
+          'data-[side=bottom]:animate-wg-fade-in-down data-[side=left]:animate-wg-fade-in-left data-[side=right]:animate-wg-fade-in-right data-[side=top]:animate-wg-fade-in-up',
+
+          // base styles
+          'flex origin-[var(--radix-popper-transform-origin)] flex-col gap-2 rounded-lg bg-white py-2 text-sm leading-6 text-surface-900 shadow-wg-overlay wg-antialiased dark:border dark:border-surface dark:bg-neutral-800 dark:text-surface-700 dark:shadow-none',
+
+          // has checkbox or radio item - offset start padding
+          props.inset && '[--wg-offset-padding-left:32px]',
+
+          props.class,
+        )
+      "
+      :collision-padding
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuGroup.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 0000000..00cf889
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from "radix-vue";
+
+defineOptions({
+  name: "DropdownMenuGroup"
+});
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuItem.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 0000000..ffeacc3
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuItem,
+  type DropdownMenuItemProps,
+  useForwardProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuItem"
+});
+
+const props = defineProps<
+  DropdownMenuItemProps & {
+    class?: HTMLAttributes["class"];
+    inset?: boolean;
+    destructive?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex cursor-pointer select-none items-center gap-2 px-4 py-1 outline-none focus:bg-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-40 dark:focus:bg-white/5 [&:has(>svg:first-child)]:pl-3',
+        !destructive
+          && 'text-surface-900 dark:text-surface-700 [&_svg]:text-surface-900 [&_svg]:opacity-40',
+        destructive && 'text-destructive',
+        'pl-[var(--wg-offset-padding-left,1rem)]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuLabel.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 0000000..f6e548b
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuLabel,
+  type DropdownMenuLabelProps,
+  useForwardProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuLabel"
+});
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex select-none items-center gap-1 px-4 py-1 text-xxs font-medium uppercase tracking-wider opacity-50',
+        'pl-[var(--wg-offset-padding-left,1rem)]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioGroup.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 0000000..f0a0316
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  DropdownMenuRadioGroup,
+  type DropdownMenuRadioGroupEmits,
+  type DropdownMenuRadioGroupProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+
+defineOptions({
+  name: "DropdownMenuRadioGroup"
+});
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioItem.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 0000000..8267620
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  type DropdownMenuRadioItemEmits,
+  type DropdownMenuRadioItemProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { CircleIcon } from "../icons";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuRadioItem"
+});
+
+const props = defineProps<
+  DropdownMenuRadioItemProps & {
+    class?: HTMLAttributes["class"];
+    destructive?: boolean;
+  }
+>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'wg-dropdown-menu__checkbox-item relative flex cursor-pointer select-none items-center px-4 py-1 pl-[var(--wg-offset-padding-left,1rem)] outline-none focus:bg-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-40 dark:focus:bg-white/5',
+        !destructive
+          && 'text-surface-900 dark:text-surface-700 [&_svg]:text-surface-900 [&_svg]:opacity-40',
+        destructive && 'text-destructive',
+        props.class,
+      )
+    "
+  >
+    <span class="flex items-center justify-center">
+      <DropdownMenuItemIndicator class="flex items-center justify-center">
+        <CircleIcon class="absolute left-2" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSeparator.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 0000000..d4a12ec
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuSeparator"
+});
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes["class"];
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn('h-px bg-surface-100 dark:bg-white/5', props.class)"
+  />
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuShortcut.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 0000000..bc5ad28
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuShortcut"
+});
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <span
+    :class="
+      cn(
+        'shadow-0 ms-auto border-0 bg-transparent p-0 ps-4 text-xs text-surface-500 dark:bg-transparent dark:text-surface-500',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSub.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 0000000..aaaf92d
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+
+defineOptions({
+  name: "DropdownMenuSub"
+});
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubContent.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 0000000..a49225b
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuSubContent"
+});
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuSubContentProps & {
+      class?: HTMLAttributes["class"];
+      inset?: boolean;
+      collisionPadding?: number;
+      sideOffset?: number;
+      alignOffset?: number;
+    }
+  >(),
+  {
+    collisionPadding: 8,
+    sideOffset: -4,
+    alignOffset: -9,
+  },
+);
+
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        // state animations
+        'data-[side=bottom]:animate-wg-fade-in-down data-[side=left]:animate-wg-fade-in-left data-[side=right]:animate-wg-fade-in-right data-[side=top]:animate-wg-fade-in-up data-[state=closed]:animate-wg-fade-out',
+
+        // base styles
+        'z-50 flex min-w-[9rem] origin-[var(--radix-popper-transform-origin)] flex-col gap-2 rounded-lg bg-white py-2 shadow-wg-overlay dark:border dark:border-surface dark:bg-neutral-800 dark:shadow-none',
+
+        // has checkbox or radio item - offset start padding
+        inset && '[--wg-offset-padding-left:34px]',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 0000000..fa4a55c
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "DropdownMenuSubTrigger"
+});
+
+const props = defineProps<
+  DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex cursor-pointer select-none items-center gap-2 px-4 py-1 leading-6 text-surface-900 outline-none focus:bg-surface data-[disabled]:pointer-events-none data-[state=open]:bg-surface data-[disabled]:opacity-50 dark:text-surface-700 dark:focus:bg-white/5 dark:data-[state=open]:bg-white/5',
+        '[&_svg]:text-surface-900 [&_svg]:opacity-40',
+        props.class,
+      )
+    "
+  >
+    <slot />
+    <svg
+      class="ms-auto size-6 text-surface-500"
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+    >
+      <path
+        d="M10.75 8.75L14.25 12L10.75 15.25"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuTrigger.vue b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 0000000..bfdee74
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import {
+  DropdownMenuTrigger,
+  type DropdownMenuTriggerProps,
+  useForwardProps,
+} from "radix-vue";
+
+defineOptions({
+  name: "DropdownMenuTrigger"
+});
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/packages/wedges-vue/src/components/dropdown-menu/index.ts b/packages/wedges-vue/src/components/dropdown-menu/index.ts
new file mode 100644
index 0000000..84f7c3a
--- /dev/null
+++ b/packages/wedges-vue/src/components/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { DropdownMenuPortal } from "radix-vue";
+
+export { default as DropdownMenu } from "./DropdownMenu.vue";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
diff --git a/packages/wedges-vue/src/components/icons/CheckIcon.vue b/packages/wedges-vue/src/components/icons/CheckIcon.vue
new file mode 100644
index 0000000..eadd7f5
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/CheckIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+  <svg
+    :class="cn('!opacity-100', props.class)"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <path
+      d="M7.75 12.75L10 15.25L16.25 8.75"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/CircleIcon.vue b/packages/wedges-vue/src/components/icons/CircleIcon.vue
new file mode 100644
index 0000000..2273133
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/CircleIcon.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <svg
+    :class="cn('!opacity-100', props.class)"
+    fill="currentColor"
+    height="24"
+    stroke="none"
+    viewBox="0 0 24 24"
+    width="24"
+  >
+    <circle cx="12" cy="12" fill="currentColor" r="2.5" />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/CloseIcon.vue b/packages/wedges-vue/src/components/icons/CloseIcon.vue
new file mode 100644
index 0000000..2f5ba17
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/CloseIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useId } from "radix-vue";
+import type { IconProps } from "./types";
+
+const props = defineProps<IconProps>();
+
+const titleId = props.title ? `wg-${useId()}` : undefined;
+</script>
+
+<template>
+  <svg
+    :aria-labelledby="titleId"
+    class="text-inherit"
+    fill="currentColor"
+    :height="size"
+    stroke="none"
+    viewBox="0 0 24 24"
+    :width="size"
+  >
+    <title v-if="title" :id="titleId">{{ title }}</title>
+    <path
+      clip-rule="evenodd"
+      d="M6.21967 6.21967C6.51256 5.92678 6.98744 5.92678 7.28033 6.21967L12 10.9393L16.7197 6.21967C17.0126 5.92678 17.4874 5.92678 17.7803 6.21967C18.0732 6.51256 18.0732 6.98744 17.7803 7.28033L13.0607 12L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L12 13.0607L7.28033 17.7803C6.98744 18.0732 6.51256 18.0732 6.21967 17.7803C5.92678 17.4874 5.92678 17.0126 6.21967 16.7197L10.9393 12L6.21967 7.28033C5.92678 6.98744 5.92678 6.51256 6.21967 6.21967Z"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/InfoIcon.vue b/packages/wedges-vue/src/components/icons/InfoIcon.vue
new file mode 100644
index 0000000..106a8c3
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/InfoIcon.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { IconProps } from "./types";
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: 24,
+});
+
+const titleId = props.title
+  ? `wg-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+  : undefined;
+</script>
+
+<template>
+  <svg
+    :aria-labelledby="titleId"
+    fill="currentColor"
+    :height="size"
+    viewBox="0 0 24 24"
+    :width="size"
+  >
+    <title v-if="title" :id="titleId">{{ title }}</title>
+    <path
+      clip-rule="evenodd"
+      d="M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 9C11 8.44772 11.4477 8 12 8C12.5523 8 13 8.44772 13 9C13 9.55228 12.5523 10 12 10C11.4477 10 11 9.55228 11 9ZM12 12C12.5523 12 13 12.4477 13 13V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V13C11 12.4477 11.4477 12 12 12Z"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/LemonSqueezyIcon.vue b/packages/wedges-vue/src/components/icons/LemonSqueezyIcon.vue
new file mode 100644
index 0000000..c85fe8b
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/LemonSqueezyIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const props = defineProps<{ size?: string; title?: string }>();
+
+const titleId = props.title
+  ? `wg-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+  : undefined;
+</script>
+
+<template>
+  <svg
+    :aria-labelledby="titleId"
+    fill="none"
+    :height="size"
+    stroke="currentColor"
+    viewBox="0 0 24 40"
+    :width="size"
+  >
+    <title v-if="title" :id="titleId">{{ title }}</title>
+
+    <path
+      clip-rule="evenodd"
+      d="m6.944 23.185 7.528 3.473a3.85 3.85 0 0 1 1.947 1.982c.9 2.1-.33 4.247-2.26 5.019-1.93.772-3.988.275-4.923-1.908L5.96 24.086c-.254-.594.383-1.178.984-.9ZM7.396 20.938l7.77-2.931c2.583-.975 5.405.869 5.367 3.547l-.003.105c-.055 2.608-2.798 4.36-5.324 3.438l-7.803-2.85a.693.693 0 0 1-.007-1.31ZM6.962 19.922l7.64-3.238c2.538-1.077 3.182-4.307 1.194-6.174a9.046 9.046 0 0 0-.079-.073c-1.949-1.805-5.171-1.17-6.281 1.208l-3.428 7.346c-.273.586.345 1.19.954.931ZM4.995 18.642l2.777-7.598a3.67 3.67 0 0 0-.075-2.732C6.795 6.214 4.354 5.536 2.424 6.31c-1.93.773-3.02 2.53-2.083 4.713l3.298 7.656c.256.593 1.134.57 1.356-.037Z"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/TippyIcon.vue b/packages/wedges-vue/src/components/icons/TippyIcon.vue
new file mode 100644
index 0000000..f7bb02a
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/TippyIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { IconProps } from "./types";
+
+const props = withDefaults(defineProps<IconProps>(), {
+  size: 24,
+});
+
+const titleId = props.title
+  ? `wg-${Date.now()}-${Math.floor(Math.random() * 10000)}`
+  : undefined;
+</script>
+
+<template>
+  <svg
+    :aria-labelledby="titleId"
+    fill="currentColor"
+    height="8"
+    :width="size"
+    viewBox="0 0 24 8"
+  >
+    <title v-if="title" :id="titleId">{{ title }}</title>
+    <path
+      d="M4.55486 0H19.586C17.0713 0 14.5567 3.5825 13.1681 5.95276C12.7242 6.71045 11.4928 6.67361 11.0817 5.89769C9.82569 3.52743 7.46729 0 4.55486 0Z"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/icons/index.ts b/packages/wedges-vue/src/components/icons/index.ts
new file mode 100644
index 0000000..2be934d
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/index.ts
@@ -0,0 +1,6 @@
+export { default as CheckIcon } from "./CheckIcon.vue";
+export { default as CircleIcon } from "./CircleIcon.vue";
+export { default as CloseIcon } from "./CloseIcon.vue";
+export { default as InfoIcon } from "./InfoIcon.vue";
+export { default as LemonSqueezyIcon } from "./LemonSqueezyIcon.vue";
+export { default as TippyIcon } from "./TippyIcon.vue";
diff --git a/packages/wedges-vue/src/components/icons/types.ts b/packages/wedges-vue/src/components/icons/types.ts
new file mode 100644
index 0000000..070022f
--- /dev/null
+++ b/packages/wedges-vue/src/components/icons/types.ts
@@ -0,0 +1,5 @@
+export interface IconProps {
+  color?: string;
+  size?: number;
+  title?: string;
+}
diff --git a/packages/wedges-vue/src/components/input/Input.vue b/packages/wedges-vue/src/components/input/Input.vue
new file mode 100644
index 0000000..a25b712
--- /dev/null
+++ b/packages/wedges-vue/src/components/input/Input.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useId } from "radix-vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import { Label } from "../label";
+import type { InputProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Input"
+});
+
+const props = defineProps<InputProps>();
+
+const modelValue = defineModel("modelValue");
+
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+const ariaInvalid = props.ariaInvalid ?? props.destructive;
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 wg-antialiased">
+    <Label
+      :id="`${elId}__label`"
+      :description
+      :disabled
+      :for="elId"
+      :required
+      :tooltip
+    >
+      {{ label }}
+    </Label>
+
+    <div class="relative flex items-center">
+      <input
+        v-model="modelValue"
+        :aria-describedby="helperText ? `${elId}__describer` : undefined"
+        :aria-invalid
+        :aria-labelledby="label ? `${elId}__label` : undefined"
+        :class="
+          cn(
+            'flex grow rounded-lg border bg-background px-4 py-2 text-sm leading-6 shadow-wg-xs transition-colors duration-100 placeholder:text-surface-500',
+            'outline-primary focus:outline focus:outline-2 focus:-outline-offset-1',
+            !disabled
+              && 'text-surface-900 hover:border-surface-300 dark:hover:border-surface-200',
+            disabled
+              && 'cursor-not-allowed bg-surface-50 text-surface-300 placeholder:text-surface-300/dark:bg-white 5 dark:text-surface-200 dark:placeholder:text-surface-200',
+            ariaInvalid
+              && 'border-destructive outline-destructive hover:border-destructive dark:hover:border-destructive',
+            !ariaInvalid && 'border-surface-200 dark:border-surface-100',
+            props.class,
+          )
+        "
+        :disabled
+        v-bind="$attrs"
+      >
+    </div>
+
+    <LabelHelper :id="`${elId}__describer`" :aria-invalid :disabled>
+      {{ helperText }}
+    </LabelHelper>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/input/index.ts b/packages/wedges-vue/src/components/input/index.ts
new file mode 100644
index 0000000..110f046
--- /dev/null
+++ b/packages/wedges-vue/src/components/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";
diff --git a/packages/wedges-vue/src/components/input/types.ts b/packages/wedges-vue/src/components/input/types.ts
new file mode 100644
index 0000000..2bc8270
--- /dev/null
+++ b/packages/wedges-vue/src/components/input/types.ts
@@ -0,0 +1,15 @@
+import type { LabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import type { LabelHelperProps } from "../types";
+
+export type InputElement = HTMLInputElement;
+export type InputProps = LabelProps &
+  LabelHelperProps & {
+    ariaInvalid?: boolean;
+    class?: HTMLAttributes["class"];
+    id?: HTMLAttributes["id"];
+    description?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+  };
diff --git a/packages/wedges-vue/src/components/kbd/Kbd.vue b/packages/wedges-vue/src/components/kbd/Kbd.vue
new file mode 100644
index 0000000..884423f
--- /dev/null
+++ b/packages/wedges-vue/src/components/kbd/Kbd.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import Key from "./Key.vue";
+import type { KbdKey } from "./types";
+import { type KbdVariants, kbdVariants } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Kbd"
+});
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"];
+    keys?: KbdKey | KbdKey[];
+    size?: KbdVariants["size"];
+  }>(),
+  { size: "xs" },
+);
+</script>
+
+<template>
+  <kbd :class="cn(kbdVariants({ size }), props.class)">
+    <Key v-for="key in keys" :key="key" :key-name="key as KbdKey" />
+    <slot />
+  </kbd>
+</template>
diff --git a/packages/wedges-vue/src/components/kbd/Key.vue b/packages/wedges-vue/src/components/kbd/Key.vue
new file mode 100644
index 0000000..4bc1129
--- /dev/null
+++ b/packages/wedges-vue/src/components/kbd/Key.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type KbdKey, kbdKeysLabelMap, kbdKeysMap } from "./types";
+
+defineOptions({
+  name: "Key"
+});
+
+defineProps<{
+  keyName: KbdKey | null;
+}>();
+</script>
+
+<template>
+  <abbr v-if="keyName" :title="kbdKeysLabelMap[keyName]">{{
+    kbdKeysMap[keyName]
+  }}</abbr>
+</template>
diff --git a/packages/wedges-vue/src/components/kbd/index.ts b/packages/wedges-vue/src/components/kbd/index.ts
new file mode 100644
index 0000000..3409404
--- /dev/null
+++ b/packages/wedges-vue/src/components/kbd/index.ts
@@ -0,0 +1 @@
+export { default as Kbd } from "./Kbd.vue";
diff --git a/packages/wedges-vue/src/components/kbd/types.ts b/packages/wedges-vue/src/components/kbd/types.ts
new file mode 100644
index 0000000..8ff2a35
--- /dev/null
+++ b/packages/wedges-vue/src/components/kbd/types.ts
@@ -0,0 +1,66 @@
+export type KbdKey =
+  | "command"
+  | "shift"
+  | "ctrl"
+  | "option"
+  | "enter"
+  | "delete"
+  | "escape"
+  | "tab"
+  | "capslock"
+  | "up"
+  | "right"
+  | "down"
+  | "left"
+  | "pageup"
+  | "pagedown"
+  | "home"
+  | "end"
+  | "help"
+  | "space";
+
+export const kbdKeysMap: Record<KbdKey, string> = {
+  command: "⌘",
+  shift: "⇧",
+  ctrl: "⌃",
+  option: "⌥",
+  enter: "↵",
+  delete: "⌫",
+  escape: "⎋",
+  tab: "⇥",
+  capslock: "⇪",
+  up: "↑",
+  right: "→",
+  down: "↓",
+  left: "←",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  help: "?",
+  space: "␣",
+};
+
+export const kbdKeysLabelMap: Record<KbdKey, string> = {
+  command: "Command",
+  shift: "Shift",
+  ctrl: "Control",
+  option: "Option",
+  enter: "Enter",
+  delete: "Delete",
+  escape: "Escape",
+  tab: "Tab",
+  capslock: "Caps Lock",
+  up: "Up",
+  right: "Right",
+  down: "Down",
+  left: "Left",
+  pageup: "Page Up",
+  pagedown: "Page Down",
+  home: "Home",
+  end: "End",
+  help: "Help",
+  space: "Space",
+};
+
+export type KbdKeysLabelType = typeof kbdKeysLabelMap;
diff --git a/packages/wedges-vue/src/components/kbd/variants.ts b/packages/wedges-vue/src/components/kbd/variants.ts
new file mode 100644
index 0000000..6f85c63
--- /dev/null
+++ b/packages/wedges-vue/src/components/kbd/variants.ts
@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const kbdVariants = cva(
+  "border-1 inline-flex cursor-default items-center rounded-full border border-surface-200 px-2 font-sans text-surface-500 wg-antialiased dark:border-surface-100 [&>abbr]:no-underline",
+  {
+    variants: {
+      size: {
+        xs: "text-xs leading-6",
+        sm: "text-sm leading-6",
+        md: "py-0.5 text-base leading-6",
+        lg: "py-0.5 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  },
+);
+
+export type KbdVariants = VariantProps<typeof kbdVariants>;
diff --git a/packages/wedges-vue/src/components/label/Label.vue b/packages/wedges-vue/src/components/label/Label.vue
new file mode 100644
index 0000000..d27be6a
--- /dev/null
+++ b/packages/wedges-vue/src/components/label/Label.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { Label as LabelPrimitive, type LabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { computed, useSlots } from "vue";
+import { Tooltip } from "../tooltip";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "Label"
+});
+
+const props = defineProps<
+  LabelProps & {
+    class?: HTMLAttributes["class"];
+    /** Tooltip text to display when hovering over the label */
+    tooltip?: string;
+
+    /** Additional description text, shown next to the primary label */
+    description?: string;
+
+    /** Indicates if the label is associated with a required field */
+    required?: boolean;
+
+    /** Indicates if the label is associated with a disabled field */
+    disabled?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, asChild: __, ...delegated } = props;
+
+  return delegated;
+});
+
+const slots = useSlots();
+
+const useAsChild = props.asChild && hasSlotContent(slots.default);
+</script>
+
+<template>
+  <div
+    class="wg-label inline-flex shrink-0 items-center gap-1 text-surface-900 wg-antialiased"
+  >
+    <LabelPrimitive
+      :as-child="useAsChild"
+      :class="
+        cn(
+          'wg-label inline-flex cursor-pointer items-center gap-1 text-sm font-normal leading-6',
+          props.disabled && 'pointer-events-none text-surface-300',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <!-- {innerContent} -->
+      <template v-if="useAsChild">
+        <slot />
+        <template v-if="required">
+          <span class="text-destructive">*</span>
+        </template>
+      </template>
+
+      <template v-else>
+        <template v-if="$slots.default">
+          <span><slot /></span>
+        </template>
+
+        <span
+          v-if="description"
+          :class="
+            cn('font-normal text-surface-500', props.disabled && 'text-current')
+          "
+        >
+          {{ props.description }}
+        </span>
+
+        <span v-if="required" class="font-normal text-destructive">*</span>
+      </template>
+    </LabelPrimitive>
+
+    <Tooltip v-if="tooltip" :content="tooltip" />
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/label/LabelHelper.vue b/packages/wedges-vue/src/components/label/LabelHelper.vue
new file mode 100644
index 0000000..5ce151b
--- /dev/null
+++ b/packages/wedges-vue/src/components/label/LabelHelper.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Slot } from "radix-vue";
+import { type HTMLAttributes, useAttrs } from "vue";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "LabelHelper"
+});
+
+const props = defineProps<{
+  /** Whether the helper text is in an error state. */
+  error?: boolean;
+
+  /** Whether the helper text is disabled. */
+  disabled?: boolean;
+
+  /** The class to apply to the helper text. */
+  class?: HTMLAttributes["class"];
+}>();
+
+const ariaInvalid = useAttrs()["aria-invalid"];
+</script>
+
+<template>
+  <Component
+    :is="hasSlotContent($slots.default) ? 'span' : Slot"
+    :class="
+      cn(
+        'wg-label__helper text-start text-sm leading-6 text-surface-500 wg-antialiased',
+        (ariaInvalid ?? props.error) && 'text-destructive',
+        disabled && 'text-surface-300',
+        props.class,
+      )
+    "
+    :role="ariaInvalid ? 'alert' : undefined"
+  >
+    <slot />
+  </Component>
+</template>
diff --git a/packages/wedges-vue/src/components/label/index.ts b/packages/wedges-vue/src/components/label/index.ts
new file mode 100644
index 0000000..89c81df
--- /dev/null
+++ b/packages/wedges-vue/src/components/label/index.ts
@@ -0,0 +1,2 @@
+export { default as Label } from "./Label.vue";
+export { default as LabelHelper } from "./LabelHelper.vue";
diff --git a/packages/wedges-vue/src/components/loading/Dots.vue b/packages/wedges-vue/src/components/loading/Dots.vue
new file mode 100644
index 0000000..aa7d60c
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/Dots.vue
@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { LoadingVariants } from "./variants";
+import { calcDimension } from "./utils";
+
+defineOptions({
+  name: "LoadingDots"
+});
+
+const props = defineProps<{
+  size?: LoadingVariants["size"];
+}>();
+
+const delegatedProps = computed(() => {
+  const { size: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const circlesXXL = [
+  { cx: 44, cy: 6, r: 6, opacity: 1 },
+  { cx: 63, cy: 11, r: 6, opacity: 0.05 },
+  { cx: 77, cy: 25, r: 6, opacity: 0.1 },
+  { cx: 82, cy: 44, r: 6, opacity: 0.1 },
+  { cx: 77, cy: 63, r: 6, opacity: 0.2 },
+  { cx: 63, cy: 77, r: 6, opacity: 0.3 },
+  { cx: 44, cy: 82, r: 6, opacity: 0.4 },
+  { cx: 25, cy: 77, r: 6, opacity: 0.5 },
+  { cx: 11, cy: 63, r: 6, opacity: 0.6 },
+  { cx: 6, cy: 44, r: 6, opacity: 0.7 },
+  { cx: 11, cy: 25, r: 6, opacity: 0.8 },
+  { cx: 25, cy: 11, r: 6, opacity: 0.9 },
+];
+
+const circlesXL = [
+  { cx: 32, cy: 4, r: 4, opacity: 1 },
+  { cx: 46, cy: 8, r: 4, opacity: 0.05 },
+  { cx: 56, cy: 18, r: 4, opacity: 0.1 },
+  { cx: 60, cy: 32, r: 4, opacity: 0.1 },
+  { cx: 56, cy: 46, r: 4, opacity: 0.2 },
+  { cx: 46, cy: 56, r: 4, opacity: 0.3 },
+  { cx: 32, cy: 60, r: 4, opacity: 0.4 },
+  { cx: 18, cy: 56, r: 4, opacity: 0.5 },
+  { cx: 8, cy: 46, r: 4, opacity: 0.6 },
+  { cx: 4, cy: 32, r: 4, opacity: 0.7 },
+  { cx: 8, cy: 18, r: 4, opacity: 0.8 },
+  { cx: 18, cy: 8, r: 4, opacity: 0.9 },
+];
+
+const circlesLG = [
+  { cx: 28, cy: 3, r: 3, opacity: 1 },
+  { cx: 40.5, cy: 6.5, r: 3, opacity: 0.05 },
+  { cx: 49.5, cy: 15.5, r: 3, opacity: 0.1 },
+  { cx: 53, cy: 28, r: 3, opacity: 0.1 },
+  { cx: 49.5, cy: 40.5, r: 3, opacity: 0.2 },
+  { cx: 40.5, cy: 49.5, r: 3, opacity: 0.3 },
+  { cx: 28, cy: 53, r: 3, opacity: 0.4 },
+  { cx: 15.5, cy: 49.5, r: 3, opacity: 0.5 },
+  { cx: 6.5, cy: 40.5, r: 3, opacity: 0.6 },
+  { cx: 3, cy: 28, r: 3, opacity: 0.7 },
+  { cx: 6.5, cy: 15.5, r: 3, opacity: 0.8 },
+  { cx: 15.5, cy: 6.5, r: 3, opacity: 0.9 },
+];
+
+const circlesMD = [
+  { cx: 24, cy: 3, r: 3, opacity: 1 },
+  { cx: 34.5, cy: 5.75, r: 3, opacity: 0.05 },
+  { cx: 42.25, cy: 13.5, r: 3, opacity: 0.1 },
+  { cx: 45, cy: 24, r: 3, opacity: 0.1 },
+  { cx: 42.25, cy: 34.5, r: 3, opacity: 0.2 },
+  { cx: 34.5, cy: 42.25, r: 3, opacity: 0.3 },
+  { cx: 24, cy: 45, r: 3, opacity: 0.4 },
+  { cx: 13.5, cy: 42.25, r: 3, opacity: 0.5 },
+  { cx: 5.75, cy: 34.5, r: 3, opacity: 0.6 },
+  { cx: 3, cy: 24, r: 3, opacity: 0.7 },
+  { cx: 5.75, cy: 13.5, r: 3, opacity: 0.8 },
+  { cx: 13.5, cy: 5.75, r: 3, opacity: 0.9 },
+];
+
+const circlesSM = [
+  { cx: 16, cy: 2, r: 2, opacity: 1 },
+  { cx: 23, cy: 4, r: 2, opacity: 0.05 },
+  { cx: 28, cy: 9, r: 2, opacity: 0.1 },
+  { cx: 30, cy: 16, r: 2, opacity: 0.1 },
+  { cx: 28, cy: 23, r: 2, opacity: 0.2 },
+  { cx: 23, cy: 28, r: 2, opacity: 0.3 },
+  { cx: 16, cy: 30, r: 2, opacity: 0.4 },
+  { cx: 9, cy: 28, r: 2, opacity: 0.5 },
+  { cx: 4, cy: 23, r: 2, opacity: 0.6 },
+  { cx: 2, cy: 16, r: 2, opacity: 0.7 },
+  { cx: 4, cy: 9, r: 2, opacity: 0.8 },
+  { cx: 9, cy: 4, r: 2, opacity: 0.9 },
+];
+
+const circlesXS = [
+  { cx: 12, cy: 1.5, r: 1.5, opacity: 1 },
+  { cx: 17.25, cy: 3, r: 1.5, opacity: 0.05 },
+  { cx: 21, cy: 6.75, r: 1.5, opacity: 0.1 },
+  { cx: 22.5, cy: 12, r: 1.5, opacity: 0.1 },
+  { cx: 21, cy: 17.25, r: 1.5, opacity: 0.2 },
+  { cx: 17.25, cy: 21, r: 1.5, opacity: 0.3 },
+  { cx: 12, cy: 22.5, r: 1.5, opacity: 0.4 },
+  { cx: 6.75, cy: 21, r: 1.5, opacity: 0.5 },
+  { cx: 3, cy: 17.25, r: 1.5, opacity: 0.6 },
+  { cx: 1.5, cy: 12, r: 1.5, opacity: 0.7 },
+  { cx: 3, cy: 6.75, r: 1.5, opacity: 0.8 },
+  { cx: 6.75, cy: 3, r: 1.5, opacity: 0.9 },
+];
+
+const circlesXXS = [
+  { cx: 8, cy: 1.5, r: 1.5, opacity: 1 },
+  { cx: 12.5, cy: 3.5, r: 1.5, opacity: 0.05 },
+  { cx: 14.5, cy: 8, r: 1.5, opacity: 0.1 },
+  { cx: 12.5, cy: 12.5, r: 1.5, opacity: 0.3 },
+  { cx: 8, cy: 14.5, r: 1.5, opacity: 0.4 },
+  { cx: 3.5, cy: 12.5, r: 1.5, opacity: 0.6 },
+  { cx: 1.5, cy: 8, r: 1.5, opacity: 0.7 },
+  { cx: 3.5, cy: 3.5, r: 1.5, opacity: 0.8 },
+];
+
+const dimension = calcDimension(props.size);
+</script>
+
+<template>
+  <svg :viewBox="`0 0 ${dimension} ${dimension}`" v-bind="delegatedProps">
+    <template v-if="size === 'xxs'">
+      <circle
+        v-for="(circle, index) in circlesXXS"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'xs'">
+      <circle
+        v-for="(circle, index) in circlesXS"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'sm'">
+      <circle
+        v-for="(circle, index) in circlesSM"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'md'">
+      <circle
+        v-for="(circle, index) in circlesMD"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'lg'">
+      <circle
+        v-for="(circle, index) in circlesLG"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'xl'">
+      <circle
+        v-for="(circle, index) in circlesXL"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+
+    <template v-else-if="size === 'xxl'">
+      <circle
+        v-for="(circle, index) in circlesXXL"
+        :key="index"
+        fill="currentColor"
+        stroke="none"
+        v-bind="circle"
+      />
+    </template>
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/loading/Line.vue b/packages/wedges-vue/src/components/loading/Line.vue
new file mode 100644
index 0000000..bae51f9
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/Line.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { calcDimension, calcStroke } from "./utils";
+import type { LoadingVariants } from "./variants";
+
+defineOptions({
+  name: "LoadingLine"
+});
+
+const props = defineProps<{
+  size: LoadingVariants["size"];
+}>();
+
+const delegatedProps = computed(() => {
+  const { size: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const dimension = calcDimension(props.size);
+const stroke = calcStroke(props.size);
+const radius = dimension / 2 - stroke / 2;
+const circumference = 2 * Math.PI * radius;
+
+function calcPercCircumference(perc: number) {
+  return (perc / 100) * circumference;
+}
+
+const style = {
+  "strokeDasharray": `${circumference}`,
+  "--wg-dashoffset-97": `${calcPercCircumference(97)}px`,
+  "--wg-dashoffset-25": `${calcPercCircumference(25)}px`,
+} as Record<string, string>; // Type assertion
+</script>
+
+<template>
+  <svg :viewBox="`0 0 ${dimension} ${dimension}`" v-bind="delegatedProps">
+    <circle
+      class="origin-center animate-wg-line-spinner"
+      :cx="dimension / 2"
+      :cy="dimension / 2"
+      :r="dimension / 2 - stroke / 2"
+      stroke="currentColor"
+      stroke-linecap="round"
+      :stroke-width="stroke"
+      :style
+      fill="none"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/loading/Loading.vue b/packages/wedges-vue/src/components/loading/Loading.vue
new file mode 100644
index 0000000..93efdf8
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/Loading.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import Dots from "./Dots.vue";
+
+import Line from "./Line.vue";
+import Spinner from "./Spinner.vue";
+import { loadingVariants } from "./variants";
+import type { LoadingProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Loading"
+});
+
+const props = withDefaults(defineProps<LoadingProps>(), {
+  color: "primary",
+  size: "md",
+  type: "line",
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, color: __, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <div
+    :class="cn(loadingVariants({ color, size, type }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <template v-if="type === 'line'">
+      <Line class="size-full animate-spin will-change-transform" :size />
+    </template>
+
+    <template v-else-if="type === 'spinner'">
+      <Spinner
+        class="size-full animate-[spin_.6s_ease-in-out_infinite] will-change-transform"
+        :size
+      />
+    </template>
+
+    <template v-else-if="type === 'dots'">
+      <Dots
+        class="size-full animate-[spin_1.25s_linear_infinite] will-change-transform"
+        :size
+      />
+    </template>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/loading/Spinner.vue b/packages/wedges-vue/src/components/loading/Spinner.vue
new file mode 100644
index 0000000..b4e2a38
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/Spinner.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { LoadingVariants } from "./variants";
+import { calcDimension, calcStroke } from "./utils";
+
+defineOptions({
+  name: "LoadingSpinner"
+});
+
+const props = defineProps<{ size?: LoadingVariants["size"] }>();
+
+const delegatedProps = computed(() => {
+  const { size: _, ...delegated } = props;
+
+  return delegated;
+});
+
+function getDbySize(size: LoadingVariants["size"]) {
+  switch (size) {
+    case "xxs":
+      return "M14 8a6 6 0 00-6-6";
+    case "xs":
+      return "M22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2";
+    case "sm":
+      return "M30 16C30 14.1615 29.6379 12.341 28.9343 10.6424C28.2307 8.94387 27.1995 7.40052 25.8995 6.1005C24.5995 4.80048 23.0561 3.76925 21.3576 3.06569C19.659 2.36212 17.8385 2 16 2";
+    case "md":
+      return "M45 24C45 21.2422 44.4568 18.5115 43.4015 15.9636C42.3461 13.4158 40.7993 11.1008 38.8492 9.15076C36.8992 7.20073 34.5842 5.65388 32.0364 4.59853C29.4885 3.54318 26.7578 3 24 3";
+    case "lg":
+      return "M53 28C53 24.717 52.3534 21.4661 51.097 18.4329C49.8406 15.3998 47.9991 12.6438 45.6777 10.3223C43.3562 8.00087 40.6002 6.15938 37.5671 4.90301C34.5339 3.64664 31.283 3 28 3";
+    case "xl":
+      return "M61 32C61 28.1917 60.2499 24.4206 58.7925 20.9022C57.3351 17.3837 55.199 14.1868 52.5061 11.4939C49.8132 8.801 46.6163 6.66488 43.0978 5.20749C39.5794 3.75011 35.8083 3 32 3";
+    case "xxl":
+      return "M84 44C84 38.7471 82.9654 33.5457 80.9552 28.6927C78.945 23.8396 75.9986 19.4301 72.2843 15.7157C68.5699 12.0014 64.1604 9.05501 59.3073 7.04482C54.4543 5.03463 49.2529 4 44 4";
+    default:
+      return "M45 24C45 21.2422 44.4568 18.5115 43.4015 15.9636C42.3461 13.4158 40.7993 11.1008 38.8492 9.15076C36.8992 7.20073 34.5842 5.65388 32.0364 4.59853C29.4885 3.54318 26.7578 3 24 3";
+  }
+}
+
+const dimension = calcDimension(props.size);
+const stroke = calcStroke(props.size);
+</script>
+
+<template>
+  <svg :viewBox="`0 0 ${dimension} ${dimension}`" v-bind="delegatedProps">
+    <circle
+      :cx="dimension / 2"
+      :cy="dimension / 2"
+      fill="none"
+      :r="dimension / 2 - stroke / 2"
+      :stroke-width="stroke"
+    />
+    <path
+      :d="getDbySize(size)"
+      class="stroke-current"
+      fill="none"
+      stroke-linecap="round"
+      :stroke-width="stroke"
+    />
+  </svg>
+</template>
diff --git a/packages/wedges-vue/src/components/loading/index.ts b/packages/wedges-vue/src/components/loading/index.ts
new file mode 100644
index 0000000..3fc32fe
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/index.ts
@@ -0,0 +1,2 @@
+export { default as Loading } from "./Loading.vue";
+export type { LoadingElement, LoadingProps } from "./types";
diff --git a/packages/wedges-vue/src/components/loading/types.ts b/packages/wedges-vue/src/components/loading/types.ts
new file mode 100644
index 0000000..06cc9cb
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/types.ts
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "vue";
+import type { LoadingVariants } from "./variants";
+
+export type LoadingElement = HTMLDivElement;
+
+export interface LoadingProps {
+  class?: HTMLAttributes["class"];
+  size?: LoadingVariants["size"];
+  color?: LoadingVariants["color"];
+  type?: LoadingVariants["type"];
+}
diff --git a/packages/wedges-vue/src/components/loading/utils.ts b/packages/wedges-vue/src/components/loading/utils.ts
new file mode 100644
index 0000000..774c61e
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/utils.ts
@@ -0,0 +1,43 @@
+import type { LoadingVariants } from "./variants";
+
+export function calcDimension(size: LoadingVariants["size"]) {
+  switch (size) {
+    case "xxs":
+      return 16;
+    case "xs":
+      return 24;
+    case "sm":
+      return 32;
+    case "md":
+      return 48;
+    case "lg":
+      return 56;
+    case "xl":
+      return 64;
+    case "xxl":
+      return 88;
+    default:
+      return 48;
+  }
+}
+
+export function calcStroke(size: LoadingVariants["size"]) {
+  switch (size) {
+    case "xxs":
+      return 4;
+    case "xs":
+      return 4;
+    case "sm":
+      return 4;
+    case "md":
+      return 6;
+    case "lg":
+      return 6;
+    case "xl":
+      return 6;
+    case "xxl":
+      return 8;
+    default:
+      return 6;
+  }
+}
diff --git a/packages/wedges-vue/src/components/loading/variants.ts b/packages/wedges-vue/src/components/loading/variants.ts
new file mode 100644
index 0000000..6970899
--- /dev/null
+++ b/packages/wedges-vue/src/components/loading/variants.ts
@@ -0,0 +1,35 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+export const loadingVariants = cva(
+  "relative inline-flex items-center justify-center border-0",
+  {
+    variants: {
+      color: {
+        primary: "stroke-surface-100 text-primary",
+        secondary: "stroke-surface-100 text-secondary",
+      },
+      size: {
+        xxs: "size-4",
+        xs: "size-6",
+        sm: "size-8",
+        md: "size-12 [--wg-loading-stroke-width:6px]",
+        lg: "size-14",
+        xl: "size-16",
+        xxl: "size-[88px]",
+      },
+      type: {
+        line: "",
+        spinner: "-rotate-45",
+        dots: "",
+      },
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      type: "line",
+    },
+  },
+);
+
+export type LoadingVariants = VariantProps<typeof loadingVariants>;
diff --git a/packages/wedges-vue/src/components/popover/Popover.vue b/packages/wedges-vue/src/components/popover/Popover.vue
new file mode 100644
index 0000000..ea473dc
--- /dev/null
+++ b/packages/wedges-vue/src/components/popover/Popover.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
+import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";
+
+defineOptions({
+  name: "Popover"
+});
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/popover/PopoverContent.vue b/packages/wedges-vue/src/components/popover/PopoverContent.vue
new file mode 100644
index 0000000..53cd89c
--- /dev/null
+++ b/packages/wedges-vue/src/components/popover/PopoverContent.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "PopoverContent",
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 8,
+    collisionPadding: 8,
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'data-[side=top]:wg-animate-fade-in-down data-[side=bottom]:animate-wg-fade-in-up data-[side=left]:animate-wg-fade-in-left data-[side=right]:animate-wg-fade-in-right data-[state=closed]:animate-wg-fade-out',
+          // base styles
+          'flex origin-[var(--radix-popper-transform-origin)] flex-col gap-2 rounded-lg bg-white p-4 text-sm leading-6 text-surface-900 shadow-wg-overlay wg-antialiased dark:border dark:border-surface dark:bg-neutral-800 dark:text-surface-700 dark:shadow-none',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/packages/wedges-vue/src/components/popover/PopoverTrigger.vue b/packages/wedges-vue/src/components/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..fde07dd
--- /dev/null
+++ b/packages/wedges-vue/src/components/popover/PopoverTrigger.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue";
+
+defineOptions({
+  name: "PopoverTrigger"
+});
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/packages/wedges-vue/src/components/popover/index.ts b/packages/wedges-vue/src/components/popover/index.ts
new file mode 100644
index 0000000..2bf54a8
--- /dev/null
+++ b/packages/wedges-vue/src/components/popover/index.ts
@@ -0,0 +1,18 @@
+import {
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverPortal,
+  PopoverTrigger,
+} from "radix-vue";
+
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+
+export {
+  PopoverPortal,
+  PopoverAnchor,
+  PopoverArrow,
+  PopoverClose,
+  PopoverTrigger,
+};
diff --git a/packages/wedges-vue/src/components/progress/ProgressBar.vue b/packages/wedges-vue/src/components/progress/ProgressBar.vue
new file mode 100644
index 0000000..6d5e403
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/ProgressBar.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import {
+  ProgressIndicator,
+  ProgressRoot as ProgressPrimitiveRoot,
+  useId,
+} from "radix-vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import ProgressBarWrapper from "./ProgressBarWrapper.vue";
+import type { ProgressBarProps } from "./types";
+import { progressBarVariants } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "ProgressBar"
+});
+
+const props = withDefaults(defineProps<ProgressBarProps>(), {
+  max: 100,
+  value: null,
+  variant: "default",
+  color: "primary",
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+</script>
+
+<template>
+  <div :class="progressBarVariants({ variant })">
+    <ProgressBarWrapper :variant>
+      <Label
+        v-if="label ?? tooltip ?? description"
+        :id="`${elId}__label`"
+        class="shrink-0 cursor-default"
+        :description
+        :disabled
+        :tooltip
+      >
+        {{ label }}
+      </Label>
+      <span v-else-if="variant === 'default'" />
+
+      <span
+        v-if="
+          indicator
+            || afterIndicator
+            || $slots.indicator
+            || $slots.afterIndicator
+        "
+        :class="
+          cn(
+            'flex shrink-0 items-center gap-1',
+            disabled && 'opacity-50',
+            variant === 'inline' && 'order-3',
+          )
+        "
+      >
+        <span v-if="indicator || $slots.indicator">
+          <slot name="indicator">
+            {{ indicator }}
+          </slot>
+        </span>
+
+        <span
+          v-if="afterIndicator || $slots.afterIndicator"
+          class="flex items-center justify-center text-surface-400"
+        >
+          <slot name="afterIndicator">
+            {{ afterIndicator }}
+          </slot>
+        </span>
+      </span>
+    </ProgressBarWrapper>
+
+    <ProgressPrimitiveRoot
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'shrink-1 relative h-2 w-full overflow-hidden rounded-full bg-surface-100',
+          disabled && 'opacity-50',
+          props.class,
+        )
+      "
+    >
+      <ProgressIndicator
+        :style="`transform: translateX(-${100 - (props.value ?? 0)}%);`"
+        :class="
+          cn(
+            'size-full flex-1 bg-primary transition-all',
+            progressBarVariants({ color }),
+          )
+        "
+      />
+    </ProgressPrimitiveRoot>
+
+    <LabelHelper
+      v-if="variant === 'default'"
+      :id="`${elId}__describer`"
+      :disabled
+      class="w-fit shrink-0"
+    >
+      <slot name="helperText">
+        {{ helperText }}
+      </slot>
+    </LabelHelper>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/progress/ProgressBarWrapper.vue b/packages/wedges-vue/src/components/progress/ProgressBarWrapper.vue
new file mode 100644
index 0000000..35012cb
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/ProgressBarWrapper.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ProgressBarVariants } from "./types";
+
+defineOptions({
+  name: "ProgressBarWrapper"
+});
+
+defineProps<{
+  variant?: ProgressBarVariants["variant"];
+}>();
+</script>
+
+<template>
+  <template v-if="variant === 'default'">
+    <div
+      class="flex items-center justify-between gap-4 self-stretch flex-wrap gap-y-0"
+    >
+      <slot />
+    </div>
+  </template>
+  <template v-else>
+    <slot />
+  </template>
+</template>
diff --git a/packages/wedges-vue/src/components/progress/ProgressCircle.vue b/packages/wedges-vue/src/components/progress/ProgressCircle.vue
new file mode 100644
index 0000000..90d146f
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/ProgressCircle.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { sizeMapping } from "./sizes";
+import { progressCircleVariants } from "./variants";
+import type { ProgressCircleProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "ProgressCircle"
+});
+
+const props = withDefaults(
+  defineProps<ProgressCircleProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    color: "primary",
+    size: "md",
+    max: 100,
+    value: 0,
+  },
+);
+
+const { svgSize, stroke } = sizeMapping[props.size as keyof typeof sizeMapping];
+
+const radius = (svgSize - stroke) / 2;
+const circumference = 2 * Math.PI * radius;
+
+// Adjust the value to be a percentage of the max
+const adjustedValue = (props.value / props.max) * 100;
+
+function defaultLabelValue(value: number, max: number) {
+  return `${Math.round((value / max) * 100)}%`;
+}
+
+const labelValue = computed(() => {
+  return props.getLabelValue
+    ? props.getLabelValue(props.value, props.max)
+    : props.value !== undefined
+      ? defaultLabelValue(props.value, props.max)
+      : "";
+});
+</script>
+
+<template>
+  <div
+    :class="cn('relative', disabled && 'opacity-50')"
+    :style="{ width: svgSize, height: svgSize }"
+  >
+    <svg
+      :width="svgSize"
+      :height="svgSize"
+      :viewBox="`0 0 ${svgSize} ${svgSize}`"
+      :class="cn(progressCircleVariants({ size, color }), props.class)"
+      role="progressbar"
+      :aria-valuenow="value"
+      :aria-valuemin="0"
+      :aria-valuemax="max"
+      fill="none"
+      :data-max="max"
+      :data-value="value ?? null"
+      :data-state="
+        value === undefined
+          ? 'indeterminate'
+          : adjustedValue < 100
+            ? 'loading'
+            : 'complete'
+      "
+    >
+      <!-- {/* Background Circle */} -->
+      <circle
+        :cx="svgSize / 2"
+        :cy="svgSize / 2"
+        :r="radius"
+        class="stroke-inherit"
+        :stroke-width="stroke"
+        fill="none"
+      />
+
+      <!-- Foreground Circle -->
+      <circle
+        :cx="svgSize / 2"
+        :cy="svgSize / 2"
+        :r="radius"
+        stroke="currentColor"
+        :stroke-width="stroke"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="circumference - (value / 100) * circumference"
+        stroke-linecap="round"
+        :class="
+          cn(
+            'h-full',
+            !disableAnimation && 'transition-all duration-300 ease-linear',
+          )
+        "
+        :transform="`rotate(-90 ${svgSize / 2} ${svgSize / 2})`"
+        fill="none"
+      />
+    </svg>
+
+    <span
+      v-if="['xl', 'lg', 'md'].includes(size as string)"
+      :class="
+        cn(
+          'absolute inset-0 flex items-center justify-center',
+          size === 'xl' && 'text-2xl',
+          size === 'lg' && 'text-base',
+          size === 'md' && 'text-xs',
+        )
+      "
+    >
+      {{ labelValue }}
+    </span>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/progress/index.ts b/packages/wedges-vue/src/components/progress/index.ts
new file mode 100644
index 0000000..4a3dd34
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/index.ts
@@ -0,0 +1,2 @@
+export { default as ProgressBar } from "./ProgressBar.vue";
+export { default as ProgressCircle } from "./ProgressCircle.vue";
diff --git a/packages/wedges-vue/src/components/progress/sizes.ts b/packages/wedges-vue/src/components/progress/sizes.ts
new file mode 100644
index 0000000..02ba6ae
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/sizes.ts
@@ -0,0 +1,7 @@
+export const sizeMapping = {
+  xl: { svgSize: 160, stroke: 12 },
+  lg: { svgSize: 88, stroke: 8 },
+  md: { svgSize: 64, stroke: 6 },
+  sm: { svgSize: 32, stroke: 4 },
+  xs: { svgSize: 24, stroke: 4 },
+};
diff --git a/packages/wedges-vue/src/components/progress/types.ts b/packages/wedges-vue/src/components/progress/types.ts
new file mode 100644
index 0000000..b349589
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/types.ts
@@ -0,0 +1,119 @@
+import type { HTMLAttributes } from "vue";
+import type { ProgressRoot } from "radix-vue";
+import type { VariantProps } from "class-variance-authority";
+import type { LabelHelperProps } from "../types";
+import type { progressBarVariants } from "./variants";
+import type { sizeMapping } from "./sizes";
+
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;
+
+export type ProgressBarElement = typeof ProgressRoot;
+export type ProgressBarProps = LabelHelperProps & {
+  class?: HTMLAttributes["class"];
+  /** The progress value.  */
+  value: number | null;
+  /** The maximum progress value. */
+  max?: number;
+  /**
+   * A function to get the accessible label text representing the current value in a human-readable format.
+   *
+   *  If not provided, the value label will be read as the numeric value as a percentage of the max value.
+   */
+  getValueLabel?: (value: number, max: number) => string;
+
+  /**
+   * The indicator to be rendered to the right of the progress bar.
+   */
+  indicator?: string;
+
+  /**
+   * A string to be rendered after the indicator.
+   */
+  afterIndicator?: string;
+
+  /**
+   * If `true`, the progress bar CSS transition will be disabled.
+   */
+  disableAnimation?: boolean;
+
+  /**
+   * The variant of the progress bar.
+   * @default default
+   */
+
+  variant?: ProgressBarVariants["variant"];
+
+  /**
+   * The color of the progress bar.
+   * @default primary
+   */
+
+  color?: ProgressBarVariants["color"];
+
+  /** If `true`, the progress bar will be disabled. */
+  disabled?: boolean;
+
+  /** The helper text to be rendered below the progress bar. */
+  helperText?: string;
+
+  /** The label to be rendered above the progress bar. */
+  label?: string;
+
+  /** The tooltip to be rendered on the label. */
+  tooltip?: string;
+
+  /** The description to be rendered below the label. */
+  description?: string;
+
+  /** The id of the progress bar. */
+  id?: HTMLAttributes["id"];
+};
+
+export type ProgressCircleElement = SVGSVGElement;
+
+export interface ProgressCircleProps {
+  /**
+   * The progress value.
+   */
+  value?: number;
+
+  /**
+   * The maximum progress value.
+   */
+  max?: number;
+
+  /**
+   * A function to get the accessible label text representing the current value in a human-readable format.
+   * If not provided, the value label will be read as the numeric value as a percentage of the max value.
+   */
+  getLabelValue?: (value: number, max: number) => string;
+
+  /**
+   * If `true`, the additional styles will be applied to indicate that the progress bar is disabled.
+   */
+  disabled?: boolean;
+
+  /**
+   * If `true`, the progress bar CSS transition will be disabled.
+   */
+  disableAnimation?: boolean;
+
+  /**
+   * The size of the progress circle.
+   */
+  size?: keyof typeof sizeMapping;
+
+  /**
+   * The color of the progress circle.
+   */
+  color?:
+    | "primary"
+    | "purple"
+    | "green"
+    | "blue"
+    | "orange"
+    | "pink"
+    | "yellow"
+    | "red"
+    | "secondary";
+}
diff --git a/packages/wedges-vue/src/components/progress/variants.ts b/packages/wedges-vue/src/components/progress/variants.ts
new file mode 100644
index 0000000..5612b2e
--- /dev/null
+++ b/packages/wedges-vue/src/components/progress/variants.ts
@@ -0,0 +1,58 @@
+import { cva } from "class-variance-authority";
+
+export const progressBarVariants = cva(
+  "flex w-full text-sm wg-antialiased disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "flex-col gap-2",
+        inline:
+          "min-w-[200px] flex-wrap items-center gap-2 xs:flex-nowrap xs:gap-4",
+      },
+      color: {
+        primary: ["bg-primary"],
+        purple: ["bg-wg-purple"],
+        green: ["bg-wg-green"],
+        blue: ["bg-wg-blue"],
+        orange: ["bg-wg-orange"],
+        pink: ["bg-wg-pink"],
+        yellow: ["bg-wg-yellow"],
+        red: ["bg-wg-red"],
+        secondary: ["bg-secondary"],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export const progressCircleVariants = cva(
+  "scale-100 fill-none stroke-surface-100",
+  {
+    variants: {
+      size: {
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
+        xl: "",
+      },
+      color: {
+        primary: ["text-primary"],
+        purple: ["text-wg-purple"],
+        green: ["text-wg-green"],
+        blue: ["text-wg-blue"],
+        orange: ["text-wg-orange"],
+        pink: ["text-wg-pink"],
+        yellow: ["text-wg-yellow"],
+        red: ["text-wg-red"],
+        secondary: ["text-secondary"],
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary",
+    },
+  },
+);
diff --git a/packages/wedges-vue/src/components/radio-group/RadioGroup.vue b/packages/wedges-vue/src/components/radio-group/RadioGroup.vue
new file mode 100644
index 0000000..8a89556
--- /dev/null
+++ b/packages/wedges-vue/src/components/radio-group/RadioGroup.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import type { HTMLAttributes } from "vue";
+import {
+  RadioGroupRoot,
+  type RadioGroupRootEmits,
+  useForwardPropsEmits,
+  useId,
+} from "radix-vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import type { RadioGroupContextProps, RadioGroupProps } from "./types";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "RadioGroup"
+});
+
+const props = defineProps<
+  RadioGroupProps & {
+    class?: HTMLAttributes["class"];
+    id?: HTMLAttributes["id"];
+    description?: string;
+    helperText?: string;
+    ariaInvalid?: boolean;
+  }
+>();
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+provide<RadioGroupContextProps>("RadioGroup", {
+  disabled: props.disabled,
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const elId = props.id ?? useId();
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('flex flex-col gap-4', props.class)"
+    v-bind="forwarded"
+  >
+    <div
+      v-if="label ?? description ?? tooltip ?? helperText"
+      class="inline-flex flex-col"
+    >
+      <Label
+        :id="`${elId}__label`"
+        class="cursor-auto"
+        :description
+        :disabled
+        :for="elId"
+        :required
+        :tooltip
+      >
+        {{ label }}
+      </Label>
+
+      <LabelHelper
+        :id="`${elId}__describer`"
+        :aria-invalid="ariaInvalid"
+        :disabled="disabled"
+      >
+        {{ helperText }}
+      </LabelHelper>
+    </div>
+
+    <div
+      v-if="hasSlotContent($slots.default)"
+      :class="
+        cn(
+          'flex flex-col gap-2',
+          orientation === 'horizontal' && 'flex-row gap-6',
+        )
+      "
+    >
+      <slot />
+    </div>
+  </RadioGroupRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/radio-group/RadioGroupItem.vue b/packages/wedges-vue/src/components/radio-group/RadioGroupItem.vue
new file mode 100644
index 0000000..fa58d7b
--- /dev/null
+++ b/packages/wedges-vue/src/components/radio-group/RadioGroupItem.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from "radix-vue";
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  useForwardProps,
+  useId,
+} from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { computed, inject } from "vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import Label from "../label/Label.vue";
+import type { RadioGroupContextProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "RadioGroupItem"
+});
+
+const props = defineProps<
+  RadioGroupItemProps & {
+    class?: HTMLAttributes["class"];
+    label?: string;
+    helperText?: string;
+    ariaInvalid?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, disabled: __, id: ___, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const injected = inject("RadioGroup") as RadioGroupContextProps | null;
+
+if (!injected)
+  throw new Error("RadioGroupItem must be used within a RadioGroup");
+
+const { disabled: ctxDisabled } = injected;
+
+const isDisabled = computed(() => ctxDisabled || props.disabled);
+
+const elId = props.id || useId();
+</script>
+
+<template>
+  <div class="wg-radio-group__item flex gap-2">
+    <RadioGroupItem
+      :id="elId"
+      :aria-labelledby="label ? `${elId}__label` : undefined"
+      :class="
+        cn(
+          'group relative flex size-6 items-center justify-center rounded-full text-surface-200 outline-primary transition-colors duration-100 focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 [&:has([data-state=checked])_.wg-unchecked]:hidden',
+          isDisabled
+            && 'pointer-events-none text-surface-200 dark:text-surface-100',
+          !isDisabled
+            && 'hover:text-surface-300 data-[state=checked]:text-primary',
+        )
+      "
+      :disabled="isDisabled"
+      v-bind="forwardedProps"
+    >
+      <svg
+        :class="
+          cn('aspect-square w-full scale-100', isDisabled && 'fill-surface-50')
+        "
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+      >
+        <path
+          d="M19.25 12C19.25 16.0041 16.0041 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 7.99594 7.99594 4.75 12 4.75C16.0041 4.75 19.25 7.99594 19.25 12Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+        />
+      </svg>
+
+      <RadioGroupIndicator as-child>
+        <svg
+          :class="
+            cn(
+              'absolute aspect-square w-full scale-100 text-primary',
+              isDisabled && 'text-surface-200 dark:text-surface-100',
+            )
+          "
+          fill="none"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+        >
+          <path
+            d="M19.25 12C19.25 16.0041 16.0041 19.25 12 19.25C7.99594 19.25 4.75 16.0041 4.75 12C4.75 7.99594 7.99594 4.75 12 4.75C16.0041 4.75 19.25 7.99594 19.25 12Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+          />
+          <path
+            d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </RadioGroupIndicator>
+    </RadioGroupItem>
+
+    <div class="inline-flex flex-col">
+      <Label
+        v-if="label"
+        :id="`${elId}__label`"
+        class="font-normal"
+        :disabled="isDisabled"
+        :for="elId"
+        v-bind="forwardedProps"
+      >
+        {{ label }}
+      </Label>
+
+      <LabelHelper
+        v-if="helperText"
+        :id="`${elId}__describer`"
+        :aria-invalid="ariaInvalid"
+        :disabled="isDisabled"
+      >
+        {{ helperText }}
+      </LabelHelper>
+    </div>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/radio-group/index.ts b/packages/wedges-vue/src/components/radio-group/index.ts
new file mode 100644
index 0000000..1387e43
--- /dev/null
+++ b/packages/wedges-vue/src/components/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as RadioGroupItem } from "./RadioGroupItem.vue";
diff --git a/packages/wedges-vue/src/components/radio-group/types.ts b/packages/wedges-vue/src/components/radio-group/types.ts
new file mode 100644
index 0000000..46beb75
--- /dev/null
+++ b/packages/wedges-vue/src/components/radio-group/types.ts
@@ -0,0 +1,10 @@
+import type { LabelProps, RadioGroupRootProps } from "radix-vue";
+import type { LabelHelperProps } from "../types";
+
+export type RadioGroupProps = RadioGroupRootProps &
+  LabelProps &
+  LabelHelperProps;
+
+export interface RadioGroupContextProps {
+  disabled?: RadioGroupProps["disabled"];
+}
diff --git a/packages/wedges-vue/src/components/slider/Slider.vue b/packages/wedges-vue/src/components/slider/Slider.vue
new file mode 100644
index 0000000..2802e71
--- /dev/null
+++ b/packages/wedges-vue/src/components/slider/Slider.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "radix-vue";
+import {
+  SliderRange,
+  SliderRoot,
+  SliderTrack,
+  useForwardPropsEmits,
+  useId,
+} from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { computed, ref } from "vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import SliderThumb from "./SliderThumb.vue";
+import { cn, hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "Slider"
+});
+
+const props = defineProps<
+  Omit<SliderRootProps, "asChild"> & {
+    /**
+     * Should tooltip be shown always, when hoverign, or never.
+     */
+    showTooltip?: "always" | "hover" | "never";
+
+    /**
+     * Tooltip render function.
+     */
+    renderTooltip?: (value: number) => string;
+
+    class?: HTMLAttributes["class"];
+
+    id?: HTMLAttributes["id"];
+    after?: string;
+    before?: string;
+    label?: string;
+    tooltip?: string;
+    description?: string;
+    disabled?: boolean;
+    helperText?: string;
+    required?: boolean;
+  }
+>();
+
+const emits = defineEmits<SliderRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, id: ___, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const tooltipValue = ref<number[]>(props.defaultValue ?? [0]);
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+
+function onValueChange(value: number[] | undefined) {
+  tooltipValue.value = value === undefined ? [0] : value;
+  // emits["update:modelValue"](value);
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-2', disabled && 'text-surface-300')">
+    <Label
+      :id="`${elId}__label`"
+      :description
+      :disabled
+      :for="elId"
+      :required
+      :tooltip
+    >
+      {{ label }}
+    </Label>
+
+    <div
+      :class="
+        cn(
+          'flex justify-between gap-4 self-stretch',
+          orientation === 'vertical' && 'flex-col items-start',
+          orientation !== 'vertical' && 'items-center',
+        )
+      "
+    >
+      <span v-if="hasSlotContent($slots.before) || props.before">
+        <slot name="before">
+          {{ props.before }}
+        </slot>
+      </span>
+      <SliderRoot
+        :id="elId"
+        :class="
+          cn(
+            'relative flex w-full touch-none select-none items-center',
+            'data-[orientation=horizontal]:min-h-6',
+            'data-[orientation=vertical]:w-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-center data-[orientation=vertical]:px-3',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @update:model-value="onValueChange"
+      >
+        <SliderTrack
+          :class="
+            cn(
+              'relative h-2 w-full grow overflow-hidden rounded-full bg-surface-100',
+              'data-[orientation=vertical]:h-72 data-[orientation=vertical]:w-2',
+              props.class,
+            )
+          "
+        >
+          <SliderRange
+            :class="
+              cn(
+                'absolute rounded-full bg-primary',
+                'data-[orientation=vertical]:left-0 data-[orientation=vertical]:w-full',
+                'data-[orientation=horizontal]:l-0 data-[orientation=horizontal]:h-full',
+                disabled && 'bg-surface-200',
+              )
+            "
+            :aria-disabled="disabled"
+          />
+        </SliderTrack>
+        <SliderThumb
+          v-for="(value, index) in tooltipValue"
+          :key="index"
+          :aria-disabled="disabled"
+          :orientation
+          :show-tooltip
+          :tooltip="
+            showTooltip && showTooltip !== 'never'
+              ? renderTooltip?.(value)
+              : undefined
+          "
+        />
+        <slot />
+      </SliderRoot>
+
+      <span v-if="hasSlotContent($slots.after) || props.after">
+        <slot name="after">
+          {{ props.after }}
+        </slot>
+      </span>
+    </div>
+
+    <LabelHelper :id="`${elId}__describer`" :disabled>
+      {{ helperText }}
+    </LabelHelper>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/slider/SliderThumb.vue b/packages/wedges-vue/src/components/slider/SliderThumb.vue
new file mode 100644
index 0000000..1256f6a
--- /dev/null
+++ b/packages/wedges-vue/src/components/slider/SliderThumb.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import type { SliderThumbProps } from "radix-vue";
+import { SliderThumb, useForwardProps } from "radix-vue";
+import { type HTMLAttributes, computed, ref } from "vue";
+import TooltipProvider from "../tooltip/TooltipProvider.vue";
+import TooltipRoot from "../tooltip/TooltipRoot.vue";
+import TooltipTrigger from "../tooltip/TooltipTrigger.vue";
+import TooltipContent from "../tooltip/TooltipContent.vue";
+import type { DataOrientation } from "../types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "SliderThumb"
+});
+
+const props = withDefaults(
+  defineProps<
+    SliderThumbProps & {
+      class?: HTMLAttributes["class"];
+      tooltip?: string;
+      showTooltip?: "always" | "hover" | "never";
+      orientation?: DataOrientation;
+      ariaDisabled?: boolean;
+
+      onPointerDown?: (event: PointerEvent) => void;
+      onPointerUp?: (event: PointerEvent) => void;
+      onFocus?: (event: FocusEvent) => void;
+      onBlur?: (event: FocusEvent) => void;
+      onPointerEnter?: (event: PointerEvent) => void;
+      onPointerLeave?: (event: PointerEvent) => void;
+    }
+  >(),
+  {
+    orientation: "horizontal",
+    showTooltip: "hover",
+  },
+);
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const isPointerDown = ref(false);
+const isHovering = ref(false);
+const disabled = props.ariaDisabled ?? false;
+
+const shouldShowTooltip = computed(
+  () =>
+    (props.showTooltip === "always" && !!props.tooltip)
+    || (props.showTooltip === "hover"
+    && (isPointerDown.value || isHovering.value)
+    && !!props.tooltip),
+);
+
+function onPointerDown(event: PointerEvent) {
+  isPointerDown.value = true;
+  props.onPointerDown?.(event);
+}
+
+function onPointerUp(event: PointerEvent) {
+  isPointerDown.value = false;
+  props.onPointerUp?.(event);
+}
+
+function onFocus(event: FocusEvent) {
+  isPointerDown.value = true;
+  props.onFocus?.(event);
+}
+
+function onBlur(event: FocusEvent) {
+  isPointerDown.value = false;
+  props.onBlur?.(event);
+}
+
+function onPointerEnter(event: PointerEvent) {
+  isHovering.value = true;
+  props.onPointerEnter?.(event);
+}
+
+function onPointerLeave(event: PointerEvent) {
+  isHovering.value = false;
+  props.onPointerLeave?.(event);
+}
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot :delay-duration="0" :open="shouldShowTooltip">
+      <TooltipTrigger as-child>
+        <SliderThumb
+          :data-state="isPointerDown ? 'active' : 'inactive'"
+          :class="
+            cn(
+              'block size-5 cursor-grab rounded-full border border-surface-200 bg-white shadow-wg-sm disabled:hidden',
+
+              // focus
+              'focus:outline-none focus-visible:border-primary dark:focus-visible:border-white',
+
+              // active state
+              'data-[state=active]:cursor-grabbing data-[state=active]:border-primary dark:data-[state=active]:border-white',
+
+              // disabled
+              disabled && 'hidden',
+
+              props.class,
+            )
+          "
+          v-bind="forwardedProps"
+          @pointerdown="onPointerDown"
+          @pointerup="onPointerUp"
+          @focus="onFocus"
+          @blur="onBlur"
+          @pointerenter="onPointerEnter"
+          @pointerleave="onPointerLeave"
+        >
+          <TooltipContent
+            v-if="tooltip"
+            :side="orientation === 'horizontal' ? 'top' : 'left'"
+            :content="tooltip"
+            class="px-2 py-1 text-xs leading-4"
+          />
+        </SliderThumb>
+      </TooltipTrigger>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
diff --git a/packages/wedges-vue/src/components/slider/index.ts b/packages/wedges-vue/src/components/slider/index.ts
new file mode 100644
index 0000000..765baab
--- /dev/null
+++ b/packages/wedges-vue/src/components/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue";
diff --git a/packages/wedges-vue/src/components/switch-group/SwitchGroup.vue b/packages/wedges-vue/src/components/switch-group/SwitchGroup.vue
new file mode 100644
index 0000000..eb9baeb
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch-group/SwitchGroup.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { useId } from "radix-vue";
+import { computed, provide } from "vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import type { SwitchGroupContextProps, SwitchGroupProps } from "./types";
+import { hasSlotContent } from "@/lib/utils";
+
+defineOptions({
+  name: "SwitchGroup"
+});
+
+const props = defineProps<SwitchGroupProps>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ariaInvalid: __, ...delegated } = props;
+  return delegated;
+});
+
+provide<SwitchGroupContextProps>("SwitchGroupContext", {
+  alignLabels: props.alignLabels,
+  disabled: props.disabled,
+  isInGroup: true,
+});
+
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+const ariaInvalid = props.ariaInvalid;
+</script>
+
+<template>
+  <div
+    :aria-describedby="helperText ? `${elId}__describer` : undefined"
+    :aria-labelledby="label ? `${elId}__label` : undefined"
+    class="flex flex-col gap-4"
+    role="group"
+    v-bind="delegatedProps"
+  >
+    <div
+      v-if="label ?? helperText ?? description ?? tooltip"
+      class="flex flex-col"
+    >
+      <div class="inline-flex flex-col">
+        <Label
+          :id="`${elId}__label`"
+          class="cursor-default"
+          :description
+          :disabled
+          :for="elId"
+          :required
+          :tooltip
+        >
+          {{ label }}
+        </Label>
+
+        <LabelHelper :id="`${elId}__describer`" :aria-invalid :disabled>
+          {{ helperText }}
+        </LabelHelper>
+      </div>
+    </div>
+
+    <div v-if="hasSlotContent($slots.default)" class="flex flex-col gap-2">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/switch-group/SwitchGroupItem.vue b/packages/wedges-vue/src/components/switch-group/SwitchGroupItem.vue
new file mode 100644
index 0000000..d6bdc85
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch-group/SwitchGroupItem.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { LabelProps } from "radix-vue";
+import { type HTMLAttributes, computed, inject } from "vue";
+import type { SwitchProps } from "../switch/types";
+import type { LabelHelperProps } from "../types";
+import Switch from "../switch/Switch.vue";
+import type { SwitchGroupContextProps } from "./types";
+import { cn } from "@/lib/utils";
+
+type SwitchGroupItemProps = Omit<SwitchProps, "alignLabel">;
+
+defineOptions({
+  name: "SwitchGroupItem"
+});
+
+const props = defineProps<
+  SwitchGroupItemProps &
+  LabelProps &
+  LabelHelperProps & {
+    /**
+     * Alignment of the labels: "start" (usually left) or "end" (usually right).
+     * @default "end"
+     */
+    class?: HTMLAttributes["class"];
+    description?: string;
+  }
+>();
+
+const checked = defineModel("checked", {
+  type: Boolean,
+  default: false,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, disabled: __, checked: ____, ...delegated } = props;
+  return delegated;
+});
+
+const context = inject("SwitchGroupContext") as SwitchGroupContextProps;
+
+const isDisabled = computed(() => context?.disabled || props.disabled);
+</script>
+
+<template>
+  <Switch
+    v-model:checked="checked"
+    :align-label="context?.alignLabels"
+    :disabled="isDisabled"
+    :class="cn('wg-switch-group__item', props.class)"
+    v-bind="delegatedProps"
+  />
+</template>
diff --git a/packages/wedges-vue/src/components/switch-group/index.ts b/packages/wedges-vue/src/components/switch-group/index.ts
new file mode 100644
index 0000000..db47c3e
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch-group/index.ts
@@ -0,0 +1,2 @@
+export { default as SwitchGroup } from "./SwitchGroup.vue";
+export { default as SwitchGroupItem } from "./SwitchGroupItem.vue";
diff --git a/packages/wedges-vue/src/components/switch-group/types.ts b/packages/wedges-vue/src/components/switch-group/types.ts
new file mode 100644
index 0000000..afcfbfb
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch-group/types.ts
@@ -0,0 +1,66 @@
+import type { HTMLAttributes } from "vue";
+import type { LabelProps } from "radix-vue";
+import type { LabelHelperProps } from "../types";
+
+export type SwitchGroupProps = LabelProps &
+  LabelHelperProps & {
+    /**
+     * Alignment of the labels: "start" (usually left) or "end" (usually right).
+     * @default "end"
+     */
+    alignLabels?: "start" | "end";
+
+    /**
+     * A unique id for the switch group.
+     */
+    id?: HTMLAttributes["id"];
+
+    /**
+     * Aria invalid attribute.
+     */
+
+    ariaInvalid?: HTMLAttributes["aria-invalid"];
+
+    description?: string;
+
+    /**
+     * Additional class names.
+     */
+    class?: HTMLAttributes["class"];
+
+    /**
+     * Helper text.
+     */
+
+    helperText?: string;
+
+    /**
+     * Label for the switch group.
+     */
+
+    label?: string;
+
+    /**
+     * Tooltip for the switch group.
+     */
+
+    tooltip?: string;
+
+    /**
+     * Whether the switch group is disabled.
+     */
+
+    disabled?: boolean;
+
+    /**
+     * Whether the switch group is required.
+     */
+
+    required?: boolean;
+  };
+
+export interface SwitchGroupContextProps {
+  alignLabels?: SwitchGroupProps["alignLabels"];
+  disabled?: SwitchGroupProps["disabled"];
+  isInGroup: boolean;
+}
diff --git a/packages/wedges-vue/src/components/switch/Switch.vue b/packages/wedges-vue/src/components/switch/Switch.vue
new file mode 100644
index 0000000..7352390
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch/Switch.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { SwitchRootEmits } from "radix-vue";
+import {
+  SwitchRoot,
+  SwitchThumb,
+  useForwardPropsEmits,
+  useId,
+} from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import { computed, inject } from "vue";
+import type { SwitchGroupContextProps } from "../switch-group/types";
+import SwitchLabel from "./SwitchLabel.vue";
+import type { SwitchProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Switch"
+});
+
+const props = withDefaults(
+  defineProps<
+    SwitchProps & {
+      class?: HTMLAttributes["class"];
+      id?: HTMLAttributes["id"];
+      ariaInvalid?: HTMLAttributes["aria-invalid"];
+      description?: string;
+      helperText?: string;
+      tooltip?: string;
+    }
+  >(),
+  {
+    alignLabel: "end",
+  },
+);
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const context = inject("SwitchGroupContext") as SwitchGroupContextProps;
+
+const isInGroup = computed(() => context?.isInGroup);
+
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'inline-flex items-start gap-4',
+        isInGroup && alignLabel === 'start' && 'flex justify-between',
+        !disabled
+          && '[&:has([data-state=unchecked])_.wg-label]:text-surface-700',
+      )
+    "
+  >
+    <template v-if="alignLabel === 'start'">
+      <SwitchLabel
+        :id="`${elId}__label`"
+        :is-in-group
+        :description
+        :disabled
+        :label
+        :html-for="elId"
+        :required
+        :tooltip
+      />
+    </template>
+
+    <div class="wg-switch inline-flex min-h-6 shrink-0 items-center">
+      <SwitchRoot
+        v-bind="forwarded"
+        :id="elId"
+        :class="
+          cn(
+            'peer inline-flex h-4 w-7 items-center rounded-full bg-surface-200 outline-primary transition-colors duration-100 wg-antialiased hover:bg-surface-300 focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none data-[state=checked]:bg-primary',
+            disabled && 'bg-surface-100 data-[state=checked]:bg-surface-100',
+            props.class,
+          )
+        "
+        :disabled
+        :required
+      >
+        <SwitchThumb
+          :class="
+            cn(
+              'size-3 rounded-full bg-white transition-transform duration-200 data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0.5',
+              disabled && 'dark:bg-surface-200',
+            )
+          "
+        />
+      </SwitchRoot>
+    </div>
+
+    <template v-if="alignLabel === 'end'">
+      <SwitchLabel v-bind="forwarded" :id="elId" :is-in-group />
+    </template>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/switch/SwitchLabel.vue b/packages/wedges-vue/src/components/switch/SwitchLabel.vue
new file mode 100644
index 0000000..b6d8f45
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch/SwitchLabel.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Fragment } from "vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import type { SwitchProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "SwitchLabel"
+});
+
+const props = defineProps<
+  SwitchProps & {
+    class?: HTMLAttributes["class"];
+    id?: HTMLAttributes["id"];
+    ariaInvalid?: HTMLAttributes["aria-invalid"];
+    description?: string;
+    helperText?: string;
+    tooltip?: string;
+    isInGroup?: boolean;
+  }
+>();
+
+const LabelWrapComponent = props.label ?? props.helperText ? "div" : Fragment;
+</script>
+
+<template>
+  <component :is="LabelWrapComponent" class="inline-flex flex-col">
+    <Label
+      :id="`${id}__label`"
+      :class="cn(isInGroup && 'font-normal')"
+      :description
+      :disabled
+      :for="id"
+      :required
+      :tooltip
+    >
+      <slot>
+        {{ label }}
+      </slot>
+    </Label>
+
+    <LabelHelper
+      v-if="helperText"
+      :id="`${id}__describer`"
+      :aria-invalid
+      :disabled
+    >
+      {{ helperText }}
+    </LabelHelper>
+  </component>
+</template>
diff --git a/packages/wedges-vue/src/components/switch/index.ts b/packages/wedges-vue/src/components/switch/index.ts
new file mode 100644
index 0000000..c986f8a
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue";
diff --git a/packages/wedges-vue/src/components/switch/types.ts b/packages/wedges-vue/src/components/switch/types.ts
new file mode 100644
index 0000000..1bc1f6e
--- /dev/null
+++ b/packages/wedges-vue/src/components/switch/types.ts
@@ -0,0 +1,29 @@
+import type { LabelProps, SwitchRootProps } from "radix-vue";
+import type { LabelHelperProps } from "../types";
+
+export interface HasLabel {
+  /**
+   * Label displayed next to the switch. It can be a string, element, or any other
+   * renderable node.
+   */
+  label: string;
+
+  /**
+   * Alignment of the labels: "start" (usually left) or "end" (usually right).
+   */
+  alignLabel?: "start" | "end";
+}
+
+export interface HasNoLabel {
+  label?: never;
+
+  /**
+   * Alignment of the labels: "start" (usually left) or "end" (usually right).
+   */
+  alignLabel?: never;
+}
+
+export type SwitchProps = SwitchRootProps &
+  LabelProps &
+  Omit<LabelHelperProps, "label"> &
+  (HasLabel | HasNoLabel);
diff --git a/packages/wedges-vue/src/components/tabs/Tabs.vue b/packages/wedges-vue/src/components/tabs/Tabs.vue
new file mode 100644
index 0000000..d9e6fc0
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/Tabs.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "radix-vue";
+import { TabsRoot, useForwardPropsEmits } from "radix-vue";
+import { type HTMLAttributes, provide } from "vue";
+
+import type { TabsContextProps, Variants } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Tabs",
+});
+
+const props = withDefaults(
+  defineProps<
+    TabsRootProps & {
+      class?: HTMLAttributes["class"];
+      variant?: Variants["variant"];
+    }
+  >(),
+  {
+    variant: "fill",
+    orientation: "horizontal",
+  },
+);
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+
+provide<TabsContextProps>("TabsContext", {
+  variant: props.variant as Variants["variant"],
+});
+</script>
+
+<template>
+  <TabsRoot
+    :class="
+      cn(
+        'wg-antialiased',
+        orientation === 'vertical' && 'flex flex-wrap space-x-6',
+        orientation === 'horizontal' && 'space-y-6',
+        props.class,
+      )
+    "
+    v-bind="forwarded"
+  >
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/tabs/TabsContent.vue b/packages/wedges-vue/src/components/tabs/TabsContent.vue
new file mode 100644
index 0000000..94eed7d
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/TabsContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import { TabsContent, type TabsContentProps } from "radix-vue";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "TabsContent",
+});
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'outline-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/packages/wedges-vue/src/components/tabs/TabsList.vue b/packages/wedges-vue/src/components/tabs/TabsList.vue
new file mode 100644
index 0000000..3870383
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/TabsList.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { TabsList, type TabsListProps } from "radix-vue";
+import { type HTMLAttributes, computed, inject } from "vue";
+import type { TabsContextProps } from "./types";
+import { tabListVariants } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "TabsList",
+});
+
+const props = defineProps<
+  TabsListProps & {
+    class?: HTMLAttributes["class"];
+    /**
+     * Should the tabs stretch to fill the available space?
+     */
+    stretch?: boolean;
+  }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const context = inject<TabsContextProps>("TabsContext");
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center text-sm',
+        stretch && 'w-full grow',
+        (context?.variant === 'contained-bottom'
+          || context?.variant === 'contained-top')
+          && !stretch
+          && 'w-fit',
+        stretch && '[&>*]:grow',
+        tabListVariants({ variant: context?.variant }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/packages/wedges-vue/src/components/tabs/TabsTrigger.vue b/packages/wedges-vue/src/components/tabs/TabsTrigger.vue
new file mode 100644
index 0000000..ed40c63
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/TabsTrigger.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import {
+  Slot,
+  TabsTrigger,
+  type TabsTriggerProps,
+  useForwardProps,
+} from "radix-vue";
+import {
+  type HTMLAttributes,
+  type Ref,
+  computed,
+  inject,
+  onMounted,
+  ref,
+} from "vue";
+import type { TabsContextProps } from "./types";
+import { tabVariants } from "./variants";
+import { cn, refHasTextNode } from "@/lib/utils";
+
+defineOptions({
+  name: "TabsTrigger",
+});
+
+const props = defineProps<
+  TabsTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+
+const context = inject<TabsContextProps>("TabsContext");
+
+const triggerRef = ref<Ref | null>(null);
+
+const isText = ref(false);
+
+onMounted(() => {
+  if (triggerRef.value)
+    isText.value = refHasTextNode(triggerRef);
+});
+</script>
+
+<template>
+  <TabsTrigger
+    ref="triggerRef"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        // base
+        'inline-flex items-center justify-center gap-1 whitespace-nowrap text-surface-500 outline-primary transition-colors duration-100 focus:outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:opacity-60',
+
+        tabVariants({ variant: context?.variant }),
+        props.class,
+      )
+    "
+  >
+    <component :is="isText ? 'span' : Slot" :class="{ 'px-1': isText }">
+      <slot name="before" />
+      <slot />
+    </component>
+    <slot name="after" />
+  </TabsTrigger>
+</template>
diff --git a/packages/wedges-vue/src/components/tabs/index.ts b/packages/wedges-vue/src/components/tabs/index.ts
new file mode 100644
index 0000000..4a3afb9
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsContent } from "./TabsContent.vue";
diff --git a/packages/wedges-vue/src/components/tabs/types.ts b/packages/wedges-vue/src/components/tabs/types.ts
new file mode 100644
index 0000000..0c319bd
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/types.ts
@@ -0,0 +1,8 @@
+import type { VariantProps } from "class-variance-authority";
+import type { tabVariants } from "./variants";
+
+export type Variants = VariantProps<typeof tabVariants>;
+
+export interface TabsContextProps {
+  variant?: Variants["variant"];
+}
diff --git a/packages/wedges-vue/src/components/tabs/variants.ts b/packages/wedges-vue/src/components/tabs/variants.ts
new file mode 100644
index 0000000..6a55bd6
--- /dev/null
+++ b/packages/wedges-vue/src/components/tabs/variants.ts
@@ -0,0 +1,63 @@
+import { cva } from "class-variance-authority";
+
+export const tabListVariants = cva("", {
+  variants: {
+    variant: {
+      "fill": "gap-2",
+      "underlined": "gap-2 border-b border-surface-100 dark:border-surface-50",
+      "contained-bottom": "",
+      "contained-top": "",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: ["contained-top", "contained-bottom"],
+      class:
+        "overflow-hidden rounded-lg border border-surface-200 shadow-wg-xs dark:border-surface-100 [&:has(:focus-visible)]:overflow-visible",
+    },
+  ],
+
+  defaultVariants: {
+    variant: "fill",
+  },
+});
+
+export const tabVariants = cva("leading-6 data-[state=active]:font-medium", {
+  variants: {
+    variant: {
+      "fill": [
+        "rounded-lg bg-transparent px-3 py-2 hover:bg-surface hover:text-surface-900",
+
+        // active
+        "data-[state=active]:bg-surface data-[state=active]:text-surface-900",
+      ],
+
+      "underlined": [
+        "-mb-px border-b-2 border-transparent px-3 pb-3 pt-2 hover:border-surface-200 hover:text-surface-900 focus-visible:-outline-offset-2 dark:hover:border-surface-100",
+
+        // active
+        "data-[state=active]:border-primary data-[state=active]:text-primary dark:data-[state=active]:border-primary",
+      ],
+
+      "contained-bottom":
+        "border-b-2 border-transparent hover:border-b-surface data-[state=active]:border-b-primary",
+
+      "contained-top":
+        "border-t-2 border-transparent hover:border-t-surface data-[state=active]:border-t-primary ",
+    },
+  },
+  compoundVariants: [
+    {
+      variant: ["contained-top", "contained-bottom"],
+      class: [
+        "border-r border-r-surface-100 bg-transparent bg-clip-padding px-4 py-14px [--wg-border-width:1px] last:border-r-0 focus-visible:-outline-offset-2 first:focus-visible:rounded-s-[7px] last:focus-visible:rounded-r-[7px] hover:[&:not(:disabled)]:bg-surface hover:[&:not(:disabled)]:text-surface-900",
+
+        // active
+        "data-[state=active]:text-primary",
+      ],
+    },
+  ],
+  defaultVariants: {
+    variant: "fill",
+  },
+});
diff --git a/packages/wedges-vue/src/components/tag/Tag.vue b/packages/wedges-vue/src/components/tag/Tag.vue
new file mode 100644
index 0000000..fce782d
--- /dev/null
+++ b/packages/wedges-vue/src/components/tag/Tag.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { CloseIcon } from "@iconicicons/vue3";
+import { Slot } from "radix-vue";
+import { h, ref, useSlots } from "vue";
+import type { AvatarProps } from "../avatar";
+import Badge from "../badge/Badge.vue";
+import Button from "../button/Button.vue";
+import type { TagProps } from "./types";
+
+defineOptions({
+  name: "Tag"
+});
+
+const props = withDefaults(defineProps<TagProps>(), {
+  closable: true,
+});
+
+const visible = ref(true);
+
+function handleClose(event: MouseEvent) {
+  if (props.onClose)
+    props.onClose(event);
+
+  if (!event.defaultPrevented)
+    visible.value = false;
+}
+
+const slots = useSlots();
+
+function renderAvatar() {
+  return slots.avatar?.()[0]
+    ? h(slots.avatar()[0], { size: "xxs" } as Partial<AvatarProps>)
+    : null;
+}
+</script>
+
+<template>
+  <Badge v-if="visible" v-bind="props">
+    <template #before>
+      <Slot class="size-4">
+        <slot name="before" />
+      </Slot>
+      <component :is="renderAvatar()" />
+    </template>
+
+    <slot />
+
+    <template #after>
+      <Button
+        v-if="props.closable"
+        class="duration-180 size-auto !p-0 text-wg-gray-400 transition-colors hover:text-wg-gray-600 focus:outline-1 dark:text-wg-white-500 dark:hover:text-wg-white-700 [&>svg]:!opacity-100"
+        shape="pill"
+        size="xs-icon"
+        variant="link"
+        @click="handleClose"
+      >
+        <slot name="close-icon">
+          <CloseIcon aria-label="Close" class="size-4" />
+        </slot>
+      </Button>
+    </template>
+  </Badge>
+</template>
diff --git a/packages/wedges-vue/src/components/tag/index.ts b/packages/wedges-vue/src/components/tag/index.ts
new file mode 100644
index 0000000..b355594
--- /dev/null
+++ b/packages/wedges-vue/src/components/tag/index.ts
@@ -0,0 +1 @@
+export { default as Tag } from "./Tag.vue";
diff --git a/packages/wedges-vue/src/components/tag/types.ts b/packages/wedges-vue/src/components/tag/types.ts
new file mode 100644
index 0000000..f0307e5
--- /dev/null
+++ b/packages/wedges-vue/src/components/tag/types.ts
@@ -0,0 +1,33 @@
+import type { BadgeProps } from "../badge";
+
+export interface ClosableProps {
+  /**
+   * Is the alert closable? If true, a close icon will be displayed.
+   * @default true
+   */
+  closable: true;
+
+  /**
+   * An optional callback function to be called when the close icon is clicked.
+   * This can be used to handle the removal of the tag.
+   * If provided, the close icon will be displayed.
+   */
+  onClose?: Function;
+}
+
+interface NotClosableProps {
+  /**
+   * Is the alert closable? If true, a close icon will be displayed.
+   * @default true
+   */
+  closable?: false;
+
+  /**
+   * An optional callback function to be called when the close icon is clicked.
+   * This can be used to handle the removal of the tag.
+   * If provided, the close icon will be displayed.
+   */
+  onClose?: never;
+}
+
+export type TagProps = BadgeProps & (ClosableProps | NotClosableProps);
diff --git a/packages/wedges-vue/src/components/textarea/Textarea.vue b/packages/wedges-vue/src/components/textarea/Textarea.vue
new file mode 100644
index 0000000..c94bab2
--- /dev/null
+++ b/packages/wedges-vue/src/components/textarea/Textarea.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { useForwardPropsEmits, useId } from "radix-vue";
+import { computed } from "vue";
+import Label from "../label/Label.vue";
+import LabelHelper from "../label/LabelHelper.vue";
+import type { TextareaProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Textarea"
+});
+
+const props = defineProps<TextareaProps>();
+
+const emits = defineEmits<{
+  (e: "update:modelValue", payload: string | number): void;
+}>();
+
+const delegatedProps = computed(() => {
+  const {
+    ariaInvalid: _,
+    class: __,
+    destructive: ___,
+    id: ____,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const modelValue = defineModel("modelValue", {
+  type: String,
+  default: "",
+});
+
+const generatedId = useId();
+const elId = props.id ?? generatedId;
+const isAriaInvalid = computed(() => props.ariaInvalid ?? props.destructive);
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 wg-antialiased">
+    <Label
+      id="{`${elId}__label`}"
+      :description
+      :disabled
+      for="{elId}"
+      :required
+      :tooltip
+    >
+      {{ label }}
+    </Label>
+
+    <textarea
+      v-model="modelValue"
+      v-bind="forwarded"
+      :aria-describedby="helperText ? `${elId}__describer` : undefined"
+      :aria-invalid="isAriaInvalid"
+      :aria-labelledby="label ? `${elId}__label` : undefined"
+      :class="
+        cn(
+          'flex min-h-[112px] rounded-lg border bg-background px-4 py-2 text-sm leading-6 shadow-wg-xs transition-colors duration-100 placeholder:text-surface-500',
+          'outline-primary focus:outline focus:outline-2 focus:-outline-offset-1',
+          !disabled
+            && 'text-surface-900 hover:border-surface-300 dark:hover:border-surface-200',
+          disabled
+            && 'cursor-not-allowed bg-surface-50 text-surface-300 placeholder:text-surface-300 dark:bg-white/5 dark:text-surface-200 dark:placeholder:text-surface-200',
+          isAriaInvalid
+            && 'border-destructive outline-destructive hover:border-destructive dark:hover:border-destructive',
+          !isAriaInvalid && 'border-surface-200 dark:border-surface-100',
+          props.class,
+        )
+      "
+    />
+
+    <LabelHelper
+      :id="`${elId}__describer`"
+      :aria-invalid="isAriaInvalid"
+      :disabled
+    >
+      {{ helperText }}
+    </LabelHelper>
+  </div>
+</template>
diff --git a/packages/wedges-vue/src/components/textarea/index.ts b/packages/wedges-vue/src/components/textarea/index.ts
new file mode 100644
index 0000000..178d08c
--- /dev/null
+++ b/packages/wedges-vue/src/components/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from "./Textarea.vue";
diff --git a/packages/wedges-vue/src/components/textarea/types.ts b/packages/wedges-vue/src/components/textarea/types.ts
new file mode 100644
index 0000000..b7599bf
--- /dev/null
+++ b/packages/wedges-vue/src/components/textarea/types.ts
@@ -0,0 +1,14 @@
+import type { LabelProps } from "radix-vue";
+import type { HTMLAttributes } from "vue";
+import type { LabelHelperProps } from "../types";
+
+export type TextareaProps = LabelProps &
+  LabelHelperProps & {
+    ariaInvalid?: boolean;
+    class?: HTMLAttributes["class"];
+    id?: HTMLAttributes["id"];
+    destructive?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    description?: string;
+  };
diff --git a/packages/wedges-vue/src/components/toggle-group/ToggleGroup.vue b/packages/wedges-vue/src/components/toggle-group/ToggleGroup.vue
new file mode 100644
index 0000000..c20289f
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle-group/ToggleGroup.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  ToggleGroupRoot,
+  type ToggleGroupRootEmits,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed, provide } from "vue";
+import type { ToggleGroupContextProps, ToggleGroupProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "ToggleGroup",
+});
+
+const props = withDefaults(
+  defineProps<
+    ToggleGroupProps & {
+      class?: HTMLAttributes["class"];
+    }
+>(),
+  {
+    size: "md",
+    disabled: false,
+    orientation: "horizontal",
+    type: "single",
+  },
+);
+
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+provide<ToggleGroupContextProps>("toggleGroup", {
+  disabled: props.disabled,
+  size: props.size,
+  orientation: props.orientation,
+});
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'dark:shadow:none inline-flex flex-wrap items-stretch divide-surface-100 rounded-[9px] border border-surface-200 shadow-wg-xs dark:border-surface-100',
+        orientation === 'vertical' && 'flex-col divide-y',
+        orientation === 'horizontal' && 'divide-x',
+        props.class,
+      )
+    "
+    :type
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/toggle-group/ToggleGroupItem.vue b/packages/wedges-vue/src/components/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 0000000..05ee467
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  ToggleGroupItem,
+  type ToggleGroupItemProps,
+  useForwardProps,
+} from "radix-vue";
+import { type HTMLAttributes, computed, inject } from "vue";
+import Toggle from "../toggle/Toggle.vue";
+import type { ToggleGroupContextProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "ToggleGroupItem",
+});
+
+const props = defineProps<
+  ToggleGroupItemProps & {
+    class?: HTMLAttributes["class"];
+    size?: ToggleGroupContextProps["size"];
+  }
+>();
+
+const context = inject<ToggleGroupContextProps>("toggleGroup");
+
+const delegatedProps = computed(() => {
+  const { class: _, size: __, asChild: ___, ...delegated } = props;
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ToggleGroupItem v-bind="forwardedProps" as-child>
+    <Toggle
+      :as-child
+      :class="
+        cn(
+          'flex items-center rounded-none bg-clip-padding focus-visible:z-10 focus-visible:-outline-offset-1 data-[state=on]:bg-surface-50',
+          props.class,
+          context?.orientation === 'horizontal'
+            ? 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg'
+            : 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
+        )
+      "
+      variant="transparent"
+      :size
+      shape="rounded"
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+      <slot />
+
+      <template #after>
+        <slot name="after" />
+      </template>
+    </Toggle>
+  </ToggleGroupItem>
+</template>
diff --git a/packages/wedges-vue/src/components/toggle-group/index.ts b/packages/wedges-vue/src/components/toggle-group/index.ts
new file mode 100644
index 0000000..c72df1e
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from "./ToggleGroup.vue";
+export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";
diff --git a/packages/wedges-vue/src/components/toggle-group/types.ts b/packages/wedges-vue/src/components/toggle-group/types.ts
new file mode 100644
index 0000000..d1dac07
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle-group/types.ts
@@ -0,0 +1,15 @@
+import type { ToggleGroupRootProps } from "radix-vue";
+import type { DataOrientation } from "../types";
+
+export type ToggleGroupProps = ToggleGroupRootProps & {
+  /**
+   * The size of the buttons in group.
+   */
+  size?: "sm" | "md";
+};
+
+export interface ToggleGroupContextProps {
+  size?: "sm" | "md";
+  disabled?: boolean;
+  orientation?: DataOrientation;
+}
diff --git a/packages/wedges-vue/src/components/toggle/Toggle.vue b/packages/wedges-vue/src/components/toggle/Toggle.vue
new file mode 100644
index 0000000..5d17336
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle/Toggle.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import {
+  Toggle,
+  type ToggleEmits,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+import { Button } from "../button";
+import type { ToggleProps } from "./types";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "Toggle",
+});
+
+const props = withDefaults(
+  defineProps<
+    ToggleProps & {
+      class?: HTMLAttributes["class"];
+      variant?: ToggleProps["variant"];
+      size?: ToggleProps["size"];
+    }
+  >(),
+  {
+    variant: "outline",
+    size: "md",
+    shape: "rounded",
+    disabled: false,
+  },
+);
+
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    size: __,
+    variant: ___,
+    asChild: ____,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <Toggle as-child v-bind="forwarded">
+    <Button
+      :as-child
+      :class="
+        cn(
+          'font-normal data-[state=on]:bg-surface-50 data-[state=on]:font-medium',
+          props.class,
+        )
+      "
+      :disabled
+      :is-icon-only
+      :shape
+      :size
+      :variant
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+      <slot />
+
+      <template #after>
+        <slot name="after" />
+      </template>
+    </Button>
+  </Toggle>
+</template>
diff --git a/packages/wedges-vue/src/components/toggle/index.ts b/packages/wedges-vue/src/components/toggle/index.ts
new file mode 100644
index 0000000..ed8703b
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle/index.ts
@@ -0,0 +1,27 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export { default as Toggle } from "./Toggle.vue";
+
+export const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>;
diff --git a/packages/wedges-vue/src/components/toggle/types.ts b/packages/wedges-vue/src/components/toggle/types.ts
new file mode 100644
index 0000000..28c7bb0
--- /dev/null
+++ b/packages/wedges-vue/src/components/toggle/types.ts
@@ -0,0 +1,7 @@
+import type { ToggleProps as TogglePrimitiveProps } from "radix-vue";
+import type { ButtonProps } from "../button";
+
+export type ToggleProps = TogglePrimitiveProps &
+  Omit<ButtonProps, "variant"> & {
+    variant?: "outline" | "transparent";
+  };
diff --git a/packages/wedges-vue/src/components/tooltip/Tooltip.vue b/packages/wedges-vue/src/components/tooltip/Tooltip.vue
new file mode 100644
index 0000000..f601344
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/Tooltip.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TooltipContentProps, TooltipRootProps } from "radix-vue";
+import TooltipContent from "./TooltipContent.vue";
+import TooltipProvider from "./TooltipProvider.vue";
+import TooltipRoot from "./TooltipRoot.vue";
+import TooltipTrigger from "./TooltipTrigger.vue";
+
+defineOptions({
+  name: "Tooltip"
+});
+
+const props = withDefaults(
+  defineProps<
+    TooltipRootProps &
+    TooltipContentProps & {
+      asChild?: boolean;
+      content?: string;
+      color?: "primary" | "secondary" | "soft";
+      defaultOpen?: boolean;
+      delayDuration?: number;
+      disableHoverableContent?: boolean;
+      onOpenChange?: (e: MouseEvent) => void;
+    }
+  >(),
+  {
+    color: "primary",
+    defaultOpen: false,
+    delayDuration: 200,
+    disableHoverableContent: false,
+  },
+);
+</script>
+
+<template>
+  <TooltipProvider>
+    <TooltipRoot
+      :default-open="defaultOpen"
+      :delay-duration="delayDuration"
+      :disable-hoverable-content="disableHoverableContent"
+      :on-open-change="onOpenChange"
+    >
+      <TooltipContent v-if="content" v-bind="props" />
+      <TooltipTrigger :as-child="true" @click="onOpenChange">
+        <slot />
+      </TooltipTrigger>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/TooltipArrow.vue b/packages/wedges-vue/src/components/tooltip/TooltipArrow.vue
new file mode 100644
index 0000000..f9a954c
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/TooltipArrow.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import {
+  TooltipArrow as PrimitiveArrow,
+  type TooltipArrowProps,
+} from "radix-vue";
+import { TippyIcon } from "../icons";
+
+defineOptions({
+  name: "TooltipArrow"
+});
+
+const props = withDefaults(defineProps<TooltipArrowProps>(), {
+  width: 24,
+  height: 8,
+});
+</script>
+
+<template>
+  <PrimitiveArrow viewBox="0 0 24 8" v-bind="props">
+    <slot>
+      <TippyIcon class="text-background" />
+    </slot>
+  </PrimitiveArrow>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/TooltipContent.vue b/packages/wedges-vue/src/components/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..8b17eda
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/TooltipContent.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import {
+  TooltipContent as TooltipPrimitiveContent,
+  useForwardPropsEmits,
+} from "radix-vue";
+import { computed } from "vue";
+import type { HTMLAttributes } from "vue";
+import type { TooltipContentEmits, TooltipContentProps } from "radix-vue";
+import TooltipArrow from "./TooltipArrow.vue";
+import { type TooltipVariant, tooltipVariant } from "./variants";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "TooltipContent",
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Whether to animate the tooltip when it opens/closes
+     */
+    animation?: boolean;
+
+    /**
+     * Whether to show an arrow pointing to the target element
+     */
+    arrow?: boolean;
+
+    /**
+     * The content to display inside the tooltip
+     */
+    content: any;
+
+    /**
+     * The size of the tooltip
+     */
+
+    size?: TooltipVariant["size"];
+
+    /**
+     * The color of the tooltip
+     */
+
+    color?: TooltipVariant["color"];
+
+    /**
+     * Additional classes to apply to the tooltip
+     */
+    class?: HTMLAttributes["class"];
+
+    /**
+     * The offset of the tooltip arrow from the edge of the tooltip
+     */
+
+    arrowPadding?: TooltipContentProps["arrowPadding"];
+
+    /**
+     * The offset of the tooltip arrow from the edge of the tooltip
+     */
+
+    alignOffset?: TooltipContentProps["alignOffset"];
+
+    /**
+     * The offset of the tooltip arrow from the edge of the tooltip
+     */
+
+    collisionPadding?: TooltipContentProps["collisionPadding"];
+
+    /**
+     * The offset of the tooltip arrow from the edge of the tooltip
+     */
+
+    sideOffset?: TooltipContentProps["sideOffset"];
+  }>(),
+  {
+    alignOffset: -12,
+    animation: true,
+    arrow: true,
+    arrowPadding: 12,
+    collisionPadding: 12,
+    sideOffset: 2,
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const TOOLTIP_ANIMATION_CLASSES = [
+  // transform-origin
+  "origin-[var(--radix-popper-transform-origin)]",
+
+  // state animations
+  "data-[side=bottom]:animate-fade-in-down data-[side=top]:animate-wg-fade-in-up data-[side=left]:animate-wg-fade-in-left data-[side=right]:animate-wg-fade-in-right data-[state=closed]:animate-wg-fade-out",
+
+  // instant-open
+  "data-[state=instant-open]:!animate-none",
+];
+</script>
+
+<template>
+  <TooltipPrimitiveContent
+    :class="[
+      cn(tooltipVariant({ size, color }), props.class),
+      {
+        [TOOLTIP_ANIMATION_CLASSES.join(' ')]: animation,
+      },
+    ]"
+    v-bind="forwarded"
+  >
+    <template v-if="!!$slots.default">
+      <slot />
+    </template>
+    <template v-else>
+      {{ content }}
+    </template>
+
+    <TooltipArrow v-if="arrow" />
+  </TooltipPrimitiveContent>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/TooltipProvider.vue b/packages/wedges-vue/src/components/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..d6e9e20
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/TooltipProvider.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from "radix-vue";
+
+defineOptions({
+  name: "TooltipProvider"
+});
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/TooltipRoot.vue b/packages/wedges-vue/src/components/tooltip/TooltipRoot.vue
new file mode 100644
index 0000000..0f217c8
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/TooltipRoot.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "radix-vue";
+import {
+  TooltipRoot as TooltipPrimitiveRoot,
+  useForwardPropsEmits,
+} from "radix-vue";
+
+defineOptions({
+  name: "TooltipRoot"
+});
+
+const props = withDefaults(defineProps<TooltipRootProps>(), {
+  delayDuration: 200,
+});
+
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipPrimitiveRoot v-bind="forwarded">
+    <slot />
+  </TooltipPrimitiveRoot>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/TooltipTrigger.vue b/packages/wedges-vue/src/components/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..3f37b7e
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/TooltipTrigger.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {
+  TooltipTrigger as PrimitiveTrigger,
+  type TooltipTriggerProps,
+} from "radix-vue";
+import { type HTMLAttributes, getCurrentInstance } from "vue";
+import { InfoIcon } from "../icons";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  name: "TooltipTrigger"
+});
+
+const props = defineProps<
+  TooltipTriggerProps & { class?: HTMLAttributes["class"] }
+>();
+
+const emit = defineEmits({
+  click: (e: MouseEvent) => e,
+});
+
+const hasClickEvent = getCurrentInstance?.()?.vnode.props?.onClick;
+
+function onKeyDown(e: KeyboardEvent) {
+  if (e.key === "Enter" || e.key === "Space")
+    emit("click", e as unknown as MouseEvent);
+}
+</script>
+
+<template>
+  <PrimitiveTrigger v-bind="props">
+    <slot>
+      <span
+        :class="
+          cn(
+            hasClickEvent ? 'cursor-pointer' : 'cursor-default',
+            'inline-flex items-center justify-center rounded-full text-surface-200 transition-colors duration-100 focus:outline-none focus-visible:text-primary focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary data-[state=delayed-open]:text-primary data-[state=instant-open]:!transition-none dark:hover:text-primary dark:focus-visible:text-primary [&:not([data-state=closed])]:text-primary',
+            props.class,
+          )
+        "
+        :tabIndex="0"
+        :role="hasClickEvent ? 'button' : undefined"
+        @click="emit('click', $event)"
+        @keydown="onKeyDown"
+      >
+        <InfoIcon class="scale-100" />
+      </span>
+    </slot>
+  </PrimitiveTrigger>
+</template>
diff --git a/packages/wedges-vue/src/components/tooltip/index.ts b/packages/wedges-vue/src/components/tooltip/index.ts
new file mode 100644
index 0000000..68a6346
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/index.ts
@@ -0,0 +1,7 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipArrow } from "./TooltipArrow.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { TooltipPortal } from "radix-vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipRoot } from "./TooltipRoot.vue";
diff --git a/packages/wedges-vue/src/components/tooltip/variants.ts b/packages/wedges-vue/src/components/tooltip/variants.ts
new file mode 100644
index 0000000..2dc44c8
--- /dev/null
+++ b/packages/wedges-vue/src/components/tooltip/variants.ts
@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from "class-variance-authority";
+
+export const tooltipVariant = cva(
+  "z-50 rounded-md text-start text-white wg-antialiased",
+  {
+    variants: {
+      size: {
+        sm: "max-w-xs px-3 py-2 text-xs",
+        md: "max-w-[350px] p-4 text-sm",
+      },
+      color: {
+        primary: "text-white wg-bg-primary",
+        secondary: "text-white wg-bg-secondary dark:text-secondary-900 ",
+        soft: "border border-transparent text-wg-gray-700 shadow-wg-overlay wg-bg-white dark:border-surface dark:bg-neutral-800 dark:text-surface-700 dark:shadow-none",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+      color: "primary",
+    },
+  },
+);
+
+export type TooltipVariant = VariantProps<typeof tooltipVariant>;
diff --git a/packages/wedges-vue/src/components/types.ts b/packages/wedges-vue/src/components/types.ts
new file mode 100644
index 0000000..6ea5558
--- /dev/null
+++ b/packages/wedges-vue/src/components/types.ts
@@ -0,0 +1,21 @@
+export interface LabelHelperProps {
+  /**
+   * Main label displayed above radio buttons. As a prop you will need to pass it as a string.
+   * If you want to render an element or any other renderable node, you will need to use the named slot.
+   */
+  label?: string;
+
+  /**
+   * Additional text or information to guide the user. This can be an instruction,
+   * a hint, or any other supplementary information. It is rendered below label.
+   */
+  helperText?: string;
+
+  /**
+   * Tooltip displayed next to the label. As a prop you will need to pass it as a string.
+   * If you want to render an element or any other renderable node, you will need to use the named slot.
+   */
+  tooltip?: string;
+}
+
+export type DataOrientation = "horizontal" | "vertical";
diff --git a/packages/wedges-vue/src/lib/utils.ts b/packages/wedges-vue/src/lib/utils.ts
new file mode 100644
index 0000000..076e45f
--- /dev/null
+++ b/packages/wedges-vue/src/lib/utils.ts
@@ -0,0 +1,83 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+import { Comment, Fragment, type Ref, type Slot, Text, type VNode } from "vue";
+
+/**
+ * twMerge with extended options.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      padding: ["2px", "4px", "6px", "8px", "12px", "14px", "16px"],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Calculates a 32-bit integer hash value for the given string using the djb2 algorithm.
+ *
+ * @param str - The input string to be hashed.
+ * @returns A 32-bit integer hash value.
+ */
+export function stringToHash(str: string) {
+  let hash = 0;
+
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+
+    hash = (hash << 5) - hash + char;
+    hash |= 0; // Convert to 32-bit integer
+  }
+
+  return hash;
+}
+
+/**
+ * Returns a string from array based on a given hash number.
+ *
+ * @param hash - The hash number to generate a color for.
+ * @param strings - The array of strings to choose from.
+ * @returns The color string generated from the hash.
+ */
+export function getElementFromHash(hash: number, strings: string[]) {
+  const index = Math.abs(hash) % strings.length;
+
+  return strings[index];
+}
+
+export function hasSlotContent(slot: Slot | undefined | null, props: any = {}) {
+  return !isSlotEmpty(slot, props);
+}
+
+export function isSlotEmpty(slot: Slot | undefined | null, props: any = {}) {
+  return isVNodeEmpty(slot?.(props));
+}
+
+export function isVNodeEmpty(vnode: VNode | VNode[] | undefined | null) {
+  return (
+    !vnode
+    || asArray(vnode).every(
+      vnode =>
+        vnode.type === Comment
+        || (vnode.type === Text && !vnode.children?.length)
+        || (vnode.type === Fragment && !vnode.children?.length),
+    )
+  );
+}
+
+export function isAsyncPlaceholder(node: VNode): boolean {
+  // @ts-expect-error not really boolean type
+  return node.isComment && node.asyncFactory;
+}
+
+export function asArray<T>(arg: T | T[] | null) {
+  return Array.isArray(arg) ? arg : arg !== null ? [arg] : [];
+}
+
+export function refHasTextNode(ref: Ref) {
+  return ref.value.$el?.nodeName === "#text";
+}
diff --git a/packages/wedges-vue/src/main.ts b/packages/wedges-vue/src/main.ts
new file mode 100644
index 0000000..ad89721
--- /dev/null
+++ b/packages/wedges-vue/src/main.ts
@@ -0,0 +1,29 @@
+export * from "./components/alert";
+export * from "./components/avatar";
+export * from "./components/avatar-group";
+export * from "./components/badge";
+export * from "./components/button";
+export * from "./components/button-group";
+export * from "./components/checkbox";
+export * from "./components/checkbox-group";
+export * from "./components/dropdown-menu";
+export * from "./components/input";
+export * from "./components/kbd";
+export * from "./components/label";
+export * from "./components/loading";
+export * from "./components/popover";
+export * from "./components/progress";
+export * from "./components/radio-group";
+export * from "./components/slider";
+export * from "./components/switch";
+export * from "./components/switch-group";
+export * from "./components/tabs";
+export * from "./components/tag";
+export * from "./components/textarea";
+export * from "./components/toggle";
+export * from "./components/toggle-group";
+export * from "./components/tooltip";
+
+/* export tailwind plugin and themable color scale type from the React package */
+export { wedgesTW, wedgesPalette } from "@lemonsqueezy/wedges";
+export type { ColorScale, ThemableColorScale } from "@lemonsqueezy/wedges";
diff --git a/packages/wedges-vue/tsconfig.json b/packages/wedges-vue/tsconfig.json
new file mode 100644
index 0000000..6288928
--- /dev/null
+++ b/packages/wedges-vue/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "declaration": true,
+    "noEmit": false,
+    "outDir": "dist"
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue"]
+}
diff --git a/packages/wedges-vue/tsconfig.node.json b/packages/wedges-vue/tsconfig.node.json
new file mode 100644
index 0000000..38a9d93
--- /dev/null
+++ b/packages/wedges-vue/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/wedges-vue/vite.config.ts b/packages/wedges-vue/vite.config.ts
new file mode 100644
index 0000000..694cf04
--- /dev/null
+++ b/packages/wedges-vue/vite.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: "src/main.ts",
+      name: "wedges-vue",
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+    dedupe: ["vue"],
+  },
+
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..ba413c3
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,8515 @@
+lockfileVersion: '6.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      '@antfu/eslint-config':
+        specifier: ^2.16.2
+        version: 2.16.2(@vue/compiler-sfc@3.4.27)(eslint@8.57.0)(typescript@5.4.5)(vitest@0.34.6)
+      '@commitlint/cli':
+        specifier: ^19.3.0
+        version: 19.3.0(@types/node@20.12.11)(typescript@5.4.5)
+      '@commitlint/config-conventional':
+        specifier: ^19.2.2
+        version: 19.2.2
+      bumpp:
+        specifier: ^9.4.1
+        version: 9.4.1
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      lint-staged:
+        specifier: ^15.2.2
+        version: 15.2.2
+      simple-git-hooks:
+        specifier: ^2.11.1
+        version: 2.11.1
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      vitest:
+        specifier: ^0.34.6
+        version: 0.34.6
+
+  apps/docs:
+    dependencies:
+      '@formkit/auto-animate':
+        specifier: ^0.8.2
+        version: 0.8.2
+      '@iconicicons/vue3':
+        specifier: ^1.5.1
+        version: 1.5.1(vue@3.4.25)
+      '@lemonsqueezy/wedges':
+        specifier: ^1.2.2
+        version: 1.2.2(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.3)(typescript@5.4.5)
+      '@radix-icons/vue':
+        specifier: ^1.0.0
+        version: 1.0.0(vue@3.4.25)
+      '@tanstack/vue-table':
+        specifier: ^8.16.0
+        version: 8.16.0(vue@3.4.25)
+      '@unovis/ts':
+        specifier: ^1.4.0
+        version: 1.4.0
+      '@unovis/vue':
+        specifier: ^1.4.0
+        version: 1.4.0(@unovis/ts@1.4.0)(vue@3.4.25)
+      '@vee-validate/zod':
+        specifier: ^4.12.6
+        version: 4.12.7(vue@3.4.25)
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.25)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      date-fns:
+        specifier: ^3.6.0
+        version: 3.6.0
+      embla-carousel:
+        specifier: ^8.0.2
+        version: 8.0.4
+      embla-carousel-autoplay:
+        specifier: ^8.0.2
+        version: 8.0.4(embla-carousel@8.0.4)
+      embla-carousel-vue:
+        specifier: ^8.0.2
+        version: 8.0.4(vue@3.4.25)
+      magic-string:
+        specifier: ^0.30.10
+        version: 0.30.10
+      radix-vue:
+        specifier: ^1.7.2
+        version: 1.7.2(vue@3.4.25)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.3)
+      v-calendar:
+        specifier: ^3.1.2
+        version: 3.1.2(@popperjs/core@2.11.8)(vue@3.4.25)
+      vaul-vue:
+        specifier: ^0.1.0
+        version: 0.1.2(typescript@5.4.5)
+      vee-validate:
+        specifier: 4.12.5
+        version: 4.12.5(vue@3.4.25)
+      vue:
+        specifier: ^3.4.25
+        version: 3.4.25(typescript@5.4.5)
+      vue-sonner:
+        specifier: ^1.1.2
+        version: 1.1.2
+      vue-wrap-balancer:
+        specifier: ^1.1.3
+        version: 1.1.3(vue@3.4.25)
+      wedges-vue:
+        specifier: workspace:^
+        version: link:../../packages/wedges-vue
+      zod:
+        specifier: ^3.23.4
+        version: 3.23.7
+    devDependencies:
+      '@babel/traverse':
+        specifier: ^7.24.1
+        version: 7.24.5
+      '@iconify-json/radix-icons':
+        specifier: ^1.1.14
+        version: 1.1.14
+      '@iconify-json/simple-icons':
+        specifier: ^1.1.100
+        version: 1.1.101
+      '@iconify-json/tabler':
+        specifier: ^1.1.110
+        version: 1.1.111
+      '@iconify/json':
+        specifier: ^2.2.204
+        version: 2.2.207
+      '@iconify/vue':
+        specifier: ^4.1.2
+        version: 4.1.2(vue@3.4.25)
+      '@shikijs/transformers':
+        specifier: ^1.3.0
+        version: 1.4.0
+      '@tailwindcss/typography':
+        specifier: ^0.5.12
+        version: 0.5.13(tailwindcss@3.4.3)
+      '@types/lodash.template':
+        specifier: ^4.5.3
+        version: 4.5.3
+      '@types/node':
+        specifier: ^20.12.7
+        version: 20.12.10
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.4
+        version: 5.0.4(vite@5.2.11)(vue@3.4.25)
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^3.1.0
+        version: 3.1.0(vite@5.2.11)(vue@3.4.25)
+      '@vue/compiler-core':
+        specifier: ^3.4.25
+        version: 3.4.26
+      '@vue/compiler-dom':
+        specifier: ^3.4.25
+        version: 3.4.26
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
+      autoprefixer:
+        specifier: ^10.4.19
+        version: 10.4.19(postcss@8.4.38)
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.0
+      fast-glob:
+        specifier: ^3.3.2
+        version: 3.3.2
+      lodash.template:
+        specifier: ^4.5.0
+        version: 4.5.0
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
+      oxc-parser:
+        specifier: ^0.8.0
+        version: 0.8.0
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
+      postcss:
+        specifier: ^8.4.38
+        version: 8.4.38
+      rimraf:
+        specifier: ^5.0.5
+        version: 5.0.5
+      shiki:
+        specifier: ^1.3.0
+        version: 1.4.0
+      tailwind-merge:
+        specifier: ^2.3.0
+        version: 2.3.0
+      tailwindcss:
+        specifier: ^3.4.3
+        version: 3.4.3
+      tsx:
+        specifier: ^4.7.3
+        version: 4.9.3
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      unplugin-icons:
+        specifier: ^0.18.5
+        version: 0.18.5(@vue/compiler-sfc@3.4.27)
+      vite:
+        specifier: ^5.2.10
+        version: 5.2.11(@types/node@20.12.10)
+      vitepress:
+        specifier: ^1.1.3
+        version: 1.1.4(@algolia/client-search@4.23.3)(@types/node@20.12.10)(postcss@8.4.38)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.4.5)
+      vue-component-meta:
+        specifier: ^2.0.14
+        version: 2.0.16(typescript@5.4.5)
+      vue-tsc:
+        specifier: ^2.0.14
+        version: 2.0.14(typescript@5.4.5)
+
+  packages/wedges-vue:
+    dependencies:
+      '@iconicicons/vue3':
+        specifier: ^1.5.1
+        version: 1.5.1(vue@3.4.27)
+      '@lemonsqueezy/wedges':
+        specifier: ^1.2.2
+        version: 1.2.2(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.3)(typescript@5.4.5)
+      '@vueuse/core':
+        specifier: ^10.9.0
+        version: 10.9.0(vue@3.4.27)
+      radix-vue:
+        specifier: ^1.7.4
+        version: 1.7.4(vue@3.4.27)
+      vue:
+        specifier: ^3.4.27
+        version: 3.4.27(typescript@5.4.5)
+    devDependencies:
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.4
+        version: 5.0.4(vite@5.2.11)(vue@3.4.27)
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      tailwind-merge:
+        specifier: ^2.3.0
+        version: 2.3.0
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+      vite:
+        specifier: ^5.2.11
+        version: 5.2.11(@types/node@20.12.11)
+      vue-tsc:
+        specifier: ^2.0.16
+        version: 2.0.16(typescript@5.4.5)
+
+packages:
+
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)(search-insights@2.13.0):
+    resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
+    dependencies:
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)(search-insights@2.13.0)
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+      - search-insights
+    dev: true
+
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)(search-insights@2.13.0):
+    resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
+    peerDependencies:
+      search-insights: '>= 1 < 3'
+    dependencies:
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)
+      search-insights: 2.13.0
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - algoliasearch
+    dev: true
+
+  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3):
+    resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
+    dependencies:
+      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)
+      '@algolia/client-search': 4.23.3
+      algoliasearch: 4.23.3
+    dev: true
+
+  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3):
+    resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
+    peerDependencies:
+      '@algolia/client-search': '>= 4.9.1 < 6'
+      algoliasearch: '>= 4.9.1 < 6'
+    dependencies:
+      '@algolia/client-search': 4.23.3
+      algoliasearch: 4.23.3
+    dev: true
+
+  /@algolia/cache-browser-local-storage@4.23.3:
+    resolution: {integrity: sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==}
+    dependencies:
+      '@algolia/cache-common': 4.23.3
+    dev: true
+
+  /@algolia/cache-common@4.23.3:
+    resolution: {integrity: sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A==}
+    dev: true
+
+  /@algolia/cache-in-memory@4.23.3:
+    resolution: {integrity: sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==}
+    dependencies:
+      '@algolia/cache-common': 4.23.3
+    dev: true
+
+  /@algolia/client-account@4.23.3:
+    resolution: {integrity: sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==}
+    dependencies:
+      '@algolia/client-common': 4.23.3
+      '@algolia/client-search': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/client-analytics@4.23.3:
+    resolution: {integrity: sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==}
+    dependencies:
+      '@algolia/client-common': 4.23.3
+      '@algolia/client-search': 4.23.3
+      '@algolia/requester-common': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/client-common@4.23.3:
+    resolution: {integrity: sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==}
+    dependencies:
+      '@algolia/requester-common': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/client-personalization@4.23.3:
+    resolution: {integrity: sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==}
+    dependencies:
+      '@algolia/client-common': 4.23.3
+      '@algolia/requester-common': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/client-search@4.23.3:
+    resolution: {integrity: sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==}
+    dependencies:
+      '@algolia/client-common': 4.23.3
+      '@algolia/requester-common': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/logger-common@4.23.3:
+    resolution: {integrity: sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g==}
+    dev: true
+
+  /@algolia/logger-console@4.23.3:
+    resolution: {integrity: sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==}
+    dependencies:
+      '@algolia/logger-common': 4.23.3
+    dev: true
+
+  /@algolia/recommend@4.23.3:
+    resolution: {integrity: sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==}
+    dependencies:
+      '@algolia/cache-browser-local-storage': 4.23.3
+      '@algolia/cache-common': 4.23.3
+      '@algolia/cache-in-memory': 4.23.3
+      '@algolia/client-common': 4.23.3
+      '@algolia/client-search': 4.23.3
+      '@algolia/logger-common': 4.23.3
+      '@algolia/logger-console': 4.23.3
+      '@algolia/requester-browser-xhr': 4.23.3
+      '@algolia/requester-common': 4.23.3
+      '@algolia/requester-node-http': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /@algolia/requester-browser-xhr@4.23.3:
+    resolution: {integrity: sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==}
+    dependencies:
+      '@algolia/requester-common': 4.23.3
+    dev: true
+
+  /@algolia/requester-common@4.23.3:
+    resolution: {integrity: sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw==}
+    dev: true
+
+  /@algolia/requester-node-http@4.23.3:
+    resolution: {integrity: sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==}
+    dependencies:
+      '@algolia/requester-common': 4.23.3
+    dev: true
+
+  /@algolia/transporter@4.23.3:
+    resolution: {integrity: sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==}
+    dependencies:
+      '@algolia/cache-common': 4.23.3
+      '@algolia/logger-common': 4.23.3
+      '@algolia/requester-common': 4.23.3
+    dev: true
+
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
+  /@ampproject/remapping@2.3.0:
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@antfu/eslint-config@2.16.2(@vue/compiler-sfc@3.4.27)(eslint@8.57.0)(typescript@5.4.5)(vitest@0.34.6):
+    resolution: {integrity: sha512-jvwM/Tukvulzr6L85zdpgU7jOxRBlOYFzsJE6u1cqbcR7g64w/7elo/MzehWrxilLrJMKajpSZ9FY4QRvsdHjg==}
+    hasBin: true
+    peerDependencies:
+      '@eslint-react/eslint-plugin': ^1.5.8
+      '@unocss/eslint-plugin': '>=0.50.0'
+      astro-eslint-parser: ^0.16.3
+      eslint: '>=8.40.0'
+      eslint-plugin-astro: ^0.31.4
+      eslint-plugin-format: '>=0.1.0'
+      eslint-plugin-react-hooks: ^4.6.0
+      eslint-plugin-react-refresh: ^0.4.4
+      eslint-plugin-solid: ^0.13.2
+      eslint-plugin-svelte: '>=2.35.1'
+      prettier-plugin-astro: ^0.13.0
+      prettier-plugin-slidev: ^1.0.5
+      svelte-eslint-parser: ^0.33.1
+    peerDependenciesMeta:
+      '@eslint-react/eslint-plugin':
+        optional: true
+      '@unocss/eslint-plugin':
+        optional: true
+      astro-eslint-parser:
+        optional: true
+      eslint-plugin-astro:
+        optional: true
+      eslint-plugin-format:
+        optional: true
+      eslint-plugin-react-hooks:
+        optional: true
+      eslint-plugin-react-refresh:
+        optional: true
+      eslint-plugin-solid:
+        optional: true
+      eslint-plugin-svelte:
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-slidev:
+        optional: true
+      svelte-eslint-parser:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.3.3
+      '@clack/prompts': 0.7.0
+      '@stylistic/eslint-plugin': 1.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/eslint-plugin': 7.7.1(@typescript-eslint/parser@7.7.1)(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+      eslint-config-flat-gitignore: 0.1.5
+      eslint-flat-config-utils: 0.2.4
+      eslint-merge-processors: 0.1.0(eslint@8.57.0)
+      eslint-plugin-antfu: 2.1.3(eslint@8.57.0)
+      eslint-plugin-command: 0.1.9(eslint@8.57.0)
+      eslint-plugin-eslint-comments: 3.2.0(eslint@8.57.0)
+      eslint-plugin-import-x: 0.5.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint-plugin-jsdoc: 48.2.3(eslint@8.57.0)
+      eslint-plugin-jsonc: 2.15.1(eslint@8.57.0)
+      eslint-plugin-markdown: 5.0.0(eslint@8.57.0)
+      eslint-plugin-n: 17.4.0(eslint@8.57.0)
+      eslint-plugin-no-only-tests: 3.1.0
+      eslint-plugin-perfectionist: 2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.2)
+      eslint-plugin-toml: 0.11.0(eslint@8.57.0)
+      eslint-plugin-unicorn: 52.0.0(eslint@8.57.0)
+      eslint-plugin-unused-imports: 3.2.0(@typescript-eslint/eslint-plugin@7.7.1)(eslint@8.57.0)
+      eslint-plugin-vitest: 0.5.4(@typescript-eslint/eslint-plugin@7.7.1)(eslint@8.57.0)(typescript@5.4.5)(vitest@0.34.6)
+      eslint-plugin-vue: 9.25.0(eslint@8.57.0)
+      eslint-plugin-yml: 1.14.0(eslint@8.57.0)
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.4.27)(eslint@8.57.0)
+      globals: 15.1.0
+      jsonc-eslint-parser: 2.4.0
+      local-pkg: 0.5.0
+      parse-gitignore: 2.0.0
+      picocolors: 1.0.0
+      toml-eslint-parser: 0.9.3
+      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+      yaml-eslint-parser: 1.2.2
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - supports-color
+      - svelte
+      - typescript
+      - vitest
+    dev: true
+
+  /@antfu/install-pkg@0.1.1:
+    resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==}
+    dependencies:
+      execa: 5.1.1
+      find-up: 5.0.0
+    dev: true
+
+  /@antfu/install-pkg@0.3.3:
+    resolution: {integrity: sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==}
+    dependencies:
+      '@jsdevtools/ez-spawn': 3.0.4
+    dev: true
+
+  /@antfu/utils@0.7.8:
+    resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
+    dev: true
+
+  /@babel/code-frame@7.24.2:
+    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.24.2
+      picocolors: 1.0.0
+
+  /@babel/compat-data@7.24.4:
+    resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core@7.24.5:
+    resolution: {integrity: sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@babel/code-frame': 7.24.2
+      '@babel/generator': 7.24.5
+      '@babel/helper-compilation-targets': 7.23.6
+      '@babel/helper-module-transforms': 7.24.5(@babel/core@7.24.5)
+      '@babel/helpers': 7.24.5
+      '@babel/parser': 7.24.5
+      '@babel/template': 7.24.0
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
+      convert-source-map: 2.0.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator@7.24.5:
+    resolution: {integrity: sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-annotate-as-pure@7.22.5:
+    resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-compilation-targets@7.23.6:
+    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/compat-data': 7.24.4
+      '@babel/helper-validator-option': 7.23.5
+      browserslist: 4.23.0
+      lru-cache: 5.1.1
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-create-class-features-plugin@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.24.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.5)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.24.5
+      semver: 6.3.1
+    dev: true
+
+  /@babel/helper-environment-visitor@7.22.20:
+    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name@7.23.0:
+    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.24.0
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-hoist-variables@7.22.5:
+    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-member-expression-to-functions@7.24.5:
+    resolution: {integrity: sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-module-imports@7.22.15:
+    resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-module-imports@7.24.3:
+    resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+
+  /@babel/helper-module-transforms@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.24.3
+      '@babel/helper-simple-access': 7.24.5
+      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/helper-validator-identifier': 7.24.5
+    dev: true
+
+  /@babel/helper-optimise-call-expression@7.22.5:
+    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-plugin-utils@7.24.5:
+    resolution: {integrity: sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.5):
+    resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.24.5
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
+  /@babel/helper-simple-access@7.24.5:
+    resolution: {integrity: sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
+    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-split-export-declaration@7.24.5:
+    resolution: {integrity: sha512-5CHncttXohrHk8GWOFCcCl4oRD9fKosWlIRgWm4ql9VYioKm52Mk2xsmoohvm7f3JoiLSM5ZgJuRaf5QZZYd3Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/helper-string-parser@7.24.1:
+    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.22.20:
+    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-identifier@7.24.5:
+    resolution: {integrity: sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==}
+    engines: {node: '>=6.9.0'}
+
+  /@babel/helper-validator-option@7.23.5:
+    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers@7.24.5:
+    resolution: {integrity: sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.24.0
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight@7.24.2:
+    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.22.20
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.0.0
+
+  /@babel/parser@7.24.5:
+    resolution: {integrity: sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.24.5
+
+  /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5):
+    resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+    dev: true
+
+  /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.5):
+    resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-plugin-utils': 7.24.5
+    dev: true
+
+  /@babel/plugin-transform-typescript@7.24.5(@babel/core@7.24.5):
+    resolution: {integrity: sha512-E0VWu/hk83BIFUWnsKZ4D81KXjN5L3MobvevOHErASk9IPwKHOkTgvqzvNo1yP/ePJWqqK2SpUR5z+KQbl6NVw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.24.5(@babel/core@7.24.5)
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.5)
+    dev: true
+
+  /@babel/runtime@7.24.5:
+    resolution: {integrity: sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.14.1
+
+  /@babel/template@7.24.0:
+    resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.24.2
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
+    dev: true
+
+  /@babel/traverse@7.24.5:
+    resolution: {integrity: sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.24.2
+      '@babel/generator': 7.24.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-hoist-variables': 7.22.5
+      '@babel/helper-split-export-declaration': 7.24.5
+      '@babel/parser': 7.24.5
+      '@babel/types': 7.24.5
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types@7.24.5:
+    resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.24.1
+      '@babel/helper-validator-identifier': 7.24.5
+      to-fast-properties: 2.0.0
+
+  /@clack/core@0.3.4:
+    resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
+    dependencies:
+      picocolors: 1.0.0
+      sisteransi: 1.0.5
+    dev: true
+
+  /@clack/prompts@0.7.0:
+    resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
+    dependencies:
+      '@clack/core': 0.3.4
+      picocolors: 1.0.0
+      sisteransi: 1.0.5
+    dev: true
+    bundledDependencies:
+      - is-unicode-supported
+
+  /@commitlint/cli@19.3.0(@types/node@20.12.11)(typescript@5.4.5):
+    resolution: {integrity: sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g==}
+    engines: {node: '>=v18'}
+    hasBin: true
+    dependencies:
+      '@commitlint/format': 19.3.0
+      '@commitlint/lint': 19.2.2
+      '@commitlint/load': 19.2.0(@types/node@20.12.11)(typescript@5.4.5)
+      '@commitlint/read': 19.2.1
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+    dev: true
+
+  /@commitlint/config-conventional@19.2.2:
+    resolution: {integrity: sha512-mLXjsxUVLYEGgzbxbxicGPggDuyWNkf25Ht23owXIH+zV2pv1eJuzLK3t1gDY5Gp6pxdE60jZnWUY5cvgL3ufw==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      conventional-changelog-conventionalcommits: 7.0.2
+    dev: true
+
+  /@commitlint/config-validator@19.0.3:
+    resolution: {integrity: sha512-2D3r4PKjoo59zBc2auodrSCaUnCSALCx54yveOFwwP/i2kfEAQrygwOleFWswLqK0UL/F9r07MFi5ev2ohyM4Q==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      ajv: 8.13.0
+    dev: true
+
+  /@commitlint/ensure@19.0.3:
+    resolution: {integrity: sha512-SZEpa/VvBLoT+EFZVb91YWbmaZ/9rPH3ESrINOl0HD2kMYsjvl0tF7nMHh0EpTcv4+gTtZBAe1y/SS6/OhfZzQ==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      lodash.camelcase: 4.3.0
+      lodash.kebabcase: 4.1.1
+      lodash.snakecase: 4.1.1
+      lodash.startcase: 4.4.0
+      lodash.upperfirst: 4.3.1
+    dev: true
+
+  /@commitlint/execute-rule@19.0.0:
+    resolution: {integrity: sha512-mtsdpY1qyWgAO/iOK0L6gSGeR7GFcdW7tIjcNFxcWkfLDF5qVbPHKuGATFqRMsxcO8OUKNj0+3WOHB7EHm4Jdw==}
+    engines: {node: '>=v18'}
+    dev: true
+
+  /@commitlint/format@19.3.0:
+    resolution: {integrity: sha512-luguk5/aF68HiF4H23ACAfk8qS8AHxl4LLN5oxPc24H+2+JRPsNr1OS3Gaea0CrH7PKhArBMKBz5RX9sA5NtTg==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      chalk: 5.3.0
+    dev: true
+
+  /@commitlint/is-ignored@19.2.2:
+    resolution: {integrity: sha512-eNX54oXMVxncORywF4ZPFtJoBm3Tvp111tg1xf4zWXGfhBPKpfKG6R+G3G4v5CPlRROXpAOpQ3HMhA9n1Tck1g==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      semver: 7.6.0
+    dev: true
+
+  /@commitlint/lint@19.2.2:
+    resolution: {integrity: sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/is-ignored': 19.2.2
+      '@commitlint/parse': 19.0.3
+      '@commitlint/rules': 19.0.3
+      '@commitlint/types': 19.0.3
+    dev: true
+
+  /@commitlint/load@19.2.0(@types/node@20.12.11)(typescript@5.4.5):
+    resolution: {integrity: sha512-XvxxLJTKqZojCxaBQ7u92qQLFMMZc4+p9qrIq/9kJDy8DOrEa7P1yx7Tjdc2u2JxIalqT4KOGraVgCE7eCYJyQ==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/config-validator': 19.0.3
+      '@commitlint/execute-rule': 19.0.0
+      '@commitlint/resolve-extends': 19.1.0
+      '@commitlint/types': 19.0.3
+      chalk: 5.3.0
+      cosmiconfig: 9.0.0(typescript@5.4.5)
+      cosmiconfig-typescript-loader: 5.0.0(@types/node@20.12.11)(cosmiconfig@9.0.0)(typescript@5.4.5)
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - typescript
+    dev: true
+
+  /@commitlint/message@19.0.0:
+    resolution: {integrity: sha512-c9czf6lU+9oF9gVVa2lmKaOARJvt4soRsVmbR7Njwp9FpbBgste5i7l/2l5o8MmbwGh4yE1snfnsy2qyA2r/Fw==}
+    engines: {node: '>=v18'}
+    dev: true
+
+  /@commitlint/parse@19.0.3:
+    resolution: {integrity: sha512-Il+tNyOb8VDxN3P6XoBBwWJtKKGzHlitEuXA5BP6ir/3loWlsSqDr5aecl6hZcC/spjq4pHqNh0qPlfeWu38QA==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/types': 19.0.3
+      conventional-changelog-angular: 7.0.0
+      conventional-commits-parser: 5.0.0
+    dev: true
+
+  /@commitlint/read@19.2.1:
+    resolution: {integrity: sha512-qETc4+PL0EUv7Q36lJbPG+NJiBOGg7SSC7B5BsPWOmei+Dyif80ErfWQ0qXoW9oCh7GTpTNRoaVhiI8RbhuaNw==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/top-level': 19.0.0
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+      git-raw-commits: 4.0.0
+      minimist: 1.2.8
+    dev: true
+
+  /@commitlint/resolve-extends@19.1.0:
+    resolution: {integrity: sha512-z2riI+8G3CET5CPgXJPlzftH+RiWYLMYv4C9tSLdLXdr6pBNimSKukYP9MS27ejmscqCTVA4almdLh0ODD2KYg==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/config-validator': 19.0.3
+      '@commitlint/types': 19.0.3
+      global-directory: 4.0.1
+      import-meta-resolve: 4.1.0
+      lodash.mergewith: 4.6.2
+      resolve-from: 5.0.0
+    dev: true
+
+  /@commitlint/rules@19.0.3:
+    resolution: {integrity: sha512-TspKb9VB6svklxNCKKwxhELn7qhtY1rFF8ls58DcFd0F97XoG07xugPjjbVnLqmMkRjZDbDIwBKt9bddOfLaPw==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@commitlint/ensure': 19.0.3
+      '@commitlint/message': 19.0.0
+      '@commitlint/to-lines': 19.0.0
+      '@commitlint/types': 19.0.3
+      execa: 8.0.1
+    dev: true
+
+  /@commitlint/to-lines@19.0.0:
+    resolution: {integrity: sha512-vkxWo+VQU5wFhiP9Ub9Sre0FYe019JxFikrALVoD5UGa8/t3yOJEpEhxC5xKiENKKhUkTpEItMTRAjHw2SCpZw==}
+    engines: {node: '>=v18'}
+    dev: true
+
+  /@commitlint/top-level@19.0.0:
+    resolution: {integrity: sha512-KKjShd6u1aMGNkCkaX4aG1jOGdn7f8ZI8TR1VEuNqUOjWTOdcDSsmglinglJ18JTjuBX5I1PtjrhQCRcixRVFQ==}
+    engines: {node: '>=v18'}
+    dependencies:
+      find-up: 7.0.0
+    dev: true
+
+  /@commitlint/types@19.0.3:
+    resolution: {integrity: sha512-tpyc+7i6bPG9mvaBbtKUeghfyZSDgWquIDfMgqYtTbmZ9Y9VzEm2je9EYcQ0aoz5o7NvGS+rcDec93yO08MHYA==}
+    engines: {node: '>=v18'}
+    dependencies:
+      '@types/conventional-commits-parser': 5.0.0
+      chalk: 5.3.0
+    dev: true
+
+  /@docsearch/css@3.6.0:
+    resolution: {integrity: sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ==}
+    dev: true
+
+  /@docsearch/js@3.6.0(@algolia/client-search@4.23.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0):
+    resolution: {integrity: sha512-QujhqINEElrkIfKwyyyTfbsfMAYCkylInLYMRqHy7PHc8xTBQCow73tlo/Kc7oIwBrCLf0P3YhjlOeV4v8hevQ==}
+    dependencies:
+      '@docsearch/react': 3.6.0(@algolia/client-search@4.23.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)
+      preact: 10.21.0
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/react'
+      - react
+      - react-dom
+      - search-insights
+    dev: true
+
+  /@docsearch/react@3.6.0(@algolia/client-search@4.23.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0):
+    resolution: {integrity: sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==}
+    peerDependencies:
+      '@types/react': '>= 16.8.0 < 19.0.0'
+      react: '>= 16.8.0 < 19.0.0'
+      react-dom: '>= 16.8.0 < 19.0.0'
+      search-insights: '>= 1 < 3'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      search-insights:
+        optional: true
+    dependencies:
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)(search-insights@2.13.0)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.23.3)(algoliasearch@4.23.3)
+      '@docsearch/css': 3.6.0
+      algoliasearch: 4.23.3
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      search-insights: 2.13.0
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+    dev: true
+
+  /@emotion/babel-plugin@11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.24.3
+      '@babel/runtime': 7.24.5
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.4
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/cache@11.11.0:
+    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
+    dependencies:
+      '@emotion/memoize': 0.8.1
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      stylis: 4.2.0
+    dev: false
+
+  /@emotion/css@11.11.2:
+    resolution: {integrity: sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==}
+    dependencies:
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.4
+      '@emotion/sheet': 1.2.2
+      '@emotion/utils': 1.2.1
+    dev: false
+
+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
+  /@emotion/memoize@0.8.1:
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+    dev: false
+
+  /@emotion/serialize@1.1.4:
+    resolution: {integrity: sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==}
+    dependencies:
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
+      csstype: 3.1.3
+    dev: false
+
+  /@emotion/sheet@1.2.2:
+    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
+    dev: false
+
+  /@emotion/unitless@0.8.1:
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
+    dev: false
+
+  /@emotion/utils@1.2.1:
+    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
+    dev: false
+
+  /@emotion/weak-memoize@0.3.1:
+    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
+    dev: false
+
+  /@es-joy/jsdoccomment@0.42.0:
+    resolution: {integrity: sha512-R1w57YlVA6+YE01wch3GPYn6bCsrOV3YW/5oGGE2tmX6JcL9Nr+b5IikrjMPF+v9CV3ay+obImEdsDhovhJrzw==}
+    engines: {node: '>=16'}
+    dependencies:
+      comment-parser: 1.4.1
+      esquery: 1.5.0
+      jsdoc-type-pratt-parser: 4.0.0
+    dev: true
+
+  /@esbuild/aix-ppc64@0.20.2:
+    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.20.2:
+    resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.20.2:
+    resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.20.2:
+    resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.20.2:
+    resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.20.2:
+    resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.20.2:
+    resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.20.2:
+    resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.20.2:
+    resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.20.2:
+    resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.20.2:
+    resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.20.2:
+    resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.20.2:
+    resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.20.2:
+    resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.20.2:
+    resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.20.2:
+    resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.20.2:
+    resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.20.2:
+    resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.20.2:
+    resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.20.2:
+    resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.20.2:
+    resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.20.2:
+    resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.20.2:
+    resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0):
+    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+    dependencies:
+      eslint: 8.57.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@eslint-community/regexpp@4.10.0:
+    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+    dev: true
+
+  /@eslint/eslintrc@2.1.4:
+    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.4
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@eslint/js@8.57.0:
+    resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /@floating-ui/core@1.6.0:
+    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
+    dependencies:
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/core@1.6.1:
+    resolution: {integrity: sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==}
+    dependencies:
+      '@floating-ui/utils': 0.2.2
+    dev: false
+
+  /@floating-ui/dom@1.6.3:
+    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
+    dependencies:
+      '@floating-ui/core': 1.6.0
+      '@floating-ui/utils': 0.2.1
+    dev: false
+
+  /@floating-ui/dom@1.6.5:
+    resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==}
+    dependencies:
+      '@floating-ui/core': 1.6.1
+      '@floating-ui/utils': 0.2.2
+    dev: false
+
+  /@floating-ui/react-dom@2.0.8(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@floating-ui/utils@0.2.1:
+    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+    dev: false
+
+  /@floating-ui/utils@0.2.2:
+    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
+    dev: false
+
+  /@floating-ui/vue@1.0.6(vue@3.4.25):
+    resolution: {integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==}
+    dependencies:
+      '@floating-ui/dom': 1.6.3
+      '@floating-ui/utils': 0.2.1
+      vue-demi: 0.14.7(vue@3.4.25)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@floating-ui/vue@1.0.6(vue@3.4.27):
+    resolution: {integrity: sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==}
+    dependencies:
+      '@floating-ui/dom': 1.6.5
+      '@floating-ui/utils': 0.2.2
+      vue-demi: 0.14.7(vue@3.4.27)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@formkit/auto-animate@0.8.2:
+    resolution: {integrity: sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==}
+    dev: false
+
+  /@humanwhocodes/config-array@0.11.14:
+    resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
+    engines: {node: '>=10.10.0'}
+    dependencies:
+      '@humanwhocodes/object-schema': 2.0.3
+      debug: 4.3.4
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@humanwhocodes/module-importer@1.0.1:
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+    dev: true
+
+  /@humanwhocodes/object-schema@2.0.3:
+    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    dev: true
+
+  /@iconicicons/react@1.5.1(react@18.3.1):
+    resolution: {integrity: sha512-/Y23Y5NBBK7h/1/R8vTdHM0zwX9Yhk8L58QRhpD1Zu8heXDOz89Lqhzb8VQ1DAdYnd0vjfcGcQaUSgZQVbnlOw==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.3.1
+    dev: false
+
+  /@iconicicons/vue3@1.5.1(vue@3.4.25):
+    resolution: {integrity: sha512-A3U5yWSZZCoBr+35ysxvXYx/AY2G1gDEsD/0WqoMKeAKaEJwZfomRENCM0dv04zBfe5nBzDhRPF5x/bf9jRtOQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /@iconicicons/vue3@1.5.1(vue@3.4.27):
+    resolution: {integrity: sha512-A3U5yWSZZCoBr+35ysxvXYx/AY2G1gDEsD/0WqoMKeAKaEJwZfomRENCM0dv04zBfe5nBzDhRPF5x/bf9jRtOQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@iconify-json/radix-icons@1.1.14:
+    resolution: {integrity: sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/simple-icons@1.1.101:
+    resolution: {integrity: sha512-7h7iUvCok031UcYUt2+wPD21tOwu/AzFB2I2PzzoC3R1jsNJjn5YV3v1q0g2CXcMYAzcsCyH00RbpFPFAiqjcw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify-json/tabler@1.1.111:
+    resolution: {integrity: sha512-0qCmOCUUgcBXtvSUwaKMM4yum6XNrjPLxZBwueRPn14pAmWhS7Un15chxJ+ULfE1hBaVM7gSPIYz4JAUOo28Aw==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
+  /@iconify/json@2.2.207:
+    resolution: {integrity: sha512-3ZsZcJHHCDoSbRKcpvdTk4e5ZnTLD902BjeNysj8NZIB5V9WaTh6L91eHyQgEaCt4j1shmAXrIr6LoImL6+GpA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+      pathe: 1.1.2
+    dev: true
+
+  /@iconify/types@2.0.0:
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+    dev: true
+
+  /@iconify/utils@2.1.23:
+    resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
+    dependencies:
+      '@antfu/install-pkg': 0.1.1
+      '@antfu/utils': 0.7.8
+      '@iconify/types': 2.0.0
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      mlly: 1.7.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@iconify/vue@4.1.2(vue@3.4.25):
+    resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
+    peerDependencies:
+      vue: '>=3'
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.4.25(typescript@5.4.5)
+    dev: true
+
+  /@internationalized/date@3.5.2:
+    resolution: {integrity: sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==}
+    dependencies:
+      '@swc/helpers': 0.5.6
+    dev: false
+
+  /@internationalized/date@3.5.3:
+    resolution: {integrity: sha512-X9bi8NAEHAjD8yzmPYT2pdJsbe+tYSEBAfowtlxJVJdZR3aK8Vg7ZUT1Fm5M47KLzp/M1p1VwAaeSma3RT7biw==}
+    dependencies:
+      '@swc/helpers': 0.5.11
+    dev: false
+
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+
+  /@jest/schemas@29.6.3:
+    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.27.8
+    dev: true
+
+  /@jridgewell/gen-mapping@0.3.5:
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.25
+
+  /@jridgewell/resolve-uri@3.1.2:
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  /@jridgewell/set-array@1.2.1:
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
+  /@jridgewell/sourcemap-codec@1.4.15:
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+
+  /@jridgewell/trace-mapping@0.3.25:
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+
+  /@jsdevtools/ez-spawn@3.0.4:
+    resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==}
+    engines: {node: '>=10'}
+    dependencies:
+      call-me-maybe: 1.0.2
+      cross-spawn: 7.0.3
+      string-argv: 0.3.2
+      type-detect: 4.0.8
+    dev: true
+
+  /@juggle/resize-observer@3.4.0:
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+    dev: false
+
+  /@lemonsqueezy/wedges@1.2.2(react-dom@18.3.1)(react@18.3.1)(tailwindcss@3.4.3)(typescript@5.4.5):
+    resolution: {integrity: sha512-UpN+ZUKD7rUIxj6pzISCiYZwMh01RJacEZ2aEAXxx2zoNpA6ehs37eo/DwEIJaXsk5EUPkAjgt3jR8IVT5NkpQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^18.0
+      react-dom: ^18.0
+      tailwindcss: '*'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@iconicicons/react': 1.5.1(react@18.3.1)
+      '@radix-ui/react-avatar': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-checkbox': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-dropdown-menu': 2.0.6(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-label': 2.0.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-popover': 1.0.7(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-progress': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-radio-group': 1.1.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slider': 1.1.2(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      '@radix-ui/react-switch': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-tabs': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-toggle-group': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-tooltip': 1.0.7(react-dom@18.3.1)(react@18.3.1)
+      clsx: 2.1.1
+      color: 4.2.3
+      color2k: 2.0.3
+      cva: 1.0.0-beta.1(typescript@5.4.5)
+      deepmerge: 4.3.1
+      flat: 6.0.1
+      lodash.omit: 4.5.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tailwind-merge: 2.3.0
+      tailwindcss: 3.4.3
+    transitivePeerDependencies:
+      - typescript
+    dev: false
+
+  /@mapbox/geojson-rewind@0.5.2:
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.8
+    dev: false
+
+  /@mapbox/jsonlint-lines-primitives@2.0.2:
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /@mapbox/mapbox-gl-supported@2.0.1:
+    resolution: {integrity: sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ==}
+    dev: false
+
+  /@mapbox/point-geometry@0.1.0:
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+    dev: false
+
+  /@mapbox/tiny-sdf@2.0.6:
+    resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
+    dev: false
+
+  /@mapbox/unitbezier@0.0.1:
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+    dev: false
+
+  /@mapbox/vector-tile@1.3.1:
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+    dev: false
+
+  /@mapbox/whoots-js@3.1.0:
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@nodelib/fs.scandir@2.1.5:
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  /@nodelib/fs.stat@2.0.5:
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  /@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.17.1
+
+  /@oxc-parser/binding-darwin-arm64@0.8.0:
+    resolution: {integrity: sha512-3Dws5Wzj9efojjqvhS4ZF+Abh0EoiI5ciOE2kdLifMzSg4fnmYAIOktoUnPEo87TNIb4SiFJ5JgPBgEyq42Eow==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-darwin-x64@0.8.0:
+    resolution: {integrity: sha512-DAUJ/mfq0Jn2VDYn69bhHTsIWj+aZ/viamexFwaLL7ntkIFmGpzAJZUlWofpY1IRJynKWW+P5AOLYXMllw4qUw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm64-gnu@0.8.0:
+    resolution: {integrity: sha512-ZHQVey/O4K3zTIKtpfsbtJIE8MPTRHRxgY3dejaoeFQGf9C3HasgF132Yp4zN/jOUx+x8czKPVa/Af40ViyhGQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-arm64-musl@0.8.0:
+    resolution: {integrity: sha512-Diw+Tnf5v+zAYXzDoSKCZsMaroU6GoqZMS7smfDtFnZYTHWZrsTmPBLUQe7AFiG7O7tkhsCdcWjOYgbVkrSVOA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-x64-gnu@0.8.0:
+    resolution: {integrity: sha512-WloqcRrtQUVEP/Sy8ZeEgF0HgBKQjOv3zLFZqbC5ipkerKriGcVbsq3fOIMOi/55AM6/UhIAjeZGnoeco72JjQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-linux-x64-musl@0.8.0:
+    resolution: {integrity: sha512-2j7BD9szwSXTvSj0Q8VE98UHGYvrgZzdLy4EyB0FilhQnopEfz+YV674rWGY2Il1VYxHJwGctrTJHvARolu37g==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-win32-arm64-msvc@0.8.0:
+    resolution: {integrity: sha512-mcomr1og17yCmnwn8Q7CRzrH9Va0HccWe4Ld3/u/elBsw0SEzYGVvECRzCyRglYAbKTtusz7as9Jee0RiMOMmg==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@oxc-parser/binding-win32-x64-msvc@0.8.0:
+    resolution: {integrity: sha512-nIBkc1KZOVYUaHT3+U+gM354P3byMAIXMvlmLMbs0kWVRcI4vrzL8qwWpC6QdBQxWKZGqPEqGolv8H4dDYA9nQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@pkgjs/parseargs@0.11.0:
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+    requiresBuild: true
+    optional: true
+
+  /@popperjs/core@2.11.8:
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+    dev: false
+
+  /@radix-icons/vue@1.0.0(vue@3.4.25):
+    resolution: {integrity: sha512-gKWWk9tTK/laDRRNe5KLLR8A0qUwx4q4+DN8Fq48hJ904u78R82ayAO3TrxbNLgyn2D0h6rRiGdLzQWj7rPcvA==}
+    peerDependencies:
+      vue: '>= 3'
+    dependencies:
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /@radix-ui/number@1.0.1:
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
+  /@radix-ui/primitive@1.0.1:
+    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
+  /@radix-ui/react-arrow@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-avatar@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-checkbox@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-collection@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-compose-refs@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-context@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-direction@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-dismissable-layer@1.0.5(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-dropdown-menu@2.0.6(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-menu': 2.0.6(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-focus-guards@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-focus-scope@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-id@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-label@2.0.2(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-menu@2.0.6(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.5(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.5(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-popover@1.0.7(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.5(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      aria-hidden: 1.2.4
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-remove-scroll: 2.5.5(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-popper@1.1.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@floating-ui/react-dom': 2.0.8(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-arrow': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(react@18.3.1)
+      '@radix-ui/rect': 1.0.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-portal@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-presence@1.0.1(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-primitive@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-progress@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-5G6Om/tYSxjSeEdrb1VfKkfZfn/1IlPWd731h2RfPuSbIfNUgfqAwbKfJCg/PP6nuUCTrYzalwHSpSinoWoCag==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-radio-group@1.1.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-roving-focus@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-slider@1.1.2(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collection': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-slot@1.0.2(react@18.3.1):
+    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-switch@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.0.1(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-tabs@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-toggle-group@1.0.4(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-toggle': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-toggle@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-tooltip@1.0.7(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.5(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.4(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/react-use-callback-ref@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-controllable-state@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-escape-keydown@1.0.3(react@18.3.1):
+    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-use-callback-ref': 1.0.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-layout-effect@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-previous@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-rect@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/rect': 1.0.1
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-use-size@1.0.1(react@18.3.1):
+    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-use-layout-effect': 1.0.1(react@18.3.1)
+      react: 18.3.1
+    dev: false
+
+  /@radix-ui/react-visually-hidden@1.0.3(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/react-primitive': 1.0.3(react-dom@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
+  /@radix-ui/rect@1.0.1:
+    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
+  /@rollup/rollup-android-arm-eabi@4.17.2:
+    resolution: {integrity: sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.17.2:
+    resolution: {integrity: sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.17.2:
+    resolution: {integrity: sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.17.2:
+    resolution: {integrity: sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.17.2:
+    resolution: {integrity: sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-musleabihf@4.17.2:
+    resolution: {integrity: sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.17.2:
+    resolution: {integrity: sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.17.2:
+    resolution: {integrity: sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-powerpc64le-gnu@4.17.2:
+    resolution: {integrity: sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-riscv64-gnu@4.17.2:
+    resolution: {integrity: sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-s390x-gnu@4.17.2:
+    resolution: {integrity: sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.17.2:
+    resolution: {integrity: sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.17.2:
+    resolution: {integrity: sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.17.2:
+    resolution: {integrity: sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.17.2:
+    resolution: {integrity: sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.17.2:
+    resolution: {integrity: sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@shikijs/core@1.4.0:
+    resolution: {integrity: sha512-CxpKLntAi64h3j+TwWqVIQObPTED0FyXLHTTh3MKXtqiQNn2JGcMQQ362LftDbc9kYbDtrksNMNoVmVXzKFYUQ==}
+    dev: true
+
+  /@shikijs/transformers@1.4.0:
+    resolution: {integrity: sha512-kzvlWmWYYSeaLKRce/kgmFFORUtBtFahfXRKndor0b60ocYiXufBQM6d6w1PlMuUkdk55aor9xLvy9wy7hTEJg==}
+    dependencies:
+      shiki: 1.4.0
+    dev: true
+
+  /@sinclair/typebox@0.27.8:
+    resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
+    dev: true
+
+  /@stylistic/eslint-plugin-js@1.8.0(eslint@8.57.0):
+    resolution: {integrity: sha512-jdvnzt+pZPg8TfclZlTZPiUbbima93ylvQ+wNgHLNmup3obY6heQvgewSu9i2CfS61BnRByv+F9fxQLPoNeHag==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@types/eslint': 8.56.10
+      acorn: 8.11.3
+      escape-string-regexp: 4.0.0
+      eslint: 8.57.0
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+    dev: true
+
+  /@stylistic/eslint-plugin-jsx@1.8.0(eslint@8.57.0):
+    resolution: {integrity: sha512-PC7tYXipF03TTilGJva1amAham7qOAFXT5r5jLTY6iIxkFqyb6H7Ljx5pv8d7n98VyIVidOEKY/AP8vNzAFNKg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.8.0(eslint@8.57.0)
+      '@types/eslint': 8.56.10
+      eslint: 8.57.0
+      estraverse: 5.3.0
+      picomatch: 4.0.2
+    dev: true
+
+  /@stylistic/eslint-plugin-plus@1.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-TkrjzzYmTuAaLvFwtxomsgMUD8g8PREOQOQzTfKmiJ6oc4XOyFW4q/L9ES1J3UFSLybNCwbhu36lhXJut1w2Sg==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      '@types/eslint': 8.56.10
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@stylistic/eslint-plugin-ts@1.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-WuCIhz4JEHxzhAWjrBASMGj6Or1wAjDqTsRIck3DRRrw/FJ8C/8AAuHPk8ECHNSDI5PZ0OT72nF2uSUn0aQq1w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.8.0(eslint@8.57.0)
+      '@types/eslint': 8.56.10
+      '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@stylistic/eslint-plugin@1.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-JRR0lCDU97AiE0X6qTc/uf8Hv0yETUdyJgoNzTLUIWdhVJVe/KGPnFmEsO1iXfNUIS6vhv3JJ5vaZ2qtXhZe1g==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: '>=8.40.0'
+    dependencies:
+      '@stylistic/eslint-plugin-js': 1.8.0(eslint@8.57.0)
+      '@stylistic/eslint-plugin-jsx': 1.8.0(eslint@8.57.0)
+      '@stylistic/eslint-plugin-plus': 1.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@stylistic/eslint-plugin-ts': 1.8.0(eslint@8.57.0)(typescript@5.4.5)
+      '@types/eslint': 8.56.10
+      eslint: 8.57.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@swc/helpers@0.5.11:
+    resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
+  /@swc/helpers@0.5.6:
+    resolution: {integrity: sha512-aYX01Ke9hunpoCexYAgQucEpARGQ5w/cqHFrIR+e9gdKb1QWTsVJuTJ2ozQzIAxLyRQe/m+2RqzkyOOGiMKRQA==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
+  /@tailwindcss/typography@0.5.13(tailwindcss@3.4.3):
+    resolution: {integrity: sha512-ADGcJ8dX21dVVHIwTRgzrcunY6YY9uSlAHHGVKvkA+vLc5qLwEszvKts40lx7z0qc4clpjclwLeK5rVCV2P/uw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      postcss-selector-parser: 6.0.10
+      tailwindcss: 3.4.3
+    dev: true
+
+  /@tanstack/table-core@8.16.0:
+    resolution: {integrity: sha512-dCG8vQGk4js5v88/k83tTedWOwjGnIyONrKpHpfmSJB8jwFHl8GSu1sBBxbtACVAPtAQgwNxl0rw1d3RqRM1Tg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /@tanstack/virtual-core@3.4.0:
+    resolution: {integrity: sha512-75jXqXxqq5M5Veb9KP1STi8kA5u408uOOAefk2ftHDGCpUk3RP6zX++QqfbmHJTBiU72NQ+ghgCZVts/Wocz8Q==}
+    dev: false
+
+  /@tanstack/virtual-core@3.5.0:
+    resolution: {integrity: sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==}
+    dev: false
+
+  /@tanstack/vue-table@8.16.0(vue@3.4.25):
+    resolution: {integrity: sha512-CsmX3sEjR1BMlNk9nBYlrnWlAOJR34pirbmpgLN0UZs7N1Z66U+nEqaqNm4FnvkEnauODuHWVbFv3QZuoJ0BXw==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      vue: '>=3.2'
+    dependencies:
+      '@tanstack/table-core': 8.16.0
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /@tanstack/vue-virtual@3.4.0(vue@3.4.25):
+    resolution: {integrity: sha512-OHZGsmE89rpouVDGDOCtJTu64gLUzVq5FGkL2YY/wtZXu5QRSi5ep3T25Ivd53HQI3A169H01uwVPD0mEXKm9A==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.4.0
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /@tanstack/vue-virtual@3.5.0(vue@3.4.27):
+    resolution: {integrity: sha512-wvRQ8sFxn/NDr3WvI5XabhFovZ5MBmpEck2GHpTxYunmV63Ovpl30lRu6W5BPQo35a1GqDZ+Pvzlz6WDWRNqqw==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.5.0
+      vue: 3.4.27(typescript@5.4.5)
+    dev: false
+
+  /@types/chai-subset@1.3.5:
+    resolution: {integrity: sha512-c2mPnw+xHtXDoHmdtcCXGwyLMiauiAyxWMzhGpqHC4nqI/Y5G2XhTampslK2rb59kpcuHon03UH8W6iYUzw88A==}
+    dependencies:
+      '@types/chai': 4.3.16
+    dev: true
+
+  /@types/chai@4.3.16:
+    resolution: {integrity: sha512-PatH4iOdyh3MyWtmHVFXLWCCIhUbopaltqddG9BzB+gMIzee2MJrvd+jouii9Z3wzQJruGWAm7WOMjgfG8hQlQ==}
+    dev: true
+
+  /@types/conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-loB369iXNmAZglwWATL+WRe+CRMmmBPtpolYzIebFaX4YA3x+BEfLqhUAV9WanycKI3TG1IMr5bMJDajDKLlUQ==}
+    dependencies:
+      '@types/node': 20.12.10
+    dev: true
+
+  /@types/d3-array@3.2.1:
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+    dev: false
+
+  /@types/d3-axis@3.0.6:
+    resolution: {integrity: sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==}
+    dependencies:
+      '@types/d3-selection': 3.0.10
+    dev: false
+
+  /@types/d3-brush@3.0.6:
+    resolution: {integrity: sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==}
+    dependencies:
+      '@types/d3-selection': 3.0.10
+    dev: false
+
+  /@types/d3-chord@3.0.6:
+    resolution: {integrity: sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==}
+    dev: false
+
+  /@types/d3-collection@1.0.13:
+    resolution: {integrity: sha512-v0Rgw3IZebRyamcwVmtTDCZ8OmQcj4siaYjNc7wGMZT7PmdSHawGsCOQMxyLvZ7lWjfohYLK0oXtilMOMgfY8A==}
+    dev: false
+
+  /@types/d3-color@3.1.3:
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+    dev: false
+
+  /@types/d3-contour@3.0.6:
+    resolution: {integrity: sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==}
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==}
+    dev: false
+
+  /@types/d3-dispatch@3.0.6:
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+    dev: false
+
+  /@types/d3-drag@3.0.7:
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+    dependencies:
+      '@types/d3-selection': 3.0.10
+    dev: false
+
+  /@types/d3-dsv@3.0.7:
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+    dev: false
+
+  /@types/d3-ease@3.0.2:
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+    dev: false
+
+  /@types/d3-fetch@3.0.7:
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+    dev: false
+
+  /@types/d3-force@3.0.9:
+    resolution: {integrity: sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA==}
+    dev: false
+
+  /@types/d3-format@3.0.4:
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+    dev: false
+
+  /@types/d3-geo@3.1.0:
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/d3-hierarchy@3.1.7:
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+    dev: false
+
+  /@types/d3-interpolate@3.0.4:
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+    dependencies:
+      '@types/d3-color': 3.1.3
+    dev: false
+
+  /@types/d3-path@1.0.11:
+    resolution: {integrity: sha512-4pQMp8ldf7UaB/gR8Fvvy69psNHkTpD/pVw3vmEi8iZAB9EPMBruB1JvHO4BIq9QkUUd2lV1F5YXpMNj7JPBpw==}
+    dev: false
+
+  /@types/d3-path@3.1.0:
+    resolution: {integrity: sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==}
+    dev: false
+
+  /@types/d3-polygon@3.0.2:
+    resolution: {integrity: sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==}
+    dev: false
+
+  /@types/d3-quadtree@3.0.6:
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+    dev: false
+
+  /@types/d3-random@3.0.3:
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+    dev: false
+
+  /@types/d3-sankey@0.11.2:
+    resolution: {integrity: sha512-U6SrTWUERSlOhnpSrgvMX64WblX1AxX6nEjI2t3mLK2USpQrnbwYYK+AS9SwiE7wgYmOsSSKoSdr8aoKBH0HgQ==}
+    dependencies:
+      '@types/d3-shape': 1.3.12
+    dev: false
+
+  /@types/d3-scale-chromatic@3.0.3:
+    resolution: {integrity: sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==}
+    dev: false
+
+  /@types/d3-scale@4.0.8:
+    resolution: {integrity: sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==}
+    dependencies:
+      '@types/d3-time': 3.0.3
+    dev: false
+
+  /@types/d3-selection@3.0.10:
+    resolution: {integrity: sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==}
+    dev: false
+
+  /@types/d3-shape@1.3.12:
+    resolution: {integrity: sha512-8oMzcd4+poSLGgV0R1Q1rOlx/xdmozS4Xab7np0eamFFUYq71AU9pOCJEFnkXW2aI/oXdVYJzw6pssbSut7Z9Q==}
+    dependencies:
+      '@types/d3-path': 1.0.11
+    dev: false
+
+  /@types/d3-shape@3.1.6:
+    resolution: {integrity: sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==}
+    dependencies:
+      '@types/d3-path': 3.1.0
+    dev: false
+
+  /@types/d3-time-format@4.0.3:
+    resolution: {integrity: sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==}
+    dev: false
+
+  /@types/d3-time@3.0.3:
+    resolution: {integrity: sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==}
+    dev: false
+
+  /@types/d3-timer@3.0.2:
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+    dev: false
+
+  /@types/d3-transition@3.0.8:
+    resolution: {integrity: sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==}
+    dependencies:
+      '@types/d3-selection': 3.0.10
+    dev: false
+
+  /@types/d3-zoom@3.0.8:
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.10
+    dev: false
+
+  /@types/d3@7.4.3:
+    resolution: {integrity: sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==}
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-axis': 3.0.6
+      '@types/d3-brush': 3.0.6
+      '@types/d3-chord': 3.0.6
+      '@types/d3-color': 3.1.3
+      '@types/d3-contour': 3.0.6
+      '@types/d3-delaunay': 6.0.4
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-drag': 3.0.7
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.9
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.0
+      '@types/d3-polygon': 3.0.2
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.8
+      '@types/d3-scale-chromatic': 3.0.3
+      '@types/d3-selection': 3.0.10
+      '@types/d3-shape': 3.1.6
+      '@types/d3-time': 3.0.3
+      '@types/d3-time-format': 4.0.3
+      '@types/d3-timer': 3.0.2
+      '@types/d3-transition': 3.0.8
+      '@types/d3-zoom': 3.0.8
+    dev: false
+
+  /@types/dagre@0.7.52:
+    resolution: {integrity: sha512-XKJdy+OClLk3hketHi9Qg6gTfe1F3y+UFnHxKA2rn9Dw+oXa4Gb378Ztz9HlMgZKSxpPmn4BNVh9wgkpvrK1uw==}
+    dev: false
+
+  /@types/eslint@8.56.10:
+    resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==}
+    dependencies:
+      '@types/estree': 1.0.5
+      '@types/json-schema': 7.0.15
+    dev: true
+
+  /@types/estree@1.0.5:
+    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
+    dev: true
+
+  /@types/geojson@7946.0.14:
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+    dev: false
+
+  /@types/json-schema@7.0.15:
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+    dev: true
+
+  /@types/leaflet@1.7.6:
+    resolution: {integrity: sha512-Emkz3V08QnlelSbpT46OEAx+TBZYTOX2r1yM7W+hWg5+djHtQ1GbEXBDRLaqQDOYcDI51Ss0ayoqoKD4CtLUDA==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/linkify-it@5.0.0:
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+    dev: true
+
+  /@types/lodash.template@4.5.3:
+    resolution: {integrity: sha512-Mo0UYKLu1oXgkV9TVoXZLlXXjyIXlW7ZQRxi/4gQJmzJr63dmicE8gG0OkPjYTKBrBic852q0JzqrtNUWLBIyA==}
+    dependencies:
+      '@types/lodash': 4.17.1
+    dev: true
+
+  /@types/lodash@4.17.1:
+    resolution: {integrity: sha512-X+2qazGS3jxLAIz5JDXDzglAF3KpijdhFxlf/V1+hEsOUc+HnWi81L/uv/EvGuV90WY+7mPGFCUDGfQC3Gj95Q==}
+
+  /@types/mapbox__point-geometry@0.1.4:
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
+    dev: false
+
+  /@types/mapbox__vector-tile@1.3.4:
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
+    dev: false
+
+  /@types/markdown-it@14.1.1:
+    resolution: {integrity: sha512-4NpsnpYl2Gt1ljyBGrKMxFYAYvpqbnnkgP/i/g+NLpjEUa3obn1XJCur9YbEXKDAkaXqsR1LbDnGEJ0MmKFxfg==}
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+    dev: true
+
+  /@types/mdast@3.0.15:
+    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
+    dependencies:
+      '@types/unist': 2.0.10
+    dev: true
+
+  /@types/mdurl@2.0.0:
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+    dev: true
+
+  /@types/node@20.12.10:
+    resolution: {integrity: sha512-Eem5pH9pmWBHoGAT8Dr5fdc5rYA+4NAovdM4EktRPVAAiJhmWWfQrA0cFhAbOsQdSfIHjAud6YdkbL69+zSKjw==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
+
+  /@types/node@20.12.11:
+    resolution: {integrity: sha512-vDg9PZ/zi+Nqp6boSOT7plNuthRugEKixDv5sFTIpkE89MmNtEArAShI4mxuX2+UrLEe9pxC1vm2cjm9YlWbJw==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: true
+
+  /@types/normalize-package-data@2.4.4:
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+    dev: true
+
+  /@types/parse-json@4.0.2:
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+    dev: false
+
+  /@types/pbf@3.0.5:
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
+    dev: false
+
+  /@types/resize-observer-browser@0.1.11:
+    resolution: {integrity: sha512-cNw5iH8JkMkb3QkCoe7DaZiawbDQEUX8t7iuQaRTyLOyQCR2h+ibBD4GJt7p5yhUHrlOeL7ZtbxNHeipqNsBzQ==}
+    dev: false
+
+  /@types/semver@7.5.8:
+    resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
+    dev: true
+
+  /@types/supercluster@5.0.3:
+    resolution: {integrity: sha512-XMSqQEr7YDuNtFwSgaHHOjsbi0ZGL62V9Js4CW45RBuRYlNWSW/KDqN+RFFE7HdHcGhJPtN0klKvw06r9Kg7rg==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/three@0.135.0:
+    resolution: {integrity: sha512-l7WLhIHjhHMtlpyTSltPPAKLpiMwgMD1hXHj59AVUpYRoZP7Fd9NNOSRSvZBCPLpTHPYojgQvSJCoza9zoL7bg==}
+    dev: false
+
+  /@types/throttle-debounce@5.0.2:
+    resolution: {integrity: sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==}
+    dev: false
+
+  /@types/topojson-client@3.1.4:
+    resolution: {integrity: sha512-Ntf3ZSetMYy7z3PrVCvcqmdRoVhgKA9UKN0ZuuZf8Ts2kcyL4qK34IXBs6qO5fem62EK4k03PtkJPVoroVu4/w==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-server@3.0.4:
+    resolution: {integrity: sha512-5+ieK8ePfP+K2VH6Vgs1VCt+fO1U8XZHj0UsF+NktaF0DavAo1q3IvCBXgokk/xmtvoPltSUs6vxuR/zMdOE1g==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-simplify@3.0.3:
+    resolution: {integrity: sha512-sBO5UZ0O2dB0bNwo0vut2yLHhj3neUGi9uL7/ROdm8Gs6dtt4jcB9OGDKr+M2isZwQM2RuzVmifnMZpxj4IGNw==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/topojson-specification@1.0.5:
+    resolution: {integrity: sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+    dev: false
+
+  /@types/topojson@3.2.6:
+    resolution: {integrity: sha512-ppfdlxjxofWJ66XdLgIlER/85RvpGyfOf8jrWf+3kVIjEatFxEZYD/Ea83jO672Xu1HRzd/ghwlbcZIUNHTskw==}
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/topojson-client': 3.1.4
+      '@types/topojson-server': 3.0.4
+      '@types/topojson-simplify': 3.0.3
+      '@types/topojson-specification': 1.0.5
+    dev: false
+
+  /@types/unist@2.0.10:
+    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+    dev: true
+
+  /@types/web-bluetooth@0.0.20:
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
+  /@typescript-eslint/eslint-plugin@7.7.1(@typescript-eslint/parser@7.7.1)(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-KwfdWXJBOviaBVhxO3p5TJiLpNuh2iyXyjmWN0f1nU87pwyvfS0EmjC6ukQVYVFJd/K1+0NWGPDXiyEyQorn0Q==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^7.0.0
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@eslint-community/regexpp': 4.10.0
+      '@typescript-eslint/parser': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/scope-manager': 7.7.1
+      '@typescript-eslint/type-utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.7.1
+      debug: 4.3.4
+      eslint: 8.57.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare: 1.4.0
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/parser@7.7.1(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-vmPzBOOtz48F6JAGVS/kZYk4EkXao6iGrD838sp1w3NQQC0W8ry/q641KU4PrG7AKNAf56NOcR8GOpH8l9FPCw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/scope-manager': 7.7.1
+      '@typescript-eslint/types': 7.7.1
+      '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.7.1
+      debug: 4.3.4
+      eslint: 8.57.0
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/scope-manager@6.21.0:
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+    dev: true
+
+  /@typescript-eslint/scope-manager@7.7.1:
+    resolution: {integrity: sha512-PytBif2SF+9SpEUKynYn5g1RHFddJUcyynGpztX3l/ik7KmZEv19WCMhUBkHXPU9es/VWGD3/zg3wg90+Dh2rA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.7.1
+      '@typescript-eslint/visitor-keys': 7.7.1
+    dev: true
+
+  /@typescript-eslint/scope-manager@7.8.0:
+    resolution: {integrity: sha512-viEmZ1LmwsGcnr85gIq+FCYI7nO90DVbE37/ll51hjv9aG+YZMb4WDE2fyWpUR4O/UrhGRpYXK/XajcGTk2B8g==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/visitor-keys': 7.8.0
+    dev: true
+
+  /@typescript-eslint/type-utils@7.7.1(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-ZksJLW3WF7o75zaBPScdW1Gbkwhd/lyeXGf1kQCxJaOeITscoSl0MjynVvCzuV5boUz/3fOI06Lz8La55mu29Q==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.7.1(eslint@8.57.0)(typescript@5.4.5)
+      debug: 4.3.4
+      eslint: 8.57.0
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/types@6.21.0:
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dev: true
+
+  /@typescript-eslint/types@7.7.1:
+    resolution: {integrity: sha512-AmPmnGW1ZLTpWa+/2omPrPfR7BcbUU4oha5VIbSbS1a1Tv966bklvLNXxp3mrbc+P2j4MNOTfDffNsk4o0c6/w==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dev: true
+
+  /@typescript-eslint/types@7.8.0:
+    resolution: {integrity: sha512-wf0peJ+ZGlcH+2ZS23aJbOv+ztjeeP8uQ9GgwMJGVLx/Nj9CJt17GWgWWoSmoRVKAX2X+7fzEnAjxdvK2gqCLw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dev: true
+
+  /@typescript-eslint/typescript-estree@6.21.0(typescript@5.4.5):
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/typescript-estree@7.7.1(typescript@5.4.5):
+    resolution: {integrity: sha512-CXe0JHCXru8Fa36dteXqmH2YxngKJjkQLjxzoj6LYwzZ7qZvgsLSc+eqItCrqIop8Vl2UKoAi0StVWu97FQZIQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 7.7.1
+      '@typescript-eslint/visitor-keys': 7.7.1
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.4
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/typescript-estree@7.8.0(typescript@5.4.5):
+    resolution: {integrity: sha512-5pfUCOwK5yjPaJQNy44prjCwtr981dO8Qo9J9PwYXZ0MosgAbfEMB008dJ5sNo3+/BN6ytBPuSvXUg9SAqB0dg==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/visitor-keys': 7.8.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.4
+      semver: 7.6.0
+      ts-api-utils: 1.3.0(typescript@5.4.5)
+      typescript: 5.4.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.4.5)
+      eslint: 8.57.0
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/utils@7.7.1(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-QUvBxPEaBXf41ZBbaidKICgVL8Hin0p6prQDu6bbetWo39BKbWJxRsErOzMNT1rXvTll+J7ChrbmMCXM9rsvOQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 7.7.1
+      '@typescript-eslint/types': 7.7.1
+      '@typescript-eslint/typescript-estree': 7.7.1(typescript@5.4.5)
+      eslint: 8.57.0
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/utils@7.8.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-L0yFqOCflVqXxiZyXrDr80lnahQfSOfc9ELAAZ75sqicqp2i36kEZZGuUymHNFoYOqxRT05up760b4iGsl02nQ==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    peerDependencies:
+      eslint: ^8.56.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 7.8.0
+      '@typescript-eslint/types': 7.8.0
+      '@typescript-eslint/typescript-estree': 7.8.0(typescript@5.4.5)
+      eslint: 8.57.0
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /@typescript-eslint/visitor-keys@6.21.0:
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@typescript-eslint/visitor-keys@7.7.1:
+    resolution: {integrity: sha512-gBL3Eq25uADw1LQ9kVpf3hRM+DWzs0uZknHYK3hq4jcTPqVCClHGDnB6UUUV2SFeBeA4KWHWbbLqmbGcZ4FYbw==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.7.1
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@typescript-eslint/visitor-keys@7.8.0:
+    resolution: {integrity: sha512-q4/gibTNBQNA0lGyYQCmWRS5D15n8rXh4QjK3KV+MBPlTYHpfBUT3D3PaPR/HeNiI9W6R7FvlkcGhNyAoP+caA==}
+    engines: {node: ^18.18.0 || >=20.0.0}
+    dependencies:
+      '@typescript-eslint/types': 7.8.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /@ungap/structured-clone@1.2.0:
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    dev: true
+
+  /@unovis/dagre-layout@0.8.8-2:
+    resolution: {integrity: sha512-ZfDvfcYtzzhZhgKZty8XDi+zQIotfRqfNVF5M3dFQ9d9C5MTaRdbeBnPUkNrmlLJGgQ42HMOE2ajZLfm2VlRhg==}
+    dependencies:
+      '@unovis/graphlibrary': 2.2.0-2
+      lodash-es: 4.17.21
+    dev: false
+
+  /@unovis/graphlibrary@2.2.0-2:
+    resolution: {integrity: sha512-HeEzpd/vDyWiIJt0rnh+2ICXUIuF2N0+Z9OJJiKg0DB+eFUcD+bk+9QPhYHwkFwfxdjDA9fHi1DZ/O/bbV58Nw==}
+    dependencies:
+      lodash-es: 4.17.21
+    dev: false
+
+  /@unovis/ts@1.4.0:
+    resolution: {integrity: sha512-s+QIHldSm4KXo3lO3TduYb3NlJcUdx+hSCFkbJESkFF0/S3NE72dKLBHSv7PvpE1tTLvAHfb142ThOLVLT5eNg==}
+    dependencies:
+      '@emotion/css': 11.11.2
+      '@juggle/resize-observer': 3.4.0
+      '@types/d3': 7.4.3
+      '@types/d3-collection': 1.0.13
+      '@types/d3-sankey': 0.11.2
+      '@types/dagre': 0.7.52
+      '@types/geojson': 7946.0.14
+      '@types/leaflet': 1.7.6
+      '@types/supercluster': 5.0.3
+      '@types/three': 0.135.0
+      '@types/throttle-debounce': 5.0.2
+      '@types/topojson': 3.2.6
+      '@types/topojson-client': 3.1.4
+      '@types/topojson-specification': 1.0.5
+      '@unovis/dagre-layout': 0.8.8-2
+      '@unovis/graphlibrary': 2.2.0-2
+      d3: 7.9.0
+      d3-collection: 1.0.7
+      d3-geo-projection: 4.0.0
+      d3-interpolate-path: 2.3.0
+      d3-sankey: 0.12.3
+      elkjs: 0.8.2
+      geojson: 0.5.0
+      leaflet: 1.7.1
+      maplibre-gl: 2.4.0
+      striptags: 3.2.0
+      supercluster: 7.1.5
+      three: 0.135.0
+      throttle-debounce: 5.0.0
+      to-px: 1.1.0
+      topojson-client: 3.1.0
+      tslib: 2.6.2
+    dev: false
+
+  /@unovis/vue@1.4.0(@unovis/ts@1.4.0)(vue@3.4.25):
+    resolution: {integrity: sha512-QETQVZQ5m4rcudBxB1WvV1zRDnZ9Tesim5O3mcc+dYjRI4HhCcIOFCh+LatWJO0eVoLxmUChuqsk8upAIJUrGw==}
+    peerDependencies:
+      '@unovis/ts': 1.4.0
+      vue: ^3
+    dependencies:
+      '@unovis/ts': 1.4.0
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /@vee-validate/zod@4.12.7(vue@3.4.25):
+    resolution: {integrity: sha512-4VPly2tu9xpPP1onmDBOQPKAyivJ6j+1JF5YAXAf2ofoxfPAW2y8mBwe0zsKE1TAI8xyT9nkb2oWNzX1HrlPVw==}
+    dependencies:
+      type-fest: 4.18.2
+      vee-validate: 4.12.7(vue@3.4.25)
+      zod: 3.23.7
+    transitivePeerDependencies:
+      - vue
+    dev: false
+
+  /@vitejs/plugin-vue-jsx@3.1.0(vite@5.2.11)(vue@3.4.25):
+    resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+      vue: ^3.0.0
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/plugin-transform-typescript': 7.24.5(@babel/core@7.24.5)
+      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.5)
+      vite: 5.2.11(@types/node@20.12.10)
+      vue: 3.4.25(typescript@5.4.5)
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.25):
+    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 5.2.11(@types/node@20.12.10)
+      vue: 3.4.25(typescript@5.4.5)
+    dev: true
+
+  /@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.27):
+    resolution: {integrity: sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    peerDependencies:
+      vite: ^5.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 5.2.11(@types/node@20.12.11)
+      vue: 3.4.27(typescript@5.4.5)
+    dev: true
+
+  /@vitest/expect@0.34.6:
+    resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
+    dependencies:
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      chai: 4.4.1
+    dev: true
+
+  /@vitest/runner@0.34.6:
+    resolution: {integrity: sha512-1CUQgtJSLF47NnhN+F9X2ycxUP0kLHQ/JWvNHbeBfwW8CzEGgeskzNnHDyv1ieKTltuR6sdIHV+nmR6kPxQqzQ==}
+    dependencies:
+      '@vitest/utils': 0.34.6
+      p-limit: 4.0.0
+      pathe: 1.1.2
+    dev: true
+
+  /@vitest/snapshot@0.34.6:
+    resolution: {integrity: sha512-B3OZqYn6k4VaN011D+ve+AA4whM4QkcwcrwaKwAbyyvS/NB1hCWjFIBQxAQQSQir9/RtyAAGuq+4RJmbn2dH4w==}
+    dependencies:
+      magic-string: 0.30.10
+      pathe: 1.1.2
+      pretty-format: 29.7.0
+    dev: true
+
+  /@vitest/spy@0.34.6:
+    resolution: {integrity: sha512-xaCvneSaeBw/cz8ySmF7ZwGvL0lBjfvqc1LpQ/vcdHEvpLn3Ff1vAvjw+CoGn0802l++5L/pxb7whwcWAw+DUQ==}
+    dependencies:
+      tinyspy: 2.2.1
+    dev: true
+
+  /@vitest/utils@0.34.6:
+    resolution: {integrity: sha512-IG5aDD8S6zlvloDsnzHw0Ut5xczlF+kv2BOTo+iXfPr54Yhi5qbVOgGB1hZaVq4iJ4C/MZ2J0y15IlsV/ZcI0A==}
+    dependencies:
+      diff-sequences: 29.6.3
+      loupe: 2.3.7
+      pretty-format: 29.7.0
+    dev: true
+
+  /@volar/language-core@2.2.0-alpha.10:
+    resolution: {integrity: sha512-njVJLtpu0zMvDaEk7K5q4BRpOgbyEUljU++un9TfJoJNhxG0z/hWwpwgTRImO42EKvwIxF3XUzeMk+qatAFy7Q==}
+    dependencies:
+      '@volar/source-map': 2.2.0-alpha.10
+    dev: true
+
+  /@volar/language-core@2.2.1:
+    resolution: {integrity: sha512-iHJAZKcYldZgyS8gx6DfIZApViVBeqbf6iPhqoZpG5A6F4zsZiFldKfwaKaBA3/wnOTWE2i8VUbXywI1WywCPg==}
+    dependencies:
+      '@volar/source-map': 2.2.1
+    dev: true
+
+  /@volar/source-map@2.2.0-alpha.10:
+    resolution: {integrity: sha512-nrdWApVkP5cksAnDEyy1JD9rKdwOJsEq1B+seWO4vNXmZNcxQQCx4DULLBvKt7AzRUAQiAuw5aQkb9RBaSqdVA==}
+    dependencies:
+      muggle-string: 0.4.1
+    dev: true
+
+  /@volar/source-map@2.2.1:
+    resolution: {integrity: sha512-w1Bgpguhbp7YTr7VUFu6gb4iAZjeEPsOX4zpgiuvlldbzvIWDWy4t0jVifsIsxZ99HAu+c3swiME7wt+GeNqhA==}
+    dependencies:
+      muggle-string: 0.4.1
+    dev: true
+
+  /@volar/typescript@2.2.0-alpha.10:
+    resolution: {integrity: sha512-GCa0vTVVdA9ULUsu2Rx7jwsIuyZQPvPVT9o3NrANTbYv+523Ao1gv3glC5vzNSDPM6bUl37r94HbCj7KINQr+g==}
+    dependencies:
+      '@volar/language-core': 2.2.0-alpha.10
+      path-browserify: 1.0.1
+    dev: true
+
+  /@volar/typescript@2.2.1:
+    resolution: {integrity: sha512-Z/tqluR7Hz5/5dCqQp7wo9C/6tSv/IYl+tTzgzUt2NjTq95bKSsuO4E+V06D0c+3aP9x5S9jggLqw451hpnc6Q==}
+    dependencies:
+      '@volar/language-core': 2.2.1
+      path-browserify: 1.0.1
+    dev: true
+
+  /@vue/babel-helper-vue-transform-on@1.2.2:
+    resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
+    dev: true
+
+  /@vue/babel-plugin-jsx@1.2.2(@babel/core@7.24.5):
+    resolution: {integrity: sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+    dependencies:
+      '@babel/core': 7.24.5
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5)
+      '@babel/template': 7.24.0
+      '@babel/traverse': 7.24.5
+      '@babel/types': 7.24.5
+      '@vue/babel-helper-vue-transform-on': 1.2.2
+      '@vue/babel-plugin-resolve-type': 1.2.2(@babel/core@7.24.5)
+      camelcase: 6.3.0
+      html-tags: 3.3.1
+      svg-tags: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@vue/babel-plugin-resolve-type@1.2.2(@babel/core@7.24.5):
+    resolution: {integrity: sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/code-frame': 7.24.2
+      '@babel/core': 7.24.5
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-plugin-utils': 7.24.5
+      '@babel/parser': 7.24.5
+      '@vue/compiler-sfc': 3.4.27
+    dev: true
+
+  /@vue/compiler-core@3.4.25:
+    resolution: {integrity: sha512-Y2pLLopaElgWnMNolgG8w3C5nNUVev80L7hdQ5iIKPtMJvhVpG0zhnBG/g3UajJmZdvW0fktyZTotEHD1Srhbg==}
+    dependencies:
+      '@babel/parser': 7.24.5
+      '@vue/shared': 3.4.25
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
+  /@vue/compiler-core@3.4.26:
+    resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
+    dependencies:
+      '@babel/parser': 7.24.5
+      '@vue/shared': 3.4.26
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+    dev: true
+
+  /@vue/compiler-core@3.4.27:
+    resolution: {integrity: sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==}
+    dependencies:
+      '@babel/parser': 7.24.5
+      '@vue/shared': 3.4.27
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
+
+  /@vue/compiler-dom@3.4.25:
+    resolution: {integrity: sha512-Ugz5DusW57+HjllAugLci19NsDK+VyjGvmbB2TXaTcSlQxwL++2PETHx/+Qv6qFwNLzSt7HKepPe4DcTE3pBWg==}
+    dependencies:
+      '@vue/compiler-core': 3.4.25
+      '@vue/shared': 3.4.25
+
+  /@vue/compiler-dom@3.4.26:
+    resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
+    dependencies:
+      '@vue/compiler-core': 3.4.26
+      '@vue/shared': 3.4.26
+    dev: true
+
+  /@vue/compiler-dom@3.4.27:
+    resolution: {integrity: sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==}
+    dependencies:
+      '@vue/compiler-core': 3.4.27
+      '@vue/shared': 3.4.27
+
+  /@vue/compiler-sfc@3.4.25:
+    resolution: {integrity: sha512-m7rryuqzIoQpOBZ18wKyq05IwL6qEpZxFZfRxlNYuIPDqywrXQxgUwLXIvoU72gs6cRdY6wHD0WVZIFE4OEaAQ==}
+    dependencies:
+      '@babel/parser': 7.24.5
+      '@vue/compiler-core': 3.4.25
+      '@vue/compiler-dom': 3.4.25
+      '@vue/compiler-ssr': 3.4.25
+      '@vue/shared': 3.4.25
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.38
+      source-map-js: 1.2.0
+
+  /@vue/compiler-sfc@3.4.27:
+    resolution: {integrity: sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==}
+    dependencies:
+      '@babel/parser': 7.24.5
+      '@vue/compiler-core': 3.4.27
+      '@vue/compiler-dom': 3.4.27
+      '@vue/compiler-ssr': 3.4.27
+      '@vue/shared': 3.4.27
+      estree-walker: 2.0.2
+      magic-string: 0.30.10
+      postcss: 8.4.38
+      source-map-js: 1.2.0
+
+  /@vue/compiler-ssr@3.4.25:
+    resolution: {integrity: sha512-H2ohvM/Pf6LelGxDBnfbbXFPyM4NE3hrw0e/EpwuSiYu8c819wx+SVGdJ65p/sFrYDd6OnSDxN1MB2mN07hRSQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.25
+      '@vue/shared': 3.4.25
+
+  /@vue/compiler-ssr@3.4.27:
+    resolution: {integrity: sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==}
+    dependencies:
+      '@vue/compiler-dom': 3.4.27
+      '@vue/shared': 3.4.27
+
+  /@vue/devtools-api@6.6.1:
+    resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
+    dev: false
+
+  /@vue/devtools-api@7.1.3(vue@3.4.25):
+    resolution: {integrity: sha512-W8IwFJ/o5iUk78jpqhvScbgCsPiOp2uileDVC0NDtW38gCWhsnu9SeBTjcdu3lbwLdsjc+H1c5Msd/x9ApbcFA==}
+    dependencies:
+      '@vue/devtools-kit': 7.1.3(vue@3.4.25)
+    transitivePeerDependencies:
+      - vue
+    dev: true
+
+  /@vue/devtools-kit@7.1.3(vue@3.4.25):
+    resolution: {integrity: sha512-NFskFSJMVCBXTkByuk2llzI3KD3Blcm7WqiRorWjD6nClHPgkH5BobDH08rfulqq5ocRt5xV+3qOT1Q9FXJrwQ==}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@vue/devtools-shared': 7.1.3
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      vue: 3.4.25(typescript@5.4.5)
+    dev: true
+
+  /@vue/devtools-shared@7.1.3:
+    resolution: {integrity: sha512-KJ3AfgjTn3tJz/XKF+BlVShNPecim3G21oHRue+YQOsooW+0s+qXvm09U09aO7yBza5SivL1QgxSrzAbiKWjhQ==}
+    dependencies:
+      rfdc: 1.3.1
+    dev: true
+
+  /@vue/language-core@2.0.14(typescript@5.4.5):
+    resolution: {integrity: sha512-3q8mHSNcGTR7sfp2X6jZdcb4yt8AjBXAfKk0qkZIh7GAJxOnoZ10h5HToZglw4ToFvAnq+xu/Z2FFbglh9Icag==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.2.0-alpha.10
+      '@vue/compiler-dom': 3.4.26
+      '@vue/shared': 3.4.27
+      computeds: 0.0.1
+      minimatch: 9.0.4
+      path-browserify: 1.0.1
+      typescript: 5.4.5
+      vue-template-compiler: 2.7.16
+    dev: true
+
+  /@vue/language-core@2.0.16(typescript@5.4.5):
+    resolution: {integrity: sha512-Bc2sexRH99pznOph8mLw2BlRZ9edm7tW51kcBXgx8adAoOcZUWJj3UNSsdQ6H9Y8meGz7BoazVrVo/jUukIsPw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/language-core': 2.2.1
+      '@vue/compiler-dom': 3.4.27
+      '@vue/shared': 3.4.27
+      computeds: 0.0.1
+      minimatch: 9.0.4
+      path-browserify: 1.0.1
+      typescript: 5.4.5
+      vue-template-compiler: 2.7.16
+    dev: true
+
+  /@vue/reactivity@3.4.25:
+    resolution: {integrity: sha512-mKbEtKr1iTxZkAG3vm3BtKHAOhuI4zzsVcN0epDldU/THsrvfXRKzq+lZnjczZGnTdh3ojd86/WrP+u9M51pWQ==}
+    dependencies:
+      '@vue/shared': 3.4.25
+
+  /@vue/reactivity@3.4.27:
+    resolution: {integrity: sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==}
+    dependencies:
+      '@vue/shared': 3.4.27
+
+  /@vue/runtime-core@3.4.25:
+    resolution: {integrity: sha512-3qhsTqbEh8BMH3pXf009epCI5E7bKu28fJLi9O6W+ZGt/6xgSfMuGPqa5HRbUxLoehTNp5uWvzCr60KuiRIL0Q==}
+    dependencies:
+      '@vue/reactivity': 3.4.25
+      '@vue/shared': 3.4.25
+
+  /@vue/runtime-core@3.4.27:
+    resolution: {integrity: sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==}
+    dependencies:
+      '@vue/reactivity': 3.4.27
+      '@vue/shared': 3.4.27
+
+  /@vue/runtime-dom@3.4.25:
+    resolution: {integrity: sha512-ode0sj77kuwXwSc+2Yhk8JMHZh1sZp9F/51wdBiz3KGaWltbKtdihlJFhQG4H6AY+A06zzeMLkq6qu8uDSsaoA==}
+    dependencies:
+      '@vue/runtime-core': 3.4.25
+      '@vue/shared': 3.4.25
+      csstype: 3.1.3
+
+  /@vue/runtime-dom@3.4.27:
+    resolution: {integrity: sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==}
+    dependencies:
+      '@vue/runtime-core': 3.4.27
+      '@vue/shared': 3.4.27
+      csstype: 3.1.3
+
+  /@vue/server-renderer@3.4.25(vue@3.4.25):
+    resolution: {integrity: sha512-8VTwq0Zcu3K4dWV0jOwIVINESE/gha3ifYCOKEhxOj6MEl5K5y8J8clQncTcDhKF+9U765nRw4UdUEXvrGhyVQ==}
+    peerDependencies:
+      vue: 3.4.25
+    dependencies:
+      '@vue/compiler-ssr': 3.4.25
+      '@vue/shared': 3.4.25
+      vue: 3.4.25(typescript@5.4.5)
+
+  /@vue/server-renderer@3.4.27(vue@3.4.27):
+    resolution: {integrity: sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==}
+    peerDependencies:
+      vue: 3.4.27
+    dependencies:
+      '@vue/compiler-ssr': 3.4.27
+      '@vue/shared': 3.4.27
+      vue: 3.4.27(typescript@5.4.5)
+
+  /@vue/shared@3.4.25:
+    resolution: {integrity: sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA==}
+
+  /@vue/shared@3.4.26:
+    resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
+    dev: true
+
+  /@vue/shared@3.4.27:
+    resolution: {integrity: sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==}
+
+  /@vue/tsconfig@0.5.1:
+    resolution: {integrity: sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==}
+    dev: true
+
+  /@vueuse/core@10.9.0(vue@3.4.25):
+    resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.9.0
+      '@vueuse/shared': 10.9.0(vue@3.4.25)
+      vue-demi: 0.14.7(vue@3.4.25)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  /@vueuse/core@10.9.0(vue@3.4.27):
+    resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.9.0
+      '@vueuse/shared': 10.9.0(vue@3.4.27)
+      vue-demi: 0.14.7(vue@3.4.27)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /@vueuse/integrations@10.9.0(focus-trap@7.5.4)(vue@3.4.25):
+    resolution: {integrity: sha512-acK+A01AYdWSvL4BZmCoJAcyHJ6EqhmkQEXbQLwev1MY7NBnS+hcEMx/BzVoR9zKI+UqEPMD9u6PsyAuiTRT4Q==}
+    peerDependencies:
+      async-validator: '*'
+      axios: '*'
+      change-case: '*'
+      drauu: '*'
+      focus-trap: '*'
+      fuse.js: '*'
+      idb-keyval: '*'
+      jwt-decode: '*'
+      nprogress: '*'
+      qrcode: '*'
+      sortablejs: '*'
+      universal-cookie: '*'
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      sortablejs:
+        optional: true
+      universal-cookie:
+        optional: true
+    dependencies:
+      '@vueuse/core': 10.9.0(vue@3.4.25)
+      '@vueuse/shared': 10.9.0(vue@3.4.25)
+      focus-trap: 7.5.4
+      vue-demi: 0.14.7(vue@3.4.25)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: true
+
+  /@vueuse/metadata@10.9.0:
+    resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
+
+  /@vueuse/shared@10.9.0(vue@3.4.25):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
+    dependencies:
+      vue-demi: 0.14.7(vue@3.4.25)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  /@vueuse/shared@10.9.0(vue@3.4.27):
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
+    dependencies:
+      vue-demi: 0.14.7(vue@3.4.27)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
+  /JSONStream@1.3.5:
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
+    hasBin: true
+    dependencies:
+      jsonparse: 1.3.1
+      through: 2.3.8
+    dev: true
+
+  /acorn-jsx@5.3.2(acorn@8.11.3):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
+  /acorn-walk@8.3.2:
+    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
+    engines: {node: '>=0.4.0'}
+    dev: true
+
+  /acorn@8.11.3:
+    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
+  /ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
+  /ajv@8.13.0:
+    resolution: {integrity: sha512-PRA911Blj99jR5RMeTunVbNXMF6Lp4vZXnk5GQjcnUWUTsrXtekg/pnmFFI2u/I36Y/2bITGS30GZCXei6uNkA==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+      uri-js: 4.4.1
+    dev: true
+
+  /algoliasearch@4.23.3:
+    resolution: {integrity: sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==}
+    dependencies:
+      '@algolia/cache-browser-local-storage': 4.23.3
+      '@algolia/cache-common': 4.23.3
+      '@algolia/cache-in-memory': 4.23.3
+      '@algolia/client-account': 4.23.3
+      '@algolia/client-analytics': 4.23.3
+      '@algolia/client-common': 4.23.3
+      '@algolia/client-personalization': 4.23.3
+      '@algolia/client-search': 4.23.3
+      '@algolia/logger-common': 4.23.3
+      '@algolia/logger-console': 4.23.3
+      '@algolia/recommend': 4.23.3
+      '@algolia/requester-browser-xhr': 4.23.3
+      '@algolia/requester-common': 4.23.3
+      '@algolia/requester-node-http': 4.23.3
+      '@algolia/transporter': 4.23.3
+    dev: true
+
+  /ansi-escapes@6.2.1:
+    resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
+    engines: {node: '>=14.16'}
+    dev: true
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  /ansi-regex@6.0.1:
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    engines: {node: '>=12'}
+
+  /ansi-styles@3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+
+  /ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  /anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  /are-docs-informative@0.0.2:
+    resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
+  /aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
+  /array-ify@1.0.0:
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
+    dev: true
+
+  /array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /assertion-error@1.1.0:
+    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+    dev: true
+
+  /autoprefixer@10.4.19(postcss@8.4.38):
+    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.23.0
+      caniuse-lite: 1.0.30001612
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+    dev: true
+
+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.24.5
+      cosmiconfig: 7.1.0
+      resolve: 1.22.8
+    dev: false
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  /boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+    dev: true
+
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: true
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+
+  /braces@3.0.2:
+    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+    engines: {node: '>=8'}
+    dependencies:
+      fill-range: 7.0.1
+
+  /browserslist@4.23.0:
+    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001612
+      electron-to-chromium: 1.4.749
+      node-releases: 2.0.14
+      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+    dev: true
+
+  /builtin-modules@3.3.0:
+    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /bumpp@9.4.1:
+    resolution: {integrity: sha512-kzhp/LpNX0HkUpEyLd7sU2LTN/mbAVgcxJ1Zi2cAJTE/tul6rypSKGpH8UywDpzKWItL8LVdKsIFnwmylw0+7g==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      '@jsdevtools/ez-spawn': 3.0.4
+      c12: 1.10.0
+      cac: 6.7.14
+      escalade: 3.1.2
+      fast-glob: 3.3.2
+      js-yaml: 4.1.0
+      prompts: 2.4.2
+      semver: 7.6.0
+    dev: true
+
+  /c12@1.10.0:
+    resolution: {integrity: sha512-0SsG7UDhoRWcuSvKWHaXmu5uNjDCDN3nkQLRL4Q42IlFy+ze58FcCoI3uPwINXinkz7ZinbhEgyzYFw9u9ZV8g==}
+    dependencies:
+      chokidar: 3.6.0
+      confbox: 0.1.7
+      defu: 6.1.4
+      dotenv: 16.4.5
+      giget: 1.2.3
+      jiti: 1.21.0
+      mlly: 1.7.0
+      ohash: 1.1.3
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      pkg-types: 1.1.0
+      rc9: 2.1.2
+    dev: true
+
+  /cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /call-me-maybe@1.0.2:
+    resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==}
+    dev: true
+
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  /camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /caniuse-lite@1.0.30001612:
+    resolution: {integrity: sha512-lFgnZ07UhaCcsSZgWW0K5j4e69dK1u/ltrL9lTUiFOwNHs12S3UMIEYgBV0Z6C6hRDev7iRnMzzYmKabYdXF9g==}
+    dev: true
+
+  /chai@4.4.1:
+    resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
+    engines: {node: '>=4'}
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.3
+      deep-eql: 4.1.3
+      get-func-name: 2.0.2
+      loupe: 2.3.7
+      pathval: 1.1.1
+      type-detect: 4.0.8
+    dev: true
+
+  /chalk@2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+
+  /chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+    dev: true
+
+  /chalk@5.3.0:
+    resolution: {integrity: sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: true
+
+  /character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+    dev: true
+
+  /character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+    dev: true
+
+  /character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
+    dev: true
+
+  /check-error@1.0.3:
+    resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.2
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  /chownr@2.0.0:
+    resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /ci-info@4.0.0:
+    resolution: {integrity: sha512-TdHqgGf9odd8SXNuxtUBVx8Nv+qZOejE6qyqiy5NtbYYQOeFa6zmHkxlPzmaLxWWHsU6nJmB7AETdVPi+2NBUg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /citty@0.1.6:
+    resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
+    dependencies:
+      consola: 3.2.3
+    dev: true
+
+  /class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+    dependencies:
+      clsx: 2.0.0
+    dev: true
+
+  /clean-regexp@1.0.0:
+    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
+    engines: {node: '>=4'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
+  /cli-cursor@4.0.0:
+    resolution: {integrity: sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      restore-cursor: 4.0.0
+    dev: true
+
+  /cli-truncate@4.0.0:
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
+    dependencies:
+      slice-ansi: 5.0.0
+      string-width: 7.1.0
+    dev: true
+
+  /cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: true
+
+  /clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+
+  /clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  /color-convert@1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+
+  /color-name@1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  /color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
+  /color2k@2.0.3:
+    resolution: {integrity: sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==}
+    dev: false
+
+  /color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+    dev: false
+
+  /colorette@2.0.20:
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
+    dev: true
+
+  /commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /commander@2.20.3:
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    dev: false
+
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
+  /comment-parser@1.4.1:
+    resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
+    engines: {node: '>= 12.0.0'}
+    dev: true
+
+  /compare-func@2.0.0:
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
+    dependencies:
+      array-ify: 1.0.0
+      dot-prop: 5.3.0
+    dev: true
+
+  /computeds@0.0.1:
+    resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==}
+    dev: true
+
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: true
+
+  /confbox@0.1.7:
+    resolution: {integrity: sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==}
+    dev: true
+
+  /consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+    dev: true
+
+  /conventional-changelog-angular@7.0.0:
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
+    dependencies:
+      compare-func: 2.0.0
+    dev: true
+
+  /conventional-changelog-conventionalcommits@7.0.2:
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
+    dependencies:
+      compare-func: 2.0.0
+    dev: true
+
+  /conventional-commits-parser@5.0.0:
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      JSONStream: 1.3.5
+      is-text-path: 2.0.0
+      meow: 12.1.1
+      split2: 4.2.0
+    dev: true
+
+  /convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+    dev: false
+
+  /convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+    dev: true
+
+  /core-js-compat@3.37.0:
+    resolution: {integrity: sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==}
+    dependencies:
+      browserslist: 4.23.0
+    dev: true
+
+  /cosmiconfig-typescript-loader@5.0.0(@types/node@20.12.11)(cosmiconfig@9.0.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-+8cK7jRAReYkMwMiG+bxhcNKiHJDM6bR9FD/nGBXOWdMLuYawjF5cGrtLilJ+LGd3ZjCXnJjR5DkfWPoIVlqJA==}
+    engines: {node: '>=v16'}
+    peerDependencies:
+      '@types/node': '*'
+      cosmiconfig: '>=8.2'
+      typescript: '>=4'
+    dependencies:
+      '@types/node': 20.12.11
+      cosmiconfig: 9.0.0(typescript@5.4.5)
+      jiti: 1.21.0
+      typescript: 5.4.5
+    dev: true
+
+  /cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
+  /cosmiconfig@9.0.0(typescript@5.4.5):
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      typescript: 5.4.5
+    dev: true
+
+  /cross-spawn@7.0.3:
+    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  /csscolorparser@1.0.3:
+    resolution: {integrity: sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==}
+    dev: false
+
+  /cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  /csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  /cva@1.0.0-beta.1(typescript@5.4.5):
+    resolution: {integrity: sha512-gznFqTgERU9q4wg7jfgqtt34+RUt9S5t0xDAAEuDwQEAXEgjdDkKXpLLNjwSxsB4Ln/sqWJEH7yhE8Ny0mxd0w==}
+    peerDependencies:
+      typescript: '>= 4.5.5 < 6'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      clsx: 2.0.0
+      typescript: 5.4.5
+    dev: false
+
+  /d3-array@2.12.1:
+    resolution: {integrity: sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==}
+    dependencies:
+      internmap: 1.0.1
+    dev: false
+
+  /d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+    dependencies:
+      internmap: 2.0.3
+    dev: false
+
+  /d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-collection@1.0.7:
+    resolution: {integrity: sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A==}
+    dev: false
+
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+    dependencies:
+      delaunator: 5.0.1
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
+  /d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dsv: 3.0.1
+    dev: false
+
+  /d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-geo-projection@4.0.0:
+    resolution: {integrity: sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    dependencies:
+      commander: 7.2.0
+      d3-array: 3.2.4
+      d3-geo: 3.1.1
+    dev: false
+
+  /d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate-path@2.3.0:
+    resolution: {integrity: sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ==}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-path@1.0.9:
+    resolution: {integrity: sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==}
+    dev: false
+
+  /d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-sankey@0.12.3:
+    resolution: {integrity: sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==}
+    dependencies:
+      d3-array: 2.12.1
+      d3-shape: 1.3.7
+    dev: false
+
+  /d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+    dev: false
+
+  /d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-shape@1.3.7:
+    resolution: {integrity: sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==}
+    dependencies:
+      d3-path: 1.0.9
+    dev: false
+
+  /d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-path: 3.1.0
+    dev: false
+
+  /d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-time: 3.1.0
+    dev: false
+
+  /d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
+  /d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+    dev: false
+
+  /dargs@8.1.0:
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /date-fns-tz@2.0.1(date-fns@2.30.0):
+    resolution: {integrity: sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==}
+    peerDependencies:
+      date-fns: 2.x
+    dependencies:
+      date-fns: 2.30.0
+    dev: false
+
+  /date-fns@2.30.0:
+    resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
+    engines: {node: '>=0.11'}
+    dependencies:
+      '@babel/runtime': 7.24.5
+    dev: false
+
+  /date-fns@3.6.0:
+    resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==}
+    dev: false
+
+  /de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+    dev: true
+
+  /debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: true
+
+  /debug@4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
+  /deep-eql@4.1.3:
+    resolution: {integrity: sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==}
+    engines: {node: '>=6'}
+    dependencies:
+      type-detect: 4.0.8
+    dev: true
+
+  /deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+    dev: true
+
+  /deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /defu@6.1.4:
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
+
+  /delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+    dependencies:
+      robust-predicates: 3.0.2
+    dev: false
+
+  /destr@2.0.3:
+    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+    dev: true
+
+  /detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+    dev: false
+
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  /diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dev: true
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: true
+
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  /doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
+  /dot-prop@5.3.0:
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
+    dependencies:
+      is-obj: 2.0.0
+    dev: true
+
+  /dotenv@16.4.5:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    dev: false
+
+  /eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  /electron-to-chromium@1.4.749:
+    resolution: {integrity: sha512-LRMMrM9ITOvue0PoBrvNIraVmuDbJV5QC9ierz/z5VilMdPOVMjOtpICNld3PuXuTZ3CHH/UPxX9gHhAPwi+0Q==}
+    dev: true
+
+  /elkjs@0.8.2:
+    resolution: {integrity: sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ==}
+    dev: false
+
+  /embla-carousel-autoplay@8.0.4(embla-carousel@8.0.4):
+    resolution: {integrity: sha512-Ilmgn+d09o2M23yvl4cYwfO8VnZi7YXQl9UGYIflLGhtFaZW9PKU67TaW8teRjaDhS3I+uz3osBFDO407YPjfQ==}
+    peerDependencies:
+      embla-carousel: 8.0.4
+    dependencies:
+      embla-carousel: 8.0.4
+    dev: false
+
+  /embla-carousel-reactive-utils@8.0.4(embla-carousel@8.0.4):
+    resolution: {integrity: sha512-7lWM+8hanIF2roTAjxwfqfr0+VTbr9rYVlAs0r5PwPOVpz1G3/+bRelgAYvwcfWVm5Vydo2pKXVfFOPQjznF7w==}
+    peerDependencies:
+      embla-carousel: 8.0.4
+    dependencies:
+      embla-carousel: 8.0.4
+    dev: false
+
+  /embla-carousel-vue@8.0.4(vue@3.4.25):
+    resolution: {integrity: sha512-GA09dnroT0ADYoP+AS5ZbLr0X60jRQfQdyufX6Nj6VXXWA8flY564+9Z5aWWvRmNupvwjAvyAVyFgQMx6hM7nw==}
+    peerDependencies:
+      vue: ^3.2.37
+    dependencies:
+      embla-carousel: 8.0.4
+      embla-carousel-reactive-utils: 8.0.4(embla-carousel@8.0.4)
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /embla-carousel@8.0.4:
+    resolution: {integrity: sha512-INndmilrV9KY4Wnb4F2tI55DuQnFjf3GPOaPDT2LGYiKhIWVNUhv1nz/RI7CZ6WoIZ8MYHP4t6Qm/cqpcGHknA==}
+    dev: false
+
+  /emoji-regex@10.3.0:
+    resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
+    dev: true
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  /enhanced-resolve@5.16.0:
+    resolution: {integrity: sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+    dev: true
+
+  /entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  /env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+
+  /esbuild@0.20.2:
+    resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.20.2
+      '@esbuild/android-arm': 0.20.2
+      '@esbuild/android-arm64': 0.20.2
+      '@esbuild/android-x64': 0.20.2
+      '@esbuild/darwin-arm64': 0.20.2
+      '@esbuild/darwin-x64': 0.20.2
+      '@esbuild/freebsd-arm64': 0.20.2
+      '@esbuild/freebsd-x64': 0.20.2
+      '@esbuild/linux-arm': 0.20.2
+      '@esbuild/linux-arm64': 0.20.2
+      '@esbuild/linux-ia32': 0.20.2
+      '@esbuild/linux-loong64': 0.20.2
+      '@esbuild/linux-mips64el': 0.20.2
+      '@esbuild/linux-ppc64': 0.20.2
+      '@esbuild/linux-riscv64': 0.20.2
+      '@esbuild/linux-s390x': 0.20.2
+      '@esbuild/linux-x64': 0.20.2
+      '@esbuild/netbsd-x64': 0.20.2
+      '@esbuild/openbsd-x64': 0.20.2
+      '@esbuild/sunos-x64': 0.20.2
+      '@esbuild/win32-arm64': 0.20.2
+      '@esbuild/win32-ia32': 0.20.2
+      '@esbuild/win32-x64': 0.20.2
+    dev: true
+
+  /escalade@3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escalade@3.1.2:
+    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  /escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  /eslint-compat-utils@0.5.0(eslint@8.57.0):
+    resolution: {integrity: sha512-dc6Y8tzEcSYZMHa+CMPLi/hyo1FzNeonbhJL7Ol0ccuKQkwopJcJBA9YL/xmMTLU1eKigXo9vj9nALElWYSowg==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      eslint: 8.57.0
+      semver: 7.6.0
+    dev: true
+
+  /eslint-config-flat-gitignore@0.1.5:
+    resolution: {integrity: sha512-hEZLwuZjDBGDERA49c2q7vxc8sCGv8EdBp6PQYzGOMcHIgrfG9YOM6s/4jx24zhD+wnK9AI8mgN5RxSss5nClQ==}
+    dependencies:
+      find-up: 7.0.0
+      parse-gitignore: 2.0.0
+    dev: true
+
+  /eslint-flat-config-utils@0.2.4:
+    resolution: {integrity: sha512-k7MJkSIfF0bs5eQu1KXyV0AhsvdsqSt1pQfZNLwf6qkozuHQV6aNHg5f8+3Ya+WTzpB+e7I3hMhs4qBwx7nEkw==}
+    dependencies:
+      '@types/eslint': 8.56.10
+      pathe: 1.1.2
+    dev: true
+
+  /eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.13.1
+      resolve: 1.22.8
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-merge-processors@0.1.0(eslint@8.57.0):
+    resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
+  /eslint-plugin-antfu@2.1.3(eslint@8.57.0):
+    resolution: {integrity: sha512-Vq7B98VH3vOUKtJLZBDA6e6zBJaZO2YDIxGJ0rU8bm/LLfApQ/Uj1ktoy/KigQ7RqR5ZQjn6zg4G4kgNjoC+mQ==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
+  /eslint-plugin-command@0.1.9(eslint@8.57.0):
+    resolution: {integrity: sha512-aZC7SoTUX/sci2A/aDNgZ9aC4EfC0ICoPF1l6+nrHht+jRCJBq3p6afFrYt4nVuU2mBdWgaFXxqa/CF2aA5XUw==}
+    peerDependencies:
+      eslint: '*'
+    dependencies:
+      eslint: 8.57.0
+    dev: true
+
+  /eslint-plugin-es-x@7.6.0(eslint@8.57.0):
+    resolution: {integrity: sha512-I0AmeNgevgaTR7y2lrVCJmGYF0rjoznpDvqV/kIkZSZbZ8Rw3eu4cGlvBBULScfkSOCzqKbff5LR4CNrV7mZHA==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@eslint-community/regexpp': 4.10.0
+      eslint: 8.57.0
+      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+    dev: true
+
+  /eslint-plugin-eslint-comments@3.2.0(eslint@8.57.0):
+    resolution: {integrity: sha512-0jkOl0hfojIHHmEHgmNdqv4fmh7300NdpA9FFpF7zaoLvB/QeXOGNLIo86oAveJFrfB1p05kC8hpEMHM8DwWVQ==}
+    engines: {node: '>=6.5.0'}
+    peerDependencies:
+      eslint: '>=4.19.1'
+    dependencies:
+      escape-string-regexp: 1.0.5
+      eslint: 8.57.0
+      ignore: 5.3.1
+    dev: true
+
+  /eslint-plugin-import-x@0.5.0(eslint@8.57.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-C7R8Z4IzxmsoOPMtSzwuOBW5FH6iRlxHR6iTks+MzVlrk3r3TUxokkWTx3ypdj9nGOEP+CG/5e6ebZzHbxgbbQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      eslint: ^8.56.0 || ^9.0.0-0
+    dependencies:
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      debug: 4.3.4
+      doctrine: 3.0.0
+      eslint: 8.57.0
+      eslint-import-resolver-node: 0.3.9
+      get-tsconfig: 4.7.4
+      is-glob: 4.0.3
+      minimatch: 9.0.4
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-jsdoc@48.2.3(eslint@8.57.0):
+    resolution: {integrity: sha512-r9DMAmFs66VNvNqRLLjHejdnJtILrt3xGi+Qx0op0oRfFGVpOR1Hb3BC++MacseHx93d8SKYPhyrC9BS7Os2QA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@es-joy/jsdoccomment': 0.42.0
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.3.4
+      escape-string-regexp: 4.0.0
+      eslint: 8.57.0
+      esquery: 1.5.0
+      is-builtin-module: 3.2.1
+      semver: 7.6.0
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-jsonc@2.15.1(eslint@8.57.0):
+    resolution: {integrity: sha512-PVFrqIJa8BbM/e828RSn0SwB/Z5ye+2LDuy2XqG6AymNgPsfApRRcznsbxP7VrjdLEU4Nb+g9n/d6opyp0jp9A==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      eslint: 8.57.0
+      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+      espree: 9.6.1
+      graphemer: 1.4.0
+      jsonc-eslint-parser: 2.4.0
+      natural-compare: 1.4.0
+      synckit: 0.6.2
+    dev: true
+
+  /eslint-plugin-markdown@5.0.0(eslint@8.57.0):
+    resolution: {integrity: sha512-kY2u9yDhzvfZ0kmRTsvgm3mTnvZgTSGIIPeHg3yesSx4R5CTCnITUjCPhzCD1MUhNcqHU5Tr6lzx+02EclVPbw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8'
+    dependencies:
+      eslint: 8.57.0
+      mdast-util-from-markdown: 0.8.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-n@17.4.0(eslint@8.57.0):
+    resolution: {integrity: sha512-RtgGgNpYxECwE9dFr+D66RtbN0B8r/fY6ZF8EVsmK2YnZxE8/n9LNQhgnkL9z37UFZjYVmvMuC32qu7fQBsLVQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8.23.0'
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      enhanced-resolve: 5.16.0
+      eslint: 8.57.0
+      eslint-plugin-es-x: 7.6.0(eslint@8.57.0)
+      get-tsconfig: 4.7.4
+      globals: 15.1.0
+      ignore: 5.3.1
+      minimatch: 9.0.4
+      semver: 7.6.0
+    dev: true
+
+  /eslint-plugin-no-only-tests@3.1.0:
+    resolution: {integrity: sha512-Lf4YW/bL6Un1R6A76pRZyE1dl1vr31G/ev8UzIc/geCgFWyrKil8hVjYqWVKGB/UIGmb6Slzs9T0wNezdSVegw==}
+    engines: {node: '>=5.0.0'}
+    dev: true
+
+  /eslint-plugin-perfectionist@2.10.0(eslint@8.57.0)(typescript@5.4.5)(vue-eslint-parser@9.4.2):
+    resolution: {integrity: sha512-P+tdrkHeMWBc55+DZsoDOAftV1WCsEoHaKm6JC7zajFus/syfT4vUPBFb3atGFSuyaVnGQGHlcKpP9X3Q0gH/w==}
+    peerDependencies:
+      astro-eslint-parser: ^0.16.0
+      eslint: '>=8.0.0'
+      svelte: '>=3.0.0'
+      svelte-eslint-parser: ^0.33.0
+      vue-eslint-parser: '>=9.0.0'
+    peerDependenciesMeta:
+      astro-eslint-parser:
+        optional: true
+      svelte:
+        optional: true
+      svelte-eslint-parser:
+        optional: true
+      vue-eslint-parser:
+        optional: true
+    dependencies:
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+      minimatch: 9.0.4
+      natural-compare-lite: 1.4.0
+      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-toml@0.11.0(eslint@8.57.0):
+    resolution: {integrity: sha512-sau+YvPU4fWTjB+qtBt3n8WS87aoDCs+BVbSUAemGaIsRNbvR9uEk+Tt892iLHTGvp/DPWYoCX4/8DoyAbB+sQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.57.0
+      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+      lodash: 4.17.21
+      toml-eslint-parser: 0.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unicorn@52.0.0(eslint@8.57.0):
+    resolution: {integrity: sha512-1Yzm7/m+0R4djH0tjDjfVei/ju2w3AzUGjG6q8JnuNIL5xIwsflyCooW5sfBvQp2pMYQFSWWCFONsjCax1EHng==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      eslint: '>=8.56.0'
+    dependencies:
+      '@babel/helper-validator-identifier': 7.24.5
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@eslint/eslintrc': 2.1.4
+      ci-info: 4.0.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.37.0
+      eslint: 8.57.0
+      esquery: 1.5.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.0.2
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.6.0
+      strip-indent: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-unused-imports@3.2.0(@typescript-eslint/eslint-plugin@7.7.1)(eslint@8.57.0):
+    resolution: {integrity: sha512-6uXyn6xdINEpxE1MtDjxQsyXB37lfyO2yKGVVgtD7WEWQGORSOZjgrD6hBhvGv4/SO+TOlS+UnC6JppRqbuwGQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': 6 - 7
+      eslint: '8'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 7.7.1(@typescript-eslint/parser@7.7.1)(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+      eslint-rule-composer: 0.3.0
+    dev: true
+
+  /eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@7.7.1)(eslint@8.57.0)(typescript@5.4.5)(vitest@0.34.6):
+    resolution: {integrity: sha512-um+odCkccAHU53WdKAw39MY61+1x990uXjSPguUCq3VcEHdqJrOb8OTMrbYlY6f9jAKx7x98kLVlIe3RJeJqoQ==}
+    engines: {node: ^18.0.0 || >= 20.0.0}
+    peerDependencies:
+      '@typescript-eslint/eslint-plugin': '*'
+      eslint: ^8.57.0 || ^9.0.0
+      vitest: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/eslint-plugin':
+        optional: true
+      vitest:
+        optional: true
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 7.7.1(@typescript-eslint/parser@7.7.1)(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.8.0(eslint@8.57.0)(typescript@5.4.5)
+      eslint: 8.57.0
+      vitest: 0.34.6
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
+  /eslint-plugin-vue@9.25.0(eslint@8.57.0):
+    resolution: {integrity: sha512-tDWlx14bVe6Bs+Nnh3IGrD+hb11kf2nukfm6jLsmJIhmiRQ1SUaksvwY9U5MvPB0pcrg0QK0xapQkfITs3RKOA==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      eslint: 8.57.0
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.0.16
+      semver: 7.6.0
+      vue-eslint-parser: 9.4.2(eslint@8.57.0)
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-plugin-yml@1.14.0(eslint@8.57.0):
+    resolution: {integrity: sha512-ESUpgYPOcAYQO9czugcX5OqRvn/ydDVwGCPXY4YjPqc09rHaUVUA6IE6HLQys4rXk/S+qx3EwTd1wHCwam/OWQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.57.0
+      eslint-compat-utils: 0.5.0(eslint@8.57.0)
+      lodash: 4.17.21
+      natural-compare: 1.4.0
+      yaml-eslint-parser: 1.2.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.4.27)(eslint@8.57.0):
+    resolution: {integrity: sha512-PfpJ4uKHnqeL/fXUnzYkOax3aIenlwewXRX8jFinA1a2yCFnLgMuiH3xvCgvHHUlV2xJWQHbCTdiJWGwb3NqpQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: ^8.50.0 || ^9.0.0
+    dependencies:
+      '@vue/compiler-sfc': 3.4.27
+      eslint: 8.57.0
+    dev: true
+
+  /eslint-rule-composer@0.3.0:
+    resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==}
+    engines: {node: '>=4.0.0'}
+    dev: true
+
+  /eslint-scope@7.2.2:
+    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+    dev: true
+
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.57.0:
+    resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    hasBin: true
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@eslint-community/regexpp': 4.10.0
+      '@eslint/eslintrc': 2.1.4
+      '@eslint/js': 8.57.0
+      '@humanwhocodes/config-array': 0.11.14
+      '@humanwhocodes/module-importer': 1.0.1
+      '@nodelib/fs.walk': 1.2.8
+      '@ungap/structured-clone': 1.2.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.3
+      debug: 4.3.4
+      doctrine: 3.0.0
+      escape-string-regexp: 4.0.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      is-path-inside: 3.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      strip-ansi: 6.0.1
+      text-table: 0.2.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.11.3
+      acorn-jsx: 5.3.2(acorn@8.11.3)
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /esquery@1.5.0:
+    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+    dependencies:
+      estraverse: 5.3.0
+    dev: true
+
+  /estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+    dev: true
+
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
+  /esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+    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.7
+      strip-final-newline: 2.0.0
+    dev: true
+
+  /execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+    dev: true
+
+  /fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  /fast-glob@3.3.2:
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+
+  /fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
+  /fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+    dev: true
+
+  /fastq@1.17.1:
+    resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
+    dependencies:
+      reusify: 1.0.4
+
+  /file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flat-cache: 3.2.0
+    dev: true
+
+  /fill-range@7.0.1:
+    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      to-regex-range: 5.0.1
+
+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
+  /find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+    dev: true
+
+  /find-up@7.0.0:
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
+    dependencies:
+      locate-path: 7.2.0
+      path-exists: 5.0.0
+      unicorn-magic: 0.1.0
+    dev: true
+
+  /flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+    dependencies:
+      flatted: 3.3.1
+      keyv: 4.5.4
+      rimraf: 3.0.2
+    dev: true
+
+  /flat@6.0.1:
+    resolution: {integrity: sha512-/3FfIa8mbrg3xE7+wAhWeV+bd7L2Mof+xtZb5dRDKZ+wDvYJK4WDYeIOuOhre5Yv5aQObZrlbRmk3RTSiuQBtw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dev: false
+
+  /flatted@3.3.1:
+    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+    dev: true
+
+  /focus-trap@7.5.4:
+    resolution: {integrity: sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==}
+    dependencies:
+      tabbable: 6.2.0
+    dev: true
+
+  /foreground-child@3.1.1:
+    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.3
+      signal-exit: 4.1.0
+
+  /fraction.js@4.3.7:
+    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
+    dev: true
+
+  /fs-minipass@2.1.0:
+    resolution: {integrity: sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.6
+    dev: true
+
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: true
+
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+    requiresBuild: true
+    optional: true
+
+  /function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  /gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /geojson-vt@3.2.1:
+    resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==}
+    dev: false
+
+  /geojson@0.5.0:
+    resolution: {integrity: sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: true
+
+  /get-east-asian-width@1.2.0:
+    resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+    dev: true
+
+  /get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  /get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+    dev: true
+
+  /get-tsconfig@4.7.4:
+    resolution: {integrity: sha512-ofbkKj+0pjXjhejr007J/fLf+sW+8H7K5GCm+msC8q3IpvgjobpyPqSRFemNyIMxklC0zeJpi7VDFna19FacvQ==}
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+    dev: true
+
+  /giget@1.2.3:
+    resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      defu: 6.1.4
+      node-fetch-native: 1.6.4
+      nypm: 0.3.8
+      ohash: 1.1.3
+      pathe: 1.1.2
+      tar: 6.2.1
+    dev: true
+
+  /git-raw-commits@4.0.0:
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      dargs: 8.1.0
+      meow: 12.1.1
+      split2: 4.2.0
+    dev: true
+
+  /gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
+  /glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      is-glob: 4.0.3
+
+  /glob@10.3.12:
+    resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.1.1
+      jackspeak: 2.3.6
+      minimatch: 9.0.4
+      minipass: 7.0.4
+      path-scurry: 1.10.2
+
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: true
+
+  /global-directory@4.0.1:
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      ini: 4.1.1
+    dev: true
+
+  /global-prefix@3.0.0:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+    dev: false
+
+  /globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.20.2
+    dev: true
+
+  /globals@15.1.0:
+    resolution: {integrity: sha512-926gJqg+4mkxwYKiFvoomM4J0kWESfk3qfTvRL2/oc/tK/eTDBbrfcKnSa2KtfdxB5onoL7D3A3qIHQFpd4+UA==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 3.0.0
+    dev: true
+
+  /graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+    dev: true
+
+  /graphemer@1.4.0:
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+    dev: true
+
+  /has-flag@3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+
+  /has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /hasown@2.0.0:
+    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      function-bind: 1.1.2
+
+  /he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+    dev: true
+
+  /hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+    dev: true
+
+  /hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+    dev: true
+
+  /html-tags@3.3.1:
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+    dev: true
+
+  /human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+    dev: true
+
+  /iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
+  /ignore@5.3.1:
+    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+    engines: {node: '>= 4'}
+    dev: true
+
+  /import-fresh@3.3.0:
+    resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  /import-meta-resolve@4.1.0:
+    resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
+    dev: true
+
+  /imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+    dev: true
+
+  /indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: true
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: true
+
+  /ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: false
+
+  /ini@4.1.1:
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    dev: true
+
+  /internmap@1.0.1:
+    resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
+    dev: false
+
+  /internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /invariant@2.2.4:
+    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
+  /is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+    dev: true
+
+  /is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+    dev: true
+
+  /is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  /is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
+  /is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+    dependencies:
+      binary-extensions: 2.3.0
+
+  /is-builtin-module@3.2.1:
+    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
+    engines: {node: '>=6'}
+    dependencies:
+      builtin-modules: 3.3.0
+    dev: true
+
+  /is-core-module@2.13.1:
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    dependencies:
+      hasown: 2.0.0
+
+  /is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+    dev: true
+
+  /is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  /is-fullwidth-code-point@4.0.0:
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+    dependencies:
+      get-east-asian-width: 1.2.0
+    dev: true
+
+  /is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extglob: 2.1.1
+
+  /is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+    dev: true
+
+  /is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  /is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /is-text-path@2.0.0:
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
+    dependencies:
+      text-extensions: 2.4.0
+    dev: true
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  /jackspeak@2.3.6:
+    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
+    engines: {node: '>=14'}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  /jiti@1.21.0:
+    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
+    hasBin: true
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
+  /jsdoc-type-pratt-parser@4.0.0:
+    resolution: {integrity: sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==}
+    engines: {node: '>=12.0.0'}
+    dev: true
+
+  /jsesc@0.5.0:
+    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
+    hasBin: true
+    dev: true
+
+  /jsesc@2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+    dev: true
+
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  /json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
+  /json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+    dev: true
+
+  /json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+    dev: true
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /jsonc-eslint-parser@2.4.0:
+    resolution: {integrity: sha512-WYDyuc/uFcGp6YtM2H0uKmUwieOuzeE/5YocFJLnLfclZ4inf3mRn8ZVy1s7Hxji7Jxm6Ss8gqpexD/GlKoGgg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      acorn: 8.11.3
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      semver: 7.6.0
+    dev: true
+
+  /jsonparse@1.3.1:
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+    dev: true
+
+  /kdbush@3.0.0:
+    resolution: {integrity: sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==}
+    dev: false
+
+  /keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+    dependencies:
+      json-buffer: 3.0.1
+    dev: true
+
+  /kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /kolorist@1.8.0:
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+    dev: true
+
+  /leaflet@1.7.1:
+    resolution: {integrity: sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==}
+    dev: false
+
+  /levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+    dev: true
+
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  /lilconfig@3.0.0:
+    resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /lilconfig@3.1.1:
+    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
+    engines: {node: '>=14'}
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  /linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+    dependencies:
+      uc.micro: 2.1.0
+    dev: true
+
+  /lint-staged@15.2.2:
+    resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
+    engines: {node: '>=18.12.0'}
+    hasBin: true
+    dependencies:
+      chalk: 5.3.0
+      commander: 11.1.0
+      debug: 4.3.4
+      execa: 8.0.1
+      lilconfig: 3.0.0
+      listr2: 8.0.1
+      micromatch: 4.0.5
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.3.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /listr2@8.0.1:
+    resolution: {integrity: sha512-ovJXBXkKGfq+CwmKTjluEqFi3p4h8xvkxGQQAQan22YCgef4KZ1mKGjzfGh6PL6AW5Csw0QiQPNuQyH+6Xk3hA==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      cli-truncate: 4.0.0
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.0.0
+      rfdc: 1.3.1
+      wrap-ansi: 9.0.0
+    dev: true
+
+  /local-pkg@0.4.3:
+    resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /local-pkg@0.5.0:
+    resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
+    engines: {node: '>=14'}
+    dependencies:
+      mlly: 1.7.0
+      pkg-types: 1.1.0
+    dev: true
+
+  /locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-locate: 4.1.0
+    dev: true
+
+  /locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-locate: 5.0.0
+    dev: true
+
+  /locate-path@7.2.0:
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      p-locate: 6.0.0
+    dev: true
+
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
+  /lodash._reinterpolate@3.0.0:
+    resolution: {integrity: sha512-xYHt68QRoYGjeeM/XOE1uJtvXQAgvszfBhjV4yvsQH0u2i9I6cI6c6/eG4Hh3UAOVn0y/xAXwmTzEay49Q//HA==}
+    dev: true
+
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: true
+
+  /lodash.castarray@4.4.0:
+    resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
+    dev: true
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: true
+
+  /lodash.kebabcase@4.1.1:
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
+    dev: true
+
+  /lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
+
+  /lodash.mergewith@4.6.2:
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
+    dev: true
+
+  /lodash.omit@4.5.0:
+    resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
+    dev: false
+
+  /lodash.snakecase@4.1.1:
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
+    dev: true
+
+  /lodash.startcase@4.4.0:
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
+    dev: true
+
+  /lodash.template@4.5.0:
+    resolution: {integrity: sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==}
+    dependencies:
+      lodash._reinterpolate: 3.0.0
+      lodash.templatesettings: 4.2.0
+    dev: true
+
+  /lodash.templatesettings@4.2.0:
+    resolution: {integrity: sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==}
+    dependencies:
+      lodash._reinterpolate: 3.0.0
+    dev: true
+
+  /lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+    dev: true
+
+  /lodash.upperfirst@4.3.1:
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
+    dev: true
+
+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  /log-update@6.0.0:
+    resolution: {integrity: sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-escapes: 6.2.1
+      cli-cursor: 4.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+    dev: true
+
+  /loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+
+  /loupe@2.3.7:
+    resolution: {integrity: sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==}
+    dependencies:
+      get-func-name: 2.0.2
+    dev: true
+
+  /lru-cache@10.2.1:
+    resolution: {integrity: sha512-tS24spDe/zXhWbNPErCHs/AGOzbKGHT+ybSBqmdLm8WZ1xXLWvH8Qn71QPAlqVhd0qUTWjy+Kl9JmISgDdEjsA==}
+    engines: {node: 14 || >=16.14}
+
+  /lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+    dependencies:
+      yallist: 3.1.1
+    dev: true
+
+  /lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /magic-string@0.30.10:
+    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.4.15
+
+  /maplibre-gl@2.4.0:
+    resolution: {integrity: sha512-csNFylzntPmHWidczfgCZpvbTSmhaWvLRj9e1ezUDBEPizGgshgm3ea1T5TCNEEBq0roauu7BPuRZjA3wO4KqA==}
+    requiresBuild: true
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/mapbox-gl-supported': 2.0.1
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.6
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
+      csscolorparser: 1.0.3
+      earcut: 2.2.4
+      geojson-vt: 3.2.1
+      gl-matrix: 3.4.3
+      global-prefix: 3.0.0
+      murmurhash-js: 1.0.0
+      pbf: 3.2.1
+      potpack: 1.0.2
+      quickselect: 2.0.0
+      supercluster: 7.1.5
+      tinyqueue: 2.0.3
+      vt-pbf: 3.1.3
+    dev: false
+
+  /mark.js@8.11.1:
+    resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
+    dev: true
+
+  /markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+    dev: true
+
+  /mdast-util-from-markdown@0.8.5:
+    resolution: {integrity: sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==}
+    dependencies:
+      '@types/mdast': 3.0.15
+      mdast-util-to-string: 2.0.0
+      micromark: 2.11.4
+      parse-entities: 2.0.0
+      unist-util-stringify-position: 2.0.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /mdast-util-to-string@2.0.0:
+    resolution: {integrity: sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==}
+    dev: true
+
+  /mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+    dev: true
+
+  /meow@12.1.1:
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
+    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'}
+
+  /micromark@2.11.4:
+    resolution: {integrity: sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==}
+    dependencies:
+      debug: 4.3.4
+      parse-entities: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /micromatch@4.0.5:
+    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
+    engines: {node: '>=8.6'}
+    dependencies:
+      braces: 3.0.2
+      picomatch: 2.3.1
+
+  /mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
+  /minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: true
+
+  /minimatch@9.0.4:
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      brace-expansion: 2.0.1
+
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  /minipass@3.3.6:
+    resolution: {integrity: sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==}
+    engines: {node: '>=8'}
+    dependencies:
+      yallist: 4.0.0
+    dev: true
+
+  /minipass@5.0.0:
+    resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /minipass@7.0.4:
+    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  /minisearch@6.3.0:
+    resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==}
+    dev: true
+
+  /minizlib@2.1.2:
+    resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
+    engines: {node: '>= 8'}
+    dependencies:
+      minipass: 3.3.6
+      yallist: 4.0.0
+    dev: true
+
+  /mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+    dev: true
+
+  /mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /mlly@1.7.0:
+    resolution: {integrity: sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==}
+    dependencies:
+      acorn: 8.11.3
+      pathe: 1.1.2
+      pkg-types: 1.1.0
+      ufo: 1.5.3
+    dev: true
+
+  /ms@2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: true
+
+  /muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+    dev: true
+
+  /murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+    dev: false
+
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  /nanoid@5.0.7:
+    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: false
+
+  /natural-compare-lite@1.4.0:
+    resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
+    dev: true
+
+  /natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+    dev: true
+
+  /node-fetch-native@1.6.4:
+    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
+    dev: true
+
+  /node-releases@2.0.14:
+    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+    dev: true
+
+  /normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.8
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+    dev: true
+
+  /normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  /normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-key: 3.1.1
+    dev: true
+
+  /npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      path-key: 4.0.0
+    dev: true
+
+  /nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+    dependencies:
+      boolbase: 1.0.0
+    dev: true
+
+  /nypm@0.3.8:
+    resolution: {integrity: sha512-IGWlC6So2xv6V4cIDmoV0SwwWx7zLG086gyqkyumteH2fIgCAM4nDVFB2iDRszDvmdSVW9xb1N+2KjQ6C7d4og==}
+    engines: {node: ^14.16.0 || >=16.10.0}
+    hasBin: true
+    dependencies:
+      citty: 0.1.6
+      consola: 3.2.3
+      execa: 8.0.1
+      pathe: 1.1.2
+      ufo: 1.5.3
+    dev: true
+
+  /object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  /ohash@1.1.3:
+    resolution: {integrity: sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==}
+    dev: true
+
+  /once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+    dependencies:
+      wrappy: 1.0.2
+    dev: true
+
+  /onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+    dependencies:
+      mimic-fn: 2.1.0
+    dev: true
+
+  /onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      mimic-fn: 4.0.0
+    dev: true
+
+  /optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+    dev: true
+
+  /oxc-parser@0.8.0:
+    resolution: {integrity: sha512-ObPeMkbDX7igb7NyyAC8CbVC3fY+YmlMsxsRQ2oyFBkpQtI5tjoyqSDKbS9A9EcJvt2q89C4UoC+HjVBdLYYJg==}
+    optionalDependencies:
+      '@oxc-parser/binding-darwin-arm64': 0.8.0
+      '@oxc-parser/binding-darwin-x64': 0.8.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.8.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.8.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.8.0
+      '@oxc-parser/binding-linux-x64-musl': 0.8.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.8.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.8.0
+    dev: true
+
+  /p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+    dependencies:
+      p-try: 2.2.0
+    dev: true
+
+  /p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      yocto-queue: 0.1.0
+    dev: true
+
+  /p-limit@4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
+
+  /p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+    dependencies:
+      p-limit: 2.3.0
+    dev: true
+
+  /p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+    dependencies:
+      p-limit: 3.1.0
+    dev: true
+
+  /p-locate@6.0.0:
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      p-limit: 4.0.0
+    dev: true
+
+  /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==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+
+  /parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+    dev: true
+
+  /parse-gitignore@2.0.0:
+    resolution: {integrity: sha512-RmVuCHWsfu0QPNW+mraxh/xjQVw/lhUCUru8Zni3Ctq3AoMhpDTq0OVdKS6iesd6Kqb7viCV3isAL43dciOSog==}
+    engines: {node: '>=14'}
+    dev: true
+
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.24.2
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  /parse-unit@1.0.1:
+    resolution: {integrity: sha512-hrqldJHokR3Qj88EIlV/kAyAi/G5R2+R56TBANxNMy0uPlYcttx0jnMW6Yx5KsKPSbC3KddM/7qQm3+0wEXKxg==}
+    dev: false
+
+  /path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+    dev: true
+
+  /path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /path-exists@5.0.0:
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dev: true
+
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  /path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  /path-scurry@1.10.2:
+    resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dependencies:
+      lru-cache: 10.2.1
+      minipass: 7.0.4
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  /pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+    dev: true
+
+  /pathval@1.1.1:
+    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+    dev: true
+
+  /pbf@3.2.1:
+    resolution: {integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==}
+    hasBin: true
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+    dev: false
+
+  /perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+    dev: true
+
+  /picocolors@1.0.0:
+    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+
+  /picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  /picomatch@4.0.2:
+    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}
+
+  /pkg-types@1.1.0:
+    resolution: {integrity: sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==}
+    dependencies:
+      confbox: 0.1.7
+      mlly: 1.7.0
+      pathe: 1.1.2
+    dev: true
+
+  /pluralize@8.0.0:
+    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /postcss-import@15.1.0(postcss@8.4.38):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  /postcss-js@4.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.38
+
+  /postcss-load-config@4.0.2(postcss@8.4.38):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.1.1
+      postcss: 8.4.38
+      yaml: 2.4.2
+
+  /postcss-nested@6.0.1(postcss@8.4.38):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.38
+      postcss-selector-parser: 6.0.16
+
+  /postcss-selector-parser@6.0.10:
+    resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+    dev: true
+
+  /postcss-selector-parser@6.0.16:
+    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
+    engines: {node: '>=4'}
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  /postcss@8.4.38:
+    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.0
+      source-map-js: 1.2.0
+
+  /potpack@1.0.2:
+    resolution: {integrity: sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==}
+    dev: false
+
+  /preact@10.21.0:
+    resolution: {integrity: sha512-aQAIxtzWEwH8ou+OovWVSVNlFImL7xUCwJX3YMqA3U8iKCNC34999fFOnWjYNsylgfPgMexpbk7WYOLtKr/mxg==}
+    dev: true
+
+  /prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+    dev: true
+
+  /pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    dependencies:
+      '@jest/schemas': 29.6.3
+      ansi-styles: 5.2.0
+      react-is: 18.3.1
+    dev: true
+
+  /prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+    dev: true
+
+  /protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+    dev: false
+
+  /punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  /quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+    dev: false
+
+  /radix-vue@1.7.2(vue@3.4.25):
+    resolution: {integrity: sha512-KczYzzflm8todIk3flaQIWQ6P1wqtUh0cwMBRhp8Pr2JXs8FMG2qfL4lJly2mhMFXc199bG0U4bNLLsrhn5xoA==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.3
+      '@floating-ui/vue': 1.0.6(vue@3.4.25)
+      '@internationalized/date': 3.5.2
+      '@tanstack/vue-virtual': 3.4.0(vue@3.4.25)
+      '@vueuse/core': 10.9.0(vue@3.4.25)
+      '@vueuse/shared': 10.9.0(vue@3.4.25)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.4.25(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
+  /radix-vue@1.7.4(vue@3.4.27):
+    resolution: {integrity: sha512-Z75iJVb2rNL6347pWwqDIP02ktTowiDKVsScrLRv9y7uj8tMsEcD4pC0oTogVScRP5voZd3rov6zKE20MQTj+A==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+    dependencies:
+      '@floating-ui/dom': 1.6.5
+      '@floating-ui/vue': 1.0.6(vue@3.4.27)
+      '@internationalized/date': 3.5.3
+      '@tanstack/vue-virtual': 3.5.0(vue@3.4.27)
+      '@vueuse/core': 10.9.0(vue@3.4.27)
+      '@vueuse/shared': 10.9.0(vue@3.4.27)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.7
+      vue: 3.4.27(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
+  /rc9@2.1.2:
+    resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
+    dependencies:
+      defu: 6.1.4
+      destr: 2.0.3
+    dev: true
+
+  /react-dom@18.3.1(react@18.3.1):
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
+    peerDependencies:
+      react: ^18.3.1
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+
+  /react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+    dev: true
+
+  /react-remove-scroll-bar@2.3.6(react@18.3.1):
+    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.1(react@18.3.1)
+      tslib: 2.6.2
+    dev: false
+
+  /react-remove-scroll@2.5.5(react@18.3.1):
+    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.6(react@18.3.1)
+      react-style-singleton: 2.2.1(react@18.3.1)
+      tslib: 2.6.2
+      use-callback-ref: 1.3.2(react@18.3.1)
+      use-sidecar: 1.1.2(react@18.3.1)
+    dev: false
+
+  /react-style-singleton@2.2.1(react@18.3.1):
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
+  /react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+
+  /read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
+    dependencies:
+      find-up: 4.1.0
+      read-pkg: 5.2.0
+      type-fest: 0.8.1
+    dev: true
+
+  /read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 2.5.0
+      parse-json: 5.2.0
+      type-fest: 0.6.0
+    dev: true
+
+  /readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+    dependencies:
+      picomatch: 2.3.1
+
+  /regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
+  /regexp-tree@0.1.27:
+    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
+    hasBin: true
+    dev: true
+
+  /regjsparser@0.10.0:
+    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
+    hasBin: true
+    dependencies:
+      jsesc: 0.5.0
+    dev: true
+
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+    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
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  /resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: true
+
+  /resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+    dev: false
+
+  /resolve@1.22.8:
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.13.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  /restore-cursor@4.0.0:
+    resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+    dev: true
+
+  /reusify@1.0.4:
+    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  /rfdc@1.3.1:
+    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
+    dev: true
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: true
+
+  /rimraf@5.0.5:
+    resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      glob: 10.3.12
+    dev: true
+
+  /robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+    dev: false
+
+  /rollup@4.17.2:
+    resolution: {integrity: sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    dependencies:
+      '@types/estree': 1.0.5
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.17.2
+      '@rollup/rollup-android-arm64': 4.17.2
+      '@rollup/rollup-darwin-arm64': 4.17.2
+      '@rollup/rollup-darwin-x64': 4.17.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.17.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.17.2
+      '@rollup/rollup-linux-arm64-gnu': 4.17.2
+      '@rollup/rollup-linux-arm64-musl': 4.17.2
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.17.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.17.2
+      '@rollup/rollup-linux-s390x-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-gnu': 4.17.2
+      '@rollup/rollup-linux-x64-musl': 4.17.2
+      '@rollup/rollup-win32-arm64-msvc': 4.17.2
+      '@rollup/rollup-win32-ia32-msvc': 4.17.2
+      '@rollup/rollup-win32-x64-msvc': 4.17.2
+      fsevents: 2.3.3
+    dev: true
+
+  /run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+    dependencies:
+      queue-microtask: 1.2.3
+
+  /rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
+  /safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: false
+
+  /scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+    dependencies:
+      loose-envify: 1.4.0
+
+  /search-insights@2.13.0:
+    resolution: {integrity: sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==}
+    dev: true
+
+  /semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+    dev: true
+
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
+  /semver@7.6.0:
+    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
+  /semver@7.6.1:
+    resolution: {integrity: sha512-f/vbBsu+fOiYt+lmwZV0rVwJScl46HppnOA1ZvIuBWKOTlllpyJ3bfVax76/OrhCH38dyxoDIA8K7uB963IYgA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dev: true
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  /shiki@1.4.0:
+    resolution: {integrity: sha512-5WIn0OL8PWm7JhnTwRWXniy6eEDY234mRrERVlFa646V2ErQqwIFd2UML7e0Pq9eqSKLoMa3Ke+xbsF+DAuy+Q==}
+    dependencies:
+      '@shikijs/core': 1.4.0
+    dev: true
+
+  /siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+    dev: true
+
+  /signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    dev: true
+
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  /simple-git-hooks@2.11.1:
+    resolution: {integrity: sha512-tgqwPUMDcNDhuf1Xf6KTUsyeqGdgKMhzaH4PAZZuzguOgTl5uuyeYe/8mWgAr6IBxB5V06uqEf6Dy37gIWDtDg==}
+    hasBin: true
+    requiresBuild: true
+    dev: true
+
+  /simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
+  /sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: true
+
+  /slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /slice-ansi@5.0.0:
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 4.0.0
+    dev: true
+
+  /slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+    dev: true
+
+  /source-map-js@1.2.0:
+    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+    engines: {node: '>=0.10.0'}
+
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.17
+    dev: true
+
+  /spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+    dev: true
+
+  /spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.17
+    dev: true
+
+  /spdx-expression-parse@4.0.0:
+    resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.17
+    dev: true
+
+  /spdx-license-ids@3.0.17:
+    resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
+    dev: true
+
+  /speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /split2@4.2.0:
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
+    dev: true
+
+  /stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+    dev: true
+
+  /std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+    dev: true
+
+  /string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
+    dev: true
+
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  /string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  /string-width@7.1.0:
+    resolution: {integrity: sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==}
+    engines: {node: '>=18'}
+    dependencies:
+      emoji-regex: 10.3.0
+      get-east-asian-width: 1.2.0
+      strip-ansi: 7.1.0
+    dev: true
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+
+  /strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.0.1
+
+  /strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      min-indent: 1.0.1
+    dev: true
+
+  /strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /strip-literal@1.3.0:
+    resolution: {integrity: sha512-PugKzOsyXpArk0yWmUwqOZecSO0GH0bPoctLcqNDH9J04pVW3lflYE0ujElBGTloevcxF5MofAOZ7C5l2b+wLg==}
+    dependencies:
+      acorn: 8.11.3
+    dev: true
+
+  /striptags@3.2.0:
+    resolution: {integrity: sha512-g45ZOGzHDMe2bdYMdIvdAfCQkCTDMGBazSw1ypMowwGIee7ZQ5dU0rBJ8Jqgl+jAKIv4dbeE1jscZq9wid1Tkw==}
+    dev: false
+
+  /stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+    dev: false
+
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      commander: 4.1.1
+      glob: 10.3.12
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
+  /supercluster@7.1.5:
+    resolution: {integrity: sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==}
+    dependencies:
+      kdbush: 3.0.0
+    dev: false
+
+  /supports-color@5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+
+  /supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
+  /supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  /svg-tags@1.0.0:
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
+    dev: true
+
+  /synckit@0.6.2:
+    resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==}
+    engines: {node: '>=12.20'}
+    dependencies:
+      tslib: 2.6.2
+    dev: true
+
+  /tabbable@6.2.0:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+    dev: true
+
+  /tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+    dependencies:
+      '@babel/runtime': 7.24.5
+
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.3):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.3
+    dev: false
+
+  /tailwindcss@3.4.3:
+    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.2(postcss@8.4.38)
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.0.16
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  /tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /tar@6.2.1:
+    resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
+    engines: {node: '>=10'}
+    dependencies:
+      chownr: 2.0.0
+      fs-minipass: 2.1.0
+      minipass: 5.0.0
+      minizlib: 2.1.2
+      mkdirp: 1.0.4
+      yallist: 4.0.0
+    dev: true
+
+  /text-extensions@2.4.0:
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+    dev: true
+
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+
+  /three@0.135.0:
+    resolution: {integrity: sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ==}
+    dev: false
+
+  /throttle-debounce@5.0.0:
+    resolution: {integrity: sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==}
+    engines: {node: '>=12.22'}
+    dev: false
+
+  /through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+    dev: true
+
+  /tinybench@2.8.0:
+    resolution: {integrity: sha512-1/eK7zUnIklz4JUUlL+658n58XO2hHLQfSk1Zf2LKieUjxidN16eKFEoDEfjHc3ohofSSqK3X5yO6VGb6iW8Lw==}
+    dev: true
+
+  /tinypool@0.7.0:
+    resolution: {integrity: sha512-zSYNUlYSMhJ6Zdou4cJwo/p7w5nmAH17GRfU/ui3ctvjXFErXXkruT4MWW6poDeXgCaIBlGLrfU6TbTXxyGMww==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /tinyqueue@2.0.3:
+    resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
+    dev: false
+
+  /tinyspy@2.2.1:
+    resolution: {integrity: sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==}
+    engines: {node: '>=14.0.0'}
+    dev: true
+
+  /to-fast-properties@2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+
+  /to-px@1.1.0:
+    resolution: {integrity: sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==}
+    dependencies:
+      parse-unit: 1.0.1
+    dev: false
+
+  /to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+    dependencies:
+      is-number: 7.0.0
+
+  /toml-eslint-parser@0.9.3:
+    resolution: {integrity: sha512-moYoCvkNUAPCxSW9jmHmRElhm4tVJpHL8ItC/+uYD0EpPSFXbck7yREz9tNdJVTSpHVod8+HoipcpbQ0oE6gsw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
+  /topojson-client@3.1.0:
+    resolution: {integrity: sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==}
+    hasBin: true
+    dependencies:
+      commander: 2.20.3
+    dev: false
+
+  /ts-api-utils@1.3.0(typescript@5.4.5):
+    resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.4.5
+    dev: true
+
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+
+  /tsx@4.9.3:
+    resolution: {integrity: sha512-czVbetlILiyJZI5zGlj2kw9vFiSeyra9liPD4nG+Thh4pKTi0AmMEQ8zdV/L2xbIVKrIqif4sUNrsMAOksx9Zg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+    dependencies:
+      esbuild: 0.20.2
+      get-tsconfig: 4.7.4
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      prelude-ls: 1.2.1
+    dev: true
+
+  /type-detect@4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+    dev: true
+
+  /type-fest@4.18.2:
+    resolution: {integrity: sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==}
+    engines: {node: '>=16'}
+    dev: false
+
+  /typescript@5.4.5:
+    resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  /uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+    dev: true
+
+  /ufo@1.5.3:
+    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+    dev: true
+
+  /undici-types@5.26.5:
+    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+    dev: true
+
+  /unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
+    dev: true
+
+  /unist-util-stringify-position@2.0.3:
+    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+    dependencies:
+      '@types/unist': 2.0.10
+    dev: true
+
+  /unplugin-icons@0.18.5(@vue/compiler-sfc@3.4.27):
+    resolution: {integrity: sha512-KVNAohXbZ7tVcG1C3p6QaC7wU9Qrj7etv4XvsMMJAxr5LccQZ+Iuv5LOIv/7GtqXaGN1BuFCqRO1ErsHEgEXdQ==}
+    peerDependencies:
+      '@svgr/core': '>=7.0.0'
+      '@svgx/core': ^1.0.1
+      '@vue/compiler-sfc': ^3.0.2 || ^2.7.0
+      vue-template-compiler: ^2.6.12
+      vue-template-es2015-compiler: ^1.9.0
+    peerDependenciesMeta:
+      '@svgr/core':
+        optional: true
+      '@svgx/core':
+        optional: true
+      '@vue/compiler-sfc':
+        optional: true
+      vue-template-compiler:
+        optional: true
+      vue-template-es2015-compiler:
+        optional: true
+    dependencies:
+      '@antfu/install-pkg': 0.3.3
+      '@antfu/utils': 0.7.8
+      '@iconify/utils': 2.1.23
+      '@vue/compiler-sfc': 3.4.27
+      debug: 4.3.4
+      kolorist: 1.8.0
+      local-pkg: 0.5.0
+      unplugin: 1.10.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /unplugin@1.10.1:
+    resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
+    engines: {node: '>=14.0.0'}
+    dependencies:
+      acorn: 8.11.3
+      chokidar: 3.6.0
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.6.1
+    dev: true
+
+  /update-browserslist-db@1.0.13(browserslist@4.23.0):
+    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.23.0
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
+  /uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.1
+    dev: true
+
+  /use-callback-ref@1.3.2(react@18.3.1):
+    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
+  /use-sidecar@1.1.2(react@18.3.1):
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.6.2
+    dev: false
+
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  /v-calendar@3.1.2(@popperjs/core@2.11.8)(vue@3.4.25):
+    resolution: {integrity: sha512-QDWrnp4PWCpzUblctgo4T558PrHgHzDtQnTeUNzKxfNf29FkCeFpwGd9bKjAqktaa2aJLcyRl45T5ln1ku34kg==}
+    peerDependencies:
+      '@popperjs/core': ^2.0.0
+      vue: ^3.2.0
+    dependencies:
+      '@popperjs/core': 2.11.8
+      '@types/lodash': 4.17.1
+      '@types/resize-observer-browser': 0.1.11
+      date-fns: 2.30.0
+      date-fns-tz: 2.0.1(date-fns@2.30.0)
+      lodash: 4.17.21
+      vue: 3.4.25(typescript@5.4.5)
+      vue-screen-utils: 1.0.0-beta.13(vue@3.4.25)
+    dev: false
+
+  /validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+    dev: true
+
+  /vaul-vue@0.1.2(typescript@5.4.5):
+    resolution: {integrity: sha512-E9e0qmHXScnYXDXYuBM0xFjW5DaRcUhj9fkFlv12omd7K/RzXpM+prU+EfHS3sjtDJuy1lBdOlPPYXJeQuT/Qw==}
+    dependencies:
+      '@vueuse/core': 10.9.0(vue@3.4.25)
+      radix-vue: 1.7.2(vue@3.4.25)
+      vue: 3.4.25(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+    dev: false
+
+  /vee-validate@4.12.5(vue@3.4.25):
+    resolution: {integrity: sha512-rvaDfLPSLwTk+mf016XWE4drB8yXzOsKXiKHTb9gNXNLTtQSZ0Ww26O0/xbIFQe+n3+u8Wv1Y8uO/aLDX4fxOg==}
+    peerDependencies:
+      vue: ^3.3.11
+    dependencies:
+      '@vue/devtools-api': 6.6.1
+      type-fest: 4.18.2
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /vee-validate@4.12.7(vue@3.4.25):
+    resolution: {integrity: sha512-1BGql4XNu/3TqHFjBLV6OrZ4fRteHXxRc9tLF5Q40IgIo1cwYEyaccC1AL3tdFUr2E3JsYhXbiEExoUSy4C9nA==}
+    peerDependencies:
+      vue: ^3.4.26
+    dependencies:
+      '@vue/devtools-api': 6.6.1
+      type-fest: 4.18.2
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /vite-node@0.34.6(@types/node@20.12.10):
+    resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      mlly: 1.7.0
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.2.11(@types/node@20.12.10)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vite@5.2.11(@types/node@20.12.10):
+    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.12.10
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.17.2
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vite@5.2.11(@types/node@20.12.11):
+    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.12.11
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.17.2
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitepress@1.1.4(@algolia/client-search@4.23.3)(@types/node@20.12.10)(postcss@8.4.38)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)(typescript@5.4.5):
+    resolution: {integrity: sha512-bWIzFZXpPB6NIDBuWnS20aMADH+FcFKDfQNYFvbOWij03PR29eImTceQHIzCKordjXYBhM/TjE5VKFTUJ3EheA==}
+    hasBin: true
+    peerDependencies:
+      markdown-it-mathjax3: ^4
+      postcss: ^8
+    peerDependenciesMeta:
+      markdown-it-mathjax3:
+        optional: true
+      postcss:
+        optional: true
+    dependencies:
+      '@docsearch/css': 3.6.0
+      '@docsearch/js': 3.6.0(@algolia/client-search@4.23.3)(react-dom@18.3.1)(react@18.3.1)(search-insights@2.13.0)
+      '@shikijs/core': 1.4.0
+      '@shikijs/transformers': 1.4.0
+      '@types/markdown-it': 14.1.1
+      '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.25)
+      '@vue/devtools-api': 7.1.3(vue@3.4.25)
+      '@vueuse/core': 10.9.0(vue@3.4.25)
+      '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.25)
+      focus-trap: 7.5.4
+      mark.js: 8.11.1
+      minisearch: 6.3.0
+      postcss: 8.4.38
+      shiki: 1.4.0
+      vite: 5.2.11(@types/node@20.12.10)
+      vue: 3.4.25(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@algolia/client-search'
+      - '@types/node'
+      - '@types/react'
+      - '@vue/composition-api'
+      - async-validator
+      - axios
+      - change-case
+      - drauu
+      - fuse.js
+      - idb-keyval
+      - jwt-decode
+      - less
+      - lightningcss
+      - nprogress
+      - qrcode
+      - react
+      - react-dom
+      - sass
+      - search-insights
+      - sortablejs
+      - stylus
+      - sugarss
+      - terser
+      - typescript
+      - universal-cookie
+    dev: true
+
+  /vitest@0.34.6:
+    resolution: {integrity: sha512-+5CALsOvbNKnS+ZHMXtuUC7nL8/7F1F2DnHGjSsszX8zCjWSSviphCb/NuS9Nzf4Q03KyyDRBAXhF/8lffME4Q==}
+    engines: {node: '>=v14.18.0'}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@vitest/browser': '*'
+      '@vitest/ui': '*'
+      happy-dom: '*'
+      jsdom: '*'
+      playwright: '*'
+      safaridriver: '*'
+      webdriverio: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+      playwright:
+        optional: true
+      safaridriver:
+        optional: true
+      webdriverio:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.16
+      '@types/chai-subset': 1.3.5
+      '@types/node': 20.12.10
+      '@vitest/expect': 0.34.6
+      '@vitest/runner': 0.34.6
+      '@vitest/snapshot': 0.34.6
+      '@vitest/spy': 0.34.6
+      '@vitest/utils': 0.34.6
+      acorn: 8.11.3
+      acorn-walk: 8.3.2
+      cac: 6.7.14
+      chai: 4.4.1
+      debug: 4.3.4
+      local-pkg: 0.4.3
+      magic-string: 0.30.10
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      std-env: 3.7.0
+      strip-literal: 1.3.0
+      tinybench: 2.8.0
+      tinypool: 0.7.0
+      vite: 5.2.11(@types/node@20.12.10)
+      vite-node: 0.34.6(@types/node@20.12.10)
+      why-is-node-running: 2.2.2
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: true
+
+  /vt-pbf@3.1.3:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.2.1
+    dev: false
+
+  /vue-component-meta@2.0.16(typescript@5.4.5):
+    resolution: {integrity: sha512-IyIMClUMYcKxAL34GqdPbR4V45MUeHXqQiZlHxeYMV5Qcqp4M+CEmtGpF//XBSS138heDkYkceHAtJQjLUB1Lw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@volar/typescript': 2.2.1
+      '@vue/language-core': 2.0.16(typescript@5.4.5)
+      path-browserify: 1.0.1
+      typescript: 5.4.5
+      vue-component-type-helpers: 2.0.16
+    dev: true
+
+  /vue-component-type-helpers@2.0.16:
+    resolution: {integrity: sha512-qisL/iAfdO++7w+SsfYQJVPj6QKvxp4i1MMxvsNO41z/8zu3KuAw9LkhKUfP/kcOWGDxESp+pQObWppXusejCA==}
+    dev: true
+
+  /vue-demi@0.14.7(vue@3.4.25):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@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.4.25(typescript@5.4.5)
+
+  /vue-demi@0.14.7(vue@3.4.27):
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      '@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.4.27(typescript@5.4.5)
+    dev: false
+
+  /vue-eslint-parser@9.4.2(eslint@8.57.0):
+    resolution: {integrity: sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=6.0.0'
+    dependencies:
+      debug: 4.3.4
+      eslint: 8.57.0
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.5.0
+      lodash: 4.17.21
+      semver: 7.6.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /vue-screen-utils@1.0.0-beta.13(vue@3.4.25):
+    resolution: {integrity: sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /vue-sonner@1.1.2:
+    resolution: {integrity: sha512-yg4f5s0a3oiiI7cNvO0Dajux1Y7s04lxww3vnQtnwQawJ3KqaKA9RIRMdI9wGTosRGIOwgYFniFRGl4+IuKPZw==}
+    dev: false
+
+  /vue-template-compiler@2.7.16:
+    resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+    dev: true
+
+  /vue-tsc@2.0.14(typescript@5.4.5):
+    resolution: {integrity: sha512-DgAO3U1cnCHOUO7yB35LENbkapeRsBZ7Ugq5hGz/QOHny0+1VQN8eSwSBjYbjLVPfvfw6EY7sNPjbuHHUhckcg==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/typescript': 2.2.0-alpha.10
+      '@vue/language-core': 2.0.14(typescript@5.4.5)
+      semver: 7.6.0
+      typescript: 5.4.5
+    dev: true
+
+  /vue-tsc@2.0.16(typescript@5.4.5):
+    resolution: {integrity: sha512-/gHAWJa216PeEhfxtAToIbxdWgw01wuQzo48ZUqMYVEyNqDp+OYV9xMO5HaPS2P3Ls0+EsjguMZLY4cGobX4Ew==}
+    hasBin: true
+    peerDependencies:
+      typescript: '*'
+    dependencies:
+      '@volar/typescript': 2.2.1
+      '@vue/language-core': 2.0.16(typescript@5.4.5)
+      semver: 7.6.1
+      typescript: 5.4.5
+    dev: true
+
+  /vue-wrap-balancer@1.1.3(vue@3.4.25):
+    resolution: {integrity: sha512-9kTRwYIveWxV1FdaCJfRjIIRZOtwgnxypGS5mlAiXnih5+Cfaby9YDh3APMW1jWp0oCvL+gep0XCbcjBb7/ZXQ==}
+    peerDependencies:
+      vue: ^3.3.0
+    dependencies:
+      nanoid: 3.3.7
+      vue: 3.4.25(typescript@5.4.5)
+    dev: false
+
+  /vue@3.4.25(typescript@5.4.5):
+    resolution: {integrity: sha512-HWyDqoBHMgav/OKiYA2ZQg+kjfMgLt/T0vg4cbIF7JbXAjDexRf5JRg+PWAfrAkSmTd2I8aPSXtooBFWHB98cg==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.25
+      '@vue/compiler-sfc': 3.4.25
+      '@vue/runtime-dom': 3.4.25
+      '@vue/server-renderer': 3.4.25(vue@3.4.25)
+      '@vue/shared': 3.4.25
+      typescript: 5.4.5
+
+  /vue@3.4.27(typescript@5.4.5):
+    resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/compiler-dom': 3.4.27
+      '@vue/compiler-sfc': 3.4.27
+      '@vue/runtime-dom': 3.4.27
+      '@vue/server-renderer': 3.4.27(vue@3.4.27)
+      '@vue/shared': 3.4.27
+      typescript: 5.4.5
+
+  /webpack-sources@3.2.3:
+    resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
+    engines: {node: '>=10.13.0'}
+    dev: true
+
+  /webpack-virtual-modules@0.6.1:
+    resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
+    dev: true
+
+  /which@1.3.1:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+
+  /why-is-node-running@2.2.2:
+    resolution: {integrity: sha512-6tSwToZxTOcotxHeA+qGCq1mVzKR3CwcJGmVcY+QE8SHy6TnpFnh8PAvPNHYr7EcuVeG0QSMxtYCuO1ta/G/oA==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+    dev: true
+
+  /word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  /wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  /wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.1.0
+      strip-ansi: 7.1.0
+    dev: true
+
+  /wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+    dev: true
+
+  /xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+    dev: true
+
+  /yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+    dev: true
+
+  /yaml-eslint-parser@1.2.2:
+    resolution: {integrity: sha512-pEwzfsKbTrB8G3xc/sN7aw1v6A6c/pKxLAkjclnAyo5g5qOh6eL9WGu0o3cSDQZKrTNk4KL4lQSwZW+nBkANEg==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    dependencies:
+      eslint-visitor-keys: 3.4.3
+      lodash: 4.17.21
+      yaml: 2.4.2
+    dev: true
+
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: false
+
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+    engines: {node: '>= 14'}
+    dev: true
+
+  /yaml@2.4.2:
+    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
+    engines: {node: '>= 14'}
+    hasBin: true
+
+  /yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+    dev: true
+
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.1.2
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+    dev: true
+
+  /yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /yocto-queue@1.0.0:
+    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+    engines: {node: '>=12.20'}
+    dev: true
+
+  /zod@3.23.7:
+    resolution: {integrity: sha512-NBeIoqbtOiUMomACV/y+V3Qfs9+Okr18vR5c/5pHClPpufWOrsx8TENboDPe265lFdfewX2yBtNTLPvnmCxwog==}
+    dev: false
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..3ff5faa
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..2694a93
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["node_modules"]
+}