diff --git a/.changeset/witty-socks-bathe.md b/.changeset/witty-socks-bathe.md
deleted file mode 100644
index ff37b1abd8..0000000000
--- a/.changeset/witty-socks-bathe.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@nextui-org/theme": patch
----
-
-add missing `data-[hover=true]:` for ghost button with danger color
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index 2de89b8dd1..e8f6cc03d3 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -6,6 +6,6 @@ contact_links:
   - name: 💬 Discord Community Chat
     url: https://discord.gg/9b6yyZKmH4
     about: Ask quick questions or simply chat on the `NextUI` community Discord server.
-  - name: 💬 New Updates (Twitter)
-    url: https://twitter.com/getnextui
-    about: Link to our twitter account if you want to follow us and stay up to date with NextUI news
+  - name: 💬 New Updates (X)
+    url: https://x.com/getnextui
+    about: Link to our X account if you want to follow us and stay up to date with NextUI news
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 2c16ffb5d9..9c4ff17f0c 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -11,15 +11,15 @@ Closes # <!-- Github issue # here -->
 
 ## 📝 Description
 
-> Add a brief description
+<!--- Add a brief description -->
 
 ## ⛳️ Current behavior (updates)
 
-> Please describe the current behavior that you are modifying
+<!--- Please describe the current behavior that you are modifying -->
 
 ## 🚀 New behavior
 
-> Please describe the behavior or changes this PR adds
+<!--- Please describe the behavior or changes this PR adds -->
 
 ## 💣 Is this a breaking change (Yes/No):
 
diff --git a/.github/workflows/enter-pre-release-mode.yaml b/.github/workflows/enter-pre-release-mode.yaml
new file mode 100644
index 0000000000..77e8ef273c
--- /dev/null
+++ b/.github/workflows/enter-pre-release-mode.yaml
@@ -0,0 +1,35 @@
+name: Enter pre-release mode
+
+on: workflow_dispatch
+jobs:
+  enter-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Enter pre-release mode
+        id: enter-pre-release-mode
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          if [ ${{ github.ref }} == 'refs/heads/canary' ]; then
+            pnpm changeset:canary
+          else
+            pnpm changeset:beta
+          fi
+          git add -A
+          git commit -m 'chore(pre-release): enter pre-release mode'
+          git push
\ No newline at end of file
diff --git a/.github/workflows/exit-pre-release-mode.yaml b/.github/workflows/exit-pre-release-mode.yaml
new file mode 100644
index 0000000000..d8cf71a470
--- /dev/null
+++ b/.github/workflows/exit-pre-release-mode.yaml
@@ -0,0 +1,39 @@
+name: Exit pre-release mode
+
+on: workflow_dispatch
+jobs:
+  exit-pre-release-mode:
+    if: ${{ github.ref == 'refs/heads/beta/release-next' || github.ref == 'refs/heads/canary' }}
+    name: exit pre-release mode
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.branch }}
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: remove pre.json
+        # we only remove .changeset/pre.json here 
+        # since we want to keep the changeset files introduced in beta/release-next or canary branch
+        # once we merge it to canary / main, those files will be removed in version PR in canary 
+        # and converted to corresponding changelogs
+        run: npx rimraf .changeset/pre.json
+
+      - name: Commit and push changes
+        env:
+          GITHUB_TOKEN: ${{ secrets.GA_ACCESS_TOKEN }}
+        run: |
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config user.name "github-actions[bot]"
+          git add -A
+          git commit -m "ci(changesets): exit pre-release mode"
+          git push
\ No newline at end of file
diff --git a/.github/workflows/pre-release.yaml b/.github/workflows/pre-release.yaml
new file mode 100644
index 0000000000..729f055cd5
--- /dev/null
+++ b/.github/workflows/pre-release.yaml
@@ -0,0 +1,81 @@
+name: Pre-release
+
+on:
+  push:
+    paths:
+      - ".changeset/**"
+      - "packages/**"
+    branches:
+      - "beta/release-next"
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  prerelease:
+    name: changesets pre-release
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Debug condition values
+        run: |
+          echo "pre.json exists: ${{ steps.check_if_pre_json_exists.outputs.files_exists }}"
+          echo "Commit message: ${{ github.event.head_commit.message }}"
+          echo "Contains version packages: ${{ contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+          echo "Full condition would be: ${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+
+      - name: Check if pre.json exists
+        id: check_if_pre_json_exists
+        uses: andstor/file-existence-action@v3.0.0
+        with:
+          files: ".changeset/pre.json"
+
+      - name: Get pre-release changesets
+        id: get-pre-release-changesets
+        uses: notiz-dev/github-action-json-property@release
+        with:
+          path: ".changeset/pre.json"
+          prop_path: "changesets"
+
+      - name: Create pre-release PR
+        id: create-pre-release-pr
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && !startsWith(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          version: pnpm run version
+          title: "ci(changesets): :package: version packages"
+          commit: "ci(changesets): version packages"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Tests
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm test
+
+      - name: Build
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        run: pnpm build
+        env:
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
+      - name: Publish to NPM
+        id: publish-to-npm
+        if: "${{ steps.check_if_pre_json_exists.outputs.files_exists == 'true' && contains(github.event.head_commit.message, 'ci(changesets): version packages') }}"
+        uses: changesets/action@v1
+        with:
+          publish: pnpm run release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 9d364c0602..9da665a574 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -15,6 +15,7 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
+    timeout-minutes: 30
     steps:
       - name: Checkout branch
         uses: actions/checkout@v4
@@ -22,12 +23,12 @@ jobs:
       - name: Install
         uses: ./.github/common-actions/install
 
-      - name: Build
-        run: pnpm build
-
       - name: Tests
         run: pnpm test
 
+      - name: Build
+        run: pnpm build
+
       - name: Create Release Pull Request or Publish to NPM
         id: changesets
         uses: changesets/action@v1
@@ -41,17 +42,9 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Sync files from canary to main branch if a publish happens
-        if: steps.changesets.outputs.published == 'true'
-        run: |
-          curl -X POST \
-            -H "Accept: application/vnd.github.v3+json" \
-            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-            https://api.github.com/repos/owner/repo/dispatches \
-            -d '{"event_type":"sync-canary-to-main"}'
-
       - name: Create canary release
         if: steps.changesets.outputs.published != 'true'
+        timeout-minutes: 15
         run: |
           git checkout canary
           pnpm version:canary
diff --git a/.github/workflows/sync-canary-to-main.yaml b/.github/workflows/sync-canary-to-main.yaml
deleted file mode 100644
index c03f5cfde7..0000000000
--- a/.github/workflows/sync-canary-to-main.yaml
+++ /dev/null
@@ -1,43 +0,0 @@
-name: Sync Canary to Main
-
-on:
-  # triggered manually in Github
-  workflow_dispatch:
-  # triggered by the type "sync-canary-to-main" (e.g. from release action after publishing)
-  repository_dispatch:
-    types: [sync-canary-to-main]
-
-jobs:
-  create_pull_request:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0  # Ensure all history is fetched
-
-      - name: Create Pull Request
-        uses: repo-sync/pull-request@v2
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          source_branch: "canary"
-          destination_branch: "main"
-          pr_title: "Auto-sync Canary to Main"
-          pr_body: |
-            ## Automated: Sync from Canary to Main
-
-            This Pull Request is automatically generated to sync the changes from the Canary branch to the Main branch. Below are the included updates:
-
-            ###  Triggered by a Direct Push to Canary:
-            - Please check the recent commits on the Canary branch directly as this sync may include multiple changes.
-
-            ### Triggered by a Pull Request Merge:
-            - Merged Pull Request: [PR#${{ github.event.pull_request.number }}](${{ github.event.pull_request.html_url }}) - ${{ github.event.pull_request.title }}
-              - PR Description: ${{ github.event.pull_request.body }}
-              - Merged by: ${{ github.event.pull_request.merged_by.login }}
-
-            ### Action Required:
-            - Please review the changes carefully.
-            - Approve and merge the Pull Request if everything is in order.
-
-            Thank you for maintaining the Main branch updated and clean.
diff --git a/.github/workflows/update-stats.yml b/.github/workflows/update-stats.yml
new file mode 100644
index 0000000000..3ea0fd4819
--- /dev/null
+++ b/.github/workflows/update-stats.yml
@@ -0,0 +1,42 @@
+name: Update Stats
+
+on:
+  schedule:
+    # Runs every Monday at 00:00 UTC
+    - cron: '0 0 * * 1'
+  # Allow manual trigger
+  workflow_dispatch:
+
+jobs:
+  update-stats:
+    name: Update Stats
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout branch
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/common-actions/install
+
+      - name: Update search metadata
+        run: pnpm update:search-meta
+
+      - name: Update GitHub info
+        run: pnpm update:github-info
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v5
+        with:
+          commit-message: "chore(stats): update project statistics"
+          title: "chore(stats): 📊 Update project statistics"
+          body: |
+            This PR updates the project statistics including:
+            - Search metadata
+            - GitHub repository information
+            
+            This is an automated PR generated weekly.
+          branch: chore/update-stats
+          base: main
+          delete-branch: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 9fca9efca5..69a0d91f51 100644
--- a/.gitignore
+++ b/.gitignore
@@ -56,6 +56,7 @@ packages/**/*.backup.ts
 
 # ignore sitemap
 apps/**/sitemap.xml
+apps/**/sitemap-0.xml
 
 # turbo
 .turbo
diff --git a/.husky/post-merge b/.husky/post-merge
new file mode 100755
index 0000000000..e20e0849a6
--- /dev/null
+++ b/.husky/post-merge
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"
diff --git a/.husky/post-rebase b/.husky/post-rebase
new file mode 100755
index 0000000000..e20e0849a6
--- /dev/null
+++ b/.husky/post-rebase
@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+huskyDir=$(dirname -- "$0")
+. "$huskyDir/_/husky.sh"
+
+. "$huskyDir/scripts/update-dep"
diff --git a/.husky/scripts/update-dep b/.husky/scripts/update-dep
new file mode 100644
index 0000000000..1e569b495b
--- /dev/null
+++ b/.husky/scripts/update-dep
@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+changed_files="$(git diff-tree -r --name-only --no-commit-id ORIG_HEAD HEAD)"
+
+check_run() {
+  if (echo "$changed_files" | grep --quiet "$1"); then
+    printf "\033[36mDetected changes in pnpm-lock.yaml, starting dependency update\033[0m\n"
+    eval "$2"
+  fi
+}
+
+check_run pnpm-lock.yaml "pnpm install --color"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index c531e733d0..6b36bf07d3 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,5 @@
   },
   "tailwindCSS.experimental.classRegex": [
     ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  ],
 }
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
index 23dda4847f..bf12dab1cd 100644
--- a/apps/docs/.eslintrc.json
+++ b/apps/docs/.eslintrc.json
@@ -3,7 +3,7 @@
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
       "parserOptions": {
         "project": ["apps/docs/tsconfig(.*)?.json"],
         "ecmaFeatures": {
@@ -22,10 +22,6 @@
     {
       "files": ["*.ts", "*.tsx"],
       "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
     }
   ]
 }
diff --git a/apps/docs/app/blog/[slug]/page.tsx b/apps/docs/app/blog/[slug]/page.tsx
index f62a849e0d..e3dab232d4 100644
--- a/apps/docs/app/blog/[slug]/page.tsx
+++ b/apps/docs/app/blog/[slug]/page.tsx
@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {Link, User} from "@nextui-org/react";
 import {format, parseISO} from "date-fns";
 import NextLink from "next/link";
diff --git a/apps/docs/app/blog/page.tsx b/apps/docs/app/blog/page.tsx
index 4662e294a1..b19c5eb92b 100644
--- a/apps/docs/app/blog/page.tsx
+++ b/apps/docs/app/blog/page.tsx
@@ -1,4 +1,4 @@
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 import {compareDesc} from "date-fns";
 
 import {BlogPostList} from "@/components/blog-post";
diff --git a/apps/docs/app/docs/[[...slug]]/page.tsx b/apps/docs/app/docs/[[...slug]]/page.tsx
index 858865c0bd..dbb2acc24a 100644
--- a/apps/docs/app/docs/[[...slug]]/page.tsx
+++ b/apps/docs/app/docs/[[...slug]]/page.tsx
@@ -1,7 +1,7 @@
 import type {Metadata} from "next";
 
 import {notFound} from "next/navigation";
-import {allDocs} from "contentlayer/generated";
+import {allDocs} from "contentlayer2/generated";
 import {Link} from "@nextui-org/react";
 
 import {MDXContent} from "@/components/mdx-content";
diff --git a/apps/docs/app/docs/layout.tsx b/apps/docs/app/docs/layout.tsx
index 782bb7214e..9ed37fa8ab 100644
--- a/apps/docs/app/docs/layout.tsx
+++ b/apps/docs/app/docs/layout.tsx
@@ -11,7 +11,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({children}: DocsLayoutProps) {
   return (
     <>
-      <main className="relative container mx-auto max-w-7xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
+      <main className="relative container mx-auto max-w-8xl z-10 px-6 min-h-[calc(100vh_-_64px_-_108px)] mb-12 flex-grow">
         <div className="grid grid-cols-12">
           <div className="hidden overflow-visible relative z-10 lg:block lg:col-span-2 mt-8 pr-4">
             <DocsSidebar routes={manifest.routes} />
diff --git a/apps/docs/app/examples/perf/client-page.tsx b/apps/docs/app/examples/perf/client-page.tsx
new file mode 100644
index 0000000000..79ab457b0a
--- /dev/null
+++ b/apps/docs/app/examples/perf/client-page.tsx
@@ -0,0 +1,561 @@
+"use client";
+
+import {
+  RadioGroup,
+  Radio,
+  Button,
+  Accordion,
+  Tabs,
+  Textarea,
+  Input,
+  Tab,
+  Avatar,
+  Select,
+  SelectItem,
+  AccordionItem,
+  Pagination,
+  extendVariants,
+  PaginationItem,
+} from "@nextui-org/react";
+import {useFilter} from "@react-aria/i18n";
+import {useEffect, useMemo, useRef, useState} from "react";
+import {useSearchParams} from "next/navigation";
+
+import {SearchLinearIcon} from "@/components/icons";
+
+const MyRadioGroup = () => {
+  const [radio, setRadio] = useState("1");
+
+  return (
+    <RadioGroup value={radio} onValueChange={setRadio}>
+      <Radio value="1">Radio 1</Radio>
+      <Radio value="2">Radio 2</Radio>
+      <Radio value="3">Radio 3</Radio>
+      <Radio value="4">Radio 4</Radio>
+      <Radio value="5">Radio 5</Radio>
+      <Radio value="6">Radio 6</Radio>
+      <Radio value="7">Radio 7</Radio>
+      <Radio value="8">Radio 8</Radio>
+      <Radio value="9">Radio 9</Radio>
+      <Radio value="10">Radio 10</Radio>
+      <Radio value="11">Radio 11</Radio>
+      <Radio value="12">Radio 12</Radio>
+      <Radio value="13">Radio 13</Radio>
+      <Radio value="14">Radio 14</Radio>
+      <Radio value="15">Radio 15</Radio>
+      <Radio value="16">Radio 16</Radio>
+      <Radio value="17">Radio 17</Radio>
+      <Radio value="18">Radio 18</Radio>
+      <Radio value="19">Radio 19</Radio>
+      <Radio value="20">Radio 20</Radio>
+      <Radio value="21">Radio 21</Radio>
+      <Radio value="22">Radio 22</Radio>
+      <Radio value="23">Radio 23</Radio>
+      <Radio value="24">Radio 24</Radio>
+      <Radio value="25">Radio 25</Radio>
+      <Radio value="26">Radio 26</Radio>
+      <Radio value="27">Radio 27</Radio>
+      <Radio value="28">Radio 28</Radio>
+      <Radio value="29">Radio 29</Radio>
+      <Radio value="30">Radio 30</Radio>
+      <Radio value="31">Radio 31</Radio>
+      <Radio value="32">Radio 32</Radio>
+      <Radio value="33">Radio 33</Radio>
+      <Radio value="34">Radio 34</Radio>
+      <Radio value="35">Radio 35</Radio>
+      <Radio value="36">Radio 36</Radio>
+      <Radio value="37">Radio 37</Radio>
+      <Radio value="38">Radio 38</Radio>
+      <Radio value="39">Radio 39</Radio>
+      <Radio value="40">Radio 40</Radio>
+      <Radio value="41">Radio 41</Radio>
+      <Radio value="42">Radio 42</Radio>
+      <Radio value="43">Radio 43</Radio>
+      <Radio value="44">Radio 44</Radio>
+      <Radio value="45">Radio 45</Radio>
+      <Radio value="46">Radio 46</Radio>
+      <Radio value="47">Radio 47</Radio>
+      <Radio value="48">Radio 48</Radio>
+      <Radio value="49">Radio 49</Radio>
+      <Radio value="50">Radio 50</Radio>
+      <Radio value="51">Radio 51</Radio>
+      <Radio value="52">Radio 52</Radio>
+      <Radio value="53">Radio 53</Radio>
+      <Radio value="54">Radio 54</Radio>
+      <Radio value="55">Radio 55</Radio>
+      <Radio value="56">Radio 56</Radio>
+      <Radio value="57">Radio 57</Radio>
+      <Radio value="58">Radio 58</Radio>
+      <Radio value="59">Radio 59</Radio>
+      <Radio value="60">Radio 60</Radio>
+      <Radio value="61">Radio 61</Radio>
+      <Radio value="62">Radio 62</Radio>
+    </RadioGroup>
+  );
+};
+
+const MyInput = extendVariants(Input, {
+  variants: {
+    color: {
+      stone: {
+        inputWrapper: [
+          "bg-zinc-100",
+          "border",
+          "shadow",
+          "transition-colors",
+          "focus-within:bg-zinc-100",
+          "data-[hover=true]:border-zinc-600",
+          "data-[hover=true]:bg-zinc-100",
+          "group-data-[focus=true]:border-zinc-600",
+          // dark theme
+          "dark:bg-zinc-900",
+          "dark:border-zinc-800",
+          "dark:data-[hover=true]:bg-zinc-900",
+          "dark:focus-within:bg-zinc-900",
+        ],
+        input: [
+          "text-zinc-800",
+          "placeholder:text-zinc-600",
+          // dark theme
+          "dark:text-zinc-400",
+          "dark:placeholder:text-zinc-600",
+        ],
+      },
+    },
+    size: {
+      xs: {
+        inputWrapper: "h-6 min-h-6 px-1",
+        input: "text-tiny",
+      },
+      md: {
+        inputWrapper: "h-10 min-h-10",
+        input: "text-small",
+      },
+      xl: {
+        inputWrapper: "h-14 min-h-14",
+        input: "text-medium",
+      },
+    },
+    radius: {
+      xs: {
+        inputWrapper: "rounded",
+      },
+      sm: {
+        inputWrapper: "rounded-[4px]",
+      },
+    },
+    textSize: {
+      base: {
+        input: "text-base",
+      },
+    },
+    removeLabel: {
+      true: {
+        label: "hidden",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: {
+    color: "stone",
+    textSize: "base",
+    removeLabel: true,
+  },
+});
+
+const MyButton2 = extendVariants(Button, {
+  variants: {
+    color: {
+      foreground:
+        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
+    },
+    isScalable: {
+      true: "scale-125",
+      false: "",
+    },
+    size: {
+      xl: "size--xl",
+      "2xl": "size--2xl",
+    },
+    mySize: {
+      lg: "px-12 py-6 text-lg",
+      xl: "px-12 py-6 text-xl",
+    },
+  },
+  defaultVariants: {
+    color: "foreground",
+  },
+});
+
+const usersData = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function NextUIPerf() {
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [inputValue, setInputValue] = useState<string>();
+  const [selectedKey, setSelectedKey] = useState<string>("");
+
+  const searchParams = useSearchParams();
+
+  const page = Number(searchParams.get("page"));
+
+  let {startsWith} = useFilter({sensitivity: "base"});
+
+  const filteredItems = inputValue
+    ? usersData.filter((item) => startsWith(item.name, inputValue))
+    : usersData;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    isOpen && inputRef?.current?.focus();
+  }, [isOpen]);
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedKey(e.target.value);
+  };
+
+  const topContent = useMemo(() => {
+    return (
+      <Input
+        ref={inputRef}
+        isClearable
+        aria-activedescendant={selectedKey}
+        aria-expanded={isOpen}
+        aria-label="Search user"
+        autoComplete="off"
+        autoCorrect="off"
+        className="z-10 sticky top-1"
+        placeholder="Search..."
+        spellCheck={false}
+        startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
+        type="text"
+        onValueChange={setInputValue}
+      />
+    );
+  }, [inputRef, selectedKey, isOpen]);
+
+  return (
+    <div className="w-full p-24 gap-4 flex flex-col">
+      <Select
+        classNames={{
+          base: "max-w-xs",
+          listboxWrapper: "scroll-pb-6 scroll-pt-28",
+        }}
+        items={filteredItems}
+        label="Assigned to"
+        labelPlacement="outside"
+        listboxProps={{
+          topContent,
+          variant: "flat",
+          classNames: {
+            base: [
+              "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
+              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
+            ],
+          },
+        }}
+        placeholder="Select a user"
+        selectedKeys={[selectedKey]}
+        showScrollIndicators={false}
+        variant="flat"
+        onChange={handleSelectionChange}
+        onOpenChange={setIsOpen}
+      >
+        {(item) => (
+          <SelectItem key={item.id} textValue={item.name}>
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.email}</span>
+              </div>
+            </div>
+          </SelectItem>
+        )}
+      </Select>
+
+      <Accordion>
+        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
+          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
+          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
+          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
+          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
+          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
+          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
+          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
+          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
+          nostrud. Tempor sint Lorem est culpa do.
+        </AccordionItem>
+        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
+        </AccordionItem>
+        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
+          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
+          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
+          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
+          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
+        </AccordionItem>
+      </Accordion>
+      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
+        <Tab title="Test 1">
+          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
+          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 2">
+          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
+        </Tab>
+        <Tab title="Test 3">
+          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
+          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
+        </Tab>
+      </Tabs>
+
+      <h2>Outside</h2>
+      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
+      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
+      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
+
+      <MyRadioGroup />
+
+      <MyInput
+        isClearable
+        placeholder="Search..."
+        radius="md"
+        size="md"
+        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
+      />
+
+      <Button>Click Me!</Button>
+
+      <MyButton2 color="primary">Press Me!</MyButton2>
+
+      <Pagination
+        showControls
+        initialPage={page ?? 1}
+        renderItem={({page, ...itemProps}) => {
+          return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />;
+        }}
+        total={10}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
index 79ab457b0a..7a06664f69 100644
--- a/apps/docs/app/examples/perf/page.tsx
+++ b/apps/docs/app/examples/perf/page.tsx
@@ -1,561 +1,11 @@
-"use client";
+import {Suspense} from "react";
 
-import {
-  RadioGroup,
-  Radio,
-  Button,
-  Accordion,
-  Tabs,
-  Textarea,
-  Input,
-  Tab,
-  Avatar,
-  Select,
-  SelectItem,
-  AccordionItem,
-  Pagination,
-  extendVariants,
-  PaginationItem,
-} from "@nextui-org/react";
-import {useFilter} from "@react-aria/i18n";
-import {useEffect, useMemo, useRef, useState} from "react";
-import {useSearchParams} from "next/navigation";
-
-import {SearchLinearIcon} from "@/components/icons";
-
-const MyRadioGroup = () => {
-  const [radio, setRadio] = useState("1");
-
-  return (
-    <RadioGroup value={radio} onValueChange={setRadio}>
-      <Radio value="1">Radio 1</Radio>
-      <Radio value="2">Radio 2</Radio>
-      <Radio value="3">Radio 3</Radio>
-      <Radio value="4">Radio 4</Radio>
-      <Radio value="5">Radio 5</Radio>
-      <Radio value="6">Radio 6</Radio>
-      <Radio value="7">Radio 7</Radio>
-      <Radio value="8">Radio 8</Radio>
-      <Radio value="9">Radio 9</Radio>
-      <Radio value="10">Radio 10</Radio>
-      <Radio value="11">Radio 11</Radio>
-      <Radio value="12">Radio 12</Radio>
-      <Radio value="13">Radio 13</Radio>
-      <Radio value="14">Radio 14</Radio>
-      <Radio value="15">Radio 15</Radio>
-      <Radio value="16">Radio 16</Radio>
-      <Radio value="17">Radio 17</Radio>
-      <Radio value="18">Radio 18</Radio>
-      <Radio value="19">Radio 19</Radio>
-      <Radio value="20">Radio 20</Radio>
-      <Radio value="21">Radio 21</Radio>
-      <Radio value="22">Radio 22</Radio>
-      <Radio value="23">Radio 23</Radio>
-      <Radio value="24">Radio 24</Radio>
-      <Radio value="25">Radio 25</Radio>
-      <Radio value="26">Radio 26</Radio>
-      <Radio value="27">Radio 27</Radio>
-      <Radio value="28">Radio 28</Radio>
-      <Radio value="29">Radio 29</Radio>
-      <Radio value="30">Radio 30</Radio>
-      <Radio value="31">Radio 31</Radio>
-      <Radio value="32">Radio 32</Radio>
-      <Radio value="33">Radio 33</Radio>
-      <Radio value="34">Radio 34</Radio>
-      <Radio value="35">Radio 35</Radio>
-      <Radio value="36">Radio 36</Radio>
-      <Radio value="37">Radio 37</Radio>
-      <Radio value="38">Radio 38</Radio>
-      <Radio value="39">Radio 39</Radio>
-      <Radio value="40">Radio 40</Radio>
-      <Radio value="41">Radio 41</Radio>
-      <Radio value="42">Radio 42</Radio>
-      <Radio value="43">Radio 43</Radio>
-      <Radio value="44">Radio 44</Radio>
-      <Radio value="45">Radio 45</Radio>
-      <Radio value="46">Radio 46</Radio>
-      <Radio value="47">Radio 47</Radio>
-      <Radio value="48">Radio 48</Radio>
-      <Radio value="49">Radio 49</Radio>
-      <Radio value="50">Radio 50</Radio>
-      <Radio value="51">Radio 51</Radio>
-      <Radio value="52">Radio 52</Radio>
-      <Radio value="53">Radio 53</Radio>
-      <Radio value="54">Radio 54</Radio>
-      <Radio value="55">Radio 55</Radio>
-      <Radio value="56">Radio 56</Radio>
-      <Radio value="57">Radio 57</Radio>
-      <Radio value="58">Radio 58</Radio>
-      <Radio value="59">Radio 59</Radio>
-      <Radio value="60">Radio 60</Radio>
-      <Radio value="61">Radio 61</Radio>
-      <Radio value="62">Radio 62</Radio>
-    </RadioGroup>
-  );
-};
-
-const MyInput = extendVariants(Input, {
-  variants: {
-    color: {
-      stone: {
-        inputWrapper: [
-          "bg-zinc-100",
-          "border",
-          "shadow",
-          "transition-colors",
-          "focus-within:bg-zinc-100",
-          "data-[hover=true]:border-zinc-600",
-          "data-[hover=true]:bg-zinc-100",
-          "group-data-[focus=true]:border-zinc-600",
-          // dark theme
-          "dark:bg-zinc-900",
-          "dark:border-zinc-800",
-          "dark:data-[hover=true]:bg-zinc-900",
-          "dark:focus-within:bg-zinc-900",
-        ],
-        input: [
-          "text-zinc-800",
-          "placeholder:text-zinc-600",
-          // dark theme
-          "dark:text-zinc-400",
-          "dark:placeholder:text-zinc-600",
-        ],
-      },
-    },
-    size: {
-      xs: {
-        inputWrapper: "h-6 min-h-6 px-1",
-        input: "text-tiny",
-      },
-      md: {
-        inputWrapper: "h-10 min-h-10",
-        input: "text-small",
-      },
-      xl: {
-        inputWrapper: "h-14 min-h-14",
-        input: "text-medium",
-      },
-    },
-    radius: {
-      xs: {
-        inputWrapper: "rounded",
-      },
-      sm: {
-        inputWrapper: "rounded-[4px]",
-      },
-    },
-    textSize: {
-      base: {
-        input: "text-base",
-      },
-    },
-    removeLabel: {
-      true: {
-        label: "hidden",
-      },
-      false: {},
-    },
-  },
-  defaultVariants: {
-    color: "stone",
-    textSize: "base",
-    removeLabel: true,
-  },
-});
-
-const MyButton2 = extendVariants(Button, {
-  variants: {
-    color: {
-      foreground:
-        "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80",
-    },
-    isScalable: {
-      true: "scale-125",
-      false: "",
-    },
-    size: {
-      xl: "size--xl",
-      "2xl": "size--2xl",
-    },
-    mySize: {
-      lg: "px-12 py-6 text-lg",
-      xl: "px-12 py-6 text-xl",
-    },
-  },
-  defaultVariants: {
-    color: "foreground",
-  },
-});
-
-const usersData = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];
-
-export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string>("");
-  const [textB, setTextB] = useState<string>("");
-  const [textC, setTextC] = useState<string>("");
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [inputValue, setInputValue] = useState<string>();
-  const [selectedKey, setSelectedKey] = useState<string>("");
-
-  const searchParams = useSearchParams();
-
-  const page = Number(searchParams.get("page"));
-
-  let {startsWith} = useFilter({sensitivity: "base"});
-
-  const filteredItems = inputValue
-    ? usersData.filter((item) => startsWith(item.name, inputValue))
-    : usersData;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    isOpen && inputRef?.current?.focus();
-  }, [isOpen]);
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedKey(e.target.value);
-  };
-
-  const topContent = useMemo(() => {
-    return (
-      <Input
-        ref={inputRef}
-        isClearable
-        aria-activedescendant={selectedKey}
-        aria-expanded={isOpen}
-        aria-label="Search user"
-        autoComplete="off"
-        autoCorrect="off"
-        className="z-10 sticky top-1"
-        placeholder="Search..."
-        spellCheck={false}
-        startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />}
-        type="text"
-        onValueChange={setInputValue}
-      />
-    );
-  }, [inputRef, selectedKey, isOpen]);
+import ClientPage from "./client-page";
 
+export default function PerfPage() {
   return (
-    <div className="w-full p-24 gap-4 flex flex-col">
-      <Select
-        classNames={{
-          base: "max-w-xs",
-          listboxWrapper: "scroll-pb-6 scroll-pt-28",
-        }}
-        items={filteredItems}
-        label="Assigned to"
-        labelPlacement="outside"
-        listboxProps={{
-          topContent,
-          variant: "flat",
-          classNames: {
-            base: [
-              "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10",
-              "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50",
-            ],
-          },
-        }}
-        placeholder="Select a user"
-        selectedKeys={[selectedKey]}
-        showScrollIndicators={false}
-        variant="flat"
-        onChange={handleSelectionChange}
-        onOpenChange={setIsOpen}
-      >
-        {(item) => (
-          <SelectItem key={item.id} textValue={item.name}>
-            <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
-              <div className="flex flex-col">
-                <span className="text-small">{item.name}</span>
-                <span className="text-tiny text-default-400">{item.email}</span>
-              </div>
-            </div>
-          </SelectItem>
-        )}
-      </Select>
-
-      <Accordion>
-        <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-          incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis
-          aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum.
-          Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis
-          veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia.
-          Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur
-          adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea
-          enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim.
-          Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam
-          elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
-          nostrud. Tempor sint Lorem est culpa do.
-        </AccordionItem>
-        <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-          cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
-        </AccordionItem>
-        <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-          Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
-          reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
-          eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
-          ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
-          Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
-        </AccordionItem>
-      </Accordion>
-      <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined">
-        <Tab title="Test 1">
-          <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" />
-          <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 2">
-          <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} />
-        </Tab>
-        <Tab title="Test 3">
-          <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} />
-          <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} />
-        </Tab>
-      </Tabs>
-
-      <h2>Outside</h2>
-      <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} />
-      <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} />
-      <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} />
-
-      <MyRadioGroup />
-
-      <MyInput
-        isClearable
-        placeholder="Search..."
-        radius="md"
-        size="md"
-        startContent={<SearchLinearIcon className="text-zinc-500" size={16} />}
-      />
-
-      <Button>Click Me!</Button>
-
-      <MyButton2 color="primary">Press Me!</MyButton2>
-
-      <Pagination
-        showControls
-        initialPage={page ?? 1}
-        renderItem={({page, ...itemProps}) => {
-          return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />;
-        }}
-        total={10}
-      />
-    </div>
+    <Suspense fallback={<div>Loading...</div>}>
+      <ClientPage />
+    </Suspense>
   );
 }
diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx
index dbb19e9174..cd02d809b3 100644
--- a/apps/docs/app/examples/table/custom-styles/page.tsx
+++ b/apps/docs/app/examples/table/custom-styles/page.tsx
@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx
index b94ccf30b7..c79650090a 100644
--- a/apps/docs/app/examples/table/use-case/page.tsx
+++ b/apps/docs/app/examples/table/use-case/page.tsx
@@ -23,7 +23,7 @@ import {
 } from "@nextui-org/react";
 import {ChevronDownIcon, SearchIcon} from "@nextui-org/shared-icons";
 import {useCallback, useMemo, useState} from "react";
-import {capitalize} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {PlusLinearIcon} from "@/components/icons";
 import {VerticalDotsIcon} from "@/components/icons/vertical-dots";
diff --git a/apps/docs/app/feed.xml/route.ts b/apps/docs/app/feed.xml/route.ts
index aa173343fc..c17c764839 100644
--- a/apps/docs/app/feed.xml/route.ts
+++ b/apps/docs/app/feed.xml/route.ts
@@ -1,5 +1,5 @@
 import Rss from "rss";
-import {allBlogPosts} from "contentlayer/generated";
+import {allBlogPosts} from "contentlayer2/generated";
 
 import {siteConfig} from "@/config/site";
 import {allCoreContent} from "@/libs/contentlayer";
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index bc2e47c511..5b40aa2bf6 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -1,6 +1,6 @@
 import "@/styles/globals.css";
 import "@/styles/sandpack.css";
-import {Metadata} from "next";
+import {Metadata, Viewport} from "next";
 import {clsx} from "@nextui-org/shared-utils";
 
 import {Providers} from "./providers";
@@ -8,7 +8,7 @@ import {Providers} from "./providers";
 import {Cmdk} from "@/components/cmdk";
 import manifest from "@/config/routes.json";
 import {siteConfig} from "@/config/site";
-import {fontSans} from "@/config/fonts";
+import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
 import {ProBanner} from "@/components/pro-banner";
@@ -33,10 +33,6 @@ export const metadata: Metadata = {
     "UI Framework",
     "UI Design System",
   ],
-  themeColor: [
-    {media: "(prefers-color-scheme: light)", color: "white"},
-    {media: "(prefers-color-scheme: dark)", color: "black"},
-  ],
   icons: {
     icon: "/favicon.ico",
     shortcut: "/favicon-32x32.png",
@@ -47,26 +43,41 @@ export const metadata: Metadata = {
   openGraph: siteConfig.openGraph,
   authors: [
     {
-      name: "jrgarciadev",
-      url: "https://jrgarciadev.com",
+      name: "getnextui",
+      url: "https://x.com/getnextui",
     },
   ],
-  creator: "jrgarciadev",
+  creator: "getnextui",
   alternates: {
     canonical: "https://nextui.org",
     types: {
       "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}],
     },
   },
-  viewport:
-    "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    {color: "#f4f4f5", media: "(prefers-color-scheme: light)"},
+    {color: "#111111", media: "(prefers-color-scheme: dark)"},
+  ],
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
 };
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
     <html suppressHydrationWarning dir="ltr" lang="en">
       <head />
-      <body className={clsx("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
+        className={clsx(
+          "min-h-screen bg-background font-sans antialiased",
+          fonts.sans.variable,
+          fonts.mono.variable,
+        )}
+      >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
             <ProBanner />
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
index 25b241872d..d14b899a21 100644
--- a/apps/docs/app/page.tsx
+++ b/apps/docs/app/page.tsx
@@ -1,4 +1,5 @@
 import {Spacer} from "@nextui-org/spacer";
+import {Suspense} from "react";
 
 import {Hero} from "@/components/marketing/hero";
 import {FeaturesGrid} from "@/components/marketing/features-grid";
@@ -9,26 +10,12 @@ import {Customization} from "@/components/marketing/customization";
 import {LastButNotLeast} from "@/components/marketing/last-but-not-least";
 import {InstallBanner} from "@/components/marketing/install-banner";
 import {Community} from "@/components/marketing/community";
-import {Support} from "@/components/marketing/support";
+import Support from "@/components/marketing/support";
 import landingContent from "@/content/landing";
-import {getAllSponsors} from "@/utils/get-all-sponsors";
 import {Sponsors} from "@/components/marketing/sponsors";
-
-async function getData() {
-  try {
-    const sponsors = await getAllSponsors();
-
-    return {
-      sponsors,
-    };
-  } catch (error) {
-    throw new Error("Failed to fetch data");
-  }
-}
+import {NextUIProSection} from "@/components/marketing/nextui-pro-section";
 
 export default async function Home() {
-  const data = await getData();
-
   return (
     <main className="container mx-auto max-w-7xl px-6 flex-grow">
       <section className="flex flex-col items-center justify-center">
@@ -39,8 +26,11 @@ export default async function Home() {
         <A11yOtb />
         <DarkMode />
         <Customization />
+        <NextUIProSection />
         <LastButNotLeast />
-        <Support sponsors={data.sponsors} />
+        <Suspense fallback={<div>Loading...</div>}>
+          <Support />
+        </Suspense>
         <Spacer y={24} />
         <InstallBanner />
         <Community />
diff --git a/apps/docs/app/providers.tsx b/apps/docs/app/providers.tsx
index 59bebcc743..6f860a7780 100644
--- a/apps/docs/app/providers.tsx
+++ b/apps/docs/app/providers.tsx
@@ -5,7 +5,7 @@ import type {ReactNode} from "react";
 import * as React from "react";
 import {NextUIProvider} from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
-import {ThemeProviderProps} from "next-themes/dist/types";
+import {ThemeProviderProps} from "next-themes";
 import {useRouter} from "next/navigation";
 import {useEffect} from "react";
 import posthog from "posthog-js";
@@ -23,7 +23,7 @@ export function Providers({children, themeProps}: ProvidersProps) {
 
   const ProviderWrapper = ({children}: {children: ReactNode}) => {
     useEffect(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && __PROD__) {
         posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
           api_host: "/ingest",
           person_profiles: "identified_only",
diff --git a/apps/docs/components/ads/carbon-ad/carbon-ad.tsx b/apps/docs/components/ads/carbon-ad/carbon-ad.tsx
index 34945598cd..e32cf8b94c 100644
--- a/apps/docs/components/ads/carbon-ad/carbon-ad.tsx
+++ b/apps/docs/components/ads/carbon-ad/carbon-ad.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import React, {useCallback, useEffect} from "react";
 import Script from "next/script";
 
diff --git a/apps/docs/components/blog-post.tsx b/apps/docs/components/blog-post.tsx
index 2c723077d6..53d971ce9e 100644
--- a/apps/docs/components/blog-post.tsx
+++ b/apps/docs/components/blog-post.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {BlogPost} from "contentlayer/generated";
+import {BlogPost} from "contentlayer2/generated";
 import {Card, CardFooter, CardBody, CardHeader, Link, Avatar, Image} from "@nextui-org/react";
 import Balancer from "react-wrap-balancer";
 import {format, parseISO} from "date-fns";
@@ -34,6 +34,7 @@ const BlogPostCard = (post: BlogPost) => {
           transition={{duration: 0.3}}
         >
           <Card
+            disableRipple
             isBlurred
             as={NextLink}
             className="p-2 h-full border-transparent text-start bg-white/5 dark:bg-default-400/10 backdrop-blur-lg backdrop-saturate-[1.8]"
diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx
index 7979ddb38b..4458c1b09c 100644
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@@ -13,7 +13,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import {isAppleDevice, isWebKit} from "@react-aria/utils";
 import {create} from "zustand";
-import {intersectionBy, isEmpty} from "lodash";
+import {isEmpty, intersectionBy} from "@nextui-org/shared-utils";
 import {writeStorage, useLocalStorage} from "@rehooks/local-storage";
 import {usePostHog} from "posthog-js/react";
 
diff --git a/apps/docs/components/code-window/code-block.tsx b/apps/docs/components/code-window/code-block.tsx
index a5bf43cbee..ed1f318f84 100644
--- a/apps/docs/components/code-window/code-block.tsx
+++ b/apps/docs/components/code-window/code-block.tsx
@@ -6,7 +6,7 @@ import jsx from "refractor/lang/jsx";
 import bash from "refractor/lang/bash";
 import css from "refractor/lang/css";
 import diff from "refractor/lang/diff";
-import hastToHtml from "hast-util-to-html";
+import {toHtml} from "hast-util-to-html";
 import rangeParser from "parse-numeric-range";
 import {clsx} from "@nextui-org/shared-utils";
 
@@ -137,7 +137,7 @@ const CodeBlock = React.forwardRef<HTMLPreElement, CodeBlockProps>((_props, forw
   result = highlightWord(result);
 
   // convert to html
-  result = hastToHtml(result);
+  result = toHtml(result);
 
   // TODO reset theme
   const classes = `language-${language}`;
diff --git a/apps/docs/components/copy-button.tsx b/apps/docs/components/copy-button.tsx
index 35a652d2eb..72a4b871ff 100644
--- a/apps/docs/components/copy-button.tsx
+++ b/apps/docs/components/copy-button.tsx
@@ -1,6 +1,7 @@
 import {FC} from "react";
 import {Button, ButtonProps} from "@nextui-org/react";
 import {useClipboard} from "@nextui-org/use-clipboard";
+import {clsx} from "@nextui-org/shared-utils";
 
 import {CheckLinearIcon, CopyLinearIcon} from "@/components/icons";
 
@@ -8,7 +9,7 @@ export interface CopyButtonProps extends ButtonProps {
   value?: string;
 }
 
-export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
+export const CopyButton: FC<CopyButtonProps> = ({value, className, ...buttonProps}) => {
   const {copy, copied} = useClipboard();
 
   const handleCopy = () => {
@@ -18,19 +19,22 @@ export const CopyButton: FC<CopyButtonProps> = ({value, ...buttonProps}) => {
   return (
     <Button
       isIconOnly
-      className="absolute z-50 right-3 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg"
+      className={clsx(
+        "absolute z-50 right-3 text-zinc-300 top-8 border-1 border-transparent bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100 before:rounded-lg",
+        className,
+      )}
       size="sm"
       variant="bordered"
       onPress={handleCopy}
       {...buttonProps}
     >
       <CheckLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
         data-visible={copied}
         size={16}
       />
       <CopyLinearIcon
-        className="absolute opacity-0 scale-50 text-zinc-300 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
+        className="absolute opacity-0 scale-50 data-[visible=true]:opacity-100 data-[visible=true]:scale-100 transition-transform-opacity"
         data-visible={!copied}
         size={16}
       />
diff --git a/apps/docs/components/demo-code-modal.tsx b/apps/docs/components/demo-code-modal.tsx
index baf2e1dede..31c9996d91 100644
--- a/apps/docs/components/demo-code-modal.tsx
+++ b/apps/docs/components/demo-code-modal.tsx
@@ -12,7 +12,6 @@ import {
   Skeleton,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {toLower} from "lodash";
 
 import {CodeWindow} from "@/components/code-window";
 import {useIsMobile} from "@/hooks/use-media-query";
@@ -30,8 +29,8 @@ export const DemoCodeModal: FC<DemoCodeModalProps> = ({isOpen, code, title, subt
 
   const isMobile = useIsMobile();
 
-  const lowerTitle = toLower(title);
-  const fileName = `${toLower(lowerTitle)}.tsx`;
+  const lowerTitle = title.toLowerCase();
+  const fileName = `${lowerTitle}.tsx`;
 
   return (
     <Modal
diff --git a/apps/docs/components/demos/music-player.tsx b/apps/docs/components/demos/music-player.tsx
index b48e497c80..06885fc206 100644
--- a/apps/docs/components/demos/music-player.tsx
+++ b/apps/docs/components/demos/music-player.tsx
@@ -27,24 +27,23 @@ export const MusicPlayer: FC<MusicPlayerProps> = ({className, ...otherProps}) =>
       {...otherProps}
     >
       <CardBody>
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+        <div className="md:max-h-[200px] grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
           <div className="relative col-span-6 md:col-span-4">
             <Image
               alt="Album cover"
               as={NextImage}
               className="object-cover"
-              height={300}
+              height={160}
               shadow="md"
               src="/images/album-cover.png"
               width={240}
             />
           </div>
-
           <div className="flex flex-col col-span-6 md:col-span-8">
             <div className="flex justify-between items-start">
               <div className="flex flex-col gap-0">
-                <p className="font-semibold text-foreground/90">Daily Mix</p>
-                <p className="text-sm text-foreground/80">12 Tracks</p>
+                <p className="text-sm font-semibold text-foreground">Daily Mix</p>
+                <p className="text-xs text-foreground/80">12 Tracks</p>
                 <p className="text-lg font-medium mt-2">Frontend Radio</p>
               </div>
               <Button
diff --git a/apps/docs/components/demos/user-twitter-card.tsx b/apps/docs/components/demos/user-twitter-card.tsx
index ea03beec63..5e6f8db1ac 100644
--- a/apps/docs/components/demos/user-twitter-card.tsx
+++ b/apps/docs/components/demos/user-twitter-card.tsx
@@ -1,15 +1,14 @@
 "use client";
 
-import {useState, FC} from "react";
+import {useState} from "react";
 import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react";
 import {clsx} from "@nextui-org/shared-utils";
-import NextImage from "next/image";
 
 interface UserTwitterCardProps {
   className?: string;
 }
 
-export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
+export const UserTwitterCard = ({className}: UserTwitterCardProps) => {
   const [isFollowed, setIsFollowed] = useState(false);
 
   return (
@@ -18,7 +17,6 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => {
         <div className="flex gap-5">
           <Avatar
             isBordered
-            ImgComponent={NextImage}
             alt="Zoey Lang"
             imgProps={{
               width: 40,
diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx
index d79b7d1873..ba44bc3bea 100644
--- a/apps/docs/components/docs/components/code-demo/code-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@@ -109,6 +109,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
       <DynamicReactLiveDemo
         className={className}
         code={code}
+        files={files}
         gradientColor={gradientColor}
         height={previewHeight}
         isCentered={isPreviewCentered}
diff --git a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
index 2023d8aee6..74332d7636 100644
--- a/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/react-live-demo.tsx
@@ -1,15 +1,19 @@
 import React from "react";
 import {LivePreview, LiveProvider, LiveError} from "react-live";
 import {clsx} from "@nextui-org/shared-utils";
-import * as Components from "@nextui-org/react";
+import * as NextUI from "@nextui-org/react";
 import * as intlDateUtils from "@internationalized/date";
 import * as reactAriaI18n from "@react-aria/i18n";
+import * as reactHookFormBase from "react-hook-form";
+import {SandpackFiles} from "@codesandbox/sandpack-react/types";
 
 import {BgGridContainer} from "@/components/bg-grid-container";
 import {GradientBox, GradientBoxProps} from "@/components/gradient-box";
+import {CopyButton} from "@/components/copy-button";
 
 export interface ReactLiveDemoProps {
   code: string;
+  files: SandpackFiles;
   noInline?: boolean;
   height?: string | number;
   isCentered?: boolean;
@@ -19,14 +23,26 @@ export interface ReactLiveDemoProps {
   overflow?: "auto" | "visible" | "hidden";
 }
 
+// 🚨 Do not pass react-hook-form to scope, it will break the live preview since
+// it also has a "Form" component that will override the one from @nextui-org/react
+const reactHookForm = {
+  useForm: reactHookFormBase.useForm,
+  Controller: reactHookFormBase.Controller,
+};
+
 export const scope = {
-  ...Components,
+  React,
+  ...NextUI,
   ...intlDateUtils,
   ...reactAriaI18n,
+  ...reactHookForm,
 } as Record<string, unknown>;
 
+const DEFAULT_FILE = "/App.jsx";
+
 export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
   code,
+  files,
   isGradientBox,
   gradientColor = "orange",
   isCentered = false,
@@ -36,8 +52,16 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
 }) => {
   const content = (
     <>
+      {files?.[DEFAULT_FILE] && (
+        <div className="absolute top-[-28px] right-[-8px] z-50">
+          <CopyButton
+            className="before:hidden opacity-0 group-hover/code-demo:opacity-100 transition-opacity text-zinc-400"
+            value={files?.[DEFAULT_FILE] as string}
+          />
+        </div>
+      )}
       <LivePreview
-        className={clsx("live-preview flex h-full w-full not-prose", {
+        className={clsx("live-preview flex h-full w-full not-prose ", {
           "justify-center items-center": isCentered,
         })}
         style={{height}}
@@ -58,12 +82,12 @@ export const ReactLiveDemo: React.FC<ReactLiveDemoProps> = ({
           color={gradientColor}
           to="top-right"
         >
-          <div className="max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
+          <div className="group/code-demo max-w-full py-4 px-2 w-full h-full scrollbar-hide overflow-x-scroll">
             {content}
           </div>
         </GradientBox>
       ) : (
-        <BgGridContainer className={className}>{content}</BgGridContainer>
+        <BgGridContainer className={clsx(className, "group/code-demo")}>{content}</BgGridContainer>
       )}
     </LiveProvider>
   );
diff --git a/apps/docs/components/docs/components/code-demo/utils.ts b/apps/docs/components/docs/components/code-demo/utils.ts
index f4c6714d5d..49caef306b 100644
--- a/apps/docs/components/docs/components/code-demo/utils.ts
+++ b/apps/docs/components/docs/components/code-demo/utils.ts
@@ -1,17 +1,19 @@
-import {get} from "lodash";
-
 import {FileCode} from "./types";
 
-const importRegex = /^(import)\s(?!type(of\s|\s)(?!from)).*?$/gm;
+const importRegex = /^(import\s+(?!type\s+\{)[\s\S]*?;)/gm;
 
 const exportDefaultRegex = /export\s+default\s+function\s+\w+\s*\(\s*\)\s*\{/;
 
-export const transformCode = (code: string, imports = {}, compName = "App") => {
+export const transformCode = (
+  code: string,
+  imports: {[key: string]: any} = {},
+  compName = "App",
+) => {
   let cleanedCode = code
     .replace(importRegex, (match) => {
       // get component name from the match ex. "import { Table } from '@nextui-org/react'"
       const componentName = match.match(/\w+/g)?.[1] || "";
-      const matchingImport = get(imports, componentName);
+      const matchingImport = imports[componentName];
 
       if (matchingImport) {
         // remove the matching import
@@ -29,7 +31,7 @@ export const transformCode = (code: string, imports = {}, compName = "App") => {
       // replace match with const Name = () => (
       return `const ${compName} = () => {`;
     })
-    .replace("export", "");
+    .replace(/export/g, "");
 
   // add render(<App/>) to cleanedCode if has const App = () => {
   if (cleanedCode.includes(`const App = () => {`)) {
diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx
index 8d4f61cbf1..0bab53d08e 100644
--- a/apps/docs/components/docs/components/codeblock.tsx
+++ b/apps/docs/components/docs/components/codeblock.tsx
@@ -1,7 +1,13 @@
+"use client";
+
+import type {Language, PrismTheme} from "prism-react-renderer";
+
+import {useIntersectionObserver} from "usehooks-ts";
 import React, {forwardRef, useEffect} from "react";
 import {clsx, dataAttr, getUniqueID} from "@nextui-org/shared-utils";
-import BaseHighlight, {Language, PrismTheme, defaultProps} from "prism-react-renderer";
-import {debounce, omit} from "lodash";
+import BaseHighlight, {defaultProps} from "prism-react-renderer";
+import {debounce, omit} from "@nextui-org/shared-utils";
+import {cn} from "@nextui-org/react";
 
 import defaultTheme from "@/libs/prism-theme";
 
@@ -55,6 +61,149 @@ const calculateLinesToHighlight = (meta?: string) => {
   };
 };
 
+const calculateHeight = (codeString: string) => {
+  const lines = codeString.split("\n").length;
+
+  return lines * 24;
+};
+
+const CodeBlockHighlight = ({
+  codeString,
+  language,
+  codeLang,
+  theme,
+  showLines,
+  removeIndent,
+  hideScrollBar,
+  preRef,
+  isMultiLine,
+  shouldHighlightLine,
+  highlightStyle,
+  className: classNameProp,
+  ...props
+}: CodeblockProps & {
+  codeLang: Language;
+  isMultiLine: boolean;
+  shouldHighlightLine: (index: number) => boolean;
+  highlightStyle: HighlightStyle[];
+  preRef: React.Ref<HTMLElement>;
+}) => {
+  const height = calculateHeight(codeString);
+
+  const [intersectionRef, isVisible] = useIntersectionObserver({
+    threshold: 0,
+  });
+
+  return (
+    <div
+      ref={intersectionRef}
+      style={{
+        height: isVisible ? "auto" : `${height}px`,
+      }}
+    >
+      {isVisible ? (
+        <BaseHighlight
+          {...defaultProps}
+          code={codeString}
+          language={codeLang}
+          theme={theme}
+          {...props}
+        >
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
+            <pre
+              ref={(element) => {
+                // Merge the refs
+                if (typeof preRef === "function") {
+                  preRef(element);
+                } else if (preRef) {
+                  // @ts-ignore
+                  preRef.current = element;
+                }
+              }}
+              className={clsx(
+                className,
+                classNameProp,
+                `language-${codeLang}`,
+                "max-w-full contents",
+                {
+                  "flex-col": isMultiLine,
+                  "overflow-x-scroll scrollbar-hide": hideScrollBar,
+                },
+              )}
+              data-language={language}
+              style={style}
+            >
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({line, key: i});
+
+                return (
+                  <div
+                    {...omit(lineProps, ["key"])}
+                    key={`${i}-${getUniqueID("line-wrapper")}`}
+                    className={clsx(
+                      lineProps.className,
+                      removeIndent ? "pr-4" : "px-4",
+                      "relative [&>span]:relative [&>span]:z-10",
+                      {
+                        "px-2": showLines,
+                      },
+                      {
+                        "before:to-code-background before:absolute before:left-0 before:z-0 before:h-full before:w-full before:bg-gradient-to-r before:from-white/10 before:content-[''] before:pointer-events-none":
+                          shouldHighlightLine(i),
+                      },
+                    )}
+                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
+                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
+                  >
+                    {showLines && (
+                      <span
+                        className={cn(
+                          "mr-6 select-none text-xs opacity-30",
+                          i + 1 >= 10 ? "mr-4" : "",
+                          i + 1 >= 100 ? "mr-2" : "",
+                          i + 1 >= 1000 ? "mr-0" : "",
+                        )}
+                      >
+                        {i + 1}
+                      </span>
+                    )}
+
+                    {line.map((token, key) => {
+                      const props = getTokenProps({token, key}) || {};
+
+                      return (
+                        <span
+                          {...omit(props, ["key"])}
+                          key={`${key}-${getUniqueID("line")}`}
+                          className={className}
+                          style={{
+                            ...props.style,
+                            ...(highlightStyleToken.some((t) => {
+                              const content = token.content.trim();
+
+                              const regex = t instanceof RegExp ? t : new RegExp(t);
+
+                              return regex.test(content);
+                            })
+                              ? {color: "rgb(var(--code-function))"}
+                              : {}),
+                          }}
+                        />
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+          )}
+        </BaseHighlight>
+      ) : (
+        <div className={clsx(classNameProp, "w-full bg-code-background rounded-lg")} />
+      )}
+    </div>
+  );
+};
+
 const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
   (
     {
@@ -134,79 +283,21 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
     }, []);
 
     return (
-      <BaseHighlight
-        {...defaultProps}
-        code={codeString}
-        language={codeLang}
+      <CodeBlockHighlight
+        className={classNameProp}
+        codeLang={codeLang}
+        codeString={codeString}
+        hideScrollBar={hideScrollBar}
+        highlightStyle={highlightStyle}
+        isMultiLine={isMultiLine}
+        language={language}
+        preRef={ref}
+        removeIndent={removeIndent}
+        shouldHighlightLine={shouldHighlightLine}
+        showLines={showLines}
         theme={theme}
         {...props}
-      >
-        {({className, style, tokens, getLineProps, getTokenProps}) => (
-          <div className="w-full" data-language={language}>
-            <pre
-              ref={ref}
-              className={clsx(className, classNameProp, "flex max-w-full", {
-                "flex-col": isMultiLine,
-                "scrollbar-hide overflow-x-scroll": hideScrollBar,
-              })}
-              style={style}
-            >
-              {tokens.map((line, i) => {
-                const lineProps = getLineProps({line, key: i});
-
-                return (
-                  <div
-                    {...omit(lineProps, ["key"])}
-                    key={`${i}-${getUniqueID("line-wrapper")}`}
-                    className={clsx(
-                      lineProps.className,
-                      removeIndent ? "pr-4" : "px-4",
-                      "relative [&>span]:relative [&>span]:z-10",
-                      {
-                        "px-2": showLines,
-                      },
-                      {
-                        "before:content-[''] before:w-full before:h-full before:absolute before:z-0 before:left-0 before:bg-gradient-to-r before:from-white/10 before:to-code-background":
-                          shouldHighlightLine(i),
-                      },
-                    )}
-                    data-deleted={dataAttr(highlightStyle?.[i] === "deleted")}
-                    data-inserted={dataAttr(highlightStyle?.[i] === "inserted")}
-                  >
-                    {showLines && (
-                      <span className="select-none text-xs mr-6 opacity-30">{i + 1}</span>
-                    )}
-                    {line.map((token, key) => {
-                      // Bun has no color style by default in the code block, so hack add in here
-                      const props = getTokenProps({token, key}) || {};
-
-                      return (
-                        <span
-                          {...omit(props, ["key"])}
-                          key={`${key}-${getUniqueID("line")}`}
-                          className={className}
-                          style={{
-                            ...props.style,
-                            ...(highlightStyleToken.some((t) => {
-                              const content = token.content.trim();
-
-                              const regex = t instanceof RegExp ? t : new RegExp(t);
-
-                              return regex.test(content);
-                            })
-                              ? {color: "rgb(var(--code-function))"}
-                              : {}),
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </pre>
-          </div>
-        )}
-      </BaseHighlight>
+      />
     );
   },
 );
diff --git a/apps/docs/components/docs/components/helper.ts b/apps/docs/components/docs/components/helper.ts
new file mode 100644
index 0000000000..862e39a490
--- /dev/null
+++ b/apps/docs/components/docs/components/helper.ts
@@ -0,0 +1,209 @@
+import type Highlight from "prism-react-renderer";
+
+export type TransformTokens = Parameters<Highlight["props"]["children"]>[0]["tokens"];
+
+export type TransformTokensTypes = TransformTokens[0][0] & {
+  folderContent?: TransformTokens;
+  summaryContent?: TransformTokens[0];
+  class?: string;
+  index?: number;
+  open?: boolean;
+};
+
+const startFlag = ["{", "["];
+const endFlag = ["}", "]"];
+const isElementStartRegex = /^\s*</;
+const isElementEndRegex = /^\s*<\//;
+
+/**
+ * Transform tokens from `prism-react-renderer` to wrap them in folder structure
+ *
+ * @example
+ * transformTokens(tokens) -> wrap tokens in folder structure
+ */
+export function transformTokens(tokens: TransformTokens, folderLine = 10) {
+  const result: TransformTokens = [];
+  let lastIndex = 0;
+  let startElementName = "";
+
+  tokens.forEach((token, index) => {
+    if (index < lastIndex) {
+      return;
+    }
+    token.forEach((t) => {
+      (t as TransformTokensTypes).index = index;
+    });
+    result.push(token);
+
+    const lineContent = getLineContent(token);
+    const {isStartTag, isEndTag} = checkIsElement(lineContent);
+
+    // If it has startElementName means it is within the element range
+    if (startElementName) {
+      if (isEndTag) {
+        // Judge whether it is the end tag of the element then reset startElementName
+        const {endElementName} = getElementName(lineContent);
+
+        if (endElementName === startElementName) {
+          startElementName = "";
+        }
+      }
+
+      return;
+    } else if (isStartTag) {
+      const {startElementName: elementName, endElementName} = getElementName(lineContent);
+
+      if (!endElementName) {
+        startElementName = elementName;
+
+        return;
+      }
+    }
+
+    let startToken: TransformTokens[0][0] = null as any;
+
+    token.forEach((t) => {
+      if (startFlag.includes(t.content)) {
+        startToken = t;
+      }
+    });
+
+    const isFolder = checkIsFolder(token);
+
+    if (isFolder && startToken) {
+      const nextLineContent = tokens.slice(index + 1, index + 2).reduce((acc, line) => {
+        return acc + getLineContent(line);
+      }, "");
+      const isNextLineObjectFolder = checkIsObjectContent(nextLineContent);
+      const isArrayFolder = lineContent.trim().endsWith("[");
+
+      if (isNextLineObjectFolder || isArrayFolder) {
+        const endIndex = findEndIndex(tokens, index + 1);
+
+        // Greater than or equal to folderLine then will folder otherwise it will show directly
+        if (endIndex !== -1 && endIndex - index >= folderLine) {
+          lastIndex = endIndex;
+          const folder = tokens.slice(index + 1, endIndex);
+          const endToken = tokens[endIndex];
+
+          (endToken[0] as TransformTokensTypes).class = "first-custom-folder";
+
+          const ellipsisToken: TransformTokensTypes = {
+            types: ["ellipsis"],
+            content: "",
+            class: "custom-folder ellipsis-token",
+          };
+          const copyContent: TransformTokensTypes = {
+            types: ["copy"],
+            content: "",
+            folderContent: folder,
+            class: "custom-folder copy-token",
+          };
+
+          endToken.forEach((t, _, arr) => {
+            let className = (t as TransformTokensTypes).class || "";
+
+            className += " custom-folder";
+            if (t.content.trim() === "" && (arr.length === 3 || arr.length === 4)) {
+              // Add length check to sure it's added to } token
+              className += " empty-token";
+            }
+            (t as TransformTokensTypes).class = className;
+          });
+
+          startToken.types = ["folderStart"];
+          (startToken as TransformTokensTypes).folderContent = folder;
+          (startToken as TransformTokensTypes).summaryContent = [
+            ...token,
+            ellipsisToken,
+            copyContent,
+            ...endToken,
+          ];
+          (startToken as TransformTokensTypes).index = index;
+          // isShowFolder && ((startToken as TransformTokensTypes).open = true);
+
+          result.splice(result.length - 1, 1, [startToken]);
+
+          return;
+        }
+      }
+    }
+  });
+
+  return result;
+}
+
+function checkIsFolder(token: TransformTokens[0]) {
+  const stack: string[] = [];
+
+  for (const t of token) {
+    if (startFlag.includes(t.content)) {
+      stack.push(t.content);
+    } else if (endFlag.includes(t.content)) {
+      stack.pop();
+    }
+  }
+
+  return stack.length !== 0;
+}
+
+function findEndIndex(tokens: TransformTokens, startIndex: number) {
+  const stack: string[] = ["flag"];
+
+  for (let i = startIndex; i < tokens.length; i++) {
+    const token = tokens[i];
+
+    for (const line of token) {
+      const transformLine = line.content.replace(/\$/g, "");
+
+      if (startFlag.includes(transformLine)) {
+        stack.push("flag");
+      } else if (endFlag.includes(transformLine)) {
+        stack.pop();
+      }
+
+      if (stack.length === 0) {
+        return i;
+      }
+    }
+  }
+
+  return -1;
+}
+
+function checkIsElement(lineContent: string) {
+  return {
+    isStartTag: isElementStartRegex.test(lineContent),
+    isEndTag: isElementEndRegex.test(lineContent),
+  };
+}
+
+function getElementName(lineContent: string) {
+  const startElementName = lineContent.match(/^\s*<([a-zA-Z.]+)/);
+  const endElementName = lineContent.match(/^\s*<\/([a-zA-Z.]+)>/);
+
+  return {
+    startElementName: startElementName?.[1] || (lineContent.includes("<>") ? "<>" : ""),
+    endElementName: endElementName?.[1] || (lineContent.includes("</>") ? "</>" : ""),
+  };
+}
+
+function getLineContent(token: TransformTokens[0]) {
+  return token.reduce((acc, t) => acc + t.content, "");
+}
+
+function checkIsObjectContent(lineContent: string) {
+  lineContent = lineContent.trim();
+  // first: match { a }
+  // second: match { a: b }
+  // third: match { a (b) }
+  // fourth: match /** */
+  const isObjectContent = /^([\w]+,?$)|([\w\[.\]]+:)|([\w]+\s?\(.*?\)$)|(^\/\*\*)/.test(
+    lineContent,
+  );
+  const hasEqual = /\s=\s/.test(lineContent);
+  const hasFunction = lineContent.includes("function");
+  const hasVariable = /var|let|const/.test(lineContent);
+
+  return isObjectContent && !hasEqual && !hasFunction && !hasVariable;
+}
diff --git a/apps/docs/components/docs/components/package-managers.tsx b/apps/docs/components/docs/components/package-managers.tsx
index d071e37db4..1ec49c1219 100644
--- a/apps/docs/components/docs/components/package-managers.tsx
+++ b/apps/docs/components/docs/components/package-managers.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import {Tabs, Tab, Snippet, Code} from "@nextui-org/react";
 import {Key, useState} from "react";
 
@@ -97,9 +99,10 @@ export const PackageManagers = ({
         })}
       </Tabs>
       {showGlobalInstallWarning && (
-        <Blockquote className="my-2" color="warning">
+        <Blockquote className="my-2 text-small" color="warning">
           The above command is for individual installation only. You may skip this step if{" "}
-          <Code>@nextui-org/react</Code> is already installed globally.
+          <Code className="px-1 py-0.5 text-tiny font-mono">@nextui-org/react</Code> is already
+          installed globally.
         </Blockquote>
       )}
     </>
diff --git a/apps/docs/components/docs/components/swatch-colors-set.tsx b/apps/docs/components/docs/components/swatch-colors-set.tsx
index 319e9e72e0..1e8eaeefb2 100644
--- a/apps/docs/components/docs/components/swatch-colors-set.tsx
+++ b/apps/docs/components/docs/components/swatch-colors-set.tsx
@@ -4,7 +4,7 @@ import {commonColors, semanticColors} from "@nextui-org/theme";
 import {useClipboard} from "@nextui-org/use-clipboard";
 import {useState} from "react";
 import {useTheme} from "next-themes";
-import {get, isEmpty} from "lodash";
+import {get, isEmpty} from "@nextui-org/shared-utils";
 
 type ColorsItem = {
   color: string;
@@ -106,7 +106,7 @@ const SemanticSwatch = ({
   let value: string = "";
   const [colorName, colorScale] = color.split("-");
 
-  let currentPalette = get(semanticColors, theme ?? "", {});
+  const currentPalette = get(semanticColors, theme ?? "", {});
 
   if (!colorScale) {
     value = get(currentPalette, `${colorName}.DEFAULT`, "");
diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx
index cf5a8fee72..1c95666be8 100644
--- a/apps/docs/components/docs/sidebar.tsx
+++ b/apps/docs/components/docs/sidebar.tsx
@@ -19,7 +19,7 @@ import {
   dataFocusVisibleClasses,
 } from "@nextui-org/react";
 import Link from "next/link";
-import {isEmpty} from "lodash";
+import {isEmpty} from "@nextui-org/shared-utils";
 import {usePathname, useRouter} from "next/navigation";
 
 import {ScrollArea} from "../scroll-area";
@@ -28,10 +28,6 @@ import {getRoutePaths} from "./utils";
 
 import {Route} from "@/libs/docs/page";
 import {TreeKeyboardDelegate} from "@/utils/tree-keyboard-delegate";
-import {FbFeedbackButton} from "@/components/featurebase/fb-feedback-button";
-import {FbChangelogButton} from "@/components/featurebase/fb-changelog-button";
-import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
-import {openFeedbackWidget} from "@/utils/featurebase";
 import emitter from "@/libs/emitter";
 
 export interface Props<T> extends Omit<ItemProps<T>, "title">, Route {
@@ -121,28 +117,11 @@ function TreeItem<T>(props: TreeItemProps<T>) {
 
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
 
-  const renderFeaturebaseComponent = (key: string) => {
-    if (key === "roadmap")
-      return <FbRoadmapLink className={cn} innerClassName="opacity-80 dark:opacity-60" />;
-    if (key === "changelog")
-      return (
-        <NextUILink as={Link} className={cn} color="foreground" href="#">
-          <FbChangelogButton />
-        </NextUILink>
-      );
-
-    return (
-      <NextUILink as={Link} className={cn} color="foreground" href="#" onClick={openFeedbackWidget}>
-        <FbFeedbackButton />
-      </NextUILink>
-    );
-  };
-
   const renderComponent = () => {
     if (hasChildNodes) {
       return (
         <span className="flex items-center gap-3">
-          <span>{rendered}</span>
+          <span className="font-medium sm:text-sm">{rendered}</span>
           <ChevronIcon
             className={clsx("transition-transform", {
               "-rotate-90": isExpanded,
@@ -152,14 +131,18 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       );
     }
 
-    if (typeof key === "string" && ["changelog", "feedback", "roadmap"].includes(key)) {
-      return renderFeaturebaseComponent(key);
-    }
-
     return (
-      <NextUILink as={Link} className={clsx(cn)} color="foreground" href={paths.pathname}>
+      <NextUILink
+        as={item.props?.comingSoon ? "div" : Link}
+        className={clsx(cn, {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        color="foreground"
+        href={item.props?.comingSoon ? "#" : paths.pathname}
+      >
         <span
           className={clsx(
+            "sm:text-sm",
             isSelected
               ? "text-primary font-medium dark:text-foreground"
               : "opacity-80 dark:opacity-60",
@@ -172,7 +155,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
         </span>
         {isUpdated && (
           <Chip
-            className="ml-1 py-1 text-tiny text-default-400 bg-default-100/50"
+            className="ml-1 py-1 font-medium text-tiny text-default-500 dark:text-default-400 bg-default-100 dark:bg-default-100/50"
             color="default"
             size="sm"
             variant="flat"
@@ -181,12 +164,22 @@ function TreeItem<T>(props: TreeItemProps<T>) {
           </Chip>
         )}
         {isNew && (
-          <Chip className="ml-1 py-1 text-tiny" color="primary" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="primary"
+            size="sm"
+            variant="flat"
+          >
             New
           </Chip>
         )}
         {item.props?.comingSoon && (
-          <Chip className="ml-1 py-1 text-tiny" color="default" size="sm" variant="flat">
+          <Chip
+            className="font-medium ml-1 py-1 text-tiny"
+            color="secondary"
+            size="sm"
+            variant="flat"
+          >
             Coming soon
           </Chip>
         )}
@@ -201,8 +194,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col gap-3outline-none w-full tap-highlight-transparent",
-
+        "flex flex-col outline-none w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
@@ -211,7 +203,12 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       data-focused={isFocused}
       role="treeitem"
     >
-      <div className="flex items-center gap-3 cursor-pointer" {...pressProps}>
+      <div
+        className={clsx("flex items-center gap-3 cursor-pointer", {
+          "pointer-events-none": item.props?.comingSoon,
+        })}
+        {...(item.props?.comingSoon ? {} : pressProps)}
+      >
         <Spacer x={spaceLeft} />
         {renderComponent()}
         {/* Workaround to avoid scrollbar overlapping */}
@@ -261,7 +258,7 @@ function Tree<T extends object>(props: CollectionBase<T> & Expandable & Multiple
   return (
     <ScrollArea
       ref={ref}
-      className="h-full lg:max-h-[calc(100vh_-_64px)]"
+      className="h-full max-w-[90%] lg:max-h-[calc(100vh_-_64px)]"
       role="tree"
       {...collectionProps}
     >
diff --git a/apps/docs/components/docs/toc.tsx b/apps/docs/components/docs/toc.tsx
index 00b4544f12..456e94d753 100644
--- a/apps/docs/components/docs/toc.tsx
+++ b/apps/docs/components/docs/toc.tsx
@@ -19,7 +19,7 @@ const paddingLeftByLevel: Record<number, string> = {
   1: "pl-0",
   2: "pl-0",
   3: "pl-3",
-  4: "pl-3",
+  4: "pl-6",
 };
 
 export const DocsToc: FC<DocsTocProps> = ({headings}) => {
@@ -77,7 +77,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
         }, transparent 100%)`,
       }}
     >
-      <p className="text-sm">On this page</p>
+      <p className="text-sm font-medium">On this page</p>
       <ul className="scrollbar-hide flex flex-col gap-2">
         {headings.map(
           (heading, i) =>
@@ -115,7 +115,7 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
           <Divider />
           <Spacer y={2} />
           <a
-            className="flex gap-2 items-center text-sm text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
+            className="flex gap-2 items-center text-small text-default-500 dark:text-foreground/30 hover:text-foreground/80 pl-4 transition-opacity"
             href={`#${firstId}`}
           >
             Back to top
diff --git a/apps/docs/components/featurebase/fb-changelog-button.tsx b/apps/docs/components/featurebase/fb-changelog-button.tsx
deleted file mode 100644
index 6552cb2cc1..0000000000
--- a/apps/docs/components/featurebase/fb-changelog-button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import {useEffect} from "react";
-import {usePostHog} from "posthog-js/react";
-
-type Props = {
-  className?: string;
-};
-
-// ref: https://developers.featurebase.app/install/changelog-widget/install
-export const FbChangelogButton = ({className}: Props) => {
-  const posthog = usePostHog();
-
-  useEffect(() => {
-    const win = window as any;
-
-    if (typeof win.Featurebase !== "function") {
-      win.Featurebase = function () {
-        // eslint-disable-next-line prefer-rest-params
-        (win.Featurebase.q = win.Featurebase.q || []).push(arguments);
-      };
-    }
-    win.Featurebase("initialize_changelog_widget", {
-      organization: process.env.NEXT_PUBLIC_FB_FEEDBACK_ORG,
-      theme: "dark",
-      usersName: "",
-      fullscreenPopup: true,
-      alwaysShow: true,
-    });
-  }, []);
-
-  const fbButtonOnClick = () => {
-    (window as any).Featurebase("manually_open_changelog_popup");
-
-    posthog.capture("Featurebase - Changelog", {
-      name: "featurebase-changelog",
-      action: "press",
-      category: "featurebase",
-    });
-  };
-
-  return (
-    <button className={className} onClick={fbButtonOnClick}>
-      Changelog <span id="fb-update-badge" />
-    </button>
-  );
-};
diff --git a/apps/docs/components/featurebase/fb-feedback-button.tsx b/apps/docs/components/featurebase/fb-feedback-button.tsx
deleted file mode 100644
index bdf2831690..0000000000
--- a/apps/docs/components/featurebase/fb-feedback-button.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import {useEffect} from "react";
-import {usePostHog} from "posthog-js/react";
-
-type Props = {
-  className?: string;
-};
-
-// ref: https://developers.featurebase.app/install/feedback-widget/setup
-export const FbFeedbackButton = ({className}: Props) => {
-  const posthog = usePostHog();
-
-  useEffect(() => {
-    const win = window as any;
-
-    if (typeof win.Featurebase !== "function") {
-      win.Featurebase = function () {
-        // eslint-disable-next-line prefer-rest-params
-        (win.Featurebase.q = win.Featurebase.q || []).push(arguments);
-      };
-    }
-    win.Featurebase("initialize_feedback_widget", {
-      organization: process.env.NEXT_PUBLIC_FB_FEEDBACK_ORG,
-      theme: "dark",
-      email: "",
-    });
-  }, []);
-
-  const fbButtonOnClick = () => {
-    posthog.capture("Featurebase - Feedback", {
-      name: "featurebase-feedback",
-      action: "press",
-      category: "featurebase",
-    });
-  };
-
-  return (
-    <button data-featurebase-feedback className={className} onClick={fbButtonOnClick}>
-      Feedback
-    </button>
-  );
-};
diff --git a/apps/docs/components/footer.tsx b/apps/docs/components/footer.tsx
index 35cdc519bd..6b5e9b6300 100644
--- a/apps/docs/components/footer.tsx
+++ b/apps/docs/components/footer.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import {usePathname} from "next/navigation";
+import {Link} from "@nextui-org/react";
 
 import {getCurrentYear} from "@/utils/time";
+import {XIcon, GithubIcon, DiscordIcon} from "@/components/icons";
+import {siteConfig} from "@/config/site";
 
 export const Footer = () => {
   const pathname = usePathname();
@@ -11,12 +14,45 @@ export const Footer = () => {
     return null;
   }
 
+  const isDocs = pathname.includes("/docs");
+
   return (
     <footer className="container mx-auto max-w-7xl pb-12 px-12">
       <div className="flex flex-col justify-center items-center gap-1">
         <p className="text-sm text-default-400">
           © {getCurrentYear()} NextUI Inc. All rights reserved.
         </p>
+        {isDocs ? (
+          <div className="flex items-center gap-1">
+            <Link
+              isExternal
+              aria-label="Discord"
+              className="p-1"
+              href={siteConfig.links.discord}
+              rel="noopener noreferrer"
+            >
+              <DiscordIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+            <Link
+              isExternal
+              aria-label="X"
+              className="p-1"
+              href={siteConfig.links.twitter}
+              rel="noopener noreferrer"
+            >
+              <XIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+            <Link
+              isExternal
+              aria-label="Github"
+              className="p-1"
+              href={siteConfig.links.github}
+              rel="noopener noreferrer"
+            >
+              <GithubIcon className="text-default-600 dark:text-default-500" />
+            </Link>
+          </div>
+        ) : null}
       </div>
     </footer>
   );
diff --git a/apps/docs/components/icons/info-circle.tsx b/apps/docs/components/icons/info-circle.tsx
new file mode 100644
index 0000000000..c4346917d3
--- /dev/null
+++ b/apps/docs/components/icons/info-circle.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+export const InfoCircle = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}: {
+  size?: number;
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}) => (
+  <svg
+    fill="none"
+    height={size || height}
+    viewBox="0 0 24 24"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path d="M12 17V11" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
+    <path
+      d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/apps/docs/components/icons/moon.tsx b/apps/docs/components/icons/moon.tsx
index b2ea9d37de..5e0c7a80ca 100644
--- a/apps/docs/components/icons/moon.tsx
+++ b/apps/docs/components/icons/moon.tsx
@@ -11,7 +11,7 @@ export const MoonIcon = ({size = 24, width, height, ...props}: IconSvgProps) =>
     {...props}
   >
     <path
-      d="M20.742,13.045c-0.677,0.18-1.376,0.271-2.077,0.271c-2.135,0-4.14-0.83-5.646-2.336c-2.008-2.008-2.799-4.967-2.064-7.723 c0.092-0.345-0.007-0.713-0.259-0.965C10.444,2.04,10.077,1.938,9.73,2.034C8.028,2.489,6.476,3.382,5.241,4.616 c-3.898,3.898-3.898,10.243,0,14.143c1.889,1.889,4.401,2.93,7.072,2.93c2.671,0,5.182-1.04,7.07-2.929 c1.236-1.237,2.13-2.791,2.583-4.491c0.092-0.345-0.008-0.713-0.26-0.965C21.454,13.051,21.085,12.951,20.742,13.045z M17.97,17.346c-1.511,1.511-3.52,2.343-5.656,2.343c-2.137,0-4.146-0.833-5.658-2.344c-3.118-3.119-3.118-8.195,0-11.314 c0.602-0.602,1.298-1.102,2.06-1.483c-0.222,2.885,0.814,5.772,2.89,7.848c2.068,2.069,4.927,3.12,7.848,2.891 C19.072,16.046,18.571,16.743,17.97,17.346z"
+      d="M21.25 12C21.25 14.4533 20.2754 16.806 18.5407 18.5407C16.806 20.2754 14.4533 21.25 12 21.25V22.75C17.937 22.75 22.75 17.937 22.75 12H21.25ZM12 21.25C9.54675 21.25 7.19397 20.2754 5.45926 18.5407C3.72455 16.806 2.75 14.4533 2.75 12H1.25C1.25 17.937 6.063 22.75 12 22.75V21.25ZM2.75 12C2.75 9.54675 3.72455 7.19397 5.45926 5.45926C7.19397 3.72455 9.54675 2.75 12 2.75V1.25C6.063 1.25 1.25 6.063 1.25 12H2.75ZM15.5 14.25C13.975 14.25 12.5125 13.6442 11.4341 12.5659C10.3558 11.4875 9.75 10.025 9.75 8.5H8.25C8.25 10.4228 9.01384 12.2669 10.3735 13.6265C11.7331 14.9862 13.5772 15.75 15.5 15.75V14.25ZM20.425 11.469C19.9133 12.3176 19.191 13.0197 18.3281 13.5069C17.4652 13.9942 16.491 14.2501 15.5 14.25V15.75C16.7494 15.7504 17.9777 15.4279 19.0657 14.8138C20.1537 14.1997 21.0646 13.3148 21.71 12.245L20.425 11.469ZM9.75 8.5C9.74986 7.50903 10.0058 6.53483 10.4931 5.67193C10.9803 4.80902 11.6824 4.08669 12.531 3.575L11.755 2.291C10.6854 2.93628 9.80058 3.84701 9.18649 4.93486C8.57239 6.02271 8.2498 7.25078 8.25 8.5H9.75ZM12 2.75C11.9497 2.74903 11.9002 2.73811 11.8542 2.71785C11.8082 2.6976 11.7666 2.66842 11.732 2.632C11.6898 2.58965 11.6613 2.53568 11.65 2.477C11.646 2.446 11.648 2.356 11.755 2.291L12.531 3.575C13.034 3.271 13.196 2.714 13.137 2.276C13.075 1.821 12.717 1.25 12 1.25V2.75ZM21.71 12.245C21.644 12.352 21.554 12.354 21.523 12.35C21.4643 12.3387 21.4103 12.3102 21.368 12.268C21.3316 12.2334 21.3024 12.1918 21.2821 12.1458C21.2619 12.0998 21.251 12.0503 21.25 12H22.75C22.75 11.283 22.179 10.925 21.724 10.863C21.286 10.804 20.729 10.966 20.425 11.469L21.71 12.245Z"
       fill="currentColor"
     />
   </svg>
diff --git a/apps/docs/components/icons/social.tsx b/apps/docs/components/icons/social.tsx
index eaad88f6d8..744420efa4 100644
--- a/apps/docs/components/icons/social.tsx
+++ b/apps/docs/components/icons/social.tsx
@@ -58,11 +58,11 @@ const DiscordIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props
   );
 };
 
-const TwitterIcon: React.FC<IconSvgProps> = ({size = 24, width, height, ...props}) => {
+const XIcon: React.FC<IconSvgProps> = ({size = 20, width, height, ...props}) => {
   return (
     <svg height={size || height} viewBox="0 0 24 24" width={size || width} {...props}>
       <path
-        d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z"
+        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
         fill="currentColor"
       />
     </svg>
@@ -454,7 +454,7 @@ const TypescriptIcon: React.FC<IconSvgProps> = ({width = "1em", height = "1em",
 };
 
 export {
-  TwitterIcon,
+  XIcon,
   DiscordIcon,
   GithubIcon,
   OpenCollectiveIcon,
diff --git a/apps/docs/components/icons/sun.tsx b/apps/docs/components/icons/sun.tsx
index 886aa13441..f1d7446c6b 100644
--- a/apps/docs/components/icons/sun.tsx
+++ b/apps/docs/components/icons/sun.tsx
@@ -16,3 +16,29 @@ export const SunFilledIcon = ({size = 24, width, height, ...props}: IconSvgProps
     </g>
   </svg>
 );
+
+export const SunLinearIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
+  <svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height={size || height}
+    role="presentation"
+    viewBox="0 0 24 24"
+    width={size || width}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M12 2V4M12 20V22M4 12H2M22 12H20M19.778 4.223L17.556 6.254M4.222 4.223L6.444 6.254M6.444 17.556L4.222 19.778M19.778 19.777L17.556 17.555"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
diff --git a/apps/docs/components/marketing/custom-themes/custom-themes.tsx b/apps/docs/components/marketing/custom-themes/custom-themes.tsx
index ecb1f2cf23..9046ca8e29 100644
--- a/apps/docs/components/marketing/custom-themes/custom-themes.tsx
+++ b/apps/docs/components/marketing/custom-themes/custom-themes.tsx
@@ -3,7 +3,6 @@
 /* eslint-disable react/display-name */
 import {useMemo, useState} from "react";
 import {Tabs, Tab, Card, CardBody, Image, Button, RadioGroup, Radio} from "@nextui-org/react";
-import get from "lodash/get";
 import NextLink from "next/link";
 import NextImage from "next/image";
 
@@ -238,7 +237,7 @@ export const CustomThemes = () => {
           <CodeWindow
             showWindowIcons
             className="max-h-[440px] min-h-[390px]"
-            highlightLines={get(codeHighlights, selectedTheme)}
+            highlightLines={codeHighlights[selectedTheme]}
             isScrollable={false}
             language="jsx"
             title="tailwind.config.js"
diff --git a/apps/docs/components/marketing/features-grid.tsx b/apps/docs/components/marketing/features-grid.tsx
index 19f4902e39..48ce47b60e 100644
--- a/apps/docs/components/marketing/features-grid.tsx
+++ b/apps/docs/components/marketing/features-grid.tsx
@@ -16,7 +16,7 @@ const styles = tv({
     iconWrapper:
       "flex justify-center p-2 rounded-full items-center bg-secondary-100/80 text-pink-500",
     title: "text-base font-semibold",
-    description: "font-normal text-base text-default-500",
+    description: "font-normal text-medium text-default-500",
   },
 });
 
@@ -73,7 +73,7 @@ export const FeaturesGrid: React.FC<FeaturesGridProps> = ({features, classNames,
           <CardHeader className={slots.header({class: classNames?.header})}>
             <div className={slots.iconWrapper({class: classNames?.iconWrapper})}>{feat.icon}</div>
             <p className={slots.title({class: classNames?.title})}>{feat.title}</p>
-            {feat.isExternal && <LinkIcon className="text-white" height={18} width={18} />}
+            {feat.isExternal && <LinkIcon height={18} width={18} />}
           </CardHeader>
           {feat.description ? (
             <CardBody className={slots.body({class: classNames?.body})}>
diff --git a/apps/docs/components/marketing/hero/floating-components.tsx b/apps/docs/components/marketing/hero/floating-components.tsx
index ef7baec19f..30a25be1e2 100644
--- a/apps/docs/components/marketing/hero/floating-components.tsx
+++ b/apps/docs/components/marketing/hero/floating-components.tsx
@@ -107,7 +107,7 @@ export const FloatingComponents: React.FC<{}> = () => {
           <Tooltip
             className="text-sm animate-[levitate_14s_ease_infinite]"
             color="secondary"
-            content="Developers love Next.js"
+            content="Build beautiful apps faster"
             isOpen={!isTablet}
             placement="top"
             style={{
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
index 469751f195..a9c9090eb8 100644
--- a/apps/docs/components/marketing/hero/hero.tsx
+++ b/apps/docs/components/marketing/hero/hero.tsx
@@ -22,30 +22,33 @@ export const Hero = () => {
     posthog.capture("NavbarItem", {
       name,
       action: "press",
-      category: "home - gero",
+      category: "home - hero",
       data: url,
     });
   };
 
   return (
     <section className="flex relative overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
-      <div className="flex relative z-20 flex-col gap-6 w-full lg:w-1/2 xl:mt-10">
-        <div className="w-full flex justify-center md:hidden">
+      <div className="relative z-20 flex flex-col w-full gap-6 lg:w-1/2 xl:mt-10">
+        <div className="flex justify-center w-full md:hidden">
           <Chip
             as={NextLink}
-            className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
-            color="default"
-            href="/blog/v2.3.0"
-            variant="dot"
-            onClick={() => handlePressAnnouncement("New version v2.4.0", "/blog/v2.4.0")}
+            className="bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"
+            classNames={{
+              content: "font-semibold text-primary-500 dark:text-primary-600 text-xs ",
+            }}
+            color="primary"
+            href="/blog/v2.6.0"
+            variant="flat"
+            onClick={() => handlePressAnnouncement("New version v2.6.0", "/blog/v2.6.0")}
           >
-            New version v2.4.0&nbsp;
+            New version v2.6.0&nbsp;
             <span aria-label="emoji" role="img">
-              🚀
+              🔥
             </span>
           </Chip>
         </div>
-        <div className="text-center leading-8 md:leading-10 md:text-left">
+        <div className="leading-8 text-center md:leading-10 md:text-left">
           <div className="inline-block">
             <h1 className={title()}>Make&nbsp;</h1>
             <h1 className={title({color: "violet"})}>beautiful&nbsp;</h1>
@@ -55,7 +58,7 @@ export const Hero = () => {
         <h2 className={subtitle({fullWidth: true, class: "text-center md:text-left"})}>
           Beautiful, fast and modern React UI library.
         </h2>
-        <div className="flex flex-col md:flex-row items-center gap-4">
+        <div className="flex flex-col items-center gap-4 md:flex-row">
           <Button
             as={NextLink}
             className="w-full md:h-11 md:w-auto"
@@ -81,7 +84,7 @@ export const Hero = () => {
             Get Started
           </Button>
           <Snippet
-            className="w-full rounded-full hidden md:flex sm:w-auto"
+            className="hidden w-full rounded-full md:flex sm:w-auto"
             copyButtonProps={{
               radius: "full",
             }}
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index f76d355e38..4d0c99adfc 100644
--- a/apps/docs/components/marketing/install-banner.tsx
+++ b/apps/docs/components/marketing/install-banner.tsx
@@ -25,7 +25,7 @@ const bannerSuggestions = [
     title: "NextUI + Next.js",
     description: (
       <>
-        NextUI is fully compatible with the new Next.js 13 <Code>app/</Code> directory structure.
+        NextUI is fully compatible with the new Next.js <Code>app/</Code> directory structure.
       </>
     ),
     icon: <NextJsIcon className="text-pink-500" />,
diff --git a/apps/docs/components/marketing/marquee.tsx b/apps/docs/components/marketing/marquee.tsx
new file mode 100644
index 0000000000..dc4ed47f78
--- /dev/null
+++ b/apps/docs/components/marketing/marquee.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import type {ReactNode} from "react";
+import type {ScrollShadowProps} from "@nextui-org/react";
+
+import {Children, cloneElement} from "react";
+import {ScrollShadow} from "@nextui-org/react";
+import {cn} from "@nextui-org/react";
+
+interface MarqueeProps {
+  className?: string;
+  reverse?: boolean;
+  shadow?: boolean;
+  duration?: number;
+  pauseOnHover?: boolean;
+  vertical?: boolean;
+  children?: ReactNode;
+  [key: string]: unknown;
+}
+
+export const Marquee = ({
+  className,
+  reverse,
+  duration = 40,
+  shadow = false,
+  pauseOnHover = false,
+  vertical = false,
+  children,
+  ...props
+}: MarqueeProps) => {
+  const shadowProps: ScrollShadowProps = {
+    isEnabled: shadow,
+    offset: -20,
+    size: 300,
+    orientation: "vertical",
+    visibility: "both",
+  };
+
+  const Wrapper = shadow ? ScrollShadow : "div";
+
+  const componentProps = shadow ? {...props, ...shadowProps} : props;
+
+  return (
+    <Wrapper
+      {...componentProps}
+      className={cn(
+        "flex [--gap:1rem]",
+        {
+          "w-full": !vertical,
+          "overflow-y-hidden": vertical,
+          "overflow-x-hidden": !vertical,
+          "max-h-[calc(100vh_-_200px)]": vertical,
+        },
+        className,
+      )}
+      style={{
+        // @ts-ignore
+        "--duration": `${duration}s`,
+      }}
+    >
+      <div
+        className={cn("flex w-max items-stretch gap-[--gap]", {
+          "flex-col": vertical,
+          "h-full": vertical,
+          "animate-scrolling-banner": !vertical,
+          "animate-scrolling-banner-vertical": vertical,
+          "[animation-direction:reverse]": reverse,
+          "hover:[animation-play-state:paused]": pauseOnHover,
+        })}
+      >
+        {Children.map(children, (child) =>
+          child && typeof child === "object" && "type" in child ? cloneElement(child) : child,
+        )}
+      </div>
+    </Wrapper>
+  );
+};
+
+export default Marquee;
diff --git a/apps/docs/components/marketing/nextui-pro-section.tsx b/apps/docs/components/marketing/nextui-pro-section.tsx
new file mode 100644
index 0000000000..0563046d73
--- /dev/null
+++ b/apps/docs/components/marketing/nextui-pro-section.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import {Button, Chip} from "@nextui-org/react";
+import {useEffect, useState} from "react";
+import {useTheme} from "next-themes";
+
+import {sectionWrapper, title, titleWrapper, subtitle} from "../primitives";
+
+import Marquee from "./marquee";
+
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export const NextUIProSection = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isMobile = useIsMobile();
+  const {theme} = useTheme();
+  const isDarkMode = theme === "dark";
+
+  let imgSrc: string;
+
+  if (isDarkMode) {
+    imgSrc = isMobile
+      ? "/images/nextuipro-section-background@mobile.webp"
+      : "/images/nextuipro-section-background.webp";
+  } else {
+    imgSrc = isMobile
+      ? "/images/nextuipro-section-background-light@mobile.webp"
+      : "/images/nextuipro-section-background-light.webp";
+  }
+
+  const mobileClassName: string = isDarkMode
+    ? "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(255,255,255,_0)_5%,_rgba(0,0,0,_0.8)_50%,_rgba(0,0,0,1)_100%)]"
+    : "h-full w-full bg-[radial-gradient(at_40%_80%,_rgba(0,0,0,_0)_5%,_rgba(255,255,255,_0.8)_50%,_rgba(255,255,255,1)_100%)]";
+
+  const webClassName: string = isDarkMode
+    ? "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(255,255,255,_0)_20%,_rgba(0,0,0,_0.8)_40%,_rgba(0,0,0,1)_100%)]"
+    : "h-full w-full bg-[radial-gradient(at_80%_50%,_rgba(0,0,0,_0)_20%,_rgba(255,255,255,_0.9)_40%,_rgba(255,255,255,1)_100%)]";
+
+  if (!mounted) return null;
+
+  const CheckmarkIcon = () => (
+    <svg fill="none" height="11" viewBox="0 0 13 11" width="13" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M1 6.4L4.14286 10L12 1"
+        stroke="#006FEE"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+
+  return (
+    <section className={sectionWrapper({class: "mt-16 lg:mt-44 overflow-hidden"})}>
+      <div className="flex flex-col gap-8 min-h-[480px]">
+        <div className="z-30 flex w-screen h-full flex-col items-start justify-center leading-8 pt-4">
+          <Chip
+            classNames={{
+              base: "ml-0.5 transition-colors bg-gradient-to-br from-cyan-600 to-blue-600",
+              content: "text-tiny font-semibold",
+            }}
+            color="primary"
+            size="sm"
+          >
+            PRO
+          </Chip>
+          <div className={titleWrapper({class: "mt-2 inline md:block"})}>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              Ship&nbsp;
+            </h1>
+            <h1
+              className={title({
+                size: "lg",
+                color: "blue",
+                class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]",
+              })}
+            >
+              faster&nbsp;
+            </h1>
+            <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+              with&nbsp;
+            </h1>
+            <div className="flex flex-col sm:flex-row">
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                beautiful&nbsp;
+              </h1>
+              <h1 className={title({size: "lg", class: "[text-shadow:_0_3px_0_rgb(0_0_0_/_10%)]"})}>
+                components
+              </h1>
+            </div>
+          </div>
+          <p className={subtitle({class: "pr-12 text-foreground-500"})}>
+            Premade templates of over 210+ beautiful and responsive components, professionally
+            created by the team behind NextUI.
+          </p>
+          <div className="mt-4 text-foreground-600 font-medium">
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              210+ Components
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Lifetime Access
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Free Updates
+            </div>
+            <div className="flex gap-x-4 items-center">
+              <CheckmarkIcon />
+              Figma Files Included
+            </div>
+          </div>
+          <div className="mt-4">
+            <Button
+              as={"a"}
+              className="px-6 flex items-center"
+              color="primary"
+              href="https://nextui.pro?utm_source=nextui.org&utm_medium=nextui-homepage-section"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Explore NextUI Pro
+              <svg
+                fill="none"
+                height="21"
+                viewBox="0 0 20 21"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12.0254 5.44189L17.0837 10.5002L12.0254 15.5586"
+                  stroke="white"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit="10"
+                  strokeWidth="1.5"
+                />
+                <path
+                  d="M2.91602 10.5H16.941"
+                  stroke="white"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeMiterlimit="10"
+                  strokeWidth="1.5"
+                />
+              </svg>
+            </Button>
+          </div>
+        </div>
+        <div className="overflow-hidden">
+          <Marquee
+            vertical
+            className="h-78 hidden md:flex w-screen mt-4 md:absolute md:top-0 md:inset-0 isolate md:max-h-dvh"
+            duration={isMobile ? 240 : 60}
+          >
+            <img
+              alt="Hero Background"
+              className="w-full"
+              height={3255}
+              loading="lazy"
+              src={imgSrc}
+              width={1920}
+            />
+          </Marquee>
+          <div className="absolute md:hidden inset-0 pointer-events-none top-0 z-20">
+            <div className={mobileClassName} />
+          </div>
+
+          <div className="absolute hidden md:block md:inset-0 md:pointer-events-none md:top-0 md:z-20">
+            <div className={webClassName} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/apps/docs/components/marketing/support-client.tsx b/apps/docs/components/marketing/support-client.tsx
new file mode 100644
index 0000000000..336f90d4dd
--- /dev/null
+++ b/apps/docs/components/marketing/support-client.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import {FC, useMemo, useRef} from "react";
+import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
+import {clamp} from "@nextui-org/shared-utils";
+import {usePostHog} from "posthog-js/react";
+
+import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+
+import {FeaturesGrid} from "./features-grid";
+
+import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
+import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
+import {SonarPulse} from "@/components/sonar-pulse";
+import {useIsMobile} from "@/hooks/use-media-query";
+
+export interface SupportProps {
+  sponsors: Sponsor[];
+}
+
+const supportAccounts = [
+  {
+    title: "Open Collective",
+    description: "Sponsor the NextUI maintainers.",
+    icon: <OpenCollectiveIcon className="text-pink-500" />,
+    href: "https://opencollective.com/nextui",
+    isExternal: true,
+  },
+  {
+    title: "Patreon",
+    description: "Sponsor the creator, Junior Garcia.",
+    icon: <PatreonIcon className="text-pink-500" />,
+    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
+    isExternal: true,
+  },
+];
+
+const SONAR_PULSE_SIZE = 80;
+const SONAR_PULSE_CIRCLES_COUNT = 4;
+const SONAR_PULSE_RADIUS = 130;
+
+const getSponsorName = (sponsor: Sponsor) => {
+  if (!sponsor.name) {
+    return "";
+  }
+
+  return sponsor.name.slice(0, 2).toUpperCase();
+};
+
+const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
+  let size: AvatarProps["size"] = "md";
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  switch (tier) {
+    case SPONSOR_TIERS.BRONZE:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.SILVER:
+      size = isMobile ? "sm" : "md";
+      break;
+    case SPONSOR_TIERS.GOLD:
+      size = isMobile ? "md" : "lg";
+      break;
+    case SPONSOR_TIERS.PLATINUM:
+      size = isMobile ? "md" : "lg";
+      break;
+    default:
+      size = isMobile ? "sm" : "md";
+  }
+
+  return size;
+};
+
+const getSponsorColor = (sponsor: Sponsor) => {
+  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
+
+  return SPONSOR_COLORS[tier] || "default";
+};
+
+const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
+  const angle = (index * 360) / sponsors.length;
+  const radius = SONAR_PULSE_RADIUS;
+
+  // position the avatar randomly inside the sonar pulse
+  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
+
+  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
+  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
+
+  return {
+    transform: `translate(${x}px, ${y}px)`,
+  };
+};
+
+export const Support: FC<SupportProps> = ({sponsors = []}) => {
+  const sonarRef = useRef(null);
+  const isMobile = useIsMobile();
+  const posthog = usePostHog();
+
+  const handleExternalLinkClick = (href: string) => {
+    if (!href) return;
+    window.open(href, "_blank");
+  };
+
+  const handleBecomeSponsor = () => {
+    posthog.capture("Support - Become a sponsor", {
+      action: "click",
+      category: "landing-page",
+    });
+
+    handleExternalLinkClick(supportAccounts[0].href);
+  };
+  const renderSponsors = useMemo(() => {
+    if (!sponsors.length) return null;
+
+    return (
+      <div
+        className="absolute rounded-full bg-transparent"
+        style={{
+          width: `${SONAR_PULSE_RADIUS}px`,
+          top: SONAR_PULSE_RADIUS / 6,
+          left: SONAR_PULSE_RADIUS / 6,
+        }}
+      >
+        {sponsors.map((sponsor, index) => (
+          <Avatar
+            key={`${sponsor.MemberId}-${index}`}
+            isBordered
+            showFallback
+            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
+            color={getSponsorColor(sponsor) as AvatarProps["color"]}
+            name={getSponsorName(sponsor)}
+            size={getSponsorSize(sponsor, isMobile)}
+            src={sponsor.image}
+            style={getSponsorAvatarStyles(index, sponsors)}
+            onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])}
+          />
+        ))}
+      </div>
+    );
+  }, [isMobile, sponsors]);
+
+  return (
+    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
+      <div className="max-w-4xl flex flex-col gap-8">
+        <div>
+          <div className={titleWrapper({class: "text-center items-center"})}>
+            <div className="flex md:inline-flex flex-col md:flex-row items-center">
+              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
+              <HeartBoldIcon
+                className="text-pink-500 animate-heartbeat"
+                size={50}
+                style={{
+                  animationDuration: "2.5s",
+                }}
+              />
+            </div>
+          </div>
+          <p
+            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
+          >
+            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
+            contributions will help to make NextUI better.
+          </p>
+          <Spacer y={12} />
+          <FeaturesGrid
+            classNames={{
+              base: "lg:grid-cols-2",
+            }}
+            features={supportAccounts}
+          />
+          <div
+            ref={sonarRef}
+            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
+          >
+            <SonarPulse
+              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
+              color="#7928CA"
+              icon={
+                <Tooltip
+                  showArrow
+                  color="secondary"
+                  content={"Become a sponsor"}
+                  offset={10}
+                  radius="full"
+                >
+                  <Button
+                    isIconOnly
+                    aria-label="Become a sponsor"
+                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
+                    radius="full"
+                    onPress={handleBecomeSponsor}
+                  >
+                    <PlusLinearIcon
+                      className="flex items-center justify-center rounded-full text-white"
+                      size={54}
+                    />
+                  </Button>
+                </Tooltip>
+              }
+              playState="running"
+              size={SONAR_PULSE_SIZE}
+            >
+              {renderSponsors}
+            </SonarPulse>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/apps/docs/components/marketing/support.tsx b/apps/docs/components/marketing/support.tsx
index 3159f22a85..ee47a9cae3 100644
--- a/apps/docs/components/marketing/support.tsx
+++ b/apps/docs/components/marketing/support.tsx
@@ -1,213 +1,21 @@
-"use client";
+import {Support as SupportClient} from "./support-client";
 
-import {FC, useMemo, useRef} from "react";
-import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react";
-import {clamp, get} from "lodash";
-import {usePostHog} from "posthog-js/react";
+import {getAllSponsors} from "@/utils/get-all-sponsors";
 
-import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives";
+async function getData() {
+  try {
+    const sponsors = await getAllSponsors();
 
-import {FeaturesGrid} from "./features-grid";
-
-import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons";
-import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors";
-import {SonarPulse} from "@/components/sonar-pulse";
-import {useIsMobile} from "@/hooks/use-media-query";
-
-export interface SupportProps {
-  sponsors: Sponsor[];
-}
-
-const supportAccounts = [
-  {
-    title: "Open Collective",
-    description: "Sponsor the NextUI maintainers.",
-    icon: <OpenCollectiveIcon className="text-pink-500" />,
-    href: "https://opencollective.com/nextui",
-    isExternal: true,
-  },
-  {
-    title: "Patreon",
-    description: "Sponsor the creator, Junior Garcia.",
-    icon: <PatreonIcon className="text-pink-500" />,
-    href: "https://www.patreon.com/jrgarciadev?fan_landing=true",
-    isExternal: true,
-  },
-];
-
-const SONAR_PULSE_SIZE = 80;
-const SONAR_PULSE_CIRCLES_COUNT = 4;
-const SONAR_PULSE_RADIUS = 130;
-
-const getSponsorName = (sponsor: Sponsor) => {
-  if (!sponsor.name) {
-    return "";
+    return {
+      sponsors,
+    };
+  } catch (error) {
+    throw new Error("Failed to fetch data");
   }
+}
 
-  return sponsor.name.slice(0, 2).toUpperCase();
-};
-
-const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => {
-  let size: AvatarProps["size"] = "md";
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  switch (tier) {
-    case SPONSOR_TIERS.BRONZE:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.SILVER:
-      size = isMobile ? "sm" : "md";
-      break;
-    case SPONSOR_TIERS.GOLD:
-      size = isMobile ? "md" : "lg";
-      break;
-    case SPONSOR_TIERS.PLATINUM:
-      size = isMobile ? "md" : "lg";
-      break;
-    default:
-      size = isMobile ? "sm" : "md";
-  }
-
-  return size;
-};
-
-const getSponsorColor = (sponsor: Sponsor) => {
-  const tier = sponsor.tier || getTier(sponsor.totalAmountDonated);
-
-  return SPONSOR_COLORS[tier] || "default";
-};
-
-const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => {
-  const angle = (index * 360) / sponsors.length;
-  const radius = SONAR_PULSE_RADIUS;
-
-  // position the avatar randomly inside the sonar pulse
-  const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius);
-
-  const x = randomRadius * Math.cos((angle * Math.PI) / 180);
-  const y = randomRadius * Math.sin((angle * Math.PI) / 180);
-
-  return {
-    transform: `translate(${x}px, ${y}px)`,
-  };
-};
-
-export const Support: FC<SupportProps> = ({sponsors = []}) => {
-  const sonarRef = useRef(null);
-  const isMobile = useIsMobile();
-  const posthog = usePostHog();
-
-  const handleExternalLinkClick = (href: string) => {
-    if (!href) return;
-    window.open(href, "_blank");
-  };
-
-  const handleBecomeSponsor = () => {
-    posthog.capture("Support - Become a sponsor", {
-      action: "click",
-      category: "landing-page",
-    });
-
-    handleExternalLinkClick(supportAccounts[0].href);
-  };
-  const renderSponsors = useMemo(() => {
-    if (!sponsors.length) return null;
-
-    return (
-      <div
-        className="absolute rounded-full bg-transparent"
-        style={{
-          width: `${SONAR_PULSE_RADIUS}px`,
-          top: SONAR_PULSE_RADIUS / 6,
-          left: SONAR_PULSE_RADIUS / 6,
-        }}
-      >
-        {sponsors.map((sponsor, index) => (
-          <Avatar
-            key={`${sponsor.MemberId}-${index}`}
-            isBordered
-            showFallback
-            className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200"
-            color={getSponsorColor(sponsor) as AvatarProps["color"]}
-            name={getSponsorName(sponsor)}
-            size={getSponsorSize(sponsor, isMobile)}
-            src={sponsor.image}
-            style={getSponsorAvatarStyles(index, sponsors)}
-            onClick={() =>
-              handleExternalLinkClick(get(sponsor, "website") || get(sponsor, "profile"))
-            }
-          />
-        ))}
-      </div>
-    );
-  }, [isMobile, sponsors]);
+export default async function Support() {
+  const data = await getData();
 
-  return (
-    <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}>
-      <div className="max-w-4xl flex flex-col gap-8">
-        <div>
-          <div className={titleWrapper({class: "text-center items-center"})}>
-            <div className="flex md:inline-flex flex-col md:flex-row items-center">
-              <h1 className={title({size: "lg"})}>Support NextUI&nbsp;</h1>
-              <HeartBoldIcon
-                className="text-pink-500 animate-heartbeat"
-                size={50}
-                style={{
-                  animationDuration: "2.5s",
-                }}
-              />
-            </div>
-          </div>
-          <p
-            className={subtitle({class: "md:w-full text-center flex justify-center items-center"})}
-          >
-            Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your
-            contributions will help to make NextUI better.
-          </p>
-          <Spacer y={12} />
-          <FeaturesGrid
-            classNames={{
-              base: "lg:grid-cols-2",
-            }}
-            features={supportAccounts}
-          />
-          <div
-            ref={sonarRef}
-            className="relative mt-32 md:mt-60 w-full flex items-center justify-center"
-          >
-            <SonarPulse
-              circlesCount={SONAR_PULSE_CIRCLES_COUNT}
-              color="#7928CA"
-              icon={
-                <Tooltip
-                  showArrow
-                  color="secondary"
-                  content={"Become a sponsor"}
-                  offset={10}
-                  radius="full"
-                >
-                  <Button
-                    isIconOnly
-                    aria-label="Become a sponsor"
-                    className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]"
-                    radius="full"
-                    onPress={handleBecomeSponsor}
-                  >
-                    <PlusLinearIcon
-                      className="flex items-center justify-center rounded-full text-white"
-                      size={54}
-                    />
-                  </Button>
-                </Tooltip>
-              }
-              playState="running"
-              size={SONAR_PULSE_SIZE}
-            >
-              {renderSponsors}
-            </SonarPulse>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
+  return <SupportClient sponsors={data.sponsors} />;
+}
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index b9a3c43cfc..8e9cb2e3de 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -6,6 +6,7 @@ import NextImage from "next/image";
 import {usePostHog} from "posthog-js/react";
 
 import {ThemeSwitch} from "./theme-switch";
+import {InfoCircle} from "./icons/info-circle";
 
 import {Sandpack} from "@/components/sandpack";
 import {CarbonAd} from "@/components/ads/carbon-ad";
@@ -13,6 +14,15 @@ import * as DocsComponents from "@/components/docs/components";
 import * as BlogComponents from "@/components/blog/components";
 import {Codeblock} from "@/components/docs/components";
 import {VirtualAnchor, virtualAnchorEncode} from "@/components/virtual-anchor";
+import {
+  Table as StaticTable,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableColumnHeader,
+  TableRoot,
+} from "@/components/static-table";
 
 const Table: React.FC<{children?: React.ReactNode}> = ({children}) => {
   return (
@@ -97,15 +107,20 @@ const LinkedHeading: React.FC<LinkedHeadingProps> = ({
 
 const List: React.FC<{children?: React.ReactNode}> = ({children}) => {
   return (
-    <ul className="list-disc flex flex-col gap-2 ml-4 mt-2 [&>li>strong]:text-pink-500 dark:[&>li>strong]:text-cyan-600">
+    <ul className="list-disc flex flex-col gap-2 ml-4 mt-2 [&>li>strong]:text-foreground [&>li>strong]:font-medium">
       {children}
     </ul>
   );
 };
 
-const InlineCode = ({children}: {children?: React.ReactNode}) => {
+const InlineCode = ({children, className}: {children?: React.ReactNode; className?: string}) => {
   return (
-    <Components.Code className="font-normal text-default-700 bg-default-200/50 dark:bg-default-100/60 px-2 py-0.5">
+    <Components.Code
+      className={clsx(
+        'p-0 relative before:content-["`"] after:content-["`"] font-semibold font-mono text-small rounded-md text-default-900 dark:text-default-500 bg-transparent',
+        className,
+      )}
+    >
       {children}
     </Components.Code>
   );
@@ -153,16 +168,21 @@ const Code = ({
         });
       }}
     >
-      <Codeblock codeString={codeString} language={language} metastring={meta} />
+      <Codeblock
+        className="sp-editor"
+        codeString={codeString}
+        language={language}
+        metastring={meta}
+      />
     </Components.Snippet>
   );
 };
 
 const Link = ({href, children}: {href?: string; children?: React.ReactNode}) => {
-  const isExternal = href?.startsWith("http");
+  const isExternal = href?.startsWith("http") || href?.startsWith("https");
   const posthog = usePostHog();
 
-  const handlePress = () => {
+  const handleClick = () => {
     posthog.capture("MDXComponents - Click", {
       category: "docs",
       action: "click",
@@ -170,18 +190,123 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
     });
   };
 
+  const externalProps = isExternal ? {target: "_blank", rel: "noopener noreferrer"} : {};
+
   return (
     <Components.Link
+      className="relative hover:opacity-100 text-foreground font-bold after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:rounded-full after:h-[1px] after:bg-primary-400 dark:after:bg-default-300 hover:after:h-[2px]"
+      disableAnimation={true}
       href={href}
-      isExternal={isExternal}
-      showAnchorIcon={isExternal}
-      onPress={handlePress}
+      {...externalProps}
+      onClick={handleClick}
     >
       {children}
     </Components.Link>
   );
 };
 
+const InlineCodeChip = ({children}: {children?: React.ReactNode}) => {
+  return (
+    <InlineCode className="before:hidden after:hidden text-tiny rounded-md text-default-600 bg-default-100 dark:bg-default-100/80 px-1.5 py-0.5">
+      {children}
+    </InlineCode>
+  );
+};
+
+interface APITableProps {
+  data: {
+    attribute: string;
+    type: string;
+    description: string;
+    default?: string;
+  }[];
+}
+
+export const APITable: React.FC<APITableProps> = ({data}) => {
+  return (
+    <TableRoot className="overflow-x-auto overflow-y-hidden">
+      <StaticTable aria-label="API table" className="w-full" layout="auto">
+        <TableHeader>
+          <TableRow>
+            <TableColumnHeader>Prop</TableColumnHeader>
+            <TableColumnHeader>Type</TableColumnHeader>
+            <TableColumnHeader>Default</TableColumnHeader>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item, index) => (
+            <TableRow key={index} className="[&>td]:px-2 [&>td]:py-1.5 [&>td]:first:pt-4">
+              <TableCell className="flex items-center gap-1 font-mono text-small whitespace-nowrap">
+                <InlineCodeChip>{item.attribute}</InlineCodeChip>
+                {item.description && (
+                  <>
+                    {/* Desktop tooltip */}
+                    <Components.Tooltip
+                      classNames={{
+                        content: "max-w-[240px]",
+                      }}
+                      content={item.description}
+                      delay={0}
+                      placement="top"
+                    >
+                      <div className="flex items-center gap-1 cursor-default hidden sm:block">
+                        <InfoCircle className="text-default-400" size={16} />
+                      </div>
+                    </Components.Tooltip>
+                    {/* Mobile popover */}
+                    <Components.Popover placement="top">
+                      <Components.PopoverTrigger>
+                        <button className="flex items-center gap-1 sm:hidden outline-none">
+                          <InfoCircle className="text-default-400" size={16} />
+                        </button>
+                      </Components.PopoverTrigger>
+                      <Components.PopoverContent className="max-w-[240px]">
+                        {item.description}
+                      </Components.PopoverContent>
+                    </Components.Popover>
+                  </>
+                )}
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap text-primary">
+                <InlineCodeChip>
+                  <div className="flex max-w-[300px] flex-wrap text-wrap">{item.type}</div>
+                </InlineCodeChip>
+              </TableCell>
+              <TableCell className="font-mono text-small whitespace-nowrap">
+                {item.default && item.default !== "-" ? (
+                  <InlineCodeChip>
+                    {item.default !== "true" && item.default !== "false"
+                      ? `"${item.default}"`
+                      : item.default}
+                  </InlineCodeChip>
+                ) : (
+                  <svg
+                    aria-hidden="true"
+                    className="text-default-400"
+                    fill="none"
+                    focusable="false"
+                    height="15"
+                    viewBox="0 0 15 15"
+                    width="15"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clipRule="evenodd"
+                      d="M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z"
+                      fill="currentColor"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </StaticTable>
+    </TableRoot>
+  );
+};
+
 export const MDXComponents = {
   /**
    * Next.js components
@@ -211,9 +336,7 @@ export const MDXComponents = {
   h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h2" {...props} />,
   h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h3" {...props} />,
   h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <LinkedHeading as="h4" {...props} />,
-  strong: (props: React.HTMLAttributes<HTMLElement>) => (
-    <strong className="font-medium" {...props} />
-  ),
+  strong: (props: React.HTMLAttributes<HTMLElement>) => <strong {...props} />,
   table: Table,
   thead: Thead,
   tr: Trow,
@@ -234,5 +357,6 @@ export const MDXComponents = {
       {...props}
     />
   ),
+  APITable,
   // Block,
 } as unknown as Record<string, React.ReactNode>;
diff --git a/apps/docs/components/mdx-content.tsx b/apps/docs/components/mdx-content.tsx
index 515cce9080..bfe31b0da8 100644
--- a/apps/docs/components/mdx-content.tsx
+++ b/apps/docs/components/mdx-content.tsx
@@ -1,8 +1,8 @@
-/* eslint-disable react/display-name */
 "use client";
+
 import type {MDXComponents as MDXComponentsType} from "mdx/types";
 
-import {useMDXComponent} from "next-contentlayer/hooks";
+import {useMDXComponent} from "next-contentlayer2/hooks";
 
 import {MDXComponents} from "./mdx-components";
 
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index 20fa2090dc..bd8f9f52ac 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -17,6 +17,7 @@ import {
   DropdownItem,
   DropdownTrigger,
   Chip,
+  Divider,
 } from "@nextui-org/react";
 import {dataFocusVisibleClasses} from "@nextui-org/theme";
 import {ChevronDownIcon, LinkIcon} from "@nextui-org/shared-icons";
@@ -24,22 +25,23 @@ import {isAppleDevice} from "@react-aria/utils";
 import {clsx} from "@nextui-org/shared-utils";
 import NextLink from "next/link";
 import {usePathname} from "next/navigation";
-import {includes} from "lodash";
 import {motion, AnimatePresence} from "framer-motion";
 import {useEffect} from "react";
 import {usePress} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
 import {usePostHog} from "posthog-js/react";
 
+import {FbRoadmapLink} from "./featurebase/fb-roadmap-link";
+
 import {currentVersion} from "@/utils/version";
 import {siteConfig} from "@/config/site";
 import {Route} from "@/libs/docs/page";
 import {LargeLogo, SmallLogo, ThemeSwitch} from "@/components";
-import {TwitterIcon, GithubIcon, DiscordIcon, SearchLinearIcon} from "@/components/icons";
+import {GithubIcon, SearchLinearIcon} from "@/components/icons";
 import {useIsMounted} from "@/hooks/use-is-mounted";
 import {DocsSidebar} from "@/components/docs/sidebar";
 import {useCmdkStore} from "@/components/cmdk";
-import {FbRoadmapLink} from "@/components/featurebase/fb-roadmap-link";
+import githubInfo from "@/config/github-info.json";
 
 export interface NavbarProps {
   routes: Route[];
@@ -95,22 +97,26 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
   const searchButton = (
     <Button
       aria-label="Quick search"
-      className="text-sm font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20"
+      className="border-1 px-3 border-default-200 rounded-full text-small font-normal text-default-500 bg-transparent"
       endContent={
-        <Kbd className="hidden py-0.5 px-2 lg:inline-block" keys={commandKey}>
+        <Kbd
+          className="hidden text-xs rounded-full py-0.5 px-1.5 lg:inline-block"
+          keys={commandKey}
+        >
           K
         </Kbd>
       }
       startContent={
         <SearchLinearIcon
           className="text-base text-default-400 pointer-events-none flex-shrink-0"
-          size={18}
+          size={16}
           strokeWidth={2}
         />
       }
+      variant="bordered"
       onPress={handleOpenCmdk}
     >
-      Quick Search...
+      Search
     </Button>
   );
 
@@ -118,7 +124,10 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
     return null;
   }
 
-  const navLinkClasses = clsx(link({color: "foreground"}), "data-[active=true]:text-primary");
+  const navLinkClasses = clsx(
+    link({color: "foreground"}),
+    "data-[active=true]:text-primary data-[active=true]:font-semibold",
+  );
 
   const handleVersionChange = (key: Key) => {
     if (key === "v1") {
@@ -143,13 +152,17 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
       className={clsx({
         "z-[100001]": isMenuOpen,
       })}
+      classNames={{
+        base: "bg-white/[.90] dark:bg-black/[.65]",
+        wrapper: "max-w-8xl",
+      }}
       isMenuOpen={isMenuOpen}
       maxWidth="xl"
       position="sticky"
       onMenuOpenChange={setIsMenuOpen}
     >
       <NavbarContent className="basis-1/5 sm:basis-full" justify="start">
-        <NavbarBrand as="li" className="gap-3 max-w-fit">
+        <NavbarBrand as="li" className="gap-x-3 max-w-fit">
           <NextLink
             aria-label="Home"
             className="flex justify-start items-center gap-2 tap-highlight-transparent transition-opacity active:opacity-50"
@@ -166,7 +179,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
                   <motion.div animate={{opacity: 1}} exit={{opacity: 0}} initial={{opacity: 0}}>
                     <DropdownTrigger>
                       <Button
-                        className="hidden text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
+                        className="min-w-[74px] max-w-[74px] hidden font-medium text-default-500 text-xs h-6 w-[74px] py-1 min-w-fit sm:flex gap-0.5 bg-default-400/20 dark:bg-default-500/20"
                         endContent={<ChevronDownIcon className="text-tiny" />}
                         radius="full"
                         size="sm"
@@ -193,13 +206,73 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
           ) : (
             <div className="w-[74px]" />
           )}
+          <Chip
+            as={NextLink}
+            className="hidden sm:flex bg-primary-100/50 border-1 hover:bg-primary-100/80 border-primary-200/50 cursor-pointer"
+            classNames={{
+              content: "font-semibold text-primary-500 dark:text-primary-600 text-xs ",
+            }}
+            color="primary"
+            href="/blog/v2.6.0"
+            variant="flat"
+            onClick={() => handlePressNavbarItem("New version v2.6.0", "/blog/v2.6.0")}
+          >
+            New version v2.6.0&nbsp;
+            <span aria-label="emoji" role="img">
+              🔥
+            </span>
+          </Chip>
         </NavbarBrand>
-        <ul className="hidden lg:flex gap-4 justify-start items-center">
+      </NavbarContent>
+
+      <NavbarContent className="flex w-full gap-2 sm:hidden " justify="end">
+        <NavbarItem className="flex h-full items-center">
+          <Link
+            isExternal
+            aria-label="Github"
+            className="p-1"
+            href={siteConfig.links.github}
+            onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
+          >
+            <GithubIcon className="text-default-600 dark:text-default-500" />
+          </Link>
+        </NavbarItem>
+        <NavbarItem className="flex h-full items-center">
+          <ThemeSwitch
+            classNames={{
+              wrapper: "!text-default-500 dark:!text-default-500",
+            }}
+          />
+        </NavbarItem>
+        <NavbarItem className="flex h-full items-center">
+          <button
+            className={clsx(
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
+              // focus ring
+              ...dataFocusVisibleClasses,
+            )}
+            data-focus-visible={isFocusVisible}
+            {...focusProps}
+            {...pressProps}
+          >
+            <SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
+          </button>
+        </NavbarItem>
+        <NavbarItem className="w-10 h-full">
+          <NavbarMenuToggle
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+            className="w-full h-full pt-1"
+          />
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
+        <ul className="hidden lg:flex gap-4 pr-2 justify-start items-center [&>li>a]:text-sm [&>li>a]:font-medium">
           <NavbarItem>
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(docsPaths, pathname)}
+              data-active={docsPaths.includes(pathname)}
               href="/docs/guide/introduction"
               onClick={() => handlePressNavbarItem("Docs", "/docs/guide/introduction")}
             >
@@ -210,7 +283,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "components")}
+              data-active={pathname.includes("components")}
               href="/docs/components/accordion"
               onClick={() => handlePressNavbarItem("Components", "/docs/components/accordion")}
             >
@@ -221,7 +294,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "blog")}
+              data-active={pathname.includes("blog")}
               href="/blog"
               onClick={() => handlePressNavbarItem("Blog", "/blog")}
             >
@@ -232,129 +305,37 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
             <NextLink
               className={navLinkClasses}
               color="foreground"
-              data-active={includes(pathname, "figma")}
+              data-active={pathname.includes("figma")}
               href="/figma"
               onClick={() => handlePressNavbarItem("Figma", "/figma")}
             >
               Figma
             </NextLink>
           </NavbarItem>
-          {/* hide feedback and changelog at this moment */}
-          {/* <NavbarItem>
-            <NextLink className={navLinkClasses} color="foreground" href="#">
-              <FbChangelogButton key="changelog" userName="" />
-            </NextLink>
-          </NavbarItem>
-          <NavbarItem>
-            <NextLink className={navLinkClasses} color="foreground" href="#">
-              <FbFeedbackButton key="feedback" userEmail="" />
-            </NextLink>
-          </NavbarItem> */}
           <NavbarItem>
             <FbRoadmapLink className={navLinkClasses} />
           </NavbarItem>
-          {/* <NavbarItem>
-            <Chip
-              as={NextLink}
-              className="hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
-              color="secondary"
-              href="/blog/v2.2.0"
-              variant="dot"
-              onClick={() => handlePressNavbarItem("Introducing v2.2.0", "/blog/v2.2.0")}
-            >
-              Introducing v2.2.0&nbsp;
-              <span aria-label="rocket emoji" role="img">
-                🚀
-              </span>
-            </Chip>
-          </NavbarItem> */}
         </ul>
-      </NavbarContent>
-
-      <NavbarContent className="flex w-full gap-2 sm:hidden" justify="end">
-        <NavbarItem className="flex h-full items-center">
-          <Link
-            isExternal
-            aria-label="Github"
-            className="p-1"
-            href="https://github.com/nextui-org/nextui"
-            onClick={() => handlePressNavbarItem("Github", "https://github.com/nextui-org/nextui")}
-          >
-            <GithubIcon className="text-default-600 dark:text-default-500" />
-          </Link>
-        </NavbarItem>
-        <NavbarItem className="flex h-full items-center">
-          <ThemeSwitch />
-        </NavbarItem>
-        <NavbarItem className="flex h-full items-center">
-          <button
-            className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-none",
-              // focus ring
-              ...dataFocusVisibleClasses,
-            )}
-            data-focus-visible={isFocusVisible}
-            {...focusProps}
-            {...pressProps}
-          >
-            <SearchLinearIcon className="mt-px text-default-600 dark:text-default-500" size={20} />
-          </button>
-        </NavbarItem>
-        <NavbarItem className="w-10 h-full">
-          <NavbarMenuToggle
-            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-            className="w-full h-full pt-1"
-          />
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex basis-1/5 sm:basis-full" justify="end">
-        <NavbarItem className="hidden sm:flex">
-          <Chip
-            as={NextLink}
-            className="bg-default-100/50 hover:bg-default-100 border-default-200/80 dark:border-default-100/80 transition-colors cursor-pointer"
-            color="default"
-            href="/blog/v2.4.0"
-            variant="dot"
-            onClick={() => handlePressNavbarItem("New version v2.4.0", "/blog/v2.4.0")}
-          >
-            New version v2.4.0&nbsp;
-            <span aria-label="emoji" role="img">
-              🚀
-            </span>
-          </Chip>
-        </NavbarItem>
-        <NavbarItem className="hidden sm:flex">
-          <Link
-            isExternal
-            aria-label="Twitter"
-            className="p-1"
-            href={siteConfig.links.twitter}
-            onPress={() => handlePressNavbarItem("Twitter", siteConfig.links.twitter)}
-          >
-            <TwitterIcon className="text-default-600 dark:text-default-500" />
-          </Link>
-          <Link
-            isExternal
-            aria-label="Discord"
-            className="p-1"
-            href={siteConfig.links.discord}
-            onPress={() => handlePressNavbarItem("Discord", siteConfig.links.discord)}
-          >
-            <DiscordIcon className="text-default-600 dark:text-default-500" />
-          </Link>
+        <Divider className="h-7 hidden lg:flex" orientation="vertical" />
+        <NavbarItem className="hidden sm:flex gap-2">
+          {searchButton}
           <Link
             isExternal
             aria-label="Github"
-            className="p-1"
+            className="flex gap-0.5 items-center h-10 px-2 border-1 border-default-200 rounded-full text-default-600 dark:text-default-500"
             href={siteConfig.links.github}
             onPress={() => handlePressNavbarItem("Github", siteConfig.links.github)}
           >
-            <GithubIcon className="text-default-600 dark:text-default-500" />
+            <GithubIcon />
+            <span className="text-xs font-medium">{githubInfo.stars.formatted}</span>
           </Link>
-          <ThemeSwitch />
+          <ThemeSwitch
+            className="border-1 border-default-200 rounded-full h-full min-w-10 min-h-10 flex items-center justify-center"
+            classNames={{
+              wrapper: "!text-default-400 dark:!text-default-500",
+            }}
+          />
         </NavbarItem>
-        <NavbarItem className="hidden lg:flex">{searchButton}</NavbarItem>
         {/* <NavbarItem className="hidden md:flex">
           <Button
             isExternal
diff --git a/apps/docs/components/primitives.ts b/apps/docs/components/primitives.ts
index 934a605b86..1cd71dbccc 100644
--- a/apps/docs/components/primitives.ts
+++ b/apps/docs/components/primitives.ts
@@ -18,7 +18,7 @@ export const title = tv({
     },
     size: {
       sm: "text-3xl lg:text-4xl",
-      md: "text-[2.5rem] lg:text-5xl",
+      md: "text-[clamp(1rem,10vw,2rem)] sm:text-[clamp(1rem,10vw,3rem)] lg:text-5xl",
       lg: "text-4xl lg:text-6xl",
       xl: "text-5xl md:text-6xl lg:text-7xl",
     },
diff --git a/apps/docs/components/sandpack/bugreport-button.tsx b/apps/docs/components/sandpack/bugreport-button.tsx
index 0f7438e719..2c2e19491d 100644
--- a/apps/docs/components/sandpack/bugreport-button.tsx
+++ b/apps/docs/components/sandpack/bugreport-button.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import {usePathname} from "next/navigation";
 import {Tooltip, Button} from "@nextui-org/react";
-import {capitalize, last} from "lodash";
+import {capitalize} from "@nextui-org/shared-utils";
 
 import {BugIcon} from "@/components/icons";
 import {ISSUE_REPORT_URL} from "@/libs/github/constants";
@@ -9,7 +9,7 @@ import {ISSUE_REPORT_URL} from "@/libs/github/constants";
 export const BugReportButton = () => {
   const pathname = usePathname();
 
-  const componentTitle = capitalize(last(pathname?.split("/")));
+  const componentTitle = capitalize(pathname?.split("/")?.at(-1) ?? "");
 
   const handlePress = () => {
     window.open(`${ISSUE_REPORT_URL}${componentTitle}`, "_blank");
diff --git a/apps/docs/components/sandpack/copy-button.tsx b/apps/docs/components/sandpack/copy-button.tsx
index d9648d7a15..2ba1db1436 100644
--- a/apps/docs/components/sandpack/copy-button.tsx
+++ b/apps/docs/components/sandpack/copy-button.tsx
@@ -5,13 +5,13 @@ import {useClipboard} from "@nextui-org/use-clipboard";
 
 import {CopyLinearIcon} from "@/components/icons";
 
-export const CopyButton = () => {
+export const CopyButton = ({code: codeProp}: {code?: string}) => {
   const {copy, copied} = useClipboard();
 
   const {sandpack} = useSandpack();
 
   const copyHandler = () => {
-    const code = sandpack.files[sandpack.activeFile].code;
+    const code = codeProp ?? sandpack.files[sandpack.activeFile].code;
 
     copy(code);
   };
diff --git a/apps/docs/components/sandpack/entries.ts b/apps/docs/components/sandpack/entries.ts
index f1bc2d2178..191bc54e41 100644
--- a/apps/docs/components/sandpack/entries.ts
+++ b/apps/docs/components/sandpack/entries.ts
@@ -10,7 +10,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <NextUIProvider>
       <div className="w-screen h-screen p-8 flex items-start justify-center">
         <App />
-      </div>  
+      </div>
     </NextUIProvider>
   </React.StrictMode>
 );`;
diff --git a/apps/docs/components/sandpack/language-selector.tsx b/apps/docs/components/sandpack/language-selector.tsx
index faea80fd79..658af6a6fa 100644
--- a/apps/docs/components/sandpack/language-selector.tsx
+++ b/apps/docs/components/sandpack/language-selector.tsx
@@ -29,7 +29,7 @@ export const LanguageSelector: React.FC<LanguageSelectorProps> = ({template, onC
       aria-label="Language selector"
       classNames={{
         base: "absolute z-10 right-3 bottom-4",
-        cursor: "bg-zinc-400 dark:bg-zinc-700",
+        cursor: "bg-default-600 dark:bg-default-300",
         tabList:
           "bg-transparent relative before:bg-white/5 before:w-full before:rounded-lg before:h-full before:content-[''] before:block before:z-1 before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-100",
       }}
diff --git a/apps/docs/components/sandpack/use-sandpack.ts b/apps/docs/components/sandpack/use-sandpack.ts
index d3d62b23e4..82f34f7e5f 100644
--- a/apps/docs/components/sandpack/use-sandpack.ts
+++ b/apps/docs/components/sandpack/use-sandpack.ts
@@ -70,7 +70,7 @@ export const useSandpack = ({
   }, {});
 
   let dependencies = {
-    "framer-motion": "11.0.22",
+    "framer-motion": "11.9.0",
     "@nextui-org/react": "latest",
   };
 
@@ -143,19 +143,19 @@ export const useSandpack = ({
 
   // const dependencies = useMemo(() => {
   //   let deps = {
-  //     "framer-motion": "11.0.22",
+  //     "framer-motion": "11.9.0",
   //   };
 
   //   if (hasComponents) {
   //     let deps = {
-  //       "@nextui-org/theme": "dev-v2",
-  //       "@nextui-org/system": "dev-v2",
+  //       "@nextui-org/theme": "canary",
+  //       "@nextui-org/system": "canary",
   //     };
 
   //     nextUIComponents.forEach((component) => {
   //       deps = {
   //         ...deps,
-  //         [`@nextui-org/${component}`]: "dev-v2",
+  //         [`@nextui-org/${component}`]: "canary",
   //       };
   //     });
 
@@ -164,7 +164,7 @@ export const useSandpack = ({
 
   //   return {
   //     ...deps,
-  //     "@nextui-org/react": "dev-v2",
+  //     "@nextui-org/react": "canary",
   //   };
   // }, [hasComponents, nextUIComponents, component]);
 
diff --git a/apps/docs/components/scripts/script-providers.tsx b/apps/docs/components/scripts/script-providers.tsx
index af9a85363a..4c48c05e91 100644
--- a/apps/docs/components/scripts/script-providers.tsx
+++ b/apps/docs/components/scripts/script-providers.tsx
@@ -5,11 +5,6 @@ import Script from "next/script";
 export function ScriptProviders() {
   return (
     <>
-      <Script
-        id="featurebase-sdk"
-        src="https://do.featurebase.app/js/sdk.js"
-        strategy={"beforeInteractive"}
-      />
       <Script
         defer
         data-modal-disclaimer="This is a custom LLM for NextUI with access to all developer docs (nextui.org/docs) and GitHub Issues and PRs (github.com/nextui-org/nextui)."
diff --git a/apps/docs/components/static-table.tsx b/apps/docs/components/static-table.tsx
new file mode 100644
index 0000000000..fa9b43f70a
--- /dev/null
+++ b/apps/docs/components/static-table.tsx
@@ -0,0 +1,73 @@
+import type {ComponentProps, FC} from "react";
+
+import {cn, table} from "@nextui-org/theme";
+
+const tableSlots = table();
+
+export const TableRoot: FC<ComponentProps<"div">> = ({children, className, ...props}) => {
+  return (
+    <div {...props} className={tableSlots.base({className})}>
+      {children}
+    </div>
+  );
+};
+
+export const Table: FC<
+  ComponentProps<"table"> & {
+    layout?: "fixed" | "auto";
+  }
+> = ({children, className, layout = "auto", ...props}) => {
+  return (
+    <table {...props} className={tableSlots.table({className, layout})}>
+      {children}
+    </table>
+  );
+};
+
+export const TableHeader: FC<ComponentProps<"thead">> = ({children, className, ...props}) => {
+  return (
+    <thead {...props} className={tableSlots.thead({className})}>
+      {children}
+    </thead>
+  );
+};
+
+export const TableBody: FC<ComponentProps<"tbody">> = ({children, className, ...props}) => {
+  return (
+    <tbody {...props} className={tableSlots.tbody({className})}>
+      {children}
+    </tbody>
+  );
+};
+
+export const TableRow: FC<ComponentProps<"tr">> = ({children, className, ...props}) => {
+  return (
+    <tr {...props} className={tableSlots.tr({className})}>
+      {children}
+    </tr>
+  );
+};
+
+export const TableColumnHeader: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.th({className})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableCell: FC<ComponentProps<"td">> = ({children, className, ...props}) => {
+  return (
+    <td {...props} className={tableSlots.td({class: cn("p-0", className)})}>
+      {children}
+    </td>
+  );
+};
+
+export const TableColumn: FC<ComponentProps<"th">> = ({children, className, ...props}) => {
+  return (
+    <th {...props} className={tableSlots.th({class: cn("p-0", className)})}>
+      {children}
+    </th>
+  );
+};
diff --git a/apps/docs/components/theme-switch.tsx b/apps/docs/components/theme-switch.tsx
index 7c8f6fd59a..8d62d4def3 100644
--- a/apps/docs/components/theme-switch.tsx
+++ b/apps/docs/components/theme-switch.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import {FC} from "react";
+import {FC, ChangeEvent} from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {SwitchProps, useSwitch} from "@nextui-org/react";
 import {useTheme} from "next-themes";
@@ -8,7 +8,7 @@ import {clsx} from "@nextui-org/shared-utils";
 import {useIsSSR} from "@react-aria/ssr";
 import {usePostHog} from "posthog-js/react";
 
-import {SunFilledIcon, MoonFilledIcon} from "@/components/icons";
+import {SunLinearIcon, MoonIcon} from "@/components/icons";
 
 export interface ThemeSwitchProps {
   className?: string;
@@ -20,20 +20,29 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
   const isSSR = useIsSSR();
   const posthog = usePostHog();
 
-  const onChange = () => {
-    theme === "light" ? setTheme("dark") : setTheme("light");
+  const initialTheme = isSSR ? "light" : theme;
+
+  const handleThemeChange = (
+    e?: ChangeEvent<HTMLInputElement> | React.MouseEvent | React.KeyboardEvent,
+  ) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+
+    const newTheme = theme === "light" ? "dark" : "light";
+
+    setTheme(newTheme);
 
     posthog.capture("ThemeChange", {
       action: "click",
       category: "theme",
-      data: theme === "light" ? "dark" : "light",
+      data: newTheme,
     });
   };
 
   const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({
-    isSelected: theme === "light",
-    "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`,
-    onChange,
+    isSelected: initialTheme === "light",
+    "aria-label": `Switch to ${initialTheme === "light" ? "dark" : "light"} mode`,
+    onChange: handleThemeChange as (event: ChangeEvent<HTMLInputElement>) => void,
   });
 
   return (
@@ -44,6 +53,12 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
           className,
           classNames?.base,
         ),
+        onClick: handleThemeChange,
+        onKeyDown: (e: React.KeyboardEvent) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleThemeChange(e);
+          }
+        },
       })}
     >
       <VisuallyHidden>
@@ -59,8 +74,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
               "rounded-lg",
               "flex items-center justify-center",
               "group-data-[selected=true]:bg-transparent",
-              "!text-default-600 dark:!text-default-500",
-              "pt-px",
+              "!text-default-600 dark:!text-default-300",
+              "pt-0",
               "px-0",
               "mx-0",
             ],
@@ -68,7 +83,7 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => {
           ),
         })}
       >
-        {!isSelected || isSSR ? <SunFilledIcon size={22} /> : <MoonFilledIcon size={22} />}
+        {!isSelected || isSSR ? <SunLinearIcon size={22} /> : <MoonIcon size={22} />}
       </div>
     </Component>
   );
diff --git a/apps/docs/config/fonts.ts b/apps/docs/config/fonts.ts
index b2a573494e..962d7fb78f 100644
--- a/apps/docs/config/fonts.ts
+++ b/apps/docs/config/fonts.ts
@@ -1,27 +1,73 @@
-import {Inter} from "next/font/google";
+import localFont from "next/font/local";
 
-export const fontSans = Inter({
+const fontSans = localFont({
+  src: [
+    {
+      path: "../public/assets/fonts/Inter-Light.woff2",
+      style: "normal",
+      weight: "300",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Regular.woff2",
+      style: "normal",
+      weight: "400",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Medium.woff2",
+      style: "normal",
+      weight: "500",
+    },
+    {
+      path: "../public/assets/fonts/Inter-SemiBold.woff2",
+      style: "normal",
+      weight: "600",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Bold.woff2",
+      style: "normal",
+      weight: "700",
+    },
+    {
+      path: "../public/assets/fonts/Inter-ExtraBold.woff2",
+      style: "normal",
+      weight: "800",
+    },
+    {
+      path: "../public/assets/fonts/Inter-Black.woff2",
+      style: "normal",
+      weight: "900",
+    },
+  ],
   variable: "--font-sans",
-  adjustFontFallback: true,
-  display: "optional",
-  fallback: [
-    "ui-sans-serif",
-    "system-ui",
-    "-apple-system",
-    "BlinkMacSystemFont",
-    '"Segoe UI"',
-    "Roboto",
-    '"Helvetica Neue"',
-    "Arial",
-    '"Noto Sans"',
-    "sans-serif",
-    '"Apple Color Emoji"',
-    '"Segoe UI Emoji"',
-    '"Segoe UI Symbol"',
-    '"Noto Color Emoji"',
+});
+
+const fontMono = localFont({
+  src: [
+    {
+      path: "../public/assets/fonts/FiraCode-Regular.woff2",
+      style: "normal",
+      weight: "400",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-Medium.woff2",
+      style: "normal",
+      weight: "500",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-SemiBold.woff2",
+      style: "normal",
+      weight: "600",
+    },
+    {
+      path: "../public/assets/fonts/FiraCode-Bold.woff2",
+      style: "normal",
+      weight: "700",
+    },
   ],
-  preload: true,
-  style: "normal",
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
+  variable: "--font-mono",
 });
+
+export const fonts = {
+  mono: fontMono,
+  sans: fontSans,
+};
diff --git a/apps/docs/config/github-info.json b/apps/docs/config/github-info.json
new file mode 100644
index 0000000000..4c3cc942d0
--- /dev/null
+++ b/apps/docs/config/github-info.json
@@ -0,0 +1,6 @@
+{
+  "stars": { "raw": 22002, "formatted": "22K" },
+  "forks": 1536,
+  "subscribers": 85,
+  "openIssues": 433
+}
diff --git a/apps/docs/config/routes.json b/apps/docs/config/routes.json
index 583e220fa7..5f080986d7 100644
--- a/apps/docs/config/routes.json
+++ b/apps/docs/config/routes.json
@@ -12,6 +12,12 @@
           "keywords": "introduction, nextui",
           "path": "/docs/guide/introduction.mdx"
         },
+        {
+          "key": "design-principles",
+          "title": "Design Principles",
+          "keywords": "design principles, nextui",
+          "path": "/docs/guide/design-principles.mdx"
+        },
         {
           "key": "installation",
           "title": "Installation",
@@ -22,20 +28,21 @@
           "key": "cli",
           "title": "CLI",
           "keywords": "cli, command line interface",
-          "path": "/docs/guide/cli.mdx",
-          "newPost": true
-        },
-        {
-          "key": "design-principles",
-          "title": "Design Principles",
-          "keywords": "design principles, nextui",
-          "path": "/docs/guide/design-principles.mdx"
+          "path": "/docs/guide/cli.mdx"
         },
         {
           "key": "routing",
           "title": "Routing",
           "keywords": "client side routing, routing, browser routing, nextui, next.js router, react router, remix router",
-          "path": "/docs/guide/routing.mdx"
+          "path": "/docs/guide/routing.mdx",
+          "updated": true
+        },
+        {
+          "key": "forms",
+          "title": "Forms",
+          "keywords": "forms, form validation, nextui",
+          "path": "/docs/guide/forms.mdx",
+          "newPost": true
         },
         {
           "key": "upgrade-to-v2",
@@ -112,7 +119,8 @@
         {
           "key": "dark-mode",
           "title": "Dark mode",
-          "path": "/docs/customization/dark-mode.mdx"
+          "path": "/docs/customization/dark-mode.mdx",
+          "updated": true
         },
         {
           "key": "override-styles",
@@ -142,7 +150,15 @@
           "key": "autocomplete",
           "title": "Autocomplete",
           "keywords": "autocomplete, auto suggest, search, typeahead",
-          "path": "/docs/components/autocomplete.mdx"
+          "path": "/docs/components/autocomplete.mdx",
+          "updated": true
+        },
+        {
+          "key": "alert",
+          "title": "Alert",
+          "keywords": "alert, notification, message",
+          "path": "/docs/components/alert.mdx",
+          "newPost": true
         },
         {
           "key": "avatar",
@@ -154,8 +170,7 @@
           "key": "badge",
           "title": "Badge",
           "keywords": "badge, markers, status indication, count display",
-          "path": "/docs/components/badge.mdx",
-          "updated": true
+          "path": "/docs/components/badge.mdx"
         },
         {
           "key": "breadcrumbs",
@@ -167,14 +182,14 @@
           "key": "button",
           "title": "Button",
           "keywords": "button, interactive, action trigger, click events",
-          "path": "/docs/components/button.mdx"
+          "path": "/docs/components/button.mdx",
+          "updated": true
         },
         {
           "key": "calendar",
           "title": "Calendar",
           "keywords": "calendar, date picker, month picker, year picker",
-          "path": "/docs/components/calendar.mdx",
-          "newPost": true
+          "path": "/docs/components/calendar.mdx"
         },
         {
           "key": "card",
@@ -193,7 +208,8 @@
           "key": "checkbox-group",
           "title": "Checkbox Group",
           "keywords": "checkbox group, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox-group.mdx"
+          "path": "/docs/components/checkbox-group.mdx",
+          "updated": true
         },
         {
           "key": "chip",
@@ -217,22 +233,19 @@
           "key": "date-input",
           "title": "Date Input",
           "keywords": "date-input, time, input, timezone",
-          "path": "/docs/components/date-input.mdx",
-          "newPost": true
+          "path": "/docs/components/date-input.mdx"
         },
         {
           "key": "date-picker",
           "title": "Date Picker",
           "keywords": "date-picker, time, input, timezone",
-          "path": "/docs/components/date-picker.mdx",
-          "newPost": true
+          "path": "/docs/components/date-picker.mdx"
         },
         {
           "key": "date-range-picker",
           "title": "Date Range Picker",
           "keywords": "date-range-picker, date-picker, time, input, timezone",
-          "path": "/docs/components/date-range-picker.mdx",
-          "newPost": true
+          "path": "/docs/components/date-range-picker.mdx"
         },
         {
           "key": "divider",
@@ -246,6 +259,20 @@
           "keywords": "dropdown, menu, selection, option list",
           "path": "/docs/components/dropdown.mdx"
         },
+        {
+          "key": "drawer",
+          "title": "Drawer",
+          "keywords": "drawer, panel, slide, overlay",
+          "path": "/docs/components/drawer.mdx",
+          "newPost": true
+        },
+        {
+          "key": "form",
+          "title": "Form",
+          "keywords": "forms, form validation, nextui",
+          "path": "/docs/components/form.mdx",
+          "newPost": true
+        },
         {
           "key": "image",
           "title": "Image",
@@ -256,7 +283,15 @@
           "key": "input",
           "title": "Input",
           "keywords": "input, text box, form field, data entry",
-          "path": "/docs/components/input.mdx"
+          "path": "/docs/components/input.mdx",
+          "updated": true
+        },
+        {
+          "key": "input-otp",
+          "title": "Input OTP",
+          "keywords": "input, otp, auth, verification code",
+          "path": "/docs/components/input-otp.mdx",
+          "newPost": true
         },
         {
           "key": "kbd",
@@ -274,13 +309,15 @@
           "key": "listbox",
           "title": "Listbox",
           "keywords": "listbox, selection, option list, multiple choice",
-          "path": "/docs/components/listbox.mdx"
+          "path": "/docs/components/listbox.mdx",
+          "updated": true
         },
         {
           "key": "modal",
           "title": "Modal",
           "keywords": "modal, dialog box, popup, overlay, content focus",
-          "path": "/docs/components/modal.mdx"
+          "path": "/docs/components/modal.mdx",
+          "updated": true
         },
         {
           "key": "navbar",
@@ -310,14 +347,14 @@
           "key": "radio-group",
           "title": "Radio Group",
           "keywords": "radio group, selection set, option selection, exclusive choices",
-          "path": "/docs/components/radio-group.mdx"
+          "path": "/docs/components/radio-group.mdx",
+          "updated": true
         },
         {
           "key": "range-calendar",
           "title": "Range Calendar",
           "keywords": "range calendar, date picker, month picker, year picker",
-          "path": "/docs/components/range-calendar.mdx",
-          "newPost": true
+          "path": "/docs/components/range-calendar.mdx"
         },
         {
           "key": "scroll-shadow",
@@ -329,14 +366,14 @@
           "key": "select",
           "title": "Select",
           "keywords": "select, selection, option list, multiple choice",
-          "path": "/docs/components/select.mdx"
+          "path": "/docs/components/select.mdx",
+          "updated": true
         },
         {
           "key": "skeleton",
           "title": "Skeleton",
           "keywords": "skeleton, loading state, placeholder, content preview",
-          "path": "/docs/components/skeleton.mdx",
-          "updated": true
+          "path": "/docs/components/skeleton.mdx"
         },
         {
           "key": "slider",
@@ -366,7 +403,8 @@
           "key": "switch",
           "title": "Switch",
           "keywords": "switch, toggle, binary input, on/off control",
-          "path": "/docs/components/switch.mdx"
+          "path": "/docs/components/switch.mdx",
+          "updated": true
         },
         {
           "key": "table",
@@ -378,28 +416,33 @@
           "key": "tabs",
           "title": "Tabs",
           "keywords": "tabs, section navigation, categorized content, tabbed interface",
-          "path": "/docs/components/tabs.mdx",
-          "updated": true
+          "path": "/docs/components/tabs.mdx"
+        },
+        {
+          "key": "toast",
+          "title": "Toast",
+          "keywords": "toast, notification, message",
+          "path": "/docs/components/toast.mdx",
+          "comingSoon": true
         },
         {
           "key": "textarea",
           "title": "Textarea",
           "keywords": "textarea, multi-line text input, large text field, form control",
-          "path": "/docs/components/textarea.mdx"
+          "path": "/docs/components/textarea.mdx",
+          "updated": true
         },
         {
           "key": "time-input",
           "title": "Time Input",
           "keywords": "timeinput, time, input, timezone",
-          "path": "/docs/components/time-input.mdx",
-          "newPost": true
+          "path": "/docs/components/time-input.mdx"
         },
         {
           "key": "tooltip",
           "title": "Tooltip",
           "keywords": "tooltip, hint, descriptive message, hover info",
-          "path": "/docs/components/tooltip.mdx",
-          "updated": true
+          "path": "/docs/components/tooltip.mdx"
         },
         {
           "key": "user",
@@ -472,4 +515,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/docs/config/search-meta.json b/apps/docs/config/search-meta.json
index 26bb62f6f1..793ac4a26e 100644
--- a/apps/docs/config/search-meta.json
+++ b/apps/docs/config/search-meta.json
@@ -1,276 +1,235 @@
 [
   {
     "content": "NextUI CLI",
-    "objectID": "e496f6b7-e82c-42af-88d0-5e528ec7bc71",
+    "objectID": "2bee8c7f-5d8e-4e3d-a222-43d3a6d778ff",
     "type": "lvl1",
     "url": "/docs/api-references/cli-api",
     "hierarchy": { "lvl1": "NextUI CLI" }
   },
   {
     "content": "init",
-    "objectID": "c11c9112-be1f-4f9a-88a1-d75d11a772e8",
+    "objectID": "5420db40-89f4-456f-9c4a-cef63b5285f7",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#init",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "init", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "daef8085-7dd6-4ab4-aa1d-a47b85c06391",
+    "objectID": "f54342fb-bbaa-4397-8456-2644afddca60",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "init", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "043bafe4-97d0-4747-b28d-1d8d8dd1ba0a",
+    "objectID": "acfb11ab-da07-413f-a050-33408d086215",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "add",
-    "objectID": "4c7e4e23-4cae-410f-bb66-941741ca793d",
+    "objectID": "351c293b-d25a-407f-bfce-c6319786de46",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#add",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "add", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "099f14f5-63b7-4303-acf6-09747e555f5e",
+    "objectID": "60de9a6b-1366-4347-9856-b5e016fede16",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-1",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "add", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "80df6ba1-999e-4190-8253-486a3cc92192",
+    "objectID": "9c2bda96-3c69-4575-9576-ac129e9f8536",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-1",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "upgrade",
-    "objectID": "7179cb51-eeda-45d6-bf5d-840d3e7480ee",
+    "objectID": "f9b4644a-9942-455c-bf2f-d4380bd4b06c",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#upgrade",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "upgrade", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "69b44c5f-6e9d-409b-b9f1-f7df39dde20d",
+    "objectID": "f2be4318-28d9-47e6-b828-24ce93538d6d",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-2",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "upgrade", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "b5a9b381-6d4d-4d5f-96b9-e34fcfeb0bf1",
+    "objectID": "de9bfbc7-5b6b-4559-b4d1-2aa25723b003",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-2",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "remove",
-    "objectID": "63ee5d85-d176-41c3-8613-c816a9f971c9",
+    "objectID": "f8403115-a9a5-4ad2-8dc9-296eceb25a61",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#remove",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "remove", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "958fc744-dd61-4103-b8d4-000dedd01975",
+    "objectID": "820662cd-1e3c-464f-a58f-6127767ca4e4",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-3",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "remove", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "d3c7c402-0f1b-439f-9c91-a071579f685d",
+    "objectID": "bf5b5eff-aef7-4b2d-93c1-0900f116ff18",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-3",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "list",
-    "objectID": "921c7c6d-3c11-4e96-a074-16e79c1d6f80",
+    "objectID": "aeb637c8-0d5a-48f3-9a45-309039c75feb",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#list",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "list", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "7c395592-6c9b-4b93-a07a-039b4132527a",
+    "objectID": "6f944bc5-fd4e-4b6a-b310-0a8d554dce73",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-4",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "list", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "99e17560-4d9c-4b7f-850a-da58f22d9397",
+    "objectID": "6e81624d-0250-4532-800b-c7c1191fb61b",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-4",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "doctor",
-    "objectID": "5a0406ce-ed0f-46fd-9cfd-088a7067d713",
+    "objectID": "4f8956dd-92db-4fc5-a1a9-6f4f188f3686",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#doctor",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "doctor", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "14d04805-edd0-488b-b519-7e25e406fc3b",
+    "objectID": "87b73e88-9bd8-4086-8e9a-973b949ff633",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-5",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "doctor", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "5c8339e9-7328-4db4-baf1-a8ffa0c07e3e",
+    "objectID": "456bec0a-d2db-4f09-8f26-62856aacc9f3",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-5",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "env",
-    "objectID": "e00f8465-5ed6-4a1c-b4cf-88fd4b9a72e0",
+    "objectID": "c82df2ec-e18b-495a-b9b2-17ce0a65d7e2",
     "type": "lvl2",
     "url": "/docs/api-references/cli-api#env",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "env", "lvl3": null }
   },
   {
     "content": "Options",
-    "objectID": "52e1ceee-7848-4ef6-99ea-3b8aea2a9b72",
+    "objectID": "7a7affc1-fa30-4336-b935-d398b465af36",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#options-6",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "env", "lvl3": "Options" }
   },
   {
     "content": "Example",
-    "objectID": "2fa0f558-10f0-4408-aa27-facfd62a4582",
+    "objectID": "fe84ec26-6259-41a8-a0ec-ffcff52375f7",
     "type": "lvl3",
     "url": "/docs/api-references/cli-api#example-6",
     "hierarchy": { "lvl1": "NextUI CLI", "lvl2": "Options", "lvl3": "Example" }
   },
   {
     "content": "NextUI Provider",
-    "objectID": "c951ffe5-921a-4662-9bea-b10c848b1b25",
+    "objectID": "a05cebdb-9dc8-4ce8-a655-75891f254082",
     "type": "lvl1",
     "url": "/docs/api-references/nextui-provider",
     "hierarchy": { "lvl1": "NextUI Provider" }
   },
   {
-    "content": "Props",
-    "objectID": "43f70803-76eb-457c-89f7-c2a70eb23b2c",
+    "content": "Import",
+    "objectID": "4430c379-9fa1-4f9a-9858-c61d0a26fdfd",
     "type": "lvl2",
-    "url": "/docs/api-references/nextui-provider#props",
-    "hierarchy": { "lvl1": "NextUI Provider", "lvl2": "Props", "lvl3": null }
-  },
-  {
-    "content": "navigate",
-    "objectID": "fffabecd-658a-4973-aaf1-103fa4b89b67",
-    "type": "lvl3",
-    "url": "/docs/api-references/nextui-provider#navigate",
-    "hierarchy": {
-      "lvl1": "NextUI Provider",
-      "lvl2": "Props",
-      "lvl3": "navigate"
-    }
-  },
-  {
-    "content": "locale",
-    "objectID": "1aeb10df-e1f5-49c9-b5dd-5996cf566361",
-    "type": "lvl3",
-    "url": "/docs/api-references/nextui-provider#locale",
-    "hierarchy": {
-      "lvl1": "NextUI Provider",
-      "lvl2": "navigate",
-      "lvl3": "locale"
-    }
+    "url": "/docs/api-references/nextui-provider#import",
+    "hierarchy": { "lvl1": "NextUI Provider", "lvl2": "Import", "lvl3": null }
   },
   {
-    "content": "defaultDates",
-    "objectID": "f3e72d3f-fe27-4d99-8c28-db8dbf3a86a2",
-    "type": "lvl3",
-    "url": "/docs/api-references/nextui-provider#defaultdates",
-    "hierarchy": {
-      "lvl1": "NextUI Provider",
-      "lvl2": "locale",
-      "lvl3": "defaultDates"
-    }
+    "content": "Usage",
+    "objectID": "a6ae778d-4c9d-479f-9154-f550dbf682a3",
+    "type": "lvl2",
+    "url": "/docs/api-references/nextui-provider#usage",
+    "hierarchy": { "lvl1": "NextUI Provider", "lvl2": "Usage", "lvl3": null }
   },
   {
-    "content": "createCalendar",
-    "objectID": "9418d25d-55de-447e-96c8-9a4366d31b95",
-    "type": "lvl3",
-    "url": "/docs/api-references/nextui-provider#createcalendar",
-    "hierarchy": {
-      "lvl1": "NextUI Provider",
-      "lvl2": "defaultDates",
-      "lvl3": "createCalendar"
-    }
+    "content": "Props",
+    "objectID": "6ec9a65a-0103-465f-ad3f-63e91233294d",
+    "type": "lvl2",
+    "url": "/docs/api-references/nextui-provider#props",
+    "hierarchy": { "lvl1": "NextUI Provider", "lvl2": "Props", "lvl3": null }
   },
   {
     "content": "Types",
-    "objectID": "19f0447b-0f55-4030-ada2-2285d2da5573",
+    "objectID": "e0105d59-c205-4ae0-a3e3-031f80ea563e",
     "type": "lvl2",
     "url": "/docs/api-references/nextui-provider#types",
     "hierarchy": { "lvl1": "NextUI Provider", "lvl2": "Types", "lvl3": null }
   },
-  {
-    "content": "CalendarDate",
-    "objectID": "f8a3e3e1-07c2-41ec-be47-96eb441258e0",
-    "type": "lvl3",
-    "url": "/docs/api-references/nextui-provider#calendardate",
-    "hierarchy": {
-      "lvl1": "NextUI Provider",
-      "lvl2": "Types",
-      "lvl3": "CalendarDate"
-    }
-  },
   {
     "content": "SupportedCalendars",
-    "objectID": "fb9e685a-8680-4fe1-9876-23d1d129aaac",
+    "objectID": "cd4ee0a0-efcc-4e17-a559-79f5228beda0",
     "type": "lvl3",
     "url": "/docs/api-references/nextui-provider#supportedcalendars",
     "hierarchy": {
       "lvl1": "NextUI Provider",
-      "lvl2": "CalendarDate",
+      "lvl2": "Types",
       "lvl3": "SupportedCalendars"
     }
   },
   {
     "content": "Accordion",
-    "objectID": "86be0b63-96e6-4b54-a052-9b204eabf4f2",
+    "objectID": "257af4e9-c50d-40ec-84fa-8fcee57f10f2",
     "type": "lvl1",
     "url": "/docs/components/accordion",
     "hierarchy": { "lvl1": "Accordion" }
   },
   {
     "content": "Installation",
-    "objectID": "cd6e357d-6ff0-48da-af5e-91b1ac7b6fbb",
+    "objectID": "d0d270ab-7275-476d-926b-8bc487c50f32",
     "type": "lvl2",
     "url": "/docs/components/accordion#installation",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "07ac69c7-c1a5-4e79-8c79-95c1361349cc",
+    "objectID": "fe3f0acf-bc34-4d37-a841-577f3fee5494",
     "type": "lvl2",
     "url": "/docs/components/accordion#import",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "21450940-ebc0-4ece-a50f-b944298392a9",
+    "objectID": "6b03a63a-26d7-4252-a29a-abd909335b22",
     "type": "lvl2",
     "url": "/docs/components/accordion#usage",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "With Subtitle",
-    "objectID": "5a757a24-2d44-4973-9424-9bd5d83abc44",
+    "objectID": "d32a4a59-90f1-4e2f-a3fd-5888ae96b880",
     "type": "lvl3",
     "url": "/docs/components/accordion#with-subtitle",
     "hierarchy": {
@@ -281,7 +240,7 @@
   },
   {
     "content": "Expand multiple items",
-    "objectID": "f125892e-96eb-4363-bb86-b8356deaf68d",
+    "objectID": "cfdf8e6d-4813-4500-a36e-1cb50f2c1728",
     "type": "lvl3",
     "url": "/docs/components/accordion#expand-multiple-items",
     "hierarchy": {
@@ -292,7 +251,7 @@
   },
   {
     "content": "Compact",
-    "objectID": "8b274b03-924d-403f-a2fa-7f165bd2749c",
+    "objectID": "341b82bc-a3c0-4319-a221-71695c760b26",
     "type": "lvl3",
     "url": "/docs/components/accordion#compact",
     "hierarchy": {
@@ -303,35 +262,35 @@
   },
   {
     "content": "Variants",
-    "objectID": "027a8f0a-8213-41f4-b4ab-dc95f18477af",
+    "objectID": "cd5901c7-9b16-42e5-bc00-a3c2a7d38ff2",
     "type": "lvl3",
     "url": "/docs/components/accordion#variants",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Compact", "lvl3": "Variants" }
   },
   {
     "content": "Light variant",
-    "objectID": "888c3b26-c866-4427-86de-14906a371348",
+    "objectID": "26719321-b11b-4a27-891b-b9fbcd5b666c",
     "type": "lvl4",
     "url": "/docs/components/accordion#light-variant",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Variants", "lvl3": null }
   },
   {
     "content": "Shadow variant",
-    "objectID": "e409cbaf-a7a3-4369-b4ed-d1971bf6b3aa",
+    "objectID": "d60cc2d7-4eb9-4fa6-9ced-aca937f5bd7d",
     "type": "lvl4",
     "url": "/docs/components/accordion#shadow-variant",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Light variant", "lvl3": null }
   },
   {
     "content": "Bordered variant",
-    "objectID": "fd1726b1-50f8-4d5a-b1c2-0bc98b3ada4d",
+    "objectID": "61de01c9-0f01-48cc-a28b-2d54a2a8ff46",
     "type": "lvl4",
     "url": "/docs/components/accordion#bordered-variant",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Shadow variant", "lvl3": null }
   },
   {
     "content": "Splitted variant",
-    "objectID": "d6e6ddb6-f6eb-46c0-bac4-34d8e5d54b2b",
+    "objectID": "754ca65f-0181-4968-b233-3602c37072e9",
     "type": "lvl4",
     "url": "/docs/components/accordion#splitted-variant",
     "hierarchy": {
@@ -342,7 +301,7 @@
   },
   {
     "content": "Default expanded keys",
-    "objectID": "6ff232b4-7d41-4615-bea2-6565213905da",
+    "objectID": "786a751d-0b3a-419a-8a73-10908bcf7166",
     "type": "lvl3",
     "url": "/docs/components/accordion#default-expanded-keys",
     "hierarchy": {
@@ -353,7 +312,7 @@
   },
   {
     "content": "Disabled keys",
-    "objectID": "9816e00a-a992-4686-a5ce-e1677afb27df",
+    "objectID": "a5750fed-c550-4739-8c67-2d13b09844bc",
     "type": "lvl3",
     "url": "/docs/components/accordion#disabled-keys",
     "hierarchy": {
@@ -364,7 +323,7 @@
   },
   {
     "content": "Start content",
-    "objectID": "0ef7b942-efb5-40bc-a1c7-c55781d43047",
+    "objectID": "24fbcee5-23f3-4d47-b5ae-c40a3602beae",
     "type": "lvl3",
     "url": "/docs/components/accordion#start-content",
     "hierarchy": {
@@ -375,7 +334,7 @@
   },
   {
     "content": "Custom Indicator",
-    "objectID": "461a0f16-7401-4401-b08f-391271a92365",
+    "objectID": "44bda5ba-e409-4f23-92fb-f4733a07e99f",
     "type": "lvl3",
     "url": "/docs/components/accordion#custom-indicator",
     "hierarchy": {
@@ -386,7 +345,7 @@
   },
   {
     "content": "Custom Motion",
-    "objectID": "2a5dc7d5-7355-4902-998b-e5de1639e78d",
+    "objectID": "03afefee-d673-4ae0-a8b2-bd4cfd5d0643",
     "type": "lvl3",
     "url": "/docs/components/accordion#custom-motion",
     "hierarchy": {
@@ -397,7 +356,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "c335e125-2356-4b59-8f07-af00a861af1c",
+    "objectID": "514e0113-d2d0-4995-8a18-dada42fa2c09",
     "type": "lvl3",
     "url": "/docs/components/accordion#controlled",
     "hierarchy": {
@@ -408,7 +367,7 @@
   },
   {
     "content": "Accordion Item Slots",
-    "objectID": "f7f95af2-a4a6-4802-9823-c28dd933952c",
+    "objectID": "43b03e39-f6cd-43d6-aa98-ba7995d7922b",
     "type": "lvl2",
     "url": "/docs/components/accordion#accordion-item-slots",
     "hierarchy": {
@@ -419,7 +378,7 @@
   },
   {
     "content": "Custom Accordion Styles",
-    "objectID": "b2dbef14-c2ca-4a3b-93df-d839c2afee20",
+    "objectID": "52165b96-d1df-4d4a-9651-a1beced5bdbf",
     "type": "lvl3",
     "url": "/docs/components/accordion#custom-accordion-styles",
     "hierarchy": {
@@ -430,7 +389,7 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "7318af55-3ea0-4312-9cc1-522c98b8b91f",
+    "objectID": "66d21025-c9d4-4195-8d4f-23b6fd333a16",
     "type": "lvl2",
     "url": "/docs/components/accordion#data-attributes",
     "hierarchy": {
@@ -441,21 +400,21 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "a348fc15-f115-42c1-98ca-0c0015cfc575",
+    "objectID": "3fd50608-dde5-42d0-8ee7-0fd4bf0d5b3b",
     "type": "lvl2",
     "url": "/docs/components/accordion#accessibility",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "e44c37be-6396-4eb6-ab23-468e1063a358",
+    "objectID": "fc20d595-54da-430d-8389-46f23cce8f3d",
     "type": "lvl2",
     "url": "/docs/components/accordion#api",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Accordion Props",
-    "objectID": "ef63d82f-4813-4466-a881-4d101a901d7e",
+    "objectID": "9ee97d74-1baa-469a-a54f-75a6a00c5000",
     "type": "lvl3",
     "url": "/docs/components/accordion#accordion-props",
     "hierarchy": {
@@ -466,7 +425,7 @@
   },
   {
     "content": "Accordion Events",
-    "objectID": "61ebf045-128f-4937-8662-8b356a260b77",
+    "objectID": "477724e3-118a-4e10-bb25-4f49dca52b2c",
     "type": "lvl3",
     "url": "/docs/components/accordion#accordion-events",
     "hierarchy": {
@@ -477,7 +436,7 @@
   },
   {
     "content": "Accordion Item Props",
-    "objectID": "ecf19416-89d9-449f-ad11-8920a0bcaa5f",
+    "objectID": "fa18efa1-5fa7-4d1b-b4ff-5ebde2353c16",
     "type": "lvl3",
     "url": "/docs/components/accordion#accordion-item-props",
     "hierarchy": {
@@ -488,7 +447,7 @@
   },
   {
     "content": "Accordion Item Events",
-    "objectID": "9cb509cf-e360-4974-a1e0-dcdb54edcf7a",
+    "objectID": "a09ed664-a287-468e-bbfe-47c4e1d96685",
     "type": "lvl3",
     "url": "/docs/components/accordion#accordion-item-events",
     "hierarchy": {
@@ -499,7 +458,7 @@
   },
   {
     "content": "Types",
-    "objectID": "8109dccf-4008-4070-a769-49a5cc1b7d7f",
+    "objectID": "837add66-835e-4e26-8fb8-6f39502c673d",
     "type": "lvl3",
     "url": "/docs/components/accordion#types",
     "hierarchy": {
@@ -510,14 +469,14 @@
   },
   {
     "content": "Accordion Item Indicator Props",
-    "objectID": "8aacc034-5480-493f-b562-5fc19f276815",
+    "objectID": "0515b0e7-13e0-490d-8407-5551709746fb",
     "type": "lvl4",
     "url": "/docs/components/accordion#accordion-item-indicator-props",
     "hierarchy": { "lvl1": "Accordion", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Accordion Item classNames",
-    "objectID": "5fba150b-5b6b-41ac-a7aa-b5695905649f",
+    "objectID": "a6bb518f-e38f-4367-a3e0-0a52ef42ead4",
     "type": "lvl3",
     "url": "/docs/components/accordion#accordion-item-classnames",
     "hierarchy": {
@@ -528,7 +487,7 @@
   },
   {
     "content": "Motion Props",
-    "objectID": "8e361e09-ceda-4494-9215-18465038946b",
+    "objectID": "1ad1e77d-24ed-4a2d-a253-6ca925f00441",
     "type": "lvl4",
     "url": "/docs/components/accordion#motion-props",
     "hierarchy": {
@@ -537,16 +496,158 @@
       "lvl3": null
     }
   },
+  {
+    "content": "Alert",
+    "objectID": "59a5448a-d68e-47c7-a108-89724dacc73f",
+    "type": "lvl1",
+    "url": "/docs/components/alert",
+    "hierarchy": { "lvl1": "Alert" }
+  },
+  {
+    "content": "Installation",
+    "objectID": "35772670-58e4-4177-b4b5-77e356e1473d",
+    "type": "lvl2",
+    "url": "/docs/components/alert#installation",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Installation", "lvl3": null }
+  },
+  {
+    "content": "Import",
+    "objectID": "99ca0be3-6b24-4261-a27b-0570922053c0",
+    "type": "lvl2",
+    "url": "/docs/components/alert#import",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Import", "lvl3": null }
+  },
+  {
+    "content": "Usage",
+    "objectID": "8a1bd989-317b-46fd-838d-a8c7240d1237",
+    "type": "lvl2",
+    "url": "/docs/components/alert#usage",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Usage", "lvl3": null }
+  },
+  {
+    "content": "Colors",
+    "objectID": "f7eb9054-f845-4745-9515-40fb26046086",
+    "type": "lvl3",
+    "url": "/docs/components/alert#colors",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Usage", "lvl3": "Colors" }
+  },
+  {
+    "content": "Variants",
+    "objectID": "a2339824-05ac-4c03-8e93-840af3129413",
+    "type": "lvl3",
+    "url": "/docs/components/alert#variants",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Colors", "lvl3": "Variants" }
+  },
+  {
+    "content": "Radius",
+    "objectID": "1eba9be6-3333-43d4-92fc-11b6c1d0e153",
+    "type": "lvl3",
+    "url": "/docs/components/alert#radius",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Variants", "lvl3": "Radius" }
+  },
+  {
+    "content": "With Icon",
+    "objectID": "4e533ef4-b9f4-44fc-9105-513de3bfe86d",
+    "type": "lvl3",
+    "url": "/docs/components/alert#with-icon",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Radius", "lvl3": "With Icon" }
+  },
+  {
+    "content": "With Action",
+    "objectID": "cb1ee2ef-46f9-41f3-9d44-4085e952b5c6",
+    "type": "lvl3",
+    "url": "/docs/components/alert#with-action",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "With Icon", "lvl3": "With Action" }
+  },
+  {
+    "content": "Controlled Visibility",
+    "objectID": "15746aac-55c0-40e5-85e2-5b42142f7835",
+    "type": "lvl3",
+    "url": "/docs/components/alert#controlled-visibility",
+    "hierarchy": {
+      "lvl1": "Alert",
+      "lvl2": "With Action",
+      "lvl3": "Controlled Visibility"
+    }
+  },
+  {
+    "content": "Custom Styles",
+    "objectID": "bb2c1a8b-8f35-4597-b961-8e6bd3e0ce8a",
+    "type": "lvl3",
+    "url": "/docs/components/alert#custom-styles",
+    "hierarchy": {
+      "lvl1": "Alert",
+      "lvl2": "Controlled Visibility",
+      "lvl3": "Custom Styles"
+    }
+  },
+  {
+    "content": "Custom Implementation",
+    "objectID": "6b9043ea-4bf3-428b-a799-5f5173ba7fe5",
+    "type": "lvl3",
+    "url": "/docs/components/alert#custom-implementation",
+    "hierarchy": {
+      "lvl1": "Alert",
+      "lvl2": "Custom Styles",
+      "lvl3": "Custom Implementation"
+    }
+  },
+  {
+    "content": "Data Attributes",
+    "objectID": "ec58acd2-040a-47c1-ab08-c5a09f85352d",
+    "type": "lvl2",
+    "url": "/docs/components/alert#data-attributes",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Data Attributes", "lvl3": null }
+  },
+  {
+    "content": "Slots",
+    "objectID": "004ab6c3-01d8-4974-b31a-fed42445f1e6",
+    "type": "lvl3",
+    "url": "/docs/components/alert#slots",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Data Attributes", "lvl3": "Slots" }
+  },
+  {
+    "content": "Accessibility",
+    "objectID": "4250a6ac-7eee-4708-a309-f610d6ddfdd3",
+    "type": "lvl2",
+    "url": "/docs/components/alert#accessibility",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "Accessibility", "lvl3": null }
+  },
+  {
+    "content": "API",
+    "objectID": "38caf99f-8a72-460f-8bcd-db681a66e7d2",
+    "type": "lvl2",
+    "url": "/docs/components/alert#api",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "API", "lvl3": null }
+  },
+  {
+    "content": "Alert Props",
+    "objectID": "b5f744c0-6603-4ac0-a53c-ff246233d21a",
+    "type": "lvl3",
+    "url": "/docs/components/alert#alert-props",
+    "hierarchy": { "lvl1": "Alert", "lvl2": "API", "lvl3": "Alert Props" }
+  },
+  {
+    "content": "Alert Events",
+    "objectID": "c9276d71-ec89-4639-be9e-f1dda8a28e43",
+    "type": "lvl3",
+    "url": "/docs/components/alert#alert-events",
+    "hierarchy": {
+      "lvl1": "Alert",
+      "lvl2": "Alert Props",
+      "lvl3": "Alert Events"
+    }
+  },
   {
     "content": "Autocomplete",
-    "objectID": "3becd62f-9d70-4cd0-abcd-7af2f64cb7a7",
+    "objectID": "92b5ef36-d9a3-4bbd-8e4a-6c997daa7868",
     "type": "lvl1",
     "url": "/docs/components/autocomplete",
     "hierarchy": { "lvl1": "Autocomplete" }
   },
   {
     "content": "Installation",
-    "objectID": "4621be9a-8e76-49e9-8efb-747e0dc40248",
+    "objectID": "63b6bb66-c3a1-431e-8328-936720cc42af",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#installation",
     "hierarchy": {
@@ -557,21 +658,21 @@
   },
   {
     "content": "Import",
-    "objectID": "644c1971-f7b0-4b99-8354-ad7f2900e92b",
+    "objectID": "20309c3d-2cbf-4f9f-a6eb-236d286b5109",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#import",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "23b83c99-9f7d-4d51-b896-8d4b18418db1",
+    "objectID": "985d5913-bbe9-4a39-83ea-9e7ae6cbf0f0",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#usage",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Dynamic items",
-    "objectID": "87a9494c-4de8-4a1d-beca-6ea76d131fcb",
+    "objectID": "b71d2997-fc37-4860-9d88-51d247ffe758",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#dynamic-items",
     "hierarchy": {
@@ -582,7 +683,7 @@
   },
   {
     "content": "Disabled",
-    "objectID": "ac4c838f-01aa-406a-b3ed-278df8b670ca",
+    "objectID": "36002c85-f81c-44ab-99f5-301f78f48d89",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#disabled",
     "hierarchy": {
@@ -593,7 +694,7 @@
   },
   {
     "content": "Disabled Items",
-    "objectID": "cfe2f0f6-04b2-4946-8359-e45d772e9b6d",
+    "objectID": "8a5bd6ae-025e-4ea1-a29e-a1e7668c666f",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#disabled-items",
     "hierarchy": {
@@ -604,7 +705,7 @@
   },
   {
     "content": "Required",
-    "objectID": "ae913601-c241-4c20-a695-f6488802a308",
+    "objectID": "dfed0e22-1047-46e2-aa70-669ee4ec668e",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#required",
     "hierarchy": {
@@ -613,23 +714,38 @@
       "lvl3": "Required"
     }
   },
+  {
+    "content": "Read Only",
+    "objectID": "d887afba-7f1c-4de9-81b5-e3537e675e10",
+    "type": "lvl3",
+    "url": "/docs/components/autocomplete#read-only",
+    "hierarchy": {
+      "lvl1": "Autocomplete",
+      "lvl2": "Required",
+      "lvl3": "Read Only"
+    }
+  },
   {
     "content": "Sizes",
-    "objectID": "914609ae-d437-422b-90f1-a415ff2e6c67",
+    "objectID": "90c0526a-bb66-4f2e-951b-9904f46540c9",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#sizes",
-    "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Required", "lvl3": "Sizes" }
+    "hierarchy": {
+      "lvl1": "Autocomplete",
+      "lvl2": "Read Only",
+      "lvl3": "Sizes"
+    }
   },
   {
     "content": "Colors",
-    "objectID": "8462a655-c43a-45a9-ba0b-8abcdcc56246",
+    "objectID": "c8f93c43-349f-4de7-af9a-fd3e83e2d9b6",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#colors",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "5fe3392e-d7d5-415f-85a0-a9252cafb8e6",
+    "objectID": "bec61616-d097-483a-88b9-d8aabfeffe72",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#variants",
     "hierarchy": {
@@ -640,7 +756,7 @@
   },
   {
     "content": "Label Placements",
-    "objectID": "8b0774b1-5fa9-4b45-8bda-1c892c346693",
+    "objectID": "b4e34d88-e8e0-4299-b8eb-0a80c596e653",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#label-placements",
     "hierarchy": {
@@ -651,7 +767,7 @@
   },
   {
     "content": "Start Content",
-    "objectID": "7f4f6c39-c5a4-4120-9ed2-e7a34f2932e3",
+    "objectID": "e79b991f-b113-489a-ad32-89f57c21cdf0",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#start-content",
     "hierarchy": {
@@ -662,7 +778,7 @@
   },
   {
     "content": "Item Start & End Content",
-    "objectID": "f4ca4433-3988-4468-aaea-4a6eac268434",
+    "objectID": "da35ba84-83b8-49f1-9cad-17d51e6ffd9a",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#item-start--end-content",
     "hierarchy": {
@@ -673,7 +789,7 @@
   },
   {
     "content": "Custom Value",
-    "objectID": "df83129f-e8ad-4441-92c1-bbb3386b7bf5",
+    "objectID": "72def1b0-046a-48ba-8ecb-29bb741386a0",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#custom-value",
     "hierarchy": {
@@ -684,7 +800,7 @@
   },
   {
     "content": "Custom Selector Icon",
-    "objectID": "df5b4cb9-f863-4059-a711-ee18c448d71e",
+    "objectID": "f5e096cb-aa4f-402a-a2e0-2810222a93fe",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#custom-selector-icon",
     "hierarchy": {
@@ -695,7 +811,7 @@
   },
   {
     "content": "Without Scroll Shadow",
-    "objectID": "64b0d65b-b40e-4ab6-8cf9-937849a41d08",
+    "objectID": "a24a7528-0d78-45ee-9983-c3de04322a04",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#without-scroll-shadow",
     "hierarchy": {
@@ -706,7 +822,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "db55ccd8-d8d7-4575-8517-d914ed95ad24",
+    "objectID": "7709f17f-59e7-47bd-9d21-81dde139fb4f",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#with-description",
     "hierarchy": {
@@ -717,7 +833,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "6ec8d383-ee94-4989-9cdd-d659d2367978",
+    "objectID": "9448deb8-1803-40ac-a9e5-95be7deeca35",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#with-error-message",
     "hierarchy": {
@@ -728,7 +844,7 @@
   },
   {
     "content": "Events",
-    "objectID": "1de6fad9-f41d-4c10-b3dc-e20d3f713da0",
+    "objectID": "2babd0b4-3160-4ab1-a159-5c2b9893351c",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#events",
     "hierarchy": {
@@ -739,7 +855,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "3b7af639-4ce6-475c-900d-bc35d3c5a405",
+    "objectID": "84347d36-7943-44f8-8a9a-a7901a245021",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#controlled",
     "hierarchy": {
@@ -750,7 +866,7 @@
   },
   {
     "content": "Fully Controlled",
-    "objectID": "2f0e5117-4dc9-4fd0-85fd-a49254c3c2ef",
+    "objectID": "89a9578f-0605-4276-8eec-3402b6ebde6f",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#fully-controlled",
     "hierarchy": {
@@ -761,7 +877,7 @@
   },
   {
     "content": "Custom Items",
-    "objectID": "df92cd1e-aa96-4652-a73d-7dba6427e2b8",
+    "objectID": "9de47fda-78c2-4ff7-8134-0149c77e28e8",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#custom-items",
     "hierarchy": {
@@ -770,20 +886,31 @@
       "lvl3": "Custom Items"
     }
   },
+  {
+    "content": "Custom Empty Content Message",
+    "objectID": "a314ff1e-cd00-4539-86be-e17d8d6d5cfa",
+    "type": "lvl3",
+    "url": "/docs/components/autocomplete#custom-empty-content-message",
+    "hierarchy": {
+      "lvl1": "Autocomplete",
+      "lvl2": "Custom Items",
+      "lvl3": "Custom Empty Content Message"
+    }
+  },
   {
     "content": "Custom Filtering",
-    "objectID": "00bc06dc-9b5e-432f-8734-830aedaaecb9",
+    "objectID": "d4400fec-524d-4ca2-a94b-9c91506d3f20",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#custom-filtering",
     "hierarchy": {
       "lvl1": "Autocomplete",
-      "lvl2": "Custom Items",
+      "lvl2": "Custom Empty Content Message",
       "lvl3": "Custom Filtering"
     }
   },
   {
     "content": "Asynchronous Filtering",
-    "objectID": "70d420e2-167a-4089-b229-b0cafe2320a1",
+    "objectID": "59145cbc-f1bd-4871-b531-d83ee050a81b",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#asynchronous-filtering",
     "hierarchy": {
@@ -794,7 +921,7 @@
   },
   {
     "content": "Asynchronous Loading",
-    "objectID": "d1dc3946-853e-47ac-88e6-d11141a93db0",
+    "objectID": "0bc5b257-4378-4e2a-a338-860dbf74c495",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#asynchronous-loading",
     "hierarchy": {
@@ -805,7 +932,7 @@
   },
   {
     "content": "With Sections",
-    "objectID": "e5c8af81-4fb7-400c-be37-6379f50f955b",
+    "objectID": "b741bb7b-39f1-4ee1-8cd2-d679789625da",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#with-sections",
     "hierarchy": {
@@ -816,7 +943,7 @@
   },
   {
     "content": "Custom Sections Style",
-    "objectID": "c36945d3-9656-4ea8-b2ec-a4f4b7b0d9b6",
+    "objectID": "fdc2c191-10e4-4c2a-a578-1afe6c41d465",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#custom-sections-style",
     "hierarchy": {
@@ -827,7 +954,7 @@
   },
   {
     "content": "Customizing the Autocomplete",
-    "objectID": "8c67a5ce-65f0-49fc-8ed2-2cb0648a91db",
+    "objectID": "c138e463-d1fa-4afd-9e31-945f2f0f1e16",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#customizing-the-autocomplete",
     "hierarchy": {
@@ -838,14 +965,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "ae3d4a3d-28cd-4f55-8e29-588c2d637425",
+    "objectID": "d0552374-9aaf-4882-a095-d05d7d3f854d",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#slots",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "2591a995-1059-4996-b743-06cb2e5cf684",
+    "objectID": "073e9b42-4f7c-4000-b6bc-40dcf52a8447",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#data-attributes",
     "hierarchy": {
@@ -856,7 +983,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "cd6820ad-4a40-4a65-8fc0-1f80208a515f",
+    "objectID": "3acfd78a-d56a-42ba-8dab-24eab095a4a9",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#accessibility",
     "hierarchy": {
@@ -867,14 +994,14 @@
   },
   {
     "content": "API",
-    "objectID": "4607a4f8-0967-49f6-9f91-630c2ef3aa19",
+    "objectID": "0cc9d185-ab5b-4448-a874-5c7b35eccb98",
     "type": "lvl2",
     "url": "/docs/components/autocomplete#api",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Autocomplete Props",
-    "objectID": "75c5d4f4-822e-4de8-8950-cdf242294761",
+    "objectID": "4a672be8-a66c-4898-96c1-21edf65b8224",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#autocomplete-props",
     "hierarchy": {
@@ -885,7 +1012,7 @@
   },
   {
     "content": "Autocomplete Events",
-    "objectID": "363af6c5-c4e3-4798-becb-e949ed005b9a",
+    "objectID": "2935105e-aa83-466b-97ce-008b44bdf2b5",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#autocomplete-events",
     "hierarchy": {
@@ -896,7 +1023,7 @@
   },
   {
     "content": "AutocompleteItem Props",
-    "objectID": "224f3b6b-ef2a-4df4-b1df-790c87b45b3b",
+    "objectID": "e113f234-a368-4464-9301-cc3346ff2043",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#autocompleteitem-props",
     "hierarchy": {
@@ -907,7 +1034,7 @@
   },
   {
     "content": "AutocompleteItem Events",
-    "objectID": "80885383-ed85-49fd-b985-611e38299d9d",
+    "objectID": "432ff3a9-6b5b-4658-9758-bb6d8ca34097",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#autocompleteitem-events",
     "hierarchy": {
@@ -918,7 +1045,7 @@
   },
   {
     "content": "AutocompleteSection Props",
-    "objectID": "245b3ad9-70f5-43a2-9748-2518e516a858",
+    "objectID": "f0910908-40be-49bb-bf1c-f5d5efc79a4b",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#autocompletesection-props",
     "hierarchy": {
@@ -929,7 +1056,7 @@
   },
   {
     "content": "Types",
-    "objectID": "496986c0-9694-4cce-b15a-6ac1c84cbedc",
+    "objectID": "dbfd3ebf-2e7a-4845-8c6d-9a592fcee05d",
     "type": "lvl3",
     "url": "/docs/components/autocomplete#types",
     "hierarchy": {
@@ -940,77 +1067,77 @@
   },
   {
     "content": "Menu Trigger Action",
-    "objectID": "61a66fd8-ae17-4339-8b4a-ade6b942283b",
+    "objectID": "b388e4e4-6264-42de-ac03-7a1b81d2cd21",
     "type": "lvl4",
     "url": "/docs/components/autocomplete#menu-trigger-action",
     "hierarchy": { "lvl1": "Autocomplete", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Avatar",
-    "objectID": "29c38e92-affc-47af-964f-b229d2583e0a",
+    "objectID": "bfda1306-84f5-460b-a257-9ee1aa68e4d0",
     "type": "lvl1",
     "url": "/docs/components/avatar",
     "hierarchy": { "lvl1": "Avatar" }
   },
   {
     "content": "Installation",
-    "objectID": "0f433b11-15af-4242-aefe-02b5c17212ce",
+    "objectID": "7f921771-09db-4446-b79f-60b7434faa8b",
     "type": "lvl2",
     "url": "/docs/components/avatar#installation",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "89787991-5d9a-4ad7-9276-7b27ad85232b",
+    "objectID": "fb7d5ca0-8740-4ef6-afa4-41d6b8e3ae26",
     "type": "lvl2",
     "url": "/docs/components/avatar#import",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "cdf01bae-0daf-48c4-96b6-49c794a54d55",
+    "objectID": "87be96c7-1608-4b52-97f0-edd60c87a8c8",
     "type": "lvl2",
     "url": "/docs/components/avatar#usage",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "fb4f4754-a55f-4520-8823-7dc9b6119500",
+    "objectID": "d3cdba78-7391-4369-a9d5-2394275472a3",
     "type": "lvl3",
     "url": "/docs/components/avatar#sizes",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Disabled",
-    "objectID": "a20290e1-9b1e-45a6-93df-c2a1e011b534",
+    "objectID": "bbbd9829-b785-4ca4-9da0-53c75d658a2b",
     "type": "lvl3",
     "url": "/docs/components/avatar#disabled",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Sizes", "lvl3": "Disabled" }
   },
   {
     "content": "Bordered",
-    "objectID": "8ab0e93a-d8b0-487e-a31e-dfcbe81a2466",
+    "objectID": "b381bad5-a525-42d5-9737-8404cfc5978c",
     "type": "lvl3",
     "url": "/docs/components/avatar#bordered",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Disabled", "lvl3": "Bordered" }
   },
   {
     "content": "Radius",
-    "objectID": "d67eba4a-41d4-402c-9ae2-90723cfb8e7c",
+    "objectID": "265502a7-a6ef-4b8e-9e3e-b11f33241c42",
     "type": "lvl3",
     "url": "/docs/components/avatar#radius",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Bordered", "lvl3": "Radius" }
   },
   {
     "content": "Colors",
-    "objectID": "5f5a8c69-e7c4-43e1-9d72-2aecaa99193b",
+    "objectID": "58b054cf-676d-49c3-9544-e83f01961871",
     "type": "lvl3",
     "url": "/docs/components/avatar#colors",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Radius", "lvl3": "Colors" }
   },
   {
     "content": "Avatar Fallbacks",
-    "objectID": "0b5b1cb8-c741-43de-9be8-2fedcce85054",
+    "objectID": "2efb3252-a361-4058-8625-286343096b65",
     "type": "lvl3",
     "url": "/docs/components/avatar#avatar-fallbacks",
     "hierarchy": {
@@ -1021,7 +1148,7 @@
   },
   {
     "content": "Custom Fallback",
-    "objectID": "912816be-48e9-449c-9f7b-0ea5e55a0b94",
+    "objectID": "07d6d7fa-9d1a-411d-ae11-ccc435ae64ce",
     "type": "lvl3",
     "url": "/docs/components/avatar#custom-fallback",
     "hierarchy": {
@@ -1032,7 +1159,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "12238cc8-a0e8-42e7-971d-79cbed64e996",
+    "objectID": "a1a1686f-b22e-48dc-b81a-7f9e2f9cf366",
     "type": "lvl3",
     "url": "/docs/components/avatar#custom-implementation",
     "hierarchy": {
@@ -1043,7 +1170,7 @@
   },
   {
     "content": "Custom initials logic",
-    "objectID": "5c9cc76c-9850-4abb-8f97-ff8a4002e8f2",
+    "objectID": "037a8f5e-e9d8-4724-a00e-a92290eceea3",
     "type": "lvl3",
     "url": "/docs/components/avatar#custom-initials-logic",
     "hierarchy": {
@@ -1054,14 +1181,14 @@
   },
   {
     "content": "Avatar Group",
-    "objectID": "68cf3750-7d1f-4d32-8418-ee85ee55b645",
+    "objectID": "ca35209a-709b-491f-8b6b-6047f333e618",
     "type": "lvl2",
     "url": "/docs/components/avatar#avatar-group",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Avatar Group", "lvl3": null }
   },
   {
     "content": "Group Disabled",
-    "objectID": "b02c35ee-1077-458d-9cbb-560c382c6974",
+    "objectID": "f854ead3-fdc4-4f96-ac80-3d7c069ec889",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-disabled",
     "hierarchy": {
@@ -1072,7 +1199,7 @@
   },
   {
     "content": "Group Max Count",
-    "objectID": "acfd54d6-0d84-4221-859d-a6ced2e6ef65",
+    "objectID": "c2d4fd17-a318-445b-831c-ad7bcaf8610c",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-max-count",
     "hierarchy": {
@@ -1083,7 +1210,7 @@
   },
   {
     "content": "Group Total Count",
-    "objectID": "0d1de79a-0ee3-454a-bb75-095ecfa3e1d7",
+    "objectID": "e5c8060b-f12c-4651-8f2e-692ff5482e59",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-total-count",
     "hierarchy": {
@@ -1094,7 +1221,7 @@
   },
   {
     "content": "Group Custom count",
-    "objectID": "3212264b-7e6a-4f43-86ae-db08e94ff10b",
+    "objectID": "db96f56c-3a66-4a96-b97d-27625bc0eb36",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-custom-count",
     "hierarchy": {
@@ -1105,7 +1232,7 @@
   },
   {
     "content": "Group Grid",
-    "objectID": "d9181be8-fe17-4291-b61b-dca47d098078",
+    "objectID": "dffa48a6-307d-46e8-a672-29589b604c6a",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-grid",
     "hierarchy": {
@@ -1116,7 +1243,7 @@
   },
   {
     "content": "Group Custom Implementation",
-    "objectID": "aac1a453-7281-4aa9-b38e-a19b55ccd05e",
+    "objectID": "6ebdc5b0-42b5-4a36-9432-00b1f2e45c61",
     "type": "lvl3",
     "url": "/docs/components/avatar#group-custom-implementation",
     "hierarchy": {
@@ -1127,14 +1254,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "21d2ec8b-6e7d-405f-853f-303ba19fede0",
+    "objectID": "3b30971d-159f-4467-ba68-372214e2ce10",
     "type": "lvl2",
     "url": "/docs/components/avatar#slots",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Avatar Styles",
-    "objectID": "cb632837-936f-4a83-87e8-cc769b689869",
+    "objectID": "22bc14cd-a3a5-4883-952e-9f6b24f95d8c",
     "type": "lvl3",
     "url": "/docs/components/avatar#custom-avatar-styles",
     "hierarchy": {
@@ -1145,28 +1272,28 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "61e79aae-02af-4b97-805f-97a56f27294c",
+    "objectID": "535dfe9a-dc43-4d74-b6ac-997f712a117b",
     "type": "lvl2",
     "url": "/docs/components/avatar#data-attributes",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "28db8d80-6266-46dc-bb37-0d87af0ef818",
+    "objectID": "52779b2c-b397-4684-8c7f-d125e0d68558",
     "type": "lvl2",
     "url": "/docs/components/avatar#api",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Avatar Props",
-    "objectID": "541ad6af-0f7c-4795-b31e-916768abf9f3",
+    "objectID": "e6a0890b-2087-492e-adbd-c52a49add0f2",
     "type": "lvl3",
     "url": "/docs/components/avatar#avatar-props",
     "hierarchy": { "lvl1": "Avatar", "lvl2": "API", "lvl3": "Avatar Props" }
   },
   {
     "content": "Avatar Group Props",
-    "objectID": "f120402b-f717-4169-94b9-3e420963ebe4",
+    "objectID": "9c77e7d9-1802-4af5-af12-05c1b05b2182",
     "type": "lvl3",
     "url": "/docs/components/avatar#avatar-group-props",
     "hierarchy": {
@@ -1177,70 +1304,70 @@
   },
   {
     "content": "Badge",
-    "objectID": "c6bd7149-6d6d-4bec-87e2-aa24334c3b65",
+    "objectID": "4abc28a1-751b-4df3-9aa4-30ad96677b36",
     "type": "lvl1",
     "url": "/docs/components/badge",
     "hierarchy": { "lvl1": "Badge" }
   },
   {
     "content": "Installation",
-    "objectID": "0ee5a964-142a-44fa-8ff3-c5a6730f4ed9",
+    "objectID": "137c9611-7596-4cf3-9b90-a72b462db8c6",
     "type": "lvl2",
     "url": "/docs/components/badge#installation",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "424ff614-c517-4d88-afef-5a71b6a04396",
+    "objectID": "fb243257-a6f8-4779-8b5d-428e4fb3e3ef",
     "type": "lvl2",
     "url": "/docs/components/badge#import",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "19a476a0-8492-47df-8f29-e1557a1323c4",
+    "objectID": "93a108f8-a2ba-4c7e-bd8a-dcbeee207d69",
     "type": "lvl2",
     "url": "/docs/components/badge#usage",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "bcd7368f-a676-4b57-8827-cb4610a9fa32",
+    "objectID": "4d0ee2c0-ab5d-43bb-a6f3-3f3dae5ad7ef",
     "type": "lvl3",
     "url": "/docs/components/badge#sizes",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "9f55ca14-05c3-4e86-80ad-d41badcfc6e1",
+    "objectID": "b7f835c4-9c24-4d16-82b6-a68c9b5587cb",
     "type": "lvl3",
     "url": "/docs/components/badge#colors",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "8a346ab2-8d5a-4d9f-afcd-d0bc9cb4d509",
+    "objectID": "28d5c98d-e45d-4391-9fc4-757f1b1b7bc6",
     "type": "lvl3",
     "url": "/docs/components/badge#variants",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Placements",
-    "objectID": "8e249dc4-29ef-4f1a-85b6-96a8524cb40d",
+    "objectID": "b1b29fef-c87b-4f0a-abaa-ece7fd6e1301",
     "type": "lvl3",
     "url": "/docs/components/badge#placements",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Variants", "lvl3": "Placements" }
   },
   {
     "content": "Shapes",
-    "objectID": "6dc02a23-cb26-4bee-ad09-debc29ba2aef",
+    "objectID": "53afc2de-963d-40f8-96aa-ccc3afdc0380",
     "type": "lvl3",
     "url": "/docs/components/badge#shapes",
     "hierarchy": { "lvl1": "Badge", "lvl2": "Placements", "lvl3": "Shapes" }
   },
   {
     "content": "Badge Visibility",
-    "objectID": "7e874620-6128-41ac-9ec3-8ab9069aaf00",
+    "objectID": "4749796e-53e4-4e4a-a9c9-66931357b253",
     "type": "lvl3",
     "url": "/docs/components/badge#badge-visibility",
     "hierarchy": {
@@ -1251,7 +1378,7 @@
   },
   {
     "content": "Content Examples",
-    "objectID": "1e1671df-b667-45c6-9e14-f5f7d2a530c4",
+    "objectID": "0a01c51d-334b-456e-91c2-937ee3350949",
     "type": "lvl3",
     "url": "/docs/components/badge#content-examples",
     "hierarchy": {
@@ -1262,7 +1389,7 @@
   },
   {
     "content": "Disable Outline",
-    "objectID": "cdb30d8e-e258-4857-8539-3c76a8eefdba",
+    "objectID": "0631f6da-c0e8-416f-af2a-32861a007fd1",
     "type": "lvl3",
     "url": "/docs/components/badge#disable-outline",
     "hierarchy": {
@@ -1273,7 +1400,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "1ec6d74c-78ad-4fec-b341-ee866c54696b",
+    "objectID": "e8ae6815-17a1-4c5e-9e0e-495bf63b83a3",
     "type": "lvl3",
     "url": "/docs/components/badge#accessibility",
     "hierarchy": {
@@ -1282,79 +1409,86 @@
       "lvl3": "Accessibility"
     }
   },
+  {
+    "content": "Slots",
+    "objectID": "6a84c573-1c62-4351-8ced-60d4ebff08b5",
+    "type": "lvl2",
+    "url": "/docs/components/badge#slots",
+    "hierarchy": { "lvl1": "Badge", "lvl2": "Slots", "lvl3": null }
+  },
   {
     "content": "API",
-    "objectID": "abbeb08c-f657-4196-a8fe-205c2bba1dde",
+    "objectID": "9fe45b0e-2408-4a3b-8144-a4181a4ac36b",
     "type": "lvl2",
     "url": "/docs/components/badge#api",
     "hierarchy": { "lvl1": "Badge", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Badge Props",
-    "objectID": "39ba3755-ec3b-487f-aa06-9fa68a117373",
+    "objectID": "d643971a-68a4-4d87-972b-792b01711b87",
     "type": "lvl3",
     "url": "/docs/components/badge#badge-props",
     "hierarchy": { "lvl1": "Badge", "lvl2": "API", "lvl3": "Badge Props" }
   },
   {
     "content": "Breadcrumbs",
-    "objectID": "31d24f70-b4fc-4eb2-b646-dd52e170e683",
+    "objectID": "aabd5dba-c1f5-4446-bfb7-6f5cec6f09e6",
     "type": "lvl1",
     "url": "/docs/components/breadcrumbs",
     "hierarchy": { "lvl1": "Breadcrumbs" }
   },
   {
     "content": "Installation",
-    "objectID": "87729cc3-041c-4b73-8555-0ea2d69bb4ea",
+    "objectID": "ab89772c-c2c3-4051-92d5-8fcbd2578719",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#installation",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "fc76a010-4058-4c26-8f41-6bacdb22f821",
+    "objectID": "a53801a7-b253-4230-b8ff-fd4db24c88b6",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#import",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "30ae577d-dc96-45a4-ab31-d2a2f6afb227",
+    "objectID": "df71cdf7-fc0c-445c-9b92-aa6c967b3f1e",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#usage",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "8b0669f2-e4ff-4a3c-8d7f-e9500391f3b1",
+    "objectID": "68676186-22e9-42a1-8027-97d9fa3eaea3",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#disabled",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "0a91f09c-e94e-4f5e-81cb-2d51d8d91de0",
+    "objectID": "b31e0463-36df-4951-bc19-5d5c07c9591a",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#sizes",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "5254ef8e-f823-40bf-863b-08b521045037",
+    "objectID": "f8b19b8e-020a-401c-9713-86eee7761fc2",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#colors",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "312dfa2d-a480-4329-917c-d8863a8d8def",
+    "objectID": "0c62b9a3-34bc-4cd0-ae2c-a8f64a3433e4",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#variants",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Underlines",
-    "objectID": "449d8a81-1870-4c1e-af9f-f9a162d8ed00",
+    "objectID": "cac2e987-2423-487c-b912-04df9c1a5b66",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#underlines",
     "hierarchy": {
@@ -1365,7 +1499,7 @@
   },
   {
     "content": "Radius",
-    "objectID": "fcc06440-08db-4603-bf55-89970188fcc4",
+    "objectID": "df8721d5-4f3a-4564-9921-36848333d507",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#radius",
     "hierarchy": {
@@ -1376,14 +1510,14 @@
   },
   {
     "content": "Routing",
-    "objectID": "61dcddac-bb4f-4a0b-a555-1f6ea5cebab3",
+    "objectID": "2e1b63d5-7664-4670-a093-30336447651f",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#routing",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Radius", "lvl3": "Routing" }
   },
   {
     "content": "Controlled",
-    "objectID": "3dd72a59-0f23-4f09-ae16-64c9dd83e4d6",
+    "objectID": "6750a0f6-7be4-46fa-9d52-a2d2a8b38eda",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#controlled",
     "hierarchy": {
@@ -1394,7 +1528,7 @@
   },
   {
     "content": "Menu Type",
-    "objectID": "a0ea123e-dee9-4051-9e85-7a1bdef9c9cc",
+    "objectID": "df4b33fe-5dc4-4d4a-bf0c-1ebe41e770de",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#menu-type",
     "hierarchy": {
@@ -1405,7 +1539,7 @@
   },
   {
     "content": "Start & End Content",
-    "objectID": "a04a0931-2ec5-4ffe-ad86-40a24ca9f1fb",
+    "objectID": "e2d16f10-24c8-45fa-b73e-71c3ef74f9fa",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#start--end-content",
     "hierarchy": {
@@ -1416,7 +1550,7 @@
   },
   {
     "content": "Custom Separator",
-    "objectID": "755d3896-dec8-455f-8dd0-daa7621ca219",
+    "objectID": "632a8a1e-759d-4d12-aed5-ec7492d716b2",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#custom-separator",
     "hierarchy": {
@@ -1427,7 +1561,7 @@
   },
   {
     "content": "Custom Items",
-    "objectID": "b79c2457-c8ce-439b-bbb1-7452bdc0b9cc",
+    "objectID": "59c1495d-e829-4818-beec-a8571148d6e0",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#custom-items",
     "hierarchy": {
@@ -1438,7 +1572,7 @@
   },
   {
     "content": "Collapsing Items",
-    "objectID": "3b3d4775-5947-431f-8250-ec7959a86a14",
+    "objectID": "4ea4d927-7b4a-462f-a09d-256707d75d02",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#collapsing-items",
     "hierarchy": {
@@ -1449,7 +1583,7 @@
   },
   {
     "content": "Customizing the Ellipsis Item",
-    "objectID": "a17f0daf-f976-4840-8081-9aa7b6834fc7",
+    "objectID": "55388450-5aa8-4d15-b15d-974b7217c400",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#customizing-the-ellipsis-item",
     "hierarchy": {
@@ -1460,14 +1594,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "6a49a9ed-f061-43f5-9f85-1beef6a74ff9",
+    "objectID": "7f9d9ee9-3dd2-4cbf-8750-8917e0961d96",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#slots",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Customizing the Breadcrumbs Styles",
-    "objectID": "7d409a2b-cc95-49f7-ac3f-0b17c167db90",
+    "objectID": "93545cb5-87b6-4c76-a43c-655ca91d846c",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#customizing-the-breadcrumbs-styles",
     "hierarchy": {
@@ -1478,7 +1612,7 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "23082180-90b8-444a-b8fa-20900fc9f19f",
+    "objectID": "c2b174d1-439a-4a47-80b8-d74f448c1e6c",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#data-attributes",
     "hierarchy": {
@@ -1489,7 +1623,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "cf79374d-1bcb-4667-8143-2ecd8d2aefb1",
+    "objectID": "0181d1cc-c8d9-4a95-8bfa-6ad7364e385e",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#accessibility",
     "hierarchy": {
@@ -1500,14 +1634,14 @@
   },
   {
     "content": "API",
-    "objectID": "e41e6fd5-3932-4dbc-a5ec-9f7c555d4405",
+    "objectID": "e798076c-3c8a-4c7b-9fb2-3575f3e8fcf6",
     "type": "lvl2",
     "url": "/docs/components/breadcrumbs#api",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Breadcrumbs Props",
-    "objectID": "ff69f356-baae-45b1-be2d-520b214dbc9e",
+    "objectID": "1e30bef7-53c1-4b7a-9868-18fb6e176665",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#breadcrumbs-props",
     "hierarchy": {
@@ -1518,7 +1652,7 @@
   },
   {
     "content": "Breadcrumbs Functions",
-    "objectID": "a141cbcd-3750-45da-8f96-a2a972f878f7",
+    "objectID": "eba7734b-bd29-4adb-87ad-f30551a56228",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#breadcrumbs-functions",
     "hierarchy": {
@@ -1529,7 +1663,7 @@
   },
   {
     "content": "Breadcrumbs Events",
-    "objectID": "54b79833-58c4-4b30-becd-5c07e2c0899a",
+    "objectID": "92e7fff9-f520-467a-81b7-ed8bee7cef80",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#breadcrumbs-events",
     "hierarchy": {
@@ -1540,7 +1674,7 @@
   },
   {
     "content": "BreadcrumbItem Props",
-    "objectID": "4098ed22-c411-4e38-b996-ad64ccdc1580",
+    "objectID": "37888d00-0b1a-4450-8bb2-a331b52a8e7c",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#breadcrumbitem-props",
     "hierarchy": {
@@ -1551,7 +1685,7 @@
   },
   {
     "content": "BreadcrumbItem Events",
-    "objectID": "298e0ad0-01b8-4281-86c2-1ad1d8d27635",
+    "objectID": "da5e5b9b-8b1b-4ffd-b9d1-37b79d45bf75",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#breadcrumbitem-events",
     "hierarchy": {
@@ -1562,7 +1696,7 @@
   },
   {
     "content": "Types",
-    "objectID": "ac99d7b0-ad53-4c23-a1c6-f200521620a9",
+    "objectID": "bae2f591-8921-4025-869e-68cb7aca6f95",
     "type": "lvl3",
     "url": "/docs/components/breadcrumbs#types",
     "hierarchy": {
@@ -1573,98 +1707,98 @@
   },
   {
     "content": "Render Ellipsis Function",
-    "objectID": "30585ddf-fdd4-47fc-bf15-99d0416816e9",
+    "objectID": "8642e8a8-b066-4f0e-81cc-3730e34a59ac",
     "type": "lvl4",
     "url": "/docs/components/breadcrumbs#render-ellipsis-function",
     "hierarchy": { "lvl1": "Breadcrumbs", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Button",
-    "objectID": "6db7cf1d-8716-4eb9-b879-628354350158",
+    "objectID": "636a17a5-d3df-4364-8d74-0cfb0effa3f7",
     "type": "lvl1",
     "url": "/docs/components/button",
     "hierarchy": { "lvl1": "Button" }
   },
   {
     "content": "Installation",
-    "objectID": "3b28b4fd-e846-41b3-8d84-05e73fec8c6a",
+    "objectID": "a5cd8de9-8ee6-4973-bba4-a7e66101b7e9",
     "type": "lvl2",
     "url": "/docs/components/button#installation",
     "hierarchy": { "lvl1": "Button", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "e4dd5376-184b-47d7-a8b8-548e82d47731",
+    "objectID": "2d249294-b5b2-4ce9-8e4f-289a8b0a66b7",
     "type": "lvl2",
     "url": "/docs/components/button#import",
     "hierarchy": { "lvl1": "Button", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "46b290c7-261c-45a7-af76-27fc581d8ead",
+    "objectID": "e3ea000e-65bf-497e-93ea-6ea8b351b625",
     "type": "lvl2",
     "url": "/docs/components/button#usage",
     "hierarchy": { "lvl1": "Button", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "10344fe1-7e2d-4126-91f2-7ca91124ae2a",
+    "objectID": "5f48c6e6-a0ad-455e-aaf5-aa8026f4a30f",
     "type": "lvl3",
     "url": "/docs/components/button#disabled",
     "hierarchy": { "lvl1": "Button", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "3030123d-d408-4e71-a58a-86d2fa8248ad",
+    "objectID": "0ad8fea5-a812-4ce8-b4aa-f774d0391a9a",
     "type": "lvl3",
     "url": "/docs/components/button#sizes",
     "hierarchy": { "lvl1": "Button", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Radius",
-    "objectID": "e976ea13-792a-40c1-9a1c-63810c89b64a",
+    "objectID": "3d734deb-7b61-4305-aac2-a29416587c60",
     "type": "lvl3",
     "url": "/docs/components/button#radius",
     "hierarchy": { "lvl1": "Button", "lvl2": "Sizes", "lvl3": "Radius" }
   },
   {
     "content": "Colors",
-    "objectID": "d32dbfcc-9e0e-4051-99c9-f872bd69e1fc",
+    "objectID": "2e2626f2-d682-474d-9e6e-4a9c342ba45b",
     "type": "lvl3",
     "url": "/docs/components/button#colors",
     "hierarchy": { "lvl1": "Button", "lvl2": "Radius", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "aa4571ed-9611-4e11-bb93-ccc46274a319",
+    "objectID": "807c08c8-d657-4184-a134-83ad95676290",
     "type": "lvl3",
     "url": "/docs/components/button#variants",
     "hierarchy": { "lvl1": "Button", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Loading",
-    "objectID": "6ee0b6aa-963a-43d4-ad4e-5f22c3403461",
+    "objectID": "8b1caa7a-a393-4ed8-9aaf-dc85d68aca1a",
     "type": "lvl3",
     "url": "/docs/components/button#loading",
     "hierarchy": { "lvl1": "Button", "lvl2": "Variants", "lvl3": "Loading" }
   },
   {
     "content": "With Icons",
-    "objectID": "a69ea901-990b-4732-b20e-cb3c524ac8d9",
+    "objectID": "694a81c8-65e7-4bc6-8efb-bb0d8dfaa302",
     "type": "lvl3",
     "url": "/docs/components/button#with-icons",
     "hierarchy": { "lvl1": "Button", "lvl2": "Loading", "lvl3": "With Icons" }
   },
   {
     "content": "Icon Only",
-    "objectID": "f0abccf7-5968-499a-9e95-af3e5400e79b",
+    "objectID": "9bd496e4-23cd-404d-80ef-af3049557cff",
     "type": "lvl3",
     "url": "/docs/components/button#icon-only",
     "hierarchy": { "lvl1": "Button", "lvl2": "With Icons", "lvl3": "Icon Only" }
   },
   {
     "content": "Custom Styles",
-    "objectID": "cb40731c-ee91-4c1a-a653-bfa8a0461098",
+    "objectID": "6e51f1f1-63d9-4ae5-8de2-bf222bb1ab0f",
     "type": "lvl3",
     "url": "/docs/components/button#custom-styles",
     "hierarchy": {
@@ -1675,7 +1809,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "341f02f4-f8b9-4513-aed1-ba9ec5b6d095",
+    "objectID": "aeb5aa50-8438-41b2-9474-0973a7ccb646",
     "type": "lvl3",
     "url": "/docs/components/button#custom-implementation",
     "hierarchy": {
@@ -1686,14 +1820,14 @@
   },
   {
     "content": "Button Group",
-    "objectID": "92bfba55-edba-4696-8b47-55ddb07659a1",
+    "objectID": "fb1abace-e6fa-48fb-b06d-b76d75ea407e",
     "type": "lvl2",
     "url": "/docs/components/button#button-group",
     "hierarchy": { "lvl1": "Button", "lvl2": "Button Group", "lvl3": null }
   },
   {
     "content": "Group Disabled",
-    "objectID": "385c3fa1-916b-47e6-b499-de1450c6e645",
+    "objectID": "aff74cb8-776e-4475-8f39-4e0851e9398e",
     "type": "lvl3",
     "url": "/docs/components/button#group-disabled",
     "hierarchy": {
@@ -1704,7 +1838,7 @@
   },
   {
     "content": "Group Use case",
-    "objectID": "508b4924-4314-42c1-bd93-81e7ac3f5362",
+    "objectID": "0290fa69-01cd-449d-b957-171895af7754",
     "type": "lvl3",
     "url": "/docs/components/button#group-use-case",
     "hierarchy": {
@@ -1715,35 +1849,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "74666d0e-4f18-4eed-a144-db77b6cf0d4c",
+    "objectID": "e0ec7b2c-e671-486c-b343-461f3fbeb0ed",
     "type": "lvl2",
     "url": "/docs/components/button#data-attributes",
     "hierarchy": { "lvl1": "Button", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "973d858e-14bb-4014-8606-29113089bef8",
+    "objectID": "57a2e075-d473-4390-89c8-b6ef26d49113",
     "type": "lvl2",
     "url": "/docs/components/button#accessibility",
     "hierarchy": { "lvl1": "Button", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "5a5c45e8-9cda-4063-aa62-d62fc2f4bc54",
+    "objectID": "e223a152-f9f5-4c25-b782-162b93193489",
     "type": "lvl2",
     "url": "/docs/components/button#api",
     "hierarchy": { "lvl1": "Button", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Button Props",
-    "objectID": "7891959d-a3cd-4ea5-afcf-48eae2a22186",
+    "objectID": "98ddc1a7-e648-49fd-b546-fc32bc8b0d54",
     "type": "lvl3",
     "url": "/docs/components/button#button-props",
     "hierarchy": { "lvl1": "Button", "lvl2": "API", "lvl3": "Button Props" }
   },
   {
     "content": "Button Events",
-    "objectID": "ec9d1e73-7279-4c24-af1f-786fb33a9f30",
+    "objectID": "842d7635-9a8c-4975-954f-eebc64b0bc43",
     "type": "lvl3",
     "url": "/docs/components/button#button-events",
     "hierarchy": {
@@ -1754,7 +1888,7 @@
   },
   {
     "content": "Button Group Props",
-    "objectID": "5e4f13c7-f053-4346-9778-e60dc1e49e8c",
+    "objectID": "61300b33-f71e-468d-84d4-e336cbf6c3da",
     "type": "lvl3",
     "url": "/docs/components/button#button-group-props",
     "hierarchy": {
@@ -1765,49 +1899,49 @@
   },
   {
     "content": "Calendar",
-    "objectID": "08d9580e-ff81-472a-8f41-620173fbc21f",
+    "objectID": "7e67a75b-151c-49d8-a50a-fd0bf579fe84",
     "type": "lvl1",
     "url": "/docs/components/calendar",
     "hierarchy": { "lvl1": "Calendar" }
   },
   {
     "content": "Installation",
-    "objectID": "a00ed2b0-1fe7-4d47-80fc-7279cd7ab3b7",
+    "objectID": "4c14a419-7c6b-4820-822f-d6cf199061fb",
     "type": "lvl2",
     "url": "/docs/components/calendar#installation",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "feddc778-7487-41f5-bf55-d2c3592bf67e",
+    "objectID": "20192288-5eff-413d-b3ef-8e0aa06a7e52",
     "type": "lvl2",
     "url": "/docs/components/calendar#import",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "cf8440b3-44d2-437d-89a7-2908b7b37111",
+    "objectID": "9d6f36ca-0f80-461d-9aeb-0c889d934a40",
     "type": "lvl2",
     "url": "/docs/components/calendar#usage",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "edf1c479-ad59-47c3-a7a2-fccc325db1aa",
+    "objectID": "bcbba9a3-3e76-4ed8-9c4b-ebc334e68d28",
     "type": "lvl3",
     "url": "/docs/components/calendar#disabled",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Read Only",
-    "objectID": "94eeddbb-8423-4ed3-bb44-37ec1a2bf89a",
+    "objectID": "b76958cd-542d-4c54-8ae5-954ac2c0c78a",
     "type": "lvl3",
     "url": "/docs/components/calendar#read-only",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Disabled", "lvl3": "Read Only" }
   },
   {
     "content": "Controlled",
-    "objectID": "de3fbb6e-a71e-4fac-b571-a26225b4fdd3",
+    "objectID": "b4e3bb29-2732-40ad-8a93-2d2ed1ceb9fa",
     "type": "lvl3",
     "url": "/docs/components/calendar#controlled",
     "hierarchy": {
@@ -1818,7 +1952,7 @@
   },
   {
     "content": "Min Date Value",
-    "objectID": "d5b2d561-de56-49df-a2c1-2d14b8bd90af",
+    "objectID": "a4ff28c5-6a94-4ec4-8b71-5d9ea11796d7",
     "type": "lvl3",
     "url": "/docs/components/calendar#min-date-value",
     "hierarchy": {
@@ -1829,7 +1963,7 @@
   },
   {
     "content": "Max Date Value",
-    "objectID": "6dfa5957-c31d-4144-bb2f-555bd563626d",
+    "objectID": "93711ec2-fd30-4e1b-bf01-f2326b9566a7",
     "type": "lvl3",
     "url": "/docs/components/calendar#max-date-value",
     "hierarchy": {
@@ -1840,7 +1974,7 @@
   },
   {
     "content": "Unavailable Dates",
-    "objectID": "43c2fe13-10f6-4f7f-b02f-20402122248f",
+    "objectID": "fa607d20-d977-4a6d-b7a5-992eebb969fe",
     "type": "lvl3",
     "url": "/docs/components/calendar#unavailable-dates",
     "hierarchy": {
@@ -1851,7 +1985,7 @@
   },
   {
     "content": "Controlled Focused Value",
-    "objectID": "0cf55a42-d7b3-4670-bb12-217e432603cc",
+    "objectID": "22df9bda-8e86-4b36-b7ce-7e6929f4f2f1",
     "type": "lvl3",
     "url": "/docs/components/calendar#controlled-focused-value",
     "hierarchy": {
@@ -1862,7 +1996,7 @@
   },
   {
     "content": "Invalid Date",
-    "objectID": "caf868df-7378-4e1e-b7fc-24121d3b135e",
+    "objectID": "1b94b6e8-0f56-4141-b82f-b6b2cac56189",
     "type": "lvl3",
     "url": "/docs/components/calendar#invalid-date",
     "hierarchy": {
@@ -1873,7 +2007,7 @@
   },
   {
     "content": "With Month And Year Picker",
-    "objectID": "85fd5900-989c-426d-add6-a6ffe081acd6",
+    "objectID": "b8efed13-0b91-4424-80c7-e38501e4947e",
     "type": "lvl3",
     "url": "/docs/components/calendar#with-month-and-year-picker",
     "hierarchy": {
@@ -1884,7 +2018,7 @@
   },
   {
     "content": "International Calendars",
-    "objectID": "de2379e1-e006-402f-9074-295fe3ca0211",
+    "objectID": "44dbf560-6faf-4aef-a237-1749078b1008",
     "type": "lvl3",
     "url": "/docs/components/calendar#international-calendars",
     "hierarchy": {
@@ -1895,7 +2029,7 @@
   },
   {
     "content": "Visible Months",
-    "objectID": "b1a8b6bb-f07d-494c-bdca-2ea71cf07514",
+    "objectID": "b881fb26-aff3-47e6-bc4b-e30654c0ade9",
     "type": "lvl3",
     "url": "/docs/components/calendar#visible-months",
     "hierarchy": {
@@ -1906,7 +2040,7 @@
   },
   {
     "content": "Page Behaviour",
-    "objectID": "f8c503d5-d932-4b3d-b1af-d75e30700edd",
+    "objectID": "7f291fbb-7524-435c-a60d-2c915a48bc16",
     "type": "lvl3",
     "url": "/docs/components/calendar#page-behaviour",
     "hierarchy": {
@@ -1917,7 +2051,7 @@
   },
   {
     "content": "Presets",
-    "objectID": "1b287826-4171-4bb5-b6c0-8ce43d5c3344",
+    "objectID": "7e0664df-a140-4f60-80b1-8f9796bfc1e3",
     "type": "lvl3",
     "url": "/docs/components/calendar#presets",
     "hierarchy": {
@@ -1928,42 +2062,42 @@
   },
   {
     "content": "Slots",
-    "objectID": "428a879e-e9ad-4ca7-a65d-f747d69d6d20",
+    "objectID": "c97b17cb-4138-4eef-a838-3a8d70a32393",
     "type": "lvl2",
     "url": "/docs/components/calendar#slots",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "78fdc89e-ffd3-415f-8b08-61d912c42c48",
+    "objectID": "7ae6abcd-35b4-4752-96f5-8bec287fe251",
     "type": "lvl2",
     "url": "/docs/components/calendar#data-attributes",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "7473a49c-84ea-448b-b4b8-0a1a9a7c8e26",
+    "objectID": "67757869-1aa2-44f7-b3b7-1ec6c0bfeb57",
     "type": "lvl2",
     "url": "/docs/components/calendar#accessibility",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "183e1c06-3f1d-4559-9d00-fc921b038f5f",
+    "objectID": "33aaac3b-e931-43aa-8d69-3870bfa3c420",
     "type": "lvl2",
     "url": "/docs/components/calendar#api",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Calendar Props",
-    "objectID": "c38322dc-82e5-446c-8ce4-093b788778a4",
+    "objectID": "9a7df0d2-2fcf-4f95-87b3-62d040d5de4d",
     "type": "lvl3",
     "url": "/docs/components/calendar#calendar-props",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "API", "lvl3": "Calendar Props" }
   },
   {
     "content": "Calendar Events",
-    "objectID": "82d1a0c6-c084-4987-ab2e-c2314a3ba502",
+    "objectID": "eb41e537-bee4-4a02-975b-a44334ec1c1d",
     "type": "lvl3",
     "url": "/docs/components/calendar#calendar-events",
     "hierarchy": {
@@ -1974,7 +2108,7 @@
   },
   {
     "content": "Types",
-    "objectID": "dda236e2-e609-435a-bb15-148be5de1419",
+    "objectID": "f0d84e72-4428-4d47-aae8-d1d6d3554522",
     "type": "lvl3",
     "url": "/docs/components/calendar#types",
     "hierarchy": {
@@ -1985,49 +2119,49 @@
   },
   {
     "content": "Supported Calendars",
-    "objectID": "ac6fb8e9-c34a-4a04-bb35-021ce2e063e4",
+    "objectID": "54e2f58f-c912-410c-aeb0-986f9e692672",
     "type": "lvl4",
     "url": "/docs/components/calendar#supported-calendars",
     "hierarchy": { "lvl1": "Calendar", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Card",
-    "objectID": "8db2081c-8a06-4752-a78e-c9489928e735",
+    "objectID": "65049198-612a-4135-97cf-51e2c13c0ea1",
     "type": "lvl1",
     "url": "/docs/components/card",
     "hierarchy": { "lvl1": "Card" }
   },
   {
     "content": "Installation",
-    "objectID": "dfcb5301-8583-4c85-b174-3fbc3209c0f4",
+    "objectID": "44a51c6a-1bdd-49fe-8ae5-0c930fdb30a5",
     "type": "lvl2",
     "url": "/docs/components/card#installation",
     "hierarchy": { "lvl1": "Card", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "c0b1fd2c-b66c-4143-a47c-5f0226b53ec5",
+    "objectID": "9dc17c6d-9ace-498b-bbe5-a5d5392f1777",
     "type": "lvl2",
     "url": "/docs/components/card#import",
     "hierarchy": { "lvl1": "Card", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "21958cae-772c-4cac-b297-33f535d28aea",
+    "objectID": "c0cc38b1-78bb-4613-879a-874559ab0dc3",
     "type": "lvl2",
     "url": "/docs/components/card#usage",
     "hierarchy": { "lvl1": "Card", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "With Divider",
-    "objectID": "e8785df0-d2f1-4b53-8f0a-46db1a73928d",
+    "objectID": "1724f073-9482-4d4a-b4b1-e7eed18cfe46",
     "type": "lvl3",
     "url": "/docs/components/card#with-divider",
     "hierarchy": { "lvl1": "Card", "lvl2": "Usage", "lvl3": "With Divider" }
   },
   {
     "content": "With Image",
-    "objectID": "ae4ec132-2ef5-4b8f-9fbb-eb85cd1d4e78",
+    "objectID": "a5c62b2a-ab30-471a-9d21-69b178c5f0ea",
     "type": "lvl3",
     "url": "/docs/components/card#with-image",
     "hierarchy": {
@@ -2038,7 +2172,7 @@
   },
   {
     "content": "Blurred Footer",
-    "objectID": "9a51cbd8-7f61-4c6b-addd-d88c646cf953",
+    "objectID": "2bb68291-9af0-484b-a7f1-025688ec1649",
     "type": "lvl3",
     "url": "/docs/components/card#blurred-footer",
     "hierarchy": {
@@ -2049,7 +2183,7 @@
   },
   {
     "content": "Composition",
-    "objectID": "f0a66483-0969-42ab-a831-142eb028d64e",
+    "objectID": "59faaa84-37b2-4df6-bba0-dfe638df76a0",
     "type": "lvl3",
     "url": "/docs/components/card#composition",
     "hierarchy": {
@@ -2060,7 +2194,7 @@
   },
   {
     "content": "Blurred Card",
-    "objectID": "041732bf-3839-41b0-9c77-0ef15246b188",
+    "objectID": "13ebddbb-8151-4b16-928c-3e2368bd80f7",
     "type": "lvl3",
     "url": "/docs/components/card#blurred-card",
     "hierarchy": {
@@ -2071,7 +2205,7 @@
   },
   {
     "content": "Primary Action",
-    "objectID": "91a4a281-f3f5-4da9-8d6e-2b9af355313c",
+    "objectID": "2b1de537-3bab-4b65-90d4-d0a17b7a68fb",
     "type": "lvl3",
     "url": "/docs/components/card#primary-action",
     "hierarchy": {
@@ -2082,7 +2216,7 @@
   },
   {
     "content": "Cover Image",
-    "objectID": "cbb1dc01-976c-4658-8371-01c548ecf37b",
+    "objectID": "5541acdf-7d4e-4959-9244-e925be351066",
     "type": "lvl3",
     "url": "/docs/components/card#cover-image",
     "hierarchy": {
@@ -2091,44 +2225,51 @@
       "lvl3": "Cover Image"
     }
   },
+  {
+    "content": "Slots",
+    "objectID": "c12defab-97c3-4977-9bc9-6d36db51e307",
+    "type": "lvl2",
+    "url": "/docs/components/card#slots",
+    "hierarchy": { "lvl1": "Card", "lvl2": "Slots", "lvl3": null }
+  },
   {
     "content": "Data Attributes",
-    "objectID": "b1774a3f-dcae-4415-9ac7-cae725ca6a8b",
+    "objectID": "4eb21f33-5136-47f0-96c5-155a45e6b9ef",
     "type": "lvl2",
     "url": "/docs/components/card#data-attributes",
     "hierarchy": { "lvl1": "Card", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "ef6242b4-fa97-4e70-b603-401f9c8597c0",
+    "objectID": "218f0d09-5502-4462-aa62-57947d5c9767",
     "type": "lvl2",
     "url": "/docs/components/card#api",
     "hierarchy": { "lvl1": "Card", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Card Props",
-    "objectID": "50adfd3e-a5ad-44d1-813d-09121dc68e83",
+    "objectID": "b473b576-b309-4b46-91a6-0ec514627d68",
     "type": "lvl3",
     "url": "/docs/components/card#card-props",
     "hierarchy": { "lvl1": "Card", "lvl2": "API", "lvl3": "Card Props" }
   },
   {
     "content": "Card Events",
-    "objectID": "b33a320b-1492-48d6-bdf8-6dc0e091ae85",
+    "objectID": "43dbffa8-723a-4b79-a9b5-ecef0d080fb1",
     "type": "lvl3",
     "url": "/docs/components/card#card-events",
     "hierarchy": { "lvl1": "Card", "lvl2": "Card Props", "lvl3": "Card Events" }
   },
   {
     "content": "Checkbox Group",
-    "objectID": "e2335476-4a3a-4eda-a03d-1112a0d233a8",
+    "objectID": "c5839385-ff7a-4e3a-9330-8e6e3db97858",
     "type": "lvl1",
     "url": "/docs/components/checkbox-group",
     "hierarchy": { "lvl1": "Checkbox Group" }
   },
   {
     "content": "Installation",
-    "objectID": "950621d3-263a-4d3d-b3b4-ff804349cc09",
+    "objectID": "5167cebc-da49-481c-b795-243b7a7a7ef8",
     "type": "lvl2",
     "url": "/docs/components/checkbox-group#installation",
     "hierarchy": {
@@ -2139,21 +2280,21 @@
   },
   {
     "content": "Import",
-    "objectID": "d72bf6c2-1e06-428b-8c37-d85dc151834a",
+    "objectID": "00aefa01-8d28-4bfc-adbf-629397a7c3a8",
     "type": "lvl2",
     "url": "/docs/components/checkbox-group#import",
     "hierarchy": { "lvl1": "Checkbox Group", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "160a4d16-03c2-4f38-95c8-621aeb00e889",
+    "objectID": "cf6b95b4-28c1-47bf-bec1-3e57046bbbeb",
     "type": "lvl2",
     "url": "/docs/components/checkbox-group#usage",
     "hierarchy": { "lvl1": "Checkbox Group", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "fafae1ab-cac4-4fcc-9a70-69176072baed",
+    "objectID": "b2b5f7ea-e5b2-44ae-99cd-b1c70de3cf4b",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#disabled",
     "hierarchy": {
@@ -2164,7 +2305,7 @@
   },
   {
     "content": "Horizontal",
-    "objectID": "2d74c57d-a358-45d3-8a65-9e95269c0bbd",
+    "objectID": "e2e3dd47-3226-4dcd-9e63-b54780733d7a",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#horizontal",
     "hierarchy": {
@@ -2175,7 +2316,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "5b8a5443-1c81-4d04-9773-25675c01b09f",
+    "objectID": "1ba1497d-891a-4abd-99e4-d79e49ab6e76",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#controlled",
     "hierarchy": {
@@ -2186,7 +2327,7 @@
   },
   {
     "content": "Invalid",
-    "objectID": "3293465d-20cc-4489-bce5-42f98b73b340",
+    "objectID": "39f76863-74af-44e8-b902-58235cbd8423",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#invalid",
     "hierarchy": {
@@ -2197,14 +2338,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "fdabe32a-9aeb-4e32-802a-5272bcfe8975",
+    "objectID": "e538d7e5-ea23-4a9a-a852-3fe8ad5c2dce",
     "type": "lvl2",
     "url": "/docs/components/checkbox-group#slots",
     "hierarchy": { "lvl1": "Checkbox Group", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "7a25de41-2134-4ac4-9c46-c5f3b0dea9d4",
+    "objectID": "db77190e-081f-4826-854f-78c7b167a5bf",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#custom-styles",
     "hierarchy": {
@@ -2215,7 +2356,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "2e3c4b68-cd33-4b9f-885b-cde1e1c48971",
+    "objectID": "65a476de-9ff8-4e17-a16e-b8e9585ad510",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#custom-implementation",
     "hierarchy": {
@@ -2226,14 +2367,14 @@
   },
   {
     "content": "API",
-    "objectID": "f02185e2-2204-4504-a9e1-0cf6cc4fca49",
+    "objectID": "25ffc6f6-d450-4bc1-b215-fba851e02dce",
     "type": "lvl2",
     "url": "/docs/components/checkbox-group#api",
     "hierarchy": { "lvl1": "Checkbox Group", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Checkbox Group Props",
-    "objectID": "4b389503-a290-4835-ae3c-41e3eb0acb3b",
+    "objectID": "dbc5fd0f-9b90-4cca-b2b9-e429a0281e5d",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#checkbox-group-props",
     "hierarchy": {
@@ -2244,7 +2385,7 @@
   },
   {
     "content": "Checkbox Group Events",
-    "objectID": "15238198-0c19-4c46-8790-7d698b967716",
+    "objectID": "54657878-b95f-4cac-bcf5-0c96b66e4b91",
     "type": "lvl3",
     "url": "/docs/components/checkbox-group#checkbox-group-events",
     "hierarchy": {
@@ -2255,63 +2396,63 @@
   },
   {
     "content": "Checkbox",
-    "objectID": "48c7cbb7-2eaf-41b1-bb29-d0d4d3c02f7f",
+    "objectID": "9ade6dfc-5aee-4ce0-b79f-09d8b2c9963e",
     "type": "lvl1",
     "url": "/docs/components/checkbox",
     "hierarchy": { "lvl1": "Checkbox" }
   },
   {
     "content": "Installation",
-    "objectID": "e8001f6d-91e5-4b96-8ac0-1627c57a6870",
+    "objectID": "4be342bc-c8dd-4c10-ba6a-34404819672c",
     "type": "lvl2",
     "url": "/docs/components/checkbox#installation",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "b1809ae6-8943-46bc-a960-788b0876a790",
+    "objectID": "3af8bbf6-68b2-4920-9de6-f78eb8a4482a",
     "type": "lvl2",
     "url": "/docs/components/checkbox#import",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "1de45680-f4d7-4cc7-a9cd-58ea1eaf963e",
+    "objectID": "97a1a9c9-f865-4086-842e-fb3e751c6bc5",
     "type": "lvl2",
     "url": "/docs/components/checkbox#usage",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "9943cbe3-a11f-4c9d-a2da-364c80857b50",
+    "objectID": "7d0a8b21-4ce3-426e-9ff2-d22671d2d720",
     "type": "lvl3",
     "url": "/docs/components/checkbox#disabled",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "24c208bb-1d0a-4f71-ac92-a710ac4e984e",
+    "objectID": "7cad6327-b32e-41dd-938e-679d16f653fa",
     "type": "lvl3",
     "url": "/docs/components/checkbox#sizes",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "b3f9b5e0-a38d-48ae-8442-10347e76fd7b",
+    "objectID": "2294241a-16e6-4dc2-ac22-bb4e2d754613",
     "type": "lvl3",
     "url": "/docs/components/checkbox#colors",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Radius",
-    "objectID": "5fe42b38-f90e-47b3-8b7c-5cbbb1bec4a5",
+    "objectID": "e7756bab-dfc5-4a47-b61c-476f7c0c93c5",
     "type": "lvl3",
     "url": "/docs/components/checkbox#radius",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Colors", "lvl3": "Radius" }
   },
   {
     "content": "Indeterminate",
-    "objectID": "0cd5e149-d2af-4eb8-b652-e9a83e96127a",
+    "objectID": "60de6198-371e-440c-a142-e4d075f53a78",
     "type": "lvl3",
     "url": "/docs/components/checkbox#indeterminate",
     "hierarchy": {
@@ -2322,7 +2463,7 @@
   },
   {
     "content": "Line Through",
-    "objectID": "c400b72e-ba56-4b61-b7b1-690618b64d92",
+    "objectID": "edeeba2c-222b-46f6-a9c4-133af31c9437",
     "type": "lvl3",
     "url": "/docs/components/checkbox#line-through",
     "hierarchy": {
@@ -2333,7 +2474,7 @@
   },
   {
     "content": "Custom Check Icon",
-    "objectID": "c6ce858a-a34b-4d3a-a0ae-d96a524b4b5d",
+    "objectID": "16d04d27-be3b-4714-b629-9ec2299a2a1f",
     "type": "lvl3",
     "url": "/docs/components/checkbox#custom-check-icon",
     "hierarchy": {
@@ -2344,7 +2485,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "4c5b7ec2-a0a4-42fc-bbfb-74397c087150",
+    "objectID": "052f180f-8ed8-4662-a65f-0364c89bada4",
     "type": "lvl3",
     "url": "/docs/components/checkbox#controlled",
     "hierarchy": {
@@ -2355,14 +2496,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "1255c432-45db-41d9-ac52-bdb28d23bf8b",
+    "objectID": "c4558c29-33ef-46eb-bcc9-3f0944ab806f",
     "type": "lvl2",
     "url": "/docs/components/checkbox#slots",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "83cf1ad4-b0fc-4236-a490-a231b6b7c7e3",
+    "objectID": "42b69a5a-7052-4979-a448-5f416d0a01ff",
     "type": "lvl3",
     "url": "/docs/components/checkbox#custom-styles",
     "hierarchy": {
@@ -2373,7 +2514,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "0063df0b-3c34-4ff0-b350-418d411b5d99",
+    "objectID": "79ffeeaa-9039-4fd8-9e96-2e875bb75e0c",
     "type": "lvl3",
     "url": "/docs/components/checkbox#custom-implementation",
     "hierarchy": {
@@ -2384,35 +2525,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "09c934f2-f090-44ae-8aba-8a58015951a4",
+    "objectID": "587efd75-fa9a-4fb4-b51e-474a03ea4ead",
     "type": "lvl2",
     "url": "/docs/components/checkbox#data-attributes",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "63f68dcf-4621-4baa-ad48-f3357afef864",
+    "objectID": "0ac75e75-0eb7-4fdc-bbfd-c41c1b5b5695",
     "type": "lvl2",
     "url": "/docs/components/checkbox#accessibility",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "42b7b8b3-92b2-4bf7-a5ef-c04d12531f33",
+    "objectID": "46ec5b25-d042-4225-a23f-225bfe47a939",
     "type": "lvl2",
     "url": "/docs/components/checkbox#api",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Checkbox Props",
-    "objectID": "ddaac5be-d104-4481-8829-613111d142e3",
+    "objectID": "97478101-61a6-481b-9918-b9bef26ac61e",
     "type": "lvl3",
     "url": "/docs/components/checkbox#checkbox-props",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "API", "lvl3": "Checkbox Props" }
   },
   {
     "content": "Checkbox Events",
-    "objectID": "ed81d821-a9e6-4559-8e8a-cf0831e80ff9",
+    "objectID": "9e39ede6-be39-47cf-99de-c84281cb69d5",
     "type": "lvl3",
     "url": "/docs/components/checkbox#checkbox-events",
     "hierarchy": {
@@ -2423,7 +2564,7 @@
   },
   {
     "content": "Types",
-    "objectID": "d9f073d6-2e18-4dec-b6cc-755218b73c60",
+    "objectID": "e82b54e3-55ab-4704-a8d8-0eda854947bf",
     "type": "lvl3",
     "url": "/docs/components/checkbox#types",
     "hierarchy": {
@@ -2434,77 +2575,77 @@
   },
   {
     "content": "Checkbox Icon Props",
-    "objectID": "fe2fc0d3-225d-4291-b2f9-83cfe7042bfd",
+    "objectID": "2feb1c63-f022-4e34-9f38-d1a20754b6ca",
     "type": "lvl4",
     "url": "/docs/components/checkbox#checkbox-icon-props",
     "hierarchy": { "lvl1": "Checkbox", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Chip",
-    "objectID": "d97b98b8-c51c-4679-81e8-5a8e3abbc008",
+    "objectID": "ff1fbfda-10c7-4f8c-ae00-feacdcbcfa38",
     "type": "lvl1",
     "url": "/docs/components/chip",
     "hierarchy": { "lvl1": "Chip" }
   },
   {
     "content": "Installation",
-    "objectID": "564c5559-afc6-47d2-98d2-8bb793ca2d6f",
+    "objectID": "3682fa1c-2285-4ac9-889b-d0e98452686f",
     "type": "lvl2",
     "url": "/docs/components/chip#installation",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "7f15650b-cc82-4bec-bca0-08fd6b0141fc",
+    "objectID": "b478c50f-2de1-40a0-8fb9-03f910827ba3",
     "type": "lvl2",
     "url": "/docs/components/chip#import",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "a56618d1-dc95-4dd5-af03-b730e3217753",
+    "objectID": "04988b25-81b7-44a2-abd1-f1d420fef7ae",
     "type": "lvl2",
     "url": "/docs/components/chip#usage",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "4aa3f019-8d62-41e3-afc0-f3e79ce524e7",
+    "objectID": "c0b1dfe0-07c0-4176-a9ed-e006f3b217f3",
     "type": "lvl3",
     "url": "/docs/components/chip#disabled",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "e5d19732-6362-4a1d-ab93-c977b84b19b4",
+    "objectID": "8ea54078-c7ed-46d3-89a6-f813b85c0f2d",
     "type": "lvl3",
     "url": "/docs/components/chip#sizes",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "7daaf942-5f56-4116-b129-1f3ef785755f",
+    "objectID": "91b5975f-af1a-4ade-85f6-1b35af930b60",
     "type": "lvl3",
     "url": "/docs/components/chip#colors",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Radius",
-    "objectID": "ec1d3326-2331-42ad-95a7-04e7ffc9d4b0",
+    "objectID": "b76bac22-4f44-42f1-a5ba-c95f4e9f1fe5",
     "type": "lvl3",
     "url": "/docs/components/chip#radius",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Colors", "lvl3": "Radius" }
   },
   {
     "content": "Variants",
-    "objectID": "7408324b-6838-4caf-871d-e4f52085b424",
+    "objectID": "03425227-108a-4c6c-9cd7-30cfdab2839c",
     "type": "lvl3",
     "url": "/docs/components/chip#variants",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Radius", "lvl3": "Variants" }
   },
   {
     "content": "Start & End Content",
-    "objectID": "e35479ef-4384-40d8-a897-9d022516765b",
+    "objectID": "8d7fd0a9-3e39-4700-808e-291e0c7b9216",
     "type": "lvl3",
     "url": "/docs/components/chip#start--end-content",
     "hierarchy": {
@@ -2515,7 +2656,7 @@
   },
   {
     "content": "With Close Button",
-    "objectID": "f6f1a533-534a-420c-9f29-f7b65af1b1fc",
+    "objectID": "b8c94f62-45f8-4d47-9ef5-b66e2a2af6d5",
     "type": "lvl3",
     "url": "/docs/components/chip#with-close-button",
     "hierarchy": {
@@ -2526,7 +2667,7 @@
   },
   {
     "content": "With Avatar",
-    "objectID": "9b04a404-bc7c-42cb-96df-ff118b18c33e",
+    "objectID": "16b41bf0-9aaa-49bb-97f4-d6a1e880805a",
     "type": "lvl3",
     "url": "/docs/components/chip#with-avatar",
     "hierarchy": {
@@ -2537,7 +2678,7 @@
   },
   {
     "content": "List of Chips",
-    "objectID": "6d004b09-ad8a-406c-b6b8-61a63bada6e5",
+    "objectID": "04772919-26cc-412a-b9fb-a97f6ee10420",
     "type": "lvl3",
     "url": "/docs/components/chip#list-of-chips",
     "hierarchy": {
@@ -2548,49 +2689,49 @@
   },
   {
     "content": "Slots",
-    "objectID": "ae2c74d4-47b0-471b-819d-ee6e3e4d00e0",
+    "objectID": "f506d21e-359f-4a42-8b80-8ef199cb8915",
     "type": "lvl2",
     "url": "/docs/components/chip#slots",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "908a98d8-2cb8-4075-8f30-ab32ba02fdc0",
+    "objectID": "06df9522-da47-4492-bed1-f7c6f6ded01f",
     "type": "lvl3",
     "url": "/docs/components/chip#custom-styles",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "API",
-    "objectID": "01033136-2cb3-403c-8cd1-fa1bbb0ad8b3",
+    "objectID": "e0a4dad8-09ec-405b-ba1e-fb6943da345d",
     "type": "lvl2",
     "url": "/docs/components/chip#api",
     "hierarchy": { "lvl1": "Chip", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Chip Props",
-    "objectID": "c199dcf6-7b67-4aea-b7ce-681189b9ee0a",
+    "objectID": "ba60a4ea-b127-443e-8aab-723bd0f0bd90",
     "type": "lvl3",
     "url": "/docs/components/chip#chip-props",
     "hierarchy": { "lvl1": "Chip", "lvl2": "API", "lvl3": "Chip Props" }
   },
   {
     "content": "Chip Events",
-    "objectID": "a1d8e1f7-455e-48ec-a900-8af579cc1e7e",
+    "objectID": "ef21a6a0-97a4-46dc-904d-f271402f6bb4",
     "type": "lvl3",
     "url": "/docs/components/chip#chip-events",
     "hierarchy": { "lvl1": "Chip", "lvl2": "Chip Props", "lvl3": "Chip Events" }
   },
   {
     "content": "Circular Progress",
-    "objectID": "c0607e80-d672-4fc1-8060-a6df6c189bcb",
+    "objectID": "85b89393-909a-4236-8f02-5f7ad59beec8",
     "type": "lvl1",
     "url": "/docs/components/circular-progress",
     "hierarchy": { "lvl1": "Circular Progress" }
   },
   {
     "content": "Installation",
-    "objectID": "30a09286-aded-4140-84ca-9e4c1e38cec3",
+    "objectID": "46b7bec4-ac9b-4ada-837a-b8444ee41037",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#installation",
     "hierarchy": {
@@ -2601,21 +2742,21 @@
   },
   {
     "content": "Import",
-    "objectID": "4bd8452b-9ee0-4547-ade9-907f4fe4a0a1",
+    "objectID": "686d10bc-9616-45aa-8dbe-b4f44cd52e1d",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#import",
     "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "59b1bbaa-1ee4-45ca-9e66-8ef327f6a82d",
+    "objectID": "21cc825a-9857-4ba3-91c8-7794ba012ad0",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#usage",
     "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "30c8db81-5997-439b-8d2e-ed604ca0978d",
+    "objectID": "2ef16e47-417f-46ac-a2a5-e3d541944ec4",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#sizes",
     "hierarchy": {
@@ -2626,7 +2767,7 @@
   },
   {
     "content": "Colors",
-    "objectID": "85f8d788-7cdd-431d-9fac-77110d2613c0",
+    "objectID": "04e7c1bf-ebc1-4f2a-b516-cec0d7824ef2",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#colors",
     "hierarchy": {
@@ -2637,7 +2778,7 @@
   },
   {
     "content": "With Label",
-    "objectID": "a82ffe55-1bec-49ca-b0dd-324802cab1da",
+    "objectID": "0830b349-d227-46d0-adbc-7f83a737cde5",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#with-label",
     "hierarchy": {
@@ -2648,7 +2789,7 @@
   },
   {
     "content": "With Value",
-    "objectID": "4fb88960-5bca-43e6-9f01-09ef9412b8dd",
+    "objectID": "6a0af80a-47e4-4a71-96bb-6657585e94de",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#with-value",
     "hierarchy": {
@@ -2659,7 +2800,7 @@
   },
   {
     "content": "Value Formatting",
-    "objectID": "9ea8134d-205d-4cd4-a4cf-40096ee88af1",
+    "objectID": "8416e8ee-d7a8-47ee-bc38-339ee6eff908",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#value-formatting",
     "hierarchy": {
@@ -2670,14 +2811,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "57922dbd-f9f1-4871-9506-9302ff4b2ed0",
+    "objectID": "fc2da114-9133-4cb6-8467-c3815b68217a",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#slots",
     "hierarchy": { "lvl1": "Circular Progress", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "004a464d-9009-4f9b-b7f6-a5770ee14bb4",
+    "objectID": "60af0d9a-4b18-499d-a33d-03c07e80555f",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#custom-styles",
     "hierarchy": {
@@ -2688,7 +2829,7 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "f9ba9b7a-0def-47ba-9cb6-8e7c23cc5f41",
+    "objectID": "7a6948f8-fd23-4436-9560-343b00d48bd8",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#data-attributes",
     "hierarchy": {
@@ -2699,7 +2840,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "a94bb28a-72df-4fb6-aac5-7a0bae6113da",
+    "objectID": "20bba578-b8bc-43df-ba23-4d6ff3772d0e",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#accessibility",
     "hierarchy": {
@@ -2710,14 +2851,14 @@
   },
   {
     "content": "API",
-    "objectID": "b44d543a-537b-4253-9fde-e9f95bed9340",
+    "objectID": "f3fd839c-a038-48bf-aa54-c6ccf0a987fb",
     "type": "lvl2",
     "url": "/docs/components/circular-progress#api",
     "hierarchy": { "lvl1": "Circular Progress", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Circular Progress Props",
-    "objectID": "0210e5b9-a76f-4a91-8a01-529ce3870bd8",
+    "objectID": "70d37152-a50d-4f53-9f0d-433a2c6fdeb0",
     "type": "lvl3",
     "url": "/docs/components/circular-progress#circular-progress-props",
     "hierarchy": {
@@ -2728,98 +2869,98 @@
   },
   {
     "content": "Code",
-    "objectID": "cf07fd4e-6c7e-4890-a704-69fb6d7bb8f1",
+    "objectID": "3e5b3a50-a6d4-40e3-bbb4-803cbb3d74d1",
     "type": "lvl1",
     "url": "/docs/components/code",
     "hierarchy": { "lvl1": "Code" }
   },
   {
     "content": "Installation",
-    "objectID": "ec660c98-25fe-43d2-a2c2-cfc8eaf6db7c",
+    "objectID": "70ecf025-ab73-423f-a8a4-3502fa562651",
     "type": "lvl2",
     "url": "/docs/components/code#installation",
     "hierarchy": { "lvl1": "Code", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "7587d40c-2349-486a-8cc7-99936165f93a",
+    "objectID": "392e3442-c661-4a7e-9303-b2f99f1fea43",
     "type": "lvl2",
     "url": "/docs/components/code#import",
     "hierarchy": { "lvl1": "Code", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "d38ca906-712e-4940-ae31-6dfd57b16705",
+    "objectID": "bef2b4c4-50c4-4dd7-9a1d-0b643c55ee95",
     "type": "lvl2",
     "url": "/docs/components/code#usage",
     "hierarchy": { "lvl1": "Code", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "e710681f-26e1-4b82-b32c-c5a7ce7c9092",
+    "objectID": "4f1fb019-af8d-4393-8f2b-5ed28b766890",
     "type": "lvl3",
     "url": "/docs/components/code#sizes",
     "hierarchy": { "lvl1": "Code", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "6ac8f63b-1f2e-448a-8db5-e8937dff1743",
+    "objectID": "9f789174-201f-4fa3-9e51-8567858194db",
     "type": "lvl3",
     "url": "/docs/components/code#colors",
     "hierarchy": { "lvl1": "Code", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "API",
-    "objectID": "cedfd15b-a490-422a-b076-4d3064968ddd",
+    "objectID": "5a4539d4-4434-4c15-9ee9-54ee4bbd95de",
     "type": "lvl2",
     "url": "/docs/components/code#api",
     "hierarchy": { "lvl1": "Code", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Code Props",
-    "objectID": "0b61944c-44f8-4692-8524-70cfce5dacc7",
+    "objectID": "99aac0ac-2ef9-430a-87a3-5c9cc4535eee",
     "type": "lvl3",
     "url": "/docs/components/code#code-props",
     "hierarchy": { "lvl1": "Code", "lvl2": "API", "lvl3": "Code Props" }
   },
   {
     "content": "DateInput",
-    "objectID": "8c80aedb-d84d-4b5b-aea0-6b64aab4b6d3",
+    "objectID": "8c2b07b8-9c84-431f-8719-02989dcbf053",
     "type": "lvl1",
     "url": "/docs/components/date-input",
     "hierarchy": { "lvl1": "DateInput" }
   },
   {
     "content": "Installation",
-    "objectID": "1e90ebdb-9846-45d8-9cbc-2d78af13185a",
+    "objectID": "6508656f-2052-421e-8c0b-ebc5cb847b07",
     "type": "lvl2",
     "url": "/docs/components/date-input#installation",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "b9ba2757-8a07-46b9-9042-39dc9b36e677",
+    "objectID": "66b3133a-7b9f-46c1-b198-5da1198b696e",
     "type": "lvl2",
     "url": "/docs/components/date-input#import",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "62badf7b-5fd3-4f62-8012-48339e6199e6",
+    "objectID": "641abb39-a836-4bb5-a127-fa6837041570",
     "type": "lvl2",
     "url": "/docs/components/date-input#usage",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "a193089f-ade7-4338-b306-3b35e1d9231c",
+    "objectID": "816302bc-dd35-4533-a8d1-f717a7a8480d",
     "type": "lvl3",
     "url": "/docs/components/date-input#disabled",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Read Only",
-    "objectID": "c94392f7-0dc0-413b-b357-30c86d7270f5",
+    "objectID": "bef7d338-7cc6-4fc8-8056-7af46d52476a",
     "type": "lvl3",
     "url": "/docs/components/date-input#read-only",
     "hierarchy": {
@@ -2830,7 +2971,7 @@
   },
   {
     "content": "Required",
-    "objectID": "374fae73-7b13-4269-aadb-45e0ca94d3a3",
+    "objectID": "9ded0ca7-545f-4d5a-8c99-814e95a6a610",
     "type": "lvl3",
     "url": "/docs/components/date-input#required",
     "hierarchy": {
@@ -2841,14 +2982,14 @@
   },
   {
     "content": "Variants",
-    "objectID": "f1cde3e6-78b8-4e73-a310-404cff60372e",
+    "objectID": "98064875-372d-4ccf-99ad-4f4466385453",
     "type": "lvl3",
     "url": "/docs/components/date-input#variants",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Required", "lvl3": "Variants" }
   },
   {
     "content": "Label Placements",
-    "objectID": "9fbef8a5-425a-49aa-a2e5-3b03e0a7bd92",
+    "objectID": "b2b70e26-6889-48c5-8977-409603905789",
     "type": "lvl3",
     "url": "/docs/components/date-input#label-placements",
     "hierarchy": {
@@ -2859,7 +3000,7 @@
   },
   {
     "content": "Start & End Content",
-    "objectID": "e0807aec-05b6-48dc-a738-841e94012873",
+    "objectID": "9597e84f-f6d5-443a-af99-62c5af1c8e2e",
     "type": "lvl3",
     "url": "/docs/components/date-input#start--end-content",
     "hierarchy": {
@@ -2870,7 +3011,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "2ddbcebc-2400-47f9-83d2-2c46b15cb4ef",
+    "objectID": "34242540-8ef1-459d-8419-d1da5cefe919",
     "type": "lvl3",
     "url": "/docs/components/date-input#with-description",
     "hierarchy": {
@@ -2881,7 +3022,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "48df5e3d-9386-4a0a-984d-2e587991438d",
+    "objectID": "e572c607-1ad7-4334-be0f-85470c2208db",
     "type": "lvl3",
     "url": "/docs/components/date-input#with-error-message",
     "hierarchy": {
@@ -2892,7 +3033,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "632f4ff4-7a55-49e1-a71c-be1eefdbfba8",
+    "objectID": "7e35a7d2-670c-4620-98e3-be97c8cdda7c",
     "type": "lvl3",
     "url": "/docs/components/date-input#controlled",
     "hierarchy": {
@@ -2903,7 +3044,7 @@
   },
   {
     "content": "Time Zones",
-    "objectID": "9c608e5a-4d0c-43f0-ab21-f9e3241062c5",
+    "objectID": "bcf78b31-ca0f-47b4-acfe-86bd38b4be4b",
     "type": "lvl3",
     "url": "/docs/components/date-input#time-zones",
     "hierarchy": {
@@ -2914,7 +3055,7 @@
   },
   {
     "content": "Granularity",
-    "objectID": "87217e3a-0689-4b21-a531-7c54b83db4da",
+    "objectID": "0c4e1ede-057b-4562-bf65-b71693204f02",
     "type": "lvl3",
     "url": "/docs/components/date-input#granularity",
     "hierarchy": {
@@ -2925,7 +3066,7 @@
   },
   {
     "content": "Min Date And Max Date",
-    "objectID": "7ecbe533-2ad4-4a07-a2ce-e93507878b8c",
+    "objectID": "c83d1d67-9b8b-478b-90f1-72a3570ecd39",
     "type": "lvl3",
     "url": "/docs/components/date-input#min-date-and-max-date",
     "hierarchy": {
@@ -2936,7 +3077,7 @@
   },
   {
     "content": "International Calendar",
-    "objectID": "5373a630-4e8b-475a-a2ee-4d3bf9cb76e1",
+    "objectID": "e6644780-6814-44f2-aa49-51aeab8de24c",
     "type": "lvl3",
     "url": "/docs/components/date-input#international-calendar",
     "hierarchy": {
@@ -2947,7 +3088,7 @@
   },
   {
     "content": "Hide Time Zone",
-    "objectID": "32a33adb-6ec4-4572-b49d-d7e3dc39426e",
+    "objectID": "52505ad1-85f4-4b70-bd96-a217983bb5b0",
     "type": "lvl3",
     "url": "/docs/components/date-input#hide-time-zone",
     "hierarchy": {
@@ -2958,7 +3099,7 @@
   },
   {
     "content": "Hourly Cycle",
-    "objectID": "3ba902a5-e0fc-4ceb-8589-9282d6dfcc65",
+    "objectID": "bafd627c-f3c4-4db8-b120-25ce619b615d",
     "type": "lvl3",
     "url": "/docs/components/date-input#hourly-cycle",
     "hierarchy": {
@@ -2969,14 +3110,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "230d2f81-fcd5-41dd-88a3-066755e0f22a",
+    "objectID": "a27c88e6-e5a2-4108-8596-cc7c3fa728f2",
     "type": "lvl2",
     "url": "/docs/components/date-input#slots",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "863d2f50-d3da-430e-9357-90e61af97919",
+    "objectID": "653dd050-d3bd-41fb-acc0-958984e6fe54",
     "type": "lvl2",
     "url": "/docs/components/date-input#data-attributes",
     "hierarchy": {
@@ -2987,21 +3128,21 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "45c2315f-7655-4dbf-882b-7f55e685e6fd",
+    "objectID": "44c7c267-58ff-4095-9378-5e60480432c6",
     "type": "lvl2",
     "url": "/docs/components/date-input#accessibility",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "e0def356-d55e-428a-b5b2-7db62f45c7a5",
+    "objectID": "46cf3b1c-cbfb-4b94-8f15-f55c02557406",
     "type": "lvl2",
     "url": "/docs/components/date-input#api",
     "hierarchy": { "lvl1": "DateInput", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "DateInput Props",
-    "objectID": "ace3d888-f0f0-4536-8d1b-a2e91d19e4f5",
+    "objectID": "67f80dec-d6cf-4925-885b-452633ca613c",
     "type": "lvl3",
     "url": "/docs/components/date-input#dateinput-props",
     "hierarchy": {
@@ -3012,7 +3153,7 @@
   },
   {
     "content": "DateInput Events",
-    "objectID": "7f5d3562-5dfc-472d-bb60-a427b00f3ea9",
+    "objectID": "978c8341-d2b3-47a5-9a62-0d2bdbe929dc",
     "type": "lvl3",
     "url": "/docs/components/date-input#dateinput-events",
     "hierarchy": {
@@ -3023,42 +3164,42 @@
   },
   {
     "content": "DatePicker",
-    "objectID": "f24a3dcc-4c61-4ac9-b693-81850c0dd97b",
+    "objectID": "1908e3c8-090d-4d2b-a2a6-5282ed4dd40d",
     "type": "lvl1",
     "url": "/docs/components/date-picker",
     "hierarchy": { "lvl1": "DatePicker" }
   },
   {
     "content": "Installation",
-    "objectID": "51284fdb-ebe7-4b66-9a30-20bfc6753c54",
+    "objectID": "ff846e99-a578-4eac-a5cd-dcde71a16517",
     "type": "lvl2",
     "url": "/docs/components/date-picker#installation",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "5ff7efbb-5c6d-48b1-91bb-02bf3dc6c2e1",
+    "objectID": "d08b1957-1d0f-4183-805e-4faf9d6e222d",
     "type": "lvl2",
     "url": "/docs/components/date-picker#import",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "58cd41f3-b17c-491d-89a5-0ca03551aa88",
+    "objectID": "5e088b0c-52ec-49a3-af5a-526685a81b4d",
     "type": "lvl2",
     "url": "/docs/components/date-picker#usage",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "30a7c9d5-06e8-406b-beb3-65b857239d77",
+    "objectID": "f5cee854-509f-4f8c-8661-3f9010a52b91",
     "type": "lvl3",
     "url": "/docs/components/date-picker#disabled",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Read Only",
-    "objectID": "cf052b54-6a72-47d0-bad6-47afcdd70e9e",
+    "objectID": "45672822-c479-48bb-a374-e854153014f9",
     "type": "lvl3",
     "url": "/docs/components/date-picker#read-only",
     "hierarchy": {
@@ -3069,7 +3210,7 @@
   },
   {
     "content": "Required",
-    "objectID": "25a97ead-92a1-47d3-a74d-40e9c0d993c5",
+    "objectID": "ecd75a91-4e7e-46b9-82ae-03f954bbfedc",
     "type": "lvl3",
     "url": "/docs/components/date-picker#required",
     "hierarchy": {
@@ -3080,7 +3221,7 @@
   },
   {
     "content": "Variants",
-    "objectID": "8d98cfa0-b3c4-4456-b940-ae1f9e88eeda",
+    "objectID": "5be7650e-de12-4832-b2fc-60710d3956ed",
     "type": "lvl3",
     "url": "/docs/components/date-picker#variants",
     "hierarchy": {
@@ -3091,7 +3232,7 @@
   },
   {
     "content": "Label Placements",
-    "objectID": "ec726d03-fe3e-4d25-a6a0-4ebc3a1a8460",
+    "objectID": "4cfdfb94-d330-4c75-ad54-b2a8f2a10171",
     "type": "lvl3",
     "url": "/docs/components/date-picker#label-placements",
     "hierarchy": {
@@ -3102,7 +3243,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "f039e32b-578c-4b51-9295-04767433f4ae",
+    "objectID": "eb1c02d8-dc29-4450-b2e0-0f7bd3b15dca",
     "type": "lvl3",
     "url": "/docs/components/date-picker#with-description",
     "hierarchy": {
@@ -3113,7 +3254,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "ae1b99bf-19c4-4a1f-90fd-2cc8421cd183",
+    "objectID": "13a546ec-1be4-43d6-85ea-de72dd24cdbc",
     "type": "lvl3",
     "url": "/docs/components/date-picker#with-error-message",
     "hierarchy": {
@@ -3124,7 +3265,7 @@
   },
   {
     "content": "With Month and Year Pickers",
-    "objectID": "cdc2ef17-cef1-4452-bcd7-9591775384a3",
+    "objectID": "61e6a8dd-0ca5-4c55-ad35-2b6e4c151f26",
     "type": "lvl3",
     "url": "/docs/components/date-picker#with-month-and-year-pickers",
     "hierarchy": {
@@ -3135,7 +3276,7 @@
   },
   {
     "content": "With Time Fields",
-    "objectID": "2ddf5e77-4cde-4aae-8c84-7347ae88bd06",
+    "objectID": "b7f56610-1637-4f1d-a313-e6c7737547e6",
     "type": "lvl3",
     "url": "/docs/components/date-picker#with-time-fields",
     "hierarchy": {
@@ -3146,7 +3287,7 @@
   },
   {
     "content": "Selector Icon",
-    "objectID": "457269e3-4341-4af8-9f76-68a68e9a7205",
+    "objectID": "657b4d5c-5840-453c-bc2e-c0ebe65336dc",
     "type": "lvl3",
     "url": "/docs/components/date-picker#selector-icon",
     "hierarchy": {
@@ -3155,20 +3296,31 @@
       "lvl3": "Selector Icon"
     }
   },
+  {
+    "content": "Selector Button Placement",
+    "objectID": "bbc7b352-3e91-45c4-b487-8c724b9fcfe6",
+    "type": "lvl3",
+    "url": "/docs/components/date-picker#selector-button-placement",
+    "hierarchy": {
+      "lvl1": "DatePicker",
+      "lvl2": "Selector Icon",
+      "lvl3": "Selector Button Placement"
+    }
+  },
   {
     "content": "Controlled",
-    "objectID": "5cc80a7d-f237-4822-ab22-2ebf1d53a0a8",
+    "objectID": "27a555db-cdc6-49e3-a2f6-9c9740a10674",
     "type": "lvl3",
     "url": "/docs/components/date-picker#controlled",
     "hierarchy": {
       "lvl1": "DatePicker",
-      "lvl2": "Selector Icon",
+      "lvl2": "Selector Button Placement",
       "lvl3": "Controlled"
     }
   },
   {
     "content": "Time Zones",
-    "objectID": "d2a12639-3b66-4fe8-8e31-fe8a1f4363eb",
+    "objectID": "d2dc02d1-cd24-4e2a-94b0-a7d52a8895c5",
     "type": "lvl3",
     "url": "/docs/components/date-picker#time-zones",
     "hierarchy": {
@@ -3179,7 +3331,7 @@
   },
   {
     "content": "Granularity",
-    "objectID": "9e0ea0d4-7e21-4bc4-adc5-35d6b2c41ba9",
+    "objectID": "bd7b44c3-bc1e-467e-8020-5fe54c0194ae",
     "type": "lvl3",
     "url": "/docs/components/date-picker#granularity",
     "hierarchy": {
@@ -3190,7 +3342,7 @@
   },
   {
     "content": "Min Date And Max Date",
-    "objectID": "49768cfd-891c-4205-8a1b-429b502d310d",
+    "objectID": "89bbee2f-9e26-4c67-a841-e2a2e6c4cba5",
     "type": "lvl3",
     "url": "/docs/components/date-picker#min-date-and-max-date",
     "hierarchy": {
@@ -3201,7 +3353,7 @@
   },
   {
     "content": "International Calendar",
-    "objectID": "c3b2fc1b-9de0-4356-9852-00432d3c0bb7",
+    "objectID": "eab4623b-b5a5-488d-b4f3-599e6ef7adc9",
     "type": "lvl3",
     "url": "/docs/components/date-picker#international-calendar",
     "hierarchy": {
@@ -3212,7 +3364,7 @@
   },
   {
     "content": "Unavailable Dates",
-    "objectID": "84e23f4a-cac7-4bf8-8e21-8607bc5654a2",
+    "objectID": "635216d8-6098-4e9e-ae02-52eb270597a6",
     "type": "lvl3",
     "url": "/docs/components/date-picker#unavailable-dates",
     "hierarchy": {
@@ -3223,7 +3375,7 @@
   },
   {
     "content": "Visible Months",
-    "objectID": "71b452fd-cd81-4d67-a31f-31ec7cae803b",
+    "objectID": "95bacf6f-5b9d-4274-b196-f7da8fe20fd7",
     "type": "lvl3",
     "url": "/docs/components/date-picker#visible-months",
     "hierarchy": {
@@ -3234,7 +3386,7 @@
   },
   {
     "content": "Page Behavior",
-    "objectID": "64f81eff-7262-4c81-889c-c9c9bd84cba8",
+    "objectID": "6139da1c-e422-46c7-954e-65e1e1626d0d",
     "type": "lvl3",
     "url": "/docs/components/date-picker#page-behavior",
     "hierarchy": {
@@ -3245,7 +3397,7 @@
   },
   {
     "content": "Preset",
-    "objectID": "47ea7a28-4f9c-4ef7-a580-8001cbfe09cf",
+    "objectID": "67380105-4e16-416e-8397-f1031ccdf01e",
     "type": "lvl3",
     "url": "/docs/components/date-picker#preset",
     "hierarchy": {
@@ -3256,14 +3408,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "47d4cbce-8081-49e6-9e4c-92cd293ab869",
+    "objectID": "e2240a24-3ad5-4d29-bbdd-fce0f4a27237",
     "type": "lvl2",
     "url": "/docs/components/date-picker#slots",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "faf9a3cc-bb72-42b5-9d23-af0b9c1e9ef3",
+    "objectID": "d39efaaf-329c-41b8-b216-169cb91607e2",
     "type": "lvl2",
     "url": "/docs/components/date-picker#data-attributes",
     "hierarchy": {
@@ -3274,21 +3426,21 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "d3bb9d7b-c6d9-4d29-816b-b583ac162bd7",
+    "objectID": "57380255-f521-4ceb-94a3-bae9355ddfce",
     "type": "lvl2",
     "url": "/docs/components/date-picker#accessibility",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "c5e5a12e-0497-4089-91c1-486f85357ff6",
+    "objectID": "219dc6a6-8983-4a67-a83a-0ab188c9a34f",
     "type": "lvl2",
     "url": "/docs/components/date-picker#api",
     "hierarchy": { "lvl1": "DatePicker", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "DatePicker Props",
-    "objectID": "8b6c51df-fded-4572-9bff-1140fd6061d7",
+    "objectID": "a1885295-5a11-45db-9598-4d89beed3177",
     "type": "lvl3",
     "url": "/docs/components/date-picker#datepicker-props",
     "hierarchy": {
@@ -3299,7 +3451,7 @@
   },
   {
     "content": "DatePicker Events",
-    "objectID": "9a091269-8130-43ec-9619-18d5a5db1bf1",
+    "objectID": "1b274b81-b6f7-4aab-a6a6-7319d86901f4",
     "type": "lvl3",
     "url": "/docs/components/date-picker#datepicker-events",
     "hierarchy": {
@@ -3310,28 +3462,39 @@
   },
   {
     "content": "Date Range Picker",
-    "objectID": "9475d30d-832a-4ce5-bc21-34d278195f1b",
+    "objectID": "dd28a567-96fb-439f-a5cd-88ae234cd454",
     "type": "lvl1",
     "url": "/docs/components/date-range-picker",
     "hierarchy": { "lvl1": "Date Range Picker" }
   },
+  {
+    "content": "Installation",
+    "objectID": "7c1efda6-1cd8-4197-9958-2573ccb732e4",
+    "type": "lvl2",
+    "url": "/docs/components/date-range-picker#installation",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "Installation",
+      "lvl3": null
+    }
+  },
   {
     "content": "Import",
-    "objectID": "c97ec6f2-e0da-4ae1-af47-149db1b734dd",
+    "objectID": "65f3193e-cec5-4d91-acee-052335d1668b",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#import",
     "hierarchy": { "lvl1": "Date Range Picker", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "03c1198c-e7a5-4227-9429-f13f59d76050",
+    "objectID": "94801787-c32a-4953-9d4f-0f064f9a6cd7",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#usage",
     "hierarchy": { "lvl1": "Date Range Picker", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "72e932e6-1fc9-4512-bb06-3cf51e62a69d",
+    "objectID": "d5278e05-5f46-44c3-94aa-ecc73ed8c5d3",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#disabled",
     "hierarchy": {
@@ -3342,7 +3505,7 @@
   },
   {
     "content": "Read Only",
-    "objectID": "62c8ca62-bc88-40bc-92e8-446328938a0b",
+    "objectID": "130f9e2b-186c-4bc6-a9ff-c98cbe71a055",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#read-only",
     "hierarchy": {
@@ -3353,7 +3516,7 @@
   },
   {
     "content": "Required",
-    "objectID": "47eca5ba-10b4-4b31-a3da-15470b7690cc",
+    "objectID": "31ce67af-931c-4c04-9283-d0307d8b1c63",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#required",
     "hierarchy": {
@@ -3364,7 +3527,7 @@
   },
   {
     "content": "Variants",
-    "objectID": "8e79bfe0-08e0-466c-abbe-c18e72674c04",
+    "objectID": "1f349eed-0cf9-48f0-b5f2-c04f7be68691",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#variants",
     "hierarchy": {
@@ -3373,20 +3536,42 @@
       "lvl3": "Variants"
     }
   },
+  {
+    "content": "Visible Months",
+    "objectID": "abfcafec-8e21-4077-9336-c9f3f43e3932",
+    "type": "lvl3",
+    "url": "/docs/components/date-range-picker#visible-months",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "Variants",
+      "lvl3": "Visible Months"
+    }
+  },
+  {
+    "content": "Page Behavior",
+    "objectID": "dad5d527-46c0-4b5f-b973-80898122b117",
+    "type": "lvl3",
+    "url": "/docs/components/date-range-picker#page-behavior",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "Visible Months",
+      "lvl3": "Page Behavior"
+    }
+  },
   {
     "content": "Label Placements",
-    "objectID": "d924aca1-f449-465f-bfef-9e284b252173",
+    "objectID": "c0f8a196-6ce4-4544-92d6-7f78f3acd757",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#label-placements",
     "hierarchy": {
       "lvl1": "Date Range Picker",
-      "lvl2": "Variants",
+      "lvl2": "Page Behavior",
       "lvl3": "Label Placements"
     }
   },
   {
     "content": "With Description",
-    "objectID": "fd39c7e6-e4bb-4638-944c-7bdb8479bd43",
+    "objectID": "8c7b1f75-b9c6-48b9-a8a0-6f93036dc02a",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#with-description",
     "hierarchy": {
@@ -3397,7 +3582,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "b06b5f6a-68b6-4b8b-9dbe-c0d7335a606f",
+    "objectID": "acb41582-caf5-4dec-8ad4-b6034e058496",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#with-error-message",
     "hierarchy": {
@@ -3406,20 +3591,31 @@
       "lvl3": "With Error Message"
     }
   },
+  {
+    "content": "With Month and Year Pickers",
+    "objectID": "efc020ec-edcd-4259-b3ab-8c382a038c03",
+    "type": "lvl3",
+    "url": "/docs/components/date-range-picker#with-month-and-year-pickers",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "With Error Message",
+      "lvl3": "With Month and Year Pickers"
+    }
+  },
   {
     "content": "With Time Fields",
-    "objectID": "ed328851-bc6a-4e19-add4-f71adf1c57f3",
+    "objectID": "78fb2f6a-4480-4d39-aa08-8bf10496746a",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#with-time-fields",
     "hierarchy": {
       "lvl1": "Date Range Picker",
-      "lvl2": "With Error Message",
+      "lvl2": "With Month and Year Pickers",
       "lvl3": "With Time Fields"
     }
   },
   {
     "content": "Selector Icon",
-    "objectID": "ae51ba93-ca4f-4212-b5ce-8df3d4c8b79f",
+    "objectID": "bf3bb811-f705-4b30-8baf-3861c1355e32",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#selector-icon",
     "hierarchy": {
@@ -3428,20 +3624,31 @@
       "lvl3": "Selector Icon"
     }
   },
+  {
+    "content": "Selector Button Placement",
+    "objectID": "b97cbb41-3e19-4aaf-9f28-6265bdf3991f",
+    "type": "lvl3",
+    "url": "/docs/components/date-range-picker#selector-button-placement",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "Selector Icon",
+      "lvl3": "Selector Button Placement"
+    }
+  },
   {
     "content": "Controlled",
-    "objectID": "ead1c015-c6f2-4af0-a81b-3e4d3c0bde3a",
+    "objectID": "311fd7c3-dda8-4d79-b536-a2c5630e96ac",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#controlled",
     "hierarchy": {
       "lvl1": "Date Range Picker",
-      "lvl2": "Selector Icon",
+      "lvl2": "Selector Button Placement",
       "lvl3": "Controlled"
     }
   },
   {
     "content": "Time Zones",
-    "objectID": "990f65f0-192c-4edd-8eff-dc33e93487dc",
+    "objectID": "7f2c2e04-3355-4bf7-83b6-5baeea81ce4a",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#time-zones",
     "hierarchy": {
@@ -3452,7 +3659,7 @@
   },
   {
     "content": "Granularity",
-    "objectID": "5d8b6708-46f2-48d0-a7a9-bad993641ab1",
+    "objectID": "d9ec49c9-70e1-42f7-a2e9-e64da0d6e5c1",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#granularity",
     "hierarchy": {
@@ -3463,7 +3670,7 @@
   },
   {
     "content": "Min Date And Max Date",
-    "objectID": "499635b7-561b-4e3d-b115-fab677e6b32f",
+    "objectID": "89ff8c2d-e46d-40f6-b6e5-faa23a9ee2b0",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#min-date-and-max-date",
     "hierarchy": {
@@ -3474,7 +3681,7 @@
   },
   {
     "content": "International Calendar",
-    "objectID": "c4b18b61-fbd8-490e-b7a8-c9e78bc56e56",
+    "objectID": "8b065e6e-e226-408b-8c1b-0dd60ab87d6d",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#international-calendar",
     "hierarchy": {
@@ -3485,7 +3692,7 @@
   },
   {
     "content": "Unavailable Dates",
-    "objectID": "a235fa13-2985-48f8-80d2-1cee8d94d31d",
+    "objectID": "9bd178f8-df31-4a33-a2e0-7c3d7c238703",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#unavailable-dates",
     "hierarchy": {
@@ -3496,7 +3703,7 @@
   },
   {
     "content": "Non Contiguous",
-    "objectID": "2de67aa5-5de4-434e-947d-3d158a6f9e55",
+    "objectID": "09500c7c-cba8-4b00-9929-07719498ac1c",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#non-contiguous",
     "hierarchy": {
@@ -3505,49 +3712,38 @@
       "lvl3": "Non Contiguous"
     }
   },
-  {
-    "content": "Visible Months",
-    "objectID": "3c72a958-b816-46d0-b4a7-aa9db8f428f7",
-    "type": "lvl3",
-    "url": "/docs/components/date-range-picker#visible-months",
-    "hierarchy": {
-      "lvl1": "Date Range Picker",
-      "lvl2": "Non Contiguous",
-      "lvl3": "Visible Months"
-    }
-  },
-  {
-    "content": "Page Behavior",
-    "objectID": "d7f0af72-2ac2-49b8-9b2d-8a75faaabac4",
-    "type": "lvl3",
-    "url": "/docs/components/date-range-picker#page-behavior",
-    "hierarchy": {
-      "lvl1": "Date Range Picker",
-      "lvl2": "Visible Months",
-      "lvl3": "Page Behavior"
-    }
-  },
   {
     "content": "Presets",
-    "objectID": "6d1bdc43-1471-459c-a64b-9e0c2b7b584f",
+    "objectID": "29e124bc-9542-4281-b561-baa14e034561",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#presets",
     "hierarchy": {
       "lvl1": "Date Range Picker",
-      "lvl2": "Page Behavior",
+      "lvl2": "Non Contiguous",
       "lvl3": "Presets"
     }
   },
   {
     "content": "Slots",
-    "objectID": "30b609f2-a752-44c2-90de-d6f217f165af",
+    "objectID": "d2dc9c06-b791-46a7-9673-547758428730",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#slots",
     "hierarchy": { "lvl1": "Date Range Picker", "lvl2": "Slots", "lvl3": null }
   },
+  {
+    "content": "Custom Styles",
+    "objectID": "37fa148d-3d19-4176-96db-c07107e864f0",
+    "type": "lvl3",
+    "url": "/docs/components/date-range-picker#custom-styles",
+    "hierarchy": {
+      "lvl1": "Date Range Picker",
+      "lvl2": "Slots",
+      "lvl3": "Custom Styles"
+    }
+  },
   {
     "content": "Data Attributes",
-    "objectID": "64a21bd9-8449-4e02-a9e5-c8524d5654a1",
+    "objectID": "4f5f8a1d-0721-43c8-a22a-163c62c419fc",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#data-attributes",
     "hierarchy": {
@@ -3558,7 +3754,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "42526581-20e6-4c63-86d7-0c3f27c00ad0",
+    "objectID": "187ce455-0c26-47f0-8580-1f2c9094c357",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#accessibility",
     "hierarchy": {
@@ -3569,14 +3765,14 @@
   },
   {
     "content": "API",
-    "objectID": "dc33ac42-aa9d-4e91-a9b4-ea9c203f83ac",
+    "objectID": "d66845bb-37ee-4d50-8414-b847685690c5",
     "type": "lvl2",
     "url": "/docs/components/date-range-picker#api",
     "hierarchy": { "lvl1": "Date Range Picker", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "DateRangePicker Props",
-    "objectID": "cf869298-811d-4ed3-a89c-dd1924615b06",
+    "objectID": "c0044d74-88ef-42a7-82a4-71b762fdf343",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#daterangepicker-props",
     "hierarchy": {
@@ -3587,7 +3783,7 @@
   },
   {
     "content": "DateRangePicker Events",
-    "objectID": "3b78ff5a-bbb2-41ad-9c6f-1a5a20197114",
+    "objectID": "12c0d291-58c4-4a33-85f9-05964b2ef11c",
     "type": "lvl3",
     "url": "/docs/components/date-range-picker#daterangepicker-events",
     "hierarchy": {
@@ -3598,113 +3794,274 @@
   },
   {
     "content": "Divider",
-    "objectID": "06607d44-a408-4d2f-8113-5e538e1d0038",
+    "objectID": "d16e902c-80c1-42f4-98ff-d9c0fe1e80b4",
     "type": "lvl1",
     "url": "/docs/components/divider",
     "hierarchy": { "lvl1": "Divider" }
   },
   {
     "content": "Installation",
-    "objectID": "b5eb5595-ce15-4e5a-abe9-886e774bea7f",
+    "objectID": "8ccc17e3-5b58-4946-ab97-f2e81e0b112e",
     "type": "lvl2",
     "url": "/docs/components/divider#installation",
     "hierarchy": { "lvl1": "Divider", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "94febf42-11a2-47ae-a13c-6eef8f138d32",
+    "objectID": "bdf5d390-277f-4294-a6fc-5f4595c37ae1",
     "type": "lvl2",
     "url": "/docs/components/divider#import",
     "hierarchy": { "lvl1": "Divider", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "6d11988d-2619-4b98-9e73-34402d452ce5",
+    "objectID": "9020e33c-c2fb-4f78-87f1-bcdcd84b20d2",
     "type": "lvl2",
     "url": "/docs/components/divider#usage",
     "hierarchy": { "lvl1": "Divider", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "443a46fd-38d8-4022-812f-3f798dff8e2e",
+    "objectID": "3537e59a-662b-425f-8c2a-68033cbdd246",
     "type": "lvl2",
     "url": "/docs/components/divider#data-attributes",
     "hierarchy": { "lvl1": "Divider", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "085da30c-642e-4e83-9ccc-b74a6876beb6",
+    "objectID": "3da0e7b8-8a34-4ee1-a183-c094c43747d2",
     "type": "lvl2",
     "url": "/docs/components/divider#accessibility",
     "hierarchy": { "lvl1": "Divider", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "f013c11b-14d2-4190-a833-15634e28d06f",
+    "objectID": "d9eb201e-c9b6-4668-b3ab-f84604c2db13",
     "type": "lvl2",
     "url": "/docs/components/divider#api",
     "hierarchy": { "lvl1": "Divider", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Divider Props",
-    "objectID": "180f296d-2661-44ad-a12d-43508d59431c",
+    "objectID": "684a5f3c-441f-43e9-94b0-a6e42797807f",
     "type": "lvl3",
     "url": "/docs/components/divider#divider-props",
     "hierarchy": { "lvl1": "Divider", "lvl2": "API", "lvl3": "Divider Props" }
   },
   {
-    "content": "Dropdown",
-    "objectID": "a4b6187a-ad4a-4e68-9d27-ecb4045f0e8e",
+    "content": "Drawer",
+    "objectID": "4e60bd70-35a9-444d-af53-32dc62347806",
     "type": "lvl1",
-    "url": "/docs/components/dropdown",
-    "hierarchy": { "lvl1": "Dropdown" }
+    "url": "/docs/components/drawer",
+    "hierarchy": { "lvl1": "Drawer" }
   },
   {
     "content": "Installation",
-    "objectID": "e830d76c-c551-4067-af1f-ffeaeeb103a7",
+    "objectID": "6cc601c9-5411-407c-85cc-0d9be531bf41",
     "type": "lvl2",
-    "url": "/docs/components/dropdown#installation",
-    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Installation", "lvl3": null }
+    "url": "/docs/components/drawer#installation",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "49011ef6-a8f4-443a-816e-735beefb2d61",
+    "objectID": "9893c848-c75b-4f83-8955-47492935e845",
     "type": "lvl2",
-    "url": "/docs/components/dropdown#import",
-    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Import", "lvl3": null }
+    "url": "/docs/components/drawer#import",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "76b3bda6-f400-4fc4-84b3-672077b7850a",
+    "objectID": "21152d12-f342-4ecc-a6e4-1270b1b159bd",
     "type": "lvl2",
-    "url": "/docs/components/dropdown#usage",
-    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Usage", "lvl3": null }
+    "url": "/docs/components/drawer#usage",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Usage", "lvl3": null }
   },
   {
-    "content": "Dynamic items",
-    "objectID": "4054f685-3c0d-4e58-89ec-948415ab2864",
+    "content": "Sizes",
+    "objectID": "e93d50ab-e2ad-4870-905d-6b493406bc94",
     "type": "lvl3",
-    "url": "/docs/components/dropdown#dynamic-items",
+    "url": "/docs/components/drawer#sizes",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Usage", "lvl3": "Sizes" }
+  },
+  {
+    "content": "Non-dismissible",
+    "objectID": "52c46a5c-75d1-44a9-92a6-7b67ec7e4025",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#non-dismissible",
     "hierarchy": {
-      "lvl1": "Dropdown",
-      "lvl2": "Usage",
-      "lvl3": "Dynamic items"
+      "lvl1": "Drawer",
+      "lvl2": "Sizes",
+      "lvl3": "Non-dismissible"
     }
   },
   {
-    "content": "Disabled Keys",
-    "objectID": "8b128ff1-158e-4441-b9ca-1e6533c40f91",
+    "content": "Drawer placement",
+    "objectID": "f084fa72-5555-42fe-a31a-3f8491558dc9",
     "type": "lvl3",
-    "url": "/docs/components/dropdown#disabled-keys",
+    "url": "/docs/components/drawer#drawer-placement",
     "hierarchy": {
-      "lvl1": "Dropdown",
+      "lvl1": "Drawer",
+      "lvl2": "Non-dismissible",
+      "lvl3": "Drawer placement"
+    }
+  },
+  {
+    "content": "With Form",
+    "objectID": "30ef3b45-5c6b-46f2-a0cb-832d86c0523e",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#with-form",
+    "hierarchy": {
+      "lvl1": "Drawer",
+      "lvl2": "Drawer placement",
+      "lvl3": "With Form"
+    }
+  },
+  {
+    "content": "Backdrop",
+    "objectID": "cf06bc6d-6309-42cb-ab9c-cafbf562e563",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#backdrop",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "With Form", "lvl3": "Backdrop" }
+  },
+  {
+    "content": "Custom Motion",
+    "objectID": "1e28c52d-ec54-4255-b3a3-3f759748b877",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#custom-motion",
+    "hierarchy": {
+      "lvl1": "Drawer",
+      "lvl2": "Backdrop",
+      "lvl3": "Custom Motion"
+    }
+  },
+  {
+    "content": "Custom Styles",
+    "objectID": "83dade26-6490-498f-9a62-a6ecdffc1ea9",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#custom-styles",
+    "hierarchy": {
+      "lvl1": "Drawer",
+      "lvl2": "Custom Motion",
+      "lvl3": "Custom Styles"
+    }
+  },
+  {
+    "content": "Slots",
+    "objectID": "d85e5969-dcbd-49ae-9ae0-6c80db070b26",
+    "type": "lvl2",
+    "url": "/docs/components/drawer#slots",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Slots", "lvl3": null }
+  },
+  {
+    "content": "Data Attributes",
+    "objectID": "c1d4021b-dd9b-49ce-b676-0d9bef41519d",
+    "type": "lvl2",
+    "url": "/docs/components/drawer#data-attributes",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Data Attributes", "lvl3": null }
+  },
+  {
+    "content": "Accessibility",
+    "objectID": "fd7275c3-2ecf-4b30-bca2-aef0fa449aa5",
+    "type": "lvl2",
+    "url": "/docs/components/drawer#accessibility",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Accessibility", "lvl3": null }
+  },
+  {
+    "content": "API",
+    "objectID": "dcfb227b-6940-4d1d-a386-e4b21ad7e166",
+    "type": "lvl2",
+    "url": "/docs/components/drawer#api",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "API", "lvl3": null }
+  },
+  {
+    "content": "Drawer Props",
+    "objectID": "ea626df2-518c-43a7-98e3-0d04150ac7eb",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#drawer-props",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "API", "lvl3": "Drawer Props" }
+  },
+  {
+    "content": "Drawer Events",
+    "objectID": "90d5b07a-1e4d-43d5-90b8-66aa8bc131dd",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#drawer-events",
+    "hierarchy": {
+      "lvl1": "Drawer",
+      "lvl2": "Drawer Props",
+      "lvl3": "Drawer Events"
+    }
+  },
+  {
+    "content": "Drawer types",
+    "objectID": "fdfe11c9-e26b-4e90-8ea0-66d57c9cb8db",
+    "type": "lvl3",
+    "url": "/docs/components/drawer#drawer-types",
+    "hierarchy": {
+      "lvl1": "Drawer",
+      "lvl2": "Drawer Events",
+      "lvl3": "Drawer types"
+    }
+  },
+  {
+    "content": "Motion Props",
+    "objectID": "8b63c774-317c-4bdc-9300-96d5efe67b06",
+    "type": "lvl4",
+    "url": "/docs/components/drawer#motion-props",
+    "hierarchy": { "lvl1": "Drawer", "lvl2": "Drawer types", "lvl3": null }
+  },
+  {
+    "content": "Dropdown",
+    "objectID": "5c6038e3-38b1-45ce-a91d-1f0af1b752b3",
+    "type": "lvl1",
+    "url": "/docs/components/dropdown",
+    "hierarchy": { "lvl1": "Dropdown" }
+  },
+  {
+    "content": "Installation",
+    "objectID": "c93eb7ed-6515-460f-ac40-65e1dcb49b48",
+    "type": "lvl2",
+    "url": "/docs/components/dropdown#installation",
+    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Installation", "lvl3": null }
+  },
+  {
+    "content": "Import",
+    "objectID": "7d607478-0d9f-4052-921e-6066506cb80d",
+    "type": "lvl2",
+    "url": "/docs/components/dropdown#import",
+    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Import", "lvl3": null }
+  },
+  {
+    "content": "Usage",
+    "objectID": "c2828007-9a3d-4e23-84ea-f9ceb2985823",
+    "type": "lvl2",
+    "url": "/docs/components/dropdown#usage",
+    "hierarchy": { "lvl1": "Dropdown", "lvl2": "Usage", "lvl3": null }
+  },
+  {
+    "content": "Dynamic items",
+    "objectID": "b96b1101-8d15-455b-9ec7-95bda818f8b7",
+    "type": "lvl3",
+    "url": "/docs/components/dropdown#dynamic-items",
+    "hierarchy": {
+      "lvl1": "Dropdown",
+      "lvl2": "Usage",
+      "lvl3": "Dynamic items"
+    }
+  },
+  {
+    "content": "Disabled Keys",
+    "objectID": "facd77e4-bc70-41a7-a54c-1a1489c4728a",
+    "type": "lvl3",
+    "url": "/docs/components/dropdown#disabled-keys",
+    "hierarchy": {
+      "lvl1": "Dropdown",
       "lvl2": "Dynamic items",
       "lvl3": "Disabled Keys"
     }
   },
   {
     "content": "Action event",
-    "objectID": "f1c20e40-9122-41ad-99ac-d2c0bc35629b",
+    "objectID": "a046e972-a24a-44cf-94e5-95e509359594",
     "type": "lvl3",
     "url": "/docs/components/dropdown#action-event",
     "hierarchy": {
@@ -3715,7 +4072,7 @@
   },
   {
     "content": "Variants",
-    "objectID": "66650e65-41de-432e-a4a1-e6d1668a5372",
+    "objectID": "778cc7bb-d3c5-497c-9b14-6c2894d96596",
     "type": "lvl3",
     "url": "/docs/components/dropdown#variants",
     "hierarchy": {
@@ -3726,7 +4083,7 @@
   },
   {
     "content": "Single Selection",
-    "objectID": "1bc80e7e-379a-408f-b63a-7193a47319e9",
+    "objectID": "5be498ed-06a0-4f6c-b72e-6f8bd6442b19",
     "type": "lvl3",
     "url": "/docs/components/dropdown#single-selection",
     "hierarchy": {
@@ -3737,7 +4094,7 @@
   },
   {
     "content": "Multiple Selection",
-    "objectID": "7942f93e-45f6-4c20-9417-22ecac2187d1",
+    "objectID": "1e4cc12e-727d-4fbc-81df-119deadedfec",
     "type": "lvl3",
     "url": "/docs/components/dropdown#multiple-selection",
     "hierarchy": {
@@ -3748,7 +4105,7 @@
   },
   {
     "content": "With Shortcut",
-    "objectID": "7aa7d961-b794-49d2-b31c-913ca30f2373",
+    "objectID": "94ebefaf-4c87-4bc8-8eed-78d28251e884",
     "type": "lvl3",
     "url": "/docs/components/dropdown#with-shortcut",
     "hierarchy": {
@@ -3759,7 +4116,7 @@
   },
   {
     "content": "With Icons",
-    "objectID": "731b0b86-21cd-405a-947d-db4418d7bacd",
+    "objectID": "d749b61e-f3cf-48d8-9a07-b2d708204cfd",
     "type": "lvl3",
     "url": "/docs/components/dropdown#with-icons",
     "hierarchy": {
@@ -3770,7 +4127,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "8a4c791a-ad10-47ef-883e-72af180724e0",
+    "objectID": "3c65c93a-1f08-4a01-9547-6bed1d2a053f",
     "type": "lvl3",
     "url": "/docs/components/dropdown#with-description",
     "hierarchy": {
@@ -3781,7 +4138,7 @@
   },
   {
     "content": "With Sections",
-    "objectID": "c8cd23f9-f8a7-4eca-89e8-a3492ff6243c",
+    "objectID": "cfb0ff6f-a46b-4a3d-9670-f2aa57ead505",
     "type": "lvl3",
     "url": "/docs/components/dropdown#with-sections",
     "hierarchy": {
@@ -3792,7 +4149,7 @@
   },
   {
     "content": "Custom Trigger",
-    "objectID": "bca79e3b-1f31-4b4f-a9b7-2f578a12fc4c",
+    "objectID": "1ec0dd92-0251-4602-b38a-78e12de5c0fc",
     "type": "lvl3",
     "url": "/docs/components/dropdown#custom-trigger",
     "hierarchy": {
@@ -3803,7 +4160,7 @@
   },
   {
     "content": "Changing the backdrop",
-    "objectID": "b5d94f90-1757-4f30-93b6-5974543fe6cf",
+    "objectID": "8fe9f292-42bc-4076-bc88-a6162687576c",
     "type": "lvl3",
     "url": "/docs/components/dropdown#changing-the-backdrop",
     "hierarchy": {
@@ -3814,7 +4171,7 @@
   },
   {
     "content": "Routing",
-    "objectID": "49522ae7-2c50-4779-9c31-004fd3709b55",
+    "objectID": "cb8ee40d-4a55-455f-b4ab-87acf4c32178",
     "type": "lvl3",
     "url": "/docs/components/dropdown#routing",
     "hierarchy": {
@@ -3825,21 +4182,21 @@
   },
   {
     "content": "Slots",
-    "objectID": "9089bac8-9de3-4908-9f26-c0d6d30b13af",
+    "objectID": "02be6aa3-647e-462c-9b02-cb52deca44ff",
     "type": "lvl2",
     "url": "/docs/components/dropdown#slots",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "DropdownMenu",
-    "objectID": "eb60c3b0-7ee0-4470-8f13-20900cda3b9e",
+    "objectID": "8f010b46-74bd-4806-821e-93666587bf1d",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownmenu",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "Slots", "lvl3": "DropdownMenu" }
   },
   {
     "content": "DropdownItem",
-    "objectID": "21f72b16-4cef-4c7b-8a69-4031c05ee17c",
+    "objectID": "17bb50b1-eb74-4841-b7b7-1c059735f169",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownitem",
     "hierarchy": {
@@ -3850,7 +4207,7 @@
   },
   {
     "content": "DropdownSection",
-    "objectID": "b88e9a82-5586-411a-8d27-3babcad1b78e",
+    "objectID": "50e4f043-75fc-40be-b5ec-a168257f1619",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownsection",
     "hierarchy": {
@@ -3861,7 +4218,7 @@
   },
   {
     "content": "Customizing the dropdown popover",
-    "objectID": "416295a6-fe3c-4a29-8d7b-828c777f1c94",
+    "objectID": "4ada41ab-6c2c-4518-99a6-cf5d9e445e70",
     "type": "lvl3",
     "url": "/docs/components/dropdown#customizing-the-dropdown-popover",
     "hierarchy": {
@@ -3872,7 +4229,7 @@
   },
   {
     "content": "Customizing the dropdown items style",
-    "objectID": "18695ba8-f012-4d2e-a590-a10f7291fb78",
+    "objectID": "cbcef2aa-643f-4f96-9935-3835cebd1f39",
     "type": "lvl3",
     "url": "/docs/components/dropdown#customizing-the-dropdown-items-style",
     "hierarchy": {
@@ -3883,7 +4240,7 @@
   },
   {
     "content": "Keyboard Interactions",
-    "objectID": "7f524a16-3b2f-4945-80af-eadb8b4c2023",
+    "objectID": "4c45dd21-e32e-4b69-80a0-c724af5c48e2",
     "type": "lvl3",
     "url": "/docs/components/dropdown#keyboard-interactions",
     "hierarchy": {
@@ -3894,35 +4251,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "9775ec88-0651-4352-a090-0a00f12a79fe",
+    "objectID": "dec57e4e-ff71-494a-a6ae-d1e212b87904",
     "type": "lvl2",
     "url": "/docs/components/dropdown#data-attributes",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "6a62fdc4-cbb4-48a5-b6d3-4c436e8d25bb",
+    "objectID": "2c87e168-caff-418f-bccc-0dc7a66f4cf2",
     "type": "lvl2",
     "url": "/docs/components/dropdown#accessibility",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "9bcbf1f9-706b-43b0-b46a-b8d19cd118ae",
+    "objectID": "6044a8e5-e53e-4caf-b447-c5441314082b",
     "type": "lvl2",
     "url": "/docs/components/dropdown#api",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Dropdown Props",
-    "objectID": "8588f87c-e162-4f53-9f5b-3d925b9590dd",
+    "objectID": "1027a831-da1e-4f9d-b8af-7e2b52960e03",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdown-props",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "API", "lvl3": "Dropdown Props" }
   },
   {
     "content": "Dropdown Events",
-    "objectID": "b1f2e40a-32e8-41f7-8589-565d8241a113",
+    "objectID": "eb25be6e-3736-4b6f-9e37-4aefeddf6cd6",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdown-events",
     "hierarchy": {
@@ -3933,7 +4290,7 @@
   },
   {
     "content": "DropdownTrigger Props",
-    "objectID": "fb1bfea1-d6e0-405f-8013-81593a915f3e",
+    "objectID": "205b625c-a4e7-4eb9-a4f5-39f502028d1c",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdowntrigger-props",
     "hierarchy": {
@@ -3944,7 +4301,7 @@
   },
   {
     "content": "DropdownMenu Props",
-    "objectID": "f57b27c8-1293-4817-a416-2b9fda186fae",
+    "objectID": "1a9e8d92-c559-4147-9a61-980071a84feb",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownmenu-props",
     "hierarchy": {
@@ -3955,7 +4312,7 @@
   },
   {
     "content": "DropdownMenu Events",
-    "objectID": "76c24eae-b5be-44d8-a313-475c5e9e5d3e",
+    "objectID": "05db19ed-7b11-46bf-a904-6c025023ff8a",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownmenu-events",
     "hierarchy": {
@@ -3966,7 +4323,7 @@
   },
   {
     "content": "DropdownSection Props",
-    "objectID": "dd0901d9-c4df-46a8-95ec-aab08f39f181",
+    "objectID": "444eba2b-1932-4dae-84e1-ce8f29fde30a",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownsection-props",
     "hierarchy": {
@@ -3977,7 +4334,7 @@
   },
   {
     "content": "DropdownItem Props",
-    "objectID": "e85157c7-2c46-400b-a3a5-bd7645190949",
+    "objectID": "af7a4351-ad6d-4f10-8f0f-c55c45c11c99",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownitem-props",
     "hierarchy": {
@@ -3988,7 +4345,7 @@
   },
   {
     "content": "DropdownItem Events",
-    "objectID": "f62db7b9-800d-4be2-8861-564fea64e7cf",
+    "objectID": "622e0f6e-ebb3-4fab-b689-95a4382a40d5",
     "type": "lvl3",
     "url": "/docs/components/dropdown#dropdownitem-events",
     "hierarchy": {
@@ -3999,7 +4356,7 @@
   },
   {
     "content": "Types",
-    "objectID": "d07ada1b-34b9-4d63-997c-38f810e75ed6",
+    "objectID": "7258bced-9bb2-4258-8961-6c25f30fe7f8",
     "type": "lvl3",
     "url": "/docs/components/dropdown#types",
     "hierarchy": {
@@ -4010,56 +4367,56 @@
   },
   {
     "content": "Dropdown Item Selected Icon Props",
-    "objectID": "0fef4b44-82d1-4aa6-ae34-79733bf02c81",
+    "objectID": "0be8c029-c6aa-4ce6-bd08-fb250e7c7868",
     "type": "lvl4",
     "url": "/docs/components/dropdown#dropdown-item-selected-icon-props",
     "hierarchy": { "lvl1": "Dropdown", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Image",
-    "objectID": "db393f83-454a-4c0b-8aba-a3656bd3765a",
+    "objectID": "c828c418-9607-4e68-aa7f-1b29a9ebff32",
     "type": "lvl1",
     "url": "/docs/components/image",
     "hierarchy": { "lvl1": "Image" }
   },
   {
     "content": "Installation",
-    "objectID": "5601668c-75e9-467f-bd83-85c802cd16a1",
+    "objectID": "75fda405-0f57-475b-a3bb-e2e2569f7117",
     "type": "lvl2",
     "url": "/docs/components/image#installation",
     "hierarchy": { "lvl1": "Image", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "978b014b-bfdf-4004-98d9-a9401457c613",
+    "objectID": "5ce4e226-addf-4e0c-8620-f3578c54e6a7",
     "type": "lvl2",
     "url": "/docs/components/image#import",
     "hierarchy": { "lvl1": "Image", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "53547032-6c47-456f-87a9-88794308c887",
+    "objectID": "b46c7840-c5ab-405b-ab7b-6b33ceb245a1",
     "type": "lvl2",
     "url": "/docs/components/image#usage",
     "hierarchy": { "lvl1": "Image", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Blurred",
-    "objectID": "53d16a73-6e61-4fd5-9026-9d105787e75b",
+    "objectID": "7cb58e1f-47db-4b91-b9c3-d85c0dcea669",
     "type": "lvl3",
     "url": "/docs/components/image#blurred",
     "hierarchy": { "lvl1": "Image", "lvl2": "Usage", "lvl3": "Blurred" }
   },
   {
     "content": "Zoomed",
-    "objectID": "9ab0efc1-3795-4cf8-84da-3b88186d6dab",
+    "objectID": "e72cba49-9ad0-4099-98d8-02f0a85c2005",
     "type": "lvl3",
     "url": "/docs/components/image#zoomed",
     "hierarchy": { "lvl1": "Image", "lvl2": "Blurred", "lvl3": "Zoomed" }
   },
   {
     "content": "Animated Loading",
-    "objectID": "31f61340-74f3-45ee-b2ce-4104e8b5a3f6",
+    "objectID": "95b57893-749a-4a10-8035-4976d7cc3dc1",
     "type": "lvl3",
     "url": "/docs/components/image#animated-loading",
     "hierarchy": {
@@ -4070,7 +4427,7 @@
   },
   {
     "content": "Image with fallback",
-    "objectID": "f052a010-57dd-4644-b040-7962a2bcd5f5",
+    "objectID": "35910d90-3740-4018-a83c-02bd83b900f3",
     "type": "lvl3",
     "url": "/docs/components/image#image-with-fallback",
     "hierarchy": {
@@ -4081,7 +4438,7 @@
   },
   {
     "content": "With Next.js Image",
-    "objectID": "83cd7f8a-bcc6-4373-a40b-1949c9f0325d",
+    "objectID": "e8b1f993-475d-4056-b6e9-84da1b51c616",
     "type": "lvl3",
     "url": "/docs/components/image#with-nextjs-image",
     "hierarchy": {
@@ -4092,28 +4449,28 @@
   },
   {
     "content": "Slots",
-    "objectID": "a3d50d56-3af2-4f20-9fd6-b96c52a6dfe3",
+    "objectID": "5df8f8b5-6869-4d04-bfde-bbb5e738d5c7",
     "type": "lvl2",
     "url": "/docs/components/image#slots",
     "hierarchy": { "lvl1": "Image", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "81966505-6573-4a86-97ad-c160931f2a0c",
+    "objectID": "a07f6708-2b0d-4f67-aa65-0da6d0091c9b",
     "type": "lvl2",
     "url": "/docs/components/image#api",
     "hierarchy": { "lvl1": "Image", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Image Props",
-    "objectID": "46ceddc8-3334-4668-b256-8d692d71f28d",
+    "objectID": "8635012d-b369-41a9-8d7f-69bf8e5ab4f3",
     "type": "lvl3",
     "url": "/docs/components/image#image-props",
     "hierarchy": { "lvl1": "Image", "lvl2": "API", "lvl3": "Image Props" }
   },
   {
     "content": "Image Events",
-    "objectID": "70aa1f57-06ab-4f05-9de3-140acff04b2e",
+    "objectID": "6e928511-5e88-4cd4-a727-18819aca48d3",
     "type": "lvl3",
     "url": "/docs/components/image#image-events",
     "hierarchy": {
@@ -4124,84 +4481,84 @@
   },
   {
     "content": "Input",
-    "objectID": "4526ccad-ad0f-4f09-a851-8c7f70dee1ec",
+    "objectID": "449b60dd-cd42-4df1-9c0b-a6afb1579557",
     "type": "lvl1",
     "url": "/docs/components/input",
     "hierarchy": { "lvl1": "Input" }
   },
   {
     "content": "Installation",
-    "objectID": "157764be-da0e-43f7-8f0c-3cd810e16b56",
+    "objectID": "614b9671-bab3-4940-9e8a-9b438ab1afdb",
     "type": "lvl2",
     "url": "/docs/components/input#installation",
     "hierarchy": { "lvl1": "Input", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "72a2390f-e47d-40bd-81c5-f5202f6424ab",
+    "objectID": "54213df1-5b5c-43e7-9b5e-db95902d979d",
     "type": "lvl2",
     "url": "/docs/components/input#import",
     "hierarchy": { "lvl1": "Input", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "b61e597a-e243-4374-8ff2-35cef0e64832",
+    "objectID": "06f4843f-5a71-43f5-be1c-c2da44b55cd5",
     "type": "lvl2",
     "url": "/docs/components/input#usage",
     "hierarchy": { "lvl1": "Input", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "ae969dc2-775b-4de0-b778-abd5b34a1fcb",
+    "objectID": "032956ca-ba31-4b8e-b59e-1bc7b7043b4a",
     "type": "lvl3",
     "url": "/docs/components/input#disabled",
     "hierarchy": { "lvl1": "Input", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Read Only",
-    "objectID": "e7451a99-b5c5-4cd2-8006-cbfd8e5258db",
+    "objectID": "804737b5-bbc9-4a1e-96f6-3a2aa6b12656",
     "type": "lvl3",
     "url": "/docs/components/input#read-only",
     "hierarchy": { "lvl1": "Input", "lvl2": "Disabled", "lvl3": "Read Only" }
   },
   {
     "content": "Required",
-    "objectID": "82ea373d-4956-4001-9b34-5048bef031f5",
+    "objectID": "25e5628a-96be-43ae-964c-405d1f52791d",
     "type": "lvl3",
     "url": "/docs/components/input#required",
     "hierarchy": { "lvl1": "Input", "lvl2": "Read Only", "lvl3": "Required" }
   },
   {
     "content": "Sizes",
-    "objectID": "08e71517-fd42-4e44-ba04-79d6f7d7cd59",
+    "objectID": "4c5a62e9-1dd2-4a17-bd66-d0d0901447fe",
     "type": "lvl3",
     "url": "/docs/components/input#sizes",
     "hierarchy": { "lvl1": "Input", "lvl2": "Required", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "f8b41d9a-48c8-4504-8ab1-3200461379d4",
+    "objectID": "91725fe3-f064-472c-94f2-b30f8eb31c31",
     "type": "lvl3",
     "url": "/docs/components/input#colors",
     "hierarchy": { "lvl1": "Input", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "457a78aa-7bd5-4d5d-be61-f90066daa497",
+    "objectID": "6e460916-abce-48b2-9e17-ac431737db39",
     "type": "lvl3",
     "url": "/docs/components/input#variants",
     "hierarchy": { "lvl1": "Input", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Radius",
-    "objectID": "4010c6b9-0c94-4bf9-b386-22b057984ba8",
+    "objectID": "3fe8be57-0213-48d4-955a-1382f7abf226",
     "type": "lvl3",
     "url": "/docs/components/input#radius",
     "hierarchy": { "lvl1": "Input", "lvl2": "Variants", "lvl3": "Radius" }
   },
   {
     "content": "Label Placements",
-    "objectID": "6a23951d-abc3-4d52-9a52-d7d4e2384d51",
+    "objectID": "9c71c742-9a82-4bea-af5f-7e8297421459",
     "type": "lvl3",
     "url": "/docs/components/input#label-placements",
     "hierarchy": {
@@ -4212,7 +4569,7 @@
   },
   {
     "content": "Password Input",
-    "objectID": "211792be-737d-41f9-bb60-aad97ea913dd",
+    "objectID": "5cf5d000-f857-46f6-9cc3-7f1de82b8f52",
     "type": "lvl3",
     "url": "/docs/components/input#password-input",
     "hierarchy": {
@@ -4223,7 +4580,7 @@
   },
   {
     "content": "Clear Button",
-    "objectID": "24e13461-080d-4bf1-bfd8-e12234f4a91d",
+    "objectID": "060f9ecd-3a94-4347-929b-8b4f6e83ce1d",
     "type": "lvl3",
     "url": "/docs/components/input#clear-button",
     "hierarchy": {
@@ -4234,7 +4591,7 @@
   },
   {
     "content": "Start & End Content",
-    "objectID": "c5ec0dac-d44b-4860-99d1-7802c3706a61",
+    "objectID": "6f5a69a9-aca2-4137-8f46-e5c945b9e060",
     "type": "lvl3",
     "url": "/docs/components/input#start--end-content",
     "hierarchy": {
@@ -4245,7 +4602,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "6c72bae1-9289-495a-9012-bbf1ecf5fbad",
+    "objectID": "dd2c1eed-492f-4b61-b436-8f1ee5ac9254",
     "type": "lvl3",
     "url": "/docs/components/input#with-description",
     "hierarchy": {
@@ -4256,7 +4613,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "6b167ef4-7bce-45fd-87e3-f957cf810cf9",
+    "objectID": "b9c20bed-8dd5-4783-a2a3-4b56ad81079a",
     "type": "lvl3",
     "url": "/docs/components/input#with-error-message",
     "hierarchy": {
@@ -4267,7 +4624,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "5a2fa4eb-84fb-40e8-b6bd-e2484a8aa427",
+    "objectID": "256619f6-74ed-4211-b197-403067190efb",
     "type": "lvl3",
     "url": "/docs/components/input#controlled",
     "hierarchy": {
@@ -4278,21 +4635,21 @@
   },
   {
     "content": "Slots",
-    "objectID": "a3b74c28-79e0-4c9e-a3fe-adf37c1c53a4",
+    "objectID": "c3a3e970-d076-475b-8c43-51302aaa1d4e",
     "type": "lvl2",
     "url": "/docs/components/input#slots",
     "hierarchy": { "lvl1": "Input", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "cf5be42c-c0f3-4641-be33-ca50a6dcbe45",
+    "objectID": "988a0961-68cd-4d0e-8bbd-42c7a025e980",
     "type": "lvl3",
     "url": "/docs/components/input#custom-styles",
     "hierarchy": { "lvl1": "Input", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Custom Implementation",
-    "objectID": "b10f0a92-1c7c-45f2-91d5-9161d2555462",
+    "objectID": "d1eff74b-2372-4ed7-ad7d-e47adb592b22",
     "type": "lvl3",
     "url": "/docs/components/input#custom-implementation",
     "hierarchy": {
@@ -4303,35 +4660,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "3e87c41f-570a-4917-9895-320c2fa7a9ea",
+    "objectID": "b3fcd754-102f-4ce2-bebe-9e117188b341",
     "type": "lvl2",
     "url": "/docs/components/input#data-attributes",
     "hierarchy": { "lvl1": "Input", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "c9650296-b7ce-4fcf-8c31-6c71e892af48",
+    "objectID": "d29cfdbc-cc8b-44a0-a7aa-5c34cb977e42",
     "type": "lvl2",
     "url": "/docs/components/input#accessibility",
     "hierarchy": { "lvl1": "Input", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "9807dbcc-45cd-4e9d-8149-c4a37d5bd14a",
+    "objectID": "7919e4f9-baa1-4794-885f-f755de02ec60",
     "type": "lvl2",
     "url": "/docs/components/input#api",
     "hierarchy": { "lvl1": "Input", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Input Props",
-    "objectID": "3044a951-a67e-4980-bbed-8e2ed15cefc9",
+    "objectID": "18dbd8b2-46fd-4fe4-92e7-4256360b79ff",
     "type": "lvl3",
     "url": "/docs/components/input#input-props",
     "hierarchy": { "lvl1": "Input", "lvl2": "API", "lvl3": "Input Props" }
   },
   {
     "content": "Input Events",
-    "objectID": "3bc30494-d099-4297-ac17-7f7a93cf8956",
+    "objectID": "76cad102-8292-48bb-bef4-e85511e5ede7",
     "type": "lvl3",
     "url": "/docs/components/input#input-events",
     "hierarchy": {
@@ -4342,14 +4699,14 @@
   },
   {
     "content": "Keyboard Key",
-    "objectID": "06699f1a-3c91-4222-b548-9bd7865bfa50",
+    "objectID": "6cba7438-380c-4955-9f0e-78992e38778d",
     "type": "lvl1",
     "url": "/docs/components/kbd",
     "hierarchy": { "lvl1": "Keyboard Key" }
   },
   {
     "content": "Installation",
-    "objectID": "fd672ca4-a74e-409c-ad9c-28d50f89fe15",
+    "objectID": "21f931b9-3e99-482f-ac44-0ccb972e18e1",
     "type": "lvl2",
     "url": "/docs/components/kbd#installation",
     "hierarchy": {
@@ -4360,35 +4717,35 @@
   },
   {
     "content": "Import",
-    "objectID": "80141571-6899-4080-bceb-5ac70c974633",
+    "objectID": "b19eaf8f-551e-4252-861f-f99ab35ec8a7",
     "type": "lvl2",
     "url": "/docs/components/kbd#import",
     "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "41b1ebf5-1b79-480f-bd1a-3d7be072e8a4",
+    "objectID": "16b4fa88-e7b6-4328-8282-3c6050aa256b",
     "type": "lvl2",
     "url": "/docs/components/kbd#usage",
     "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Keys",
-    "objectID": "6f4e8340-11ca-4226-a577-6655a1c6c550",
+    "objectID": "8b2a2901-d385-427f-8c13-ab973e8c745a",
     "type": "lvl3",
     "url": "/docs/components/kbd#keys",
     "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Usage", "lvl3": "Keys" }
   },
   {
     "content": "Slots",
-    "objectID": "395affd6-085b-4a41-8df2-a5d082f46f34",
+    "objectID": "34bb790f-8848-4dea-b8d6-58a8384cbba8",
     "type": "lvl2",
     "url": "/docs/components/kbd#slots",
     "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "32f77aa1-2986-486e-b73c-8a95eff7b9d4",
+    "objectID": "57753147-7965-43e7-87ea-d8ea9adfd43d",
     "type": "lvl2",
     "url": "/docs/components/kbd#accessibility",
     "hierarchy": {
@@ -4399,14 +4756,14 @@
   },
   {
     "content": "API",
-    "objectID": "c3c3a4b3-d630-4cf2-b8cd-78a2689d8ce2",
+    "objectID": "b187439b-650c-43c0-afe6-377d5ec9fc90",
     "type": "lvl2",
     "url": "/docs/components/kbd#api",
     "hierarchy": { "lvl1": "Keyboard Key", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Keyboard Key Props",
-    "objectID": "3445b1fd-157f-494a-9829-f006b2099be5",
+    "objectID": "5bdddfd6-2242-45a6-9fd2-8b4e774454e7",
     "type": "lvl3",
     "url": "/docs/components/kbd#keyboard-key-props",
     "hierarchy": {
@@ -4417,7 +4774,7 @@
   },
   {
     "content": "Keyboard Keys",
-    "objectID": "9c17f2b4-768f-4bea-855f-86705c5f61e0",
+    "objectID": "aa123b1a-1ce6-4faf-84eb-ebedb90213b4",
     "type": "lvl3",
     "url": "/docs/components/kbd#keyboard-keys",
     "hierarchy": {
@@ -4428,70 +4785,70 @@
   },
   {
     "content": "Link",
-    "objectID": "a6449b2c-b955-499b-8d57-b33c18930359",
+    "objectID": "fdc97e65-adb3-4aae-94db-cbf7e2ea9504",
     "type": "lvl1",
     "url": "/docs/components/link",
     "hierarchy": { "lvl1": "Link" }
   },
   {
     "content": "Installation",
-    "objectID": "b6b397c9-1740-42a7-8378-991efff4b440",
+    "objectID": "c5d10676-57d6-4264-b54b-07a9721e1f8f",
     "type": "lvl2",
     "url": "/docs/components/link#installation",
     "hierarchy": { "lvl1": "Link", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "19f28e7f-f4ce-458a-b57c-e2d37ed24c6c",
+    "objectID": "425d373b-a91f-4eb5-b077-7a00b94149d9",
     "type": "lvl2",
     "url": "/docs/components/link#import",
     "hierarchy": { "lvl1": "Link", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "1814a50c-1cd1-464c-a058-ef65c1e3584f",
+    "objectID": "daaee619-1a7f-4603-90ca-9f895ae9e53c",
     "type": "lvl2",
     "url": "/docs/components/link#usage",
     "hierarchy": { "lvl1": "Link", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "b8dd67ad-6e01-4087-b68c-b55c94264a34",
+    "objectID": "1970a6dc-8495-4fe0-ad4b-257489f3e8a5",
     "type": "lvl3",
     "url": "/docs/components/link#disabled",
     "hierarchy": { "lvl1": "Link", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "544bc1a1-b9ab-46e8-b616-cf65b95b5f76",
+    "objectID": "9e28d286-5b5d-4d99-ad62-53ef730f4d1e",
     "type": "lvl3",
     "url": "/docs/components/link#sizes",
     "hierarchy": { "lvl1": "Link", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "3208030f-88b0-4f09-85a1-1d6c092995a2",
+    "objectID": "f69c1c80-6b14-4352-afdd-af6a8985670f",
     "type": "lvl3",
     "url": "/docs/components/link#colors",
     "hierarchy": { "lvl1": "Link", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Underline",
-    "objectID": "1e76d87f-4143-4b0c-9eef-7045ae718364",
+    "objectID": "fc95a617-e97e-4332-b778-c1cba211dba0",
     "type": "lvl3",
     "url": "/docs/components/link#underline",
     "hierarchy": { "lvl1": "Link", "lvl2": "Colors", "lvl3": "Underline" }
   },
   {
     "content": "External",
-    "objectID": "cd32f4bd-fcdf-492a-9fb0-c288c2be6cd7",
+    "objectID": "40fba992-6ce4-4577-a48d-0614187ab2e0",
     "type": "lvl3",
     "url": "/docs/components/link#external",
     "hierarchy": { "lvl1": "Link", "lvl2": "Underline", "lvl3": "External" }
   },
   {
     "content": "Custom Anchor Icon",
-    "objectID": "4d969bea-6e7d-4c0a-b45a-ec4e33f3f862",
+    "objectID": "bd6e0301-32d3-453e-9c41-5605a282e036",
     "type": "lvl3",
     "url": "/docs/components/link#custom-anchor-icon",
     "hierarchy": {
@@ -4502,7 +4859,7 @@
   },
   {
     "content": "Block Link",
-    "objectID": "622eae9a-be3e-45e7-990a-ba5226721981",
+    "objectID": "0f256244-9534-4513-91c0-2b898ffa5a5a",
     "type": "lvl3",
     "url": "/docs/components/link#block-link",
     "hierarchy": {
@@ -4513,7 +4870,7 @@
   },
   {
     "content": "Polymorphic Component",
-    "objectID": "db7b4c4c-be7f-4d5e-b018-2f9b98255bdc",
+    "objectID": "131a4e0b-cf43-4967-b174-b915bfac5287",
     "type": "lvl3",
     "url": "/docs/components/link#polymorphic-component",
     "hierarchy": {
@@ -4524,7 +4881,7 @@
   },
   {
     "content": "Routing",
-    "objectID": "9aa63c7a-ed70-4b81-bd5e-0258345bb02a",
+    "objectID": "f24eb3a0-39d5-41ac-8653-b15a6bc87d2d",
     "type": "lvl3",
     "url": "/docs/components/link#routing",
     "hierarchy": {
@@ -4535,7 +4892,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "862ecd5c-d761-49af-9603-fb2d975c1d1e",
+    "objectID": "eccc3b9b-4f79-4e1d-bd61-7805fde3c54c",
     "type": "lvl3",
     "url": "/docs/components/link#custom-implementation",
     "hierarchy": {
@@ -4546,77 +4903,77 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "a0518983-e02b-41bb-a197-a0dd890de0d6",
+    "objectID": "aec81311-a595-4a5a-ac83-7a0ec40b500c",
     "type": "lvl2",
     "url": "/docs/components/link#data-attributes",
     "hierarchy": { "lvl1": "Link", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "172db110-8aeb-4225-80cd-dabb518e506c",
+    "objectID": "f66d275b-8569-41cb-adc1-2149a883a6c6",
     "type": "lvl2",
     "url": "/docs/components/link#accessibility",
     "hierarchy": { "lvl1": "Link", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "5b732df2-0785-4bea-b5ad-0c895995a0c2",
+    "objectID": "dd7ad4c1-bf8b-415f-ae20-7c8e9d830c3a",
     "type": "lvl2",
     "url": "/docs/components/link#api",
     "hierarchy": { "lvl1": "Link", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Link Props",
-    "objectID": "7582f3f6-53b6-41b2-bf2e-cee12ffe60ee",
+    "objectID": "9835cae0-871e-4ccd-92d6-8939a14bf7cf",
     "type": "lvl3",
     "url": "/docs/components/link#link-props",
     "hierarchy": { "lvl1": "Link", "lvl2": "API", "lvl3": "Link Props" }
   },
   {
     "content": "Link Events",
-    "objectID": "0354ab38-beed-4e2e-a8c6-85c296a4e781",
+    "objectID": "179a7248-748b-4c34-819e-7165891ff923",
     "type": "lvl3",
     "url": "/docs/components/link#link-events",
     "hierarchy": { "lvl1": "Link", "lvl2": "Link Props", "lvl3": "Link Events" }
   },
   {
     "content": "Listbox",
-    "objectID": "f0ae33e5-1d56-4210-87cc-054a06d284b9",
+    "objectID": "3658e97b-21bc-4565-9be8-5ebc6ea6ade0",
     "type": "lvl1",
     "url": "/docs/components/listbox",
     "hierarchy": { "lvl1": "Listbox" }
   },
   {
     "content": "Installation",
-    "objectID": "0852c4b5-52ee-4211-bc11-426bcf177901",
+    "objectID": "fda4cd40-5f94-489f-9465-dc66f3072711",
     "type": "lvl2",
     "url": "/docs/components/listbox#installation",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "f2888326-5609-4412-b49e-404c702b53b0",
+    "objectID": "2dfe92e4-8fa9-45d7-862e-2719017d4cbf",
     "type": "lvl2",
     "url": "/docs/components/listbox#import",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "8ad9a049-badd-421c-95a3-05215fcbe1ff",
+    "objectID": "0e872d8c-05ca-4111-ad31-360ccf6a2b97",
     "type": "lvl2",
     "url": "/docs/components/listbox#usage",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Dynamic items",
-    "objectID": "f8c9672c-05ff-4eca-bd1c-4ea6554bdf37",
+    "objectID": "00bb5b06-47e3-4c0e-8358-fc9090f13b40",
     "type": "lvl3",
     "url": "/docs/components/listbox#dynamic-items",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Usage", "lvl3": "Dynamic items" }
   },
   {
     "content": "Disabled Keys",
-    "objectID": "669e9531-92b7-47d1-8f70-f40f053cb8ab",
+    "objectID": "d75b3aa1-205e-43bd-88c4-0942c822ccb0",
     "type": "lvl3",
     "url": "/docs/components/listbox#disabled-keys",
     "hierarchy": {
@@ -4627,7 +4984,7 @@
   },
   {
     "content": "Variants",
-    "objectID": "e6c43360-ecac-4be8-8954-3338abe5fd58",
+    "objectID": "3f239192-9191-4bf7-b690-eabf9ba2e918",
     "type": "lvl3",
     "url": "/docs/components/listbox#variants",
     "hierarchy": {
@@ -4638,7 +4995,7 @@
   },
   {
     "content": "Single Selection",
-    "objectID": "4cb1dc68-b961-4c68-8d5c-0bb0ad1edc10",
+    "objectID": "24ff4959-255c-4bbd-853a-8a8461844683",
     "type": "lvl3",
     "url": "/docs/components/listbox#single-selection",
     "hierarchy": {
@@ -4649,7 +5006,7 @@
   },
   {
     "content": "Multiple Selection",
-    "objectID": "3246a240-6a26-40f6-842e-f7f3a872eb55",
+    "objectID": "386fc36f-2905-459a-9829-3006339cf431",
     "type": "lvl3",
     "url": "/docs/components/listbox#multiple-selection",
     "hierarchy": {
@@ -4660,7 +5017,7 @@
   },
   {
     "content": "With Icons",
-    "objectID": "81dc55ba-d926-4196-8cc8-334c9d0f1a2b",
+    "objectID": "f77da1bd-c341-4780-b1fa-5ad1c28cd4c3",
     "type": "lvl3",
     "url": "/docs/components/listbox#with-icons",
     "hierarchy": {
@@ -4671,7 +5028,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "ae4f4815-2b4f-467c-bd66-93bcb03fdd47",
+    "objectID": "cf9f9f39-ea6b-4577-8578-de5eb0dcb4a6",
     "type": "lvl3",
     "url": "/docs/components/listbox#with-description",
     "hierarchy": {
@@ -4682,7 +5039,7 @@
   },
   {
     "content": "With Top & Bottom Content",
-    "objectID": "04d2b17b-065b-4970-8fbd-0cf4f2507258",
+    "objectID": "a80c800d-7539-4d3f-8e70-aa0f02fc061e",
     "type": "lvl3",
     "url": "/docs/components/listbox#with-top--bottom-content",
     "hierarchy": {
@@ -4693,7 +5050,7 @@
   },
   {
     "content": "With Sections",
-    "objectID": "f30c9abf-162b-4326-b34c-7638fa66223a",
+    "objectID": "5b1d29bf-6fc2-4bec-b5bb-677c0a16bb16",
     "type": "lvl3",
     "url": "/docs/components/listbox#with-sections",
     "hierarchy": {
@@ -4704,7 +5061,7 @@
   },
   {
     "content": "Routing",
-    "objectID": "cdae32ae-45c4-4df9-8f12-369b117e6075",
+    "objectID": "981b5ca7-15d1-4d9d-b432-1e0d3192b67d",
     "type": "lvl3",
     "url": "/docs/components/listbox#routing",
     "hierarchy": {
@@ -4715,21 +5072,21 @@
   },
   {
     "content": "Slots",
-    "objectID": "e7c1bcec-f94f-40d4-a72e-f1ac51913c0a",
+    "objectID": "4c45deac-233b-4bec-a34d-128f3bbc1f8f",
     "type": "lvl2",
     "url": "/docs/components/listbox#slots",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "ListboxItem",
-    "objectID": "ce4b851f-2030-4893-8b14-a37f761002ae",
+    "objectID": "c083bd0d-30bc-4c26-8300-bae7d7c38a47",
     "type": "lvl3",
     "url": "/docs/components/listbox#listboxitem",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Listbox", "lvl3": "ListboxItem" }
   },
   {
     "content": "ListboxSection",
-    "objectID": "a98ec201-bda4-43f2-86f6-c768d7623977",
+    "objectID": "9d0020d4-4dc4-48d6-9cc5-c4cf2490e5ca",
     "type": "lvl3",
     "url": "/docs/components/listbox#listboxsection",
     "hierarchy": {
@@ -4740,7 +5097,7 @@
   },
   {
     "content": "Customizing the listbox",
-    "objectID": "9862bdec-535f-47e2-9d27-912571b710ec",
+    "objectID": "31106c28-a971-4da5-98a9-fe7457f96c47",
     "type": "lvl3",
     "url": "/docs/components/listbox#customizing-the-listbox",
     "hierarchy": {
@@ -4751,7 +5108,7 @@
   },
   {
     "content": "Keyboard Interactions",
-    "objectID": "25dffbca-7526-4c4d-b495-2f9794f53bf0",
+    "objectID": "5f629bc4-a2ff-4f34-b319-606346317a5f",
     "type": "lvl3",
     "url": "/docs/components/listbox#keyboard-interactions",
     "hierarchy": {
@@ -4762,35 +5119,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "8712fb40-8400-47c8-86ff-98df06bb4d07",
+    "objectID": "588d1fa0-5730-4e80-83c6-8275a22c6898",
     "type": "lvl2",
     "url": "/docs/components/listbox#data-attributes",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "0ace1672-c695-43d6-8135-7e01a21e8b27",
+    "objectID": "cad95d4b-125e-4df7-bdc6-a376f5a6160a",
     "type": "lvl2",
     "url": "/docs/components/listbox#accessibility",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "4b9c29b2-02b0-417a-8048-ae3674d59775",
+    "objectID": "3f506f98-416d-4b53-b03b-cd3f9c5fd449",
     "type": "lvl2",
     "url": "/docs/components/listbox#api",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Listbox Props",
-    "objectID": "683a9286-3ee8-4b32-9656-cf710d57d4d8",
+    "objectID": "1855a3ac-4f58-45b3-ada1-3b961895df97",
     "type": "lvl3",
     "url": "/docs/components/listbox#listbox-props",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "API", "lvl3": "Listbox Props" }
   },
   {
     "content": "Listbox Events",
-    "objectID": "8947068f-131e-4ff5-83f3-68ecf3e38ac5",
+    "objectID": "6eb11f29-d327-4eb5-b394-0ef02fc4e306",
     "type": "lvl3",
     "url": "/docs/components/listbox#listbox-events",
     "hierarchy": {
@@ -4801,7 +5158,7 @@
   },
   {
     "content": "ListboxSection Props",
-    "objectID": "ad973a6a-d0aa-4536-af06-8daa36aae4a2",
+    "objectID": "72f012a6-1a06-4472-b432-795ca06b8b0d",
     "type": "lvl3",
     "url": "/docs/components/listbox#listboxsection-props",
     "hierarchy": {
@@ -4812,7 +5169,7 @@
   },
   {
     "content": "ListboxItem Props",
-    "objectID": "9f8a54c6-eab7-4fb3-82d0-319b4ba3c741",
+    "objectID": "39ad4745-765a-46ae-8bc5-c88143b231bc",
     "type": "lvl3",
     "url": "/docs/components/listbox#listboxitem-props",
     "hierarchy": {
@@ -4823,7 +5180,7 @@
   },
   {
     "content": "ListboxItem Events",
-    "objectID": "e74bfc02-0290-4fb7-95e4-a79bf8c53ca2",
+    "objectID": "c98abdba-8557-4206-9261-03afd116acce",
     "type": "lvl3",
     "url": "/docs/components/listbox#listboxitem-events",
     "hierarchy": {
@@ -4834,7 +5191,7 @@
   },
   {
     "content": "Types",
-    "objectID": "bba2468e-92f6-4cc0-aa67-a4176734377f",
+    "objectID": "b3239bd6-19a6-4990-9da3-cb00f52c7890",
     "type": "lvl3",
     "url": "/docs/components/listbox#types",
     "hierarchy": {
@@ -4845,71 +5202,67 @@
   },
   {
     "content": "Listbox Item Selected Icon Props",
-    "objectID": "c28fa923-edbd-420a-a8ce-cbd401cc35de",
+    "objectID": "6b87aeff-394f-464d-bdf6-040f0f3f3c22",
     "type": "lvl4",
     "url": "/docs/components/listbox#listbox-item-selected-icon-props",
     "hierarchy": { "lvl1": "Listbox", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Modal",
-    "objectID": "b391f01c-2381-4046-a78c-3f9d7a69ed2f",
+    "objectID": "fd61c5f1-db8f-47c3-9f99-8dbc8ce4441a",
     "type": "lvl1",
     "url": "/docs/components/modal",
     "hierarchy": { "lvl1": "Modal" }
   },
   {
     "content": "Installation",
-    "objectID": "e957562f-de5b-4f7e-b5da-273cedc22027",
+    "objectID": "e753faf6-5a29-46ea-a973-379d1b70745d",
     "type": "lvl2",
     "url": "/docs/components/modal#installation",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "c8ad78f7-83bd-44b4-87d9-f1cf0c3429b6",
+    "objectID": "7b236cc7-e22f-47f8-a161-4ae6ebd9e92a",
     "type": "lvl2",
     "url": "/docs/components/modal#import",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "7fab825f-61bf-4523-9968-3c945fa60270",
+    "objectID": "61a1016b-96a7-42e2-ba7b-180cb868e5ef",
     "type": "lvl2",
     "url": "/docs/components/modal#usage",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "2e10db5d-eb66-44fd-b758-e932f3d41848",
+    "objectID": "8618806d-7877-4d51-8655-1d314b4969fb",
     "type": "lvl3",
     "url": "/docs/components/modal#sizes",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
-    "content": "Non-dissmissable",
-    "objectID": "34fea277-5750-49ec-b681-06e1830e933e",
+    "content": "Non-dismissible",
+    "objectID": "e409dd14-0b7b-4cb4-8ea3-46e089ab0dc2",
     "type": "lvl3",
-    "url": "/docs/components/modal#non-dissmissable",
-    "hierarchy": {
-      "lvl1": "Modal",
-      "lvl2": "Sizes",
-      "lvl3": "Non-dissmissable"
-    }
+    "url": "/docs/components/modal#non-dismissible",
+    "hierarchy": { "lvl1": "Modal", "lvl2": "Sizes", "lvl3": "Non-dismissible" }
   },
   {
     "content": "Modal placement",
-    "objectID": "044c55fd-3509-4014-8ba4-2e3ed51c6a6b",
+    "objectID": "04a8bbe4-12e0-4f0e-b06d-63abdfcd7d19",
     "type": "lvl3",
     "url": "/docs/components/modal#modal-placement",
     "hierarchy": {
       "lvl1": "Modal",
-      "lvl2": "Non-dissmissable",
+      "lvl2": "Non-dismissible",
       "lvl3": "Modal placement"
     }
   },
   {
     "content": "Overflow scroll",
-    "objectID": "784780be-b36d-4b00-8501-a4b9b6a9b7b1",
+    "objectID": "e5d93022-94b5-4a04-9730-e8aa086b83d5",
     "type": "lvl3",
     "url": "/docs/components/modal#overflow-scroll",
     "hierarchy": {
@@ -4920,7 +5273,7 @@
   },
   {
     "content": "With Form",
-    "objectID": "4ef4977d-f95f-42ba-993d-553d5e5cdf9b",
+    "objectID": "7a916477-2275-410d-9af6-38654c98e56a",
     "type": "lvl3",
     "url": "/docs/components/modal#with-form",
     "hierarchy": {
@@ -4931,14 +5284,14 @@
   },
   {
     "content": "Backdrop",
-    "objectID": "64b4c2a1-e905-4b14-95b8-9723a0634fbf",
+    "objectID": "c0a22998-18da-4a00-8e3e-c85a3e1cd693",
     "type": "lvl3",
     "url": "/docs/components/modal#backdrop",
     "hierarchy": { "lvl1": "Modal", "lvl2": "With Form", "lvl3": "Backdrop" }
   },
   {
     "content": "Custom Backdrop",
-    "objectID": "b8c8ebef-7207-4a27-910e-9b16a6938f10",
+    "objectID": "65291f2c-7f4e-41a2-a36f-436ff2066f70",
     "type": "lvl3",
     "url": "/docs/components/modal#custom-backdrop",
     "hierarchy": {
@@ -4949,7 +5302,7 @@
   },
   {
     "content": "Custom Motion",
-    "objectID": "53bdd81a-3737-4dfc-a392-d85c277f1677",
+    "objectID": "94c5d79c-7c16-40b0-a007-c9273e89bbb4",
     "type": "lvl3",
     "url": "/docs/components/modal#custom-motion",
     "hierarchy": {
@@ -4958,51 +5311,73 @@
       "lvl3": "Custom Motion"
     }
   },
+  {
+    "content": "Draggable",
+    "objectID": "1a3b6829-df41-40ae-b5a9-0d10587af78d",
+    "type": "lvl3",
+    "url": "/docs/components/modal#draggable",
+    "hierarchy": {
+      "lvl1": "Modal",
+      "lvl2": "Custom Motion",
+      "lvl3": "Draggable"
+    }
+  },
+  {
+    "content": "Draggable Overflow",
+    "objectID": "bf31d900-3602-4ad6-a933-8f5e30c489f4",
+    "type": "lvl3",
+    "url": "/docs/components/modal#draggable-overflow",
+    "hierarchy": {
+      "lvl1": "Modal",
+      "lvl2": "Draggable",
+      "lvl3": "Draggable Overflow"
+    }
+  },
   {
     "content": "Slots",
-    "objectID": "42322dcf-4fe4-4c8b-b5e5-0890e265a78f",
+    "objectID": "528e1299-0cd1-426b-bd2c-93ba9054c915",
     "type": "lvl2",
     "url": "/docs/components/modal#slots",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "86cc4b17-87ce-4882-ab0e-1d21a6aad12f",
+    "objectID": "b41a40fb-82ff-4199-bd8f-5e7220258632",
     "type": "lvl3",
     "url": "/docs/components/modal#custom-styles",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "335d7a33-f029-4a30-8035-73e1aa99e33d",
+    "objectID": "b2387e15-c4f9-40f3-88d5-bcdf57cd8ad4",
     "type": "lvl2",
     "url": "/docs/components/modal#data-attributes",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "a6962672-55de-478a-b357-d4c967a7cdbe",
+    "objectID": "627ec127-a531-4715-9c56-8eb1ce7d315a",
     "type": "lvl2",
     "url": "/docs/components/modal#accessibility",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "4bc96210-699d-429d-8f2b-8d3f02f937c9",
+    "objectID": "bbf1e5af-a29a-444e-a6af-f2d71ccee81e",
     "type": "lvl2",
     "url": "/docs/components/modal#api",
     "hierarchy": { "lvl1": "Modal", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Modal Props",
-    "objectID": "bbc1337b-17e6-49ec-be1c-dd5360b40400",
+    "objectID": "70d95764-04b7-4c58-8918-b8d00a0714ea",
     "type": "lvl3",
     "url": "/docs/components/modal#modal-props",
     "hierarchy": { "lvl1": "Modal", "lvl2": "API", "lvl3": "Modal Props" }
   },
   {
     "content": "Modal Events",
-    "objectID": "68066ba6-85ad-47fd-8c75-77b7cbe98b2d",
+    "objectID": "6a518f81-307c-4fca-afe3-cdc843761966",
     "type": "lvl3",
     "url": "/docs/components/modal#modal-events",
     "hierarchy": {
@@ -5013,7 +5388,7 @@
   },
   {
     "content": "Modal types",
-    "objectID": "5fb75f85-f375-46c7-a345-c1388b4a2a1a",
+    "objectID": "6d1402c6-9159-4622-8a30-1515efcadc05",
     "type": "lvl3",
     "url": "/docs/components/modal#modal-types",
     "hierarchy": {
@@ -5024,49 +5399,49 @@
   },
   {
     "content": "Motion Props",
-    "objectID": "a7b424dc-2164-4717-812f-a45956929fad",
+    "objectID": "0803ff40-4c3c-41f1-ade4-201ed79f9b7d",
     "type": "lvl4",
     "url": "/docs/components/modal#motion-props",
     "hierarchy": { "lvl1": "Modal", "lvl2": "Modal types", "lvl3": null }
   },
   {
     "content": "Navbar",
-    "objectID": "185aad11-c7a9-4f81-ae2e-d196da99ebee",
+    "objectID": "03493628-267a-4d14-aa54-dd7ec871d719",
     "type": "lvl1",
     "url": "/docs/components/navbar",
     "hierarchy": { "lvl1": "Navbar" }
   },
   {
     "content": "Installation",
-    "objectID": "e1cd622f-d928-49bc-8b60-c09e22994b99",
+    "objectID": "2dba7726-e0ab-467f-9ae1-5c9cd61a4cf8",
     "type": "lvl2",
     "url": "/docs/components/navbar#installation",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "1c8aa9ea-04ad-4c38-9b36-ddfc48ae5781",
+    "objectID": "e4653820-c36e-4563-9c92-9bf13ba22135",
     "type": "lvl2",
     "url": "/docs/components/navbar#import",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "412b7778-0211-4203-ade5-f6cfe5117c94",
+    "objectID": "e0ab1e98-e643-417f-8cf7-09a5cf9794cf",
     "type": "lvl2",
     "url": "/docs/components/navbar#usage",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Static",
-    "objectID": "bb0107e9-8094-4f31-b3a7-13f7ecacf57a",
+    "objectID": "9a81289a-c786-45f4-ae8c-0bf09f43de7f",
     "type": "lvl3",
     "url": "/docs/components/navbar#static",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Usage", "lvl3": "Static" }
   },
   {
     "content": "Hide on scroll",
-    "objectID": "ae8dbc09-2a2f-47bc-a2bb-6e7c8b7e2aac",
+    "objectID": "7bb0ee5a-443f-4c5f-9fc3-a2a50e0c2a0d",
     "type": "lvl3",
     "url": "/docs/components/navbar#hide-on-scroll",
     "hierarchy": {
@@ -5077,7 +5452,7 @@
   },
   {
     "content": "With Menu",
-    "objectID": "07a7ab11-a084-4318-ae12-29aefa3e2492",
+    "objectID": "c5a7d6e1-07bb-4483-a4b3-884d6b91cd50",
     "type": "lvl3",
     "url": "/docs/components/navbar#with-menu",
     "hierarchy": {
@@ -5088,7 +5463,7 @@
   },
   {
     "content": "Controlled Menu",
-    "objectID": "d974a3a0-dadb-4c7e-ad7c-7c3d0f3c085a",
+    "objectID": "0b3ce2ed-71fd-4bef-8b6d-aa48e63452c8",
     "type": "lvl3",
     "url": "/docs/components/navbar#controlled-menu",
     "hierarchy": {
@@ -5099,7 +5474,7 @@
   },
   {
     "content": "With Border",
-    "objectID": "db3d0665-678d-42fa-ba03-73e32aa2b8af",
+    "objectID": "3da2755b-1b8c-42ff-a2ba-23eb44a8ac05",
     "type": "lvl3",
     "url": "/docs/components/navbar#with-border",
     "hierarchy": {
@@ -5110,7 +5485,7 @@
   },
   {
     "content": "Disabling Blur",
-    "objectID": "972a9229-69f3-4ac8-b682-e43973d544d8",
+    "objectID": "17872eb4-449e-4950-97e2-44f82cc911de",
     "type": "lvl3",
     "url": "/docs/components/navbar#disabling-blur",
     "hierarchy": {
@@ -5121,7 +5496,7 @@
   },
   {
     "content": "With Dropdown Menu",
-    "objectID": "607dabdd-1e00-47cb-b4ff-c97b27055bfb",
+    "objectID": "abd460ab-7403-487c-83c7-ac2f8d336e21",
     "type": "lvl3",
     "url": "/docs/components/navbar#with-dropdown-menu",
     "hierarchy": {
@@ -5132,7 +5507,7 @@
   },
   {
     "content": "With Avatar",
-    "objectID": "c666459b-8244-4b18-9b45-a3d42e4fe3cb",
+    "objectID": "66bacb64-46bf-465b-8395-044b330a5c0f",
     "type": "lvl3",
     "url": "/docs/components/navbar#with-avatar",
     "hierarchy": {
@@ -5143,7 +5518,7 @@
   },
   {
     "content": "With Search Input",
-    "objectID": "870f4656-d6c8-43c3-a105-a5cb9f2cfc10",
+    "objectID": "675a1acc-094f-4bf9-9a5b-6853573c8fd0",
     "type": "lvl3",
     "url": "/docs/components/navbar#with-search-input",
     "hierarchy": {
@@ -5154,7 +5529,7 @@
   },
   {
     "content": "Customizing the active item",
-    "objectID": "2c2d0cab-7c2c-4633-ac8f-cc8cd8f891da",
+    "objectID": "ee182fdc-4279-430a-8af2-f43b428f410c",
     "type": "lvl3",
     "url": "/docs/components/navbar#customizing-the-active-item",
     "hierarchy": {
@@ -5165,35 +5540,35 @@
   },
   {
     "content": "Slots",
-    "objectID": "9a8a9175-2ccc-452b-a845-ce27cc7acd50",
+    "objectID": "65d39248-976b-47b9-a71a-197308032075",
     "type": "lvl2",
     "url": "/docs/components/navbar#slots",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "e16351ee-4ae4-495f-a205-af0ec1e1ef53",
+    "objectID": "45eeff87-e59e-46f0-9f54-44e31c8d2b54",
     "type": "lvl2",
     "url": "/docs/components/navbar#data-attributes",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "bc6fc83f-1617-4647-b5bc-b2f2f2685806",
+    "objectID": "8f250f34-0be1-4784-8579-f9e9e8eabeb6",
     "type": "lvl2",
     "url": "/docs/components/navbar#api",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Navbar Props",
-    "objectID": "6d5e9b42-19a2-4f8d-8cfb-7cef8bdd9a57",
+    "objectID": "4422d2d7-991a-44eb-a990-83d137ec6b0f",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbar-props",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "API", "lvl3": "Navbar Props" }
   },
   {
     "content": "Navbar Events",
-    "objectID": "f719424b-a629-4aa8-b8da-e311f289750e",
+    "objectID": "026187b4-5b1a-476a-82cf-70119bdf5b3a",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbar-events",
     "hierarchy": {
@@ -5204,7 +5579,7 @@
   },
   {
     "content": "NavbarContent Props",
-    "objectID": "457514af-d65d-451b-85c4-9af5813432c5",
+    "objectID": "b83a5d9a-6f4e-4e3b-ae40-9a90c65e3135",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbarcontent-props",
     "hierarchy": {
@@ -5215,7 +5590,7 @@
   },
   {
     "content": "NavbarItem Props",
-    "objectID": "0e55e2ef-26b1-4560-a7f0-6e99b6c8686b",
+    "objectID": "eec55de3-885e-497f-8ffe-b640cde5a643",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbaritem-props",
     "hierarchy": {
@@ -5226,7 +5601,7 @@
   },
   {
     "content": "NavbarMenuToggle Props",
-    "objectID": "21a8a4fa-10d0-4542-9b3e-711b07b48290",
+    "objectID": "d2254d21-30a3-4c1d-896a-a5b13f1f8928",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbarmenutoggle-props",
     "hierarchy": {
@@ -5237,7 +5612,7 @@
   },
   {
     "content": "NavbarMenuToggle Events",
-    "objectID": "31d57cf5-83af-4962-b6b0-235e0dc4761b",
+    "objectID": "5cc68cd3-3959-406d-9639-b9be6690b098",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbarmenutoggle-events",
     "hierarchy": {
@@ -5248,7 +5623,7 @@
   },
   {
     "content": "NavbarMenu Props",
-    "objectID": "b24405e9-26b0-4692-b8a1-6740cde364ff",
+    "objectID": "14d3a2c2-4043-4a24-9148-24dfd3b26fdf",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbarmenu-props",
     "hierarchy": {
@@ -5259,7 +5634,7 @@
   },
   {
     "content": "NavbarMenuItem Props",
-    "objectID": "f573d365-65a1-445e-a63f-351b1ab7d3dc",
+    "objectID": "d06217a5-bdad-4d55-b18b-8e9c5405b394",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbarmenuitem-props",
     "hierarchy": {
@@ -5270,7 +5645,7 @@
   },
   {
     "content": "Navbar types",
-    "objectID": "92369b1e-d126-45ef-b9ff-0176545aba86",
+    "objectID": "a6f2e131-4913-4e7a-bd6b-a5062519a908",
     "type": "lvl3",
     "url": "/docs/components/navbar#navbar-types",
     "hierarchy": {
@@ -5281,70 +5656,70 @@
   },
   {
     "content": "Motion Props",
-    "objectID": "c19a553a-3dbd-4898-afe2-4971aac89208",
+    "objectID": "44fc9291-0bcd-4402-9f41-3c03ee5d47cd",
     "type": "lvl4",
     "url": "/docs/components/navbar#motion-props",
     "hierarchy": { "lvl1": "Navbar", "lvl2": "Navbar types", "lvl3": null }
   },
   {
     "content": "Pagination",
-    "objectID": "0e79acaa-f3ab-4200-8a17-015e4919a595",
+    "objectID": "e2401f19-9d41-44fc-9cd1-c11ce1adafb0",
     "type": "lvl1",
     "url": "/docs/components/pagination",
     "hierarchy": { "lvl1": "Pagination" }
   },
   {
     "content": "Installation",
-    "objectID": "398013fb-9517-4533-ab6f-fe5974b9e3e5",
+    "objectID": "dc4076f7-6ca8-4ff8-96fd-671f69970e61",
     "type": "lvl2",
     "url": "/docs/components/pagination#installation",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "84745104-93ab-4f20-ab8c-4fec65582603",
+    "objectID": "80a383c5-453e-44c8-8a01-a36ab09c4306",
     "type": "lvl2",
     "url": "/docs/components/pagination#import",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "8afc9e3a-5621-47f3-8457-b6753264515d",
+    "objectID": "46afc1a7-e13f-4149-ab94-04494ae2ed74",
     "type": "lvl2",
     "url": "/docs/components/pagination#usage",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "17a1bb3a-56ee-47c0-923e-0de13143e9f4",
+    "objectID": "8cbad5a3-deb9-4616-95ee-92739ccc5867",
     "type": "lvl3",
     "url": "/docs/components/pagination#disabled",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "a0f28ee4-a80a-4941-830a-4b4f8fa52a3e",
+    "objectID": "ace9331a-ec90-445c-b67a-962a3400273f",
     "type": "lvl3",
     "url": "/docs/components/pagination#sizes",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "baea06ea-1489-48db-9db4-93756727bcc7",
+    "objectID": "0c255212-3fe9-43d4-8556-1bb43a6c455e",
     "type": "lvl3",
     "url": "/docs/components/pagination#colors",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "45d062c3-9c63-4cad-9543-af4731100321",
+    "objectID": "e3cba395-c9cb-45f6-ba9d-23abf36e7a08",
     "type": "lvl3",
     "url": "/docs/components/pagination#variants",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "With Controls",
-    "objectID": "45f7fed0-991d-4d83-ba6d-4dc0fb48e0da",
+    "objectID": "f859eaca-4fbc-43dd-936f-8d8b0f75f6e4",
     "type": "lvl3",
     "url": "/docs/components/pagination#with-controls",
     "hierarchy": {
@@ -5355,7 +5730,7 @@
   },
   {
     "content": "Pagination Loop",
-    "objectID": "33336743-e055-45f0-8101-5fcf9a298049",
+    "objectID": "88bfbc28-5e46-493f-864a-3deef67a2ed5",
     "type": "lvl3",
     "url": "/docs/components/pagination#pagination-loop",
     "hierarchy": {
@@ -5366,7 +5741,7 @@
   },
   {
     "content": "Changing the initial page",
-    "objectID": "c6d353c8-002d-469d-9baa-746bc76a7bbc",
+    "objectID": "eb8c07b1-4fb0-421e-8dce-e27713a256ab",
     "type": "lvl3",
     "url": "/docs/components/pagination#changing-the-initial-page",
     "hierarchy": {
@@ -5377,7 +5752,7 @@
   },
   {
     "content": "Compact Pagination",
-    "objectID": "0ba4e34e-5053-44b5-b9ac-8741977a7afe",
+    "objectID": "343748de-029d-4c07-a886-ec026c1c804f",
     "type": "lvl3",
     "url": "/docs/components/pagination#compact-pagination",
     "hierarchy": {
@@ -5388,7 +5763,7 @@
   },
   {
     "content": "With Shadow",
-    "objectID": "4d2e8cc5-7569-4d6b-b8c2-78410bceb81c",
+    "objectID": "e4977e3e-3cd1-453e-9148-531bf8a1fa82",
     "type": "lvl3",
     "url": "/docs/components/pagination#with-shadow",
     "hierarchy": {
@@ -5399,7 +5774,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "e49defd8-cfec-4334-9a66-1b9fb3ec6e39",
+    "objectID": "5accd2a0-4aaa-465d-84cd-f6d1567b7ac2",
     "type": "lvl3",
     "url": "/docs/components/pagination#controlled",
     "hierarchy": {
@@ -5410,7 +5785,7 @@
   },
   {
     "content": "Siblings",
-    "objectID": "442da795-8ed7-4b16-8970-b9d094b7f8f8",
+    "objectID": "28d468e9-be2f-40ee-b7b8-5c992c6ba115",
     "type": "lvl3",
     "url": "/docs/components/pagination#siblings",
     "hierarchy": {
@@ -5421,7 +5796,7 @@
   },
   {
     "content": "Boundaries",
-    "objectID": "49835710-44da-4237-b1db-3eddba2b2b23",
+    "objectID": "fc285a93-9d8a-45d5-91cd-2dae60e4f257",
     "type": "lvl3",
     "url": "/docs/components/pagination#boundaries",
     "hierarchy": {
@@ -5432,7 +5807,7 @@
   },
   {
     "content": "Custom items",
-    "objectID": "b00a38f0-9a93-4616-a168-78385c3a2da2",
+    "objectID": "0acf7574-dc0b-4a90-a934-7b78ac3aee29",
     "type": "lvl3",
     "url": "/docs/components/pagination#custom-items",
     "hierarchy": {
@@ -5443,14 +5818,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "96e50019-97f2-4e85-9346-b2082eaccfa1",
+    "objectID": "61288997-dc6d-4fce-950c-feb2faf55f01",
     "type": "lvl2",
     "url": "/docs/components/pagination#slots",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "a6c85b2c-e74d-467e-9fe5-9640c1ef62b9",
+    "objectID": "9a302bfe-9d2a-4b85-a114-80a8fe726492",
     "type": "lvl3",
     "url": "/docs/components/pagination#custom-styles",
     "hierarchy": {
@@ -5461,7 +5836,7 @@
   },
   {
     "content": "Custom Implementation",
-    "objectID": "e0f36e97-a338-4c0b-819c-ef000c89e183",
+    "objectID": "6b9ab669-8028-45f7-9e36-eb85b9c4a026",
     "type": "lvl3",
     "url": "/docs/components/pagination#custom-implementation",
     "hierarchy": {
@@ -5472,7 +5847,7 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "6502db5d-4ed1-4b01-ae9d-68c5c8994aa8",
+    "objectID": "ecd18ca7-074a-4cbe-9b4e-8921f6493c73",
     "type": "lvl2",
     "url": "/docs/components/pagination#data-attributes",
     "hierarchy": {
@@ -5483,21 +5858,21 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "1332808d-d7e0-4c22-bbb7-ec24384e5b0d",
+    "objectID": "4995306c-3b2c-46cf-bb04-355337d3f908",
     "type": "lvl2",
     "url": "/docs/components/pagination#accessibility",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "0f022438-bfb4-4c71-9d72-78931ab2bb1d",
+    "objectID": "16487dff-73a6-47bc-90ff-71aca2695354",
     "type": "lvl2",
     "url": "/docs/components/pagination#api",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Pagination Props",
-    "objectID": "75add0e6-21ee-4e1a-838f-c261974ee702",
+    "objectID": "cd2ecdef-a37f-4d82-9f5c-c9e4e550f8c3",
     "type": "lvl3",
     "url": "/docs/components/pagination#pagination-props",
     "hierarchy": {
@@ -5508,7 +5883,7 @@
   },
   {
     "content": "Pagination Events",
-    "objectID": "b9eda79a-8f6e-4b6e-8e74-8eff29c5f86d",
+    "objectID": "2214a5a7-33fe-4d46-9223-0bd91dbd3094",
     "type": "lvl3",
     "url": "/docs/components/pagination#pagination-events",
     "hierarchy": {
@@ -5519,7 +5894,7 @@
   },
   {
     "content": "Types",
-    "objectID": "302b83b4-b4f2-4691-8a1e-7471791e5c1e",
+    "objectID": "978b178f-bf79-44b2-b714-70a2c5c49894",
     "type": "lvl3",
     "url": "/docs/components/pagination#types",
     "hierarchy": {
@@ -5530,77 +5905,77 @@
   },
   {
     "content": "Pagination Item Props",
-    "objectID": "8c24652f-fca1-4dab-9b8b-c00de8f591d2",
+    "objectID": "3cd5050d-74fb-4604-b7d6-e7214f270f28",
     "type": "lvl4",
     "url": "/docs/components/pagination#pagination-item-props",
     "hierarchy": { "lvl1": "Pagination", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Popover",
-    "objectID": "9cf0871c-af84-4fd1-8e43-50bf70572d65",
+    "objectID": "62a79837-eab7-471b-809b-091c80bd30c8",
     "type": "lvl1",
     "url": "/docs/components/popover",
     "hierarchy": { "lvl1": "Popover" }
   },
   {
     "content": "Installation",
-    "objectID": "f17fad02-5213-497f-a511-698bb6c1badb",
+    "objectID": "2fd0ee8b-6c8d-4702-982b-771d8e34c246",
     "type": "lvl2",
     "url": "/docs/components/popover#installation",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "9164a526-18a5-45b1-965a-a5ac439365aa",
+    "objectID": "244af456-8f32-424c-a504-120b623f603d",
     "type": "lvl2",
     "url": "/docs/components/popover#import",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "fc47d13d-2bd2-4f79-97f2-6f6a760d351c",
+    "objectID": "0d851a59-52dd-4c22-9aec-653550ca44f5",
     "type": "lvl2",
     "url": "/docs/components/popover#usage",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "With Arrow",
-    "objectID": "fb0cf880-0278-4e21-9e1b-52e42e22d6cd",
+    "objectID": "2e19a813-62eb-43ab-bba6-21377386d176",
     "type": "lvl3",
     "url": "/docs/components/popover#with-arrow",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Usage", "lvl3": "With Arrow" }
   },
   {
     "content": "Colors",
-    "objectID": "f8a9d3ed-e61b-432d-a1d3-41b121c55d2f",
+    "objectID": "5a7d862a-a735-4ae8-ac60-88789b484dfa",
     "type": "lvl3",
     "url": "/docs/components/popover#colors",
     "hierarchy": { "lvl1": "Popover", "lvl2": "With Arrow", "lvl3": "Colors" }
   },
   {
     "content": "Placements",
-    "objectID": "959028df-4dc7-480f-9b1c-97905be95e9b",
+    "objectID": "da208aa4-281b-4519-93a8-2161a0f1f526",
     "type": "lvl3",
     "url": "/docs/components/popover#placements",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Colors", "lvl3": "Placements" }
   },
   {
     "content": "Offset",
-    "objectID": "eb23c384-cf53-481e-b1df-6aa1eadc8b6c",
+    "objectID": "50da585d-fb00-4ecd-9c23-609d312857d2",
     "type": "lvl3",
     "url": "/docs/components/popover#offset",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Placements", "lvl3": "Offset" }
   },
   {
     "content": "Controlled",
-    "objectID": "116c0653-ca20-4a01-9848-134eee4971f5",
+    "objectID": "7ad1030b-b0ac-4304-adcd-217bfbcb168f",
     "type": "lvl3",
     "url": "/docs/components/popover#controlled",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Offset", "lvl3": "Controlled" }
   },
   {
     "content": "Title Props",
-    "objectID": "abd1328c-d123-47cb-ac7e-1d8b2df39ccf",
+    "objectID": "a5544522-84c3-4e36-8ef0-c981b7564602",
     "type": "lvl3",
     "url": "/docs/components/popover#title-props",
     "hierarchy": {
@@ -5611,7 +5986,7 @@
   },
   {
     "content": "With Form",
-    "objectID": "3255c0ff-3aec-4566-a265-757330f7acf8",
+    "objectID": "97cc0f59-964d-4870-aff7-897529f29e88",
     "type": "lvl3",
     "url": "/docs/components/popover#with-form",
     "hierarchy": {
@@ -5622,14 +5997,14 @@
   },
   {
     "content": "Backdrop",
-    "objectID": "d2b6d0b3-0430-4a78-95f0-596c6d31659a",
+    "objectID": "f03483cb-d997-4e8e-9f2f-c8d9897e6ad5",
     "type": "lvl3",
     "url": "/docs/components/popover#backdrop",
     "hierarchy": { "lvl1": "Popover", "lvl2": "With Form", "lvl3": "Backdrop" }
   },
   {
     "content": "Custom Motion",
-    "objectID": "32676dc7-81a0-40f8-ad8e-f69aacd38c25",
+    "objectID": "56245810-a25b-4e09-97c7-0931feef855d",
     "type": "lvl3",
     "url": "/docs/components/popover#custom-motion",
     "hierarchy": {
@@ -5640,7 +6015,7 @@
   },
   {
     "content": "Custom Trigger",
-    "objectID": "5a9366d2-5c65-4ee3-9167-cc3a8f6750ec",
+    "objectID": "6f54d8da-2ef2-43b3-98df-6ef4c1298daf",
     "type": "lvl3",
     "url": "/docs/components/popover#custom-trigger",
     "hierarchy": {
@@ -5651,49 +6026,49 @@
   },
   {
     "content": "Slots",
-    "objectID": "67464e25-7471-413e-a161-577ead1a0f20",
+    "objectID": "3750e588-33ff-4263-93ca-5cecc7d06a71",
     "type": "lvl2",
     "url": "/docs/components/popover#slots",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "e4b3ad67-b176-4b69-9046-c938f58b3030",
+    "objectID": "da846167-8135-4169-9fc4-0002a26195e6",
     "type": "lvl3",
     "url": "/docs/components/popover#custom-styles",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "95313bdd-1383-4c31-9b62-9d2b415e7c1b",
+    "objectID": "9f865bd9-5ea3-4906-89f7-e2f11f546b75",
     "type": "lvl2",
     "url": "/docs/components/popover#data-attributes",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "12f829af-e805-44b5-82d3-4effdef49035",
+    "objectID": "749c9e19-c1d5-4130-93ab-915fd2efbcd6",
     "type": "lvl2",
     "url": "/docs/components/popover#accessibility",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "97208632-4716-4912-90e8-3c95c0ac4f02",
+    "objectID": "e6496534-510f-405a-bbf8-84ed876e09eb",
     "type": "lvl2",
     "url": "/docs/components/popover#api",
     "hierarchy": { "lvl1": "Popover", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Popover Props",
-    "objectID": "24eebe0a-bb78-41fb-af7a-19bc95eeca2c",
+    "objectID": "1ff66038-1ff3-4ae6-ab06-774dba5bc671",
     "type": "lvl3",
     "url": "/docs/components/popover#popover-props",
     "hierarchy": { "lvl1": "Popover", "lvl2": "API", "lvl3": "Popover Props" }
   },
   {
     "content": "Popover Events",
-    "objectID": "a8ac643f-ef5a-4621-8ddb-b59dfd988655",
+    "objectID": "d9812e2b-124a-4a8f-a96f-b6d94aa1b995",
     "type": "lvl3",
     "url": "/docs/components/popover#popover-events",
     "hierarchy": {
@@ -5704,7 +6079,7 @@
   },
   {
     "content": "PopoverTrigger Props",
-    "objectID": "6691a008-de01-4eab-863e-df0cc6e750b7",
+    "objectID": "c7291f11-17c7-4eaa-b2da-e40670b266f0",
     "type": "lvl3",
     "url": "/docs/components/popover#popovertrigger-props",
     "hierarchy": {
@@ -5715,7 +6090,7 @@
   },
   {
     "content": "PopoverContent Props",
-    "objectID": "eaea5de2-f817-4c61-bc33-a58f087c10ae",
+    "objectID": "d33e40b0-a275-4e81-a8cf-8e0b991d8206",
     "type": "lvl3",
     "url": "/docs/components/popover#popovercontent-props",
     "hierarchy": {
@@ -5726,7 +6101,7 @@
   },
   {
     "content": "Popover types",
-    "objectID": "fda20f86-b441-45de-8a82-9fb69473616e",
+    "objectID": "0d432404-2ea9-4f7e-bc55-2080b46d73c0",
     "type": "lvl3",
     "url": "/docs/components/popover#popover-types",
     "hierarchy": {
@@ -5737,14 +6112,14 @@
   },
   {
     "content": "Popover Placement",
-    "objectID": "9e4978f9-11db-494e-bc83-8c3822cb520a",
+    "objectID": "219dbf77-fb53-4088-8f71-ec81fe292bdc",
     "type": "lvl4",
     "url": "/docs/components/popover#popover-placement",
     "hierarchy": { "lvl1": "Popover", "lvl2": "Popover types", "lvl3": null }
   },
   {
     "content": "Motion Props",
-    "objectID": "f73e3c2e-811e-4f83-8d4e-189fccc5d89d",
+    "objectID": "678e65be-638e-4b72-b9eb-3d13a7c52ff6",
     "type": "lvl4",
     "url": "/docs/components/popover#motion-props",
     "hierarchy": {
@@ -5755,49 +6130,49 @@
   },
   {
     "content": "Progress",
-    "objectID": "2edb930c-0d00-44ad-ae8d-7a918cc71240",
+    "objectID": "64d33032-b50c-49b3-b8e0-e0fd4f17dca7",
     "type": "lvl1",
     "url": "/docs/components/progress",
     "hierarchy": { "lvl1": "Progress" }
   },
   {
     "content": "Installation",
-    "objectID": "7b545a75-6cdd-47e3-8ad1-22f587368e08",
+    "objectID": "d300cc96-da2d-404c-8cda-26ce2470f31e",
     "type": "lvl2",
     "url": "/docs/components/progress#installation",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "c4f3bf70-4434-4a50-8541-8961dfadf159",
+    "objectID": "d857518b-1a7c-438b-9bf7-009301c0429e",
     "type": "lvl2",
     "url": "/docs/components/progress#import",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "84d7a90f-bbed-4cf5-95c9-e924adf25d65",
+    "objectID": "6301864b-cc0e-4aa9-bdf0-03d5531923a5",
     "type": "lvl2",
     "url": "/docs/components/progress#usage",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "198c4009-6cf0-42ac-ae83-9d04e541ba34",
+    "objectID": "8f1b3150-d7c0-4bdd-8fe7-32100c930aba",
     "type": "lvl3",
     "url": "/docs/components/progress#sizes",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "4c825735-8d24-4f4b-9e13-0d22679266ac",
+    "objectID": "e9f82963-093c-4aff-aa6d-7f9fff0f42b1",
     "type": "lvl3",
     "url": "/docs/components/progress#colors",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Indeterminate",
-    "objectID": "536c2f7f-d71c-4fad-957f-78554973b31f",
+    "objectID": "f4ecd127-0c53-4ee9-874e-246a56e2aad4",
     "type": "lvl3",
     "url": "/docs/components/progress#indeterminate",
     "hierarchy": {
@@ -5808,7 +6183,7 @@
   },
   {
     "content": "Striped",
-    "objectID": "845fd249-5358-4f3d-b999-3039208c9529",
+    "objectID": "b217ebf1-b378-49d9-8b5c-3119709a3310",
     "type": "lvl3",
     "url": "/docs/components/progress#striped",
     "hierarchy": {
@@ -5819,14 +6194,14 @@
   },
   {
     "content": "With Label",
-    "objectID": "2beebf9e-f546-4846-af5c-5aeddf8cf4d3",
+    "objectID": "216dd9fb-94bb-4f40-874a-88aae9c45aca",
     "type": "lvl3",
     "url": "/docs/components/progress#with-label",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Striped", "lvl3": "With Label" }
   },
   {
     "content": "With Value",
-    "objectID": "17a471e3-ff56-40da-b87c-401fefa73285",
+    "objectID": "91a65d93-287f-4e1a-b9e8-71c1c671b771",
     "type": "lvl3",
     "url": "/docs/components/progress#with-value",
     "hierarchy": {
@@ -5837,7 +6212,7 @@
   },
   {
     "content": "Value Formatting",
-    "objectID": "81a372b3-dfb2-4fa3-847f-035e80b2f187",
+    "objectID": "63231eb4-0482-4919-81cc-2aef2a41a4b1",
     "type": "lvl3",
     "url": "/docs/components/progress#value-formatting",
     "hierarchy": {
@@ -5848,14 +6223,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "5d202539-96a4-4f6d-951d-12d7cc715b08",
+    "objectID": "a87dbe20-f8ed-4541-b26d-79a64d30dd9b",
     "type": "lvl2",
     "url": "/docs/components/progress#slots",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "2836bc0c-3d1f-477b-9726-580edd156bf1",
+    "objectID": "978de4cf-cae2-46ab-b4ff-75ef8823994a",
     "type": "lvl3",
     "url": "/docs/components/progress#custom-styles",
     "hierarchy": {
@@ -5866,77 +6241,77 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "b0b33c73-50a4-4600-b7e0-972f99528d7e",
+    "objectID": "5b196837-b521-4550-9e45-bbb5e93202ab",
     "type": "lvl2",
     "url": "/docs/components/progress#data-attributes",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "f86b7330-ac6e-4c7a-ba13-7590fceb6a05",
+    "objectID": "612ff569-c0b5-4991-9f88-3120e90925ba",
     "type": "lvl2",
     "url": "/docs/components/progress#accessibility",
     "hierarchy": { "lvl1": "Progress", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "12c3af23-ad7c-4c24-9247-0cd29023b81b",
+    "objectID": "80b70cd5-4939-42bd-9fdc-61629ce06ce1",
     "type": "lvl2",
     "url": "/docs/components/progress#api",
     "hierarchy": { "lvl1": "Progress", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Progress Props",
-    "objectID": "7e70e29c-7976-4858-9af3-45f7fec877dd",
+    "objectID": "3dd61164-2ee9-4e72-a6bc-2540537b51b6",
     "type": "lvl3",
     "url": "/docs/components/progress#progress-props",
     "hierarchy": { "lvl1": "Progress", "lvl2": "API", "lvl3": "Progress Props" }
   },
   {
     "content": "Radio",
-    "objectID": "f95fa054-d89a-4a65-83c6-c4d4205c1681",
+    "objectID": "8a453ff8-8f2d-4e2b-80ba-38b1ddd97fb4",
     "type": "lvl1",
     "url": "/docs/components/radio-group",
     "hierarchy": { "lvl1": "Radio" }
   },
   {
     "content": "Radio group",
-    "objectID": "d22e774f-5979-4042-8b35-d7aab58f6065",
+    "objectID": "66dd311d-1dd8-4f86-ab51-1b21e7e354a3",
     "type": "lvl1",
     "url": "/docs/components/radio-group#radio-group",
     "hierarchy": { "lvl1": "Radio", "lvl2": null, "lvl3": null }
   },
   {
     "content": "Installation",
-    "objectID": "fd8eff22-a973-489e-8f13-1c67885e634e",
+    "objectID": "d8ae3410-359a-4dbc-a50c-c14e7bc79851",
     "type": "lvl2",
     "url": "/docs/components/radio-group#installation",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "3f3c0574-41f6-4c40-89aa-1b8e8150563c",
+    "objectID": "8ef66eab-2a2d-4bd3-9742-432be9c1924e",
     "type": "lvl2",
     "url": "/docs/components/radio-group#import",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "8ba6608e-f0d7-4bcb-ab70-8253a8156b8c",
+    "objectID": "8f093c98-949b-4432-9f31-c203a49a552e",
     "type": "lvl2",
     "url": "/docs/components/radio-group#usage",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "f29fa08f-97c7-4ee3-b8e5-6eb4d25112b6",
+    "objectID": "4657a031-24cc-4124-babd-31e5877004ad",
     "type": "lvl3",
     "url": "/docs/components/radio-group#disabled",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Default Value",
-    "objectID": "396ea819-34e6-4b1f-a665-6b28453d0476",
+    "objectID": "86f3ff95-fddf-4812-b7c1-aa21281273a3",
     "type": "lvl3",
     "url": "/docs/components/radio-group#default-value",
     "hierarchy": {
@@ -5947,7 +6322,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "98e06f3d-db8e-4ca8-96ee-adae15899562",
+    "objectID": "fbd06d70-6a91-4712-a203-6f54d7a7e97a",
     "type": "lvl3",
     "url": "/docs/components/radio-group#with-description",
     "hierarchy": {
@@ -5958,7 +6333,7 @@
   },
   {
     "content": "Horizontal",
-    "objectID": "12e6ce83-1926-4278-a83c-820f2c443028",
+    "objectID": "245f0da5-8b2b-45ca-a2a2-ca5c293d5d03",
     "type": "lvl3",
     "url": "/docs/components/radio-group#horizontal",
     "hierarchy": {
@@ -5969,35 +6344,35 @@
   },
   {
     "content": "Controlled",
-    "objectID": "dd967ea5-431e-4568-b5d6-35bd4e4389c9",
+    "objectID": "5b1597e1-34b2-4df4-8f7b-0018c1c76ed2",
     "type": "lvl3",
     "url": "/docs/components/radio-group#controlled",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Horizontal", "lvl3": "Controlled" }
   },
   {
     "content": "Invalid",
-    "objectID": "9d0d9958-e765-4c53-9ec1-4acbf1a342eb",
+    "objectID": "8bb3675d-64ba-4158-b2c3-0b91a2fb3dfc",
     "type": "lvl3",
     "url": "/docs/components/radio-group#invalid",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Controlled", "lvl3": "Invalid" }
   },
   {
     "content": "Slots",
-    "objectID": "244b2e5e-df72-4d4c-8f57-8ce53315e55a",
+    "objectID": "46490ffd-bc51-4d23-bb27-3abe7afe8ba0",
     "type": "lvl2",
     "url": "/docs/components/radio-group#slots",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "534a3814-8d62-48ea-b637-f7fac071b1f1",
+    "objectID": "5c577e57-17d5-4c9a-8aa4-e6229c8815ce",
     "type": "lvl3",
     "url": "/docs/components/radio-group#custom-styles",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Custom Implementation",
-    "objectID": "36ed5523-36b8-426c-a2ef-b3981c5ee198",
+    "objectID": "98049fa9-a3e4-47dd-bba4-90c2bd329e15",
     "type": "lvl3",
     "url": "/docs/components/radio-group#custom-implementation",
     "hierarchy": {
@@ -6008,35 +6383,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "d16bab9d-f869-44cc-b8e4-acaf93a5ae85",
+    "objectID": "15738bca-5db4-4b80-9a73-bae90a507c1a",
     "type": "lvl2",
     "url": "/docs/components/radio-group#data-attributes",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "d80b26da-ec78-4af6-a0d6-62aab513410e",
+    "objectID": "38f5c1e0-4128-4c7a-80ae-a75281c43afb",
     "type": "lvl2",
     "url": "/docs/components/radio-group#accessibility",
     "hierarchy": { "lvl1": "Radio", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "f805c6fd-e492-4822-ae66-ac5e38acd679",
+    "objectID": "541611d7-9242-48f3-a151-3526f7f58e26",
     "type": "lvl2",
     "url": "/docs/components/radio-group#api",
     "hierarchy": { "lvl1": "Radio", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "RadioGroup Props",
-    "objectID": "2c73a8b3-fac0-4310-8e65-1fb22791370b",
+    "objectID": "25e5dabe-af97-4609-9fdd-8c9f35d9903f",
     "type": "lvl3",
     "url": "/docs/components/radio-group#radiogroup-props",
     "hierarchy": { "lvl1": "Radio", "lvl2": "API", "lvl3": "RadioGroup Props" }
   },
   {
     "content": "RadioGroup Events",
-    "objectID": "ebee0599-a3ce-4000-8575-d14120bc8807",
+    "objectID": "ea1cd738-e64f-4510-bf08-00cde9a29495",
     "type": "lvl3",
     "url": "/docs/components/radio-group#radiogroup-events",
     "hierarchy": {
@@ -6047,7 +6422,7 @@
   },
   {
     "content": "Radio Props",
-    "objectID": "bc06c184-c736-4d5a-ad0d-067d4c8a2cf5",
+    "objectID": "bbb5a041-f9bd-4d0c-b5e2-54e11fa5ca5a",
     "type": "lvl3",
     "url": "/docs/components/radio-group#radio-props",
     "hierarchy": {
@@ -6058,14 +6433,14 @@
   },
   {
     "content": "Range Calendar",
-    "objectID": "575b4208-82a6-4199-8ba8-f72cc0bd6029",
+    "objectID": "c51d46f7-274b-4dae-9a67-543e657b3946",
     "type": "lvl1",
     "url": "/docs/components/range-calendar",
     "hierarchy": { "lvl1": "Range Calendar" }
   },
   {
     "content": "Installation",
-    "objectID": "5171b3ca-2720-4f59-8362-bd1a41ada909",
+    "objectID": "406f11af-192a-461f-8cee-cc2332706c21",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#installation",
     "hierarchy": {
@@ -6076,21 +6451,21 @@
   },
   {
     "content": "Import",
-    "objectID": "b10ceadc-c38c-48db-b7e7-4a9be01f526e",
+    "objectID": "cb150b18-3cc2-41ab-b2df-faea734b4b77",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#import",
     "hierarchy": { "lvl1": "Range Calendar", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "3757f9e8-4a5f-41d0-9b8e-3ef3fb8e91ea",
+    "objectID": "bf820ca2-19dc-4150-86da-b961aeadeff1",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#usage",
     "hierarchy": { "lvl1": "Range Calendar", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "2f2eec83-43b9-47d1-a1cb-b0d3b6246c4c",
+    "objectID": "59cc029c-c326-4658-9518-e7e96be6fb72",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#disabled",
     "hierarchy": {
@@ -6101,7 +6476,7 @@
   },
   {
     "content": "Read Only",
-    "objectID": "b257157b-1e7a-4623-b789-b2ed7b6f8042",
+    "objectID": "0b93ad4e-e5e5-45b4-ac55-e90edb65f7c2",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#read-only",
     "hierarchy": {
@@ -6112,7 +6487,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "03b5e8f0-1582-406a-8761-198ddda0aa4f",
+    "objectID": "c417371b-da75-4e77-8214-bf216462da65",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#controlled",
     "hierarchy": {
@@ -6123,7 +6498,7 @@
   },
   {
     "content": "Min Date Value",
-    "objectID": "0b2e3317-1b75-4995-ae0b-7ffe0167c42e",
+    "objectID": "cb1a9a68-c196-4696-8ce4-c8d373f6c679",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#min-date-value",
     "hierarchy": {
@@ -6134,7 +6509,7 @@
   },
   {
     "content": "Max Date Value",
-    "objectID": "c0686577-e125-4138-a9f4-df1ba8db0172",
+    "objectID": "5b46ea65-7fc3-40fc-abe1-ee91b4edb1e9",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#max-date-value",
     "hierarchy": {
@@ -6145,7 +6520,7 @@
   },
   {
     "content": "Unavailable Dates",
-    "objectID": "7ea06775-592e-4113-b861-a70f5d7663b2",
+    "objectID": "86243c25-9a8a-4889-ada9-0c0b05d0de1e",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#unavailable-dates",
     "hierarchy": {
@@ -6156,7 +6531,7 @@
   },
   {
     "content": "Non-Contiguous Ranges",
-    "objectID": "08c6a5ee-8a31-4746-88e1-0047078ff5a5",
+    "objectID": "f5806f14-63e8-42c7-a191-608d578be25a",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#non-contiguous-ranges",
     "hierarchy": {
@@ -6167,7 +6542,7 @@
   },
   {
     "content": "Controlled Focused Value",
-    "objectID": "5f1c671a-567b-4d82-aa1e-58b24220e04a",
+    "objectID": "b699e674-b58e-446d-90ae-13f547549fb0",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#controlled-focused-value",
     "hierarchy": {
@@ -6178,7 +6553,7 @@
   },
   {
     "content": "Invalid Date",
-    "objectID": "443b9320-3601-4940-a207-608c15cfd9b1",
+    "objectID": "8f6fc923-5344-425e-9874-db6bd6e0a1a4",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#invalid-date",
     "hierarchy": {
@@ -6187,20 +6562,31 @@
       "lvl3": "Invalid Date"
     }
   },
+  {
+    "content": "With Month And Year Picker",
+    "objectID": "7942300d-2529-4b3b-8822-9efebfebf6f9",
+    "type": "lvl3",
+    "url": "/docs/components/range-calendar#with-month-and-year-picker",
+    "hierarchy": {
+      "lvl1": "Range Calendar",
+      "lvl2": "Invalid Date",
+      "lvl3": "With Month And Year Picker"
+    }
+  },
   {
     "content": "International Calendars",
-    "objectID": "f1bed985-c572-4e19-9994-3893758a7765",
+    "objectID": "4f3bb3e6-b5c5-477c-80d9-a1b26df24cc7",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#international-calendars",
     "hierarchy": {
       "lvl1": "Range Calendar",
-      "lvl2": "Invalid Date",
+      "lvl2": "With Month And Year Picker",
       "lvl3": "International Calendars"
     }
   },
   {
     "content": "Visible Months",
-    "objectID": "9c1efca8-7784-4b79-9644-8246386a6b0d",
+    "objectID": "bebe45fc-5a8d-417e-8105-dd74d0b2d5d8",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#visible-months",
     "hierarchy": {
@@ -6211,7 +6597,7 @@
   },
   {
     "content": "Page Behaviour",
-    "objectID": "c1361748-b47d-481d-a21c-1d161afdfac5",
+    "objectID": "817409fe-8f3e-44dd-a6e3-8f80f20a4c03",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#page-behaviour",
     "hierarchy": {
@@ -6222,7 +6608,7 @@
   },
   {
     "content": "Presets",
-    "objectID": "067298ea-4134-477e-a319-9c7345b068c8",
+    "objectID": "e28d2194-0d12-4a8c-992a-2772317a19bd",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#presets",
     "hierarchy": {
@@ -6233,14 +6619,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "354b9d1e-478f-47ab-975b-f35f79dd1764",
+    "objectID": "16f0455b-a2e2-4372-9d8d-c3a4b55e4254",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#slots",
     "hierarchy": { "lvl1": "Range Calendar", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "d109ba05-49d3-49ce-bb9d-543cca303714",
+    "objectID": "6381941c-ebea-4fa9-967c-8c175b6e9ba6",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#data-attributes",
     "hierarchy": {
@@ -6251,7 +6637,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "7e144382-35c9-44dd-bb82-49922035f3f9",
+    "objectID": "bbbfec01-25bd-48d6-bc9b-05d40bda06ea",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#accessibility",
     "hierarchy": {
@@ -6262,14 +6648,14 @@
   },
   {
     "content": "API",
-    "objectID": "0a5d9ab2-8b14-4880-ada1-5c1218f4572a",
+    "objectID": "462c52e5-d6d5-4dc0-8c0b-8dde16757fd1",
     "type": "lvl2",
     "url": "/docs/components/range-calendar#api",
     "hierarchy": { "lvl1": "Range Calendar", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "RangeCalendar Props",
-    "objectID": "bb37b537-2af4-40c4-99a8-0d5860eb23b2",
+    "objectID": "106e9064-109a-4f78-b3fe-eb82f9cabe62",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#rangecalendar-props",
     "hierarchy": {
@@ -6280,7 +6666,7 @@
   },
   {
     "content": "RangeCalendar Events",
-    "objectID": "bd5db4f1-7916-4e31-90a4-f3daee516365",
+    "objectID": "33281318-3a77-484c-97ab-e76a1aa4f740",
     "type": "lvl3",
     "url": "/docs/components/range-calendar#rangecalendar-events",
     "hierarchy": {
@@ -6291,7 +6677,7 @@
   },
   {
     "content": "Supported Calendars",
-    "objectID": "b76d7cb4-41ca-4b07-a865-411b3da7331a",
+    "objectID": "995adb66-8657-49f3-a913-b92154e422bc",
     "type": "lvl4",
     "url": "/docs/components/range-calendar#supported-calendars",
     "hierarchy": {
@@ -6302,14 +6688,14 @@
   },
   {
     "content": "Scroll Shadow",
-    "objectID": "6415610f-00bc-4e41-9ad4-12f190de39fd",
+    "objectID": "831f3a1f-aff6-44a2-a1e5-aee692a0dbf4",
     "type": "lvl1",
     "url": "/docs/components/scroll-shadow",
     "hierarchy": { "lvl1": "Scroll Shadow" }
   },
   {
     "content": "Installation",
-    "objectID": "234192b9-1801-4ac7-ba43-30aca28d5f94",
+    "objectID": "6b2713c3-c393-42d7-8aac-f7d4d288fc06",
     "type": "lvl2",
     "url": "/docs/components/scroll-shadow#installation",
     "hierarchy": {
@@ -6320,21 +6706,21 @@
   },
   {
     "content": "Import",
-    "objectID": "b6f9c927-6535-49d9-bd18-2c482acf5308",
+    "objectID": "d90d19f1-d12b-4fb8-a5c8-39a582aea4d9",
     "type": "lvl2",
     "url": "/docs/components/scroll-shadow#import",
     "hierarchy": { "lvl1": "Scroll Shadow", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "0641120f-b5cd-4132-809e-b394941a5377",
+    "objectID": "3d5fd636-11f7-4e23-9acf-3fff44ee7354",
     "type": "lvl2",
     "url": "/docs/components/scroll-shadow#usage",
     "hierarchy": { "lvl1": "Scroll Shadow", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Hide Scrollbar",
-    "objectID": "34dc8fad-d89e-4994-bcab-67107d36c115",
+    "objectID": "29577827-996f-4fb5-a99d-16aa5d0a154d",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#hide-scrollbar",
     "hierarchy": {
@@ -6345,7 +6731,7 @@
   },
   {
     "content": "Custom Shadow Size",
-    "objectID": "b29c948b-8756-4cb9-815c-119175a984a7",
+    "objectID": "6e5bcebd-0ea1-4b63-8dd4-683dcdf2f324",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#custom-shadow-size",
     "hierarchy": {
@@ -6356,7 +6742,7 @@
   },
   {
     "content": "Horizontal Orientation",
-    "objectID": "5dc6799e-965e-408b-81c5-f7e68ad58f44",
+    "objectID": "b600b877-6ad6-45cd-8e50-7a249f9b6c8d",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#horizontal-orientation",
     "hierarchy": {
@@ -6367,7 +6753,7 @@
   },
   {
     "content": "Shadow Offset",
-    "objectID": "7969ba33-8aa8-444b-a3e4-103474c79bcc",
+    "objectID": "7903b0eb-d68f-4dc0-b64e-f201633fa2f0",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#shadow-offset",
     "hierarchy": {
@@ -6378,14 +6764,14 @@
   },
   {
     "content": "API",
-    "objectID": "74936381-2725-40a5-a61d-bf51362c86dd",
+    "objectID": "506b1a8d-71bd-4389-99f7-08e417291002",
     "type": "lvl2",
     "url": "/docs/components/scroll-shadow#api",
     "hierarchy": { "lvl1": "Scroll Shadow", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "ShadowScroll Props",
-    "objectID": "92568995-0103-41b7-b7bf-8b4bd41ea901",
+    "objectID": "a4bf29f3-ffc6-4425-beee-5b9d1c7d26e5",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#shadowscroll-props",
     "hierarchy": {
@@ -6396,7 +6782,7 @@
   },
   {
     "content": "ShadowScroll Events",
-    "objectID": "9b91093f-07b8-4e25-88fc-241fac366aba",
+    "objectID": "4d9fee37-d1cb-4713-a303-502ab77a6a53",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#shadowscroll-events",
     "hierarchy": {
@@ -6407,7 +6793,7 @@
   },
   {
     "content": "Types",
-    "objectID": "2b768f8f-9a31-48f1-a147-fa8db81da0e8",
+    "objectID": "a576637b-79f2-4ffc-8aa7-25561d1cc347",
     "type": "lvl3",
     "url": "/docs/components/scroll-shadow#types",
     "hierarchy": {
@@ -6418,49 +6804,49 @@
   },
   {
     "content": "Scroll Shadow Visibility",
-    "objectID": "9d05097d-7e19-48bd-b188-d3d36c7c2404",
+    "objectID": "b25f5408-3e41-4f72-88e3-fb03acdccd34",
     "type": "lvl4",
     "url": "/docs/components/scroll-shadow#scroll-shadow-visibility",
     "hierarchy": { "lvl1": "Scroll Shadow", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Select",
-    "objectID": "661b5e81-d086-4957-a3c1-59f24c50e7e6",
+    "objectID": "7ffb8ce0-7909-4e29-9cd3-464819f21848",
     "type": "lvl1",
     "url": "/docs/components/select",
     "hierarchy": { "lvl1": "Select" }
   },
   {
     "content": "Installation",
-    "objectID": "d9a5db7c-861f-4f75-94bb-a777b6d18f5c",
+    "objectID": "ac4dda4f-2e88-4134-847a-1dad42f89b68",
     "type": "lvl2",
     "url": "/docs/components/select#installation",
     "hierarchy": { "lvl1": "Select", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "6f43ab6b-0614-4345-a707-2bac22454674",
+    "objectID": "272c1cf0-51ed-4aaf-8dba-2a461715ccf5",
     "type": "lvl2",
     "url": "/docs/components/select#import",
     "hierarchy": { "lvl1": "Select", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "9067705a-36a8-4fb2-b550-780515f0100b",
+    "objectID": "ff2e45dc-d136-4da4-9d8f-e3fd5f3feab7",
     "type": "lvl2",
     "url": "/docs/components/select#usage",
     "hierarchy": { "lvl1": "Select", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Dynamic items",
-    "objectID": "872085c6-b056-49c1-9266-03637cd3c761",
+    "objectID": "7215e1c0-33ed-4264-b254-76084193dc8a",
     "type": "lvl3",
     "url": "/docs/components/select#dynamic-items",
     "hierarchy": { "lvl1": "Select", "lvl2": "Usage", "lvl3": "Dynamic items" }
   },
   {
     "content": "Multiple Selection",
-    "objectID": "d55ef4be-b244-4b36-8be3-afa060fa8383",
+    "objectID": "9f77f3bb-dad4-4dd1-9926-794aee66fee9",
     "type": "lvl3",
     "url": "/docs/components/select#multiple-selection",
     "hierarchy": {
@@ -6471,7 +6857,7 @@
   },
   {
     "content": "Disabled",
-    "objectID": "a012af18-98da-4642-8135-3144000706ef",
+    "objectID": "bbdb6d95-08ff-4e38-a2c3-c548d29fbd1d",
     "type": "lvl3",
     "url": "/docs/components/select#disabled",
     "hierarchy": {
@@ -6482,7 +6868,7 @@
   },
   {
     "content": "Disabled Items",
-    "objectID": "5b8f95fd-0672-46e5-aa8f-a3fc16f4e006",
+    "objectID": "04cecb2d-0f1c-4285-84ae-5d6a6f1b8d62",
     "type": "lvl3",
     "url": "/docs/components/select#disabled-items",
     "hierarchy": {
@@ -6493,7 +6879,7 @@
   },
   {
     "content": "Required",
-    "objectID": "a4f548e2-714a-4401-9852-6b7968e179ea",
+    "objectID": "541ee662-9326-414b-82b7-f9bf15267a01",
     "type": "lvl3",
     "url": "/docs/components/select#required",
     "hierarchy": {
@@ -6504,35 +6890,35 @@
   },
   {
     "content": "Sizes",
-    "objectID": "c3da8a3b-bdd9-4fa4-aeec-59fc97488cbf",
+    "objectID": "b37c2921-7a60-4b82-87b4-efd868c07a26",
     "type": "lvl3",
     "url": "/docs/components/select#sizes",
     "hierarchy": { "lvl1": "Select", "lvl2": "Required", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "6be3bfec-26c9-40c2-bcf1-639322562f0b",
+    "objectID": "f3607ab9-711b-420f-9f45-8ec66d232ef2",
     "type": "lvl3",
     "url": "/docs/components/select#colors",
     "hierarchy": { "lvl1": "Select", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "302deef0-258b-42ab-a1b7-67d1c1aa8b83",
+    "objectID": "99eec76c-30b6-40aa-b7e4-8da1ee29fe87",
     "type": "lvl3",
     "url": "/docs/components/select#variants",
     "hierarchy": { "lvl1": "Select", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Radius",
-    "objectID": "3657e491-11f5-42d0-9936-a4ba31daa74b",
+    "objectID": "2825ecc6-a399-4338-84ce-f83fd0cca198",
     "type": "lvl3",
     "url": "/docs/components/select#radius",
     "hierarchy": { "lvl1": "Select", "lvl2": "Variants", "lvl3": "Radius" }
   },
   {
     "content": "Label Placements",
-    "objectID": "d3f4e095-c056-4aee-a015-c79fa972cc59",
+    "objectID": "a870a62b-e357-4607-88f2-6f9db230be59",
     "type": "lvl3",
     "url": "/docs/components/select#label-placements",
     "hierarchy": {
@@ -6543,7 +6929,7 @@
   },
   {
     "content": "Start Content",
-    "objectID": "7642a28d-99ea-41d6-8b3b-848b2c6e20bd",
+    "objectID": "9347561d-6735-48d0-bae5-4d2094c0d7bc",
     "type": "lvl3",
     "url": "/docs/components/select#start-content",
     "hierarchy": {
@@ -6554,7 +6940,7 @@
   },
   {
     "content": "Item Start & End Content",
-    "objectID": "85ea50e4-cc71-4669-95f8-bf42217d9ed9",
+    "objectID": "579d75b7-dee4-4ac0-b5bb-15337d0266c3",
     "type": "lvl3",
     "url": "/docs/components/select#item-start--end-content",
     "hierarchy": {
@@ -6565,7 +6951,7 @@
   },
   {
     "content": "Custom Selector Icon",
-    "objectID": "553fb2eb-f714-411f-9a56-4fc185342e1e",
+    "objectID": "d20bfb8d-d75a-402c-bfa9-ca480161fdac",
     "type": "lvl3",
     "url": "/docs/components/select#custom-selector-icon",
     "hierarchy": {
@@ -6576,7 +6962,7 @@
   },
   {
     "content": "Without Scroll Shadow",
-    "objectID": "9faecd41-302b-45c9-91b8-11d0f2cf6f43",
+    "objectID": "4a358cf2-2c29-4dfe-9a15-f2eb0444fe0b",
     "type": "lvl3",
     "url": "/docs/components/select#without-scroll-shadow",
     "hierarchy": {
@@ -6587,7 +6973,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "ddeebb05-48f1-4954-a90e-669851c934c2",
+    "objectID": "fc20549b-d61e-4148-aa42-84e748483406",
     "type": "lvl3",
     "url": "/docs/components/select#with-description",
     "hierarchy": {
@@ -6598,7 +6984,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "99cdfb7f-105f-46cf-99f2-68520719989b",
+    "objectID": "76a66328-d9ba-46d5-94b7-2f153bdd5f98",
     "type": "lvl3",
     "url": "/docs/components/select#with-error-message",
     "hierarchy": {
@@ -6609,7 +6995,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "595a2a38-27af-414b-b29b-b242c9d0adca",
+    "objectID": "d838c469-ab0f-4a08-a6d5-b6e95986f97d",
     "type": "lvl3",
     "url": "/docs/components/select#controlled",
     "hierarchy": {
@@ -6620,7 +7006,7 @@
   },
   {
     "content": "Controlling the open state",
-    "objectID": "72287d33-431e-4edc-b272-0149f02de871",
+    "objectID": "79bb7e3f-fe12-4063-b007-90a3c2810609",
     "type": "lvl3",
     "url": "/docs/components/select#controlling-the-open-state",
     "hierarchy": {
@@ -6631,7 +7017,7 @@
   },
   {
     "content": "Custom Items",
-    "objectID": "bce334e0-f04d-417a-b142-015a86d8afb4",
+    "objectID": "63fd41c4-fcfe-496f-8bbf-67f7bca21b0c",
     "type": "lvl3",
     "url": "/docs/components/select#custom-items",
     "hierarchy": {
@@ -6642,7 +7028,7 @@
   },
   {
     "content": "Custom Render Value",
-    "objectID": "4ab8edf8-1142-4ff9-ab9b-c8b38f9a5e7d",
+    "objectID": "12702a16-c70d-4aaf-a2b2-7eb4669b4138",
     "type": "lvl3",
     "url": "/docs/components/select#custom-render-value",
     "hierarchy": {
@@ -6653,7 +7039,7 @@
   },
   {
     "content": "Asynchronous Loading",
-    "objectID": "b91f42d6-1b21-43db-ab4a-786431cf6ef1",
+    "objectID": "40d767d7-6573-465b-8c31-47b0cf654a05",
     "type": "lvl3",
     "url": "/docs/components/select#asynchronous-loading",
     "hierarchy": {
@@ -6664,7 +7050,7 @@
   },
   {
     "content": "With Sections",
-    "objectID": "1e349d6f-6a3d-4c4b-9eb7-32f114c71a01",
+    "objectID": "acc2884c-5c8b-411a-b2d9-1aa376110b63",
     "type": "lvl3",
     "url": "/docs/components/select#with-sections",
     "hierarchy": {
@@ -6675,7 +7061,7 @@
   },
   {
     "content": "Custom Sections Style",
-    "objectID": "3f41be36-8a11-45ac-95ba-f66de51afcab",
+    "objectID": "6f264fc7-6444-4a68-ab7d-8da2957bc175",
     "type": "lvl3",
     "url": "/docs/components/select#custom-sections-style",
     "hierarchy": {
@@ -6686,7 +7072,7 @@
   },
   {
     "content": "Multiple Select Controlled",
-    "objectID": "f220c717-0acc-4717-88bb-7b5e6b35a958",
+    "objectID": "ea58523d-843e-4d2b-8f6c-8c7056e9b305",
     "type": "lvl3",
     "url": "/docs/components/select#multiple-select-controlled",
     "hierarchy": {
@@ -6697,7 +7083,7 @@
   },
   {
     "content": "Multiple With Chips",
-    "objectID": "73b43178-7a05-4fe8-b093-f8e1cfd0a14b",
+    "objectID": "05b0b3e5-58bb-4c34-aece-42ddf4e9f272",
     "type": "lvl3",
     "url": "/docs/components/select#multiple-with-chips",
     "hierarchy": {
@@ -6708,7 +7094,7 @@
   },
   {
     "content": "Customizing the select",
-    "objectID": "b0570b60-26d2-404c-9b65-6c4a508d4245",
+    "objectID": "05f8983f-17bb-4e88-b32e-3ba52fe5b84c",
     "type": "lvl3",
     "url": "/docs/components/select#customizing-the-select",
     "hierarchy": {
@@ -6719,42 +7105,42 @@
   },
   {
     "content": "Slots",
-    "objectID": "b24a13ae-619a-4b5b-a503-f0c251d50426",
+    "objectID": "48b4cc28-7100-406a-9b73-54ad132395ea",
     "type": "lvl2",
     "url": "/docs/components/select#slots",
     "hierarchy": { "lvl1": "Select", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "b5036f9f-46e0-4f60-bc0a-80f4a4732eba",
+    "objectID": "d12b8025-9397-49fd-bfd9-d447c06f9a1a",
     "type": "lvl2",
     "url": "/docs/components/select#data-attributes",
     "hierarchy": { "lvl1": "Select", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "7069a68c-4af0-4c6c-89b1-2719ee526080",
+    "objectID": "846e3eb4-6f96-4aec-8d2d-fe8c7bc1efb4",
     "type": "lvl2",
     "url": "/docs/components/select#accessibility",
     "hierarchy": { "lvl1": "Select", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "c7140990-b375-4bfd-8fc1-79ceabcb5dff",
+    "objectID": "07786736-e487-4586-8d36-0af9a18effec",
     "type": "lvl2",
     "url": "/docs/components/select#api",
     "hierarchy": { "lvl1": "Select", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Select Props",
-    "objectID": "afd77683-5012-411c-a6d9-a81d1ce0bf2f",
+    "objectID": "19fc0453-2f73-435b-a016-1d794790d226",
     "type": "lvl3",
     "url": "/docs/components/select#select-props",
     "hierarchy": { "lvl1": "Select", "lvl2": "API", "lvl3": "Select Props" }
   },
   {
     "content": "Select Events",
-    "objectID": "c1ee0904-3379-42d4-9d09-5973ccbb4777",
+    "objectID": "2594baf9-6666-4e06-8c42-7eab839e42f6",
     "type": "lvl3",
     "url": "/docs/components/select#select-events",
     "hierarchy": {
@@ -6765,7 +7151,7 @@
   },
   {
     "content": "SelectItem Props",
-    "objectID": "29319f8d-b2ef-4528-8c12-1f948238779a",
+    "objectID": "ed1234e9-d921-458e-a3aa-d0abb086f94f",
     "type": "lvl3",
     "url": "/docs/components/select#selectitem-props",
     "hierarchy": {
@@ -6776,7 +7162,7 @@
   },
   {
     "content": "SelectItem Events",
-    "objectID": "41952559-9c34-4728-8bc4-e35fbf5e8e64",
+    "objectID": "a0b17cd1-5c67-4cc2-8595-ed5c7c5eb0a1",
     "type": "lvl3",
     "url": "/docs/components/select#selectitem-events",
     "hierarchy": {
@@ -6787,7 +7173,7 @@
   },
   {
     "content": "SelectSection Props",
-    "objectID": "5de9e266-8efe-48d0-b1e7-ddfa89aac0a0",
+    "objectID": "9b2b1c35-60fe-4ffc-9244-3b4d346df11f",
     "type": "lvl3",
     "url": "/docs/components/select#selectsection-props",
     "hierarchy": {
@@ -6798,7 +7184,7 @@
   },
   {
     "content": "Types",
-    "objectID": "812e6951-b960-439f-8bed-efc4266f1d34",
+    "objectID": "c4b46acf-5aa7-4aff-ab90-c122887dff1c",
     "type": "lvl3",
     "url": "/docs/components/select#types",
     "hierarchy": {
@@ -6809,49 +7195,49 @@
   },
   {
     "content": "Render Value Function",
-    "objectID": "4ebd6928-d685-49ad-9895-2f63ea5f591c",
+    "objectID": "866cee9a-9e8f-47a0-b0c0-cd02f6b40ad5",
     "type": "lvl4",
     "url": "/docs/components/select#render-value-function",
     "hierarchy": { "lvl1": "Select", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Skeleton",
-    "objectID": "2caa6f4d-c368-40b2-b891-0be13e995fe5",
+    "objectID": "affc657d-aa82-428e-b05f-89f3e022679e",
     "type": "lvl1",
     "url": "/docs/components/skeleton",
     "hierarchy": { "lvl1": "Skeleton" }
   },
   {
     "content": "Installation",
-    "objectID": "13e74764-1828-41c4-b70f-05c6b0e0f45f",
+    "objectID": "2399d33b-caa3-4cdc-90d7-1681f00e0314",
     "type": "lvl2",
     "url": "/docs/components/skeleton#installation",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "398635ad-bc3b-4a58-b2cf-33c058f140a7",
+    "objectID": "1acbd58d-874c-4f2f-b3fe-15385338eb18",
     "type": "lvl2",
     "url": "/docs/components/skeleton#import",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "3fd3a776-b9dd-4049-bd8f-8c9dc3c74854",
+    "objectID": "618afbae-dc9c-41b9-a5b9-c77757553f20",
     "type": "lvl2",
     "url": "/docs/components/skeleton#usage",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Standalone",
-    "objectID": "048dd124-5beb-4670-8175-013db97f2271",
+    "objectID": "6207c36e-c933-4c4b-a7b0-6e583ef677e4",
     "type": "lvl3",
     "url": "/docs/components/skeleton#standalone",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Usage", "lvl3": "Standalone" }
   },
   {
     "content": "Loaded State",
-    "objectID": "dd6da424-7fd0-48b7-af00-96b070fffeb6",
+    "objectID": "59541b8f-61e0-4346-a954-c70bc199826c",
     "type": "lvl3",
     "url": "/docs/components/skeleton#loaded-state",
     "hierarchy": {
@@ -6862,91 +7248,91 @@
   },
   {
     "content": "Slots",
-    "objectID": "20aee778-918a-4759-9345-56b40718359f",
+    "objectID": "7465d266-c28b-4bc9-9876-fdf07287762a",
     "type": "lvl2",
     "url": "/docs/components/skeleton#slots",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "d84ace43-6755-4914-8f72-f4f0ebff8be2",
+    "objectID": "c34fa3ba-0662-417f-85a3-be2ef05d3c53",
     "type": "lvl2",
     "url": "/docs/components/skeleton#data-attributes",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "f59ca7c4-6dc4-447a-bd67-5daee2cda38b",
+    "objectID": "7e4cd714-f431-4e68-b989-aa436f1586c9",
     "type": "lvl2",
     "url": "/docs/components/skeleton#api",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Skeleton Props",
-    "objectID": "2fe62658-f403-4c20-a811-99a3a3df1fd2",
+    "objectID": "4abf84c9-ed8d-46cb-b7b9-6042f60556aa",
     "type": "lvl3",
     "url": "/docs/components/skeleton#skeleton-props",
     "hierarchy": { "lvl1": "Skeleton", "lvl2": "API", "lvl3": "Skeleton Props" }
   },
   {
     "content": "Slider",
-    "objectID": "735e9931-cee3-4283-8f13-a924f5246009",
+    "objectID": "6a364874-2eaa-4b02-b6a1-1a7ac81e86f2",
     "type": "lvl1",
     "url": "/docs/components/slider",
     "hierarchy": { "lvl1": "Slider" }
   },
   {
     "content": "Installation",
-    "objectID": "539757b9-b666-4092-a62d-4c584f5d1ad6",
+    "objectID": "41e580c7-9880-45aa-92b1-46db23075ffc",
     "type": "lvl2",
     "url": "/docs/components/slider#installation",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "f360b5b6-3994-42dc-96ee-0f70c97114ae",
+    "objectID": "22680f55-4507-4621-999c-595054d130ef",
     "type": "lvl2",
     "url": "/docs/components/slider#import",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "08da30f3-2080-476e-a8bf-909f949a3a93",
+    "objectID": "91d31a9f-d539-4355-bf4c-163bf9ebb959",
     "type": "lvl2",
     "url": "/docs/components/slider#usage",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "08b2ba2f-fc35-408a-a56c-dd0de9127f8b",
+    "objectID": "cc503334-5e0b-4425-b273-7f8aed21df11",
     "type": "lvl3",
     "url": "/docs/components/slider#disabled",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "7731d2a7-c1d9-4a90-8318-ce3f1daa8099",
+    "objectID": "6e077fbf-4adf-4526-a869-0eb47aec7eb1",
     "type": "lvl3",
     "url": "/docs/components/slider#sizes",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Radius",
-    "objectID": "8bebab13-de32-4386-89d0-19ca952d2bf1",
+    "objectID": "38caaeee-6c49-429d-991a-014e2b365373",
     "type": "lvl3",
     "url": "/docs/components/slider#radius",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Sizes", "lvl3": "Radius" }
   },
   {
     "content": "Colors",
-    "objectID": "287f7004-0d5a-4c8f-8ec6-6e4a2ed6858b",
+    "objectID": "a1c93891-8d33-4127-9f83-905609768cfe",
     "type": "lvl3",
     "url": "/docs/components/slider#colors",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Radius", "lvl3": "Colors" }
   },
   {
     "content": "Vertical Slider",
-    "objectID": "3f0c4151-0417-4456-88f5-87a2cb28afa5",
+    "objectID": "79565a1d-e5a3-4991-9a2b-ef28fbffeb08",
     "type": "lvl3",
     "url": "/docs/components/slider#vertical-slider",
     "hierarchy": {
@@ -6957,7 +7343,7 @@
   },
   {
     "content": "With Visible Steps",
-    "objectID": "54408376-0623-4ec2-8faa-222eb4c3244a",
+    "objectID": "fe95bf85-c987-43c0-86cd-7706548b168f",
     "type": "lvl3",
     "url": "/docs/components/slider#with-visible-steps",
     "hierarchy": {
@@ -6968,7 +7354,7 @@
   },
   {
     "content": "With Marks",
-    "objectID": "e654cff0-5e22-4e54-b0b4-6b3dae57d7d7",
+    "objectID": "d0108b7e-78f2-4c5d-afdf-c00e6d9f2902",
     "type": "lvl3",
     "url": "/docs/components/slider#with-marks",
     "hierarchy": {
@@ -6979,7 +7365,7 @@
   },
   {
     "content": "Range Slider",
-    "objectID": "3065a8a9-1ed1-45c5-8079-27d8dea4f4fc",
+    "objectID": "6b2a7550-a6f2-425b-b305-b57d4a4d3099",
     "type": "lvl3",
     "url": "/docs/components/slider#range-slider",
     "hierarchy": {
@@ -6990,7 +7376,7 @@
   },
   {
     "content": "Fill Offset",
-    "objectID": "86809b15-3fd5-42cb-96d3-d81ce0016562",
+    "objectID": "3f53fa47-d6b7-43b9-8f11-e0ab8182425c",
     "type": "lvl3",
     "url": "/docs/components/slider#fill-offset",
     "hierarchy": {
@@ -7001,7 +7387,7 @@
   },
   {
     "content": "With Tooltip",
-    "objectID": "2f920936-a843-4859-b89e-386adc1c978e",
+    "objectID": "0270d1f1-578a-4583-be49-8326cacf3879",
     "type": "lvl3",
     "url": "/docs/components/slider#with-tooltip",
     "hierarchy": {
@@ -7012,7 +7398,7 @@
   },
   {
     "content": "With Outline",
-    "objectID": "3b7e2d16-dfdf-4b46-9d73-0b3b638b1454",
+    "objectID": "697d7a3c-725a-45b7-951c-7bd9b9b693d1",
     "type": "lvl3",
     "url": "/docs/components/slider#with-outline",
     "hierarchy": {
@@ -7023,7 +7409,7 @@
   },
   {
     "content": "Start & End Content",
-    "objectID": "584ecc51-584b-44fd-8520-87d0cd8903a4",
+    "objectID": "c46374d9-7184-498c-9d14-c623fa2945f5",
     "type": "lvl3",
     "url": "/docs/components/slider#start--end-content",
     "hierarchy": {
@@ -7034,7 +7420,7 @@
   },
   {
     "content": "Value Formatting",
-    "objectID": "0d2e3fd8-bc5b-4829-a026-4214bce5cd8c",
+    "objectID": "8cfa0f20-8ea6-4c7e-98d6-a5f61b8028b4",
     "type": "lvl3",
     "url": "/docs/components/slider#value-formatting",
     "hierarchy": {
@@ -7045,7 +7431,7 @@
   },
   {
     "content": "Hiding the Value",
-    "objectID": "937d4f04-1846-4079-bf11-f57e61e00fb1",
+    "objectID": "998a70f3-0ee6-4348-844c-0a8fa418e4d0",
     "type": "lvl3",
     "url": "/docs/components/slider#hiding-the-value",
     "hierarchy": {
@@ -7056,7 +7442,7 @@
   },
   {
     "content": "Hiding the Thumbs",
-    "objectID": "c957de7a-7550-4089-a42c-717282749aa4",
+    "objectID": "d94d07c5-dbc1-4180-8c72-7a4a3bd569ec",
     "type": "lvl3",
     "url": "/docs/components/slider#hiding-the-thumbs",
     "hierarchy": {
@@ -7067,7 +7453,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "0e5df990-022c-4968-8706-02d46df08c1e",
+    "objectID": "5bf8cc3a-1845-452e-b213-98877f1d51d9",
     "type": "lvl3",
     "url": "/docs/components/slider#controlled",
     "hierarchy": {
@@ -7078,7 +7464,7 @@
   },
   {
     "content": "Controlled Range",
-    "objectID": "74bbf8fc-9351-4028-939e-cacff5a1ebe0",
+    "objectID": "dce14611-4535-49f0-9a03-793350abe4b2",
     "type": "lvl3",
     "url": "/docs/components/slider#controlled-range",
     "hierarchy": {
@@ -7089,7 +7475,7 @@
   },
   {
     "content": "Custom Thumb",
-    "objectID": "055a3f2b-720f-4b8e-b93f-345a12e5d956",
+    "objectID": "2c141dd2-707d-47d2-a740-ad56cf02dc92",
     "type": "lvl3",
     "url": "/docs/components/slider#custom-thumb",
     "hierarchy": {
@@ -7100,7 +7486,7 @@
   },
   {
     "content": "Custom Range Thumbs",
-    "objectID": "3ee56536-e99d-406c-92ef-732ac3030b28",
+    "objectID": "38457176-ff34-4eda-904e-eba8cad15e3d",
     "type": "lvl3",
     "url": "/docs/components/slider#custom-range-thumbs",
     "hierarchy": {
@@ -7111,7 +7497,7 @@
   },
   {
     "content": "Custom Label",
-    "objectID": "24ae56f3-3efd-428f-88ba-c002df3ea5ad",
+    "objectID": "37b5fc3b-1ed1-46e3-a3ef-b8570cd3380c",
     "type": "lvl3",
     "url": "/docs/components/slider#custom-label",
     "hierarchy": {
@@ -7122,7 +7508,7 @@
   },
   {
     "content": "Custom Value",
-    "objectID": "fa8b1383-4616-419b-9852-0d54bd39a30f",
+    "objectID": "04b4f645-1fca-4e5e-b712-25ded79a29c3",
     "type": "lvl3",
     "url": "/docs/components/slider#custom-value",
     "hierarchy": {
@@ -7133,7 +7519,7 @@
   },
   {
     "content": "Disabling Thumb Scale",
-    "objectID": "ec04bcec-9fbc-4496-94f7-13cec660497d",
+    "objectID": "552ad3d2-b184-4d87-a086-d316cef1a516",
     "type": "lvl3",
     "url": "/docs/components/slider#disabling-thumb-scale",
     "hierarchy": {
@@ -7144,49 +7530,49 @@
   },
   {
     "content": "Slots",
-    "objectID": "ead9ecc4-0d6a-41e0-8f9a-dece3449c38c",
+    "objectID": "3ce243ed-7c79-4bbf-adb5-a8ea6ff3102e",
     "type": "lvl2",
     "url": "/docs/components/slider#slots",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "d2220cc6-0c42-4e3e-bd82-04fe8f1c419e",
+    "objectID": "82d23db5-dee0-4293-8d1c-e60dc765fa96",
     "type": "lvl3",
     "url": "/docs/components/slider#custom-styles",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "a0ce58d4-ecd4-4a1b-b8bb-f66ea8a39596",
+    "objectID": "01f7d607-5084-4f3f-a3f9-d939504c6e51",
     "type": "lvl2",
     "url": "/docs/components/slider#data-attributes",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "4a2fae05-181e-4e8d-b9da-d4c8540f9ecc",
+    "objectID": "f76ce65b-8983-41b6-85c6-d3036479b8f3",
     "type": "lvl2",
     "url": "/docs/components/slider#accessibility",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "b3d5b4b4-7b01-4550-9ec6-37664cd78bda",
+    "objectID": "d56336f9-4242-4477-b0e2-cf323e58efbb",
     "type": "lvl2",
     "url": "/docs/components/slider#api",
     "hierarchy": { "lvl1": "Slider", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Slider Props",
-    "objectID": "a64f19f3-74bb-4f08-b4aa-235ee68e35f9",
+    "objectID": "5ca36966-29af-4ca3-a9a9-2f1e536a98bc",
     "type": "lvl3",
     "url": "/docs/components/slider#slider-props",
     "hierarchy": { "lvl1": "Slider", "lvl2": "API", "lvl3": "Slider Props" }
   },
   {
     "content": "Slider Functions",
-    "objectID": "73b9289d-93d7-4aa3-8529-93bb0aaa541c",
+    "objectID": "a1274343-59a5-4fa5-a54f-5500d3b0cfed",
     "type": "lvl3",
     "url": "/docs/components/slider#slider-functions",
     "hierarchy": {
@@ -7197,7 +7583,7 @@
   },
   {
     "content": "Slider Events",
-    "objectID": "00e3a15c-8e61-4f54-a0c4-66acc2f36528",
+    "objectID": "9c4adc42-6885-41bb-833a-38ee0a7e8600",
     "type": "lvl3",
     "url": "/docs/components/slider#slider-events",
     "hierarchy": {
@@ -7208,77 +7594,77 @@
   },
   {
     "content": "Types",
-    "objectID": "4c3187ab-92b1-43e2-9179-ea9cc454f108",
+    "objectID": "d234678b-7fa5-4fdf-9a9b-27587c6879c0",
     "type": "lvl3",
     "url": "/docs/components/slider#types",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Slider Events", "lvl3": "Types" }
   },
   {
     "content": "Slider Value",
-    "objectID": "4427a830-08b9-46e5-907f-da92ab356bf2",
+    "objectID": "72ba4a8c-3516-4d51-86e9-d8807b710c0b",
     "type": "lvl4",
     "url": "/docs/components/slider#slider-value",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Slider Step Marks",
-    "objectID": "6d8a132a-c100-4f0b-91fe-7cf737fcf1cf",
+    "objectID": "d51fac3e-8514-4754-9d95-1d051efea18b",
     "type": "lvl4",
     "url": "/docs/components/slider#slider-step-marks",
     "hierarchy": { "lvl1": "Slider", "lvl2": "Slider Value", "lvl3": null }
   },
   {
     "content": "Snippet",
-    "objectID": "dac683e2-3c3b-4d65-87b4-5ee32122ecbe",
+    "objectID": "887697ea-2ef1-42a1-bb37-5c3b61fbc122",
     "type": "lvl1",
     "url": "/docs/components/snippet",
     "hierarchy": { "lvl1": "Snippet" }
   },
   {
     "content": "Installation",
-    "objectID": "119664ef-0074-4400-8b0c-c7551ecad9b3",
+    "objectID": "403552e9-867b-4f79-a6b7-f3731e0346b4",
     "type": "lvl2",
     "url": "/docs/components/snippet#installation",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "a7c1a761-6023-4f9f-8117-dff183855e80",
+    "objectID": "f45b7eaf-4b7b-4ee5-a365-4aa3e93d98e8",
     "type": "lvl2",
     "url": "/docs/components/snippet#import",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "7158e21a-e4b1-4420-9697-a48400623acd",
+    "objectID": "876092dd-2698-48a9-bae8-31f76f3b1943",
     "type": "lvl2",
     "url": "/docs/components/snippet#usage",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "2fb82161-433e-4708-aa03-6d3597fcd94f",
+    "objectID": "fdc33268-a4a3-447c-a814-8f2dda180b20",
     "type": "lvl3",
     "url": "/docs/components/snippet#sizes",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "fc9f2fda-c760-44f5-abe4-1ed8ca391b36",
+    "objectID": "b5ac4e12-047f-498c-bdeb-0991686d4ce3",
     "type": "lvl3",
     "url": "/docs/components/snippet#colors",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "8d891111-bc60-4982-bf5a-f23a465485e4",
+    "objectID": "5c3d0a17-ea20-4fb1-ac43-3abf71f264d3",
     "type": "lvl3",
     "url": "/docs/components/snippet#variants",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "Custom Symbol",
-    "objectID": "753fd420-97fe-46a1-b300-d204bc1498fc",
+    "objectID": "f211f633-6665-4273-aee5-2e631bd42b30",
     "type": "lvl3",
     "url": "/docs/components/snippet#custom-symbol",
     "hierarchy": {
@@ -7289,7 +7675,7 @@
   },
   {
     "content": "Without Copy",
-    "objectID": "3eb18fe7-9a43-4d74-8a0a-f25852edb83b",
+    "objectID": "719e5185-91bc-4122-8669-2e0900e99fcc",
     "type": "lvl3",
     "url": "/docs/components/snippet#without-copy",
     "hierarchy": {
@@ -7300,7 +7686,7 @@
   },
   {
     "content": "Custom Tooltip",
-    "objectID": "6307e491-1c31-4ead-81a3-3fdaf1e1161a",
+    "objectID": "10b06a82-7630-4e85-b06c-fd3c5c0b4ade",
     "type": "lvl3",
     "url": "/docs/components/snippet#custom-tooltip",
     "hierarchy": {
@@ -7311,7 +7697,7 @@
   },
   {
     "content": "Multiline",
-    "objectID": "02a16042-ece8-44e7-99a7-633ff3718594",
+    "objectID": "5ddca694-9f61-40a0-a075-b7a1726dcf43",
     "type": "lvl3",
     "url": "/docs/components/snippet#multiline",
     "hierarchy": {
@@ -7322,7 +7708,7 @@
   },
   {
     "content": "Custom Icons",
-    "objectID": "6a22e244-567e-48a3-b3e0-2915de3cd100",
+    "objectID": "2e3b59c0-76a6-495a-b09c-50a3e5110069",
     "type": "lvl3",
     "url": "/docs/components/snippet#custom-icons",
     "hierarchy": {
@@ -7333,28 +7719,28 @@
   },
   {
     "content": "Slots",
-    "objectID": "8c47312b-ffee-4bc7-8640-50d53774f8dc",
+    "objectID": "e884df8e-ec73-4a0a-bb39-16bb855e71f2",
     "type": "lvl2",
     "url": "/docs/components/snippet#slots",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "f6782ab0-f3c6-4d0f-b423-e99834e196cc",
+    "objectID": "bb24591e-2761-487a-acb8-c134176caf95",
     "type": "lvl2",
     "url": "/docs/components/snippet#api",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Snippet Props",
-    "objectID": "6f44e456-09ef-4942-9a47-da4bc964245d",
+    "objectID": "4fc73282-0302-4ee9-b2f5-fb749de8258a",
     "type": "lvl3",
     "url": "/docs/components/snippet#snippet-props",
     "hierarchy": { "lvl1": "Snippet", "lvl2": "API", "lvl3": "Snippet Props" }
   },
   {
     "content": "Snippet Events",
-    "objectID": "65003c89-90e5-4ba1-8a15-1abbc546d04c",
+    "objectID": "298b1de0-32ca-49ab-b2ce-2481e654ef67",
     "type": "lvl3",
     "url": "/docs/components/snippet#snippet-events",
     "hierarchy": {
@@ -7365,105 +7751,105 @@
   },
   {
     "content": "Spacer",
-    "objectID": "b68cf98d-42fa-4481-9eb1-712e930e5b9f",
+    "objectID": "88616043-64aa-4ad6-affb-28eb610f07e5",
     "type": "lvl1",
     "url": "/docs/components/spacer",
     "hierarchy": { "lvl1": "Spacer" }
   },
   {
     "content": "Installation",
-    "objectID": "541e6499-2fad-412d-971d-457cb50bc29f",
+    "objectID": "916c649b-1762-438b-a5f0-9e9492df490e",
     "type": "lvl2",
     "url": "/docs/components/spacer#installation",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "7868b391-9c29-49b4-97f7-1aa9e47aaf13",
+    "objectID": "9780fa3a-686e-43ae-bb8f-d11071729499",
     "type": "lvl2",
     "url": "/docs/components/spacer#import",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "a35d6ac5-d82f-493f-83a6-d68357e548f0",
+    "objectID": "9e925b83-f718-436c-9b04-f3a6d18e492b",
     "type": "lvl2",
     "url": "/docs/components/spacer#usage",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "534f6f11-55ee-48dd-ab97-d4002092cba2",
+    "objectID": "8cb758aa-0e00-49e8-b491-e026b947cd89",
     "type": "lvl2",
     "url": "/docs/components/spacer#api",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Spacer Props",
-    "objectID": "0e8c2ab3-d790-45a4-bfb9-ce7a80194311",
+    "objectID": "70abd82e-2483-431a-b0ef-fa21981e5bf3",
     "type": "lvl3",
     "url": "/docs/components/spacer#spacer-props",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "API", "lvl3": "Spacer Props" }
   },
   {
     "content": "Spaces",
-    "objectID": "6e61c939-7856-4a53-ba22-9cc52c58ac27",
+    "objectID": "f3889b37-78b7-49ed-9a28-3eb80f767398",
     "type": "lvl3",
     "url": "/docs/components/spacer#spaces",
     "hierarchy": { "lvl1": "Spacer", "lvl2": "Spacer Props", "lvl3": "Spaces" }
   },
   {
     "content": "Spinner",
-    "objectID": "d9ed8731-fdb0-4d87-8f75-d4a4d2a32578",
+    "objectID": "d9b3c79c-205a-4d99-8107-915aa31a0191",
     "type": "lvl1",
     "url": "/docs/components/spinner",
     "hierarchy": { "lvl1": "Spinner" }
   },
   {
     "content": "Installation",
-    "objectID": "cbfae7b4-cf80-46da-bd6c-5884e9ec3f6f",
+    "objectID": "6e3fde1d-a0da-4605-98f7-11f5b4d0b4f5",
     "type": "lvl2",
     "url": "/docs/components/spinner#installation",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "0e11adc4-84e1-4731-9c81-fca5f5d1f69f",
+    "objectID": "9f40785d-05ad-4ab4-b720-322f1cbdcddc",
     "type": "lvl2",
     "url": "/docs/components/spinner#import",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "ec5e023f-bb00-43d6-afad-88fc8bfd0109",
+    "objectID": "2d01616d-3f8b-4c78-b493-80ec0e2cc717",
     "type": "lvl2",
     "url": "/docs/components/spinner#usage",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Sizes",
-    "objectID": "7af1ecf5-bac9-479d-a691-c3869218107f",
+    "objectID": "1c21075a-202c-4869-a0ab-bafbd27e88d4",
     "type": "lvl3",
     "url": "/docs/components/spinner#sizes",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Usage", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "2ea404a0-100d-4cd7-a20d-77728d821fab",
+    "objectID": "44ea0b28-78b1-4191-9002-bb9a37c15927",
     "type": "lvl3",
     "url": "/docs/components/spinner#colors",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "With Label",
-    "objectID": "ae7df134-7344-4701-8e40-0ce1857c3b85",
+    "objectID": "b9af3e54-ece8-44d9-a2a4-288ccfc6bfce",
     "type": "lvl3",
     "url": "/docs/components/spinner#with-label",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Colors", "lvl3": "With Label" }
   },
   {
     "content": "Label colors",
-    "objectID": "91b8e3c0-5675-4580-a8a0-6cb40dbb27bc",
+    "objectID": "4223927f-0e8b-452a-ab20-025e77c5efe8",
     "type": "lvl3",
     "url": "/docs/components/spinner#label-colors",
     "hierarchy": {
@@ -7474,21 +7860,21 @@
   },
   {
     "content": "Slots",
-    "objectID": "f564dcff-101e-410b-b1dc-f587c0f949b9",
+    "objectID": "a3433ec2-c82a-4418-a818-e963fa2d00e9",
     "type": "lvl2",
     "url": "/docs/components/spinner#slots",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "f8b87065-666e-45f6-aec0-ea44a3e02682",
+    "objectID": "29448e2e-be6b-4a26-9060-317614b515e0",
     "type": "lvl2",
     "url": "/docs/components/spinner#api",
     "hierarchy": { "lvl1": "Spinner", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Circular Progress Props",
-    "objectID": "b0dc7f97-e9fd-4c79-8942-3b96836c5509",
+    "objectID": "c6fde406-11dd-48d2-a38d-330234ed7ea4",
     "type": "lvl3",
     "url": "/docs/components/spinner#circular-progress-props",
     "hierarchy": {
@@ -7499,63 +7885,63 @@
   },
   {
     "content": "Switch",
-    "objectID": "bd6aa00b-459e-41c6-ae92-52a14d8952c1",
+    "objectID": "02c2eabb-d33d-4f72-9399-a558eccd2e60",
     "type": "lvl1",
     "url": "/docs/components/switch",
     "hierarchy": { "lvl1": "Switch" }
   },
   {
     "content": "Installation",
-    "objectID": "487e8d57-173d-4887-ae9f-2e4f305f54e0",
+    "objectID": "f40beeee-d64c-4317-be37-ef60a7853703",
     "type": "lvl2",
     "url": "/docs/components/switch#installation",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "40624e21-18b0-4258-85fc-736e1469b97b",
+    "objectID": "ded076cc-9bd9-4678-bb2b-f25025b9c5aa",
     "type": "lvl2",
     "url": "/docs/components/switch#import",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "79c4c27a-aa16-4a1c-94f5-428e5645a14b",
+    "objectID": "93ab9b6d-afe6-4e4b-9ff8-790dad7b90e3",
     "type": "lvl2",
     "url": "/docs/components/switch#usage",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "With Label",
-    "objectID": "051d34e0-a24a-48bb-8b3f-c4f6c3b490c8",
+    "objectID": "82cc12a5-e5cd-44a6-88ed-32fa5c7655f2",
     "type": "lvl3",
     "url": "/docs/components/switch#with-label",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Usage", "lvl3": "With Label" }
   },
   {
     "content": "Disabled",
-    "objectID": "6ac3e626-85f3-45d7-9149-2a6d1c6b8835",
+    "objectID": "f7007ffb-f403-4b9f-add1-32890a945aa3",
     "type": "lvl3",
     "url": "/docs/components/switch#disabled",
     "hierarchy": { "lvl1": "Switch", "lvl2": "With Label", "lvl3": "Disabled" }
   },
   {
     "content": "Sizes",
-    "objectID": "045d8a4c-80a4-4eab-bf8c-f6cab49db471",
+    "objectID": "e5c9081a-ac7f-450a-a9fb-998851d06ff4",
     "type": "lvl3",
     "url": "/docs/components/switch#sizes",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Disabled", "lvl3": "Sizes" }
   },
   {
     "content": "Colors",
-    "objectID": "68a285d8-3f6a-427b-8bed-1afa40fae081",
+    "objectID": "d82e93e6-710c-4342-a998-70b2aa726c9d",
     "type": "lvl3",
     "url": "/docs/components/switch#colors",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Sizes", "lvl3": "Colors" }
   },
   {
     "content": "With Thumb Icon",
-    "objectID": "522e550e-23b8-4e8e-b0cb-016f9b9c8df6",
+    "objectID": "ba45beb4-47b5-4197-96e5-77293f7742fc",
     "type": "lvl3",
     "url": "/docs/components/switch#with-thumb-icon",
     "hierarchy": {
@@ -7566,7 +7952,7 @@
   },
   {
     "content": "With Icons",
-    "objectID": "18565276-269a-43b7-a4b4-f92a5c2fceeb",
+    "objectID": "2e601ec5-9233-4bbe-a3b0-762a7f594ff2",
     "type": "lvl3",
     "url": "/docs/components/switch#with-icons",
     "hierarchy": {
@@ -7577,7 +7963,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "1caa6d71-7b6c-4c39-8eb2-a4aa79096f47",
+    "objectID": "83f04c97-8c30-4e70-a115-55d86f497eb8",
     "type": "lvl3",
     "url": "/docs/components/switch#controlled",
     "hierarchy": {
@@ -7588,21 +7974,21 @@
   },
   {
     "content": "Slots",
-    "objectID": "37aa7968-3328-4c05-bac7-2835a9cd775b",
+    "objectID": "720badc0-4e9c-47cb-99be-eebc4e31278d",
     "type": "lvl2",
     "url": "/docs/components/switch#slots",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "f911d789-4396-4c9a-8bcd-3fb5abfab699",
+    "objectID": "0d8454d8-175e-47ba-ae25-50cba022790d",
     "type": "lvl3",
     "url": "/docs/components/switch#custom-styles",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Custom Implementation",
-    "objectID": "c512e8c2-9059-40bd-b52b-7db4c4555d97",
+    "objectID": "3203a7b4-c59c-46d4-b56d-2098e01bf181",
     "type": "lvl3",
     "url": "/docs/components/switch#custom-implementation",
     "hierarchy": {
@@ -7613,35 +7999,35 @@
   },
   {
     "content": "Data Attributes",
-    "objectID": "eb4a76c8-d719-4ab1-a5e8-8fe6c916beab",
+    "objectID": "78c0dcea-a15d-47cf-9232-969b521b0ca0",
     "type": "lvl2",
     "url": "/docs/components/switch#data-attributes",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "7f600ce2-9cd7-4b69-afa8-5b5bedd6eafe",
+    "objectID": "5319e69d-5cbc-401f-9271-6dccbcf2b432",
     "type": "lvl2",
     "url": "/docs/components/switch#accessibility",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "b2faba5b-2331-4a63-ac81-13a2a23d26e8",
+    "objectID": "64423697-1a6d-487b-9fa6-685ad992b5f9",
     "type": "lvl2",
     "url": "/docs/components/switch#api",
     "hierarchy": { "lvl1": "Switch", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Switch Props",
-    "objectID": "15b2b060-cdf9-4acd-aff2-dce9b6c03736",
+    "objectID": "b2c9bb99-b212-413d-8836-27b1dec89cc5",
     "type": "lvl3",
     "url": "/docs/components/switch#switch-props",
     "hierarchy": { "lvl1": "Switch", "lvl2": "API", "lvl3": "Switch Props" }
   },
   {
     "content": "Switch Events",
-    "objectID": "45e585a9-13e6-43f8-a570-c8fb52355075",
+    "objectID": "babb7fff-bb2d-488c-a4c1-4b4460aa4972",
     "type": "lvl3",
     "url": "/docs/components/switch#switch-events",
     "hierarchy": {
@@ -7652,63 +8038,63 @@
   },
   {
     "content": "Types",
-    "objectID": "ac5d9af6-7780-4201-80b4-7c0ec06b7046",
+    "objectID": "416a7709-d467-42ec-841d-d9db09b9305a",
     "type": "lvl3",
     "url": "/docs/components/switch#types",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Switch Events", "lvl3": "Types" }
   },
   {
     "content": "Switch Icon Props",
-    "objectID": "f399c458-ea88-4ff8-a73b-851e59425f09",
+    "objectID": "c2147cab-022b-4939-bcef-fe22beb81005",
     "type": "lvl4",
     "url": "/docs/components/switch#switch-icon-props",
     "hierarchy": { "lvl1": "Switch", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "Table",
-    "objectID": "677dfb1a-0e6f-4f37-b893-6bee2283114d",
+    "objectID": "d617a8c7-d8aa-4a2a-80e8-ae90e7c16d34",
     "type": "lvl1",
     "url": "/docs/components/table",
     "hierarchy": { "lvl1": "Table" }
   },
   {
     "content": "Installation",
-    "objectID": "8bad65b6-f4ae-4eee-acbf-36c5c719f6bb",
+    "objectID": "d4954afc-6f78-4c7e-a8b1-da331d9b85d7",
     "type": "lvl2",
     "url": "/docs/components/table#installation",
     "hierarchy": { "lvl1": "Table", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "3cde986c-5c31-40e2-b20a-928819d89b52",
+    "objectID": "b79dce04-f646-41ca-bb27-39af0cc0cb5b",
     "type": "lvl2",
     "url": "/docs/components/table#import",
     "hierarchy": { "lvl1": "Table", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "03d108cd-c800-4878-b2dc-4656d9512127",
+    "objectID": "684e828a-8d0a-4307-b91a-ee965e7490d7",
     "type": "lvl2",
     "url": "/docs/components/table#usage",
     "hierarchy": { "lvl1": "Table", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Dynamic",
-    "objectID": "b673db16-07f6-4aff-b883-5e21df9ef331",
+    "objectID": "282ee175-1032-484f-aba9-a146f15f29ee",
     "type": "lvl3",
     "url": "/docs/components/table#dynamic",
     "hierarchy": { "lvl1": "Table", "lvl2": "Usage", "lvl3": "Dynamic" }
   },
   {
     "content": "Why not array map?",
-    "objectID": "d3a928c4-c333-4451-ac10-14f41a5c35b4",
+    "objectID": "8332e41c-8cb7-4755-9adf-756b86efbdd5",
     "type": "lvl4",
     "url": "/docs/components/table#why-not-array-map",
     "hierarchy": { "lvl1": "Table", "lvl2": "Dynamic", "lvl3": null }
   },
   {
     "content": "Empty State",
-    "objectID": "177477da-5332-459c-af59-667e00bbd16e",
+    "objectID": "49a147c3-5640-4c26-b5d8-b71cc227858f",
     "type": "lvl3",
     "url": "/docs/components/table#empty-state",
     "hierarchy": {
@@ -7719,7 +8105,7 @@
   },
   {
     "content": "Without Header",
-    "objectID": "dc3bc215-732d-44df-a135-4558f04b4c52",
+    "objectID": "d10da8f9-5551-4595-a95c-3dfd65cf4b2f",
     "type": "lvl3",
     "url": "/docs/components/table#without-header",
     "hierarchy": {
@@ -7730,7 +8116,7 @@
   },
   {
     "content": "Without Wrapper",
-    "objectID": "dc4d2b18-6b1e-44af-8aa9-549b593d1752",
+    "objectID": "9cfb3205-8d4a-402f-88e7-72dd0ba22fb5",
     "type": "lvl3",
     "url": "/docs/components/table#without-wrapper",
     "hierarchy": {
@@ -7741,7 +8127,7 @@
   },
   {
     "content": "Custom Cells",
-    "objectID": "7b399c2d-ffe3-4944-9ac5-ad975f9efd6a",
+    "objectID": "e0af538a-ccd8-447e-ad76-cf273b4b7a16",
     "type": "lvl3",
     "url": "/docs/components/table#custom-cells",
     "hierarchy": {
@@ -7752,7 +8138,7 @@
   },
   {
     "content": "Striped Rows",
-    "objectID": "ab4efe61-7320-4bcd-8853-ae33b50d93fb",
+    "objectID": "904241a0-7b4e-4711-b219-dc3e74184da3",
     "type": "lvl3",
     "url": "/docs/components/table#striped-rows",
     "hierarchy": {
@@ -7763,7 +8149,7 @@
   },
   {
     "content": "Single Row Selection",
-    "objectID": "54a470f4-0e16-4fa9-b41c-82ad577ff101",
+    "objectID": "1b05eac6-69c1-4893-8696-5232e45b4fc8",
     "type": "lvl3",
     "url": "/docs/components/table#single-row-selection",
     "hierarchy": {
@@ -7774,7 +8160,7 @@
   },
   {
     "content": "Multiple Row Selection",
-    "objectID": "e6671cb9-6e49-44bb-be87-c25a029e22ad",
+    "objectID": "0c9d9f24-a952-45ce-ad48-53ddccd48c11",
     "type": "lvl3",
     "url": "/docs/components/table#multiple-row-selection",
     "hierarchy": {
@@ -7785,7 +8171,7 @@
   },
   {
     "content": "Disallow Empty Selection",
-    "objectID": "67e59cb2-291b-491b-a369-ef5643045e41",
+    "objectID": "596a9b9f-86ec-4d62-8cf7-b40bde4c54d0",
     "type": "lvl3",
     "url": "/docs/components/table#disallow-empty-selection",
     "hierarchy": {
@@ -7796,7 +8182,7 @@
   },
   {
     "content": "Controlled Selection",
-    "objectID": "4600bd88-4f77-44ce-876f-9bbe8855aa71",
+    "objectID": "115e5d91-f91f-487b-b99d-56860f4c8abb",
     "type": "lvl3",
     "url": "/docs/components/table#controlled-selection",
     "hierarchy": {
@@ -7807,7 +8193,7 @@
   },
   {
     "content": "Disabled Rows",
-    "objectID": "0142e36a-4690-480e-8e0f-132418823fef",
+    "objectID": "124d5f39-a302-4e34-85c6-90981deaa9f3",
     "type": "lvl3",
     "url": "/docs/components/table#disabled-rows",
     "hierarchy": {
@@ -7818,7 +8204,7 @@
   },
   {
     "content": "Selection Behavior",
-    "objectID": "a2195029-27ab-4854-a8ab-e8d605b89c48",
+    "objectID": "a4fbff8f-a3c0-4b47-9437-7df4ab71dd07",
     "type": "lvl3",
     "url": "/docs/components/table#selection-behavior",
     "hierarchy": {
@@ -7829,7 +8215,7 @@
   },
   {
     "content": "Rows Actions",
-    "objectID": "c897d762-3644-4014-8832-320240dd3ffd",
+    "objectID": "738b142a-e793-4ec4-b54d-f0f6f52fccaf",
     "type": "lvl3",
     "url": "/docs/components/table#rows-actions",
     "hierarchy": {
@@ -7840,7 +8226,7 @@
   },
   {
     "content": "Sorting Rows",
-    "objectID": "b444bdd5-a456-4349-8a47-af63a72f8169",
+    "objectID": "c04986bc-3421-40b5-a4e1-23f8c48e0f93",
     "type": "lvl3",
     "url": "/docs/components/table#sorting-rows",
     "hierarchy": {
@@ -7851,7 +8237,7 @@
   },
   {
     "content": "Loading more data",
-    "objectID": "39d0605e-120c-4b0b-832c-d03cddd10565",
+    "objectID": "66036962-b04f-4e34-bf4d-8563df76a270",
     "type": "lvl3",
     "url": "/docs/components/table#loading-more-data",
     "hierarchy": {
@@ -7862,7 +8248,7 @@
   },
   {
     "content": "Paginated Table",
-    "objectID": "cc39617e-53cc-4659-bdfa-697c2ab2a875",
+    "objectID": "c70272d6-27da-4cdb-88e5-66a60bfd6075",
     "type": "lvl3",
     "url": "/docs/components/table#paginated-table",
     "hierarchy": {
@@ -7873,7 +8259,7 @@
   },
   {
     "content": "Async Pagination",
-    "objectID": "f3a14d39-7037-44c4-8c2c-600027be8250",
+    "objectID": "6c142771-bc78-43fa-a548-a5f1f54eeb8c",
     "type": "lvl3",
     "url": "/docs/components/table#async-pagination",
     "hierarchy": {
@@ -7884,7 +8270,7 @@
   },
   {
     "content": "Infinite Pagination",
-    "objectID": "4c4bb5b3-82c9-4586-8111-d9adcb36a9d0",
+    "objectID": "dc8876f3-815b-4fea-8a7c-72dbdd276b4b",
     "type": "lvl3",
     "url": "/docs/components/table#infinite-pagination",
     "hierarchy": {
@@ -7895,7 +8281,7 @@
   },
   {
     "content": "Use Case Example",
-    "objectID": "7b42af99-f367-4040-934a-f948c0063d03",
+    "objectID": "bfa49cf3-2f66-4378-9720-ad52b1a3a100",
     "type": "lvl3",
     "url": "/docs/components/table#use-case-example",
     "hierarchy": {
@@ -7906,49 +8292,49 @@
   },
   {
     "content": "Slots",
-    "objectID": "9851726a-4e10-44e7-9b7f-8399ee8114b2",
+    "objectID": "120ad767-fd3b-4c89-a718-6863de8f1a67",
     "type": "lvl2",
     "url": "/docs/components/table#slots",
     "hierarchy": { "lvl1": "Table", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "4a13e875-17b4-4142-a742-495a4d5dfd69",
+    "objectID": "b1a283b3-e151-42ba-8d8d-609cfcf82fab",
     "type": "lvl3",
     "url": "/docs/components/table#custom-styles",
     "hierarchy": { "lvl1": "Table", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "e21dd8cf-e10f-4a4c-ac33-3db9cd72f3c9",
+    "objectID": "531d6c6b-28cc-4c44-8430-9565a83299a7",
     "type": "lvl2",
     "url": "/docs/components/table#data-attributes",
     "hierarchy": { "lvl1": "Table", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "e2194e60-548a-424f-a8f2-0d8613dc3464",
+    "objectID": "bc73f161-0767-4535-b311-802531e6cda2",
     "type": "lvl2",
     "url": "/docs/components/table#accessibility",
     "hierarchy": { "lvl1": "Table", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "95dcdf77-01e8-4ff4-ae4d-3a66bdc32d97",
+    "objectID": "99be8066-74e8-4b02-a8f1-e0eea1f19485",
     "type": "lvl2",
     "url": "/docs/components/table#api",
     "hierarchy": { "lvl1": "Table", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Table Props",
-    "objectID": "c9ea83db-9497-43ee-9dff-e51219610df9",
+    "objectID": "d2744e17-389a-463f-b4dc-f12246c250cd",
     "type": "lvl3",
     "url": "/docs/components/table#table-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "API", "lvl3": "Table Props" }
   },
   {
     "content": "Table Events",
-    "objectID": "8f2286b1-7088-4876-b323-a234a14da54d",
+    "objectID": "e87be40c-eaac-4873-abe8-41bfdf32d08e",
     "type": "lvl3",
     "url": "/docs/components/table#table-events",
     "hierarchy": {
@@ -7959,28 +8345,28 @@
   },
   {
     "content": "TableHeader Props",
-    "objectID": "4f4c6374-ec27-4b61-830f-38dfe947018c",
+    "objectID": "c6cfbf75-2fae-4bb5-99a6-db25c563857e",
     "type": "lvl4",
     "url": "/docs/components/table#tableheader-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "Table Events", "lvl3": null }
   },
   {
     "content": "TableColumn Props",
-    "objectID": "d6abb840-0417-49f0-aa68-a07f38858b46",
+    "objectID": "915792e8-96d8-43b7-94f4-6836f158f3ce",
     "type": "lvl4",
     "url": "/docs/components/table#tablecolumn-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "TableHeader Props", "lvl3": null }
   },
   {
     "content": "TableBody Props",
-    "objectID": "1741203b-6c5c-4491-85df-9263e5666a63",
+    "objectID": "3722734d-9a34-455a-9ca5-60492303457e",
     "type": "lvl4",
     "url": "/docs/components/table#tablebody-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "TableColumn Props", "lvl3": null }
   },
   {
     "content": "TableBody Events",
-    "objectID": "1f68f3e1-91f7-4a5d-ad1c-7967cc450427",
+    "objectID": "87fb303a-2df5-4966-aeb2-67fd46a902f4",
     "type": "lvl3",
     "url": "/docs/components/table#tablebody-events",
     "hierarchy": {
@@ -7991,21 +8377,21 @@
   },
   {
     "content": "TableRow Props",
-    "objectID": "bbc75998-7beb-4474-80ed-24d166fb5cb3",
+    "objectID": "5970ddf7-bf58-4367-b760-957579deedfb",
     "type": "lvl4",
     "url": "/docs/components/table#tablerow-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "TableBody Events", "lvl3": null }
   },
   {
     "content": "TableCell Props",
-    "objectID": "ebe48aef-c409-4cec-9744-20f7dacb8fe2",
+    "objectID": "b34ecb7b-9eeb-4d72-a815-4e5b82dbbffb",
     "type": "lvl4",
     "url": "/docs/components/table#tablecell-props",
     "hierarchy": { "lvl1": "Table", "lvl2": "TableRow Props", "lvl3": null }
   },
   {
     "content": "Table types",
-    "objectID": "7cfe40a2-18c5-41a4-9f3c-29258312dff6",
+    "objectID": "45ba8533-64c7-4b32-8c92-12295b21ea5a",
     "type": "lvl3",
     "url": "/docs/components/table#table-types",
     "hierarchy": {
@@ -8016,266 +8402,280 @@
   },
   {
     "content": "Sort descriptor",
-    "objectID": "affe518e-b52f-4e7e-a007-8053200ccaa7",
+    "objectID": "eb67b873-1647-4110-969d-8f630991b349",
     "type": "lvl4",
     "url": "/docs/components/table#sort-descriptor",
     "hierarchy": { "lvl1": "Table", "lvl2": "Table types", "lvl3": null }
   },
   {
     "content": "Selection",
-    "objectID": "db8bee89-4aeb-4e4d-8782-22676f41503f",
+    "objectID": "035eb48f-8f5c-448b-9a09-1cc6a61d8d34",
     "type": "lvl4",
     "url": "/docs/components/table#selection",
     "hierarchy": { "lvl1": "Table", "lvl2": "Sort descriptor", "lvl3": null }
   },
   {
     "content": "Loading state",
-    "objectID": "ddac624c-d2bb-4998-8028-dc9ab05ec3fb",
+    "objectID": "a344c24e-e34f-4bd2-b890-f9288bfb1622",
     "type": "lvl4",
     "url": "/docs/components/table#loading-state",
     "hierarchy": { "lvl1": "Table", "lvl2": "Selection", "lvl3": null }
   },
   {
     "content": "Tabs",
-    "objectID": "c7831eef-186b-45ac-990e-8d88ddb31898",
+    "objectID": "860b7f04-df6c-465f-af8c-6ba65b3e408d",
     "type": "lvl1",
     "url": "/docs/components/tabs",
     "hierarchy": { "lvl1": "Tabs" }
   },
   {
     "content": "Installation",
-    "objectID": "fe090659-f85d-4769-8979-858c05bb2663",
+    "objectID": "0bd19cf9-86c7-4a24-80e5-fffa0bde8ff6",
     "type": "lvl2",
     "url": "/docs/components/tabs#installation",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "6bf070f6-2199-4fd2-950c-638b89d4b825",
+    "objectID": "17f942b3-4c68-4b07-afa7-44b0d88b0354",
     "type": "lvl2",
     "url": "/docs/components/tabs#import",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "b9236751-c727-458b-b800-027f78401a77",
+    "objectID": "a5a93e5b-6410-4084-b2df-e25e6bfc9600",
     "type": "lvl2",
     "url": "/docs/components/tabs#usage",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Dynamic",
-    "objectID": "e90831e5-e014-4cb7-b7e6-d27d5ff4c2e7",
+    "objectID": "953f7878-fdd8-4764-87fd-6f6aab3e695c",
     "type": "lvl3",
     "url": "/docs/components/tabs#dynamic",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Usage", "lvl3": "Dynamic" }
   },
   {
     "content": "Disabled",
-    "objectID": "f31956b3-1c59-496d-86c6-4553288ac62f",
+    "objectID": "356752b2-0e80-4ce8-a30f-14c5db9a50d1",
     "type": "lvl3",
     "url": "/docs/components/tabs#disabled",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Dynamic", "lvl3": "Disabled" }
   },
   {
     "content": "Disabled Item",
-    "objectID": "ad593f4f-0941-45f6-9332-679c1da51db1",
+    "objectID": "3d27d22e-5751-4cfd-b822-f3986677e6b1",
     "type": "lvl3",
     "url": "/docs/components/tabs#disabled-item",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Disabled", "lvl3": "Disabled Item" }
   },
   {
     "content": "Sizes",
-    "objectID": "2b1f142a-7782-45b3-8749-cc5ca6f2ac64",
+    "objectID": "ea6e0d54-0a3b-47f6-b794-6e7a0c7fe7cb",
     "type": "lvl3",
     "url": "/docs/components/tabs#sizes",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Disabled Item", "lvl3": "Sizes" }
   },
   {
     "content": "Radius",
-    "objectID": "136c74c5-b00c-4d45-8072-539ec535fcca",
+    "objectID": "87c3122b-46af-4444-889f-aac0abb4b32f",
     "type": "lvl3",
     "url": "/docs/components/tabs#radius",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Sizes", "lvl3": "Radius" }
   },
   {
     "content": "Colors",
-    "objectID": "39c4838c-da9b-40da-85ae-380d75ed9646",
+    "objectID": "f2ca335f-c72a-4a7d-b745-7a963c4011c1",
     "type": "lvl3",
     "url": "/docs/components/tabs#colors",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Radius", "lvl3": "Colors" }
   },
   {
     "content": "Variants",
-    "objectID": "e7b2abf9-2903-4f9e-9bc6-9cb193ed5494",
+    "objectID": "47fafe56-3b1c-45ac-aefa-aea67d7809be",
     "type": "lvl3",
     "url": "/docs/components/tabs#variants",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Colors", "lvl3": "Variants" }
   },
   {
     "content": "With Icons",
-    "objectID": "adb8ccaf-bfaf-44ed-9a27-6c1f83ebc5d4",
+    "objectID": "a68a559e-49ff-42ef-9a2f-762ae9f50a7a",
     "type": "lvl3",
     "url": "/docs/components/tabs#with-icons",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Variants", "lvl3": "With Icons" }
   },
   {
     "content": "Controlled",
-    "objectID": "5c176c2f-2cd4-42b9-9c7a-a5841e868678",
+    "objectID": "25f2074c-141a-4c26-8de3-3fc57c45d6a8",
     "type": "lvl3",
     "url": "/docs/components/tabs#controlled",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "With Icons", "lvl3": "Controlled" }
   },
+  {
+    "content": "Placement",
+    "objectID": "1aaff114-6624-4643-86f7-b2b6b0e2bb8d",
+    "type": "lvl3",
+    "url": "/docs/components/tabs#placement",
+    "hierarchy": { "lvl1": "Tabs", "lvl2": "Controlled", "lvl3": "Placement" }
+  },
+  {
+    "content": "Vertical",
+    "objectID": "11ba1ae8-58e4-43d0-9937-454922b7336d",
+    "type": "lvl3",
+    "url": "/docs/components/tabs#vertical",
+    "hierarchy": { "lvl1": "Tabs", "lvl2": "Placement", "lvl3": "Vertical" }
+  },
   {
     "content": "Links",
-    "objectID": "b18bbc1d-b487-4ecd-a57c-a6387f661537",
+    "objectID": "e4372cf4-7844-41e3-9ed0-6cba1a39d9c8",
     "type": "lvl3",
     "url": "/docs/components/tabs#links",
-    "hierarchy": { "lvl1": "Tabs", "lvl2": "Controlled", "lvl3": "Links" }
+    "hierarchy": { "lvl1": "Tabs", "lvl2": "Vertical", "lvl3": "Links" }
   },
   {
     "content": "Next.js",
-    "objectID": "4b15c58a-426f-4e7e-8ef4-811fb57f6cd8",
+    "objectID": "739fd4c2-5c5f-4c05-9b3e-7efe75c261da",
     "type": "lvl4",
     "url": "/docs/components/tabs#nextjs",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Links", "lvl3": null }
   },
   {
     "content": "React Router",
-    "objectID": "3221f6d3-b72c-4fe1-ae5e-126fe2e8dac3",
+    "objectID": "3832c287-12d6-4c00-a33c-5e8ff179efde",
     "type": "lvl4",
     "url": "/docs/components/tabs#react-router",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Next.js", "lvl3": null }
   },
   {
     "content": "With Form",
-    "objectID": "c54993e5-d773-4b9d-9fb3-c79d63ab9110",
+    "objectID": "ce7b8970-fc18-4cf1-a31b-b4546e15e350",
     "type": "lvl3",
     "url": "/docs/components/tabs#with-form",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "React Router", "lvl3": "With Form" }
   },
   {
     "content": "Slots",
-    "objectID": "ec16fc3a-e678-44eb-8dc9-53f97dca362e",
+    "objectID": "f0a7ccb2-5af5-4ba7-a5c1-cfa20f5a9a24",
     "type": "lvl2",
     "url": "/docs/components/tabs#slots",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "e2c0efa0-42c6-42af-b392-ea64837abe7d",
+    "objectID": "3e9e2ea4-230a-407b-922d-4e88905d4f1d",
     "type": "lvl3",
     "url": "/docs/components/tabs#custom-styles",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "a99edbbf-5091-41cc-875f-86c57109ef27",
+    "objectID": "2f669896-bd9b-4388-ad4c-586676823c12",
     "type": "lvl2",
     "url": "/docs/components/tabs#data-attributes",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "3353c418-e0e3-4ce8-8cf0-904645302e71",
+    "objectID": "550c3720-f0d1-42af-8b21-77ff39dc8188",
     "type": "lvl2",
     "url": "/docs/components/tabs#accessibility",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "b01a3abf-4c66-46b7-ac62-d628aedaacee",
+    "objectID": "4c49e743-57fa-4ad5-b95c-3c0d63fedbf1",
     "type": "lvl2",
     "url": "/docs/components/tabs#api",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Tabs Props",
-    "objectID": "ec96a70b-a562-41c8-97bc-6d6ef502594a",
+    "objectID": "e09e3449-281e-4abb-812e-dc3670960fc1",
     "type": "lvl3",
     "url": "/docs/components/tabs#tabs-props",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "API", "lvl3": "Tabs Props" }
   },
   {
     "content": "Tabs Events",
-    "objectID": "86963df3-dab4-4558-9d14-0845a3f69229",
+    "objectID": "2bdf431b-7734-45eb-8ec4-d3caa32558c6",
     "type": "lvl3",
     "url": "/docs/components/tabs#tabs-events",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Tabs Props", "lvl3": "Tabs Events" }
   },
   {
     "content": "Tab Props",
-    "objectID": "7c42e43d-1e8f-4ea2-9ce8-14abd2dd3db8",
+    "objectID": "374a0830-84c0-4978-bf3f-b928d785acee",
     "type": "lvl3",
     "url": "/docs/components/tabs#tab-props",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Tabs Events", "lvl3": "Tab Props" }
   },
   {
     "content": "Motion Props",
-    "objectID": "706541d9-6975-48e9-a506-11f45c339fa7",
+    "objectID": "9e4423f6-4d1e-4814-9f63-f2ea51688d77",
     "type": "lvl4",
     "url": "/docs/components/tabs#motion-props",
     "hierarchy": { "lvl1": "Tabs", "lvl2": "Tab Props", "lvl3": null }
   },
   {
     "content": "Textarea",
-    "objectID": "98a4dacf-06de-4ba9-946d-9db57e07bf6c",
+    "objectID": "e7ec6456-70ab-4391-b240-287aadfe3399",
     "type": "lvl1",
     "url": "/docs/components/textarea",
     "hierarchy": { "lvl1": "Textarea" }
   },
   {
     "content": "Installation",
-    "objectID": "8130f00f-108e-4d04-9fb2-cdc483ee736d",
+    "objectID": "8765e21e-6621-49d9-8f2c-39792130159f",
     "type": "lvl2",
     "url": "/docs/components/textarea#installation",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "44164e8c-cc40-4379-9e00-3c62ac125941",
+    "objectID": "60436ffc-0188-4c1a-9304-aaed56fd9daf",
     "type": "lvl2",
     "url": "/docs/components/textarea#import",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "8b281b25-9c89-4a49-a91e-d33cb15229ae",
+    "objectID": "9843d7dc-5330-41e9-aed3-6bdf0706db9c",
     "type": "lvl2",
     "url": "/docs/components/textarea#usage",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Disabled",
-    "objectID": "3b20655a-322d-4f98-bd0d-33c6cd635d3f",
+    "objectID": "75a51a8d-104b-47c3-8f0a-0f110a615f2b",
     "type": "lvl3",
     "url": "/docs/components/textarea#disabled",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Usage", "lvl3": "Disabled" }
   },
   {
     "content": "Read Only",
-    "objectID": "63613fd7-0b60-414e-9c9b-f456aee5b030",
+    "objectID": "11f70925-b1b2-4166-b018-a90103812498",
     "type": "lvl3",
     "url": "/docs/components/textarea#read-only",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Disabled", "lvl3": "Read Only" }
   },
   {
     "content": "Required",
-    "objectID": "93ef8dc4-80d0-405c-9a45-e77c615f3994",
+    "objectID": "87f6ae91-3243-413e-b31b-56c9fca05ac2",
     "type": "lvl3",
     "url": "/docs/components/textarea#required",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Read Only", "lvl3": "Required" }
   },
   {
     "content": "Autosize",
-    "objectID": "e08a472a-a781-49e7-a3f1-4ba95c790df2",
+    "objectID": "75cdde9c-2b54-4a04-9592-7ef9dcb00d82",
     "type": "lvl3",
     "url": "/docs/components/textarea#autosize",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Required", "lvl3": "Autosize" }
   },
   {
     "content": "Without Autosize",
-    "objectID": "b08664ec-8cc0-421a-8f1c-7cc3fd47e229",
+    "objectID": "da28e34a-bacc-4418-afe5-7be05fd49392",
     "type": "lvl3",
     "url": "/docs/components/textarea#without-autosize",
     "hierarchy": {
@@ -8286,7 +8686,7 @@
   },
   {
     "content": "Variants",
-    "objectID": "45aa9ecf-5e04-4004-980f-dc7d4ea6bab9",
+    "objectID": "31097251-3a1d-4170-ac19-0bd916e70901",
     "type": "lvl3",
     "url": "/docs/components/textarea#variants",
     "hierarchy": {
@@ -8297,7 +8697,7 @@
   },
   {
     "content": "With Error Message",
-    "objectID": "d04cbd67-524a-4ae1-8b00-76216a4282f5",
+    "objectID": "ce06ccf4-0c39-400e-9327-8ad20f0a72a9",
     "type": "lvl3",
     "url": "/docs/components/textarea#with-error-message",
     "hierarchy": {
@@ -8308,7 +8708,7 @@
   },
   {
     "content": "Description",
-    "objectID": "1601b27a-9182-4cf7-ad64-0ec9f5bb6f00",
+    "objectID": "457f2ee5-3f97-4805-a8e0-555051125088",
     "type": "lvl3",
     "url": "/docs/components/textarea#description",
     "hierarchy": {
@@ -8319,7 +8719,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "a8770db9-7854-4506-89bc-030840c3243f",
+    "objectID": "7c6b3a52-2dbb-4553-8c8a-5e19175fd9ed",
     "type": "lvl3",
     "url": "/docs/components/textarea#controlled",
     "hierarchy": {
@@ -8330,42 +8730,42 @@
   },
   {
     "content": "Slots",
-    "objectID": "213fc14f-5286-4c47-8b72-a3c92388a61a",
+    "objectID": "0aa22d7a-f552-47a7-8d0b-840c12b134a3",
     "type": "lvl2",
     "url": "/docs/components/textarea#slots",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "3283ce2d-9197-4f5a-96dc-940833b87dc3",
+    "objectID": "e76aa3a7-6d75-43e5-b77e-02f085657528",
     "type": "lvl2",
     "url": "/docs/components/textarea#data-attributes",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "c4e97734-414b-4579-b085-ee45d79bc284",
+    "objectID": "2f7dc213-8666-4fac-a22b-cc4668f699e6",
     "type": "lvl2",
     "url": "/docs/components/textarea#accessibility",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "726ef6f0-f48a-45b6-9aaf-88ba219e3ef4",
+    "objectID": "544d0a39-50ba-40af-a991-02182f018d9f",
     "type": "lvl2",
     "url": "/docs/components/textarea#api",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Textarea Props",
-    "objectID": "ca19fbb8-dd98-435d-acfe-a08946d5e801",
+    "objectID": "9885be32-decd-421a-b214-5d6610e5d7a8",
     "type": "lvl3",
     "url": "/docs/components/textarea#textarea-props",
     "hierarchy": { "lvl1": "Textarea", "lvl2": "API", "lvl3": "Textarea Props" }
   },
   {
     "content": "Input Events",
-    "objectID": "3fc1cc36-f43e-4aaf-b265-6d28c720c1c4",
+    "objectID": "0b7579b3-1971-45e5-bcec-7691951cc713",
     "type": "lvl3",
     "url": "/docs/components/textarea#input-events",
     "hierarchy": {
@@ -8376,42 +8776,42 @@
   },
   {
     "content": "Time Input",
-    "objectID": "9be0ccb0-0cab-40a5-8b74-703635ca1782",
+    "objectID": "16a82176-c8c8-4527-b305-65d9d1556dd1",
     "type": "lvl1",
     "url": "/docs/components/time-input",
     "hierarchy": { "lvl1": "Time Input" }
   },
   {
     "content": "Installation",
-    "objectID": "4cc65423-714b-4978-ab48-fff8e754a33c",
+    "objectID": "aa5e4699-d12b-4967-87f0-46025d70ede1",
     "type": "lvl2",
     "url": "/docs/components/time-input#installation",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "16d1f2e8-0e24-4643-a54c-5bce405a9d74",
+    "objectID": "0932cc99-d139-4e5e-b5e5-ae80728c120a",
     "type": "lvl2",
     "url": "/docs/components/time-input#import",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "d1d11cf4-04c3-483f-9bae-0c8c43b5cd7c",
+    "objectID": "37d6c0f8-4a2c-4b09-96e8-966e5635fa53",
     "type": "lvl2",
     "url": "/docs/components/time-input#usage",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Required",
-    "objectID": "7aa62f52-182c-42a5-bf9b-d351f1723ef0",
+    "objectID": "531a2764-24de-4f29-a1e6-29c7629c9686",
     "type": "lvl3",
     "url": "/docs/components/time-input#required",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Usage", "lvl3": "Required" }
   },
   {
     "content": "Disabled",
-    "objectID": "eb0361f8-d030-423c-9d75-3e48862bd0cb",
+    "objectID": "7c70f743-e966-444d-98f2-a1c9c86f41c1",
     "type": "lvl3",
     "url": "/docs/components/time-input#disabled",
     "hierarchy": {
@@ -8422,7 +8822,7 @@
   },
   {
     "content": "Read Only",
-    "objectID": "f0e56a21-aa8b-4361-bd51-76692ab7d9d8",
+    "objectID": "f9a5607b-e737-4a57-8e86-620a37112d23",
     "type": "lvl3",
     "url": "/docs/components/time-input#read-only",
     "hierarchy": {
@@ -8433,7 +8833,7 @@
   },
   {
     "content": "Without Label",
-    "objectID": "33cbbb13-90b5-4b84-8f6e-2afa807674ce",
+    "objectID": "7818bf5b-1aef-46d8-b3b7-a12618805587",
     "type": "lvl3",
     "url": "/docs/components/time-input#without-label",
     "hierarchy": {
@@ -8444,7 +8844,7 @@
   },
   {
     "content": "With Description",
-    "objectID": "2c8a8854-b5a5-4518-aad1-264a003d0741",
+    "objectID": "c66fc5cd-1d75-47ff-9d70-5bdc02ad62d9",
     "type": "lvl3",
     "url": "/docs/components/time-input#with-description",
     "hierarchy": {
@@ -8453,20 +8853,31 @@
       "lvl3": "With Description"
     }
   },
+  {
+    "content": "With Error Message",
+    "objectID": "8a84ce21-c7af-4dc3-ac52-496ddf257c13",
+    "type": "lvl3",
+    "url": "/docs/components/time-input#with-error-message",
+    "hierarchy": {
+      "lvl1": "Time Input",
+      "lvl2": "With Description",
+      "lvl3": "With Error Message"
+    }
+  },
   {
     "content": "Label Placement",
-    "objectID": "1a210d76-67ca-4fb1-a749-4a95ca145638",
+    "objectID": "428d66c0-7e97-453d-b1cd-2a49c27ef7d1",
     "type": "lvl3",
     "url": "/docs/components/time-input#label-placement",
     "hierarchy": {
       "lvl1": "Time Input",
-      "lvl2": "With Description",
+      "lvl2": "With Error Message",
       "lvl3": "Label Placement"
     }
   },
   {
     "content": "Start Content",
-    "objectID": "284537ce-8693-44c5-828c-0d769be7faaf",
+    "objectID": "a6453157-fbf6-497b-aa04-6b02a3e8961e",
     "type": "lvl3",
     "url": "/docs/components/time-input#start-content",
     "hierarchy": {
@@ -8477,7 +8888,7 @@
   },
   {
     "content": "End Content",
-    "objectID": "d1ca1a35-6110-44c6-ab47-7c034cfaf2e2",
+    "objectID": "b097afa1-3107-43da-8021-31146b515cc4",
     "type": "lvl3",
     "url": "/docs/components/time-input#end-content",
     "hierarchy": {
@@ -8488,7 +8899,7 @@
   },
   {
     "content": "Controlled",
-    "objectID": "950c584f-02f3-4fc0-815a-087448dbc4cc",
+    "objectID": "7bfe90d1-7fd2-4e63-8860-ef6908fead84",
     "type": "lvl3",
     "url": "/docs/components/time-input#controlled",
     "hierarchy": {
@@ -8499,7 +8910,7 @@
   },
   {
     "content": "Time Zones",
-    "objectID": "85994211-8b05-46e7-b026-5065496065d0",
+    "objectID": "0d11c9c1-cf86-411c-9e13-9f9746a59f4f",
     "type": "lvl3",
     "url": "/docs/components/time-input#time-zones",
     "hierarchy": {
@@ -8510,7 +8921,7 @@
   },
   {
     "content": "Granularity",
-    "objectID": "863cfdad-072d-4de3-a2d6-c96e8ee16c94",
+    "objectID": "7356d09b-eb54-4f3e-b488-38c825c0ca43",
     "type": "lvl3",
     "url": "/docs/components/time-input#granularity",
     "hierarchy": {
@@ -8521,7 +8932,7 @@
   },
   {
     "content": "Min Time Value",
-    "objectID": "57dea82e-3511-4f8a-9b6d-1a632ecfdd07",
+    "objectID": "b14fc557-a0b4-4d30-a1e0-9259a89fcef8",
     "type": "lvl3",
     "url": "/docs/components/time-input#min-time-value",
     "hierarchy": {
@@ -8532,7 +8943,7 @@
   },
   {
     "content": "Max Time Value",
-    "objectID": "45cb5ac5-2b10-46ea-ac9e-916531880511",
+    "objectID": "cac41a17-2c93-4b1a-80c8-771ea4294434",
     "type": "lvl3",
     "url": "/docs/components/time-input#max-time-value",
     "hierarchy": {
@@ -8543,7 +8954,7 @@
   },
   {
     "content": "Placeholder Value",
-    "objectID": "958a2d63-62c6-4763-b142-c43284b719a3",
+    "objectID": "eb2ff665-039a-47c4-9e32-819f70d64390",
     "type": "lvl3",
     "url": "/docs/components/time-input#placeholder-value",
     "hierarchy": {
@@ -8554,7 +8965,7 @@
   },
   {
     "content": "Hide Time Zone",
-    "objectID": "d3d64481-0fd0-4184-bfce-7884f22efd7a",
+    "objectID": "e00233d0-2fa9-4296-ac9a-3f231a95821b",
     "type": "lvl3",
     "url": "/docs/components/time-input#hide-time-zone",
     "hierarchy": {
@@ -8565,7 +8976,7 @@
   },
   {
     "content": "Hour Cycle",
-    "objectID": "7342c456-71db-43c2-852d-c19c32e08bb5",
+    "objectID": "e6c21d8f-295b-4cf8-810f-7f22f9db22a2",
     "type": "lvl3",
     "url": "/docs/components/time-input#hour-cycle",
     "hierarchy": {
@@ -8576,14 +8987,14 @@
   },
   {
     "content": "Slots",
-    "objectID": "9bd422c4-7d31-461a-9b35-c83b4d3f877b",
+    "objectID": "3af98b34-4052-420c-888a-d7927ea37667",
     "type": "lvl2",
     "url": "/docs/components/time-input#slots",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "b3b8a3fa-f7e9-451b-bbc8-e98d17340f88",
+    "objectID": "d0f1801b-8c10-4bcb-83d6-4d468d125226",
     "type": "lvl2",
     "url": "/docs/components/time-input#data-attributes",
     "hierarchy": {
@@ -8594,21 +9005,21 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "7daccbce-b1e9-4356-b839-efcd1b025c6d",
+    "objectID": "27041b29-2850-4879-849b-174b1561dd7d",
     "type": "lvl2",
     "url": "/docs/components/time-input#accessibility",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "ff12fd5b-839e-4495-b720-84d66f033991",
+    "objectID": "37f9619b-f4cc-4f65-bac0-1733f3ddba46",
     "type": "lvl2",
     "url": "/docs/components/time-input#api",
     "hierarchy": { "lvl1": "Time Input", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "TimeInput Props",
-    "objectID": "4bedb2a6-3a39-4ab0-8534-0575eeffed01",
+    "objectID": "cef8a9e2-3b1e-4169-8fd1-d122a123fb4b",
     "type": "lvl3",
     "url": "/docs/components/time-input#timeinput-props",
     "hierarchy": {
@@ -8619,7 +9030,7 @@
   },
   {
     "content": "TimeInput Events",
-    "objectID": "ad1d9a5b-2541-45ca-81c8-49640b2f042c",
+    "objectID": "f3806268-10e7-42ec-93ce-9c1f9e056eae",
     "type": "lvl3",
     "url": "/docs/components/time-input#timeinput-events",
     "hierarchy": {
@@ -8630,70 +9041,70 @@
   },
   {
     "content": "Tooltip",
-    "objectID": "499d0bf5-039a-4a59-8ae3-00f06abfe79f",
+    "objectID": "2748f201-9ccf-4220-a29d-f10d12fd464e",
     "type": "lvl1",
     "url": "/docs/components/tooltip",
     "hierarchy": { "lvl1": "Tooltip" }
   },
   {
     "content": "Installation",
-    "objectID": "b67d408c-6736-440a-ab37-f320299d2eab",
+    "objectID": "d82d32de-9af5-46a2-8251-1e696b51576f",
     "type": "lvl2",
     "url": "/docs/components/tooltip#installation",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "c518c678-b176-4447-a2ff-3c8c516348a4",
+    "objectID": "c95d0804-d714-4f6b-8b84-c53e65b9fc94",
     "type": "lvl2",
     "url": "/docs/components/tooltip#import",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "d780e922-8291-4d2c-9e9e-d89bffbdda6d",
+    "objectID": "37bbdbff-5dac-498f-ad6e-2be85547da0b",
     "type": "lvl2",
     "url": "/docs/components/tooltip#usage",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "With Arrow",
-    "objectID": "99eb1012-9963-49c0-a2a0-f479689ac481",
+    "objectID": "b3299960-6986-4f97-87d1-0792c1610073",
     "type": "lvl3",
     "url": "/docs/components/tooltip#with-arrow",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Usage", "lvl3": "With Arrow" }
   },
   {
     "content": "Colors",
-    "objectID": "f9e90f62-a9ea-4ff8-a336-725a850de94a",
+    "objectID": "ea43d20a-1852-410b-86de-c7735bb797a9",
     "type": "lvl3",
     "url": "/docs/components/tooltip#colors",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "With Arrow", "lvl3": "Colors" }
   },
   {
     "content": "Placements",
-    "objectID": "13bd8478-048f-4ee9-8ad0-491f32f64aec",
+    "objectID": "8f9aa929-bb1e-4e1a-b55d-9a74bcaa4c26",
     "type": "lvl3",
     "url": "/docs/components/tooltip#placements",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Colors", "lvl3": "Placements" }
   },
   {
     "content": "Offset",
-    "objectID": "c6021482-b1f8-4b6b-84f1-5dcd1eb60b3f",
+    "objectID": "55004c2e-025a-4b43-8244-379f524a5a9e",
     "type": "lvl3",
     "url": "/docs/components/tooltip#offset",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Placements", "lvl3": "Offset" }
   },
   {
     "content": "Controlled",
-    "objectID": "a2102014-2f0a-4d9f-8e92-5c570a6ae1dd",
+    "objectID": "34e6f80d-b41f-44ad-9253-66028a325a41",
     "type": "lvl3",
     "url": "/docs/components/tooltip#controlled",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Offset", "lvl3": "Controlled" }
   },
   {
     "content": "With Delay",
-    "objectID": "4144f99b-2dd1-400f-bd94-3ef9090aa3ca",
+    "objectID": "f160a195-4ad9-4ae6-914c-0dc17ccc0345",
     "type": "lvl3",
     "url": "/docs/components/tooltip#with-delay",
     "hierarchy": {
@@ -8704,7 +9115,7 @@
   },
   {
     "content": "Custom Content",
-    "objectID": "668f13ab-677e-45c4-930f-442e376e9238",
+    "objectID": "b8e985cd-c379-4903-a478-0e6abdbd3789",
     "type": "lvl3",
     "url": "/docs/components/tooltip#custom-content",
     "hierarchy": {
@@ -8715,7 +9126,7 @@
   },
   {
     "content": "Custom Motion",
-    "objectID": "db834566-cd7c-4545-97e7-75a77f541e1d",
+    "objectID": "3341bcea-afdf-4e8d-aab2-58b61f70770b",
     "type": "lvl3",
     "url": "/docs/components/tooltip#custom-motion",
     "hierarchy": {
@@ -8726,49 +9137,49 @@
   },
   {
     "content": "Slots",
-    "objectID": "064d5ab7-f30c-4a08-a273-497c6625bded",
+    "objectID": "294ecc2e-3a9e-405e-b2c1-be8bb023ca1e",
     "type": "lvl2",
     "url": "/docs/components/tooltip#slots",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Custom Styles",
-    "objectID": "9a865fda-e4e4-4b4e-89b6-ecb6979ad415",
+    "objectID": "1067ebe1-2de3-43af-8c2e-046bc067d842",
     "type": "lvl3",
     "url": "/docs/components/tooltip#custom-styles",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Slots", "lvl3": "Custom Styles" }
   },
   {
     "content": "Data Attributes",
-    "objectID": "e6092030-ea83-4ce1-b775-e746308a7346",
+    "objectID": "e253457d-6f90-4e9d-9575-9e5a0cfb1e24",
     "type": "lvl2",
     "url": "/docs/components/tooltip#data-attributes",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "Accessibility",
-    "objectID": "5da6ac8b-4f90-45fd-8aa4-6a039cefa358",
+    "objectID": "e9503464-2ebd-441f-a8ba-31e9323faa90",
     "type": "lvl2",
     "url": "/docs/components/tooltip#accessibility",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Accessibility", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "4250a9b3-0edb-4ec3-86fb-d611657e0579",
+    "objectID": "cd130cff-85a0-4ebb-b7d2-ebc12a5086a3",
     "type": "lvl2",
     "url": "/docs/components/tooltip#api",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "Tooltip Props",
-    "objectID": "997f1021-447e-4d0c-8323-a104efe20b68",
+    "objectID": "376dca4b-62d5-4931-8a1b-15c3886ed518",
     "type": "lvl3",
     "url": "/docs/components/tooltip#tooltip-props",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "API", "lvl3": "Tooltip Props" }
   },
   {
     "content": "Tooltip Events",
-    "objectID": "a11f598f-8f83-4f1c-85be-36962223c7bc",
+    "objectID": "f51521a7-a59d-4859-8b32-101d75584f9d",
     "type": "lvl3",
     "url": "/docs/components/tooltip#tooltip-events",
     "hierarchy": {
@@ -8779,7 +9190,7 @@
   },
   {
     "content": "Tooltip types",
-    "objectID": "cca125e8-376d-44e9-bd74-507dab0cc4ac",
+    "objectID": "74521fbc-01e1-4b43-af3a-bd2bde56a028",
     "type": "lvl3",
     "url": "/docs/components/tooltip#tooltip-types",
     "hierarchy": {
@@ -8790,14 +9201,14 @@
   },
   {
     "content": "Tooltip Placement",
-    "objectID": "599e2fde-d937-4f50-a54c-4fc038467e48",
+    "objectID": "61783be2-6a40-4d5e-b239-74688b2c8b69",
     "type": "lvl4",
     "url": "/docs/components/tooltip#tooltip-placement",
     "hierarchy": { "lvl1": "Tooltip", "lvl2": "Tooltip types", "lvl3": null }
   },
   {
     "content": "Motion Props",
-    "objectID": "e76e8877-2532-491d-91be-c19b53027516",
+    "objectID": "1c7d91e8-8595-45f9-bc3b-203b2d0f6a2f",
     "type": "lvl4",
     "url": "/docs/components/tooltip#motion-props",
     "hierarchy": {
@@ -8808,84 +9219,84 @@
   },
   {
     "content": "User",
-    "objectID": "13f95675-4fae-4d92-ab3a-904972996c11",
+    "objectID": "dc7ff42a-06ab-4c52-b197-25315f72fa8f",
     "type": "lvl1",
     "url": "/docs/components/user",
     "hierarchy": { "lvl1": "User" }
   },
   {
     "content": "Installation",
-    "objectID": "92344799-34ef-47ed-9102-492395be81f6",
+    "objectID": "a2ae9518-ca57-45b3-8866-1adc11f136ab",
     "type": "lvl2",
     "url": "/docs/components/user#installation",
     "hierarchy": { "lvl1": "User", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Import",
-    "objectID": "6aa47e64-ac07-4ae1-b158-71d640fc5179",
+    "objectID": "dab75b57-6a3a-45a2-82eb-a1bf30bfea5c",
     "type": "lvl2",
     "url": "/docs/components/user#import",
     "hierarchy": { "lvl1": "User", "lvl2": "Import", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "117b9726-927e-49e7-b67b-15cc9348dd9e",
+    "objectID": "5384f41f-eece-4e7c-a44d-9a2baea98adc",
     "type": "lvl2",
     "url": "/docs/components/user#usage",
     "hierarchy": { "lvl1": "User", "lvl2": "Usage", "lvl3": null }
   },
   {
     "content": "Link Description",
-    "objectID": "b9a43dd4-05db-4f70-a2fb-09e1fcc6c957",
+    "objectID": "9fb0ef2e-3688-43f6-abec-13bbf77bd69e",
     "type": "lvl3",
     "url": "/docs/components/user#link-description",
     "hierarchy": { "lvl1": "User", "lvl2": "Usage", "lvl3": "Link Description" }
   },
   {
     "content": "Slots",
-    "objectID": "7f665614-0353-46e2-a8d8-bc426518a497",
+    "objectID": "9e395f2f-0282-4718-999a-36fd9633d77f",
     "type": "lvl2",
     "url": "/docs/components/user#slots",
     "hierarchy": { "lvl1": "User", "lvl2": "Slots", "lvl3": null }
   },
   {
     "content": "Data Attributes",
-    "objectID": "1e710d5b-455c-421e-a8e7-f2f495168239",
+    "objectID": "b6d591a1-1643-49de-a925-4963308ec304",
     "type": "lvl2",
     "url": "/docs/components/user#data-attributes",
     "hierarchy": { "lvl1": "User", "lvl2": "Data Attributes", "lvl3": null }
   },
   {
     "content": "API",
-    "objectID": "b9cc8114-782b-492b-926b-00fe9b60a813",
+    "objectID": "f8464365-9163-4480-840c-3e118f083bac",
     "type": "lvl2",
     "url": "/docs/components/user#api",
     "hierarchy": { "lvl1": "User", "lvl2": "API", "lvl3": null }
   },
   {
     "content": "User Props",
-    "objectID": "9f6a5f46-f438-4526-8e59-6cda1b23ddf5",
+    "objectID": "dcec19cf-9f04-45c4-a42a-203363d8a45e",
     "type": "lvl3",
     "url": "/docs/components/user#user-props",
     "hierarchy": { "lvl1": "User", "lvl2": "API", "lvl3": "User Props" }
   },
   {
     "content": "Colors",
-    "objectID": "6aee69dd-7924-4329-957d-072a6fc6d8de",
+    "objectID": "dc5f7af3-1547-412d-a58b-3acd408f841e",
     "type": "lvl1",
     "url": "/docs/customization/colors",
     "hierarchy": { "lvl1": "Colors" }
   },
   {
     "content": "Default Colors",
-    "objectID": "1f3b99a4-9c27-4e3d-abf9-6bfb42590fd5",
+    "objectID": "585546a0-cb53-4cf9-b48b-f65cc9f203a9",
     "type": "lvl2",
     "url": "/docs/customization/colors#default-colors",
     "hierarchy": { "lvl1": "Colors", "lvl2": "Default Colors", "lvl3": null }
   },
   {
     "content": "Common Colors",
-    "objectID": "cb7b78ee-6ff2-4807-83eb-d8406e68c409",
+    "objectID": "75d21340-203a-4713-920c-c63a6d29b4b4",
     "type": "lvl3",
     "url": "/docs/customization/colors#common-colors",
     "hierarchy": {
@@ -8896,7 +9307,7 @@
   },
   {
     "content": "Semantic Colors",
-    "objectID": "5941b37b-4bc4-49ac-a49c-66a642c5be92",
+    "objectID": "377a6ee4-2086-458e-b728-3c0b3420050c",
     "type": "lvl3",
     "url": "/docs/customization/colors#semantic-colors",
     "hierarchy": {
@@ -8907,7 +9318,7 @@
   },
   {
     "content": "Using Semantic Colors",
-    "objectID": "2e9d8080-91b0-44c3-bc54-45963c893ee8",
+    "objectID": "9b8b74f9-6424-4902-b267-d905dfda1a2d",
     "type": "lvl3",
     "url": "/docs/customization/colors#using-semantic-colors",
     "hierarchy": {
@@ -8918,7 +9329,7 @@
   },
   {
     "content": "Javascript Variables",
-    "objectID": "d19bee01-91e1-49fe-9458-bbde92d0e483",
+    "objectID": "809b0cb6-0759-4e62-bfe0-c9cc12906e33",
     "type": "lvl3",
     "url": "/docs/customization/colors#javascript-variables",
     "hierarchy": {
@@ -8929,7 +9340,7 @@
   },
   {
     "content": "CSS Variables",
-    "objectID": "7cdaad4b-dcc6-48a4-a96f-eb4119208837",
+    "objectID": "e6651647-1784-45e5-a171-836ff7e709bf",
     "type": "lvl3",
     "url": "/docs/customization/colors#css-variables",
     "hierarchy": {
@@ -8940,14 +9351,14 @@
   },
   {
     "content": "Create theme",
-    "objectID": "2b640ba3-b0f3-40a8-bdf4-da50811c303d",
+    "objectID": "d1ae4c9e-58b6-4b8e-b5b0-8645905426af",
     "type": "lvl1",
     "url": "/docs/customization/create-theme",
     "hierarchy": { "lvl1": "Create theme" }
   },
   {
     "content": "Add the new theme to the plugin",
-    "objectID": "12ce54f5-71b4-440d-a7fb-bf7d0cc1f17e",
+    "objectID": "305c84f8-c88f-4f1a-931d-31ff408d4fba",
     "type": "lvl3",
     "url": "/docs/customization/create-theme#add-the-new-theme-to-the-plugin",
     "hierarchy": {
@@ -8958,7 +9369,7 @@
   },
   {
     "content": "Apply the new theme",
-    "objectID": "ea6e813f-17f3-4b98-8dc9-39640fd9607b",
+    "objectID": "e660664c-92ac-4b66-9573-ae3be22ba215",
     "type": "lvl3",
     "url": "/docs/customization/create-theme#apply-the-new-theme",
     "hierarchy": {
@@ -8969,7 +9380,7 @@
   },
   {
     "content": "Use the new theme",
-    "objectID": "959c9332-e116-4bff-83d4-8784a7128aab",
+    "objectID": "08c35d43-a4b6-4897-b80b-ab9292271592",
     "type": "lvl3",
     "url": "/docs/customization/create-theme#use-the-new-theme",
     "hierarchy": {
@@ -8980,14 +9391,14 @@
   },
   {
     "content": "Custom Variants",
-    "objectID": "e322422c-fb43-4b5f-a288-1d7e2a96e88a",
+    "objectID": "ce7f8aae-f463-4b4b-944a-d4d7648fa4f5",
     "type": "lvl1",
     "url": "/docs/customization/custom-variants",
     "hierarchy": { "lvl1": "Custom Variants" }
   },
   {
     "content": "Creating new variants for non-slots components",
-    "objectID": "363e5591-ec99-45f2-b630-07a86b4ed65d",
+    "objectID": "3f6141ac-5900-43b7-bd51-408466bb68f8",
     "type": "lvl2",
     "url": "/docs/customization/custom-variants#creating-new-variants-for-non-slots-components",
     "hierarchy": {
@@ -8998,7 +9409,7 @@
   },
   {
     "content": "Extend the original component variants",
-    "objectID": "cc75a155-9e69-4965-b7d4-61ab8b8b4eb8",
+    "objectID": "ee99c484-98a2-43e0-812d-e45f371ae077",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#extend-the-original-component-variants",
     "hierarchy": {
@@ -9009,7 +9420,7 @@
   },
   {
     "content": "Use your custom component in your application",
-    "objectID": "92e4eb3b-377d-482b-94a6-80e6cd8a2232",
+    "objectID": "d1dda4b1-b79e-4900-af36-f26c3a8970d2",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#use-your-custom-component-in-your-application",
     "hierarchy": {
@@ -9020,7 +9431,7 @@
   },
   {
     "content": "Creating new variants for slots components",
-    "objectID": "e776fba9-0025-40b7-acbe-12fabc48b30b",
+    "objectID": "4eb4623e-6a8f-4987-ab43-0caea4b8e019",
     "type": "lvl2",
     "url": "/docs/customization/custom-variants#creating-new-variants-for-slots-components",
     "hierarchy": {
@@ -9031,7 +9442,7 @@
   },
   {
     "content": "Extend the original component variants",
-    "objectID": "fee47f3c-8a82-4062-9acc-76d3081e26df",
+    "objectID": "ad230367-c387-47dc-b66a-6801f0c9febc",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#extend-the-original-component-variants-1",
     "hierarchy": {
@@ -9042,7 +9453,7 @@
   },
   {
     "content": "Use your custom component in your application",
-    "objectID": "20a9cc4b-5451-40f5-974e-40d997d1d97c",
+    "objectID": "caa6588e-369a-4424-baad-fb8bf23b9b9d",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#use-your-custom-component-in-your-application-1",
     "hierarchy": {
@@ -9053,7 +9464,7 @@
   },
   {
     "content": "Types",
-    "objectID": "a2af75e0-0304-4880-b345-1f672df72191",
+    "objectID": "892a8159-c015-40e0-8645-d0b5c6b38173",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#types",
     "hierarchy": {
@@ -9064,7 +9475,7 @@
   },
   {
     "content": "Main Function",
-    "objectID": "3e8ac366-ce36-4e0c-9354-6b7f44f8263f",
+    "objectID": "205aebab-0b16-4bc0-952e-ec7ddbdcda61",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#main-function",
     "hierarchy": {
@@ -9075,7 +9486,7 @@
   },
   {
     "content": "Options",
-    "objectID": "43aa0bf2-e173-44ee-bf4c-e81d68be347c",
+    "objectID": "6db009d3-a417-4805-b647-c237a3c1041c",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#options",
     "hierarchy": {
@@ -9086,7 +9497,7 @@
   },
   {
     "content": "Config",
-    "objectID": "3f6595c4-0b7e-4b63-8222-eca4c2fb488c",
+    "objectID": "363d42cb-231d-406d-a3fe-f0f57cde88c1",
     "type": "lvl3",
     "url": "/docs/customization/custom-variants#config",
     "hierarchy": {
@@ -9097,14 +9508,14 @@
   },
   {
     "content": "Customize theme",
-    "objectID": "4937fee8-a3e1-4a6f-bd5c-6c37e4f86fa1",
+    "objectID": "94a01752-ab64-43e9-b002-b10c932d07e6",
     "type": "lvl1",
     "url": "/docs/customization/customize-theme",
     "hierarchy": { "lvl1": "Customize theme" }
   },
   {
     "content": "Customizing Layout",
-    "objectID": "ce60283a-93bb-423d-8964-cfe5c40ad8a1",
+    "objectID": "fc93c8e0-a6e3-4317-8e91-41b86e4d5705",
     "type": "lvl2",
     "url": "/docs/customization/customize-theme#customizing-layout",
     "hierarchy": {
@@ -9115,7 +9526,7 @@
   },
   {
     "content": "Global Layout Customization",
-    "objectID": "930e8116-8180-4c25-9a5d-25642a421a4f",
+    "objectID": "4a797faf-9399-4ddd-8b59-49c3c4ab9595",
     "type": "lvl3",
     "url": "/docs/customization/customize-theme#global-layout-customization",
     "hierarchy": {
@@ -9126,7 +9537,7 @@
   },
   {
     "content": "Customizing Colors",
-    "objectID": "937aa1e4-8bfd-48db-a5f1-dd9a4f0941f9",
+    "objectID": "f1b7c537-5a3e-424f-a51f-778a7504bfa4",
     "type": "lvl3",
     "url": "/docs/customization/customize-theme#customizing-colors",
     "hierarchy": {
@@ -9137,14 +9548,14 @@
   },
   {
     "content": "Dark mode",
-    "objectID": "16e1c3c9-c767-42ab-bbb3-352c561c8edb",
+    "objectID": "28305611-d488-4b5d-b8be-5d9e50bb1255",
     "type": "lvl1",
     "url": "/docs/customization/dark-mode",
     "hierarchy": { "lvl1": "Dark mode" }
   },
   {
     "content": "Using next-themes",
-    "objectID": "96936e9c-8c8e-45b0-9ee2-69457ed7a99d",
+    "objectID": "db4bf331-00ae-4ff3-b33f-fb425474919d",
     "type": "lvl2",
     "url": "/docs/customization/dark-mode#using-next-themes",
     "hierarchy": {
@@ -9155,7 +9566,7 @@
   },
   {
     "content": "Next.js App Directory Setup",
-    "objectID": "af94bb5c-1a3b-4948-a07f-a74d4a54dc79",
+    "objectID": "dd2ce926-a047-493a-8f39-ce8627d23409",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#nextjs-app-directory-setup",
     "hierarchy": {
@@ -9166,7 +9577,7 @@
   },
   {
     "content": "Install next-themes",
-    "objectID": "56a1f640-2e49-4ea2-8c6e-9f8ab9843f13",
+    "objectID": "3089f51e-5477-40f7-858d-949086ea71ab",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#install-next-themes",
     "hierarchy": {
@@ -9177,7 +9588,7 @@
   },
   {
     "content": "Add next-themes provider",
-    "objectID": "3b734a59-5d37-4844-871b-f403b5d4dbce",
+    "objectID": "47e4609e-6795-42df-8012-f6a2e9188653",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-next-themes-provider",
     "hierarchy": {
@@ -9188,7 +9599,7 @@
   },
   {
     "content": "Add the theme switcher",
-    "objectID": "bf114fb2-75b1-4c84-8763-dfadb7a8bee2",
+    "objectID": "7fa8735a-f375-409d-b24e-068495dc541d",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-the-theme-switcher",
     "hierarchy": {
@@ -9199,7 +9610,7 @@
   },
   {
     "content": "Next.js Pages Directory Setup",
-    "objectID": "3684a12c-84ed-4ce2-bb58-493da05ef238",
+    "objectID": "2f72bc56-635e-4003-acd2-75e524ce067d",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#nextjs-pages-directory-setup",
     "hierarchy": {
@@ -9210,7 +9621,7 @@
   },
   {
     "content": "Install next-themes",
-    "objectID": "7920d68a-0dd3-4e81-86d5-4a0dd21ba66d",
+    "objectID": "c2065396-36ed-4e67-9b96-bace79189b5d",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#install-next-themes-1",
     "hierarchy": {
@@ -9221,7 +9632,7 @@
   },
   {
     "content": "Add next-themes provider",
-    "objectID": "1fc7fc0a-0370-42a5-a80e-7fef1619edcd",
+    "objectID": "2b43c165-bc04-4f4e-bca7-1c8d683ae2d8",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-next-themes-provider-1",
     "hierarchy": {
@@ -9232,7 +9643,7 @@
   },
   {
     "content": "Add the theme switcher",
-    "objectID": "23f17b56-efa3-47fe-a3fc-78d2032dd2a8",
+    "objectID": "3a67d15a-f069-4b21-95c6-f8b8e9232955",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-the-theme-switcher-1",
     "hierarchy": {
@@ -9242,41 +9653,41 @@
     }
   },
   {
-    "content": "Using use-dark-mode hook",
-    "objectID": "6b53af1a-bb13-4785-8951-dfc420515b93",
+    "content": "Using use-theme hook",
+    "objectID": "bba9891f-09d8-4016-9ee2-758e68772102",
     "type": "lvl2",
-    "url": "/docs/customization/dark-mode#using-use-dark-mode-hook",
+    "url": "/docs/customization/dark-mode#using-use-theme-hook",
     "hierarchy": {
       "lvl1": "Dark mode",
-      "lvl2": "Using use-dark-mode hook",
+      "lvl2": "Using use-theme hook",
       "lvl3": null
     }
   },
   {
-    "content": "Install use-dark-mode",
-    "objectID": "ebd22023-3cbd-47de-8d65-17f558e78977",
+    "content": "Install @nextui-org/use-theme",
+    "objectID": "db94bbb6-1945-4abe-b8c3-1669bffccbbc",
     "type": "lvl3",
-    "url": "/docs/customization/dark-mode#install-use-dark-mode",
+    "url": "/docs/customization/dark-mode#install-nextui-orguse-theme",
     "hierarchy": {
       "lvl1": "Dark mode",
-      "lvl2": "Using use-dark-mode hook",
-      "lvl3": "Install use-dark-mode"
+      "lvl2": "Using use-theme hook",
+      "lvl3": "Install @nextui-org/use-theme"
     }
   },
   {
     "content": "Add the current theme to the main element",
-    "objectID": "44d5c3a1-555c-47c2-837e-6fafacff79ee",
+    "objectID": "8eded558-b0e4-4c23-9aa3-9758a329d726",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-the-current-theme-to-the-main-element",
     "hierarchy": {
       "lvl1": "Dark mode",
-      "lvl2": "Install use-dark-mode",
+      "lvl2": "Install @nextui-org/use-theme",
       "lvl3": "Add the current theme to the main element"
     }
   },
   {
     "content": "Add the theme switcher",
-    "objectID": "9da03204-574b-4062-b9ff-8d33ea8f3e59",
+    "objectID": "c2197380-fdea-44c2-b779-5d36bcbc3ed0",
     "type": "lvl3",
     "url": "/docs/customization/dark-mode#add-the-theme-switcher-2",
     "hierarchy": {
@@ -9287,21 +9698,21 @@
   },
   {
     "content": "Layout",
-    "objectID": "f7e5d93a-f7d8-4e36-83d5-53a65936eef2",
+    "objectID": "0d4074dc-a32f-4e17-9bdc-ba54a6753c8f",
     "type": "lvl1",
     "url": "/docs/customization/layout",
     "hierarchy": { "lvl1": "Layout" }
   },
   {
     "content": "Default Layout",
-    "objectID": "b02ca2e2-0a66-464c-8db2-37d9cbe54877",
+    "objectID": "af66a0c0-7b35-4cbd-b574-9bd751de8edf",
     "type": "lvl2",
     "url": "/docs/customization/layout#default-layout",
     "hierarchy": { "lvl1": "Layout", "lvl2": "Default Layout", "lvl3": null }
   },
   {
     "content": "CSS Variables",
-    "objectID": "b0407691-0ae7-49c1-800a-ff471849b2ab",
+    "objectID": "92d009b0-f256-4ccb-b9a7-0d0220a68b70",
     "type": "lvl3",
     "url": "/docs/customization/layout#css-variables",
     "hierarchy": {
@@ -9312,35 +9723,35 @@
   },
   {
     "content": "API Reference",
-    "objectID": "cd97d635-2208-48a4-8e12-038270ed2974",
+    "objectID": "525ed382-bc0d-4e7d-bcc0-b56f4a51a2bf",
     "type": "lvl4",
     "url": "/docs/customization/layout#api-reference",
     "hierarchy": { "lvl1": "Layout", "lvl2": "CSS Variables", "lvl3": null }
   },
   {
     "content": "BaseThemeUnit",
-    "objectID": "96aceb7f-9485-4de5-b4ca-7cfb335e54be",
+    "objectID": "71be840b-3915-4936-bb23-9f2ccb674ae9",
     "type": "lvl4",
     "url": "/docs/customization/layout#basethemeunit",
     "hierarchy": { "lvl1": "Layout", "lvl2": "API Reference", "lvl3": null }
   },
   {
     "content": "FontThemeUnit",
-    "objectID": "dd5fe394-d6f0-4434-9b4f-9327e502328a",
+    "objectID": "31b54270-c8e0-40f1-b32e-870cbfb7c1fc",
     "type": "lvl4",
     "url": "/docs/customization/layout#fontthemeunit",
     "hierarchy": { "lvl1": "Layout", "lvl2": "BaseThemeUnit", "lvl3": null }
   },
   {
     "content": "Override styles",
-    "objectID": "240a18dc-cec9-4cd8-8a87-73498023587d",
+    "objectID": "6c44d533-b85c-48bf-9b9f-e6f01d2f6a1e",
     "type": "lvl1",
     "url": "/docs/customization/override-styles",
     "hierarchy": { "lvl1": "Override styles" }
   },
   {
     "content": "What is a Slot?",
-    "objectID": "a9cd709e-0417-4eea-b835-6ae5181f42ec",
+    "objectID": "86bfd9dd-ee5d-4422-92fc-b9cdd3224f38",
     "type": "lvl3",
     "url": "/docs/customization/override-styles#what-is-a-slot",
     "hierarchy": {
@@ -9351,7 +9762,7 @@
   },
   {
     "content": "Overriding a component",
-    "objectID": "5604d628-fc4f-4942-8b28-da7cb0e0ca00",
+    "objectID": "029fc72b-dc96-49ed-bce7-f617ed0ffcc0",
     "type": "lvl3",
     "url": "/docs/customization/override-styles#overriding-a-component",
     "hierarchy": {
@@ -9362,7 +9773,7 @@
   },
   {
     "content": "Components with slots",
-    "objectID": "a029a7bb-0c52-4053-b0d3-327df61005bd",
+    "objectID": "c8f74b95-8123-455d-83ad-b1aabfc971d4",
     "type": "lvl3",
     "url": "/docs/customization/override-styles#components-with-slots",
     "hierarchy": {
@@ -9373,7 +9784,7 @@
   },
   {
     "content": "CSS Modules",
-    "objectID": "0eca5ae4-541d-4772-b4e1-ae6187ffcd8b",
+    "objectID": "8d35d9c1-698a-4867-ab14-c0cc5b42af57",
     "type": "lvl3",
     "url": "/docs/customization/override-styles#css-modules",
     "hierarchy": {
@@ -9384,7 +9795,7 @@
   },
   {
     "content": "CSS-in-JS",
-    "objectID": "6fe5b8c2-e890-49b6-8894-fe16be8af73f",
+    "objectID": "8a1ab774-3d2c-4f33-b35d-943fd8cc3733",
     "type": "lvl3",
     "url": "/docs/customization/override-styles#css-in-js",
     "hierarchy": {
@@ -9395,35 +9806,35 @@
   },
   {
     "content": "Theme",
-    "objectID": "b8a872f3-e30d-410e-a858-230d883228d9",
+    "objectID": "72bfd76b-2193-4331-a677-d31c7a70b461",
     "type": "lvl1",
     "url": "/docs/customization/theme",
     "hierarchy": { "lvl1": "Theme" }
   },
   {
     "content": "What is a Theme?",
-    "objectID": "5946744e-74af-4303-8723-cc57fff64d89",
+    "objectID": "28fbb554-03e2-4d62-b225-bdb38d792ec7",
     "type": "lvl2",
     "url": "/docs/customization/theme#what-is-a-theme",
     "hierarchy": { "lvl1": "Theme", "lvl2": "What is a Theme?", "lvl3": null }
   },
   {
     "content": "Setup",
-    "objectID": "4cff343b-39da-4781-9ec5-47a2d123c36b",
+    "objectID": "589e113b-f8ec-46a5-83e3-7868f32dbb3f",
     "type": "lvl2",
     "url": "/docs/customization/theme#setup",
     "hierarchy": { "lvl1": "Theme", "lvl2": "Setup", "lvl3": null }
   },
   {
     "content": "Usage",
-    "objectID": "be9bad0e-8350-4af3-b296-a9c7a8702f24",
+    "objectID": "98e4b872-b4af-4b10-aecf-66c0c06e7f5a",
     "type": "lvl3",
     "url": "/docs/customization/theme#usage",
     "hierarchy": { "lvl1": "Theme", "lvl2": "Setup", "lvl3": "Usage" }
   },
   {
     "content": "Default Plugin Options",
-    "objectID": "6c65e59d-a307-49b1-aa0c-318534ec2063",
+    "objectID": "ca1400d3-c06c-47cb-8490-d2b7ac8891d8",
     "type": "lvl3",
     "url": "/docs/customization/theme#default-plugin-options",
     "hierarchy": {
@@ -9434,7 +9845,7 @@
   },
   {
     "content": "Themes Options",
-    "objectID": "62099c7b-c164-4f98-8a8f-cf95b6ca2684",
+    "objectID": "23a90d5c-0f7e-44ad-986d-490e210baa3a",
     "type": "lvl3",
     "url": "/docs/customization/theme#themes-options",
     "hierarchy": {
@@ -9445,7 +9856,7 @@
   },
   {
     "content": "Nested themes",
-    "objectID": "0ad4bc3c-19b1-4fa0-a040-8e680e137785",
+    "objectID": "09c1ee6b-f86b-4b0d-976b-a26b638e4099",
     "type": "lvl3",
     "url": "/docs/customization/theme#nested-themes",
     "hierarchy": {
@@ -9456,7 +9867,7 @@
   },
   {
     "content": "Theme based variants",
-    "objectID": "fed97433-a16b-4c7a-8715-7a15adab9734",
+    "objectID": "1b08882d-df65-442c-9998-95f3adfd5364",
     "type": "lvl3",
     "url": "/docs/customization/theme#theme-based-variants",
     "hierarchy": {
@@ -9467,7 +9878,7 @@
   },
   {
     "content": "API Reference",
-    "objectID": "ebeaeee6-4def-45b6-907d-1020897cf9cf",
+    "objectID": "b495bf6d-42d4-4437-aeae-647d50efdc89",
     "type": "lvl3",
     "url": "/docs/customization/theme#api-reference",
     "hierarchy": {
@@ -9478,49 +9889,49 @@
   },
   {
     "content": "Types",
-    "objectID": "2ce526c3-ebb3-4379-8278-ef1a0adcd0ec",
+    "objectID": "328472ee-cb35-4a94-8864-8d0105dafb56",
     "type": "lvl3",
     "url": "/docs/customization/theme#types",
     "hierarchy": { "lvl1": "Theme", "lvl2": "API Reference", "lvl3": "Types" }
   },
   {
     "content": "ConfigThemes",
-    "objectID": "53770714-fa82-4f4b-9b09-440f05fdc5da",
+    "objectID": "05595e8b-d2ee-49a4-937c-33ea820ca113",
     "type": "lvl4",
     "url": "/docs/customization/theme#configthemes",
     "hierarchy": { "lvl1": "Theme", "lvl2": "Types", "lvl3": null }
   },
   {
     "content": "LayoutTheme",
-    "objectID": "a17f4238-39f5-40b2-a537-54c7d147eaee",
+    "objectID": "a7f9bf97-0ef6-489c-9dfc-609932fca0bd",
     "type": "lvl4",
     "url": "/docs/customization/theme#layouttheme",
     "hierarchy": { "lvl1": "Theme", "lvl2": "ConfigThemes", "lvl3": null }
   },
   {
     "content": "ThemeColors",
-    "objectID": "e07a7eff-e295-4f2b-829f-d19d12344082",
+    "objectID": "4f3aac71-f8be-41c3-a0cf-a7b19e30f53b",
     "type": "lvl4",
     "url": "/docs/customization/theme#themecolors",
     "hierarchy": { "lvl1": "Theme", "lvl2": "LayoutTheme", "lvl3": null }
   },
   {
     "content": "Astro",
-    "objectID": "dbcaa228-7276-4d9a-a76e-f1e1ba11f32d",
+    "objectID": "87437207-e982-4d56-a75f-ee93c0c62cab",
     "type": "lvl1",
     "url": "/docs/frameworks/astro",
     "hierarchy": { "lvl1": "Astro" }
   },
   {
     "content": "Install React",
-    "objectID": "54513975-4203-4050-acd0-6119ca83fe7a",
+    "objectID": "c60dc80a-1f2b-4c33-a820-f1cf4d171a73",
     "type": "lvl3",
     "url": "/docs/frameworks/astro#install-react",
     "hierarchy": { "lvl1": "Astro", "lvl2": "Astro", "lvl3": "Install React" }
   },
   {
     "content": "Install NextUI",
-    "objectID": "7b5c3c91-945f-45cd-bd8c-99493101da76",
+    "objectID": "84bfa562-a453-44ac-8aec-4edd7152a126",
     "type": "lvl3",
     "url": "/docs/frameworks/astro#install-nextui",
     "hierarchy": {
@@ -9530,48 +9941,48 @@
     }
   },
   {
-    "content": "Tailwind CSS Setup",
-    "objectID": "1038d3c1-80e9-4cd0-8eb2-3cfd91e51ea9",
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "c762cbde-834f-408a-aeea-cbaf6135ba18",
     "type": "lvl3",
-    "url": "/docs/frameworks/astro#tailwind-css-setup",
+    "url": "/docs/frameworks/astro#hoisted-dependencies-setup",
     "hierarchy": {
       "lvl1": "Astro",
       "lvl2": "Install NextUI",
-      "lvl3": "Tailwind CSS Setup"
+      "lvl3": "Hoisted Dependencies Setup"
     }
   },
   {
-    "content": "Usage",
-    "objectID": "83f1be6d-2072-49ee-b90e-8e146cdd170a",
+    "content": "Tailwind CSS Setup",
+    "objectID": "e6d9e5f3-f5ae-4e05-8c0e-efc7fe04c8be",
     "type": "lvl3",
-    "url": "/docs/frameworks/astro#usage",
+    "url": "/docs/frameworks/astro#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Astro",
-      "lvl2": "Tailwind CSS Setup",
-      "lvl3": "Usage"
+      "lvl2": "Hoisted Dependencies Setup",
+      "lvl3": "Tailwind CSS Setup"
     }
   },
   {
-    "content": "Setup pnpm (optional)",
-    "objectID": "c169f150-8d79-4b2b-96ec-80ec050ab1c4",
+    "content": "Usage",
+    "objectID": "03d2cc75-eb40-4957-b9e1-878d80f31eb3",
     "type": "lvl3",
-    "url": "/docs/frameworks/astro#setup-pnpm-optional",
+    "url": "/docs/frameworks/astro#usage",
     "hierarchy": {
       "lvl1": "Astro",
-      "lvl2": "Usage",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl2": "Tailwind CSS Setup",
+      "lvl3": "Usage"
     }
   },
   {
     "content": "Next.js",
-    "objectID": "371e7d07-9c56-40ad-8fd5-fd7ba215a1da",
+    "objectID": "d61d5a75-9682-426b-8bbf-6a8afec41544",
     "type": "lvl1",
     "url": "/docs/frameworks/nextjs",
     "hierarchy": { "lvl1": "Next.js" }
   },
   {
     "content": "App Directory Setup",
-    "objectID": "d16d8e86-3cf5-42ef-8de2-e791d98797f1",
+    "objectID": "1c148d4c-3c75-4307-a235-2f0c2a9a2140",
     "type": "lvl2",
     "url": "/docs/frameworks/nextjs#app-directory-setup",
     "hierarchy": {
@@ -9580,31 +9991,53 @@
       "lvl3": null
     }
   },
+  {
+    "content": "NextUI CLI (recommended)",
+    "objectID": "47048aea-eba2-48b5-84ed-563c3b296d7a",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#nextui-cli-recommended",
+    "hierarchy": {
+      "lvl1": "Next.js",
+      "lvl2": "App Directory Setup",
+      "lvl3": "NextUI CLI (recommended)"
+    }
+  },
   {
     "content": "create-next-app",
-    "objectID": "e84c05fb-4e7d-4697-891c-8b3371ea88ff",
+    "objectID": "c13edd37-17fb-4175-9392-90bd012f5c5a",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#create-next-app",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "App Directory Setup",
+      "lvl2": "NextUI CLI (recommended)",
       "lvl3": "create-next-app"
     }
   },
+  {
+    "content": "Automatic Installation",
+    "objectID": "cd1d239b-5d4c-4452-85df-d1c674cf5644",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#automatic-installation",
+    "hierarchy": {
+      "lvl1": "Next.js",
+      "lvl2": "create-next-app",
+      "lvl3": "Automatic Installation"
+    }
+  },
   {
     "content": "Manual Installation",
-    "objectID": "4a420b79-c568-47d0-a972-80bc0cc78854",
+    "objectID": "e4e59d3f-ebb9-4905-b80e-4946ceb8b793",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#manual-installation",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "create-next-app",
+      "lvl2": "Automatic Installation",
       "lvl3": "Manual Installation"
     }
   },
   {
     "content": "Add dependencies",
-    "objectID": "a7d0e05c-eb49-4200-b653-aa3018b4838d",
+    "objectID": "0f64fcf2-6e1a-4461-82b3-c2b8dd8b29de",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#add-dependencies",
     "hierarchy": {
@@ -9613,20 +10046,31 @@
       "lvl3": "Add dependencies"
     }
   },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "3f423717-e66e-4d8e-bcbc-9ed947125eb2",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#hoisted-dependencies-setup",
+    "hierarchy": {
+      "lvl1": "Next.js",
+      "lvl2": "Add dependencies",
+      "lvl3": "Hoisted Dependencies Setup"
+    }
+  },
   {
     "content": "Tailwind CSS Setup",
-    "objectID": "a40b5586-3782-488e-aff1-04dcf4dc6190",
+    "objectID": "96ed1c74-9552-4c22-8cc9-b9d3fd4877e6",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "Add dependencies",
+      "lvl2": "Hoisted Dependencies Setup",
       "lvl3": "Tailwind CSS Setup"
     }
   },
   {
     "content": "Setup Provider",
-    "objectID": "b9f2cf98-0aa9-45e1-8a62-4fd5e9fe9735",
+    "objectID": "c4c19221-07d3-41cb-a013-e5b8114fd310",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#setup-provider",
     "hierarchy": {
@@ -9637,7 +10081,7 @@
   },
   {
     "content": "Add Provider to Root",
-    "objectID": "39264186-b774-477a-b1be-e303b07b2096",
+    "objectID": "02d83fc0-3d14-4704-90eb-ad5a8af978d4",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#add-provider-to-root",
     "hierarchy": {
@@ -9648,7 +10092,7 @@
   },
   {
     "content": "Use NextUI Components",
-    "objectID": "ca1ff622-1dd4-4516-8e83-ddfbc53bf9b9",
+    "objectID": "cc2667b0-a7ff-481b-b3c2-864d9712f29e",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#use-nextui-components",
     "hierarchy": {
@@ -9658,52 +10102,63 @@
     }
   },
   {
-    "content": "Setup pnpm (optional)",
-    "objectID": "08353322-61bf-413f-9044-1b5e7c365513",
-    "type": "lvl3",
-    "url": "/docs/frameworks/nextjs#setup-pnpm-optional",
+    "content": "Pages Directory Setup",
+    "objectID": "00724efb-c3dd-409a-a56e-274c2a5b7d90",
+    "type": "lvl2",
+    "url": "/docs/frameworks/nextjs#pages-directory-setup",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "Use NextUI Components",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl2": "Pages Directory Setup",
+      "lvl3": null
     }
   },
   {
-    "content": "Pages Directory Setup",
-    "objectID": "c8fa1984-93ea-49ce-bd0b-d8f39bec3604",
-    "type": "lvl2",
-    "url": "/docs/frameworks/nextjs#pages-directory-setup",
+    "content": "NextUI CLI (recommended)",
+    "objectID": "dd084b60-0c8f-460f-b88c-d2adaa7f8d0d",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#nextui-cli-recommended-1",
     "hierarchy": {
       "lvl1": "Next.js",
       "lvl2": "Pages Directory Setup",
-      "lvl3": null
+      "lvl3": "NextUI CLI (recommended)"
     }
   },
   {
     "content": "create-next-app",
-    "objectID": "86c706f7-6b43-4fea-95c9-ae62ce195083",
+    "objectID": "e6f84468-f5d6-4a30-9679-7b6da87ae263",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#create-next-app-1",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "Pages Directory Setup",
+      "lvl2": "NextUI CLI (recommended)",
       "lvl3": "create-next-app"
     }
   },
+  {
+    "content": "Automatic Installation",
+    "objectID": "4cd83484-777f-4253-b032-987ec833fb8b",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#automatic-installation-1",
+    "hierarchy": {
+      "lvl1": "Next.js",
+      "lvl2": "create-next-app",
+      "lvl3": "Automatic Installation"
+    }
+  },
   {
     "content": "Manual Installation",
-    "objectID": "97529e46-9904-4559-ac5a-530935e96ec6",
+    "objectID": "9ca34b3a-787b-4254-b270-7f9ab0b64c25",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#manual-installation-1",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "create-next-app",
+      "lvl2": "Automatic Installation",
       "lvl3": "Manual Installation"
     }
   },
   {
     "content": "Add dependencies",
-    "objectID": "df276926-d10f-460e-ab9f-6e0fcdb63ff7",
+    "objectID": "28b87b3b-d8df-4ad5-8ea2-79c781d54a36",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#add-dependencies-1",
     "hierarchy": {
@@ -9712,20 +10167,31 @@
       "lvl3": "Add dependencies"
     }
   },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "ee7af8f1-d575-4dda-82ce-f714ebe559c8",
+    "type": "lvl3",
+    "url": "/docs/frameworks/nextjs#hoisted-dependencies-setup-1",
+    "hierarchy": {
+      "lvl1": "Next.js",
+      "lvl2": "Add dependencies",
+      "lvl3": "Hoisted Dependencies Setup"
+    }
+  },
   {
     "content": "Tailwind CSS Setup",
-    "objectID": "e32bc1df-bdc9-4515-aff4-d4351df17566",
+    "objectID": "41930d20-2e4f-4b8f-9fa2-b937debcb7a1",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#tailwind-css-setup-1",
     "hierarchy": {
       "lvl1": "Next.js",
-      "lvl2": "Add dependencies",
+      "lvl2": "Hoisted Dependencies Setup",
       "lvl3": "Tailwind CSS Setup"
     }
   },
   {
     "content": "Setup Provider",
-    "objectID": "3433e852-fd91-4138-a9a2-eb5521a09629",
+    "objectID": "accf37e8-2af8-48da-9e31-ac28263300de",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#setup-provider-1",
     "hierarchy": {
@@ -9736,7 +10202,7 @@
   },
   {
     "content": "Use NextUI Components",
-    "objectID": "2ad9d04c-bbd3-45fc-8e13-6463b9af0ef2",
+    "objectID": "cf86ded6-1d23-4ed0-99bc-dcfff4b5e26d",
     "type": "lvl3",
     "url": "/docs/frameworks/nextjs#use-nextui-components-1",
     "hierarchy": {
@@ -9745,128 +10211,117 @@
       "lvl3": "Use NextUI Components"
     }
   },
-  {
-    "content": "Setup pnpm (optional)",
-    "objectID": "83a70487-5be5-4bfc-bfca-0346d4a122e4",
-    "type": "lvl3",
-    "url": "/docs/frameworks/nextjs#setup-pnpm-optional-1",
-    "hierarchy": {
-      "lvl1": "Next.js",
-      "lvl2": "Use NextUI Components",
-      "lvl3": "Setup pnpm (optional)"
-    }
-  },
   {
     "content": "Remix",
-    "objectID": "d7de75fd-7f7d-4ab4-88a4-1d8e712e3361",
+    "objectID": "d1a32e55-afe4-445f-ab66-465c06605200",
     "type": "lvl1",
     "url": "/docs/frameworks/remix",
     "hierarchy": { "lvl1": "Remix" }
   },
   {
     "content": "Installation",
-    "objectID": "0a4e7007-2995-4f2b-8f9a-cfa9f21de847",
+    "objectID": "8db24e4e-3fa9-43b4-8e6f-481a05c5f7b2",
     "type": "lvl3",
     "url": "/docs/frameworks/remix#installation",
     "hierarchy": { "lvl1": "Remix", "lvl2": "Remix", "lvl3": "Installation" }
   },
   {
-    "content": "Tailwind CSS Setup",
-    "objectID": "5e273b40-0e69-46f7-bf32-70335c795c18",
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "d5bfb0c6-fd23-4dad-acad-1c947986823d",
     "type": "lvl3",
-    "url": "/docs/frameworks/remix#tailwind-css-setup",
+    "url": "/docs/frameworks/remix#hoisted-dependencies-setup",
     "hierarchy": {
       "lvl1": "Remix",
       "lvl2": "Installation",
-      "lvl3": "Tailwind CSS Setup"
+      "lvl3": "Hoisted Dependencies Setup"
     }
   },
   {
-    "content": "Provider Setup",
-    "objectID": "7e88d907-0424-439b-b163-151d6d2970a3",
+    "content": "Tailwind CSS Setup",
+    "objectID": "85f6f4ea-cf5e-4b0f-b62c-02260d26bc27",
     "type": "lvl3",
-    "url": "/docs/frameworks/remix#provider-setup",
+    "url": "/docs/frameworks/remix#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Remix",
-      "lvl2": "Tailwind CSS Setup",
-      "lvl3": "Provider Setup"
+      "lvl2": "Hoisted Dependencies Setup",
+      "lvl3": "Tailwind CSS Setup"
     }
   },
   {
-    "content": "Setup pnpm (optional)",
-    "objectID": "f218e3b6-085a-4391-b9b0-32450cd1c3f1",
+    "content": "Provider Setup",
+    "objectID": "7155fc0a-73ec-4095-bc64-a1f103344c95",
     "type": "lvl3",
-    "url": "/docs/frameworks/remix#setup-pnpm-optional",
+    "url": "/docs/frameworks/remix#provider-setup",
     "hierarchy": {
       "lvl1": "Remix",
-      "lvl2": "Provider Setup",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl2": "Tailwind CSS Setup",
+      "lvl3": "Provider Setup"
     }
   },
   {
     "content": "Vite",
-    "objectID": "229e501d-1c0b-4d62-be17-f30871492dd6",
+    "objectID": "d93cca98-0b14-420a-99f1-676c4bc9e7d6",
     "type": "lvl1",
     "url": "/docs/frameworks/vite",
     "hierarchy": { "lvl1": "Vite" }
   },
   {
     "content": "Installation",
-    "objectID": "b970b86e-7443-4f42-834a-b8a5926249d3",
+    "objectID": "21af62ad-a1b7-42be-94e5-29b6aaafe700",
     "type": "lvl3",
     "url": "/docs/frameworks/vite#installation",
     "hierarchy": { "lvl1": "Vite", "lvl2": "Vite", "lvl3": "Installation" }
   },
   {
-    "content": "Tailwind CSS Setup",
-    "objectID": "3a18e35c-2c86-45f8-811c-d46a3dcdaf90",
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "1d3cdcc3-bc2d-4eb4-8a91-8f1acd91d6af",
     "type": "lvl3",
-    "url": "/docs/frameworks/vite#tailwind-css-setup",
+    "url": "/docs/frameworks/vite#hoisted-dependencies-setup",
     "hierarchy": {
       "lvl1": "Vite",
       "lvl2": "Installation",
-      "lvl3": "Tailwind CSS Setup"
+      "lvl3": "Hoisted Dependencies Setup"
     }
   },
   {
-    "content": "Provider Setup",
-    "objectID": "109d591d-0a36-4470-965a-90fb7842523a",
+    "content": "Tailwind CSS Setup",
+    "objectID": "ee3c9744-4492-4059-943f-84924f6d1c57",
     "type": "lvl3",
-    "url": "/docs/frameworks/vite#provider-setup",
+    "url": "/docs/frameworks/vite#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Vite",
-      "lvl2": "Tailwind CSS Setup",
-      "lvl3": "Provider Setup"
+      "lvl2": "Hoisted Dependencies Setup",
+      "lvl3": "Tailwind CSS Setup"
     }
   },
   {
-    "content": "Setup pnpm (optional)",
-    "objectID": "4549e5b8-4f8d-4f5a-9f60-c31b089c90e8",
+    "content": "Provider Setup",
+    "objectID": "24ef67f1-01e4-46e4-bbbf-c6b6d92c7b9e",
     "type": "lvl3",
-    "url": "/docs/frameworks/vite#setup-pnpm-optional",
+    "url": "/docs/frameworks/vite#provider-setup",
     "hierarchy": {
       "lvl1": "Vite",
-      "lvl2": "Provider Setup",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl2": "Tailwind CSS Setup",
+      "lvl3": "Provider Setup"
     }
   },
   {
     "content": "CLI",
-    "objectID": "ffa5982f-dc27-44b7-89dc-75b09f875227",
+    "objectID": "70bec007-e74c-4424-bc26-8cddb65a91ca",
     "type": "lvl1",
     "url": "/docs/guide/cli",
     "hierarchy": { "lvl1": "CLI" }
   },
   {
     "content": "Installation",
-    "objectID": "0416167b-56e1-4b28-825c-8a4dcaf0e0dc",
+    "objectID": "a53b65fd-8816-4845-843a-3605ca927c1d",
     "type": "lvl2",
     "url": "/docs/guide/cli#installation",
     "hierarchy": { "lvl1": "CLI", "lvl2": "Installation", "lvl3": null }
   },
   {
     "content": "Global Installation",
-    "objectID": "8102d40d-48d2-4ee4-9787-4041b43952c3",
+    "objectID": "f942e878-96d2-4eee-93c3-4d54e481480d",
     "type": "lvl3",
     "url": "/docs/guide/cli#global-installation",
     "hierarchy": {
@@ -9877,7 +10332,7 @@
   },
   {
     "content": "Without Installation",
-    "objectID": "b9d3adb4-ca78-4dda-b20b-75b9e8bf6c9e",
+    "objectID": "7211ad4f-ae7a-43db-8fd4-c617caa11773",
     "type": "lvl3",
     "url": "/docs/guide/cli#without-installation",
     "hierarchy": {
@@ -9888,77 +10343,77 @@
   },
   {
     "content": "Quick Start",
-    "objectID": "124dc15e-4857-44df-9798-01c4698e3072",
+    "objectID": "4b5b81c5-bed0-45b6-8a5e-adb0e77e961c",
     "type": "lvl2",
     "url": "/docs/guide/cli#quick-start",
     "hierarchy": { "lvl1": "CLI", "lvl2": "Quick Start", "lvl3": null }
   },
   {
     "content": "init",
-    "objectID": "dd521705-4bbc-4796-8c20-9a73ee282445",
+    "objectID": "fea8aaef-a177-418e-a23c-e4ea3b5b2d4f",
     "type": "lvl2",
     "url": "/docs/guide/cli#init",
     "hierarchy": { "lvl1": "CLI", "lvl2": "init", "lvl3": null }
   },
   {
     "content": "add",
-    "objectID": "e744d82b-854a-4403-ab56-5af9514a5bc0",
+    "objectID": "39bd5bc9-f5c5-4a20-b70b-198080df9303",
     "type": "lvl2",
     "url": "/docs/guide/cli#add",
     "hierarchy": { "lvl1": "CLI", "lvl2": "add", "lvl3": null }
   },
   {
     "content": "upgrade",
-    "objectID": "c3384948-7ac0-4e43-8f65-207b9b88b624",
+    "objectID": "35dba68c-6485-46f1-81b7-87f276fc198c",
     "type": "lvl2",
     "url": "/docs/guide/cli#upgrade",
     "hierarchy": { "lvl1": "CLI", "lvl2": "upgrade", "lvl3": null }
   },
   {
     "content": "remove",
-    "objectID": "c1f931a4-565c-49e1-9941-f79b51e9fc3d",
+    "objectID": "c2e7ce65-7dab-4fc5-bae1-8d5e2f63e6b9",
     "type": "lvl2",
     "url": "/docs/guide/cli#remove",
     "hierarchy": { "lvl1": "CLI", "lvl2": "remove", "lvl3": null }
   },
   {
     "content": "list",
-    "objectID": "39791e14-37ad-4d68-910c-4b60e56d6b66",
+    "objectID": "bad485fb-c4b3-4fcd-bc1a-0f5ee7892273",
     "type": "lvl2",
     "url": "/docs/guide/cli#list",
     "hierarchy": { "lvl1": "CLI", "lvl2": "list", "lvl3": null }
   },
   {
     "content": "doctor",
-    "objectID": "de6ef608-71d1-46a4-969a-0b67688db646",
+    "objectID": "2a9604b2-3434-45da-9640-37688990b621",
     "type": "lvl2",
     "url": "/docs/guide/cli#doctor",
     "hierarchy": { "lvl1": "CLI", "lvl2": "doctor", "lvl3": null }
   },
   {
     "content": "env",
-    "objectID": "d01d8cec-b3c2-49fc-a43b-5d31c7f3960e",
+    "objectID": "a4fa138d-91e9-478a-b622-801457d8a188",
     "type": "lvl2",
     "url": "/docs/guide/cli#env",
     "hierarchy": { "lvl1": "CLI", "lvl2": "env", "lvl3": null }
   },
   {
     "content": "API Reference",
-    "objectID": "af546d3e-1741-4601-ae9f-8b4b0ece08e2",
+    "objectID": "430dec24-5a5c-405f-b2bb-2545c001d739",
     "type": "lvl2",
     "url": "/docs/guide/cli#api-reference",
     "hierarchy": { "lvl1": "CLI", "lvl2": "API Reference", "lvl3": null }
   },
   {
     "content": "Design Principles",
-    "objectID": "6bcba7eb-9905-4b34-8c7c-d8031c93802d",
+    "objectID": "d35ab799-f08d-4a0c-b6e4-1a87b2d78c0c",
     "type": "lvl1",
     "url": "/docs/guide/design-principles",
     "hierarchy": { "lvl1": "Design Principles" }
   },
   {
     "content": "Simplicity and Usability",
-    "objectID": "1d407aee-bb43-4611-b0b1-b0f9166c5a92",
+    "objectID": "626e5017-395d-4169-a293-522db137a032",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#simplicity-and-usability",
     "hierarchy": {
@@ -9969,7 +10424,7 @@
   },
   {
     "content": "Modular Design",
-    "objectID": "ebc253fc-865b-4afb-8d91-9d1a024cc32f",
+    "objectID": "4a55599e-5394-42d1-86d3-96adee253978",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#modular-design",
     "hierarchy": {
@@ -9980,7 +10435,7 @@
   },
   {
     "content": "Customization and Flexibility",
-    "objectID": "4f38b2dc-71ec-46e6-883b-3078ebfe3050",
+    "objectID": "171d36ba-2d8f-4fec-9304-966a30bff53c",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#customization-and-flexibility",
     "hierarchy": {
@@ -9991,7 +10446,7 @@
   },
   {
     "content": "Consistent API",
-    "objectID": "d410f115-b379-48b7-a275-df778ed53def",
+    "objectID": "5b821d5f-b087-4221-9fc6-24e7c462c026",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#consistent-api",
     "hierarchy": {
@@ -10002,7 +10457,7 @@
   },
   {
     "content": "Accessibility",
-    "objectID": "7b604ac7-d313-4393-af9f-7afca4689269",
+    "objectID": "b339d2c7-a96e-4905-a13f-7586f9d9f47a",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#accessibility",
     "hierarchy": {
@@ -10013,7 +10468,7 @@
   },
   {
     "content": "Component Slots",
-    "objectID": "482c145d-b235-4816-aab7-8fb8186a4ab9",
+    "objectID": "28c2b6d8-e6f9-4139-a19f-ef449541280d",
     "type": "lvl3",
     "url": "/docs/guide/design-principles#component-slots",
     "hierarchy": {
@@ -10024,146 +10479,190 @@
   },
   {
     "content": "Installation",
-    "objectID": "86d0638f-b6e2-4b4a-9f85-530e556c177d",
+    "objectID": "3ab02f5a-4b0a-42cb-903a-53707b0bcfaf",
     "type": "lvl1",
     "url": "/docs/guide/installation",
     "hierarchy": { "lvl1": "Installation" }
   },
   {
-    "content": "Global Installation",
-    "objectID": "1aad2d73-b120-4898-b9ac-cf99f8bc9245",
+    "content": "Automatic Installation",
+    "objectID": "ffb5b04d-c41f-46df-b400-0d34e45ca357",
     "type": "lvl2",
-    "url": "/docs/guide/installation#global-installation",
+    "url": "/docs/guide/installation#automatic-installation",
     "hierarchy": {
       "lvl1": "Installation",
-      "lvl2": "Global Installation",
+      "lvl2": "Automatic Installation",
       "lvl3": null
     }
   },
   {
-    "content": "Install Packages",
-    "objectID": "2b7e67ad-16a2-4b3f-870a-8350ebc5888f",
+    "content": "Initialization and Starting the App",
+    "objectID": "a87dc747-386a-41b1-b2d1-a1f52840a520",
+    "type": "lvl3",
+    "url": "/docs/guide/installation#initialization-and-starting-the-app",
+    "hierarchy": {
+      "lvl1": "Installation",
+      "lvl2": "Installation",
+      "lvl3": "Initialization and Starting the App"
+    }
+  },
+  {
+    "content": "Adding the Components",
+    "objectID": "292f97e6-ec91-45e8-a45c-6397c3da01b0",
+    "type": "lvl3",
+    "url": "/docs/guide/installation#adding-the-components",
+    "hierarchy": {
+      "lvl1": "Installation",
+      "lvl2": "Initialization and Starting the App",
+      "lvl3": "Adding the Components"
+    }
+  },
+  {
+    "content": "Manual Installation",
+    "objectID": "c13ff57f-9b7c-419e-b6e1-e3c581603983",
+    "type": "lvl2",
+    "url": "/docs/guide/installation#manual-installation",
+    "hierarchy": {
+      "lvl1": "Installation",
+      "lvl2": "Manual Installation",
+      "lvl3": null
+    }
+  },
+  {
+    "content": "Global Installation",
+    "objectID": "0756420e-0977-44e8-93c9-8332a1552b00",
     "type": "lvl3",
+    "url": "/docs/guide/installation#global-installation",
+    "hierarchy": {
+      "lvl1": "Installation",
+      "lvl2": "Manual Installation",
+      "lvl3": "Global Installation"
+    }
+  },
+  {
+    "content": "Install Packages",
+    "objectID": "03986dab-c53d-4971-b614-c4b4e3c91e6e",
+    "type": "lvl4",
     "url": "/docs/guide/installation#install-packages",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Global Installation",
-      "lvl3": "Install Packages"
+      "lvl3": null
     }
   },
   {
-    "content": "Tailwind CSS Setup",
-    "objectID": "b47baf88-b923-4870-8664-a8a0e950fb1f",
-    "type": "lvl3",
-    "url": "/docs/guide/installation#tailwind-css-setup",
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "47a99581-f153-421c-b1e4-45d020991793",
+    "type": "lvl4",
+    "url": "/docs/guide/installation#hoisted-dependencies-setup",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Install Packages",
-      "lvl3": "Tailwind CSS Setup"
+      "lvl3": null
     }
   },
   {
-    "content": "Provider Setup",
-    "objectID": "a8db5af4-ff8f-4462-a75d-9fa6ca9849da",
-    "type": "lvl3",
-    "url": "/docs/guide/installation#provider-setup",
+    "content": "Tailwind CSS Setup",
+    "objectID": "37f839f5-5d53-422d-a813-cc6f1bfe8392",
+    "type": "lvl4",
+    "url": "/docs/guide/installation#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Installation",
-      "lvl2": "Tailwind CSS Setup",
-      "lvl3": "Provider Setup"
+      "lvl2": "Hoisted Dependencies Setup",
+      "lvl3": null
     }
   },
   {
-    "content": "Setup pnpm (optional)",
-    "objectID": "14b04154-6b79-4a17-ba80-c73a95ae8d94",
-    "type": "lvl3",
-    "url": "/docs/guide/installation#setup-pnpm-optional",
+    "content": "Provider Setup",
+    "objectID": "96d357c5-aebc-43d8-a60f-ef7314558aa4",
+    "type": "lvl4",
+    "url": "/docs/guide/installation#provider-setup",
     "hierarchy": {
       "lvl1": "Installation",
-      "lvl2": "Provider Setup",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl2": "Tailwind CSS Setup",
+      "lvl3": null
     }
   },
   {
     "content": "Individual Installation",
-    "objectID": "00035beb-676b-45d5-8a73-fae0e178d9eb",
-    "type": "lvl2",
+    "objectID": "0298c192-5ee6-4fae-943a-f9dd2a96f866",
+    "type": "lvl3",
     "url": "/docs/guide/installation#individual-installation",
     "hierarchy": {
       "lvl1": "Installation",
-      "lvl2": "Individual Installation",
-      "lvl3": null
+      "lvl2": "Provider Setup",
+      "lvl3": "Individual Installation"
     }
   },
   {
     "content": "Install Core Packages",
-    "objectID": "87cf9e93-e806-499c-a3dd-d32698256d48",
-    "type": "lvl3",
+    "objectID": "c5c47bc9-46b9-4da8-aec1-80a5d3ae86b6",
+    "type": "lvl4",
     "url": "/docs/guide/installation#install-core-packages",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Individual Installation",
-      "lvl3": "Install Core Packages"
+      "lvl3": null
     }
   },
   {
     "content": "Install Component",
-    "objectID": "484025cf-4366-4554-abe0-88e44a5409ad",
-    "type": "lvl3",
+    "objectID": "1f5c4c89-492f-4e4f-9f38-9d0d4f33416a",
+    "type": "lvl4",
     "url": "/docs/guide/installation#install-component",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Install Core Packages",
-      "lvl3": "Install Component"
+      "lvl3": null
+    }
+  },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "5279037a-9993-4785-950e-c98ad40211a7",
+    "type": "lvl4",
+    "url": "/docs/guide/installation#hoisted-dependencies-setup-1",
+    "hierarchy": {
+      "lvl1": "Installation",
+      "lvl2": "Install Component",
+      "lvl3": null
     }
   },
   {
     "content": "Tailwind CSS Setup",
-    "objectID": "1c2ba3ab-a673-4a42-ad5f-9207d0e2f9be",
-    "type": "lvl3",
+    "objectID": "797695dc-8197-4ec0-b9ab-8e69f64d4bdc",
+    "type": "lvl4",
     "url": "/docs/guide/installation#tailwind-css-setup-1",
     "hierarchy": {
       "lvl1": "Installation",
-      "lvl2": "Install Component",
-      "lvl3": "Tailwind CSS Setup"
+      "lvl2": "Hoisted Dependencies Setup",
+      "lvl3": null
     }
   },
   {
     "content": "Provider Setup",
-    "objectID": "ef77311c-24c7-411d-b7ea-49bb65b3461f",
-    "type": "lvl3",
+    "objectID": "c9b0ea70-325c-4160-973d-8daa51fa4e9a",
+    "type": "lvl4",
     "url": "/docs/guide/installation#provider-setup-1",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Tailwind CSS Setup",
-      "lvl3": "Provider Setup"
+      "lvl3": null
     }
   },
   {
     "content": "Use the Component",
-    "objectID": "65c3aad1-2483-475a-9d50-b52cebd48465",
-    "type": "lvl3",
+    "objectID": "7ce0bd7f-1ee2-4045-b2f0-aaec709927be",
+    "type": "lvl4",
     "url": "/docs/guide/installation#use-the-component",
     "hierarchy": {
       "lvl1": "Installation",
       "lvl2": "Provider Setup",
-      "lvl3": "Use the Component"
-    }
-  },
-  {
-    "content": "Setup pnpm (optional)",
-    "objectID": "6e11bd66-1af9-4602-9e52-b3d10ade18ca",
-    "type": "lvl3",
-    "url": "/docs/guide/installation#setup-pnpm-optional-1",
-    "hierarchy": {
-      "lvl1": "Installation",
-      "lvl2": "Use the Component",
-      "lvl3": "Setup pnpm (optional)"
+      "lvl3": null
     }
   },
   {
     "content": "Framework Guides",
-    "objectID": "a08e064b-cee7-4ce8-8d7b-5235dec1a8cb",
+    "objectID": "9f7d75b3-9948-484c-81ec-ac59d7f8b76d",
     "type": "lvl2",
     "url": "/docs/guide/installation#framework-guides",
     "hierarchy": {
@@ -10174,14 +10673,14 @@
   },
   {
     "content": "Introduction",
-    "objectID": "54640cd0-2b9c-4038-91b3-22553ce3ed75",
+    "objectID": "df268096-bd94-4090-8144-26eff660470e",
     "type": "lvl1",
     "url": "/docs/guide/introduction",
     "hierarchy": { "lvl1": "Introduction" }
   },
   {
     "content": "What is NextUI?",
-    "objectID": "920861b3-24ff-45f7-8953-785399e18db4",
+    "objectID": "67f9e727-cae6-4ed8-84bf-7a6d76fcef34",
     "type": "lvl2",
     "url": "/docs/guide/introduction#what-is-nextui",
     "hierarchy": {
@@ -10192,14 +10691,14 @@
   },
   {
     "content": "FAQ",
-    "objectID": "8b1586d0-3331-4402-8612-46bf7aaa65ab",
+    "objectID": "018c53d9-38b7-490c-90a9-2a3af819bdf7",
     "type": "lvl2",
     "url": "/docs/guide/introduction#faq",
     "hierarchy": { "lvl1": "Introduction", "lvl2": "FAQ", "lvl3": null }
   },
   {
     "content": "Is NextUI a Vercel related project?",
-    "objectID": "d9a32a9c-9857-4448-90c9-7651ffbd202c",
+    "objectID": "c0fc6188-c42b-412d-aacd-939dbc0e2bdf",
     "type": "lvl3",
     "url": "/docs/guide/introduction#is-nextui-a-vercel-related-project",
     "hierarchy": {
@@ -10210,7 +10709,7 @@
   },
   {
     "content": "How is NextUI different from TailwindCSS?",
-    "objectID": "46140a4e-0194-4a17-b210-dc82142a0811",
+    "objectID": "f2a8bbbf-289e-4f06-b415-bb999d3a3dff",
     "type": "lvl3",
     "url": "/docs/guide/introduction#how-is-nextui-different-from-tailwindcss",
     "hierarchy": {
@@ -10221,7 +10720,7 @@
   },
   {
     "content": "How is NextUI different from TailwindCSS components libraries?",
-    "objectID": "69e8ad8a-28f4-44dd-acdd-12b19bdde7a5",
+    "objectID": "ddf06574-4267-4527-a7a6-b29abcccb48a",
     "type": "lvl3",
     "url": "/docs/guide/introduction#how-is-nextui-different-from-tailwindcss-components-libraries",
     "hierarchy": {
@@ -10232,7 +10731,7 @@
   },
   {
     "content": "How NextUI deals with TailwindCSS classes conflicts?",
-    "objectID": "6c6355a3-5ca6-4cb8-bd2d-e4352c7eb290",
+    "objectID": "d90ea7d7-0bb0-4e94-af88-31d3a91dd75e",
     "type": "lvl3",
     "url": "/docs/guide/introduction#how-nextui-deals-with-tailwindcss-classes-conflicts",
     "hierarchy": {
@@ -10243,7 +10742,7 @@
   },
   {
     "content": "Does NextUI use runtime CSS?",
-    "objectID": "61345ad2-1f49-459a-a785-5ca93dab4f2c",
+    "objectID": "2953bb1e-ccf9-4371-a5cf-5ca0c9265240",
     "type": "lvl3",
     "url": "/docs/guide/introduction#does-nextui-use-runtime-css",
     "hierarchy": {
@@ -10254,7 +10753,7 @@
   },
   {
     "content": "Does NextUI support TypeScript?",
-    "objectID": "7582c9ed-a83c-4dd5-822c-524fad99e0cf",
+    "objectID": "c9f02419-a5ef-4d40-89c5-97fd50dd41f7",
     "type": "lvl3",
     "url": "/docs/guide/introduction#does-nextui-support-typescript",
     "hierarchy": {
@@ -10265,7 +10764,7 @@
   },
   {
     "content": "Can I use NextUI with other front-end frameworks or libraries, such as Vue or Angular?",
-    "objectID": "7941b131-48de-4280-bb17-294e1809e947",
+    "objectID": "2940e2d9-0e3b-4fb4-b3c1-7cb23daf5c3b",
     "type": "lvl3",
     "url": "/docs/guide/introduction#can-i-use-nextui-with-other-front-end-frameworks-or-libraries-such-as-vue-or-angular",
     "hierarchy": {
@@ -10275,26 +10774,26 @@
     }
   },
   {
-    "content": "Why NextUI uses Framer Motion?",
-    "objectID": "15e1fcc9-407c-4312-9139-f01cbcd32df6",
+    "content": "Why does NextUI use Framer Motion?",
+    "objectID": "d76533f7-0ca8-40cd-b77a-80f708d8d744",
     "type": "lvl3",
-    "url": "/docs/guide/introduction#why-nextui-uses-framer-motion",
+    "url": "/docs/guide/introduction#why-does-nextui-use-framer-motion",
     "hierarchy": {
       "lvl1": "Introduction",
       "lvl2": "Can I use NextUI with other front-end frameworks or libraries, such as Vue or Angular?",
-      "lvl3": "Why NextUI uses Framer Motion?"
+      "lvl3": "Why does NextUI use Framer Motion?"
     }
   },
   {
     "content": "Community",
-    "objectID": "c133e6a4-e43c-438b-a043-fefd8bd7f266",
+    "objectID": "1cbcb410-0895-44cc-8a41-7f4242538a8f",
     "type": "lvl2",
     "url": "/docs/guide/introduction#community",
     "hierarchy": { "lvl1": "Introduction", "lvl2": "Community", "lvl3": null }
   },
   {
     "content": "Contributing",
-    "objectID": "a2044d56-b279-4bb9-9c3d-82f583206cfc",
+    "objectID": "404efed4-330b-4a8d-930b-5ae47363253d",
     "type": "lvl2",
     "url": "/docs/guide/introduction#contributing",
     "hierarchy": {
@@ -10305,57 +10804,53 @@
   },
   {
     "content": "Routing",
-    "objectID": "0404cabb-386c-4653-bdb3-07633b1d603a",
+    "objectID": "b02be4cb-e596-44ca-8f81-3533a3d8e1be",
     "type": "lvl1",
     "url": "/docs/guide/routing",
     "hierarchy": { "lvl1": "Routing" }
   },
   {
     "content": "Introduction",
-    "objectID": "d81aecea-e129-4fd3-ba43-46ccf9313f8f",
+    "objectID": "caaf1ce0-1bc6-4ac3-b086-a4334a373a31",
     "type": "lvl2",
     "url": "/docs/guide/routing#introduction",
     "hierarchy": { "lvl1": "Routing", "lvl2": "Introduction", "lvl3": null }
   },
   {
     "content": "NextUIProvider Setup",
-    "objectID": "c3cb7137-58df-4e4b-80d4-1c4c6b9e1560",
-    "type": "lvl3",
+    "objectID": "251cc161-b490-4bdf-9014-a6a8b4914118",
+    "type": "lvl2",
     "url": "/docs/guide/routing#nextuiprovider-setup",
     "hierarchy": {
       "lvl1": "Routing",
-      "lvl2": "Introduction",
-      "lvl3": "NextUIProvider Setup"
+      "lvl2": "NextUIProvider Setup",
+      "lvl3": null
     }
   },
   {
     "content": "Next.js",
-    "objectID": "4a84e80f-0f22-4ab1-871d-00d1ae7b65bf",
-    "type": "lvl3",
+    "objectID": "6ea17e7e-dc90-47d7-8ed7-cb501e4d5ca4",
+    "type": "lvl2",
     "url": "/docs/guide/routing#nextjs",
-    "hierarchy": {
-      "lvl1": "Routing",
-      "lvl2": "NextUIProvider Setup",
-      "lvl3": "Next.js"
-    }
+    "hierarchy": { "lvl1": "Routing", "lvl2": "Next.js", "lvl3": null }
   },
   {
     "content": "App Router",
-    "objectID": "d61d5850-5e6f-47f9-81e7-a4cf6f25d899",
-    "type": "lvl4",
+    "objectID": "5825fa3b-bd9f-49f8-9c50-e044adb52aa9",
+    "type": "lvl3",
     "url": "/docs/guide/routing#app-router",
-    "hierarchy": { "lvl1": "Routing", "lvl2": "Next.js", "lvl3": null }
+    "hierarchy": { "lvl1": "Routing", "lvl2": "Next.js", "lvl3": "App Router" }
   },
   {
     "content": "Add the `useRouter`",
-    "objectID": "a1e51f32-71a2-4929-89b8-9d235cceef31",
+    "objectID": "618dfed9-dd4d-42f7-9b9c-e30e3a7ce193",
     "type": "lvl4",
     "url": "/docs/guide/routing#add-the-userouter",
     "hierarchy": { "lvl1": "Routing", "lvl2": "App Router", "lvl3": null }
   },
   {
     "content": "Add Provider to Root",
-    "objectID": "7a5c9aa4-1e39-455a-9734-cb3170c34763",
+    "objectID": "7f1742cc-47d8-4078-acb2-341c38a7024c",
     "type": "lvl4",
     "url": "/docs/guide/routing#add-provider-to-root",
     "hierarchy": {
@@ -10365,10 +10860,10 @@
     }
   },
   {
-    "content": "Pages Router",
-    "objectID": "56a30ee3-c206-4b1c-bf8b-15f77a04b536",
+    "content": "Add useHref (Optional)",
+    "objectID": "2b7a1096-e967-495f-8d47-84ea88b3e15e",
     "type": "lvl4",
-    "url": "/docs/guide/routing#pages-router",
+    "url": "/docs/guide/routing#add-usehref-optional",
     "hierarchy": {
       "lvl1": "Routing",
       "lvl2": "Add Provider to Root",
@@ -10376,44 +10871,54 @@
     }
   },
   {
-    "content": "React Router",
-    "objectID": "a52d4a9c-109e-455c-8a5f-bb4fb9d17ca7",
+    "content": "Pages Router",
+    "objectID": "d0fdc1a7-c3c6-4cfb-8126-35cdf6101927",
     "type": "lvl3",
-    "url": "/docs/guide/routing#react-router",
+    "url": "/docs/guide/routing#pages-router",
     "hierarchy": {
       "lvl1": "Routing",
-      "lvl2": "Pages Router",
-      "lvl3": "React Router"
+      "lvl2": "Add useHref (Optional)",
+      "lvl3": "Pages Router"
     }
   },
+  {
+    "content": "React Router",
+    "objectID": "0f39e4d0-bae2-419f-a1f8-54b173f7b8f3",
+    "type": "lvl2",
+    "url": "/docs/guide/routing#react-router",
+    "hierarchy": { "lvl1": "Routing", "lvl2": "React Router", "lvl3": null }
+  },
   {
     "content": "Remix",
-    "objectID": "dd0caa40-b646-46f2-91fd-684c388b81f4",
-    "type": "lvl3",
+    "objectID": "6a4ddd1a-4907-4bf6-852d-a4e1401150e5",
+    "type": "lvl2",
     "url": "/docs/guide/routing#remix",
-    "hierarchy": { "lvl1": "Routing", "lvl2": "React Router", "lvl3": "Remix" }
+    "hierarchy": { "lvl1": "Routing", "lvl2": "Remix", "lvl3": null }
+  },
+  {
+    "content": "TanStack",
+    "objectID": "8941adbd-c59d-4289-ad36-79327e55db0a",
+    "type": "lvl2",
+    "url": "/docs/guide/routing#tanstack",
+    "hierarchy": { "lvl1": "Routing", "lvl2": "TanStack", "lvl3": null }
   },
   {
     "content": "Usage examples",
-    "objectID": "73dab319-8b4c-47bb-92ab-3ddea402590c",
-    "type": "lvl3",
+    "objectID": "3515b496-832b-41cc-8b9f-027c9f099fae",
+    "type": "lvl2",
     "url": "/docs/guide/routing#usage-examples",
-    "hierarchy": {
-      "lvl1": "Routing",
-      "lvl2": "Remix",
-      "lvl3": "Usage examples"
-    }
+    "hierarchy": { "lvl1": "Routing", "lvl2": "Usage examples", "lvl3": null }
   },
   {
     "content": "Upgrade to v2",
-    "objectID": "c995a668-cd77-49e6-ad9b-35179678bd69",
+    "objectID": "86737414-0586-42a3-86ba-a741f9ec3216",
     "type": "lvl1",
     "url": "/docs/guide/upgrade-to-v2",
     "hierarchy": { "lvl1": "Upgrade to v2" }
   },
   {
     "content": "Next.js upgrade steps",
-    "objectID": "990fbe8d-3644-4449-8f10-b4449dd5eb7d",
+    "objectID": "7f9293c1-b92f-4601-a2c0-330f98777374",
     "type": "lvl2",
     "url": "/docs/guide/upgrade-to-v2#nextjs-upgrade-steps",
     "hierarchy": {
@@ -10424,7 +10929,7 @@
   },
   {
     "content": "App directory Setup",
-    "objectID": "ede8cbcc-1175-4b9f-86e2-087282f44cd9",
+    "objectID": "3546c271-cadc-496d-a0ef-0506fa9a6f4f",
     "type": "lvl2",
     "url": "/docs/guide/upgrade-to-v2#app-directory-setup",
     "hierarchy": {
@@ -10435,7 +10940,7 @@
   },
   {
     "content": "Installation",
-    "objectID": "809746e7-dfcd-4d7a-8061-9761b4e96880",
+    "objectID": "9b88d2e0-18b4-45e7-a715-27da51ba7e9d",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#installation",
     "hierarchy": {
@@ -10444,20 +10949,31 @@
       "lvl3": "Installation"
     }
   },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "3a57f57b-7161-43c8-b6fb-ebcb1b70f6db",
+    "type": "lvl3",
+    "url": "/docs/guide/upgrade-to-v2#hoisted-dependencies-setup",
+    "hierarchy": {
+      "lvl1": "Upgrade to v2",
+      "lvl2": "Installation",
+      "lvl3": "Hoisted Dependencies Setup"
+    }
+  },
   {
     "content": "Tailwind CSS Setup",
-    "objectID": "71aa081d-d480-4dc5-bece-6784ae184633",
+    "objectID": "76b03efd-4ac0-4482-9545-3cb6ee2e2a83",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#tailwind-css-setup",
     "hierarchy": {
       "lvl1": "Upgrade to v2",
-      "lvl2": "Installation",
+      "lvl2": "Hoisted Dependencies Setup",
       "lvl3": "Tailwind CSS Setup"
     }
   },
   {
     "content": "Setup Provider",
-    "objectID": "523c7541-2fb1-42b9-b40f-425aa111f29b",
+    "objectID": "b1d710b9-4551-4772-96ad-a13e4089dac0",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#setup-provider",
     "hierarchy": {
@@ -10468,7 +10984,7 @@
   },
   {
     "content": "Add Provider to Root",
-    "objectID": "cabbdfe7-7783-43c5-938a-a672ff29d9c1",
+    "objectID": "3da86865-1020-4409-8725-4b03fa68ed0a",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#add-provider-to-root",
     "hierarchy": {
@@ -10479,7 +10995,7 @@
   },
   {
     "content": "Use NextUI Components",
-    "objectID": "d8f45caf-2c1f-4ae3-8208-2eab83e00c70",
+    "objectID": "457cbe55-8ca7-4ea6-bb2a-396a97adf6dc",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#use-nextui-components",
     "hierarchy": {
@@ -10488,20 +11004,9 @@
       "lvl3": "Use NextUI Components"
     }
   },
-  {
-    "content": "Setup pnpm (optional)",
-    "objectID": "f2d71f65-a7ff-4955-985d-feecf9ef5c96",
-    "type": "lvl3",
-    "url": "/docs/guide/upgrade-to-v2#setup-pnpm-optional",
-    "hierarchy": {
-      "lvl1": "Upgrade to v2",
-      "lvl2": "Use NextUI Components",
-      "lvl3": "Setup pnpm (optional)"
-    }
-  },
   {
     "content": "Pages Directory Setup",
-    "objectID": "bfa5e760-b183-4ecb-97e7-c7d7c9302590",
+    "objectID": "ee3adae5-da6b-4643-b1a4-d026c4c62b0d",
     "type": "lvl2",
     "url": "/docs/guide/upgrade-to-v2#pages-directory-setup",
     "hierarchy": {
@@ -10512,7 +11017,7 @@
   },
   {
     "content": "Installation",
-    "objectID": "95ebaa82-2423-4e38-8e45-54bca8f23fc7",
+    "objectID": "450cd6d1-649a-423d-b549-3c92ad9cecf8",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#installation-1",
     "hierarchy": {
@@ -10521,20 +11026,31 @@
       "lvl3": "Installation"
     }
   },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "f31900b2-8753-4196-aefa-05938002f9c4",
+    "type": "lvl3",
+    "url": "/docs/guide/upgrade-to-v2#hoisted-dependencies-setup-1",
+    "hierarchy": {
+      "lvl1": "Upgrade to v2",
+      "lvl2": "Installation",
+      "lvl3": "Hoisted Dependencies Setup"
+    }
+  },
   {
     "content": "Tailwind CSS Setup",
-    "objectID": "bfa27f3f-542c-4f0a-85d2-a35ea605e32a",
+    "objectID": "9dbd9403-296c-4524-a9da-68271aac3e40",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#tailwind-css-setup-1",
     "hierarchy": {
       "lvl1": "Upgrade to v2",
-      "lvl2": "Installation",
+      "lvl2": "Hoisted Dependencies Setup",
       "lvl3": "Tailwind CSS Setup"
     }
   },
   {
     "content": "Setup Provider",
-    "objectID": "61aad957-f7eb-4dcc-9f01-0b5c839e116f",
+    "objectID": "3946b174-2cbb-44d0-a551-30dfb801108f",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#setup-provider-1",
     "hierarchy": {
@@ -10545,7 +11061,7 @@
   },
   {
     "content": "Use NextUI Components",
-    "objectID": "5b5a1e07-4ea4-40ed-a8ae-d683596eb562",
+    "objectID": "f6124e7f-60ca-4eef-a3cf-532190b5c241",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#use-nextui-components-1",
     "hierarchy": {
@@ -10554,20 +11070,9 @@
       "lvl3": "Use NextUI Components"
     }
   },
-  {
-    "content": "Setup pnpm (optional)",
-    "objectID": "d7c1e4f9-bec8-4657-af00-ced36009ab66",
-    "type": "lvl3",
-    "url": "/docs/guide/upgrade-to-v2#setup-pnpm-optional-1",
-    "hierarchy": {
-      "lvl1": "Upgrade to v2",
-      "lvl2": "Use NextUI Components",
-      "lvl3": "Setup pnpm (optional)"
-    }
-  },
   {
     "content": "React upgrade steps",
-    "objectID": "cbd9597e-ee2b-4ebc-94bf-3b76adc925e0",
+    "objectID": "b3905f7b-77f9-42f7-87f0-5d8ceabd4566",
     "type": "lvl2",
     "url": "/docs/guide/upgrade-to-v2#react-upgrade-steps",
     "hierarchy": {
@@ -10578,7 +11083,7 @@
   },
   {
     "content": "Upgrade React version",
-    "objectID": "e245df9c-5db1-438d-bed9-d76eae317f3f",
+    "objectID": "4199b145-dac1-4b0b-96d7-706643ebbc03",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#upgrade-react-version",
     "hierarchy": {
@@ -10589,7 +11094,7 @@
   },
   {
     "content": "Install Framer motion",
-    "objectID": "44da2fdc-50c8-4a28-9205-434f8f670d5a",
+    "objectID": "ef778f69-5c80-44b6-a995-1385c7136cdf",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#install-framer-motion",
     "hierarchy": {
@@ -10598,20 +11103,31 @@
       "lvl3": "Install Framer motion"
     }
   },
+  {
+    "content": "Hoisted Dependencies Setup",
+    "objectID": "234c3efc-173f-4094-9551-4fb2f90ae374",
+    "type": "lvl3",
+    "url": "/docs/guide/upgrade-to-v2#hoisted-dependencies-setup-2",
+    "hierarchy": {
+      "lvl1": "Upgrade to v2",
+      "lvl2": "Install Framer motion",
+      "lvl3": "Hoisted Dependencies Setup"
+    }
+  },
   {
     "content": "TailwindCSS Setup",
-    "objectID": "c699d2b0-8d70-420b-959c-f79516fac368",
+    "objectID": "4ad10a62-fa6d-4a97-a509-4f3e6e3f6ffd",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#tailwindcss-setup",
     "hierarchy": {
       "lvl1": "Upgrade to v2",
-      "lvl2": "Install Framer motion",
+      "lvl2": "Hoisted Dependencies Setup",
       "lvl3": "TailwindCSS Setup"
     }
   },
   {
     "content": "Provider Setup",
-    "objectID": "d329cbc7-7c8f-4a65-b217-59eb64cbe1e3",
+    "objectID": "3a0f1eb7-dc53-4601-b4c7-c8a8203080e3",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#provider-setup",
     "hierarchy": {
@@ -10622,7 +11138,7 @@
   },
   {
     "content": "Use NextUI Components",
-    "objectID": "68a0680e-be28-4345-96aa-4cc6d56561db",
+    "objectID": "4469d00e-f102-447d-8efc-c675a3394458",
     "type": "lvl3",
     "url": "/docs/guide/upgrade-to-v2#use-nextui-components-2",
     "hierarchy": {
@@ -10630,16 +11146,5 @@
       "lvl2": "Provider Setup",
       "lvl3": "Use NextUI Components"
     }
-  },
-  {
-    "content": "Setup pnpm (optional)",
-    "objectID": "fb78381b-8294-436d-8440-0e67d4a1e812",
-    "type": "lvl3",
-    "url": "/docs/guide/upgrade-to-v2#setup-pnpm-optional-2",
-    "hierarchy": {
-      "lvl1": "Upgrade to v2",
-      "lvl2": "Use NextUI Components",
-      "lvl3": "Setup pnpm (optional)"
-    }
   }
 ]
diff --git a/apps/docs/config/site.ts b/apps/docs/config/site.ts
index c432f8dd64..b2bf8f37bf 100644
--- a/apps/docs/config/site.ts
+++ b/apps/docs/config/site.ts
@@ -32,7 +32,7 @@ export const siteConfig = {
   },
   links: {
     github: "https://github.com/nextui-org/nextui",
-    twitter: "https://twitter.com/getnextui",
+    twitter: "https://x.com/getnextui",
     docs: "https://nextui.org",
     discord: "https://discord.gg/9b6yyZKmH4",
     sponsor: "https://patreon.com/jrgarciadev",
diff --git a/apps/docs/content/blog/nextui-v2.mdx b/apps/docs/content/blog/nextui-v2.mdx
index 4724424f9e..3fe0dfd436 100644
--- a/apps/docs/content/blog/nextui-v2.mdx
+++ b/apps/docs/content/blog/nextui-v2.mdx
@@ -7,7 +7,7 @@ tags: ["nextui", "tailwindcss", "react", "nextjs", "react-server-components"]
 author:
   name: "Junior Garcia"
   username: "@jrgarciadev"
-  link: "https://twitter.com/jrgarciadev"
+  link: "https://x.com/jrgarciadev"
   avatar: "/avatars/junior-garcia.jpeg"
 ---
 
@@ -91,7 +91,7 @@ Thanks to the switch to TailwindCSS, **NextUI v2.0** now supports React Server C
 improves performance and allows you to use it with the latest versions of [React](https://reactjs.org/) and
 [Next.js](https://nextjs.org/).
 
-NextUI components already include the `use client;` directive so you can import them directly 
+NextUI components already include the `use client;` directive so you can import them directly
 in your React Server Components (RSC).
 
 ```jsx
diff --git a/apps/docs/content/blog/v2.1.0.mdx b/apps/docs/content/blog/v2.1.0.mdx
index d288a06ac7..ae7a9d02a0 100644
--- a/apps/docs/content/blog/v2.1.0.mdx
+++ b/apps/docs/content/blog/v2.1.0.mdx
@@ -7,7 +7,7 @@ tags: ["nextui", "select", "listbox", "scroll-shadow", "multi-select"]
 author:
   name: "Junior Garcia"
   username: "@jrgarciadev"
-  link: "https://twitter.com/jrgarciadev"
+  link: "https://x.com/jrgarciadev"
   avatar: "/avatars/junior-garcia.jpeg"
 ---
 
@@ -124,7 +124,7 @@ The new **Listbox** component includes:
 
 ### Custom Styles
 
-The Listbox components offers multiple customization options. 
+The Listbox components offers multiple customization options.
 
 <CodeDemo title="Custom Styles" files={listboxContent.customStyles} />
 
diff --git a/apps/docs/content/blog/v2.2.0.mdx b/apps/docs/content/blog/v2.2.0.mdx
index 5fc4833128..f65a94684b 100644
--- a/apps/docs/content/blog/v2.2.0.mdx
+++ b/apps/docs/content/blog/v2.2.0.mdx
@@ -7,7 +7,7 @@ tags: ["nextui", "autocomplete", "breadcrumbs", "client side router", "slider"]
 author:
   name: "Junior Garcia"
   username: "@jrgarciadev"
-  link: "https://twitter.com/jrgarciadev"
+  link: "https://x.com/jrgarciadev"
   avatar: "/avatars/junior-garcia.jpeg"
 ---
 
diff --git a/apps/docs/content/blog/v2.3.0.mdx b/apps/docs/content/blog/v2.3.0.mdx
index b8181d10a0..5301912c5d 100644
--- a/apps/docs/content/blog/v2.3.0.mdx
+++ b/apps/docs/content/blog/v2.3.0.mdx
@@ -7,7 +7,7 @@ tags: ["nextui", "cli", "date picker", "time input", "date input", "calendar"]
 author:
   name: "Junior Garcia"
   username: "@jrgarciadev"
-  link: "https://twitter.com/jrgarciadev"
+  link: "https://x.com/jrgarciadev"
   avatar: "/avatars/junior-garcia.jpeg"
 ---
 
@@ -209,7 +209,7 @@ Go to the [DateRangePicker documentation](/docs/components/date-range-picker) to
 
 ### Calendar Presets
 
-`Calendar` and `RangeCalendar` components support adding custom content at the top and bottom of the calendar, this is useful for adding presets or 
+`Calendar` and `RangeCalendar` components support adding custom content at the top and bottom of the calendar, this is useful for adding presets or
 custom actions to the calendar.
 
 Here's an example of how to add presets to the `Calendar` component:
@@ -299,7 +299,7 @@ export function Providers({children}: ProvidersProps) {
 
 ### Removal of the `units` creation
 
-To improve performance and reduce bundle size, we have removed the `units` creation from the 
+To improve performance and reduce bundle size, we have removed the `units` creation from the
 `nextui` plugin. [TailwindCSS v3.4](https://tailwindcss.com/blog/tailwindcss-v3-4) added support for `min-h-*` and `min-w-*` classes, so it is no longer needed.
 
 How to upgrade:
@@ -339,7 +339,7 @@ export const MyButton = () => {
 
 ### Separation for `errorMessage` and `isInvalid`
 
-We are currently working on supporting multiple types of validation, including native HTML constraint validation, custom validation, and real-time validation. 
+We are currently working on supporting multiple types of validation, including native HTML constraint validation, custom validation, and real-time validation.
 Due to this reason, the requirements for displaying error messages have become more varied, and it is necessary to handle validation conditions separately from the `errorMessage`.
 
 How to upgrade:
@@ -381,7 +381,7 @@ That's it! Your project should now be using the latest version of TailwindCSS an
 **Improvements**
 - Framer Motion was updated to the latest version, improving performance and reducing bundle size. [Docs](https://www.framer.com/motion/guide-reduce-bundle-size/) [PR](https://github.com/nextui-org/nextui/pull/2464) - [@mezotv](https://github.com/mezotv)
 - `LazyMotion` was added to all components that use Framer Motion, improving performance by only loading the required motion components.
-- We removed the custom `units` creation from the `nextui` plugin, it is no longer needed with TailwindCSS v3.4 and above. [PR](https://github.com/nextui-org/nextui/pull/2713) - [@jrgarciadev](https://github.com/jrgarciadev) 
+- We removed the custom `units` creation from the `nextui` plugin, it is no longer needed with TailwindCSS v3.4 and above. [PR](https://github.com/nextui-org/nextui/pull/2713) - [@jrgarciadev](https://github.com/jrgarciadev)
 - Updated `framer-motion` package across various components and utilities to version `11.0.22` for enhanced performance and consistency. [PR](https://github.com/nextui-org/nextui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
 - Ensured compatibility with `react@18.2.0` and `react-dom@18.2.0` across the board. [PR](https://github.com/nextui-org/nextui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
 - Introduced patches for NextUI components to improve animations, including support for keyframes with spring and inertia animations. [PR](https://github.com/nextui-org/nextui/pull/2596) - [@wingkwong](https://github.com/wingkwong)
@@ -402,8 +402,8 @@ That's it! Your project should now be using the latest version of TailwindCSS an
 - Layout docs updated to remove the `units` configuration from the `tailwind.config.(js|ts)` file.
 
 
-Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba), 
-[@sudongyuer](https://github.com/sudongyuer), [@winchesHe](https://github.com/winchesHe), [@wingkwong](https://github.com/wingkwong), 
+Special thanks to NextUI Team members [@kuri-sun](https://github.com/kuri-sun), [@ryo-manba](https://github.com/ryo-manba),
+[@sudongyuer](https://github.com/sudongyuer), [@winchesHe](https://github.com/winchesHe), [@wingkwong](https://github.com/wingkwong),
 [@tianenpang](https://github.com/tianenpang), [@smultar](https://github.com/smultar) and contributors for their contributions to this release.
 
 For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.3.0).
diff --git a/apps/docs/content/blog/v2.6.0.mdx b/apps/docs/content/blog/v2.6.0.mdx
new file mode 100644
index 0000000000..f492d96b2f
--- /dev/null
+++ b/apps/docs/content/blog/v2.6.0.mdx
@@ -0,0 +1,751 @@
+---
+title: "NextUI v2.6.0 🔥"
+description: "4 new components Form, Drawer, Input OTP and Alert, React 19 & Next.js 15 support, and lots of bug fixes and improvements."
+date: "2024-12-06"
+image: "/blog/v2.6.0.jpg"
+tags: ["nextui", "v2.6.0", "release", "bug fixes", "improvements", "animations"]
+author:
+  name: "Junior Garcia"
+  username: "@jrgarciadev"
+  link: "https://x.com/jrgarciadev"
+  avatar: "/avatars/junior-garcia.jpeg"
+---
+
+import {formContent} from "@/content/components/form";
+import {drawerContent} from "@/content/components/drawer";
+import {inputOtpContent} from "@/content/components/input-otp";
+import {alertContent} from "@/content/components/alert";
+import {autocompleteContent} from "@/content/components/autocomplete";
+import {modalContent} from "@/content/components/modal";
+
+<img
+  src="/blog/v2.6.0_2x.jpg"
+  width={700}
+  height={350}
+  alt="NextUI v2.6.0"
+  className="w-full border border-transparent dark:border-default-200/50 object-fit rounded-xl shadow-lg"
+/>
+
+NextUI version **v2.6.0** comes with 4 new components **Form**, **Drawer**, **Input OTP** and **Alert**, React 19 & Next.js 15 support, and lots of bug fixes and improvements.
+
+## What's New in v2.6.0?
+
+- [Form Component](#form-component) - A form component with built-in validation, submission handling, and accessibility features.
+- [Drawer Component](#drawer-component) - A sliding panel component with multiple placement options and focus management.
+- [Input OTP Component](#input-otp-component) - An accessible one-time password input with focus management.
+- [Alert Component](#alert-component) - A component for displaying messages with accessibility and keyboard navigation support.
+- [Collection-based components Virtualization](#collection-based-components-virtualization) - Performance improvements for large datasets in Select, Autocomplete & Listbox components.
+- [React 19 Support & Library Upgrades](#react-19-support--library-upgrades) - Support for React 19 and upgrades to various dependencies.
+- [New use-theme hook](#new-use-theme-hook) - A new hook for runtime theme management.
+- [Draggable Modal](#draggable-modal) - Support for draggable modal functionality.
+- [Router Improvements](#router-improvements) - Enhanced routing capabilities and TypeScript support.
+- [API Improvements](#api-improvements) - New features and props across multiple components.
+- [What's Next?](#whats-next) - Upcoming features and improvements.
+- [Breaking Changes](#-breaking-changes) - Important changes that may affect existing implementations.
+- [Release Changes](#release-changes) - Detailed list of features, documentation updates, bug fixes and enhancements.
+
+<Spacer y={4} />
+
+Upgrade today by running one of the following commands:
+
+<Spacer y={4} />
+
+<PackageManagers
+  commands={{
+    cli: "nextui upgrade --all",
+    npm: "npx nextui-cli@latest upgrade --all",
+  }}
+/>
+
+<Spacer y={4} />
+
+## Form Component
+
+Built on [React Aria's Form](https://react-spectrum.adobe.com/react-aria/forms.html#forms) component, the [Form](/docs/components/forms) component provides accessible form handling with built-in submission, validation and error management.
+
+<Spacer y={4} />
+
+<CodeDemo title="Usage" showEditor={false} files={formContent.demo} />
+
+### Built-in Validation
+
+You can use native HTML validation attributes or create custom validation rules.
+
+```tsx
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  return (
+    <Form validationBehavior="native">
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        name="email"
+        type="email"
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Usage" showEditor={false} files={formContent.usage} />
+
+### Real-time Validation
+
+You can validate the form data while users are typing.
+
+```tsx
+function Example() {
+  const [password, setPassword] = React.useState("");
+  const errors = [];
+
+  if (password.length < 4) {
+    errors.push("Password must be 4 characters or more.");
+  }
+  if ((password.match(/[A-Z]/g) || []).length < 1) {
+    errors.push("Password must include at least 1 upper case letter");
+  }
+  if ((password.match(/[^a-z]/gi) || []).length < 1) {
+    errors.push("Password must include at least 1 symbol.");
+  }
+
+  return (
+    <Input
+      errorMessage={() => (
+        <ul>
+          {errors.map((error, i) => (
+            <li key={i}>{error}</li>
+          ))}
+        </ul>
+      )}
+      isInvalid={errors.length > 0}
+      label="Password"
+      labelPlacement="outside"
+      placeholder="Enter your password"
+      value={password}
+      variant="bordered"
+      onValueChange={setPassword}
+    />
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Real-time Validation" showEditor={false} files={formContent.realTimeValidation} />
+
+### Server Integration
+
+The Form components works seamlessly with React Server Actions.
+
+```tsx
+"use client";
+
+import {useActionState} from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+export function AddForm() {
+  const [{errors}, formAction] = useActionState(createTodo, {
+    errors: {},
+  });
+
+  return (
+    <Form action={formAction} validationErrors={errors}>
+      <Input name="todo" label="Task" />
+      <Button type="submit">Add</Button>
+    </Form>
+  );
+}
+```
+
+### Form Libraries Support
+
+You can also use popular form libraries like `react-hook-form` and `formik`.
+
+```tsx
+import {Controller, useForm} from "react-hook-form";
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  const {handleSubmit, control} = useForm({
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  return (
+    <Form onSubmit={handleSubmit((data) => console.log(data))}>
+      <Controller
+        control={control}
+        name="name"
+        rules={{required: "Name is required"}}
+        render={({field, fieldState}) => (
+          <Input
+            {...field}
+            label="Name"
+            isInvalid={fieldState.invalid}
+            errorMessage={fieldState.error?.message}
+          />
+        )}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Accessibility Built-in
+
+The `Form` component automatically handles ARIA attributes and keyboard navigation, making your forms usable by everyone:
+
+```tsx
+function Example() {
+  return (
+    <Form>
+      <Input
+        label="Username"
+        description="Choose a unique username"
+        isRequired
+        errorMessage="Username is required"
+        // Automatically adds aria-required, aria-invalid, and aria-describedby
+      />
+      <Input
+        label="Password"
+        type="password"
+        description="Must be at least 8 characters"
+        // Help text is automatically linked via aria-describedby
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Schema validation
+
+The `Form` component supports errors from schema validation libraries like [Zod](https://zod.dev/).
+You can use Zod's `flatten` method to get error messages for each field and return them as part of the server response.
+
+```tsx {14}
+// In your server.
+import {z} from "zod";
+
+const schema = z.object({
+  name: z.string().min(1),
+  age: z.coerce.number().positive(),
+});
+
+function handleRequest(formData: FormData) {
+  const result = schema.safeParse(Object.fromEntries(formData));
+
+  if (!result.success) {
+    return {
+      errors: result.error.flatten().fieldErrors,
+    };
+  }
+
+  // Do something with the validated data.
+
+  return {
+    errors: {},
+  };
+}
+```
+
+<Spacer y={4} />
+
+```tsx {13}
+// In your client.
+import {useFormState} from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+import {handleRequest} from "./server";
+
+function Example() {
+  const [formState, formAction] = useFormState(handleRequest, {
+    errors: {},
+  });
+
+  return (
+    <Form action={formAction} validationErrors={formState.errors}>
+      <Input isRequired label="Name" name="name" />
+      <Input isRequired label="Age" name="age" type="number" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+### Key Features
+
+- **Server Integration**: Works seamlessly with React Server Actions
+- **Schema Validation**: Supports Zod schema validation
+- **Form Libraries Support**: Supports popular form libraries like `react-hook-form` and `formik`
+- **Accessibility**: Built-in accessibility features including ARIA attributes and keyboard navigation
+
+Check out our [Forms documentation](/docs/components/forms) for a deep dive into all the features and capabilities.
+
+<Spacer y={4} />
+
+## Drawer Component
+
+The new [Drawer](/docs/components/drawer) component displays a sliding panel from the screen edge with supplementary content, featuring built-in accessibility, focus management, and keyboard navigation.
+
+```tsx
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button
+        color="primary"
+        endContent={
+          <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.75 1.25a.75.75 0 1 0-1.5 0v.823l-.392.044c-.9.121-1.658.38-2.26.982s-.861 1.36-.982 2.26C.5 6.225.5 7.328.5 8.695v.11l.117 3.337c.121.9.38 1.658.982 2.26s1.36.861 2.26.982c.867.117 1.969.117 3.337.117h1.658l3.337-.117c.9-.121 1.658-.38 2.26-.982s.861-1.36.982-2.26c.117-.867.117-1.969.117-3.337v-.11l-.117-3.337c-.121-.9-.38-1.658-.982-2.26s-1.36-.861-2.26-.982l-.44-.048V1.25a.75.75 0 0 0-1.5 0v.756L8.853 2H7.195q-.78-.002-1.445.006zm4.5 3v-.744L8.798 3.5H7.25l-1.5.007v.743a.75.75 0 1 1-1.5 0v-.67l-.192.023c-.734.099-1.122.279-1.399.556s-.457.665-.556 1.399C2.002 6.313 2 7.315 2 8.75l.103 3.192c.099.734.279 1.122.556 1.399s.665.457 1.399.556c.755.101 1.756.103 3.192.103h1.548l3.192-.103c.734-.099 1.122-.279 1.399-.556s.457-.665.556-1.399c.102-.755.103-1.757.103-3.192l-.103-3.192c-.099-.734-.279-1.122-.556-1.399s-.665-.457-1.399-.556l-.241-.028v.675a.75.75 0 0 1-1.5 0zm-5 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0m0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M8 8.5A.75.75 0 1 0 8 7a.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M11.5 8.5a.75.75 0 1 0 0-1.5.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        }
+        variant="flat"
+        onPress={onOpen}
+      >
+        See Event
+      </Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader>Drawer Title</DrawerHeader>
+              <DrawerBody>{/* Drawer content goes here */}</DrawerBody>
+              <DrawerFooter>{/* Drawer footer content goes here */}</DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Drawer Usage" showEditor={false} files={drawerContent.customStyles} />
+
+### Key Features
+
+- **Multiple Placements**: Can be positioned on any edge of the screen (left, right, top, bottom)
+- **Customizable Sizes**: Comes with preset sizes from xs to 5xl, plus full-width option
+- **Backdrop Options**: Supports transparent, opaque, or blur backdrop styles
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Form Validation**: Supports built-in validation states and custom validation rules for form inputs
+
+See the [Drawer documentation](/docs/components/drawer) for more details and examples.
+
+<Spacer y={4} />
+
+## Input OTP Component
+
+The [Input OTP](/docs/components/input-otp) component provides an accessible way to enter one-time passwords with built-in focus management and keyboard navigation. It is built on top of the [input-otp](https://github.com/guilhermerodz/input-otp) library by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+```tsx
+import {Button, InputOtp, Form} from "@nextui-org/react";
+
+export default function App() {
+  const [otp, setOtp] = React.useState("");
+
+  return (
+    <Form
+      className="flex w-full flex-col items-start gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const otp = formData.get("otp");
+
+        setOtp(otp);
+      }}
+    >
+      <InputOtp
+        isRequired
+        aria-label="OTP input field"
+        length={4}
+        name="otp"
+        placeholder="Enter code"
+        validationBehavior="native"
+      />
+      <Button size="sm" type="submit" variant="bordered">
+        Submit
+      </Button>
+      {otp && <div className="text-small text-default-500">OTP submitted: {otp}</div>}
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Input OTP Usage" showEditor={false} files={inputOtpContent.required} />
+
+### Key Features
+
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Customizable Animations**: Supports custom motion animations through Framer Motion
+- **Form Integration**: Seamlessly works with form elements while maintaining proper focus management
+
+See the [Input OTP documentation](/docs/components/input-otp) for more details and examples.
+
+<Spacer y={4} />
+
+## Alert Component
+
+The [Alert](/docs/components/alert) component allows users to display messages to the user. It's built with accessibility in mind and includes features like focus management, keyboard navigation, and screen reader support.
+
+```tsx
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Alert
+      color="success"
+      variant="faded"
+      title="This is an alert"
+      description="Thanks for subscribing to our newsletter!"
+    />
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Alert Usage" showEditor={false} files={alertContent.controlled} />
+
+### Key Features
+
+- **Focus Management**: Automatically handles focus trapping and restoration
+- **Keyboard Navigation**: Built-in support for Esc key dismissal and keyboard navigation
+- **Customizable Animations**: Supports custom motion animations through Framer Motion
+- **Form Integration**: Seamlessly works with form elements while maintaining proper focus management
+
+See the [Alert documentation](/docs/components/alert) for more details and examples.
+
+<Spacer y={4} />
+
+## Collection-based components Virtualization
+
+[Select](/docs/components/select), [Autocomplete](/docs/components/autocomplete) & [Listbox](/docs/components/listbox) components now support virtualization to improve performance on large collections.
+
+<CodeDemo title="Virtualization" highlightedLines="41" files={autocompleteContent.virtualization} />
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+
+See the [Autocomplete documentation](/docs/components/autocomplete) for more details and examples.
+
+<Spacer y={4} />
+
+## React 19 Support & Library Upgrades
+
+- In preparation for [React 19](https://react.dev/blog/2024/12/05/react-19), NextUI is now compatible with React 19 RC and Next.js 15.
+- React Aria packages upgrades and fixes the exact versions of React Aria, React Flow, React Hook Form, React Router, React Server, React Use, Tanstack Query, Tanstack Virtual, and Tanstack Table
+- Framer Motion is now **only** added to the final bundle when the animations are enabled and we also added support for [Framer motion v12](https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion)
+
+<Spacer y={4} />
+
+## New use-theme hook
+
+We created our own `use-theme` hook that replaces `use-dark-theme` hook to allow users to change the theme at runtime.
+
+```jsx
+// App.tsx or App.jsx
+import React from "react";
+import {useTheme} from "@nextui-org/use-theme";
+
+export default function App() {
+  const {theme} = useTheme();
+
+  return (
+    <main className={`${theme} text-foreground bg-background`}>
+      <App />
+    </main>
+  );
+}
+```
+
+<Spacer y={4} />
+
+```jsx
+// components/ThemeSwitcher.tsx
+import {useTheme} from "@nextui-org/use-theme";
+
+export const ThemeSwitcher = () => {
+  const {theme, setTheme} = useTheme();
+
+  return (
+    <div>
+      The current theme is: {theme}
+      <button onClick={() => setTheme("light")}>Light Mode</button>
+      <button onClick={() => setTheme("dark")}>Dark Mode</button>
+    </div>
+  );
+};
+```
+
+See the [Dark Mode documentation](/docs/customization/dark-mode) for more details and examples.
+
+<Spacer y={4} />
+
+## Draggable Modal
+
+Added support for draggable modals.
+
+<CodeDemo title="Draggable Modal" files={modalContent.draggable} />
+
+<Spacer y={4} />
+
+> **Note**: The modal is draggable only from the header part.
+
+## Router Improvements
+
+NextUI now provides enhanced routing capabilities with better TypeScript support and integration with popular routing solutions:
+
+- **Path Type Safety**: All router-based components now support path intellisense when using TypeScript
+- **Router Options Support**: Added `routerOptions` prop to all link components for controlling navigation behavior
+- **Enhanced Router Configuration**: Global type configuration for router options through TypeScript:
+
+```tsx
+// Example with Next.js App Router
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>["push"]>[1]>;
+  }
+}
+```
+
+- **Improved Base Path Support**: Better handling of base paths through the new `useHref` prop in `NextUIProvider`
+- **Framework-specific Optimizations**: Built-in support for Next.js (both App and Pages Router), React Router, Remix, and TanStack Router
+
+See the [Routing documentation](/docs/guides/routing) for more details.
+
+<Spacer y={4} />
+
+## API Improvements
+
+### NextUIProvider
+
+- `useHref` (added) - Converts a router-specific href to a native href for use on DOM elements. For example, if your router accepts relative paths or custom link formats, useHref will generate the full native href based on the RouterProvider's configuration.
+- `navigate` (modified) - `((path: Href, routerOptions?: RouterOptions) => void) | undefined` - we added the router options
+- `reduceMotion` (added) - Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. The available options are:
+
+### DatePicker
+
+- `selectorButtonPlacement` (added) - Controls the placement of selector buttons
+- `showMonthAndYearPickers` (added) - Controls visibility of month and year picker dropdowns
+
+### Tabs
+
+- `tabRef` (added) - Allows accessing the underlying tab element via ref
+
+### Popover
+
+- `shouldCloseOnScroll` (added) - Controls whether popover should close when scrolling
+
+### Table
+
+- `isKeyboardNavigationDisabled` (added) - Disables keyboard navigation in tables
+
+### Textarea
+
+- `isClearable` (added) - Adds clear button functionality to textarea
+
+### Select
+
+- `hideEmptyContent` (added) - Controls visibility of empty content message
+- Added virtualization support for improved performance with large datasets
+
+### Autocomplete & Listbox
+
+- Added virtualization support for improved performance with large datasets
+
+### Modal
+
+- Added support for draggable modals (draggable from header)
+
+See the [NextUIProvider documentation](/docs/api-references/nextui-provider) for more details.
+
+<Spacer y={4} />
+
+## What's Next?
+
+- **Rebranding** - We're preparing a rebranding of NextUI to ensure long-term sustainability and avoid potential naming conflicts
+- **Update NextUI Pro** - We're working on a new version of NextUI Pro that will be compatible with Next.js 15 and React 19. Follow progress [here](https://feedback.nextui.pro/roadmap)
+- **Tailwind CSS v4** support - Read more [here](https://tailwindcss.com/docs/v4-beta)
+- **React 19** internal APIs migration - Read more [here](https://react.dev/blog/2024/12/05/react-19)
+- **Toast** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **Rating** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **File Upload** component - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+- **Upgrade** to the latest React Aria - Read more [here](https://react-spectrum.adobe.com/releases/2024-11-20.html)
+- **Complete Figma components** - Follow progress [here](https://nextuioss.featurebase.app/roadmap)
+
+## 🚨 Breaking Changes
+
+We try to keep the breaking changes to a minimum, but sometimes it's necessary to make changes to the API to improve the developer experience.
+
+#### Table Theme Group Data Selectors
+
+The nested group selectors for table themes have been updated to require explicit element selectors. You'll need to add `/tr` or `/th` to custom styles for group-data.
+
+Before:
+
+```css
+group-data-[disabled=true]: text-foreground-300;
+```
+
+After:
+
+```css
+group-data-[disabled=true]/tr: text-foreground-300;
+```
+
+#### Circular Progress Theme Location
+
+The circular progress Tailwind variants have been moved from `circular-progress` to `progress`. You'll need to update your Tailwind CSS configuration:
+
+Before:
+
+```js
+"./node_modules/@nextui-org/theme/dist/components/circular-progress.js";
+```
+
+After:
+
+```js
+"./node_modules/@nextui-org/theme/dist/components/progress.js";
+```
+
+<Spacer y={4} />
+
+## Release Changes
+
+**Features**:
+
+- Added Alert component by [@jrgarciadev](https://github.com/jrgarciadev) and [@abhinav700](https://github.com/abhinav700) in [PR #3982](https://github.com/nextui-org/nextui/pull/3982), [PR #3680](https://github.com/nextui-org/nextui/pull/3680), [PR #4071](https://github.com/nextui-org/nextui/pull/4071), and [PR #4073](https://github.com/nextui-org/nextui/pull/4073)
+- Added Draggable modal by [@jrgarciadev](https://github.com/jrgarciadev) and [@wzc520pyfm](https://github.com/wzc520pyfm) in [PR #3983](https://github.com/nextui-org/nextui/pull/3983) and [PR #2818](https://github.com/nextui-org/nextui/pull/2818)
+- Added Drawer component by [@jrgarciadev](https://github.com/jrgarciadev) and [@1111mp](https://github.com/1111mp) in [PR #3986](https://github.com/nextui-org/nextui/pull/3986), [PR #2223](https://github.com/nextui-org/nextui/pull/2223) and [PR #4057](https://github.com/nextui-org/nextui/pull/4057)
+- Added InputOTP component by [@macci001](https://github.com/macci001) in [PR #4052](https://github.com/nextui-org/nextui/pull/4052)
+- Added Form component by [@ryo-manba](https://github.com/ryo-manba) in [PR #3036](https://github.com/nextui-org/nextui/pull/3036)
+- Added `selectorButtonPlacement` prop to date-picker by [@ryo-manba](https://github.com/ryo-manba) in [PR #3248](https://github.com/nextui-org/nextui/pull/3248)
+- Added `tabRef` prop to tabs by [@winchesHe](https://github.com/winchesHe) in [PR #3974](https://github.com/nextui-org/nextui/pull/3974)
+- Added `shouldCloseOnScroll` prop to popover by [@awesome-pro](https://github.com/awesome-pro) in [PR #3595](https://github.com/nextui-org/nextui/pull/3595)
+- Added `showMonthAndYearPickers` prop to date-range-picker and range-calendar by [@ryo-manba](https://github.com/ryo-manba) in [PR #3302](https://github.com/nextui-org/nextui/pull/3302)
+- Added `use-theme` hook by [@wingkwong](https://github.com/wingkwong) in [PR #3169](https://github.com/nextui-org/nextui/pull/3169)
+- Added `isKeyboardNavigationDisabled` prop in Table by [@macci001](https://github.com/macci001) in [PR #3735](https://github.com/nextui-org/nextui/pull/3735)
+- Added `reducedMotion` to Provider by [@ryo-manba](https://github.com/ryo-manba) in [PR #3470](https://github.com/nextui-org/nextui/pull/3470)
+- Added `isClearable` to Textarea by [@jrgarciadev](https://github.com/jrgarciadev) and [@IsDyh01](https://github.com/IsDyh01) in [PR #4172](https://github.com/nextui-org/nextui/pull/4172) and [PR #3477](https://github.com/nextui-org/nextui/pull/3477)
+- Added `hideEmptyContent` to Select by [@Peterl561](https://github.com/Peterl561) in [PR #4219](https://github.com/nextui-org/nextui/pull/4219)
+
+**Documentation**:
+
+- Improved performance by implementing `useIntersectionObserver` for code blocks - now they only load when visible in viewport
+- Enhanced readability with style changes to provide more space and better visual hierarchy
+- Revamped API Table design:
+  - Moved descriptions into tooltips that appear right after titles
+  - Decreased font size for better scanning
+  - Improved color scheme for better contrast
+- Fixed broken links by [@wingkwong](https://github.com/wingkwong) in [PR #3796](https://github.com/nextui-org/nextui/pull/3796)
+- Fixed canary storybook links by [@wingkwong](https://github.com/wingkwong) in [PR #4030](https://github.com/nextui-org/nextui/pull/4030)
+- Fixed typos in dark mode page by [@wingkwong](https://github.com/wingkwong) in [PR #3823](https://github.com/nextui-org/nextui/pull/3823)
+- Fixed types for classNames and itemClasses by [@wingkwong](https://github.com/wingkwong) in [PR #4209](https://github.com/nextui-org/nextui/pull/4209)
+- Fixed typos in landing page by [@PentSec](https://github.com/PentSec) in [PR #3928](https://github.com/nextui-org/nextui/pull/3928)
+- Fixed typos in date picker page by [@dperconti](https://github.com/dperconti) in [PR #3516](https://github.com/nextui-org/nextui/pull/3516)
+- Fixed incorrect highlighted line in Select page by [@Choneas](https://github.com/Choneas) in [PR #3838](https://github.com/nextui-org/nextui/pull/3838)
+- Fixed unexpected translation in code block by [@nnmax](https://github.com/nnmax) in [PR #3878](https://github.com/nextui-org/nextui/pull/3878)
+- Fixed yarn command in installation page by [@AzpektDev](https://github.com/AzpektDev) in [PR #4132](https://github.com/nextui-org/nextui/pull/4132)
+- Added ethical ads by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #3803](https://github.com/nextui-org/nextui/pull/3803)
+- Added Form guide by [@ryo-manba](https://github.com/ryo-manba) in [PR #3882](https://github.com/nextui-org/nextui/pull/3882)
+- Enhanced overall DX for all pages by [@wingkwong](https://github.com/wingkwong) in [PR #4055](https://github.com/nextui-org/nextui/pull/4055)
+- Supported virtualization for Autocomplete by [@jrgarciadev](https://github.com/jrgarciadev) and [@vinroger](https://github.com/vinroger) in [PR #4094](https://github.com/nextui-org/nextui/pull/4094) and [PR #3444](https://github.com/nextui-org/nextui/pull/3444)
+- Supported virtualization for Select by [@vinroger](https://github.com/vinroger) in [PR #4203](https://github.com/nextui-org/nextui/pull/4203)
+- Supported virtualization for Listbox by [@vinroger](https://github.com/vinroger) in [PR #4206](https://github.com/nextui-org/nextui/pull/4206)
+- Optimized code fold by [@winchesHe](https://github.com/winchesHe) in [PR #4202](https://github.com/nextui-org/nextui/pull/4202)
+- Synced API from nextui-cli v0.3.5 by [@winchesHe](https://github.com/winchesHe) in [PR #4173](https://github.com/nextui-org/nextui/pull/4173)
+
+**Bug Fixes**:
+
+- Fixed avatar flashing issues by [@jrgarciadev](https://github.com/jrgarciadev) and [@rkkautsar](https://github.com/rkkautsar) in [PR #3987](https://github.com/nextui-org/nextui/pull/3987) and [PR #3444](https://github.com/nextui-org/nextui/pull/3444)
+- Fixed image ReferenceError in SSR by [@wingkwong](https://github.com/wingkwong) in [PR #4122](https://github.com/nextui-org/nextui/pull/4122)
+- Fixed navigate parameters by [@wingkwong](https://github.com/wingkwong) in [PR #4163](https://github.com/nextui-org/nextui/pull/4163)
+- Fixed missing peer / dev dependency for framer-motion by [@wingkwong](https://github.com/wingkwong) in [PR #4161](https://github.com/nextui-org/nextui/pull/4161)
+- Fixed menu item classNames by [@winchesHe](https://github.com/winchesHe) in [PR #4156](https://github.com/nextui-org/nextui/pull/4156)
+- Fixed controlled IsInvalid prop by [@chirokas](https://github.com/chirokas) in [PR #4082](https://github.com/nextui-org/nextui/pull/4082)
+- Fixed inert value with boolean type for React 19 by [@wingkwong](https://github.com/wingkwong) in [PR #4039](https://github.com/nextui-org/nextui/pull/4039)
+- Fixed typecheck errors by [@wingkwong](https://github.com/wingkwong) in [PR #4171](https://github.com/nextui-org/nextui/pull/4171)
+- Fixed tw nested group by [@wingkwong](https://github.com/wingkwong) in [PR #3909](https://github.com/nextui-org/nextui/pull/3909)
+- Fixed select styles consistent with input by [@macci001](https://github.com/macci001) in [PR #3881](https://github.com/nextui-org/nextui/pull/3881)
+- Fixed missing li tag when href is specified by [@macci001](https://github.com/macci001) in [PR #4168](https://github.com/nextui-org/nextui/pull/4168)
+- Fixed sliding issue caused by the helper wrapper by [@mstfblci](https://github.com/mstfblci) in [PR #3966](https://github.com/nextui-org/nextui/pull/3966)
+- Fixed element.ref warning in React 19 by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4003](https://github.com/nextui-org/nextui/pull/4003)
+- Fixed image load on NextJS by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #3998](https://github.com/nextui-org/nextui/pull/3998)
+- Fixed squish textarea label by [@Peterl561](https://github.com/Peterl561) in [PR #4197](https://github.com/nextui-org/nextui/pull/4197)
+- Fixed forwardRef render functions by [@winchesHe](https://github.com/winchesHe) in [PR #4198](https://github.com/nextui-org/nextui/pull/4198)
+- Fixed collection based components ref by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4207](https://github.com/nextui-org/nextui/pull/4207)
+- Fixed data-slot for select error message by [@jubar](https://github.com/jubar) in [PR #4214](https://github.com/nextui-org/nextui/pull/4214)
+- Fixed selection functionality on touch by [@macci001](https://github.com/macci001) in [PR #4220](https://github.com/nextui-org/nextui/pull/4220)
+- Fixed cursor position when hidden on init by [@Peterl561](https://github.com/Peterl561) in [PR #4222](https://github.com/nextui-org/nextui/pull/4222)
+
+**Enhancements**:
+
+- Automatically focus first non-disabled item by [@juliesaia](https://github.com/juliesaia) in [PR #2186](https://github.com/nextui-org/nextui/pull/2186)
+- Refactored RTL-specific styles by [@macci001](https://github.com/macci001) in [PR #3868](https://github.com/nextui-org/nextui/pull/3868)
+- Upgraded React Aria and Support NextJS 15 by [@ryo-manba](https://github.com/ryo-manba) in [PR #3732](https://github.com/nextui-org/nextui/pull/3732)
+- Upgraded tailwind-merge version by [@wingkwong](https://github.com/wingkwong) in [PR #3657](https://github.com/nextui-org/nextui/pull/3657)
+- Upgraded Storybook to v8 by [@winchesHe](https://github.com/winchesHe) in [PR #3946](https://github.com/nextui-org/nextui/pull/3946)
+- Optimized performance by [@wingkwong](https://github.com/wingkwong) in [PR #3523](https://github.com/nextui-org/nextui/pull/3523)
+- Applied `useMenu` and `useMenuItem` from `@react-aria` by [@wingkwong](https://github.com/wingkwong) in [PR #3261](https://github.com/nextui-org/nextui/pull/3261)
+- Revised label font size for lg by [@wingkwong](https://github.com/wingkwong) in [PR #4141](https://github.com/nextui-org/nextui/pull/4141)
+- Improved Form component by [@jrgarciadev](https://github.com/jrgarciadev) in [PR #4224](https://github.com/nextui-org/nextui/pull/4224)
+
+**Chore**:
+
+- Added git hook to auto update dependencies by [@winchesHe](https://github.com/winchesHe) in [PR #3365](https://github.com/nextui-org/nextui/pull/3365)
+- Added pre-release workflow by [@wingkwong](https://github.com/wingkwong) in [PR #2910](https://github.com/nextui-org/nextui/pull/2910)
+- Updated testing libraries by [@ryo-manba](https://github.com/ryo-manba) in [PR #3886](https://github.com/nextui-org/nextui/pull/3886)
+- Replaced VA by Posthog by [@wingkwong](https://github.com/wingkwong) in [PR #4123](https://github.com/nextui-org/nextui/pull/4123)
+- Moved circular-progress tv to progress by [@winchesHe](https://github.com/winchesHe) in [PR #3321](https://github.com/nextui-org/nextui/pull/3321)
+
+Special thanks to NextUI Team members [@wingkwong](https://github.com/wingkwong), [@macci001](https://github.com/macci001),
+[@ryo-manba](https://github.com/ryo-manba), [@winchesHe](https://github.com/winchesHe), [@tianenpang](https://github.com/tianenpang) and contributors for their contributions to this release.
+
+For a full list of changes, please refer to the [release notes](https://github.com/nextui-org/nextui/releases/tag/%40nextui-org%2Freact%402.4.0).
+
+<Spacer y={6} />
+
+Thanks for reading and happy coding! 🚀
+
+---
+
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback.
+Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+<Community />
+
+## Contributing
+
+PR's on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
diff --git a/apps/docs/content/components/accordion/bordered-variant.raw.jsx b/apps/docs/content/components/accordion/bordered-variant.raw.jsx
new file mode 100644
index 0000000000..c71627b118
--- /dev/null
+++ b/apps/docs/content/components/accordion/bordered-variant.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="bordered">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/bordered-variant.ts b/apps/docs/content/components/accordion/bordered-variant.ts
index ae6a966a41..0f6a0be605 100644
--- a/apps/docs/content/components/accordion/bordered-variant.ts
+++ b/apps/docs/content/components/accordion/bordered-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="bordered">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./bordered-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/compact.raw.jsx b/apps/docs/content/components/accordion/compact.raw.jsx
new file mode 100644
index 0000000000..1f25d41be8
--- /dev/null
+++ b/apps/docs/content/components/accordion/compact.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem Innei ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion isCompact>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/compact.ts b/apps/docs/content/components/accordion/compact.ts
index 8dcf23e04d..c3cdfc316e 100644
--- a/apps/docs/content/components/accordion/compact.ts
+++ b/apps/docs/content/components/accordion/compact.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion isCompact>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/controlled.raw.jsx b/apps/docs/content/components/accordion/controlled.raw.jsx
new file mode 100644
index 0000000000..8efb24bc1c
--- /dev/null
+++ b/apps/docs/content/components/accordion/controlled.raw.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/controlled.raw.tsx b/apps/docs/content/components/accordion/controlled.raw.tsx
new file mode 100644
index 0000000000..138e7bfff6
--- /dev/null
+++ b/apps/docs/content/components/accordion/controlled.raw.tsx
@@ -0,0 +1,24 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/controlled.ts b/apps/docs/content/components/accordion/controlled.ts
index 23a50039f3..1f1a363363 100644
--- a/apps/docs/content/components/accordion/controlled.ts
+++ b/apps/docs/content/components/accordion/controlled.ts
@@ -1,54 +1,5 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["1"]));
-
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
-
-const AppTs = `import type {Selection} from "@nextui-org/react";
-
-import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["1"]));
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-  return (
-    <Accordion
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/custom-motion.raw.jsx b/apps/docs/content/components/accordion/custom-motion.raw.jsx
new file mode 100644
index 0000000000..b5bf114c8b
--- /dev/null
+++ b/apps/docs/content/components/accordion/custom-motion.raw.jsx
@@ -0,0 +1,59 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            height: "auto",
+            overflowY: "unset",
+            transition: {
+              height: {
+                type: "spring",
+                stiffness: 500,
+                damping: 30,
+                duration: 1,
+              },
+              opacity: {
+                easings: "ease",
+                duration: 1,
+              },
+            },
+          },
+          exit: {
+            y: -10,
+            opacity: 0,
+            height: 0,
+            overflowY: "hidden",
+            transition: {
+              height: {
+                easings: "ease",
+                duration: 0.25,
+              },
+              opacity: {
+                easings: "ease",
+                duration: 0.3,
+              },
+            },
+          },
+        },
+      }}
+    >
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/custom-motion.ts b/apps/docs/content/components/accordion/custom-motion.ts
index 625c9623c3..389f462ddd 100644
--- a/apps/docs/content/components/accordion/custom-motion.ts
+++ b/apps/docs/content/components/accordion/custom-motion.ts
@@ -1,60 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion
-      motionProps={{
-        variants: {
-          enter: {
-            y: 0,
-            opacity: 1,
-            height: "auto",
-            transition: {
-              height: {
-                type: "spring",
-                stiffness: 500,
-                damping: 30,
-                duration: 1,
-              },
-              opacity: {
-                easings: "ease",
-                duration: 1,
-              },
-            },
-          },
-          exit: {
-            y: -10,
-            opacity: 0,
-            height: 0,
-            transition: {
-              height: {
-                easings: "ease",
-                duration: 0.25,
-              },
-              opacity: {
-                easings: "ease",
-                duration: 0.3,
-              },
-            },
-          },
-        },
-      }}
-    >
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/custom-styles.raw.jsx b/apps/docs/content/components/accordion/custom-styles.raw.jsx
new file mode 100644
index 0000000000..4d2a83d07f
--- /dev/null
+++ b/apps/docs/content/components/accordion/custom-styles.raw.jsx
@@ -0,0 +1,263 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+const MonitorMobileIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 21.4699V16.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2 12.95H10"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M6.73999 21.47H9.99999"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M17.2445 18.25H17.2535"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+const ShieldSecurityIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 12.5V15.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+const InfoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 8V13"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M11.9945 16H12.0035"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+const InvalidCardIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M10 21.4699V16.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M2 12.95H10"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M6.73999 21.47H9.99999"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M17.2445 18.25H17.2535"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const itemClasses = {
+    base: "py-0 w-full",
+    title: "font-normal text-medium",
+    trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
+    indicator: "text-medium",
+    content: "text-small px-2",
+  };
+
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion
+      className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
+      itemClasses={itemClasses}
+      showDivider={false}
+      variant="shadow"
+    >
+      <AccordionItem
+        key="1"
+        aria-label="Connected devices"
+        startContent={<MonitorMobileIcon className="text-primary" />}
+        subtitle={
+          <p className="flex">
+            2 issues to <span className="text-primary ml-1">fix now</span>
+          </p>
+        }
+        title="Connected devices"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="2"
+        aria-label="Apps Permissions"
+        startContent={<ShieldSecurityIcon />}
+        subtitle="3 apps have read permissions"
+        title="Apps Permissions"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="3"
+        aria-label="Pending tasks"
+        classNames={{subtitle: "text-warning"}}
+        startContent={<InfoIcon className="text-warning" />}
+        subtitle="Complete your profile"
+        title="Pending tasks"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="4"
+        aria-label="Card expired"
+        classNames={{subtitle: "text-danger"}}
+        startContent={<InvalidCardIcon className="text-danger" />}
+        subtitle="Please, update now"
+        title={
+          <p className="flex gap-1 items-center">
+            Card expired
+            <span className="text-default-400 text-small">*4812</span>
+          </p>
+        }
+      >
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/custom-styles.ts b/apps/docs/content/components/accordion/custom-styles.ts
index 0d1232dddb..da3ea9093a 100644
--- a/apps/docs/content/components/accordion/custom-styles.ts
+++ b/apps/docs/content/components/accordion/custom-styles.ts
@@ -1,270 +1,7 @@
-const MonitorMobileIcon = `export const MonitorMobileIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M10 21.4699V16.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M2 12.95H10"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M6.73999 21.47H9.99999"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M17.2445 18.25H17.2535"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const ShieldSecurityIcon = `export const ShieldSecurityIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 12.5V15.5"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit="10"
-      strokeWidth="1.5"
-    />
-  </svg>
-);`;
-
-const InfoIcon = `export const InfoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 8V13"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M11.9945 16H12.0035"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const InvalidCardIcon = `export const InvalidCardIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M10 21.4699V16.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M2 12.95H10"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M6.73999 21.47H9.99999"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M17.2445 18.25H17.2535"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import {MonitorMobileIcon} from "./MonitorMobileIcon";
-import {ShieldSecurityIcon} from "./ShieldSecurityIcon";
-import {InfoIcon} from "./InfoIcon";
-import {InvalidCardIcon} from "./InvalidCardIcon";
-
-export default function App() {
-  const itemClasses = {
-    base: "py-0 w-full",
-    title: "font-normal text-medium",
-    trigger: "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
-    indicator: "text-medium",
-    content: "text-small px-2",
-  };
-
-  const defaultContent =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-
-  return (
-    <Accordion
-      showDivider={false}
-      className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
-      variant="shadow"
-      itemClasses={itemClasses}
-    >
-      <AccordionItem
-        key="1"
-        aria-label="Connected devices"
-        startContent={<MonitorMobileIcon className="text-primary" />}
-        subtitle={
-          <p className="flex">
-            2 issues to <span className="text-primary ml-1">fix now</span>
-          </p>
-        }
-        title="Connected devices"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="2"
-        aria-label="Apps Permissions"
-        startContent={<ShieldSecurityIcon />}
-        subtitle="3 apps have read permissions"
-        title="Apps Permissions"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="3"
-        aria-label="Pending tasks"
-        classNames={{ subtitle: "text-warning" }}
-        startContent={<InfoIcon className="text-warning" />}
-        subtitle="Complete your profile"
-        title="Pending tasks"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="4"
-        aria-label="Card expired"
-        classNames={{ subtitle: "text-danger" }}
-        startContent={<InvalidCardIcon className="text-danger" />}
-        subtitle="Please, update now"
-        title={
-          <p className="flex gap-1 items-center">
-            Card expired
-            <span className="text-default-400 text-small">*4812</span>
-          </p>
-        }
-      >
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MonitorMobileIcon.jsx": MonitorMobileIcon,
-  "/ShieldSecurityIcon.jsx": ShieldSecurityIcon,
-  "/InfoIcon.jsx": InfoIcon,
-  "/InvalidCardIcon.jsx": InvalidCardIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/accordion/default-expanded-keys.raw.jsx b/apps/docs/content/components/accordion/default-expanded-keys.raw.jsx
new file mode 100644
index 0000000000..baf2979b2e
--- /dev/null
+++ b/apps/docs/content/components/accordion/default-expanded-keys.raw.jsx
@@ -0,0 +1,39 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion defaultExpandedKeys={["2"]}>
+      <AccordionItem
+        key="1"
+        aria-label="Accordion 1"
+        subtitle="Press to expand"
+        title="Accordion 1"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="2"
+        aria-label="Accordion 2"
+        subtitle={
+          <span>
+            Press to expand <strong>key 2</strong>
+          </span>
+        }
+        title="Accordion 2"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="3"
+        aria-label="Accordion 3"
+        subtitle="Press to expand"
+        title="Accordion 3"
+      >
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/default-expanded-keys.ts b/apps/docs/content/components/accordion/default-expanded-keys.ts
index 64832235df..203797a1e1 100644
--- a/apps/docs/content/components/accordion/default-expanded-keys.ts
+++ b/apps/docs/content/components/accordion/default-expanded-keys.ts
@@ -1,32 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion defaultExpandedKeys={["2"]}>
-      <AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="2"
-        aria-label="Accordion 2"
-        subtitle={
-          <span>
-            Press to expand <strong>key 2</strong>
-          </span>
-        }
-        title="Accordion 2"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./default-expanded-keys.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/disabled-keys.raw.jsx b/apps/docs/content/components/accordion/disabled-keys.raw.jsx
new file mode 100644
index 0000000000..cbc33f1fd3
--- /dev/null
+++ b/apps/docs/content/components/accordion/disabled-keys.raw.jsx
@@ -0,0 +1,39 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion disabledKeys={["2"]}>
+      <AccordionItem
+        key="1"
+        aria-label="Accordion 1"
+        subtitle="Press to expand"
+        title="Accordion 1"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="2"
+        aria-label="Accordion 2"
+        subtitle={
+          <span>
+            Press to expand <strong>key 2</strong>
+          </span>
+        }
+        title="Accordion 2"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="3"
+        aria-label="Accordion 3"
+        subtitle="Press to expand"
+        title="Accordion 3"
+      >
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/disabled-keys.ts b/apps/docs/content/components/accordion/disabled-keys.ts
index 710e8c9571..b179b7cb75 100644
--- a/apps/docs/content/components/accordion/disabled-keys.ts
+++ b/apps/docs/content/components/accordion/disabled-keys.ts
@@ -1,32 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion disabledKeys={["2"]}>
-      <AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="2"
-        aria-label="Accordion 2"
-        subtitle={
-          <span>
-            Press to expand <strong>key 2</strong>
-          </span>
-        }
-        title="Accordion 2"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./disabled-keys.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/indicator-function.raw.jsx b/apps/docs/content/components/accordion/indicator-function.raw.jsx
new file mode 100644
index 0000000000..9ab180735f
--- /dev/null
+++ b/apps/docs/content/components/accordion/indicator-function.raw.jsx
@@ -0,0 +1,104 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+const AnchorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+        fill="currentColor"
+      />
+      <path
+        d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};
+
+const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+      <circle
+        cx={256}
+        cy={256}
+        fill="none"
+        r={80}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion defaultExpandedKeys={["theme"]}>
+      <AccordionItem
+        key="theme"
+        aria-label="Theme"
+        indicator={({isOpen}) => (isOpen ? <SunIcon /> : <MoonIcon />)}
+        title="Theme"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/indicator-function.ts b/apps/docs/content/components/accordion/indicator-function.ts
index 99fcbc5cbc..42c08c9f3c 100644
--- a/apps/docs/content/components/accordion/indicator-function.ts
+++ b/apps/docs/content/components/accordion/indicator-function.ts
@@ -1,120 +1,7 @@
-const AnchorIcon = `export const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={32}
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-    <circle
-      cx={256}
-      cy={256}
-      fill="none"
-      r={80}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-  </svg>
-);`;
-
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import {AnchorIcon} from "./AnchorIcon";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion defaultExpandedKeys={["theme"]}>
-      <AccordionItem
-        key="theme"
-        aria-label="Theme"
-        indicator={({ isOpen }) => (isOpen ? <SunIcon /> : <MoonIcon />)}
-        title="Theme"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="anchor"
-        aria-label="Anchor"
-        indicator={<AnchorIcon />}
-        title="Anchor"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="sun"
-        aria-label="Sun"
-        indicator={<SunIcon />}
-        title="Sun"
-      >
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./indicator-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AnchorIcon.jsx": AnchorIcon,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/accordion/indicator.raw.jsx b/apps/docs/content/components/accordion/indicator.raw.jsx
new file mode 100644
index 0000000000..1be61502b8
--- /dev/null
+++ b/apps/docs/content/components/accordion/indicator.raw.jsx
@@ -0,0 +1,99 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+const AnchorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+        fill="currentColor"
+      />
+      <path
+        d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};
+
+const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 512 512"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+      <circle
+        cx={256}
+        cy={256}
+        fill="none"
+        r={80}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeMiterlimit={10}
+        strokeWidth={32}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion>
+      <AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/indicator.ts b/apps/docs/content/components/accordion/indicator.ts
index 6858e5931f..221ac6ad9e 100644
--- a/apps/docs/content/components/accordion/indicator.ts
+++ b/apps/docs/content/components/accordion/indicator.ts
@@ -1,105 +1,7 @@
-const AnchorIcon = `export const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M160 136c0-30.62 4.51-61.61 16-88C99.57 81.27 48 159.32 48 248c0 119.29 96.71 216 216 216 88.68 0 166.73-51.57 200-128-26.39 11.49-57.38 16-88 16-119.29 0-216-96.71-216-216z"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={32}
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 512 512"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M256 48v48M256 416v48M403.08 108.92l-33.94 33.94M142.86 369.14l-33.94 33.94M464 256h-48M96 256H48M403.08 403.08l-33.94-33.94M142.86 142.86l-33.94-33.94"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-    <circle
-      cx={256}
-      cy={256}
-      fill="none"
-      r={80}
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeMiterlimit={10}
-      strokeWidth={32}
-    />
-  </svg>
-);`;
-
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-import {AnchorIcon} from './AnchorIcon';
-import {MoonIcon} from './MoonIcon';
-import {SunIcon} from './SunIcon';
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion>
-      <AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./indicator.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AnchorIcon.jsx": AnchorIcon,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/accordion/light-variant.raw.jsx b/apps/docs/content/components/accordion/light-variant.raw.jsx
new file mode 100644
index 0000000000..e00ebb9f74
--- /dev/null
+++ b/apps/docs/content/components/accordion/light-variant.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="light">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/light-variant.ts b/apps/docs/content/components/accordion/light-variant.ts
index 4fbd32b00c..c2efcb9f02 100644
--- a/apps/docs/content/components/accordion/light-variant.ts
+++ b/apps/docs/content/components/accordion/light-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="light">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./light-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/multiple.raw.jsx b/apps/docs/content/components/accordion/multiple.raw.jsx
new file mode 100644
index 0000000000..9b39fba03e
--- /dev/null
+++ b/apps/docs/content/components/accordion/multiple.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectionMode="multiple">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/multiple.ts b/apps/docs/content/components/accordion/multiple.ts
index b6090a69c5..8ad090fa27 100644
--- a/apps/docs/content/components/accordion/multiple.ts
+++ b/apps/docs/content/components/accordion/multiple.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion selectionMode="multiple">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/shadow-variant.raw.jsx b/apps/docs/content/components/accordion/shadow-variant.raw.jsx
new file mode 100644
index 0000000000..80747b9f50
--- /dev/null
+++ b/apps/docs/content/components/accordion/shadow-variant.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="shadow">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/shadow-variant.ts b/apps/docs/content/components/accordion/shadow-variant.ts
index c9275220ed..11abd34135 100644
--- a/apps/docs/content/components/accordion/shadow-variant.ts
+++ b/apps/docs/content/components/accordion/shadow-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="shadow">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./shadow-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/splitted-variant.raw.jsx b/apps/docs/content/components/accordion/splitted-variant.raw.jsx
new file mode 100644
index 0000000000..cd78ded0cf
--- /dev/null
+++ b/apps/docs/content/components/accordion/splitted-variant.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="splitted">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/splitted-variant.ts b/apps/docs/content/components/accordion/splitted-variant.ts
index 6ffc119761..3e19c94089 100644
--- a/apps/docs/content/components/accordion/splitted-variant.ts
+++ b/apps/docs/content/components/accordion/splitted-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="splitted">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./splitted-variant.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/start-content.raw.jsx b/apps/docs/content/components/accordion/start-content.raw.jsx
new file mode 100644
index 0000000000..5082da5a95
--- /dev/null
+++ b/apps/docs/content/components/accordion/start-content.raw.jsx
@@ -0,0 +1,63 @@
+import {Accordion, AccordionItem, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion selectionMode="multiple">
+      <AccordionItem
+        key="1"
+        aria-label="Chung Miller"
+        startContent={
+          <Avatar
+            isBordered
+            color="primary"
+            radius="lg"
+            src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
+          />
+        }
+        subtitle="4 unread messages"
+        title="Chung Miller"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="2"
+        aria-label="Janelle Lenard"
+        startContent={
+          <Avatar
+            isBordered
+            color="success"
+            radius="lg"
+            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+          />
+        }
+        subtitle="3 incompleted steps"
+        title="Janelle Lenard"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="3"
+        aria-label="Zoey Lang"
+        startContent={
+          <Avatar
+            isBordered
+            color="warning"
+            radius="lg"
+            src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+          />
+        }
+        subtitle={
+          <p className="flex">
+            2 issues to<span className="text-primary ml-1">fix now</span>
+          </p>
+        }
+        title="Zoey Lang"
+      >
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/start-content.ts b/apps/docs/content/components/accordion/start-content.ts
index ff3f05b601..59191d72a7 100644
--- a/apps/docs/content/components/accordion/start-content.ts
+++ b/apps/docs/content/components/accordion/start-content.ts
@@ -1,66 +1,4 @@
-const App = `import {Accordion, AccordionItem, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion selectionMode="multiple">
-      <AccordionItem
-        key="1"
-        aria-label="Chung Miller"
-        startContent={
-          <Avatar
-            isBordered
-            color="primary"
-            radius="lg"
-            src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-          />
-        }
-        subtitle="4 unread messages"
-        title="Chung Miller"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="2"
-        aria-label="Janelle Lenard"
-        startContent={
-          <Avatar
-            isBordered
-            color="success"
-            radius="lg"
-            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-          />
-        }
-        subtitle="3 incompleted steps"
-        title="Janelle Lenard"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="3"
-        aria-label="Zoey Lang"
-        startContent={
-          <Avatar
-            isBordered
-            color="warning"
-            radius="lg"
-            src="https://i.pravatar.cc/150?u=a04258114e29026702d"
-          />
-        }
-        subtitle={
-          <p className="flex">
-            2 issues to<span className="text-primary ml-1">fix now</span>
-          </p>
-        }
-        title="Zoey Lang"
-      >
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/subtitle.raw.jsx b/apps/docs/content/components/accordion/subtitle.raw.jsx
new file mode 100644
index 0000000000..cf6d8c1391
--- /dev/null
+++ b/apps/docs/content/components/accordion/subtitle.raw.jsx
@@ -0,0 +1,39 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion>
+      <AccordionItem
+        key="1"
+        aria-label="Accordion 1"
+        subtitle="Press to expand"
+        title="Accordion 1"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="2"
+        aria-label="Accordion 2"
+        subtitle={
+          <span>
+            Press to expand <strong>key 2</strong>
+          </span>
+        }
+        title="Accordion 2"
+      >
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem
+        key="3"
+        aria-label="Accordion 3"
+        subtitle="Press to expand"
+        title="Accordion 3"
+      >
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/subtitle.ts b/apps/docs/content/components/accordion/subtitle.ts
index c7ee7a0a10..d196f1d53f 100644
--- a/apps/docs/content/components/accordion/subtitle.ts
+++ b/apps/docs/content/components/accordion/subtitle.ts
@@ -1,32 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion>
-      <AccordionItem key="1" aria-label="Accordion 1" subtitle="Press to expand" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem
-        key="2"
-        aria-label="Accordion 2"
-        subtitle={
-          <span>
-            Press to expand <strong>key 2</strong>
-          </span>
-        }
-        title="Accordion 2"
-      >
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" subtitle="Press to expand" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./subtitle.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/usage.raw.jsx b/apps/docs/content/components/accordion/usage.raw.jsx
new file mode 100644
index 0000000000..97359f908a
--- /dev/null
+++ b/apps/docs/content/components/accordion/usage.raw.jsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/usage.ts b/apps/docs/content/components/accordion/usage.ts
index f5f4b7b54c..1118304c37 100644
--- a/apps/docs/content/components/accordion/usage.ts
+++ b/apps/docs/content/components/accordion/usage.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/accordion/variant.raw.jsx b/apps/docs/content/components/accordion/variant.raw.jsx
new file mode 100644
index 0000000000..1c84f7bc66
--- /dev/null
+++ b/apps/docs/content/components/accordion/variant.raw.jsx
@@ -0,0 +1,67 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <div className="w-full grid grid-cols-12 gap-4">
+      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
+        <h3>Light</h3>
+        <Accordion variant="light">
+          <AccordionItem key="1" title="Accordion 1">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="2" title="Accordion 2">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="3" title="Accordion 3">
+            {defaultContent}
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
+        <h3>Bordered</h3>
+        <Accordion variant="bordered">
+          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+            {defaultContent}
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
+        <h3>Shadow</h3>
+        <Accordion variant="shadow">
+          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+            {defaultContent}
+          </AccordionItem>
+        </Accordion>
+      </div>
+      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
+        <h3>Splitted</h3>
+        <Accordion fullWidth variant="splitted">
+          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+            {defaultContent}
+          </AccordionItem>
+          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+            {defaultContent}
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/accordion/variants.ts b/apps/docs/content/components/accordion/variants.ts
index ae2ed6fe36..ddea95fb2e 100644
--- a/apps/docs/content/components/accordion/variants.ts
+++ b/apps/docs/content/components/accordion/variants.ts
@@ -1,70 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <div className="w-full grid grid-cols-12 gap-4">
-      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
-        <h3>Light</h3>
-        <Accordion variant="light">
-          <AccordionItem key="1" title="Accordion 1">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="2" title="Accordion 2">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="3" title="Accordion 3">
-            {defaultContent}
-          </AccordionItem>
-        </Accordion>
-      </div>
-      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
-        <h3>Bordered</h3>
-        <Accordion variant="bordered">
-          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-            {defaultContent}
-          </AccordionItem>
-        </Accordion>
-      </div>
-      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
-        <h3>Shadow</h3>
-        <Accordion variant="shadow">
-          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-            {defaultContent}
-          </AccordionItem>
-        </Accordion>
-      </div>
-      <div className="col-span-12 lg:col-span-6 flex flex-col gap-4">
-        <h3>Splitted</h3>
-        <Accordion variant="splitted" fullWidth>
-          <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-            {defaultContent}
-          </AccordionItem>
-          <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-            {defaultContent}
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/alert/colors.raw.jsx b/apps/docs/content/components/alert/colors.raw.jsx
new file mode 100644
index 0000000000..a4d123eae5
--- /dev/null
+++ b/apps/docs/content/components/alert/colors.raw.jsx
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <div className="flex flex-col w-full">
+        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+          <div key={color} className="w-full flex items-center my-3">
+            <Alert color={color} title={`This is a ${color} alert`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/colors.ts b/apps/docs/content/components/alert/colors.ts
new file mode 100644
index 0000000000..d5bef810aa
--- /dev/null
+++ b/apps/docs/content/components/alert/colors.ts
@@ -0,0 +1,9 @@
+import App from "./colors.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/controlled-alert.raw.jsx b/apps/docs/content/components/alert/controlled-alert.raw.jsx
new file mode 100644
index 0000000000..59444db376
--- /dev/null
+++ b/apps/docs/content/components/alert/controlled-alert.raw.jsx
@@ -0,0 +1,28 @@
+import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  const title = "Success Notification";
+  const description =
+    "Your action has been completed successfully. We'll notify you when updates are available.";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {isVisible ? (
+        <Alert
+          color="success"
+          description={description}
+          isVisible={isVisible}
+          title={title}
+          variant="faded"
+          onClose={() => setIsVisible(false)}
+        />
+      ) : (
+        <Button variant="bordered" onPress={() => setIsVisible(true)}>
+          Show Alert
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/controlled.ts b/apps/docs/content/components/alert/controlled.ts
new file mode 100644
index 0000000000..74703e39ab
--- /dev/null
+++ b/apps/docs/content/components/alert/controlled.ts
@@ -0,0 +1,9 @@
+import App from "./controlled-alert.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/custom-impl.raw.jsx b/apps/docs/content/components/alert/custom-impl.raw.jsx
new file mode 100644
index 0000000000..a541c7481d
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-impl.raw.jsx
@@ -0,0 +1,124 @@
+import React, {forwardRef, useMemo} from "react";
+import {useAlert} from "@nextui-org/react";
+
+export const InfoCircleIcon = (props) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
+
+export const CloseIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+};
+
+const styles = {
+  base: [
+    "bg-slate-100",
+    "border",
+    "shadow",
+    "hover:bg-slate-200",
+    "focus-within:!bg-slate-100",
+    "dark:bg-slate-900",
+    "dark:hover:bg-slate-800",
+    "dark:border-slate-800",
+    "dark:focus-within:!bg-slate-900",
+    "cursor-pointer",
+  ],
+  title: ["text-base", "text-slate-500", "font-bold"],
+  description: ["text-base", "text-slate-500"],
+};
+
+const MyAlert = forwardRef((props, ref) => {
+  const {
+    title,
+    description,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getAlertIconProps,
+  } = useAlert({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    title: "Email Sent!!",
+    description: "You will get a reply soon",
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const mainWrapper = useMemo(() => {
+    return (
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        <div {...getDescriptionProps()}>{description}</div>
+      </div>
+    );
+  }, [title, description, getMainWrapperProps, getTitleProps, getDescriptionProps]);
+
+  const baseWrapper = useMemo(() => {
+    return isVisible ? (
+      <div ref={domRef} {...getBaseProps()}>
+        <InfoCircleIcon {...getAlertIconProps()} />
+        {mainWrapper}
+        {(isClosable || onClose) && (
+          <button onClick={handleClose} {...getCloseButtonProps()}>
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    ) : null;
+  }, [
+    mainWrapper,
+    isClosable,
+    getCloseButtonProps,
+    isVisible,
+    domRef,
+    getBaseProps,
+    handleClose,
+    color,
+    onClose,
+    getAlertIconProps,
+  ]);
+
+  return <>{baseWrapper}</>;
+});
+
+MyAlert.displayName = "MyAlert";
+
+export default MyAlert;
diff --git a/apps/docs/content/components/alert/custom-impl.ts b/apps/docs/content/components/alert/custom-impl.ts
new file mode 100644
index 0000000000..ab37512cec
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-impl.ts
@@ -0,0 +1,9 @@
+import App from "./custom-impl.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/custom-styles.raw.jsx b/apps/docs/content/components/alert/custom-styles.raw.jsx
new file mode 100644
index 0000000000..8291720ae1
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.raw.jsx
@@ -0,0 +1,91 @@
+import {Alert, Button} from "@nextui-org/react";
+
+const CustomAlert = React.forwardRef(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames = {}, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return "before:bg-default-200";
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        {children}
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/custom-styles.raw.tsx b/apps/docs/content/components/alert/custom-styles.raw.tsx
new file mode 100644
index 0000000000..6ef55f3ea8
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.raw.tsx
@@ -0,0 +1,87 @@
+import type {AlertProps} from "@nextui-org/react";
+
+import React from "react";
+import {Alert, Button, cn} from "@nextui-org/react";
+
+const CustomAlert = ({children, variant, color, className, classNames, ...props}: AlertProps) => {
+  const colorClass = React.useMemo(() => {
+    switch (color) {
+      case "default":
+        return "before:bg-default-300";
+      case "primary":
+        return "before:bg-primary";
+      case "secondary":
+        return "before:bg-secondary";
+      case "success":
+        return "before:bg-success";
+      case "warning":
+        return "before:bg-warning";
+      case "danger":
+        return "before:bg-danger";
+      default:
+        return "before:bg-default-200";
+    }
+  }, []);
+
+  return (
+    <Alert
+      classNames={{
+        ...classNames,
+        base: cn(
+          [
+            "bg-default-50 dark:bg-background shadow-sm",
+            "border-1 border-default-200 dark:border-default-100",
+            "relative before:content-[''] before:absolute before:z-10",
+            "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+            "rounded-l-none border-l-0",
+            colorClass,
+          ],
+          classNames?.base,
+          className,
+        ),
+        mainWrapper: cn("pt-1", classNames?.mainWrapper),
+        iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+      }}
+      color={color}
+      variant={variant}
+      {...props}
+    >
+      {children}
+    </Alert>
+  );
+};
+
+CustomAlert.displayName = "CustomAlert";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"] as any;
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          key={color}
+          color={color}
+          description="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/custom-styles.ts b/apps/docs/content/components/alert/custom-styles.ts
new file mode 100644
index 0000000000..29cf5fd0ee
--- /dev/null
+++ b/apps/docs/content/components/alert/custom-styles.ts
@@ -0,0 +1,15 @@
+import App from "./custom-styles.raw.jsx?raw";
+import AppTs from "./custom-styles.raw.tsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
+export default {
+  ...react,
+  ...reactTs,
+};
diff --git a/apps/docs/content/components/alert/index.ts b/apps/docs/content/components/alert/index.ts
new file mode 100644
index 0000000000..bdf7342658
--- /dev/null
+++ b/apps/docs/content/components/alert/index.ts
@@ -0,0 +1,25 @@
+import colors from "./colors";
+import usage from "./usage";
+import radius from "./radius";
+import customImpl from "./custom-impl";
+import customStyles from "./custom-styles";
+import variants from "./variants";
+import withIcon from "./with-icon";
+import withAction from "./with-action";
+import controlled from "./controlled";
+import withoutIcon from "./without-icon";
+import withoutIconWrapper from "./without-icon-wrapper";
+
+export const alertContent = {
+  colors,
+  usage,
+  radius,
+  customImpl,
+  customStyles,
+  variants,
+  withIcon,
+  withAction,
+  controlled,
+  withoutIcon,
+  withoutIconWrapper,
+};
diff --git a/apps/docs/content/components/alert/radius.raw.jsx b/apps/docs/content/components/alert/radius.raw.jsx
new file mode 100644
index 0000000000..07b2f9c5a8
--- /dev/null
+++ b/apps/docs/content/components/alert/radius.raw.jsx
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <div className="flex flex-col w-full">
+        {["none", "sm", "md", "lg", "full"].map((radius) => (
+          <div key={radius} className="w-full flex items-center my-3">
+            <Alert radius={radius} title={`This is a ${radius} radius alert`} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/radius.ts b/apps/docs/content/components/alert/radius.ts
new file mode 100644
index 0000000000..7b78db1ce0
--- /dev/null
+++ b/apps/docs/content/components/alert/radius.ts
@@ -0,0 +1,9 @@
+import App from "./radius.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/usage.raw.jsx b/apps/docs/content/components/alert/usage.raw.jsx
new file mode 100644
index 0000000000..3b5a727e9b
--- /dev/null
+++ b/apps/docs/content/components/alert/usage.raw.jsx
@@ -0,0 +1,12 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "This is an alert";
+  const description = "Thanks for subscribing to our newsletter!";
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert description={description} title={title} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/usage.ts b/apps/docs/content/components/alert/usage.ts
new file mode 100644
index 0000000000..1118304c37
--- /dev/null
+++ b/apps/docs/content/components/alert/usage.ts
@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/variants.raw.jsx b/apps/docs/content/components/alert/variants.raw.jsx
new file mode 100644
index 0000000000..1bb83af6b3
--- /dev/null
+++ b/apps/docs/content/components/alert/variants.raw.jsx
@@ -0,0 +1,16 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      {["solid", "bordered", "flat", "faded"].map((variant) => (
+        <Alert
+          key={variant}
+          color="secondary"
+          title={`This is a ${variant} variant alert`}
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/variants.ts b/apps/docs/content/components/alert/variants.ts
new file mode 100644
index 0000000000..ddea95fb2e
--- /dev/null
+++ b/apps/docs/content/components/alert/variants.ts
@@ -0,0 +1,9 @@
+import App from "./variants.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/with-action.raw.jsx b/apps/docs/content/components/alert/with-action.raw.jsx
new file mode 100644
index 0000000000..8e4ee60a88
--- /dev/null
+++ b/apps/docs/content/components/alert/with-action.raw.jsx
@@ -0,0 +1,19 @@
+import {Alert, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert
+        color="warning"
+        description="Upgrade to a paid plan to continue"
+        endContent={
+          <Button color="warning" size="sm" variant="flat">
+            Upgrade
+          </Button>
+        }
+        title="You have no credits left"
+        variant="faded"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/with-action.ts b/apps/docs/content/components/alert/with-action.ts
new file mode 100644
index 0000000000..1bb611e21b
--- /dev/null
+++ b/apps/docs/content/components/alert/with-action.ts
@@ -0,0 +1,9 @@
+import App from "./with-action.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/with-icon.raw.jsx b/apps/docs/content/components/alert/with-icon.raw.jsx
new file mode 100644
index 0000000000..831e78982f
--- /dev/null
+++ b/apps/docs/content/components/alert/with-icon.raw.jsx
@@ -0,0 +1,33 @@
+import {Alert} from "@nextui-org/react";
+
+const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      data-name="Iconly/Curved/Profile"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path
+          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
+        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return <Alert icon={<UserIcon />}>An alert with a custom icon</Alert>;
+}
diff --git a/apps/docs/content/components/alert/with-icon.ts b/apps/docs/content/components/alert/with-icon.ts
new file mode 100644
index 0000000000..ca7c79da7b
--- /dev/null
+++ b/apps/docs/content/components/alert/with-icon.ts
@@ -0,0 +1,9 @@
+import App from "./with-icon.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/without-icon-wrapper.raw.jsx b/apps/docs/content/components/alert/without-icon-wrapper.raw.jsx
new file mode 100644
index 0000000000..88530c9825
--- /dev/null
+++ b/apps/docs/content/components/alert/without-icon-wrapper.raw.jsx
@@ -0,0 +1,15 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert
+        hideIconWrapper
+        color="secondary"
+        description="This is a bordered variant alert"
+        title="Bordered Alert"
+        variant="bordered"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/without-icon-wrapper.ts b/apps/docs/content/components/alert/without-icon-wrapper.ts
new file mode 100644
index 0000000000..03297c6834
--- /dev/null
+++ b/apps/docs/content/components/alert/without-icon-wrapper.ts
@@ -0,0 +1,9 @@
+import App from "./without-icon-wrapper.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/alert/without-icon.raw.jsx b/apps/docs/content/components/alert/without-icon.raw.jsx
new file mode 100644
index 0000000000..bd25d413ed
--- /dev/null
+++ b/apps/docs/content/components/alert/without-icon.raw.jsx
@@ -0,0 +1,12 @@
+import {Alert} from "@nextui-org/react";
+
+export default function App() {
+  const title = "This is an alert";
+  const description = "Thanks for subscribing to our newsletter!";
+
+  return (
+    <div className="flex items-center justify-center w-full">
+      <Alert hideIcon color="success" description={description} title={title} variant="faded" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/alert/without-icon.ts b/apps/docs/content/components/alert/without-icon.ts
new file mode 100644
index 0000000000..3c177c66b3
--- /dev/null
+++ b/apps/docs/content/components/alert/without-icon.ts
@@ -0,0 +1,9 @@
+import App from "./without-icon.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.jsx b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx
new file mode 100644
index 0000000000..2e25aaa5b4
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/async-filtering.raw.jsx
@@ -0,0 +1,34 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useAsyncList} from "@react-stately/data";
+
+export default function App() {
+  let list = useAsyncList({
+    async load({signal, filterText}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+      };
+    },
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      inputValue={list.filterText}
+      isLoading={list.isLoading}
+      items={list.items}
+      label="Select a character"
+      placeholder="Type to search..."
+      variant="bordered"
+      onInputChange={list.setFilterText}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.name} className="capitalize">
+          {item.name}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/async-filtering.raw.tsx b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx
new file mode 100644
index 0000000000..8f88d88bc6
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/async-filtering.raw.tsx
@@ -0,0 +1,41 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useAsyncList} from "@react-stately/data";
+
+type SWCharacter = {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+};
+
+export default function App() {
+  let list = useAsyncList<SWCharacter>({
+    async load({signal, filterText}) {
+      let res = await fetch(`https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+      };
+    },
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      inputValue={list.filterText}
+      isLoading={list.isLoading}
+      items={list.items}
+      label="Select a character"
+      placeholder="Type to search..."
+      variant="bordered"
+      onInputChange={list.setFilterText}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.name} className="capitalize">
+          {item.name}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/async-filtering.ts b/apps/docs/content/components/autocomplete/async-filtering.ts
index 308bc843b2..6bcbb952f0 100644
--- a/apps/docs/content/components/autocomplete/async-filtering.ts
+++ b/apps/docs/content/components/autocomplete/async-filtering.ts
@@ -1,79 +1,5 @@
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-
-export default function App() {
-  let list = useAsyncList({
-    async load({signal, filterText}) {
-      let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results,
-      };
-    },
-  });
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      inputValue={list.filterText}
-      isLoading={list.isLoading}
-      items={list.items}
-      label="Select a character"
-      placeholder="Type to search..."
-      variant="bordered"
-      onInputChange={list.setFilterText}
-    >
-      {(item) => (
-        <AutocompleteItem key={item.name} className="capitalize">
-          {item.name}
-        </AutocompleteItem>
-      )}
-    </Autocomplete>
-  );
-}`;
-
-const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-
-type SWCharacter = {
-  name: string;
-  height: string;
-  mass: string;
-  birth_year: string;
-};
-
-export default function App() {
-  let list = useAsyncList<SWCharacter>({
-    async load({signal, filterText}) {
-      let res = await fetch(\`https://swapi.py4e.com/api/people/?search=\${filterText}\`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results,
-      };
-    },
-  });
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      inputValue={list.filterText}
-      isLoading={list.isLoading}
-      items={list.items}
-      label="Select a character"
-      placeholder="Type to search..."
-      variant="bordered"
-      onInputChange={list.setFilterText}
-    >
-      {(item) => (
-        <AutocompleteItem key={item.name} className="capitalize">
-          {item.name}
-        </AutocompleteItem>
-      )}
-    </Autocomplete>
-  );
-}`;
+import App from "./async-filtering.raw.jsx?raw";
+import AppTs from "./async-filtering.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx
new file mode 100644
index 0000000000..f7d810e3ea
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.jsx
@@ -0,0 +1,99 @@
+import React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export function usePokemonList({fetchDelay = 0} = {}) {
+  const [items, setItems] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      const res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
+        console.log("Fetch aborted");
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={items}
+      isLoading={isLoading}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      variant="bordered"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.name} className="capitalize">
+          {item.name}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
new file mode 100644
index 0000000000..4f9816110a
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/async-loading-items.raw.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export type Pokemon = {
+  name: string;
+  url: string;
+};
+
+export type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = React.useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
+        console.log("Fetch aborted");
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={items}
+      isLoading={isLoading}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      variant="bordered"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <AutocompleteItem key={item.name} className="capitalize">
+          {item.name}
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/async-loading-items.ts b/apps/docs/content/components/autocomplete/async-loading-items.ts
index 495c845ebf..a69188c565 100644
--- a/apps/docs/content/components/autocomplete/async-loading-items.ts
+++ b/apps/docs/content/components/autocomplete/async-loading-items.ts
@@ -1,185 +1,12 @@
-const usePokemonListTs = `export type Pokemon = {
-  name: string;
-  url: string;
-};
-
-export type UsePokemonListProps = {
-  /** Delay to wait before fetching more items */
-  fetchDelay?: number;
-};
-
-export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
-  const [items, setItems] = React.useState<Pokemon[]>([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset: number) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-}
-
-`;
-
-const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) {
-  const [items, setItems] = React.useState([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-};`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
-import {usePokemonList} from "./usePokemonList";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
-
-  const [, scrollerRef] = useInfiniteScroll({
-    hasMore,
-    isEnabled: isOpen,
-    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
-    onLoadMore,
-  });
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      variant="bordered"
-      isLoading={isLoading}
-      defaultItems={items}
-      label="Pick a Pokemon"
-      placeholder="Select a Pokemon"
-      scrollRef={scrollerRef}
-      selectionMode="single"
-      onOpenChange={setIsOpen}
-    >
-      {(item) => (
-        <AutocompleteItem key={item.name} className="capitalize">
-          {item.name}
-        </AutocompleteItem>
-      )}
-    </Autocomplete>
-  );
-}`;
+import App from "./async-loading-items.raw.jsx?raw";
+import AppTs from "./async-loading-items.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/usePokemonList.js": usePokemonList,
 };
 
 const reactTs = {
-  "/App.tsx": App,
-  "/usePokemonList.ts": usePokemonListTs,
+  "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx
new file mode 100644
index 0000000000..084f46d6cd
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/colors.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Autocomplete
+          key={color}
+          className="max-w-xs"
+          color={color}
+          defaultItems={animals}
+          defaultSelectedKey={"cat"}
+          label="Favorite Animal"
+          placeholder="Search an animal"
+        >
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+        </Autocomplete>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/colors.ts b/apps/docs/content/components/autocomplete/colors.ts
index 1ac3ba0075..d5bef810aa 100644
--- a/apps/docs/content/components/autocomplete/colors.ts
+++ b/apps/docs/content/components/autocomplete/colors.ts
@@ -1,66 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Autocomplete
-          key={color}
-          color={color}
-          defaultItems={animals}
-          label="Favorite Animal"
-          placeholder="Search an animal"
-          defaultSelectedKey={"cat"}
-          className="max-w-xs"
-        >
-          {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-        </Autocomplete>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx
new file mode 100644
index 0000000000..084f46d6cd
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Autocomplete
+          key={color}
+          className="max-w-xs"
+          color={color}
+          defaultItems={animals}
+          defaultSelectedKey={"cat"}
+          label="Favorite Animal"
+          placeholder="Search an animal"
+        >
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+        </Autocomplete>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx
new file mode 100644
index 0000000000..ac696fb0ff
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const [key, setValue] = React.useState<React.Key | null>("cat");
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Autocomplete
+        className="max-w-xs"
+        defaultItems={animals}
+        label="Favorite Animal"
+        placeholder="Search an animal"
+        selectedKey={key}
+        variant="bordered"
+        onSelectionChange={setValue}
+      >
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+      <p className="text-default-500 text-small">Selected: {key}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/controlled.ts b/apps/docs/content/components/autocomplete/controlled.ts
index f8a35ea4aa..1f1a363363 100644
--- a/apps/docs/content/components/autocomplete/controlled.ts
+++ b/apps/docs/content/components/autocomplete/controlled.ts
@@ -1,87 +1,12 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<React.Key>("cat");
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Autocomplete
-        label="Favorite Animal"
-        variant="bordered"
-        defaultItems={animals}
-        placeholder="Search an animal"
-        className="max-w-xs"
-        selectedKey={value}
-        onSelectionChange={setValue}
-      >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-      <p className="text-default-500 text-small">Selected: {value}</p>
-    </div>
-  );
-}`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState("cat");
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Autocomplete
-        label="Favorite Animal"
-        variant="bordered"
-        defaultItems={animals}
-        placeholder="Search an animal"
-        className="max-w-xs"
-        selectedKey={value}
-        onSelectionChange={setValue}
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-      <p className="text-default-500 text-small">Selected: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
new file mode 100644
index 0000000000..822f4838cc
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
@@ -0,0 +1,47 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        className="max-w-xs"
+        defaultItems={animals}
+        label="Favorite Animal"
+        listboxProps={{
+          emptyContent: "Your own empty content text.",
+        }}
+        placeholder="Search an animal"
+      >
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts
index 7e7e27dcc1..b88aaeea2a 100644
--- a/apps/docs/content/components/autocomplete/custom-empty-content-message.ts
+++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.ts
@@ -1,55 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete
-        label="Favorite Animal"
-        placeholder="Search an animal"
-        className="max-w-xs"
-        defaultItems={animals}
-        listboxProps={{
-            emptyContent: 'Your own empty content text.'
-        }}
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./custom-empty-content-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
new file mode 100644
index 0000000000..afb0782618
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
@@ -0,0 +1,57 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const myFilter = (textValue, inputValue) => {
+    if (inputValue.length === 0) {
+      return true;
+    }
+
+    // Normalize both strings so we can slice safely
+    // take into account the ignorePunctuation option as well...
+    textValue = textValue.normalize("NFC").toLocaleLowerCase();
+    inputValue = inputValue.normalize("NFC").toLocaleLowerCase();
+
+    return textValue.slice(0, inputValue.length) === inputValue;
+  };
+
+  return (
+    <Autocomplete
+      allowsCustomValue
+      className="max-w-xs"
+      defaultFilter={myFilter}
+      defaultItems={animals}
+      label="Search an animal"
+      variant="bordered"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
new file mode 100644
index 0000000000..38b444f84e
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
@@ -0,0 +1,57 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const myFilter = (textValue: string, inputValue: string) => {
+    if (inputValue.length === 0) {
+      return true;
+    }
+
+    // Normalize both strings so we can slice safely
+    // take into account the ignorePunctuation option as well...
+    textValue = textValue.normalize("NFC").toLocaleLowerCase();
+    inputValue = inputValue.normalize("NFC").toLocaleLowerCase();
+
+    return textValue.slice(0, inputValue.length) === inputValue;
+  };
+
+  return (
+    <Autocomplete
+      allowsCustomValue
+      className="max-w-xs"
+      defaultFilter={myFilter}
+      defaultItems={animals}
+      label="Search an animal"
+      variant="bordered"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.ts b/apps/docs/content/components/autocomplete/custom-filtering.ts
index 5ebcd8336f..22640a1882 100644
--- a/apps/docs/content/components/autocomplete/custom-filtering.ts
+++ b/apps/docs/content/components/autocomplete/custom-filtering.ts
@@ -1,95 +1,8 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const myFilter = (textValue, inputValue) => {
-    if (inputValue.length === 0) {
-      return true;
-    }
-
-    // Normalize both strings so we can slice safely
-    // take into account the ignorePunctuation option as well...
-    textValue = textValue.normalize("NFC").toLocaleLowerCase();
-    inputValue = inputValue.normalize("NFC").toLocaleLowerCase();
-
-    return textValue.slice(0, inputValue.length) === inputValue;
-  };
-
-  return (
-    <Autocomplete
-      allowsCustomValue
-      className="max-w-xs"
-      defaultFilter={myFilter}
-      defaultItems={animals}
-      label="Search an animal"
-      variant="bordered"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
-
-const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const myFilter = (textValue: string, inputValue: string) => {
-    if (inputValue.length === 0) {
-      return true;
-    }
-
-    // Normalize both strings so we can slice safely
-    // take into account the ignorePunctuation option as well...
-    textValue = textValue.normalize("NFC").toLocaleLowerCase();
-    inputValue = inputValue.normalize("NFC").toLocaleLowerCase();
-
-    return textValue.slice(0, inputValue.length) === inputValue;
-  };
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      defaultFilter={myFilter}
-      defaultItems={animals}
-      label="Search an animal"
-      variant="bordered"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-filtering.raw.jsx?raw";
+import AppTs from "./custom-filtering.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
diff --git a/apps/docs/content/components/autocomplete/custom-items.raw.jsx b/apps/docs/content/components/autocomplete/custom-items.raw.jsx
new file mode 100644
index 0000000000..2f2b27f9e4
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-items.raw.jsx
@@ -0,0 +1,229 @@
+import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={users}
+      label="Assigned to"
+      labelPlacement="inside"
+      placeholder="Select a user"
+      variant="bordered"
+    >
+      {(user) => (
+        <AutocompleteItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-items.ts b/apps/docs/content/components/autocomplete/custom-items.ts
index 205ead3a5c..26a1e0f9ac 100644
--- a/apps/docs/content/components/autocomplete/custom-items.ts
+++ b/apps/docs/content/components/autocomplete/custom-items.ts
@@ -1,237 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      defaultItems={users}
-      variant="bordered"
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="inside"
-      className="max-w-xs"
-    >
-      {(user) => (
-        <AutocompleteItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </AutocompleteItem>
-      )}
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx
new file mode 100644
index 0000000000..7d4f300b08
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-sections-style.raw.jsx
@@ -0,0 +1,49 @@
+import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react";
+
+export default function App() {
+  const headingClasses =
+    "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+      variant="bordered"
+    >
+      <AutocompleteSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Mammals"
+      >
+        <AutocompleteItem key="Lion">Lion</AutocompleteItem>
+        <AutocompleteItem key="Tiger">Tiger</AutocompleteItem>
+        <AutocompleteItem key="Elephant">Elephant</AutocompleteItem>
+        <AutocompleteItem key="Kangaroo">Kangaroo</AutocompleteItem>
+        <AutocompleteItem key="Panda">Panda</AutocompleteItem>
+        <AutocompleteItem key="Giraffe">Giraffe</AutocompleteItem>
+        <AutocompleteItem key="Zebra">Zebra</AutocompleteItem>
+        <AutocompleteItem key="Cheetah">Cheetah</AutocompleteItem>
+      </AutocompleteSection>
+      <AutocompleteSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Birds"
+      >
+        <AutocompleteItem key="Eagle">Eagle</AutocompleteItem>
+        <AutocompleteItem key="Parrot">Parrot</AutocompleteItem>
+        <AutocompleteItem key="Penguin">Penguin</AutocompleteItem>
+        <AutocompleteItem key="Ostrich">Ostrich</AutocompleteItem>
+        <AutocompleteItem key="Peacock">Peacock</AutocompleteItem>
+        <AutocompleteItem key="Swan">Swan</AutocompleteItem>
+        <AutocompleteItem key="Falcon">Falcon</AutocompleteItem>
+        <AutocompleteItem key="Flamingo">Flamingo</AutocompleteItem>
+      </AutocompleteSection>
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-sections-style.ts b/apps/docs/content/components/autocomplete/custom-sections-style.ts
index 13770de8a4..9ba8a6cd9c 100644
--- a/apps/docs/content/components/autocomplete/custom-sections-style.ts
+++ b/apps/docs/content/components/autocomplete/custom-sections-style.ts
@@ -1,51 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react";
-
-export default function App() {
-  const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
-
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      variant="bordered"
-      placeholder="Search an animal"
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false,
-      }}
-    >
-      <AutocompleteSection 
-        title="Mammals"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <AutocompleteItem key="Lion">Lion</AutocompleteItem>
-        <AutocompleteItem key="Tiger">Tiger</AutocompleteItem>
-        <AutocompleteItem key="Elephant">Elephant</AutocompleteItem>
-        <AutocompleteItem key="Kangaroo">Kangaroo</AutocompleteItem>
-        <AutocompleteItem key="Panda">Panda</AutocompleteItem>
-        <AutocompleteItem key="Giraffe">Giraffe</AutocompleteItem>
-        <AutocompleteItem key="Zebra">Zebra</AutocompleteItem>
-        <AutocompleteItem key="Cheetah">Cheetah</AutocompleteItem>
-      </AutocompleteSection>
-      <AutocompleteSection 
-        title="Birds"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <AutocompleteItem key="Eagle">Eagle</AutocompleteItem>
-        <AutocompleteItem key="Parrot">Parrot</AutocompleteItem>
-        <AutocompleteItem key="Penguin">Penguin</AutocompleteItem>
-        <AutocompleteItem key="Ostrich">Ostrich</AutocompleteItem>
-        <AutocompleteItem key="Peacock">Peacock</AutocompleteItem>
-        <AutocompleteItem key="Swan">Swan</AutocompleteItem>
-        <AutocompleteItem key="Falcon">Falcon</AutocompleteItem>
-        <AutocompleteItem key="Flamingo">Flamingo</AutocompleteItem>
-      </AutocompleteSection>
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-sections-style.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
new file mode 100644
index 0000000000..21620cb3f2
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
@@ -0,0 +1,68 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const SelectorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+      <path d="M8 9l4 -4l4 4" />
+      <path d="M16 15l-4 4l-4 -4" />
+    </svg>
+  );
+};
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      disableSelectorIconRotation
+      className="max-w-xs"
+      defaultItems={animals}
+      label="Favorite Animal"
+      labelPlacement="outside"
+      placeholder="Search an animal"
+      selectorIcon={<SelectorIcon />}
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.ts b/apps/docs/content/components/autocomplete/custom-selector-icon.ts
index 2fc1f523b4..ee2c7d9a8b 100644
--- a/apps/docs/content/components/autocomplete/custom-selector-icon.ts
+++ b/apps/docs/content/components/autocomplete/custom-selector-icon.ts
@@ -1,76 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const SelectorIcon = `export const SelectorIcon = (props) => (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
-      <path d="M8 9l4 -4l4 4" />
-      <path d="M16 15l-4 4l-4 -4" />
-    </svg>
-);`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {SelectorIcon} from "./SelectorIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      defaultItems={animals}
-      labelPlacement="outside"
-      className="max-w-xs"
-      disableSelectorIconRotation
-      selectorIcon={<SelectorIcon />}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/custom-styles.raw.jsx b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx
new file mode 100644
index 0000000000..2727c2a259
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-styles.raw.jsx
@@ -0,0 +1,303 @@
+import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react";
+
+const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={height || size}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={width || size}
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      aria-label="Select an employee"
+      classNames={{
+        base: "max-w-xs",
+        listboxWrapper: "max-h-[320px]",
+        selectorButton: "text-default-500",
+      }}
+      defaultItems={users}
+      inputProps={{
+        classNames: {
+          input: "ml-1",
+          inputWrapper: "h-[48px]",
+        },
+      }}
+      listboxProps={{
+        hideSelectedIcon: true,
+        itemClasses: {
+          base: [
+            "rounded-medium",
+            "text-default-500",
+            "transition-opacity",
+            "data-[hover=true]:text-foreground",
+            "dark:data-[hover=true]:bg-default-50",
+            "data-[pressed=true]:opacity-70",
+            "data-[hover=true]:bg-default-200",
+            "data-[selectable=true]:focus:bg-default-100",
+            "data-[focus-visible=true]:ring-default-500",
+          ],
+        },
+      }}
+      placeholder="Enter employee name"
+      popoverProps={{
+        offset: 10,
+        classNames: {
+          base: "rounded-large",
+          content: "p-1 border-small border-default-100 bg-background",
+        },
+      }}
+      radius="full"
+      startContent={<SearchIcon className="text-default-400" size={20} strokeWidth={2.5} />}
+      variant="bordered"
+    >
+      {(item) => (
+        <AutocompleteItem key={item.id} textValue={item.name}>
+          <div className="flex justify-between items-center">
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.team}</span>
+              </div>
+            </div>
+            <Button
+              className="border-small mr-0.5 font-medium shadow-small"
+              radius="full"
+              size="sm"
+              variant="bordered"
+            >
+              Add
+            </Button>
+          </div>
+        </AutocompleteItem>
+      )}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-styles.ts b/apps/docs/content/components/autocomplete/custom-styles.ts
index 8782766986..da3ea9093a 100644
--- a/apps/docs/content/components/autocomplete/custom-styles.ts
+++ b/apps/docs/content/components/autocomplete/custom-styles.ts
@@ -1,317 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const SearchIcon = `export const SearchIcon = ({
-  size = 24,
-  strokeWidth = 1.5,
-  width,
-  height,
-  ...props
-}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={height || size}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={width || size}
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);`;
-
-const App = `import {Autocomplete, AutocompleteItem, Avatar, Button} from "@nextui-org/react";
-import {SearchIcon} from "./SearchIcon";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      classNames={{
-        base: "max-w-xs",
-        listboxWrapper: "max-h-[320px]",
-        selectorButton: "text-default-500"
-      }}
-      defaultItems={users}
-      inputProps={{
-        classNames: {
-          input: "ml-1",
-          inputWrapper: "h-[48px]",
-        },
-      }}
-      listboxProps={{
-        hideSelectedIcon: true,
-        itemClasses: {
-          base: [
-            "rounded-medium",
-            "text-default-500",
-            "transition-opacity",
-            "data-[hover=true]:text-foreground",
-            "dark:data-[hover=true]:bg-default-50",
-            "data-[pressed=true]:opacity-70",
-            "data-[hover=true]:bg-default-200",
-            "data-[selectable=true]:focus:bg-default-100",
-            "data-[focus-visible=true]:ring-default-500",
-          ],
-        },
-      }}
-      aria-label="Select an employee"
-      placeholder="Enter employee name"
-      popoverProps={{
-        offset: 10,
-        classNames: {
-          base: "rounded-large",
-          content: "p-1 border-small border-default-100 bg-background",
-        },
-      }}
-      startContent={<SearchIcon className="text-default-400" strokeWidth={2.5} size={20} />}
-      radius="full"
-      variant="bordered"
-    >
-      {(item) => (
-        <AutocompleteItem key={item.id} textValue={item.name}>
-          <div className="flex justify-between items-center">
-            <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
-              <div className="flex flex-col">
-                <span className="text-small">{item.name}</span>
-                <span className="text-tiny text-default-400">{item.team}</span>
-              </div>
-            </div>
-            <Button
-              className="border-small mr-0.5 font-medium shadow-small"
-              radius="full"
-              size="sm"
-              variant="bordered"
-            >
-              Add
-            </Button>
-          </div>
-        </AutocompleteItem>
-      )}
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SearchIcon.jsx": SearchIcon,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx
new file mode 100644
index 0000000000..ec46f43f0c
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx
@@ -0,0 +1,43 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      allowsCustomValue
+      className="max-w-xs"
+      defaultItems={animals}
+      label="Search an animal"
+      variant="bordered"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/custom-value.ts b/apps/docs/content/components/autocomplete/custom-value.ts
index ef17993ac6..a3d01f165d 100644
--- a/apps/docs/content/components/autocomplete/custom-value.ts
+++ b/apps/docs/content/components/autocomplete/custom-value.ts
@@ -1,51 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete 
-      allowsCustomValue
-      label="Search an animal" 
-      variant="bordered"
-      className="max-w-xs" 
-      defaultItems={animals}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./custom-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx
new file mode 100644
index 0000000000..d8f7e5bbaa
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/description.raw.jsx
@@ -0,0 +1,44 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      description="The second most popular pet in the world"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/description.ts b/apps/docs/content/components/autocomplete/description.ts
index 17947b2824..aeb6340b6b 100644
--- a/apps/docs/content/components/autocomplete/description.ts
+++ b/apps/docs/content/components/autocomplete/description.ts
@@ -1,52 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      description="The second most popular pet in the world"
-      defaultItems={animals}
-      defaultSelectedKey="cat"
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx
new file mode 100644
index 0000000000..8b90a1f045
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx
@@ -0,0 +1,43 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/disabled-items.ts b/apps/docs/content/components/autocomplete/disabled-items.ts
index caa7c63254..4ff907eed2 100644
--- a/apps/docs/content/components/autocomplete/disabled-items.ts
+++ b/apps/docs/content/components/autocomplete/disabled-items.ts
@@ -1,51 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      defaultItems={animals}
-      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./disabled-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/disabled.raw.jsx b/apps/docs/content/components/autocomplete/disabled.raw.jsx
new file mode 100644
index 0000000000..5524c3850a
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/disabled.raw.jsx
@@ -0,0 +1,44 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      isDisabled
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/disabled.ts b/apps/docs/content/components/autocomplete/disabled.ts
index 4642caaa37..1a215cc91f 100644
--- a/apps/docs/content/components/autocomplete/disabled.ts
+++ b/apps/docs/content/components/autocomplete/disabled.ts
@@ -1,52 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      isDisabled
-      defaultItems={animals}
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      defaultSelectedKey="cat"
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx
new file mode 100644
index 0000000000..02d854ca30
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx
@@ -0,0 +1,42 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(animal) => <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/dynamic.ts b/apps/docs/content/components/autocomplete/dynamic.ts
index d24de783be..5d3c97bb9a 100644
--- a/apps/docs/content/components/autocomplete/dynamic.ts
+++ b/apps/docs/content/components/autocomplete/dynamic.ts
@@ -1,50 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      defaultItems={animals}
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      className="max-w-xs"
-    >
-      {(animal) => <AutocompleteItem key={animal.value}>{animal.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx
new file mode 100644
index 0000000000..fa9082e486
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx
@@ -0,0 +1,54 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const [key, setValue] = React.useState("");
+  const [touched, setTouched] = React.useState(false);
+
+  const isValid = key === "cat";
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      description="The second most popular pet in the world"
+      errorMessage={isValid || !touched ? "" : "You must select a cat"}
+      isInvalid={isValid || !touched ? false : true}
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      selectedKey={key}
+      variant="bordered"
+      onClose={() => setTouched(true)}
+      onSelectionChange={setValue}
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/error-message.ts b/apps/docs/content/components/autocomplete/error-message.ts
index 4f703637d8..fb8101b132 100644
--- a/apps/docs/content/components/autocomplete/error-message.ts
+++ b/apps/docs/content/components/autocomplete/error-message.ts
@@ -1,62 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-  const [touched, setTouched] = React.useState(false);
-
-  const isValid = value === "cat";
-
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      variant="bordered"
-      placeholder="Search an animal"
-      description="The second most popular pet in the world"
-      errorMessage={isValid || !touched ? "" : "You must select a cat"}
-      isInvalid={isValid || !touched ? false : true}
-      defaultItems={animals}
-      selectedKey={value}
-      className="max-w-xs"
-      onSelectionChange={setValue}
-      onClose={() => setTouched(true)}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx
new file mode 100644
index 0000000000..b54015518c
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/events.raw.jsx
@@ -0,0 +1,60 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+  const [selectedKey, setSelectedKey] = React.useState(null);
+
+  const onSelectionChange = (id) => {
+    setSelectedKey(id);
+  };
+
+  const onInputChange = (value) => {
+    setValue(value);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <Autocomplete
+        allowsCustomValue={true}
+        className="max-w-xs"
+        defaultItems={animals}
+        label="Search an animal"
+        variant="bordered"
+        onInputChange={onInputChange}
+        onSelectionChange={onSelectionChange}
+      >
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+      <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
+      <p className="text-small text-default-500">Current input text: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/events.raw.tsx b/apps/docs/content/components/autocomplete/events.raw.tsx
new file mode 100644
index 0000000000..4e0c01fd53
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/events.raw.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState<string>("");
+  const [selectedKey, setSelectedKey] = React.useState<React.Key | null>(null);
+
+  const onSelectionChange = (key: React.Key | null) => {
+    setSelectedKey(key);
+  };
+
+  const onInputChange = (value: string) => {
+    setValue(value);
+  };
+
+  return (
+    <div className="flex w-full flex-col">
+      <Autocomplete
+        allowsCustomValue={true}
+        className="max-w-xs"
+        defaultItems={animals}
+        label="Search an animal"
+        variant="underlined"
+        onInputChange={onInputChange}
+        onSelectionChange={onSelectionChange}
+      >
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+      <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
+      <p className="text-small text-default-500">Current input text: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/events.ts b/apps/docs/content/components/autocomplete/events.ts
index 1983ff3fa4..eec42f6942 100644
--- a/apps/docs/content/components/autocomplete/events.ts
+++ b/apps/docs/content/components/autocomplete/events.ts
@@ -1,110 +1,11 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-
-export default function App() {
-  const [value, setValue] = React.useState('');
-  const [selectedKey, setSelectedKey] = React.useState(null);
-
-  const onSelectionChange = (id) => {
-    setSelectedKey(id);
-  };
-  
-  const onInputChange = (value) => {
-    setValue(value)
-  };
-
-  return (
-    <div className="flex w-full flex-col">
-      <Autocomplete 
-        label="Search an animal" 
-        variant="bordered"
-        defaultItems={animals}
-        className="max-w-xs" 
-        allowsCustomValue={true}
-        onSelectionChange={onSelectionChange}
-        onInputChange={onInputChange}
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-      <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
-      <p className="text-small text-default-500">Current input text: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<string>('');
-  const [selectedKey, setSelectedKey] = React.useState<React.Key | null>(null);
-
-  const onSelectionChange = (key: React.Key) => {
-    setSelectedKey(key);
-  };
-  
-  const onInputChange = (value: string) => {
-    setValue(value)
-  };
-
-  return (
-    <div className="flex w-full flex-col">
-      <Autocomplete 
-        label="Search an animal" 
-        variant="underlined"
-        defaultItems={animals}
-        className="max-w-xs" 
-        allowsCustomValue={true}
-        onSelectionChange={onSelectionChange}
-        onInputChange={onInputChange}
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-      <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
-      <p className="text-small text-default-500">Current input text: {value}</p>
-    </div>
-  );
-}`;
+import App from "./events.raw.jsx?raw";
+import AppTs from "./events.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-};
-
-const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
-  ...reactTs,
 };
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx
new file mode 100644
index 0000000000..6b0049e68d
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx
@@ -0,0 +1,96 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {useFilter} from "@react-aria/i18n";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  // Store Autocomplete input value, selected option, open state, and items
+  // in a state tracker
+  const [fieldState, setFieldState] = React.useState({
+    selectedKey: "",
+    inputValue: "",
+    items: animals,
+  });
+
+  // Implement custom filtering logic and control what items are
+  // available to the Autocomplete.
+  const {startsWith} = useFilter({sensitivity: "base"});
+
+  // Specify how each of the Autocomplete values should change when an
+  // option is selected from the list box
+  const onSelectionChange = (key) => {
+    setFieldState((prevState) => {
+      let selectedItem = prevState.items.find((option) => option.value === key);
+
+      return {
+        inputValue: selectedItem?.label || "",
+        selectedKey: key,
+        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
+      };
+    });
+  };
+
+  // Specify how each of the Autocomplete values should change when the input
+  // field is altered by the user
+  const onInputChange = (value) => {
+    setFieldState((prevState) => ({
+      inputValue: value,
+      selectedKey: value === "" ? null : prevState.selectedKey,
+      items: animals.filter((item) => startsWith(item.label, value)),
+    }));
+  };
+
+  // Show entire list if user opens the menu manually
+  const onOpenChange = (isOpen, menuTrigger) => {
+    if (menuTrigger === "manual" && isOpen) {
+      setFieldState((prevState) => ({
+        inputValue: prevState.inputValue,
+        selectedKey: prevState.selectedKey,
+        items: animals,
+      }));
+    }
+  };
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      inputValue={fieldState.inputValue}
+      items={fieldState.items}
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      selectedKey={fieldState.selectedKey}
+      variant="bordered"
+      onInputChange={onInputChange}
+      onOpenChange={onOpenChange}
+      onSelectionChange={onSelectionChange}
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
new file mode 100644
index 0000000000..553ecf6e10
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
@@ -0,0 +1,103 @@
+import React from "react";
+import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react";
+import {useFilter} from "@react-aria/i18n";
+
+export type FieldState = {
+  selectedKey: React.Key | null;
+  inputValue: string;
+  items: typeof animals;
+};
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  // Store Autocomplete input value, selected option, open state, and items
+  // in a state tracker
+  const [fieldState, setFieldState] = React.useState<FieldState>({
+    selectedKey: "",
+    inputValue: "",
+    items: animals,
+  });
+
+  // Implement custom filtering logic and control what items are
+  // available to the Autocomplete.
+  const {startsWith} = useFilter({sensitivity: "base"});
+
+  // Specify how each of the Autocomplete values should change when an
+  // option is selected from the list box
+  const onSelectionChange = (key: React.Key | null) => {
+    setFieldState((prevState) => {
+      let selectedItem = prevState.items.find((option) => option.key === key);
+
+      return {
+        inputValue: selectedItem?.label || "",
+        selectedKey: key,
+        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
+      };
+    });
+  };
+
+  // Specify how each of the Autocomplete values should change when the input
+  // field is altered by the user
+  const onInputChange = (value: string) => {
+    setFieldState((prevState) => ({
+      inputValue: value,
+      selectedKey: value === "" ? null : prevState.selectedKey,
+      items: animals.filter((item) => startsWith(item.label, value)),
+    }));
+  };
+
+  // Show entire list if user opens the menu manually
+  const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => {
+    if (menuTrigger === "manual" && isOpen) {
+      setFieldState((prevState) => ({
+        inputValue: prevState.inputValue,
+        selectedKey: prevState.selectedKey,
+        items: animals,
+      }));
+    }
+  };
+
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      inputValue={fieldState.inputValue}
+      items={fieldState.items}
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      selectedKey={fieldState.selectedKey}
+      variant="bordered"
+      onInputChange={onInputChange}
+      onOpenChange={onOpenChange}
+      onSelectionChange={onSelectionChange}
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.ts b/apps/docs/content/components/autocomplete/fully-controlled.ts
index 9b969ba31c..a32d212100 100644
--- a/apps/docs/content/components/autocomplete/fully-controlled.ts
+++ b/apps/docs/content/components/autocomplete/fully-controlled.ts
@@ -1,187 +1,11 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {useFilter} from "@react-aria/i18n";
-import {animals} from "./data";
-
-export default function App() {
-  // Store Autocomplete input value, selected option, open state, and items
-  // in a state tracker
-  const [fieldState, setFieldState] = React.useState({
-    selectedKey: "",
-    inputValue: "",
-    items: animals,
-  });
-
-  // Implement custom filtering logic and control what items are
-  // available to the Autocomplete.
-  const {startsWith} = useFilter({sensitivity: "base"});
-
-  // Specify how each of the Autocomplete values should change when an
-  // option is selected from the list box
-  const onSelectionChange = (key) => {
-    setFieldState((prevState) => {
-      let selectedItem = prevState.items.find((option) => option.value === key);
-
-      return {
-        inputValue: selectedItem?.label || "",
-        selectedKey: key,
-        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
-      };
-    });
-  };
-
-  // Specify how each of the Autocomplete values should change when the input
-  // field is altered by the user
-  const onInputChange = (value) => {
-    setFieldState((prevState) => ({
-      inputValue: value,
-      selectedKey: value === "" ? null : prevState.selectedKey,
-      items: animals.filter((item) => startsWith(item.label, value)),
-    }));
-  };
-
-  // Show entire list if user opens the menu manually
-  const onOpenChange = (isOpen, menuTrigger) => {
-    if (menuTrigger === "manual" && isOpen) {
-      setFieldState((prevState) => ({
-        inputValue: prevState.inputValue,
-        selectedKey: prevState.selectedKey,
-        items: animals,
-      }));
-    }
-  };
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      inputValue={fieldState.inputValue}
-      items={fieldState.items}
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      selectedKey={fieldState.selectedKey}
-      variant="bordered"
-      onInputChange={onInputChange}
-      onOpenChange={onOpenChange}
-      onSelectionChange={onSelectionChange}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
-
-const AppTs = `import {Autocomplete, AutocompleteItem, MenuTriggerAction} from "@nextui-org/react";
-import {useFilter} from "@react-aria/i18n";
-import {animals} from "./data";
-
-type FieldState = {
-  selectedKey: React.Key | null;
-  inputValue: string;
-  items: typeof animals;
-};
-
-export default function App() {
-  // Store Autocomplete input value, selected option, open state, and items
-  // in a state tracker
-  const [fieldState, setFieldState] = React.useState<FieldState>({
-    selectedKey: "",
-    inputValue: "",
-    items: animals,
-  });
-
-  // Implement custom filtering logic and control what items are
-  // available to the Autocomplete.
-  const {startsWith} = useFilter({sensitivity: "base"});
-
-  // Specify how each of the Autocomplete values should change when an
-  // option is selected from the list box
-  const onSelectionChange = (key: React.Key) => {
-    setFieldState((prevState) => {
-      let selectedItem = prevState.items.find((option) => option.value === key);
-
-      return {
-        inputValue: selectedItem?.label || "",
-        selectedKey: key,
-        items: animals.filter((item) => startsWith(item.label, selectedItem?.label || "")),
-      };
-    });
-  };
-
-  // Specify how each of the Autocomplete values should change when the input
-  // field is altered by the user
-  const onInputChange = (value: string) => {
-    setFieldState((prevState) => ({
-      inputValue: value,
-      selectedKey: value === "" ? null : prevState.selectedKey,
-      items: animals.filter((item) => startsWith(item.label, value)),
-    }));
-  };
-
-  // Show entire list if user opens the menu manually
-  const onOpenChange = (isOpen: boolean, menuTrigger: MenuTriggerAction) => {
-    if (menuTrigger === "manual" && isOpen) {
-      setFieldState((prevState) => ({
-        inputValue: prevState.inputValue,
-        selectedKey: prevState.selectedKey,
-        items: animals,
-      }));
-    }
-  };
-
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      inputValue={fieldState.inputValue}
-      items={fieldState.items}
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      selectedKey={fieldState.selectedKey}
-      variant="bordered"
-      onInputChange={onInputChange}
-      onOpenChange={onOpenChange}
-      onSelectionChange={onSelectionChange}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./fully-controlled.raw.tsx?raw";
+import AppTs from "./fully-controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-};
-
-const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
-  ...reactTs,
 };
diff --git a/apps/docs/content/components/autocomplete/index.ts b/apps/docs/content/components/autocomplete/index.ts
index 76d57925a3..e57bde14dc 100644
--- a/apps/docs/content/components/autocomplete/index.ts
+++ b/apps/docs/content/components/autocomplete/index.ts
@@ -26,6 +26,10 @@ import customSectionsStyle from "./custom-sections-style";
 import customStyles from "./custom-styles";
 import customEmptyContentMessage from "./custom-empty-content-message";
 import readOnly from "./read-only";
+import virtualization from "./virtualization";
+import virtualizationTenThousand from "./virtualization-ten-thousand";
+import virtualizationMaxListboxHeight from "./virtualization-max-listbox-height";
+import virtualizationCustomItemHeight from "./virtualization-custom-item-height";
 
 export const autocompleteContent = {
   usage,
@@ -56,4 +60,8 @@ export const autocompleteContent = {
   customStyles,
   customEmptyContentMessage,
   readOnly,
+  virtualization,
+  virtualizationTenThousand,
+  virtualizationMaxListboxHeight,
+  virtualizationCustomItemHeight,
 };
diff --git a/apps/docs/content/components/autocomplete/item-start-content.raw.jsx b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx
new file mode 100644
index 0000000000..70468dd7bd
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/item-start-content.raw.jsx
@@ -0,0 +1,68 @@
+import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Autocomplete className="max-w-xs" label="Select country">
+      <AutocompleteItem
+        key="argentina"
+        startContent={
+          <Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />
+        }
+      >
+        Argentina
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="venezuela"
+        startContent={
+          <Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />
+        }
+      >
+        Venezuela
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="brazil"
+        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
+      >
+        Brazil
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="switzerland"
+        startContent={
+          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
+        }
+      >
+        Switzerland
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="germany"
+        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
+      >
+        Germany
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="spain"
+        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
+      >
+        Spain
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="france"
+        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
+      >
+        France
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="italy"
+        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
+      >
+        Italy
+      </AutocompleteItem>
+      <AutocompleteItem
+        key="mexico"
+        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
+      >
+        Mexico
+      </AutocompleteItem>
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/item-start-content.ts b/apps/docs/content/components/autocomplete/item-start-content.ts
index 02a9e14bd1..294a22e6b2 100644
--- a/apps/docs/content/components/autocomplete/item-start-content.ts
+++ b/apps/docs/content/components/autocomplete/item-start-content.ts
@@ -1,70 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Autocomplete
-      className="max-w-xs"
-      label="Select country"
-    >
-      <AutocompleteItem
-        key="argentina"
-        startContent={<Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />}
-      >
-        Argentina
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="venezuela"
-        startContent={<Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />}
-      >
-        Venezuela
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="brazil"
-        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
-      >
-        Brazil
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="switzerland"
-        startContent={
-          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
-        }
-      >
-        Switzerland
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="germany"
-        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
-      >
-        Germany
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="spain"
-        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
-      >
-        Spain
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="france"
-        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
-      >
-        France
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="italy"
-        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
-      >
-        Italy
-      </AutocompleteItem>
-      <AutocompleteItem
-        key="mexico"
-        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
-      >
-        Mexico
-      </AutocompleteItem>
-    </Autocomplete>
-  );
-}`;
+import App from "./item-start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/label-placements.raw.jsx b/apps/docs/content/components/autocomplete/label-placements.raw.jsx
new file mode 100644
index 0000000000..bc019062b4
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx
@@ -0,0 +1,72 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">Without placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Autocomplete
+              key={placement}
+              className="max-w-xs"
+              defaultItems={animals}
+              label="Favorite Animal"
+              labelPlacement={placement}
+            >
+              {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+            </Autocomplete>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">With placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Autocomplete
+              key={placement}
+              className="max-w-xs"
+              label="Favorite Animal"
+              labelPlacement={placement}
+              placeholder="Search an animal"
+            >
+              {animals.map((animal) => (
+                <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
+              ))}
+            </Autocomplete>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/label-placements.ts b/apps/docs/content/components/autocomplete/label-placements.ts
index 391dba7ed9..cd2a65d352 100644
--- a/apps/docs/content/components/autocomplete/label-placements.ts
+++ b/apps/docs/content/components/autocomplete/label-placements.ts
@@ -1,84 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">Without placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Autocomplete
-              defaultItems={animals}
-              labelPlacement={placement}
-              label="Favorite Animal"
-              className="max-w-xs"
-            >
-              {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-            </Autocomplete>
-          ))}
-        </div>
-      </div>  
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">With placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Autocomplete
-              labelPlacement={placement}
-              label="Favorite Animal"
-              placeholder="Search an animal"
-              className="max-w-xs"
-            >
-              {animals.map((animal) => (
-                <AutocompleteItem key={animal.value} value={animal.value}>
-                  {animal.label}
-                </AutocompleteItem>
-              ))}
-            </Autocomplete>
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx
new file mode 100644
index 0000000000..2801df8aba
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx
@@ -0,0 +1,44 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      isReadOnly
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/read-only.ts b/apps/docs/content/components/autocomplete/read-only.ts
index 006d69b118..caf4be10cf 100644
--- a/apps/docs/content/components/autocomplete/read-only.ts
+++ b/apps/docs/content/components/autocomplete/read-only.ts
@@ -1,52 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      isReadOnly
-      label="Favorite Animal"
-      defaultItems={animals}
-      placeholder="Search an animal"
-      defaultSelectedKey="cat"
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx
new file mode 100644
index 0000000000..5fa999c6e4
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/required.raw.jsx
@@ -0,0 +1,44 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      isRequired
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/required.ts b/apps/docs/content/components/autocomplete/required.ts
index d30e1b0547..b50b781e6f 100644
--- a/apps/docs/content/components/autocomplete/required.ts
+++ b/apps/docs/content/components/autocomplete/required.ts
@@ -1,52 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      isRequired
-      label="Favorite Animal"
-      defaultItems={animals}
-      placeholder="Search an animal"
-      defaultSelectedKey="cat"
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/sections.raw.jsx b/apps/docs/content/components/autocomplete/sections.raw.jsx
new file mode 100644
index 0000000000..f78b068927
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/sections.raw.jsx
@@ -0,0 +1,28 @@
+import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Autocomplete className="max-w-xs" label="Favorite Animal" placeholder="Search an animal">
+      <AutocompleteSection showDivider title="Mammals">
+        <AutocompleteItem key="Lion">Lion</AutocompleteItem>
+        <AutocompleteItem key="Tiger">Tiger</AutocompleteItem>
+        <AutocompleteItem key="Elephant">Elephant</AutocompleteItem>
+        <AutocompleteItem key="Kangaroo">Kangaroo</AutocompleteItem>
+        <AutocompleteItem key="Panda">Panda</AutocompleteItem>
+        <AutocompleteItem key="Giraffe">Giraffe</AutocompleteItem>
+        <AutocompleteItem key="Zebra">Zebra</AutocompleteItem>
+        <AutocompleteItem key="Cheetah">Cheetah</AutocompleteItem>
+      </AutocompleteSection>
+      <AutocompleteSection title="Birds">
+        <AutocompleteItem key="Eagle">Eagle</AutocompleteItem>
+        <AutocompleteItem key="Parrot">Parrot</AutocompleteItem>
+        <AutocompleteItem key="Penguin">Penguin</AutocompleteItem>
+        <AutocompleteItem key="Ostrich">Ostrich</AutocompleteItem>
+        <AutocompleteItem key="Peacock">Peacock</AutocompleteItem>
+        <AutocompleteItem key="Swan">Swan</AutocompleteItem>
+        <AutocompleteItem key="Falcon">Falcon</AutocompleteItem>
+        <AutocompleteItem key="Flamingo">Flamingo</AutocompleteItem>
+      </AutocompleteSection>
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/sections.ts b/apps/docs/content/components/autocomplete/sections.ts
index 09219558dc..17cd360ea3 100644
--- a/apps/docs/content/components/autocomplete/sections.ts
+++ b/apps/docs/content/components/autocomplete/sections.ts
@@ -1,35 +1,4 @@
-const App = `import {Autocomplete, AutocompleteItem, AutocompleteSection} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      className="max-w-xs"
-    >
-      <AutocompleteSection showDivider title="Mammals">
-        <AutocompleteItem key="Lion">Lion</AutocompleteItem>
-        <AutocompleteItem key="Tiger">Tiger</AutocompleteItem>
-        <AutocompleteItem key="Elephant">Elephant</AutocompleteItem>
-        <AutocompleteItem key="Kangaroo">Kangaroo</AutocompleteItem>
-        <AutocompleteItem key="Panda">Panda</AutocompleteItem>
-        <AutocompleteItem key="Giraffe">Giraffe</AutocompleteItem>
-        <AutocompleteItem key="Zebra">Zebra</AutocompleteItem>
-        <AutocompleteItem key="Cheetah">Cheetah</AutocompleteItem>
-      </AutocompleteSection>
-      <AutocompleteSection title="Birds">
-        <AutocompleteItem key="Eagle">Eagle</AutocompleteItem>
-        <AutocompleteItem key="Parrot">Parrot</AutocompleteItem>
-        <AutocompleteItem key="Penguin">Penguin</AutocompleteItem>
-        <AutocompleteItem key="Ostrich">Ostrich</AutocompleteItem>
-        <AutocompleteItem key="Peacock">Peacock</AutocompleteItem>
-        <AutocompleteItem key="Swan">Swan</AutocompleteItem>
-        <AutocompleteItem key="Falcon">Falcon</AutocompleteItem>
-        <AutocompleteItem key="Flamingo">Flamingo</AutocompleteItem>
-      </AutocompleteSection>
-    </Autocomplete>
-  );
-}`;
+import App from "./sections.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx
new file mode 100644
index 0000000000..31906647eb
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx
@@ -0,0 +1,59 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Autocomplete
+            className="max-w-xs"
+            defaultItems={animals}
+            label="Select an animal"
+            size={size}
+          >
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+          </Autocomplete>
+          <Autocomplete
+            className="max-w-xs"
+            defaultItems={animals}
+            label="Favorite Animal"
+            placeholder="Search an animal"
+            size={size}
+          >
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+          </Autocomplete>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/sizes.ts b/apps/docs/content/components/autocomplete/sizes.ts
index 06acaf7e0a..85a2f5b30b 100644
--- a/apps/docs/content/components/autocomplete/sizes.ts
+++ b/apps/docs/content/components/autocomplete/sizes.ts
@@ -1,67 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {sizes.map((size) => (
-        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Autocomplete 
-            size={size}
-            defaultItems={animals}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-          </Autocomplete>
-          <Autocomplete
-            size={size}
-            defaultItems={animals}
-            label="Favorite Animal"
-            placeholder="Search an animal"
-            className="max-w-xs"
-          >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-          </Autocomplete>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx
new file mode 100644
index 0000000000..58e526aaac
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx
@@ -0,0 +1,81 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const PetIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      startContent={<PetIcon className="text-xl" />}
+      variant="bordered"
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/start-content.ts b/apps/docs/content/components/autocomplete/start-content.ts
index 90ee37634d..59191d72a7 100644
--- a/apps/docs/content/components/autocomplete/start-content.ts
+++ b/apps/docs/content/components/autocomplete/start-content.ts
@@ -1,89 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const PetIcon = `export const PetIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
-      fill="currentColor"
-    />
-    <path
-      d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {PetIcon} from "./PetIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      variant="bordered"
-      defaultItems={animals}
-      startContent={<PetIcon className="text-xl" />}
-      defaultSelectedKey="cat"
-      className="max-w-xs"
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/PetIcon.jsx": PetIcon,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx
new file mode 100644
index 0000000000..f95a67897f
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/usage.raw.jsx
@@ -0,0 +1,49 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete className="max-w-xs" label="Select an animal">
+        {animals.map((animal) => (
+          <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
+        ))}
+      </Autocomplete>
+      <Autocomplete
+        className="max-w-xs"
+        defaultItems={animals}
+        label="Favorite Animal"
+        placeholder="Search an animal"
+      >
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/usage.ts b/apps/docs/content/components/autocomplete/usage.ts
index ee0831fa26..1118304c37 100644
--- a/apps/docs/content/components/autocomplete/usage.ts
+++ b/apps/docs/content/components/autocomplete/usage.ts
@@ -1,62 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Autocomplete 
-        label="Select an animal" 
-        className="max-w-xs" 
-      >
-        {animals.map((animal) => (
-          <AutocompleteItem key={animal.value} value={animal.value}>
-            {animal.label}
-          </AutocompleteItem>
-        ))}
-      </Autocomplete>
-      <Autocomplete
-        label="Favorite Animal"
-        placeholder="Search an animal"
-        className="max-w-xs"
-        defaultItems={animals}
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-      </Autocomplete>
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx
new file mode 100644
index 0000000000..a222f3afaf
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/variants.raw.jsx
@@ -0,0 +1,60 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Autocomplete
+            className="max-w-xs"
+            defaultItems={animals}
+            label="Select an animal"
+            variant={variant}
+          >
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+          </Autocomplete>
+          <Autocomplete
+            className="max-w-xs"
+            label="Favorite Animal"
+            placeholder="Search an animal"
+            variant={variant}
+          >
+            {animals.map((animal) => (
+              <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
+            ))}
+          </Autocomplete>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/variants.ts b/apps/docs/content/components/autocomplete/variants.ts
index f0c5c12101..ddea95fb2e 100644
--- a/apps/docs/content/components/autocomplete/variants.ts
+++ b/apps/docs/content/components/autocomplete/variants.ts
@@ -1,70 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Autocomplete 
-            variant={variant}
-            defaultItems={animals}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-          </Autocomplete>
-          <Autocomplete
-            variant={variant}
-            label="Favorite Animal"
-            placeholder="Search an animal"
-            className="max-w-xs"
-          >
-            {animals.map((animal) => (
-              <AutocompleteItem key={animal.value} value={animal.value}>
-                {animal.label}
-              </AutocompleteItem>
-            ))}
-          </Autocomplete>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx
new file mode 100644
index 0000000000..e53108d669
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.raw.jsx
@@ -0,0 +1,53 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        itemHeight={40}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts
new file mode 100644
index 0000000000..fd9a236015
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-custom-item-height.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-custom-item-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx
new file mode 100644
index 0000000000..55aaf5d903
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.raw.jsx
@@ -0,0 +1,52 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        maxListboxHeight={400}
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts
new file mode 100644
index 0000000000..c23ef32193
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-max-listbox-height.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-max-listbox-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx
new file mode 100644
index 0000000000..5cff3537f6
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(10000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 10000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts
new file mode 100644
index 0000000000..1b8e486cb5
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization-ten-thousand.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/autocomplete/virtualization.raw.jsx b/apps/docs/content/components/autocomplete/virtualization.raw.jsx
new file mode 100644
index 0000000000..aff71743cb
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization.raw.jsx
@@ -0,0 +1,51 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Autocomplete
+        isVirtualized
+        className="max-w-xs"
+        defaultItems={items}
+        label="Search from 1000 items"
+        placeholder="Search..."
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      </Autocomplete>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/virtualization.ts b/apps/docs/content/components/autocomplete/virtualization.ts
new file mode 100644
index 0000000000..e40cbd641f
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/virtualization.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx
new file mode 100644
index 0000000000..56e0385b12
--- /dev/null
+++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx
@@ -0,0 +1,46 @@
+import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+
+export const animals = [
+  {label: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    key: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    key: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    key: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
+];
+
+export default function App() {
+  return (
+    <Autocomplete
+      className="max-w-xs"
+      defaultItems={animals}
+      defaultSelectedKey="cat"
+      label="Favorite Animal"
+      placeholder="Search an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+    >
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}
diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts
index 43123ca2d1..1cfe3080fa 100644
--- a/apps/docs/content/components/autocomplete/without-scroll-shadow.ts
+++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.ts
@@ -1,54 +1,7 @@
-const data = `export const animals = [
-  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
-  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
-  {label: "Elephant", value: "elephant", description: "The largest land animal"},
-  {label: "Lion", value: "lion", description: "The king of the jungle"},
-  {label: "Tiger", value: "tiger", description: "The largest cat species"},
-  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
-  {
-    label: "Dolphin",
-    value: "dolphin",
-    description: "A widely distributed and diverse group of aquatic mammals",
-  },
-  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
-  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
-  {
-    label: "Shark",
-    value: "shark",
-    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
-  },
-  {
-    label: "Whale",
-    value: "whale",
-    description: "Diverse group of fully aquatic placental marine mammals",
-  },
-  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
-  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
-];`;
-
-const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Autocomplete
-      label="Favorite Animal"
-      placeholder="Search an animal"
-      defaultSelectedKey="cat"
-      defaultItems={animals}
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false
-      }}
-    >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
-    </Autocomplete>
-  );
-}`;
+import App from "./without-scroll-shadow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/avatar/bordered.raw.jsx b/apps/docs/content/components/avatar/bordered.raw.jsx
new file mode 100644
index 0000000000..4c39afe103
--- /dev/null
+++ b/apps/docs/content/components/avatar/bordered.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/bordered.ts b/apps/docs/content/components/avatar/bordered.ts
index 0a6a75f976..4e025375c3 100644
--- a/apps/docs/content/components/avatar/bordered.ts
+++ b/apps/docs/content/components/avatar/bordered.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isBordered src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </div>
-  );
-}`;
+import App from "./bordered.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/colors.raw.jsx b/apps/docs/content/components/avatar/colors.raw.jsx
new file mode 100644
index 0000000000..8f64bc1413
--- /dev/null
+++ b/apps/docs/content/components/avatar/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered color="default" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar isBordered color="secondary" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered color="success" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered color="warning" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isBordered color="danger" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/colors.ts b/apps/docs/content/components/avatar/colors.ts
index d4bd93f4b9..d5bef810aa 100644
--- a/apps/docs/content/components/avatar/colors.ts
+++ b/apps/docs/content/components/avatar/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered color="default" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isBordered color="primary" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar isBordered color="secondary" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered color="success" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered color="warning" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isBordered color="danger" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/custom-fallback.raw.jsx b/apps/docs/content/components/avatar/custom-fallback.raw.jsx
new file mode 100644
index 0000000000..e9d7a19272
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-fallback.raw.jsx
@@ -0,0 +1,41 @@
+import {Avatar} from "@nextui-org/react";
+
+export const CameraIcon = ({fill, size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar
+        showFallback
+        fallback={
+          <CameraIcon
+            className="animate-pulse w-6 h-6 text-default-500"
+            fill="currentColor"
+            size={20}
+          />
+        }
+        src="https://images.unsplash.com/broken"
+      />
+      <Avatar showFallback name="Jane" src="https://images.unsplash.com/broken" />
+      <Avatar name="Joe" src="https://images.unsplash.com/broken" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/custom-fallback.ts b/apps/docs/content/components/avatar/custom-fallback.ts
index 171ee43b4f..24a9b3e8e2 100644
--- a/apps/docs/content/components/avatar/custom-fallback.ts
+++ b/apps/docs/content/components/avatar/custom-fallback.ts
@@ -1,41 +1,7 @@
-const CameraIcon = `export const CameraIcon = ({fill, size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Avatar} from "@nextui-org/react";
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar showFallback src='https://images.unsplash.com/broken' fallback={
-        <CameraIcon className="animate-pulse w-6 h-6 text-default-500" fill="currentColor" size={20} />
-      } />
-      <Avatar showFallback name='Jane' src='https://images.unsplash.com/broken' />
-      <Avatar name='Joe' src='https://images.unsplash.com/broken' />
-    </div>
-  );
-}`;
+import App from "./custom-fallback.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/avatar/custom-impl.raw.jsx b/apps/docs/content/components/avatar/custom-impl.raw.jsx
new file mode 100644
index 0000000000..af2b0ab084
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-impl.raw.jsx
@@ -0,0 +1,60 @@
+import {forwardRef, useMemo} from "react";
+import {AvatarIcon, useAvatar} from "@nextui-org/react";
+
+const MyAvatar = forwardRef((props, ref) => {
+  const {
+    src,
+    icon = <AvatarIcon />,
+    alt,
+    classNames,
+    slots,
+    name,
+    showFallback,
+    fallback: fallbackComponent,
+    getInitials,
+    getAvatarProps,
+    getImageProps,
+  } = useAvatar({
+    ref,
+    ...props,
+  });
+
+  const fallback = useMemo(() => {
+    if (!showFallback && src) return null;
+
+    const ariaLabel = alt || name || "avatar";
+
+    if (fallbackComponent) {
+      return (
+        <div
+          aria-label={ariaLabel}
+          className={slots.fallback({class: classNames?.fallback})}
+          role="img"
+        >
+          {fallbackComponent}
+        </div>
+      );
+    }
+
+    return name ? (
+      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
+        {getInitials(name)}
+      </span>
+    ) : (
+      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
+        {icon}
+      </span>
+    );
+  }, [showFallback, src, fallbackComponent, name, classNames]);
+
+  return (
+    <div {...getAvatarProps()}>
+      {src && <img {...getImageProps()} alt={alt} />}
+      {fallback}
+    </div>
+  );
+});
+
+MyAvatar.displayName = "MyAvatar";
+
+export default MyAvatar;
diff --git a/apps/docs/content/components/avatar/custom-impl.raw.tsx b/apps/docs/content/components/avatar/custom-impl.raw.tsx
new file mode 100644
index 0000000000..9cd0db925f
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom-impl.raw.tsx
@@ -0,0 +1,62 @@
+import {forwardRef, useMemo} from "react";
+import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
+
+export interface AvatarProps extends BaseAvatarProps {}
+
+const MyAvatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
+  const {
+    src,
+    icon = <AvatarIcon />,
+    alt,
+    classNames,
+    slots,
+    name,
+    showFallback,
+    fallback: fallbackComponent,
+    getInitials,
+    getAvatarProps,
+    getImageProps,
+  } = useAvatar({
+    ref,
+    ...props,
+  });
+
+  const fallback = useMemo(() => {
+    if (!showFallback && src) return null;
+
+    const ariaLabel = alt || name || "avatar";
+
+    if (fallbackComponent) {
+      return (
+        <div
+          aria-label={ariaLabel}
+          className={slots.fallback({class: classNames?.fallback})}
+          role="img"
+        >
+          {fallbackComponent}
+        </div>
+      );
+    }
+
+    return name ? (
+      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
+        {getInitials(name)}
+      </span>
+    ) : (
+      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
+        {icon}
+      </span>
+    );
+  }, [showFallback, src, fallbackComponent, name, classNames]);
+
+  return (
+    <div {...getAvatarProps()}>
+      {src && <img {...getImageProps()} alt={alt} />}
+      {fallback}
+    </div>
+  );
+});
+
+MyAvatar.displayName = "MyAvatar";
+
+export default MyAvatar;
diff --git a/apps/docs/content/components/avatar/custom-impl.ts b/apps/docs/content/components/avatar/custom-impl.ts
index 5a0c2e9caf..ef0d8ef531 100644
--- a/apps/docs/content/components/avatar/custom-impl.ts
+++ b/apps/docs/content/components/avatar/custom-impl.ts
@@ -1,129 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {useMemo} from "react";
-
-import {AvatarIcon, useAvatar} from "@nextui-org/react";
-
-const MyAvatar = forwardRef((props, ref) => {
-  const {
-    src,
-    icon = <AvatarIcon />,
-    alt,
-    classNames,
-    slots,
-    name,
-    showFallback,
-    fallback: fallbackComponent,
-    getInitials,
-    getAvatarProps,
-    getImageProps,
-  } = useAvatar({
-    ref,
-    ...props,
-  });
-
-  const fallback = useMemo(() => {
-    if (!showFallback && src) return null;
-
-    const ariaLabel = alt || name || "avatar";
-
-    if (fallbackComponent) {
-      return (
-        <div
-          aria-label={ariaLabel}
-          className={slots.fallback({ class: classNames?.fallback })}
-          role="img"
-        >
-          {fallbackComponent}
-        </div>
-      );
-    }
-
-    return name ? (
-      <span aria-label={ariaLabel} className={slots.name({ class: classNames?.name })} role="img">
-        {getInitials(name)}
-      </span>
-    ) : (
-      <span aria-label={ariaLabel} className={slots.icon({ class: classNames?.icon })} role="img">
-        {icon}
-      </span>
-    );
-  }, [showFallback, src, fallbackComponent, name, classNames]);
-
-  return (
-    <div {...getAvatarProps()}>
-      {src && <img {...getImageProps()} alt={alt} />}
-      {fallback}
-    </div>
-  );
-});
-
-MyAvatar.displayName = "MyAvatar";
-
-export default MyAvatar;`;
-
-const AppTs = `import {forwardRef, useMemo} from "react";
-
-import {AvatarIcon, useAvatar, AvatarProps as BaseAvatarProps} from "@nextui-org/react";
-
-export interface AvatarProps extends BaseAvatarProps {}
-
-const MyAvatar = forwardRef<HTMLSpanElement, AvatarProps>((props, ref) => {
-  const {
-    src,
-    icon = <AvatarIcon />,
-    alt,
-    classNames,
-    slots,
-    name,
-    showFallback,
-    fallback: fallbackComponent,
-    getInitials,
-    getAvatarProps,
-    getImageProps,
-  } = useAvatar({
-    ref,
-    ...props,
-  });
-
-  const fallback = useMemo(() => {
-    if (!showFallback && src) return null;
-
-    const ariaLabel = alt || name || "avatar";
-
-    if (fallbackComponent) {
-      return (
-        <div
-          aria-label={ariaLabel}
-          className={slots.fallback({class: classNames?.fallback})}
-          role="img"
-        >
-          {fallbackComponent}
-        </div>
-      );
-    }
-
-    return name ? (
-      <span aria-label={ariaLabel} className={slots.name({class: classNames?.name})} role="img">
-        {getInitials(name)}
-      </span>
-    ) : (
-      <span aria-label={ariaLabel} className={slots.icon({class: classNames?.icon})} role="img">
-        {icon}
-      </span>
-    );
-  }, [showFallback, src, fallbackComponent, name, classNames]);
-
-  return (
-    <div {...getAvatarProps()}>
-      {src && <img {...getImageProps()} alt={alt} />}
-      {fallback}
-    </div>
-  );
-});
-
-Avatar.displayName = "MyAvatar";
-
-export default MyAvatar;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/custom.raw.jsx b/apps/docs/content/components/avatar/custom.raw.jsx
new file mode 100644
index 0000000000..fb19aa1dc2
--- /dev/null
+++ b/apps/docs/content/components/avatar/custom.raw.jsx
@@ -0,0 +1,15 @@
+import {Avatar, AvatarIcon} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center">
+      <Avatar
+        classNames={{
+          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
+          icon: "text-black/80",
+        }}
+        icon={<AvatarIcon />}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/custom.ts b/apps/docs/content/components/avatar/custom.ts
index 022b950d9b..f6791778a9 100644
--- a/apps/docs/content/components/avatar/custom.ts
+++ b/apps/docs/content/components/avatar/custom.ts
@@ -1,18 +1,4 @@
-const App = `import {Avatar, AvatarIcon} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center">
-      <Avatar
-        icon={<AvatarIcon />}
-        classNames={{
-          base: "bg-gradient-to-br from-[#FFB457] to-[#FF705B]",
-          icon: "text-black/80",
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./custom.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/disabled.raw.jsx b/apps/docs/content/components/avatar/disabled.raw.jsx
new file mode 100644
index 0000000000..99061379d4
--- /dev/null
+++ b/apps/docs/content/components/avatar/disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar isDisabled name="Junior" />
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isDisabled name="Jane" />
+      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar isDisabled name="Joe" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/disabled.ts b/apps/docs/content/components/avatar/disabled.ts
index 7449d40174..1a215cc91f 100644
--- a/apps/docs/content/components/avatar/disabled.ts
+++ b/apps/docs/content/components/avatar/disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar isDisabled name="Junior" />
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isDisabled name="Jane" />
-      <Avatar isDisabled src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar isDisabled name="Joe" />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/fallbacks.raw.jsx b/apps/docs/content/components/avatar/fallbacks.raw.jsx
new file mode 100644
index 0000000000..dbde19d7f7
--- /dev/null
+++ b/apps/docs/content/components/avatar/fallbacks.raw.jsx
@@ -0,0 +1,11 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar showFallback src="https://images.unsplash.com/broken" />
+      <Avatar showFallback name="Jane" src="https://images.unsplash.com/broken" />
+      <Avatar name="Joe" src="https://images.unsplash.com/broken" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/fallbacks.ts b/apps/docs/content/components/avatar/fallbacks.ts
index 6af995a0ab..4abe22969c 100644
--- a/apps/docs/content/components/avatar/fallbacks.ts
+++ b/apps/docs/content/components/avatar/fallbacks.ts
@@ -1,14 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar showFallback src='https://images.unsplash.com/broken' />
-      <Avatar showFallback name='Jane' src='https://images.unsplash.com/broken' />
-      <Avatar name='Joe' src='https://images.unsplash.com/broken' />
-    </div>
-  );
-}`;
+import App from "./fallbacks.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-custom-count.raw.jsx b/apps/docs/content/components/avatar/group-custom-count.raw.jsx
new file mode 100644
index 0000000000..a436fc951a
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-count.raw.jsx
@@ -0,0 +1,21 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup
+      isBordered
+      max={3}
+      renderCount={(count) => (
+        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
+      )}
+      total={10}
+    >
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-custom-count.ts b/apps/docs/content/components/avatar/group-custom-count.ts
index a9ffab8b16..814b7842a4 100644
--- a/apps/docs/content/components/avatar/group-custom-count.ts
+++ b/apps/docs/content/components/avatar/group-custom-count.ts
@@ -1,24 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup
-      isBordered
-      max={3}
-      total={10}
-      renderCount={(count) => (
-        <p className="text-small text-foreground font-medium ms-2">+{count} others</p>
-      )}
-    >
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-custom-count.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.jsx b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx
new file mode 100644
index 0000000000..59945aafb1
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-impl.raw.jsx
@@ -0,0 +1,29 @@
+import {forwardRef} from "react";
+import {Avatar, useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react";
+
+const AvatarGroup = forwardRef((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    renderCount = (count) => <Avatar name={`+${count}`} />,
+    getAvatarGroupProps,
+  } = useAvatarGroup({
+    ref,
+    ...props,
+  });
+
+  return (
+    <Component {...getAvatarGroupProps()}>
+      <AvatarGroupProvider value={context}>
+        {clones}
+        {remainingCount > 0 && renderCount(remainingCount)}
+      </AvatarGroupProvider>
+    </Component>
+  );
+});
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export default AvatarGroup;
diff --git a/apps/docs/content/components/avatar/group-custom-impl.raw.tsx b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx
new file mode 100644
index 0000000000..8535a023f8
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-custom-impl.raw.tsx
@@ -0,0 +1,36 @@
+import {forwardRef} from "react";
+import {
+  Avatar,
+  useAvatarGroup,
+  AvatarGroupProvider,
+  AvatarGroupProps as BaseAvatarGroupProps,
+} from "@nextui-org/react";
+
+export interface AvatarGroupProps extends BaseAvatarGroupProps {}
+
+const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
+  const {
+    Component,
+    clones,
+    context,
+    remainingCount,
+    renderCount = (count) => <Avatar name={`+${count}`} />,
+    getAvatarGroupProps,
+  } = useAvatarGroup({
+    ref,
+    ...props,
+  });
+
+  return (
+    <Component {...getAvatarGroupProps()}>
+      <AvatarGroupProvider value={context}>
+        {clones}
+        {remainingCount > 0 && renderCount(remainingCount)}
+      </AvatarGroupProvider>
+    </Component>
+  );
+});
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export default AvatarGroup;
diff --git a/apps/docs/content/components/avatar/group-custom-impl.ts b/apps/docs/content/components/avatar/group-custom-impl.ts
index dbacff25dd..16dbee71c5 100644
--- a/apps/docs/content/components/avatar/group-custom-impl.ts
+++ b/apps/docs/content/components/avatar/group-custom-impl.ts
@@ -1,68 +1,5 @@
-const App = `import {forwardRef} from "react";
-
-import {useAvatarGroup, AvatarGroupProvider} from "@nextui-org/react";
-import Avatar from "./avatar"; // your custom avatar or nextui avatar
-
-const AvatarGroup = forwardRef((props, ref) => {
-  const {
-    Component,
-    clones,
-    context,
-    remainingCount,
-    renderCount = (count) => <Avatar name={\`+\${count}\`} />,
-    getAvatarGroupProps,
-  } = useAvatarGroup({
-    ref,
-    ...props,
-  });
-
-  return (
-    <Component {...getAvatarGroupProps()}>
-      <AvatarGroupProvider value={context}>
-        {clones}
-        {remainingCount > 0 && renderCount(remainingCount)}
-      </AvatarGroupProvider>
-    </Component>
-  );
-});
-
-AvatarGroup.displayName = "AvatarGroup";
-
-export default AvatarGroup;`;
-
-const AppTs = `import {forwardRef} from "react";
-
-import {useAvatarGroup, AvatarGroupProvider, AvatarGroupProps as BaseAvatarGroupProps} from "@nextui-org/react";
-import Avatar from "./avatar"; // your custom avatar or nextui avatar
-
-export interface AvatarGroupProps extends BaseAvatarGroupProps {}
-
-const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>((props, ref) => {
-  const {
-    Component,
-    clones,
-    context,
-    remainingCount,
-    renderCount = (count) => <Avatar name={\`+\${count}\`} />,
-    getAvatarGroupProps,
-  } = useAvatarGroup({
-    ref,
-    ...props,
-  });
-
-  return (
-    <Component {...getAvatarGroupProps()}>
-      <AvatarGroupProvider value={context}>
-        {clones}
-        {remainingCount > 0 && renderCount(remainingCount)}
-      </AvatarGroupProvider>
-    </Component>
-  );
-});
-
-AvatarGroup.displayName = "AvatarGroup";
-
-export default AvatarGroup;`;
+import App from "./group-custom-impl.raw.jsx?raw";
+import AppTs from "./group-custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-disabled.raw.jsx b/apps/docs/content/components/avatar/group-disabled.raw.jsx
new file mode 100644
index 0000000000..da8721dc3d
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered isDisabled>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-disabled.ts b/apps/docs/content/components/avatar/group-disabled.ts
index ba703b89df..a0fb219d26 100644
--- a/apps/docs/content/components/avatar/group-disabled.ts
+++ b/apps/docs/content/components/avatar/group-disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered isDisabled>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-grid.raw.jsx b/apps/docs/content/components/avatar/group-grid.raw.jsx
new file mode 100644
index 0000000000..eebe242a18
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-grid.raw.jsx
@@ -0,0 +1,17 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered isGrid max={7}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4f29026707d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026710d" />
+      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026712d" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-grid.ts b/apps/docs/content/components/avatar/group-grid.ts
index abd2a74431..1c768c94c1 100644
--- a/apps/docs/content/components/avatar/group-grid.ts
+++ b/apps/docs/content/components/avatar/group-grid.ts
@@ -1,20 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered isGrid max={7}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4f29026707d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026710d" />
-      <Avatar src="https://i.pravatar.cc/300?u=a042581f4e29026712d" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-grid.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-max.raw.jsx b/apps/docs/content/components/avatar/group-max.raw.jsx
new file mode 100644
index 0000000000..b1109cff3c
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-max.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered max={3}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-max.ts b/apps/docs/content/components/avatar/group-max.ts
index 5bc76a002b..c2515e86cb 100644
--- a/apps/docs/content/components/avatar/group-max.ts
+++ b/apps/docs/content/components/avatar/group-max.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered max={3}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-max.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group-total.raw.jsx b/apps/docs/content/components/avatar/group-total.raw.jsx
new file mode 100644
index 0000000000..d1ce696618
--- /dev/null
+++ b/apps/docs/content/components/avatar/group-total.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered max={3} total={10}>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group-total.ts b/apps/docs/content/components/avatar/group-total.ts
index 463073b931..3545b036f1 100644
--- a/apps/docs/content/components/avatar/group-total.ts
+++ b/apps/docs/content/components/avatar/group-total.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered max={3} total={10}>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group-total.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/group.raw.jsx b/apps/docs/content/components/avatar/group.raw.jsx
new file mode 100644
index 0000000000..827de4ca2f
--- /dev/null
+++ b/apps/docs/content/components/avatar/group.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar, AvatarGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <AvatarGroup isBordered>
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+    </AvatarGroup>
+  );
+}
diff --git a/apps/docs/content/components/avatar/group.ts b/apps/docs/content/components/avatar/group.ts
index b22b13adce..0660a894cd 100644
--- a/apps/docs/content/components/avatar/group.ts
+++ b/apps/docs/content/components/avatar/group.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar, AvatarGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <AvatarGroup isBordered>
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-    </AvatarGroup>
-  );
-}`;
+import App from "./group.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/radius.raw.jsx b/apps/docs/content/components/avatar/radius.raw.jsx
new file mode 100644
index 0000000000..94da5df6b8
--- /dev/null
+++ b/apps/docs/content/components/avatar/radius.raw.jsx
@@ -0,0 +1,12 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/radius.ts b/apps/docs/content/components/avatar/radius.ts
index 066a399d59..7b78db1ce0 100644
--- a/apps/docs/content/components/avatar/radius.ts
+++ b/apps/docs/content/components/avatar/radius.ts
@@ -1,15 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
-      <Avatar isBordered radius="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
-      <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar isBordered radius="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/sizes.raw.jsx b/apps/docs/content/components/avatar/sizes.raw.jsx
new file mode 100644
index 0000000000..6e3f73560f
--- /dev/null
+++ b/apps/docs/content/components/avatar/sizes.raw.jsx
@@ -0,0 +1,16 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Avatar className="w-6 h-6 text-tiny" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar size="sm" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      <Avatar size="md" src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar size="lg" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      <Avatar
+        className="w-20 h-20 text-large"
+        src="https://i.pravatar.cc/150?u=a04258114e29026708c"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/sizes.ts b/apps/docs/content/components/avatar/sizes.ts
index 993396e524..85a2f5b30b 100644
--- a/apps/docs/content/components/avatar/sizes.ts
+++ b/apps/docs/content/components/avatar/sizes.ts
@@ -1,16 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" className="w-6 h-6 text-tiny"  />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258a2462d826712d" size="sm" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" size="md" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026302d" size="lg" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026708c" className="w-20 h-20 text-large" />
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/avatar/usage.raw.jsx b/apps/docs/content/components/avatar/usage.raw.jsx
new file mode 100644
index 0000000000..37b9b49dc4
--- /dev/null
+++ b/apps/docs/content/components/avatar/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      <Avatar name="Junior" />
+      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
+      <Avatar name="Jane" />
+      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
+      <Avatar name="Joe" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/avatar/usage.ts b/apps/docs/content/components/avatar/usage.ts
index f55f584c8e..1118304c37 100644
--- a/apps/docs/content/components/avatar/usage.ts
+++ b/apps/docs/content/components/avatar/usage.ts
@@ -1,17 +1,4 @@
-const App = `import {Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
-      <Avatar name="Junior" />
-      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
-      <Avatar name="Jane" />
-      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-      <Avatar name="Joe" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/a11y.raw.jsx b/apps/docs/content/components/badge/a11y.raw.jsx
new file mode 100644
index 0000000000..6e8fe17155
--- /dev/null
+++ b/apps/docs/content/components/badge/a11y.raw.jsx
@@ -0,0 +1,31 @@
+import {Badge, Button} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Badge color="danger" content="99+" shape="circle">
+      <Button isIconOnly aria-label="more than 99 notifications" radius="full" variant="light">
+        <NotificationIcon size={24} />
+      </Button>
+    </Badge>
+  );
+}
diff --git a/apps/docs/content/components/badge/a11y.ts b/apps/docs/content/components/badge/a11y.ts
index ede5ba5ed3..e53640d68b 100644
--- a/apps/docs/content/components/badge/a11y.ts
+++ b/apps/docs/content/components/badge/a11y.ts
@@ -1,44 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Button} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-
-export default function App() {
-  return (
-    <Badge content="99+" shape="circle" color="danger">
-      <Button
-        radius="full"
-        isIconOnly
-        aria-label="more than 99 notifications"
-        variant="light"
-      >
-        <NotificationIcon size={24} />
-      </Button>
-    </Badge>
-  );
-}`;
+import App from "./a11y.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/badge/colors.raw.jsx b/apps/docs/content/components/badge/colors.raw.jsx
new file mode 100644
index 0000000000..b7358bee7e
--- /dev/null
+++ b/apps/docs/content/components/badge/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="default" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="primary" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="secondary" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+      </Badge>
+      <Badge color="success" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+      <Badge color="warning" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="danger" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/colors.ts b/apps/docs/content/components/badge/colors.ts
index 1a79742830..d5bef810aa 100644
--- a/apps/docs/content/components/badge/colors.ts
+++ b/apps/docs/content/components/badge/colors.ts
@@ -1,47 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" color="default">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="secondary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge content="5" color="success">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-      <Badge content="5" color="warning">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="danger">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/content-examples.raw.jsx b/apps/docs/content/components/badge/content-examples.raw.jsx
new file mode 100644
index 0000000000..0850c9000d
--- /dev/null
+++ b/apps/docs/content/components/badge/content-examples.raw.jsx
@@ -0,0 +1,80 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 18}
+      viewBox="0 0 24 24"
+      width={size || width || 18}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-5 items-center">
+      <Badge color="danger" content="5">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
+      </Badge>
+      <Badge color="success" content="" placement="bottom-right" shape="circle">
+        <Avatar radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="danger" content="new" size="sm">
+        <Avatar
+          isBordered
+          color="danger"
+          radius="md"
+          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
+        />
+      </Badge>
+      <Badge isOneChar color="success" content={<CheckIcon />} placement="bottom-right">
+        <Avatar
+          isBordered
+          color="success"
+          radius="md"
+          src="https://i.pravatar.cc/300?u=a042581f4e290267072"
+        />
+      </Badge>
+      <Badge
+        isOneChar
+        color="danger"
+        content={<NotificationIcon size={12} />}
+        placement="top-right"
+        shape="circle"
+      >
+        <Avatar radius="full" size="lg" src="https://i.pravatar.cc/300?u=a042581f4e29026704f" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/content-examples.ts b/apps/docs/content/components/badge/content-examples.ts
index e5a43ff2a2..f21e28ce52 100644
--- a/apps/docs/content/components/badge/content-examples.ts
+++ b/apps/docs/content/components/badge/content-examples.ts
@@ -1,110 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 18}
-      height={size || height || 18}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M7.75 11.9999L10.58 14.8299L16.25 9.16992"
-        stroke="currentColor"
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <div className="flex gap-5 items-center">
-      <Badge content="5" color="danger">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
-        />
-      </Badge>
-      <Badge content="" color="success" shape="circle" placement="bottom-right">
-        <Avatar
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="new" color="danger" size="sm">
-        <Avatar
-          isBordered
-          radius="md"
-          color="danger"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge
-        isOneChar
-        content={<CheckIcon />}
-        color="success"
-        placement="bottom-right"
-      >
-        <Avatar
-          isBordered
-          color="success"
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e290267072"
-        />
-      </Badge>
-      <Badge
-        isOneChar
-        content={<NotificationIcon size={12} />}
-        color="danger"
-        shape="circle"
-        placement="top-right"
-      >
-        <Avatar
-          radius="full"
-          size="lg"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026704f"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./content-examples.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/badge/placements.raw.jsx b/apps/docs/content/components/badge/placements.raw.jsx
new file mode 100644
index 0000000000..749e64888f
--- /dev/null
+++ b/apps/docs/content/components/badge/placements.raw.jsx
@@ -0,0 +1,20 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" placement="top-right">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" placement="bottom-right">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="danger" content="5" placement="top-left">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="danger" content="5" placement="bottom-left">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/placements.ts b/apps/docs/content/components/badge/placements.ts
index 6a4af7b820..dc67908b7e 100644
--- a/apps/docs/content/components/badge/placements.ts
+++ b/apps/docs/content/components/badge/placements.ts
@@ -1,39 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" placement="top-right">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="bottom-right">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="top-left">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="danger" placement="bottom-left">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/shapes.raw.jsx b/apps/docs/content/components/badge/shapes.raw.jsx
new file mode 100644
index 0000000000..59777647f1
--- /dev/null
+++ b/apps/docs/content/components/badge/shapes.raw.jsx
@@ -0,0 +1,14 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" shape="rectangle">
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" shape="circle">
+        <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/shapes.ts b/apps/docs/content/components/badge/shapes.ts
index 8f6370503f..75524eae1f 100644
--- a/apps/docs/content/components/badge/shapes.ts
+++ b/apps/docs/content/components/badge/shapes.ts
@@ -1,25 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" shape="rectangle">
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" shape="circle">
-        <Avatar
-          isBordered
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./shapes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/show-outline.raw.jsx b/apps/docs/content/components/badge/show-outline.raw.jsx
new file mode 100644
index 0000000000..960ab3f524
--- /dev/null
+++ b/apps/docs/content/components/badge/show-outline.raw.jsx
@@ -0,0 +1,14 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Badge color="danger" content="5" shape="rectangle" showOutline={false}>
+        <Avatar isBordered radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="danger" content="5" shape="circle" showOutline={false}>
+        <Avatar isBordered radius="full" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/show-outline.ts b/apps/docs/content/components/badge/show-outline.ts
index d11a8860bf..83f4e660d3 100644
--- a/apps/docs/content/components/badge/show-outline.ts
+++ b/apps/docs/content/components/badge/show-outline.ts
@@ -1,25 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Badge content="5" color="danger" shape="rectangle" showOutline={false}>
-        <Avatar
-          isBordered
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="danger" shape="circle" showOutline={false}>
-        <Avatar
-          isBordered
-          radius="full"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./show-outline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/sizes.raw.jsx b/apps/docs/content/components/badge/sizes.raw.jsx
new file mode 100644
index 0000000000..cdf37c6067
--- /dev/null
+++ b/apps/docs/content/components/badge/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="primary" content="5" size="sm">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="primary" content="5" size="md">
+        <Avatar radius="md" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+      </Badge>
+      <Badge color="primary" content="5" size="lg">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/sizes.ts b/apps/docs/content/components/badge/sizes.ts
index c212de05ea..85a2f5b30b 100644
--- a/apps/docs/content/components/badge/sizes.ts
+++ b/apps/docs/content/components/badge/sizes.ts
@@ -1,29 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" size="sm" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" size="md" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-        />
-      </Badge>
-      <Badge content="5" size="lg" color="primary">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/usage.raw.jsx b/apps/docs/content/components/badge/usage.raw.jsx
new file mode 100644
index 0000000000..1599fc5a23
--- /dev/null
+++ b/apps/docs/content/components/badge/usage.raw.jsx
@@ -0,0 +1,9 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Badge color="primary" content="5">
+      <Avatar radius="md" size="lg" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />
+    </Badge>
+  );
+}
diff --git a/apps/docs/content/components/badge/usage.ts b/apps/docs/content/components/badge/usage.ts
index a4ca4998a3..1118304c37 100644
--- a/apps/docs/content/components/badge/usage.ts
+++ b/apps/docs/content/components/badge/usage.ts
@@ -1,16 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Badge content="5" color="primary">
-      <Avatar
-        radius="md"
-        size="lg"
-        src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-      />
-    </Badge>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/variants.raw.jsx b/apps/docs/content/components/badge/variants.raw.jsx
new file mode 100644
index 0000000000..ab7ef5a02c
--- /dev/null
+++ b/apps/docs/content/components/badge/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {Badge, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Badge color="warning" content="5" variant="solid">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a042f81f4e29026024d" />
+      </Badge>
+      <Badge color="warning" content="5" variant="flat">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258a2462d826712d" />
+      </Badge>
+      <Badge color="warning" content="5" variant="faded">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026708c" />
+      </Badge>
+      <Badge color="warning" content="5" variant="shadow">
+        <Avatar radius="md" src="https://i.pravatar.cc/150?u=a04258114e29026302d" />
+      </Badge>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/variants.ts b/apps/docs/content/components/badge/variants.ts
index cc466b3b71..ddea95fb2e 100644
--- a/apps/docs/content/components/badge/variants.ts
+++ b/apps/docs/content/components/badge/variants.ts
@@ -1,35 +1,4 @@
-const App = `import {Badge, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-3 items-center">
-      <Badge content="5" color="warning" variant="solid">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a042f81f4e29026024d"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="flat">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="faded">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026708c"
-        />
-      </Badge>
-      <Badge content="5" color="warning" variant="shadow">
-        <Avatar
-          radius="md"
-          src="https://i.pravatar.cc/150?u=a04258114e29026302d"
-        />
-      </Badge>
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/badge/visibility.raw.jsx b/apps/docs/content/components/badge/visibility.raw.jsx
new file mode 100644
index 0000000000..c22ce8b40b
--- /dev/null
+++ b/apps/docs/content/components/badge/visibility.raw.jsx
@@ -0,0 +1,71 @@
+import {Badge, Switch} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CartIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isInvisible, setIsInvisible] = React.useState(false);
+
+  return (
+    <div className="flex items-center gap-4">
+      <div className="flex items-center gap-3">
+        <Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
+          <NotificationIcon className="fill-current" size={30} />
+        </Badge>
+        <Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
+          <CartIcon size={30} />
+        </Badge>
+      </div>
+      <Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
+        Show badge
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/badge/visibility.ts b/apps/docs/content/components/badge/visibility.ts
index 3729cfaaef..8cc2818a7b 100644
--- a/apps/docs/content/components/badge/visibility.ts
+++ b/apps/docs/content/components/badge/visibility.ts
@@ -1,81 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CartIcon = `export const CartIcon = ({ size, height, width, ...props }) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
-        fill='currentColor'
-      />
-      <path
-        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
-        fill='currentColor'
-      />
-      <path
-        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
-        fill='currentColor'
-      />
-      <path
-        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
-        fill='currentColor'
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Badge, Avatar, Switch} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CartIcon} from "./CartIcon";
-
-export default function App() {
-  const [isInvisible, setIsInvisible] = React.useState(false);
-
-  return (
-    <div className="flex items-center gap-4">
-      <div className="flex items-center gap-3">
-        <Badge color="danger" content={5} isInvisible={isInvisible} shape="circle">
-          <NotificationIcon className="fill-current" size={30} />
-        </Badge>
-        <Badge color="danger" content={50} isInvisible={isInvisible} shape="circle">
-          <CartIcon size={30} />
-        </Badge>
-      </div>
-      <Switch isSelected={!isInvisible} onValueChange={(value) => setIsInvisible(!value)}>
-        Show badge
-      </Switch>
-    </div>
-  );
-}`;
+import App from "./visibility.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CartIcon.jsx": CartIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx
new file mode 100644
index 0000000000..e846b8195a
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/collapsing-items.raw.jsx
@@ -0,0 +1,13 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs itemsAfterCollapse={2} itemsBeforeCollapse={1} maxItems={3}>
+      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
+      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
+      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
+      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
+      <BreadcrumbItem href="#song">Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/collapsing-items.ts b/apps/docs/content/components/breadcrumbs/collapsing-items.ts
index 0f953921ca..47fadf4847 100644
--- a/apps/docs/content/components/breadcrumbs/collapsing-items.ts
+++ b/apps/docs/content/components/breadcrumbs/collapsing-items.ts
@@ -1,16 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs maxItems={3} itemsBeforeCollapse={1} itemsAfterCollapse={2}>
-      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
-      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
-      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
-      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
-      <BreadcrumbItem href="#song">Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./collapsing-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/colors.raw.jsx b/apps/docs/content/components/breadcrumbs/colors.raw.jsx
new file mode 100644
index 0000000000..3ede2cb357
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/colors.raw.jsx
@@ -0,0 +1,19 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col flex-wrap gap-4">
+      {colors.map((color) => (
+        <Breadcrumbs key={color} color={color}>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Music</BreadcrumbItem>
+          <BreadcrumbItem>Artist</BreadcrumbItem>
+          <BreadcrumbItem>Album</BreadcrumbItem>
+          <BreadcrumbItem>Song</BreadcrumbItem>
+        </Breadcrumbs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/colors.ts b/apps/docs/content/components/breadcrumbs/colors.ts
index f5abd4a4ea..d5bef810aa 100644
--- a/apps/docs/content/components/breadcrumbs/colors.ts
+++ b/apps/docs/content/components/breadcrumbs/colors.ts
@@ -1,22 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"];
-
-  return (
-    <div className="flex flex-col flex-wrap gap-4">
-      {colors.map((color) => (
-        <Breadcrumbs key={color} color={color}>
-          <BreadcrumbItem>Home</BreadcrumbItem>
-          <BreadcrumbItem>Music</BreadcrumbItem>
-          <BreadcrumbItem>Artist</BreadcrumbItem>
-          <BreadcrumbItem>Album</BreadcrumbItem>
-          <BreadcrumbItem>Song</BreadcrumbItem>
-        </Breadcrumbs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.jsx b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx
new file mode 100644
index 0000000000..151338a9b1
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/controlled.raw.jsx
@@ -0,0 +1,25 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState("song");
+
+  return (
+    <Breadcrumbs underline="active" onAction={(key) => setCurrentPage(key)}>
+      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
+        Home
+      </BreadcrumbItem>
+      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
+        Music
+      </BreadcrumbItem>
+      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
+        Artist
+      </BreadcrumbItem>
+      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
+        Album
+      </BreadcrumbItem>
+      <BreadcrumbItem key="song" isCurrent={currentPage === "song"}>
+        Song
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/controlled.raw.tsx b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx
new file mode 100644
index 0000000000..f7890a9765
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/controlled.raw.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState<React.Key>("song");
+
+  return (
+    <Breadcrumbs underline="active" onAction={(key) => setCurrentPage(key)}>
+      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
+        Home
+      </BreadcrumbItem>
+      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
+        Music
+      </BreadcrumbItem>
+      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
+        Artist
+      </BreadcrumbItem>
+      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
+        Album
+      </BreadcrumbItem>
+      <BreadcrumbItem key="song" isCurrent={currentPage === "song"}>
+        Song
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/controlled.ts b/apps/docs/content/components/breadcrumbs/controlled.ts
index 45ed66b150..1f1a363363 100644
--- a/apps/docs/content/components/breadcrumbs/controlled.ts
+++ b/apps/docs/content/components/breadcrumbs/controlled.ts
@@ -1,54 +1,5 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState("song");
-
-  return (
-    <Breadcrumbs underline="active" onAction={(key) => setCurrentPage(key)}>
-      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
-        Music
-      </BreadcrumbItem>
-      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
-        Artist
-      </BreadcrumbItem>
-      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
-        Album
-      </BreadcrumbItem>
-      <BreadcrumbItem key="song" isCurrent={currentPage === "song"}>
-        Song
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
-
-const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState<React.Key>("song");
-
-  return (
-    <Breadcrumbs underline="active" onAction={(key) => setCurrentPage(key)}>
-      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
-        Music
-      </BreadcrumbItem>
-      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
-        Artist
-      </BreadcrumbItem>
-      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
-        Album
-      </BreadcrumbItem>
-      <BreadcrumbItem key="song" isCurrent={currentPage === "song"}>
-        Song
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx
new file mode 100644
index 0000000000..b6cd996cee
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/custom-items.raw.jsx
@@ -0,0 +1,70 @@
+import {
+  Breadcrumbs,
+  BreadcrumbItem,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+} from "@nextui-org/react";
+
+export const ChevronDownIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Breadcrumbs
+      itemClasses={{
+        item: "px-2",
+        separator: "px-0",
+      }}
+    >
+      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
+      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
+      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
+      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
+      <BreadcrumbItem
+        classNames={{
+          item: "px-0",
+        }}
+      >
+        <Dropdown>
+          <DropdownTrigger>
+            <Button
+              className="h-6 pr-2 text-small"
+              endContent={<ChevronDownIcon className="text-default-500" />}
+              radius="full"
+              size="sm"
+              variant="light"
+            >
+              Songs
+            </Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Routes">
+            <DropdownItem href="#song-1">Song 1</DropdownItem>
+            <DropdownItem href="#song2">Song 2</DropdownItem>
+            <DropdownItem href="#song3">Song 3</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/custom-items.ts b/apps/docs/content/components/breadcrumbs/custom-items.ts
index 3e323265b3..26a1e0f9ac 100644
--- a/apps/docs/content/components/breadcrumbs/custom-items.ts
+++ b/apps/docs/content/components/breadcrumbs/custom-items.ts
@@ -1,74 +1,7 @@
-const ChevronDownIcon = `export const ChevronDownIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="1.5"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="m6 9 6 6 6-6" />
-  </svg>
-);`;
-
-const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-import {ChevronDownIcon} from "./ChevronDownIcon";
-
-export default function App() {
-  return (
-    <Breadcrumbs
-      itemClasses={{
-        item: "px-2",
-        separator: "px-0",
-      }}
-    >
-      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
-      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
-      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
-      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
-      <BreadcrumbItem
-        classNames={{
-          item: "px-0",
-        }}
-      >
-        <Dropdown>
-          <DropdownTrigger>
-            <Button
-              className="h-6 pr-2 text-small"
-              endContent={<ChevronDownIcon className="text-default-500" />}
-              radius="full"
-              size="sm"
-              variant="light"
-            >
-              Songs
-            </Button>
-          </DropdownTrigger>
-          <DropdownMenu aria-label="Routes">
-            <DropdownItem href="#song-1">
-              Song 1
-            </DropdownItem>
-            <DropdownItem href="#song2">
-              Song 2
-            </DropdownItem>
-            <DropdownItem href="#song3">
-              Song 3
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronDownIcon.jsx": ChevronDownIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
new file mode 100644
index 0000000000..ffd11a01ba
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/custom-styles.raw.jsx
@@ -0,0 +1,56 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export const ShoppingCartIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
+        fill="currentColor"
+      />
+      <path
+        d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Breadcrumbs
+      classNames={{
+        list: "bg-gradient-to-br from-violet-500 to-fuchsia-500 shadow-small",
+      }}
+      itemClasses={{
+        item: "text-white/60 data-[current=true]:text-white",
+        separator: "text-white/40",
+      }}
+      underline="hover"
+      variant="solid"
+    >
+      <BreadcrumbItem href="#shopping-cart">
+        <ShoppingCartIcon />
+      </BreadcrumbItem>
+      <BreadcrumbItem href="#checkout">Checkout</BreadcrumbItem>
+      <BreadcrumbItem href="#payment">Payment</BreadcrumbItem>
+      <BreadcrumbItem href="#delivery-address">Delivery Address</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/custom-styles.ts b/apps/docs/content/components/breadcrumbs/custom-styles.ts
index 5dd7816a34..da3ea9093a 100644
--- a/apps/docs/content/components/breadcrumbs/custom-styles.ts
+++ b/apps/docs/content/components/breadcrumbs/custom-styles.ts
@@ -1,62 +1,7 @@
-const ShoppingCartIcon = `export const ShoppingCartIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M16.25 22.5C17.2165 22.5 18 21.7165 18 20.75C18 19.7835 17.2165 19 16.25 19C15.2835 19 14.5 19.7835 14.5 20.75C14.5 21.7165 15.2835 22.5 16.25 22.5Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.25 22.5C9.2165 22.5 10 21.7165 10 20.75C10 19.7835 9.2165 19 8.25 19C7.2835 19 6.5 19.7835 6.5 20.75C6.5 21.7165 7.2835 22.5 8.25 22.5Z"
-      fill="currentColor"
-    />
-    <path
-      d="M4.84 3.94L4.64 6.39C4.6 6.86 4.97 7.25 5.44 7.25H20.75C21.17 7.25 21.52 6.93 21.55 6.51C21.68 4.74 20.33 3.3 18.56 3.3H6.27C6.17 2.86 5.97 2.44 5.66 2.09C5.16 1.56 4.46 1.25 3.74 1.25H2C1.59 1.25 1.25 1.59 1.25 2C1.25 2.41 1.59 2.75 2 2.75H3.74C4.05 2.75 4.34 2.88 4.55 3.1C4.76 3.33 4.86 3.63 4.84 3.94Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5101 8.75H5.17005C4.75005 8.75 4.41005 9.07 4.37005 9.48L4.01005 13.83C3.87005 15.54 5.21005 17 6.92005 17H18.0401C19.5401 17 20.8601 15.77 20.9701 14.27L21.3001 9.6C21.3401 9.14 20.9801 8.75 20.5101 8.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-import {ShoppingCartIcon} from "./ShoppingCartIcon";
-
-export default function App() {
-  return (
-    <Breadcrumbs
-      underline="hover"
-      classNames={{
-        list: "bg-gradient-to-br from-violet-500 to-fuchsia-500 shadow-small",
-      }}
-      itemClasses={{
-        item: "text-white/60 data-[current=true]:text-white",
-        separator: "text-white/40",
-      }}
-      variant="solid"
-    >
-      <BreadcrumbItem href="#shopping-cart">
-        <ShoppingCartIcon />
-      </BreadcrumbItem>
-      <BreadcrumbItem href="#checkout">Checkout</BreadcrumbItem>
-      <BreadcrumbItem href="#payment">Payment</BreadcrumbItem>
-      <BreadcrumbItem href="#delivery-address">Delivery Address</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ShoppingCartIcon.jsx": ShoppingCartIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx
new file mode 100644
index 0000000000..66222ed468
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.raw.jsx
@@ -0,0 +1,45 @@
+import {
+  Breadcrumbs,
+  BreadcrumbItem,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs
+      itemsAfterCollapse={2}
+      itemsBeforeCollapse={1}
+      maxItems={3}
+      renderEllipsis={({items, ellipsisIcon, separator}) => (
+        <div className="flex items-center">
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly className="min-w-6 w-6 h-6" size="sm" variant="flat">
+                {ellipsisIcon}
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="Routes">
+              {items.map((item, index) => (
+                <DropdownItem key={index} href={item.href}>
+                  {item.children}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+          {separator}
+        </div>
+      )}
+    >
+      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
+      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
+      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
+      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
+      <BreadcrumbItem href="#featured">Featured</BreadcrumbItem>
+      <BreadcrumbItem href="#song">Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts
index e76ab23afc..bb104d6404 100644
--- a/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts
+++ b/apps/docs/content/components/breadcrumbs/customizing-ellipsis.ts
@@ -1,45 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs
-      maxItems={3}
-      itemsBeforeCollapse={1}
-      itemsAfterCollapse={2}
-      renderEllipsis={({items, ellipsisIcon, separator}) => (
-        <div className="flex items-center">
-          <Dropdown>
-            <DropdownTrigger>
-              <Button
-                isIconOnly
-                className="min-w-6 w-6 h-6"
-                size="sm"
-                variant="flat"
-              >
-                {ellipsisIcon}
-              </Button>
-            </DropdownTrigger>
-            <DropdownMenu aria-label="Routes">
-              {items.map((item, index) => (
-                <DropdownItem key={index} href={item.href}>
-                  {item.children}
-                </DropdownItem>
-              ))}
-            </DropdownMenu>
-          </Dropdown>
-          {separator}
-        </div>
-      )}
-    >
-      <BreadcrumbItem href="#home">Home</BreadcrumbItem>
-      <BreadcrumbItem href="#music">Music</BreadcrumbItem>
-      <BreadcrumbItem href="#artist">Artist</BreadcrumbItem>
-      <BreadcrumbItem href="#album">Album</BreadcrumbItem>
-      <BreadcrumbItem href="#featured">Featured</BreadcrumbItem>
-      <BreadcrumbItem href="#song">Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./customizing-ellipsis.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/disabled.raw.jsx b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx
new file mode 100644
index 0000000000..5eb03e55ff
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs isDisabled>
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem>Music</BreadcrumbItem>
+      <BreadcrumbItem>Artist</BreadcrumbItem>
+      <BreadcrumbItem>Album</BreadcrumbItem>
+      <BreadcrumbItem>Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/disabled.ts b/apps/docs/content/components/breadcrumbs/disabled.ts
index 4e750c6d48..1a215cc91f 100644
--- a/apps/docs/content/components/breadcrumbs/disabled.ts
+++ b/apps/docs/content/components/breadcrumbs/disabled.ts
@@ -1,16 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs isDisabled>
-      <BreadcrumbItem>Home</BreadcrumbItem>
-      <BreadcrumbItem>Music</BreadcrumbItem>
-      <BreadcrumbItem>Artist</BreadcrumbItem>
-      <BreadcrumbItem>Album</BreadcrumbItem>
-      <BreadcrumbItem>Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx
new file mode 100644
index 0000000000..f34576245b
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.jsx
@@ -0,0 +1,39 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState("music");
+
+  return (
+    <Breadcrumbs
+      classNames={{
+        list: "gap-2",
+      }}
+      itemClasses={{
+        item: [
+          "px-2 py-0.5 border-small border-default-400 rounded-small",
+          "data-[current=true]:border-foreground data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors",
+          "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100",
+        ],
+        separator: "hidden",
+      }}
+      size="sm"
+      onAction={(key) => setCurrentPage(key)}
+    >
+      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
+        Home
+      </BreadcrumbItem>
+      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
+        Music
+      </BreadcrumbItem>
+      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
+        Artist
+      </BreadcrumbItem>
+      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
+        Album
+      </BreadcrumbItem>
+      <BreadcrumbItem key="song" isDisabled isCurrent={currentPage === "song"}>
+        Song
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx
new file mode 100644
index 0000000000..15cecac700
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/menu-type.raw.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState<React.Key>("music");
+
+  return (
+    <Breadcrumbs
+      hideSeparator
+      classNames={{
+        list: "gap-2",
+      }}
+      itemClasses={{
+        item: [
+          "px-2 py-0.5 border-small border-default-400 rounded-small",
+          "data-[current=true]:border-default-800 data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors",
+          "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100",
+        ],
+      }}
+      onAction={(key) => setCurrentPage(key)}
+    >
+      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
+        Home
+      </BreadcrumbItem>
+      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
+        Music
+      </BreadcrumbItem>
+      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
+        Artist
+      </BreadcrumbItem>
+      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
+        Album
+      </BreadcrumbItem>
+      <BreadcrumbItem key="song" isDisabled isCurrent={currentPage === "song"}>
+        Song
+      </BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/menu-type.ts b/apps/docs/content/components/breadcrumbs/menu-type.ts
index 56ad50cc11..db610ba249 100644
--- a/apps/docs/content/components/breadcrumbs/menu-type.ts
+++ b/apps/docs/content/components/breadcrumbs/menu-type.ts
@@ -1,81 +1,5 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState("music");
-
-  return (
-    <Breadcrumbs
-      size="sm"
-      onAction={(key) => setCurrentPage(key)}
-      classNames={{
-        list: "gap-2",
-      }}
-      itemClasses={{
-        item: [
-          "px-2 py-0.5 border-small border-default-400 rounded-small",
-          "data-[current=true]:border-foreground data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors",
-          "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100",
-        ],
-        separator: "hidden",
-      }}
-    >
-      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
-        Music
-      </BreadcrumbItem>
-      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
-        Artist
-      </BreadcrumbItem>
-      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
-        Album
-      </BreadcrumbItem>
-      <BreadcrumbItem key="song" isDisabled isCurrent={currentPage === "song"}>
-        Song
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
-
-const AppTs = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState<React.Key>("music");
-
-  return (
-    <Breadcrumbs
-      hideSeparator
-      onAction={(key) => setCurrentPage(key)}
-      classNames={{
-        list: "gap-2",
-      }}
-      itemClasses={{
-        item: [
-          "px-2 py-0.5 border-small border-default-400 rounded-small",
-          "data-[current=true]:border-default-800 data-[current=true]:bg-foreground data-[current=true]:text-background transition-colors",
-          "data-[disabled=true]:border-default-400 data-[disabled=true]:bg-default-100",
-        ],
-      }}
-    >
-      <BreadcrumbItem key="home" isCurrent={currentPage === "home"}>
-        Home
-      </BreadcrumbItem>
-      <BreadcrumbItem key="music" isCurrent={currentPage === "music"}>
-        Music
-      </BreadcrumbItem>
-      <BreadcrumbItem key="artist" isCurrent={currentPage === "artist"}>
-        Artist
-      </BreadcrumbItem>
-      <BreadcrumbItem key="album" isCurrent={currentPage === "album"}>
-        Album
-      </BreadcrumbItem>
-      <BreadcrumbItem key="song" isDisabled isCurrent={currentPage === "song"}>
-        Song
-      </BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./menu-type.raw.jsx?raw";
+import AppTs from "./menu-type.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/radius.raw.jsx b/apps/docs/content/components/breadcrumbs/radius.raw.jsx
new file mode 100644
index 0000000000..042d5aed7e
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/radius.raw.jsx
@@ -0,0 +1,19 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="flex flex-col flex-wrap gap-4">
+      {radius.map((r) => (
+        <Breadcrumbs key={r} radius={r} variant="solid">
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Music</BreadcrumbItem>
+          <BreadcrumbItem>Artist</BreadcrumbItem>
+          <BreadcrumbItem>Album</BreadcrumbItem>
+          <BreadcrumbItem>Song</BreadcrumbItem>
+        </Breadcrumbs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/radius.ts b/apps/docs/content/components/breadcrumbs/radius.ts
index fb6968d60e..7b78db1ce0 100644
--- a/apps/docs/content/components/breadcrumbs/radius.ts
+++ b/apps/docs/content/components/breadcrumbs/radius.ts
@@ -1,22 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const radius = [ "full", "lg", "md", "sm", "none"];
-
-  return (
-    <div className="flex flex-col flex-wrap gap-4">
-      {radius.map((r) => (
-        <Breadcrumbs key={r} radius={r} variant="solid">
-          <BreadcrumbItem>Home</BreadcrumbItem>
-          <BreadcrumbItem>Music</BreadcrumbItem>
-          <BreadcrumbItem>Artist</BreadcrumbItem>
-          <BreadcrumbItem>Album</BreadcrumbItem>
-          <BreadcrumbItem>Song</BreadcrumbItem>
-        </Breadcrumbs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/routing.raw.jsx b/apps/docs/content/components/breadcrumbs/routing.raw.jsx
new file mode 100644
index 0000000000..2da60a4b44
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/routing.raw.jsx
@@ -0,0 +1,13 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem href="/docs/components/button">Button</BreadcrumbItem>
+      <BreadcrumbItem href="/docs/components/breadcrumbs">Breadcrumbs</BreadcrumbItem>
+      <BreadcrumbItem href="/docs/components/card">Card</BreadcrumbItem>
+      <BreadcrumbItem href="/docs/components/checkbox">Checkbox</BreadcrumbItem>
+      <BreadcrumbItem href="/docs/components/code">Code</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/routing.ts b/apps/docs/content/components/breadcrumbs/routing.ts
index 62b48c9055..df25d14fe0 100644
--- a/apps/docs/content/components/breadcrumbs/routing.ts
+++ b/apps/docs/content/components/breadcrumbs/routing.ts
@@ -1,16 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs>
-      <BreadcrumbItem href="/docs/components/button">Button</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components/breadcrumbs">Breadcrumbs</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components/card">Card</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components/checkbox">Checkbox</BreadcrumbItem>
-      <BreadcrumbItem href="/docs/components/code">Code</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./routing.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/separator.raw.jsx b/apps/docs/content/components/breadcrumbs/separator.raw.jsx
new file mode 100644
index 0000000000..70a96554d5
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/separator.raw.jsx
@@ -0,0 +1,18 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs
+      itemClasses={{
+        separator: "px-2",
+      }}
+      separator="/"
+    >
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem>Music</BreadcrumbItem>
+      <BreadcrumbItem>Artist</BreadcrumbItem>
+      <BreadcrumbItem>Album</BreadcrumbItem>
+      <BreadcrumbItem>Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/separator.ts b/apps/docs/content/components/breadcrumbs/separator.ts
index 15cc273761..db13815942 100644
--- a/apps/docs/content/components/breadcrumbs/separator.ts
+++ b/apps/docs/content/components/breadcrumbs/separator.ts
@@ -1,21 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs
-      separator="/"
-      itemClasses={{
-        separator: "px-2"
-      }}
-    >
-      <BreadcrumbItem>Home</BreadcrumbItem>
-      <BreadcrumbItem>Music</BreadcrumbItem>
-      <BreadcrumbItem>Artist</BreadcrumbItem>
-      <BreadcrumbItem>Album</BreadcrumbItem>
-      <BreadcrumbItem>Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./separator.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/sizes.raw.jsx b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx
new file mode 100644
index 0000000000..c7b794da72
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/sizes.raw.jsx
@@ -0,0 +1,19 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="flex flex-col flex-wrap gap-4">
+      {sizes.map((size) => (
+        <Breadcrumbs key={size} size={size}>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Music</BreadcrumbItem>
+          <BreadcrumbItem>Artist</BreadcrumbItem>
+          <BreadcrumbItem>Album</BreadcrumbItem>
+          <BreadcrumbItem>Song</BreadcrumbItem>
+        </Breadcrumbs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/sizes.ts b/apps/docs/content/components/breadcrumbs/sizes.ts
index f90e7ca355..85a2f5b30b 100644
--- a/apps/docs/content/components/breadcrumbs/sizes.ts
+++ b/apps/docs/content/components/breadcrumbs/sizes.ts
@@ -1,22 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="flex flex-col flex-wrap gap-4">
-      {sizes.map((size) => (
-        <Breadcrumbs key={size} size={size}>
-          <BreadcrumbItem>Home</BreadcrumbItem>
-          <BreadcrumbItem>Music</BreadcrumbItem>
-          <BreadcrumbItem>Artist</BreadcrumbItem>
-          <BreadcrumbItem>Album</BreadcrumbItem>
-          <BreadcrumbItem>Song</BreadcrumbItem>
-        </Breadcrumbs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx
new file mode 100644
index 0000000000..30cee189d2
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/start-end-content.raw.jsx
@@ -0,0 +1,137 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export const HomeIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M20.0402 6.82165L14.2802 2.79165C12.7102 1.69165 10.3002 1.75165 8.79023 2.92165L3.78023 6.83165C2.78023 7.61165 1.99023 9.21165 1.99023 10.4716V17.3716C1.99023 19.9216 4.06023 22.0016 6.61023 22.0016H17.3902C19.9402 22.0016 22.0102 19.9316 22.0102 17.3816V10.6016C22.0102 9.25165 21.1402 7.59165 20.0402 6.82165ZM12.7502 18.0016C12.7502 18.4116 12.4102 18.7516 12.0002 18.7516C11.5902 18.7516 11.2502 18.4116 11.2502 18.0016V15.0016C11.2502 14.5916 11.5902 14.2516 12.0002 14.2516C12.4102 14.2516 12.7502 14.5916 12.7502 15.0016V18.0016Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const MusicIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M14.5406 13.6719C14.1806 13.6719 13.8906 13.9619 13.8906 14.3219C13.8906 14.6819 14.1806 14.9719 14.5406 14.9719C14.9006 14.9719 15.1906 14.6819 15.1906 14.3219C15.1806 13.9619 14.8906 13.6719 14.5406 13.6719Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.06016 14.6602C8.70016 14.6602 8.41016 14.9502 8.41016 15.3102C8.41016 15.6702 8.70016 15.9602 9.06016 15.9602C9.42016 15.9602 9.71016 15.6702 9.71016 15.3102C9.71016 14.9502 9.42016 14.6602 9.06016 14.6602Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM16.88 9.55V14.31C16.88 15.6 15.83 16.65 14.54 16.65C13.25 16.65 12.2 15.6 12.2 14.31C12.2 13.02 13.25 11.97 14.54 11.97C14.77 11.97 14.98 12.01 15.19 12.07V10.65L11.41 11.68V15.3C11.41 15.31 11.4 15.32 11.4 15.33C11.39 16.61 10.34 17.64 9.06 17.64C7.77 17.64 6.72 16.59 6.72 15.3C6.72 14.01 7.77 12.96 9.06 12.96C9.29 12.96 9.5 13 9.71 13.06V11.03V9.29C9.71 8.32 10.31 7.53 11.25 7.28L14.24 6.46C15.2 6.2 15.8 6.45 16.14 6.71C16.47 6.97 16.88 7.48 16.88 8.48V9.55Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ArtistIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.5119 5.85L13.5719 2.42C12.6019 1.86 11.4019 1.86 10.4219 2.42L4.49187 5.85C3.52187 6.41 2.92188 7.45 2.92188 8.58V15.42C2.92188 16.54 3.52187 17.58 4.49187 18.15L10.4319 21.58C11.4019 22.14 12.6019 22.14 13.5819 21.58L19.5219 18.15C20.4919 17.59 21.0919 16.55 21.0919 15.42V8.58C21.0819 7.45 20.4819 6.42 19.5119 5.85ZM12.0019 7.34C13.2919 7.34 14.3319 8.38 14.3319 9.67C14.3319 10.96 13.2919 12 12.0019 12C10.7119 12 9.67188 10.96 9.67188 9.67C9.67188 8.39 10.7119 7.34 12.0019 7.34ZM14.6819 16.66H9.32187C8.51187 16.66 8.04187 15.76 8.49187 15.09C9.17187 14.08 10.4919 13.4 12.0019 13.4C13.5119 13.4 14.8319 14.08 15.5119 15.09C15.9619 15.75 15.4819 16.66 14.6819 16.66Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const AlbumIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18 5.25H6C5.59 5.25 5.25 4.91 5.25 4.5C5.25 4.09 5.59 3.75 6 3.75H18C18.41 3.75 18.75 4.09 18.75 4.5C18.75 4.91 18.41 5.25 18 5.25Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15 2.75H9C8.59 2.75 8.25 2.41 8.25 2C8.25 1.59 8.59 1.25 9 1.25H15C15.41 1.25 15.75 1.59 15.75 2C15.75 2.41 15.41 2.75 15 2.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.9091 16.2109C13.5691 16.2109 13.2891 16.4909 13.2891 16.8309C13.2891 17.1709 13.5691 17.4509 13.9091 17.4509C14.2491 17.4509 14.5291 17.1709 14.5291 16.8309C14.5291 16.4909 14.2491 16.2109 13.9091 16.2109Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.50953 17.7389C9.50953 17.3989 9.22953 17.1289 8.88953 17.1289C8.54953 17.1289 8.26953 17.4089 8.26953 17.7489C8.26953 18.0889 8.54953 18.3689 8.88953 18.3689C9.22953 18.3589 9.50953 18.0789 9.50953 17.7389Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18 7H6C3.8 7 2 8.8 2 11V18C2 20.2 3.8 22 6 22H18C20.2 22 22 20.2 22 18V11C22 8.8 20.2 7 18 7ZM16.03 12.46V16.83C16.03 16.85 16.02 16.86 16.02 16.88C15.99 18.02 15.06 18.95 13.91 18.95C12.74 18.95 11.79 18 11.79 16.83C11.79 15.66 12.74 14.71 13.91 14.71C14.13 14.71 14.33 14.75 14.53 14.81V13.44L11.01 14.4V17.73V17.74C11.01 18.91 10.06 19.86 8.89 19.86C7.72 19.86 6.77 18.91 6.77 17.74C6.77 16.57 7.72 15.62 8.89 15.62C9.11 15.62 9.31 15.66 9.51 15.72V13.82V12.22C9.51 11.33 10.06 10.61 10.91 10.39L13.64 9.64C14.52 9.41 15.06 9.64 15.37 9.88C15.67 10.11 16.03 10.58 16.03 11.47V12.46Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SongIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.7188 6.27879V7.44879C21.7188 8.42879 21.3288 9.26879 20.6388 9.75879C20.2087 10.0788 19.6787 10.2288 19.1287 10.2288C18.7887 10.2288 18.4488 10.1788 18.0988 10.0588L12.7188 8.26879V17.9988C12.7188 20.6188 10.5887 22.7488 7.96875 22.7488C5.34875 22.7488 3.21875 20.6188 3.21875 17.9988C3.21875 15.3788 5.34875 13.2488 7.96875 13.2488C9.22875 13.2488 10.3688 13.7488 11.2188 14.5488V3.99879C11.2188 3.02879 11.6188 2.18879 12.3088 1.68879C12.9987 1.19879 13.9187 1.08879 14.8387 1.38879L19.2588 2.86879C20.6188 3.31879 21.7188 4.84879 21.7188 6.27879Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem startContent={<HomeIcon />}>Home</BreadcrumbItem>
+      <BreadcrumbItem startContent={<MusicIcon />}>Music</BreadcrumbItem>
+      <BreadcrumbItem startContent={<ArtistIcon />}>Artist</BreadcrumbItem>
+      <BreadcrumbItem startContent={<AlbumIcon />}>Album</BreadcrumbItem>
+      <BreadcrumbItem startContent={<SongIcon />}>Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/start-end-content.ts b/apps/docs/content/components/breadcrumbs/start-end-content.ts
index 144fb3a539..e99c7e5997 100644
--- a/apps/docs/content/components/breadcrumbs/start-end-content.ts
+++ b/apps/docs/content/components/breadcrumbs/start-end-content.ts
@@ -1,110 +1,7 @@
-const HomeIcon = `export const HomeIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M20.0402 6.82165L14.2802 2.79165C12.7102 1.69165 10.3002 1.75165 8.79023 2.92165L3.78023 6.83165C2.78023 7.61165 1.99023 9.21165 1.99023 10.4716V17.3716C1.99023 19.9216 4.06023 22.0016 6.61023 22.0016H17.3902C19.9402 22.0016 22.0102 19.9316 22.0102 17.3816V10.6016C22.0102 9.25165 21.1402 7.59165 20.0402 6.82165ZM12.7502 18.0016C12.7502 18.4116 12.4102 18.7516 12.0002 18.7516C11.5902 18.7516 11.2502 18.4116 11.2502 18.0016V15.0016C11.2502 14.5916 11.5902 14.2516 12.0002 14.2516C12.4102 14.2516 12.7502 14.5916 12.7502 15.0016V18.0016Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const MusicIcon = `export const MusicIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M14.5406 13.6719C14.1806 13.6719 13.8906 13.9619 13.8906 14.3219C13.8906 14.6819 14.1806 14.9719 14.5406 14.9719C14.9006 14.9719 15.1906 14.6819 15.1906 14.3219C15.1806 13.9619 14.8906 13.6719 14.5406 13.6719Z" fill="currentColor"/>
-    <path d="M9.06016 14.6602C8.70016 14.6602 8.41016 14.9502 8.41016 15.3102C8.41016 15.6702 8.70016 15.9602 9.06016 15.9602C9.42016 15.9602 9.71016 15.6702 9.71016 15.3102C9.71016 14.9502 9.42016 14.6602 9.06016 14.6602Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM16.88 9.55V14.31C16.88 15.6 15.83 16.65 14.54 16.65C13.25 16.65 12.2 15.6 12.2 14.31C12.2 13.02 13.25 11.97 14.54 11.97C14.77 11.97 14.98 12.01 15.19 12.07V10.65L11.41 11.68V15.3C11.41 15.31 11.4 15.32 11.4 15.33C11.39 16.61 10.34 17.64 9.06 17.64C7.77 17.64 6.72 16.59 6.72 15.3C6.72 14.01 7.77 12.96 9.06 12.96C9.29 12.96 9.5 13 9.71 13.06V11.03V9.29C9.71 8.32 10.31 7.53 11.25 7.28L14.24 6.46C15.2 6.2 15.8 6.45 16.14 6.71C16.47 6.97 16.88 7.48 16.88 8.48V9.55Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const ArtistIcon = `export const ArtistIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="M19.5119 5.85L13.5719 2.42C12.6019 1.86 11.4019 1.86 10.4219 2.42L4.49187 5.85C3.52187 6.41 2.92188 7.45 2.92188 8.58V15.42C2.92188 16.54 3.52187 17.58 4.49187 18.15L10.4319 21.58C11.4019 22.14 12.6019 22.14 13.5819 21.58L19.5219 18.15C20.4919 17.59 21.0919 16.55 21.0919 15.42V8.58C21.0819 7.45 20.4819 6.42 19.5119 5.85ZM12.0019 7.34C13.2919 7.34 14.3319 8.38 14.3319 9.67C14.3319 10.96 13.2919 12 12.0019 12C10.7119 12 9.67188 10.96 9.67188 9.67C9.67188 8.39 10.7119 7.34 12.0019 7.34ZM14.6819 16.66H9.32187C8.51187 16.66 8.04187 15.76 8.49187 15.09C9.17187 14.08 10.4919 13.4 12.0019 13.4C13.5119 13.4 14.8319 14.08 15.5119 15.09C15.9619 15.75 15.4819 16.66 14.6819 16.66Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const AlbumIcon = `export const AlbumIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-    >
-    <path d="M18 5.25H6C5.59 5.25 5.25 4.91 5.25 4.5C5.25 4.09 5.59 3.75 6 3.75H18C18.41 3.75 18.75 4.09 18.75 4.5C18.75 4.91 18.41 5.25 18 5.25Z" fill="currentColor"/>
-    <path d="M15 2.75H9C8.59 2.75 8.25 2.41 8.25 2C8.25 1.59 8.59 1.25 9 1.25H15C15.41 1.25 15.75 1.59 15.75 2C15.75 2.41 15.41 2.75 15 2.75Z" fill="currentColor"/>
-    <path d="M13.9091 16.2109C13.5691 16.2109 13.2891 16.4909 13.2891 16.8309C13.2891 17.1709 13.5691 17.4509 13.9091 17.4509C14.2491 17.4509 14.5291 17.1709 14.5291 16.8309C14.5291 16.4909 14.2491 16.2109 13.9091 16.2109Z" fill="currentColor"/>
-    <path d="M9.50953 17.7389C9.50953 17.3989 9.22953 17.1289 8.88953 17.1289C8.54953 17.1289 8.26953 17.4089 8.26953 17.7489C8.26953 18.0889 8.54953 18.3689 8.88953 18.3689C9.22953 18.3589 9.50953 18.0789 9.50953 17.7389Z" fill="currentColor"/>
-    <path d="M18 7H6C3.8 7 2 8.8 2 11V18C2 20.2 3.8 22 6 22H18C20.2 22 22 20.2 22 18V11C22 8.8 20.2 7 18 7ZM16.03 12.46V16.83C16.03 16.85 16.02 16.86 16.02 16.88C15.99 18.02 15.06 18.95 13.91 18.95C12.74 18.95 11.79 18 11.79 16.83C11.79 15.66 12.74 14.71 13.91 14.71C14.13 14.71 14.33 14.75 14.53 14.81V13.44L11.01 14.4V17.73V17.74C11.01 18.91 10.06 19.86 8.89 19.86C7.72 19.86 6.77 18.91 6.77 17.74C6.77 16.57 7.72 15.62 8.89 15.62C9.11 15.62 9.31 15.66 9.51 15.72V13.82V12.22C9.51 11.33 10.06 10.61 10.91 10.39L13.64 9.64C14.52 9.41 15.06 9.64 15.37 9.88C15.67 10.11 16.03 10.58 16.03 11.47V12.46Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const SongIcon = `export const SongIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-    >
-    <path d="M21.7188 6.27879V7.44879C21.7188 8.42879 21.3288 9.26879 20.6388 9.75879C20.2087 10.0788 19.6787 10.2288 19.1287 10.2288C18.7887 10.2288 18.4488 10.1788 18.0988 10.0588L12.7188 8.26879V17.9988C12.7188 20.6188 10.5887 22.7488 7.96875 22.7488C5.34875 22.7488 3.21875 20.6188 3.21875 17.9988C3.21875 15.3788 5.34875 13.2488 7.96875 13.2488C9.22875 13.2488 10.3688 13.7488 11.2188 14.5488V3.99879C11.2188 3.02879 11.6188 2.18879 12.3088 1.68879C12.9987 1.19879 13.9187 1.08879 14.8387 1.38879L19.2588 2.86879C20.6188 3.31879 21.7188 4.84879 21.7188 6.27879Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-import {HomeIcon} from "./HomeIcon";
-import {MusicIcon} from "./MusicIcon";
-import {ArtistIcon} from "./ArtistIcon";
-import {AlbumIcon} from "./AlbumIcon";
-import {SongIcon} from "./SongIcon";
-
-export default function App() {
-  return (
-    <Breadcrumbs>
-      <BreadcrumbItem startContent={<HomeIcon />}>Home</BreadcrumbItem>
-      <BreadcrumbItem startContent={<MusicIcon />}>Music</BreadcrumbItem>
-      <BreadcrumbItem startContent={<ArtistIcon />}>Artist</BreadcrumbItem>
-      <BreadcrumbItem startContent={<AlbumIcon />}>Album</BreadcrumbItem>
-      <BreadcrumbItem startContent={<SongIcon />}>Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HomeIcon.jsx": HomeIcon,
-  "/MusicIcon.jsx": MusicIcon,
-  "/ArtistIcon.jsx": ArtistIcon,
-  "/AlbumIcon.jsx": AlbumIcon,
-  "/SongIcon.jsx": SongIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/breadcrumbs/underlines.raw.jsx b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx
new file mode 100644
index 0000000000..479afcecf9
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/underlines.raw.jsx
@@ -0,0 +1,31 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const underlines = ["none", "hover", "always", "active", "focus"];
+  const descriptions = {
+    none: "No underline",
+    hover: "Underline on hover",
+    always: "Always underline",
+    active: "Underline on active",
+    focus: "Underline on focus",
+  };
+
+  return (
+    <div className="flex flex-col flex-wrap gap-4">
+      {underlines.map((u) => (
+        <div key={u}>
+          <p className="mb-1 text-small text-default-600 capitalize">
+            {descriptions[u]} ({u})
+          </p>
+          <Breadcrumbs underline={u}>
+            <BreadcrumbItem>Home</BreadcrumbItem>
+            <BreadcrumbItem>Music</BreadcrumbItem>
+            <BreadcrumbItem>Artist</BreadcrumbItem>
+            <BreadcrumbItem>Album</BreadcrumbItem>
+            <BreadcrumbItem>Song</BreadcrumbItem>
+          </Breadcrumbs>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/underlines.ts b/apps/docs/content/components/breadcrumbs/underlines.ts
index 990ea97b10..962a9b7364 100644
--- a/apps/docs/content/components/breadcrumbs/underlines.ts
+++ b/apps/docs/content/components/breadcrumbs/underlines.ts
@@ -1,34 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const underlines = ["none", "hover", "always", "active", "focus"];
-  const descriptions = {
-    none: "No underline",
-    hover: "Underline on hover",
-    always: "Always underline",
-    active: "Underline on active",
-    focus: "Underline on focus",
-  }
-
-  return (
-    <div className="flex flex-col flex-wrap gap-4">
-      {underlines.map((u) => (
-        <div key={u}>
-          <p className="mb-1 text-small text-default-600 capitalize">
-            {descriptions[u]} ({u})
-          </p>
-          <Breadcrumbs underline={u}>
-            <BreadcrumbItem>Home</BreadcrumbItem>
-            <BreadcrumbItem>Music</BreadcrumbItem>
-            <BreadcrumbItem>Artist</BreadcrumbItem>
-            <BreadcrumbItem>Album</BreadcrumbItem>
-            <BreadcrumbItem>Song</BreadcrumbItem>
-          </Breadcrumbs>
-        </div>
-      ))}
-    </div>
-  );
-}`;
+import App from "./underlines.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/usage.raw.jsx b/apps/docs/content/components/breadcrumbs/usage.raw.jsx
new file mode 100644
index 0000000000..53cddf3bfb
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Breadcrumbs>
+      <BreadcrumbItem>Home</BreadcrumbItem>
+      <BreadcrumbItem>Music</BreadcrumbItem>
+      <BreadcrumbItem>Artist</BreadcrumbItem>
+      <BreadcrumbItem>Album</BreadcrumbItem>
+      <BreadcrumbItem>Song</BreadcrumbItem>
+    </Breadcrumbs>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/usage.ts b/apps/docs/content/components/breadcrumbs/usage.ts
index df213fce9b..1118304c37 100644
--- a/apps/docs/content/components/breadcrumbs/usage.ts
+++ b/apps/docs/content/components/breadcrumbs/usage.ts
@@ -1,16 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Breadcrumbs>
-      <BreadcrumbItem>Home</BreadcrumbItem>
-      <BreadcrumbItem>Music</BreadcrumbItem>
-      <BreadcrumbItem>Artist</BreadcrumbItem>
-      <BreadcrumbItem>Album</BreadcrumbItem>
-      <BreadcrumbItem>Song</BreadcrumbItem>
-    </Breadcrumbs>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/breadcrumbs/variants.raw.jsx b/apps/docs/content/components/breadcrumbs/variants.raw.jsx
new file mode 100644
index 0000000000..f51df29307
--- /dev/null
+++ b/apps/docs/content/components/breadcrumbs/variants.raw.jsx
@@ -0,0 +1,19 @@
+import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["solid", "bordered", "light"];
+
+  return (
+    <div className="flex flex-col flex-wrap gap-4">
+      {variants.map((variant) => (
+        <Breadcrumbs key={variant} variant={variant}>
+          <BreadcrumbItem>Home</BreadcrumbItem>
+          <BreadcrumbItem>Music</BreadcrumbItem>
+          <BreadcrumbItem>Artist</BreadcrumbItem>
+          <BreadcrumbItem>Album</BreadcrumbItem>
+          <BreadcrumbItem>Song</BreadcrumbItem>
+        </Breadcrumbs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/breadcrumbs/variants.ts b/apps/docs/content/components/breadcrumbs/variants.ts
index 45406cb580..ddea95fb2e 100644
--- a/apps/docs/content/components/breadcrumbs/variants.ts
+++ b/apps/docs/content/components/breadcrumbs/variants.ts
@@ -1,22 +1,4 @@
-const App = `import {Breadcrumbs, BreadcrumbItem} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["solid", "bordered", "light"];
-
-  return (
-    <div className="flex flex-col flex-wrap gap-4">
-      {variants.map((variant) => (
-        <Breadcrumbs key={variant} variant={variant}>
-          <BreadcrumbItem>Home</BreadcrumbItem>
-          <BreadcrumbItem>Music</BreadcrumbItem>
-          <BreadcrumbItem>Artist</BreadcrumbItem>
-          <BreadcrumbItem>Album</BreadcrumbItem>
-          <BreadcrumbItem>Song</BreadcrumbItem>
-        </Breadcrumbs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/colors.raw.jsx b/apps/docs/content/components/button/colors.raw.jsx
new file mode 100644
index 0000000000..07f8cb6aa4
--- /dev/null
+++ b/apps/docs/content/components/button/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Button color="default">Default</Button>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="danger">Danger</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/colors.ts b/apps/docs/content/components/button/colors.ts
index b0bf1c1527..d5bef810aa 100644
--- a/apps/docs/content/components/button/colors.ts
+++ b/apps/docs/content/components/button/colors.ts
@@ -1,29 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Button color="default">
-        Default
-      </Button>
-      <Button color="primary">
-        Primary
-      </Button>  
-      <Button color="secondary">
-        Secondary
-      </Button>  
-      <Button color="success">
-        Success
-      </Button>  
-      <Button color="warning">
-        Warning
-      </Button>  
-      <Button color="danger">
-        Danger
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/custom-impl.raw.jsx b/apps/docs/content/components/button/custom-impl.raw.jsx
new file mode 100644
index 0000000000..f1ec13ac21
--- /dev/null
+++ b/apps/docs/content/components/button/custom-impl.raw.jsx
@@ -0,0 +1,38 @@
+import {forwardRef} from "react";
+import {useButton, Ripple, Spinner} from "@nextui-org/react";
+
+const MyButton = forwardRef((props, ref) => {
+  const {
+    domRef,
+    children,
+    spinnerSize,
+    spinner = <Spinner color="current" size={spinnerSize} />,
+    spinnerPlacement,
+    startContent,
+    endContent,
+    isLoading,
+    disableRipple,
+    getButtonProps,
+    getRippleProps,
+  } = useButton({
+    ref,
+    ...props,
+  });
+
+  const {ripples, onClear} = getRippleProps();
+
+  return (
+    <button ref={domRef} {...getButtonProps()}>
+      {startContent}
+      {isLoading && spinnerPlacement === "start" && spinner}
+      {children}
+      {isLoading && spinnerPlacement === "end" && spinner}
+      {endContent}
+      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
+    </button>
+  );
+});
+
+MyButton.displayName = "MyButton";
+
+export default MyButton;
diff --git a/apps/docs/content/components/button/custom-impl.raw.tsx b/apps/docs/content/components/button/custom-impl.raw.tsx
new file mode 100644
index 0000000000..e297b601f9
--- /dev/null
+++ b/apps/docs/content/components/button/custom-impl.raw.tsx
@@ -0,0 +1,40 @@
+import {forwardRef} from "react";
+import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
+
+export interface ButtonProps extends BaseButtonProps {}
+
+const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    domRef,
+    children,
+    spinnerSize,
+    spinner = <Spinner color="current" size={spinnerSize} />,
+    spinnerPlacement,
+    startContent,
+    endContent,
+    isLoading,
+    disableRipple,
+    getButtonProps,
+    getRippleProps,
+  } = useButton({
+    ref,
+    ...props,
+  });
+
+  const {ripples, onClear} = getRippleProps();
+
+  return (
+    <button ref={domRef} {...getButtonProps()}>
+      {startContent}
+      {isLoading && spinnerPlacement === "start" && spinner}
+      {children}
+      {isLoading && spinnerPlacement === "end" && spinner}
+      {endContent}
+      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
+    </button>
+  );
+});
+
+MyButton.displayName = "MyButton";
+
+export default MyButton;
diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts
index a7ad847c51..ef0d8ef531 100644
--- a/apps/docs/content/components/button/custom-impl.ts
+++ b/apps/docs/content/components/button/custom-impl.ts
@@ -1,83 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {useButton, Ripple, Spinner} from "@nextui-org/react";
-
-
-const MyButton = forwardRef((props, ref) => {
-  const {
-    domRef,
-    children,
-    spinnerSize,
-    spinner = <Spinner color="current" size={spinnerSize} />,
-    spinnerPlacement,
-    startContent,
-    endContent,
-    isLoading,
-    disableRipple,
-    getButtonProps,
-    getRippleProps,
-  } = useButton({
-    ref,
-    ...props,
-  });
-
-  const {ripples, onClear} = getRippleProps();
-
-  return (
-    <button ref={domRef} {...getButtonProps()}>
-      {startContent}
-      {isLoading && spinnerPlacement === "start" && spinner}
-      {children}
-      {isLoading && spinnerPlacement === "end" && spinner}
-      {endContent}
-      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
-    </button>
-  );
-});
-
-MyButton.displayName = "MyButton";
-
-export default MyButton;`;
-
-const AppTs = `import {forwardRef} from "react";
-import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
-
-export interface ButtonProps extends BaseButtonProps {}
-
-const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const {
-    domRef,
-    children,
-    spinnerSize,
-    spinner = <Spinner color="current" size={spinnerSize} />,
-    spinnerPlacement,
-    startContent,
-    endContent,
-    isLoading,
-    disableRipple,
-    getButtonProps,
-    getRippleProps,
-  } = useButton({
-    ref,
-    ...props,
-  });
-
-  const {ripples, onClear} = getRippleProps();
-
-  return (
-    <button ref={domRef} {...getButtonProps()}>
-      {startContent}
-      {isLoading && spinnerPlacement === "start" && spinner}
-      {children}
-      {isLoading && spinnerPlacement === "end" && spinner}
-      {endContent}
-      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
-    </button>
-  );
-});
-
-MyButton.displayName = "MyButton";
-
-export default MyButton;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/custom-styles.raw.jsx b/apps/docs/content/components/button/custom-styles.raw.jsx
new file mode 100644
index 0000000000..cd999fa238
--- /dev/null
+++ b/apps/docs/content/components/button/custom-styles.raw.jsx
@@ -0,0 +1,12 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+      radius="full"
+    >
+      Button
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/custom-styles.ts b/apps/docs/content/components/button/custom-styles.ts
index b2136ec09f..da3ea9093a 100644
--- a/apps/docs/content/components/button/custom-styles.ts
+++ b/apps/docs/content/components/button/custom-styles.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button radius="full" className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      Button
-    </Button>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/disabled.raw.jsx b/apps/docs/content/components/button/disabled.raw.jsx
new file mode 100644
index 0000000000..9d59145f8c
--- /dev/null
+++ b/apps/docs/content/components/button/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button isDisabled color="primary">
+      Button
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts
index 57dbe8b255..1a215cc91f 100644
--- a/apps/docs/content/components/button/disabled.ts
+++ b/apps/docs/content/components/button/disabled.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button isDisabled color="primary">
-      Button
-    </Button>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/group-disabled.raw.jsx b/apps/docs/content/components/button/group-disabled.raw.jsx
new file mode 100644
index 0000000000..f42ab62dff
--- /dev/null
+++ b/apps/docs/content/components/button/group-disabled.raw.jsx
@@ -0,0 +1,11 @@
+import {Button, ButtonGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <ButtonGroup isDisabled>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group-disabled.ts b/apps/docs/content/components/button/group-disabled.ts
index 55b5281bc2..a0fb219d26 100644
--- a/apps/docs/content/components/button/group-disabled.ts
+++ b/apps/docs/content/components/button/group-disabled.ts
@@ -1,14 +1,4 @@
-const App = `import {Button, ButtonGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <ButtonGroup isDisabled>
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Three</Button>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group-disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/group-use-case.raw.jsx b/apps/docs/content/components/button/group-use-case.raw.jsx
new file mode 100644
index 0000000000..5685c46f6f
--- /dev/null
+++ b/apps/docs/content/components/button/group-use-case.raw.jsx
@@ -0,0 +1,71 @@
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/react";
+
+export const ChevronDownIcon = () => {
+  return (
+    <svg fill="none" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));
+
+  const descriptionsMap = {
+    merge:
+      "All commits from the source branch are added to the destination branch via a merge commit.",
+    squash:
+      "All commits from the source branch are added to the destination branch as a single commit.",
+    rebase: "All commits from the source branch are added to the destination branch individually.",
+  };
+
+  const labelsMap = {
+    merge: "Create a merge commit",
+    squash: "Squash and merge",
+    rebase: "Rebase and merge",
+  };
+
+  // Convert the Set to an Array and get the first value.
+  const selectedOptionValue = Array.from(selectedOption)[0];
+
+  return (
+    <ButtonGroup variant="flat">
+      <Button>{labelsMap[selectedOptionValue]}</Button>
+      <Dropdown placement="bottom-end">
+        <DropdownTrigger>
+          <Button isIconOnly>
+            <ChevronDownIcon />
+          </Button>
+        </DropdownTrigger>
+        <DropdownMenu
+          disallowEmptySelection
+          aria-label="Merge options"
+          className="max-w-[300px]"
+          selectedKeys={selectedOption}
+          selectionMode="single"
+          onSelectionChange={setSelectedOption}
+        >
+          <DropdownItem key="merge" description={descriptionsMap["merge"]}>
+            {labelsMap["merge"]}
+          </DropdownItem>
+          <DropdownItem key="squash" description={descriptionsMap["squash"]}>
+            {labelsMap["squash"]}
+          </DropdownItem>
+          <DropdownItem key="rebase" description={descriptionsMap["rebase"]}>
+            {labelsMap["rebase"]}
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group-use-case.ts b/apps/docs/content/components/button/group-use-case.ts
index d1220f5371..d563f87977 100644
--- a/apps/docs/content/components/button/group-use-case.ts
+++ b/apps/docs/content/components/button/group-use-case.ts
@@ -1,67 +1,7 @@
-const ChevronDownIcon = `export const ChevronDownIcon = () => (
-  <svg fill="none" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react";
-import {ChevronDownIcon} from './ChevronDownIcon';
-
-export default function App() {
-  const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));
-
-  const descriptionsMap = {
-    merge:
-      "All commits from the source branch are added to the destination branch via a merge commit.",
-    squash:
-      "All commits from the source branch are added to the destination branch as a single commit.",
-    rebase: "All commits from the source branch are added to the destination branch individually.",
-  };
-
-  const labelsMap = {
-    merge: "Create a merge commit",
-    squash: "Squash and merge",
-    rebase: "Rebase and merge",
-  }
-
-  // Convert the Set to an Array and get the first value.
-  const selectedOptionValue = Array.from(selectedOption)[0];
-
-  return (
-    <ButtonGroup variant="flat">
-      <Button>{labelsMap[selectedOptionValue]}</Button>
-      <Dropdown placement="bottom-end">
-        <DropdownTrigger>
-          <Button isIconOnly>
-            <ChevronDownIcon />
-          </Button>
-        </DropdownTrigger>
-        <DropdownMenu
-          disallowEmptySelection
-          aria-label="Merge options"
-          selectedKeys={selectedOption}
-          selectionMode="single"
-          onSelectionChange={setSelectedOption}
-          className="max-w-[300px]"
-        >
-          <DropdownItem key="merge" description={descriptionsMap["merge"]}>
-            {labelsMap["merge"]}
-          </DropdownItem>
-          <DropdownItem key="squash" description={descriptionsMap["squash"]}>
-            {labelsMap["squash"]}
-          </DropdownItem>
-          <DropdownItem key="rebase" description={descriptionsMap["rebase"]}>
-            {labelsMap["rebase"]}
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group-use-case.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronDownIcon.jsx": ChevronDownIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/group.raw.jsx b/apps/docs/content/components/button/group.raw.jsx
new file mode 100644
index 0000000000..4c3273f823
--- /dev/null
+++ b/apps/docs/content/components/button/group.raw.jsx
@@ -0,0 +1,11 @@
+import {Button, ButtonGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <ButtonGroup>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group.ts b/apps/docs/content/components/button/group.ts
index ec5d6678da..0660a894cd 100644
--- a/apps/docs/content/components/button/group.ts
+++ b/apps/docs/content/components/button/group.ts
@@ -1,14 +1,4 @@
-const App = `import {Button, ButtonGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <ButtonGroup>
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Three</Button>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/icon-only.raw.jsx b/apps/docs/content/components/button/icon-only.raw.jsx
new file mode 100644
index 0000000000..ccb38b1424
--- /dev/null
+++ b/apps/docs/content/components/button/icon-only.raw.jsx
@@ -0,0 +1,55 @@
+import {Button} from "@nextui-org/react";
+
+export const HeartIcon = ({fill = "currentColor", filled, size, height, width, ...props}) => {
+  return (
+    <svg
+      fill={filled ? fill : "none"}
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button isIconOnly aria-label="Like" color="danger">
+        <HeartIcon />
+      </Button>
+      <Button isIconOnly aria-label="Take a photo" color="warning" variant="faded">
+        <CameraIcon />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/icon-only.ts b/apps/docs/content/components/button/icon-only.ts
index b438e283f2..7709cd3f67 100644
--- a/apps/docs/content/components/button/icon-only.ts
+++ b/apps/docs/content/components/button/icon-only.ts
@@ -1,82 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill={filled ? fill : 'none'}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
-        stroke={fill}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-`;
-
-const CameraIcon = `export const CameraIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill={fill}
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Button} from "@nextui-org/react";
-import {HeartIcon} from './HeartIcon';
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button isIconOnly color="danger" aria-label="Like">
-        <HeartIcon />
-      </Button>    
-      <Button isIconOnly color="warning" variant="faded" aria-label="Take a photo">
-        <CameraIcon />
-      </Button>
-    </div>
-  );
-}`;
+import App from "./icon-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HeartIcon.jsx": HeartIcon,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/icons.raw.jsx b/apps/docs/content/components/button/icons.raw.jsx
new file mode 100644
index 0000000000..2e1634bba0
--- /dev/null
+++ b/apps/docs/content/components/button/icons.raw.jsx
@@ -0,0 +1,62 @@
+import {Button} from "@nextui-org/react";
+
+export const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      data-name="Iconly/Curved/Profile"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path
+          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
+        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+      </g>
+    </svg>
+  );
+};
+
+export const CameraIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button color="success" endContent={<CameraIcon />}>
+        Take a photo
+      </Button>
+      <Button color="danger" startContent={<UserIcon />} variant="bordered">
+        Delete user
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/icons.ts b/apps/docs/content/components/button/icons.ts
index 783ae43bd1..22a410c88f 100644
--- a/apps/docs/content/components/button/icons.ts
+++ b/apps/docs/content/components/button/icons.ts
@@ -1,91 +1,7 @@
-const UserIcon = `export const UserIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      data-name="Iconly/Curved/Profile"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      height={size || height || 24}
-      {...props}
-    >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      >
-        <path
-          data-name="Stroke 1"
-          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
-        />
-        <path
-          data-name="Stroke 3"
-          d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
-        />
-      </g>
-    </svg>
-  );
-};`;
-
-const CameraIcon = `export const CameraIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill={fill}
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Button} from "@nextui-org/react";
-import {UserIcon} from './UserIcon';
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button color="success" endContent={<CameraIcon/>}>
-        Take a photo
-      </Button>    
-      <Button color="danger" variant="bordered" startContent={<UserIcon/>}>
-        Delete user
-      </Button>
-    </div>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/UserIcon.jsx": UserIcon,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/loading-custom.raw.jsx b/apps/docs/content/components/button/loading-custom.raw.jsx
new file mode 100644
index 0000000000..50979e32b5
--- /dev/null
+++ b/apps/docs/content/components/button/loading-custom.raw.jsx
@@ -0,0 +1,34 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      isLoading
+      color="secondary"
+      spinner={
+        <svg
+          className="animate-spin h-5 w-5 text-current"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            fill="currentColor"
+          />
+        </svg>
+      }
+    >
+      Loading
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/loading-custom.ts b/apps/docs/content/components/button/loading-custom.ts
index 7dbe0d78f5..b0036de8da 100644
--- a/apps/docs/content/components/button/loading-custom.ts
+++ b/apps/docs/content/components/button/loading-custom.ts
@@ -1,37 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button
-      isLoading
-      color="secondary"
-      spinner={
-        <svg
-          className="animate-spin h-5 w-5 text-current"
-          fill="none"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-    >
-      Loading
-    </Button>
-  );
-}`;
+import App from "./loading-custom.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/loading.raw.jsx b/apps/docs/content/components/button/loading.raw.jsx
new file mode 100644
index 0000000000..6b75c489d4
--- /dev/null
+++ b/apps/docs/content/components/button/loading.raw.jsx
@@ -0,0 +1,9 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button isLoading color="primary">
+      Loading
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts
index 830d52eea4..0c8fea5a5f 100644
--- a/apps/docs/content/components/button/loading.ts
+++ b/apps/docs/content/components/button/loading.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button color="primary" isLoading>
-      Loading
-    </Button>
-  );
-}`;
+import App from "./loading.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/radius.raw.jsx b/apps/docs/content/components/button/radius.raw.jsx
new file mode 100644
index 0000000000..c91268e560
--- /dev/null
+++ b/apps/docs/content/components/button/radius.raw.jsx
@@ -0,0 +1,13 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button radius="full">Full</Button>
+      <Button radius="lg">Large</Button>
+      <Button radius="md">Medium</Button>
+      <Button radius="sm">Small</Button>
+      <Button radius="none">None</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/radius.ts b/apps/docs/content/components/button/radius.ts
index 739ca0f5b8..7b78db1ce0 100644
--- a/apps/docs/content/components/button/radius.ts
+++ b/apps/docs/content/components/button/radius.ts
@@ -1,26 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button radius="full">
-        Full
-      </Button>
-      <Button radius="lg">
-        Large
-      </Button>  
-      <Button radius="md">
-        Medium
-      </Button>  
-      <Button radius="sm">
-        Small
-      </Button>  
-      <Button radius="none">
-        None
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/sizes.raw.jsx b/apps/docs/content/components/button/sizes.raw.jsx
new file mode 100644
index 0000000000..4880e203fd
--- /dev/null
+++ b/apps/docs/content/components/button/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts
index 06b90c1ffd..85a2f5b30b 100644
--- a/apps/docs/content/components/button/sizes.ts
+++ b/apps/docs/content/components/button/sizes.ts
@@ -1,20 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button size="sm">
-        Small
-      </Button>  
-      <Button size="md">
-        Medium
-      </Button>  
-      <Button size="lg">
-        Large
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/usage.raw.jsx b/apps/docs/content/components/button/usage.raw.jsx
new file mode 100644
index 0000000000..fcb138b916
--- /dev/null
+++ b/apps/docs/content/components/button/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return <Button color="primary">Button</Button>;
+}
diff --git a/apps/docs/content/components/button/usage.ts b/apps/docs/content/components/button/usage.ts
index f80f3914ca..1118304c37 100644
--- a/apps/docs/content/components/button/usage.ts
+++ b/apps/docs/content/components/button/usage.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button color="primary">
-      Button
-    </Button>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/variants.raw.jsx b/apps/docs/content/components/button/variants.raw.jsx
new file mode 100644
index 0000000000..7a7eaff52d
--- /dev/null
+++ b/apps/docs/content/components/button/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Button color="primary" variant="solid">
+        Solid
+      </Button>
+      <Button color="primary" variant="faded">
+        Faded
+      </Button>
+      <Button color="primary" variant="bordered">
+        Bordered
+      </Button>
+      <Button color="primary" variant="light">
+        Light
+      </Button>
+      <Button color="primary" variant="flat">
+        Flat
+      </Button>
+      <Button color="primary" variant="ghost">
+        Ghost
+      </Button>
+      <Button color="primary" variant="shadow">
+        Shadow
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/variants.ts b/apps/docs/content/components/button/variants.ts
index fe6067aed7..ddea95fb2e 100644
--- a/apps/docs/content/components/button/variants.ts
+++ b/apps/docs/content/components/button/variants.ts
@@ -1,32 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Button color="primary" variant="solid">
-        Solid
-      </Button>
-      <Button color="primary" variant="faded">
-        Faded
-      </Button>  
-      <Button color="primary" variant="bordered">
-        Bordered
-      </Button>  
-      <Button color="primary" variant="light">
-        Light
-      </Button>  
-      <Button color="primary" variant="flat">
-        Flat
-      </Button>  
-      <Button color="primary" variant="ghost">
-        Ghost
-      </Button>  
-      <Button color="primary" variant="shadow">
-        Shadow
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx
new file mode 100644
index 0000000000..edce75b871
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.jsx
@@ -0,0 +1,16 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
+
+  return (
+    <Calendar
+      aria-label="Date (Controlled Focused Value)"
+      focusedValue={focusedDate}
+      value={defaultDate}
+      onFocusChange={setFocusedDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx
new file mode 100644
index 0000000000..00f2666b84
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled-focused-value.raw.tsx
@@ -0,0 +1,19 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);
+
+  return (
+    <Calendar
+      aria-label="Date (Controlled Focused Value)"
+      focusedValue={focusedDate}
+      value={defaultDate}
+      onFocusChange={setFocusedDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/controlled-focused-value.ts b/apps/docs/content/components/calendar/controlled-focused-value.ts
index a405da5060..100bf01c43 100644
--- a/apps/docs/content/components/calendar/controlled-focused-value.ts
+++ b/apps/docs/content/components/calendar/controlled-focused-value.ts
@@ -1,43 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
-
-  return (
-    <Calendar
-      aria-label="Date (Controlled Focused Value)"
-      focusedValue={focusedDate}
-      value={defaultDate}
-      onFocusChange={setFocusedDate}
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState<DateValue>(defaultDate);
-
-  return (
-    <Calendar
-      aria-label="Date (Controlled Focused Value)"
-      focusedValue={focusedDate}
-      value={defaultDate}
-      onFocusChange={setFocusedDate}
-    />
-  );
-}`;
+import App from "./controlled-focused-value.raw.jsx?raw";
+import AppTs from "./controlled-focused-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/controlled.raw.jsx b/apps/docs/content/components/calendar/controlled.raw.jsx
new file mode 100644
index 0000000000..54d418f9f8
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled.raw.jsx
@@ -0,0 +1,8 @@
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState(parseDate("2024-03-07"));
+
+  return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/calendar/controlled.raw.tsx b/apps/docs/content/components/calendar/controlled.raw.tsx
new file mode 100644
index 0000000000..80c8b2dd2f
--- /dev/null
+++ b/apps/docs/content/components/calendar/controlled.raw.tsx
@@ -0,0 +1,11 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));
+
+  return <Calendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/calendar/controlled.ts b/apps/docs/content/components/calendar/controlled.ts
index 4a1166231c..1f1a363363 100644
--- a/apps/docs/content/components/calendar/controlled.ts
+++ b/apps/docs/content/components/calendar/controlled.ts
@@ -1,39 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState(parseDate("2024-03-07"));
-
-  return (
-    <Calendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState<DateValue>(parseDate("2024-03-07"));
-
-  return (
-    <Calendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/disabled.raw.jsx b/apps/docs/content/components/calendar/disabled.raw.jsx
new file mode 100644
index 0000000000..1d08bd6492
--- /dev/null
+++ b/apps/docs/content/components/calendar/disabled.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar isDisabled aria-label="Date (Disabled)" />;
+}
diff --git a/apps/docs/content/components/calendar/disabled.ts b/apps/docs/content/components/calendar/disabled.ts
index d82f742067..1a215cc91f 100644
--- a/apps/docs/content/components/calendar/disabled.ts
+++ b/apps/docs/content/components/calendar/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar aria-label="Date (Disabled)" isDisabled />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/international-calendars.raw.jsx b/apps/docs/content/components/calendar/international-calendars.raw.jsx
new file mode 100644
index 0000000000..22d4a824ab
--- /dev/null
+++ b/apps/docs/content/components/calendar/international-calendars.raw.jsx
@@ -0,0 +1,10 @@
+import {Calendar} from "@nextui-org/react";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  return (
+    <I18nProvider locale="zh-CN-u-ca-chinese">
+      <Calendar aria-label="Date (International Calendar)" />
+    </I18nProvider>
+  );
+}
diff --git a/apps/docs/content/components/calendar/international-calendars.ts b/apps/docs/content/components/calendar/international-calendars.ts
index bda32d3a4a..98bb8449e6 100644
--- a/apps/docs/content/components/calendar/international-calendars.ts
+++ b/apps/docs/content/components/calendar/international-calendars.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  return (
-    <I18nProvider locale="zh-CN-u-ca-chinese">
-      <Calendar aria-label="Date (International Calendar)" />
-    </I18nProvider>
-  );
-}`;
+import App from "./international-calendars.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/invalid-date.raw.jsx b/apps/docs/content/components/calendar/invalid-date.raw.jsx
new file mode 100644
index 0000000000..372034725b
--- /dev/null
+++ b/apps/docs/content/components/calendar/invalid-date.raw.jsx
@@ -0,0 +1,19 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState(today(getLocalTimeZone()));
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date, locale);
+
+  return (
+    <Calendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/invalid-date.raw.tsx b/apps/docs/content/components/calendar/invalid-date.raw.tsx
new file mode 100644
index 0000000000..d9276c52e6
--- /dev/null
+++ b/apps/docs/content/components/calendar/invalid-date.raw.tsx
@@ -0,0 +1,22 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date, locale);
+
+  return (
+    <Calendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/invalid-date.ts b/apps/docs/content/components/calendar/invalid-date.ts
index 6a8354c74c..e373a04e5b 100644
--- a/apps/docs/content/components/calendar/invalid-date.ts
+++ b/apps/docs/content/components/calendar/invalid-date.ts
@@ -1,51 +1,15 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState(today(getLocalTimeZone()));
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
-
-  return (
-    <Calendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
-
-const AppTs = `import {Calendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(today(getLocalTimeZone()));
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date, locale);
-
-  return (
-    <Calendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
+import App from "./invalid-date.raw.jsx?raw";
+import AppTs from "./invalid-date.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/max-date-value.raw.jsx b/apps/docs/content/components/calendar/max-date-value.raw.jsx
new file mode 100644
index 0000000000..3edacc1909
--- /dev/null
+++ b/apps/docs/content/components/calendar/max-date-value.raw.jsx
@@ -0,0 +1,12 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <Calendar
+      aria-label="Date (Max Date Value)"
+      defaultValue={today(getLocalTimeZone())}
+      maxValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/max-date-value.ts b/apps/docs/content/components/calendar/max-date-value.ts
index 9c60a5e910..6a82913361 100644
--- a/apps/docs/content/components/calendar/max-date-value.ts
+++ b/apps/docs/content/components/calendar/max-date-value.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar
-      aria-label="Date (Max Date Value)"
-      defaultValue={today(getLocalTimeZone())}
-      maxValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./max-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/min-date-value.raw.jsx b/apps/docs/content/components/calendar/min-date-value.raw.jsx
new file mode 100644
index 0000000000..c7d7ab70b1
--- /dev/null
+++ b/apps/docs/content/components/calendar/min-date-value.raw.jsx
@@ -0,0 +1,12 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <Calendar
+      aria-label="Date (Min Date Value)"
+      defaultValue={today(getLocalTimeZone())}
+      minValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/calendar/min-date-value.ts b/apps/docs/content/components/calendar/min-date-value.ts
index 9ddbabbdb7..4e86e82613 100644
--- a/apps/docs/content/components/calendar/min-date-value.ts
+++ b/apps/docs/content/components/calendar/min-date-value.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar
-      aria-label="Date (Min Date Value)"
-      defaultValue={today(getLocalTimeZone())}
-      minValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./min-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/page-behaviour.raw.jsx b/apps/docs/content/components/calendar/page-behaviour.raw.jsx
new file mode 100644
index 0000000000..e28c53f652
--- /dev/null
+++ b/apps/docs/content/components/calendar/page-behaviour.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar aria-label="Date (Page Behaviour)" pageBehavior="single" />;
+}
diff --git a/apps/docs/content/components/calendar/page-behaviour.ts b/apps/docs/content/components/calendar/page-behaviour.ts
index cd4fd33d27..ef31c845d8 100644
--- a/apps/docs/content/components/calendar/page-behaviour.ts
+++ b/apps/docs/content/components/calendar/page-behaviour.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Page Behaviour)" 
-      pageBehavior="single" 
-    />
-  );
-}`;
+import App from "./page-behaviour.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/presets.raw.jsx b/apps/docs/content/components/calendar/presets.raw.jsx
new file mode 100644
index 0000000000..bf703ff297
--- /dev/null
+++ b/apps/docs/content/components/calendar/presets.raw.jsx
@@ -0,0 +1,87 @@
+import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [value, setValue] = React.useState(defaultDate);
+  let {locale} = useLocale();
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(now.add({months: 1}));
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        aria-label="Date (Presets)"
+        bottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        classNames={{
+          content: "w-full",
+        }}
+        focusedValue={value}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button onPress={() => setValue(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/presets.raw.tsx b/apps/docs/content/components/calendar/presets.raw.tsx
new file mode 100644
index 0000000000..496f8e37b3
--- /dev/null
+++ b/apps/docs/content/components/calendar/presets.raw.tsx
@@ -0,0 +1,90 @@
+import type {DateValue} from "@react-types/calendar";
+
+import React from "react";
+import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [value, setValue] = React.useState<DateValue>(defaultDate);
+  let {locale} = useLocale();
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(now.add({months: 1}));
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Calendar
+        aria-label="Date (Presets)"
+        bottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        classNames={{
+          content: "w-full",
+        }}
+        focusedValue={value}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button onPress={() => setValue(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/presets.ts b/apps/docs/content/components/calendar/presets.ts
index f6e9d85919..334d59a763 100644
--- a/apps/docs/content/components/calendar/presets.ts
+++ b/apps/docs/content/components/calendar/presets.ts
@@ -1,185 +1,15 @@
-const App = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [value, setValue] = React.useState(defaultDate);
-  let {locale} = useLocale();
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(now.add({months: 1}));
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Calendar
-        aria-label="Date (Presets)"
-        bottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        classNames={{
-          content: "w-full",
-        }}
-        focusedValue={value}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button onPress={() => setValue(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setValue}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {Calendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [value, setValue] = React.useState<DateValue>(defaultDate);
-  let {locale} = useLocale();
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(now.add({months: 1}));
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Calendar
-        aria-label="Date (Presets)"
-        bottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        classNames={{
-          content: "w-full",
-        }}
-        focusedValue={value}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button onPress={() => setValue(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setValue}
-      />
-    </div>
-  );
-}`;
+import App from "./presets.raw.jsx?raw";
+import AppTs from "./presets.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/calendar/read-only.raw.jsx b/apps/docs/content/components/calendar/read-only.raw.jsx
new file mode 100644
index 0000000000..ff58e4fbb8
--- /dev/null
+++ b/apps/docs/content/components/calendar/read-only.raw.jsx
@@ -0,0 +1,6 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return <Calendar isReadOnly aria-label="Date (Read Only)" value={today(getLocalTimeZone())} />;
+}
diff --git a/apps/docs/content/components/calendar/read-only.ts b/apps/docs/content/components/calendar/read-only.ts
index 6fffcd20a6..caf4be10cf 100644
--- a/apps/docs/content/components/calendar/read-only.ts
+++ b/apps/docs/content/components/calendar/read-only.ts
@@ -1,15 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Read Only)" 
-      value={today(getLocalTimeZone())} 
-      isReadOnly 
-    />
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..b08a78b9da
--- /dev/null
+++ b/apps/docs/content/components/calendar/unavailable-dates.raw.jsx
@@ -0,0 +1,23 @@
+import {Calendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let now = today(getLocalTimeZone());
+
+  let disabledRanges = [
+    [now, now.add({days: 5})],
+    [now.add({days: 14}), now.add({days: 16})],
+    [now.add({days: 23}), now.add({days: 24})],
+  ];
+
+  let {locale} = useLocale();
+
+  let isDateUnavailable = (date) =>
+    isWeekend(date, locale) ||
+    disabledRanges.some(
+      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+    );
+
+  return <Calendar aria-label="Date (Unavailable)" isDateUnavailable={isDateUnavailable} />;
+}
diff --git a/apps/docs/content/components/calendar/unavailable-dates.ts b/apps/docs/content/components/calendar/unavailable-dates.ts
index 9a884fb2a9..b4e1f4df1a 100644
--- a/apps/docs/content/components/calendar/unavailable-dates.ts
+++ b/apps/docs/content/components/calendar/unavailable-dates.ts
@@ -1,32 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let now = today(getLocalTimeZone());
-
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let {locale} = useLocale();
-
-  let isDateUnavailable = (date) =>
-    isWeekend(date, locale) ||
-    disabledRanges.some(
-      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-    );
-
-  return (
-    <Calendar
-      aria-label="Date (Unavailable)"
-      isDateUnavailable={isDateUnavailable} 
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/usage.raw.jsx b/apps/docs/content/components/calendar/usage.raw.jsx
new file mode 100644
index 0000000000..5d2d03dd0b
--- /dev/null
+++ b/apps/docs/content/components/calendar/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Calendar} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex gap-x-4">
+      <Calendar aria-label="Date (No Selection)" />
+      <Calendar aria-label="Date (Uncontrolled)" defaultValue={parseDate("2020-02-03")} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/calendar/usage.ts b/apps/docs/content/components/calendar/usage.ts
index 0a97b863cd..1118304c37 100644
--- a/apps/docs/content/components/calendar/usage.ts
+++ b/apps/docs/content/components/calendar/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-import {parseDate} from '@internationalized/date';
-
-export default function App() {
-  return (
-    <div className="flex gap-x-4">
-      <Calendar aria-label="Date (No Selection)" />
-      <Calendar aria-label="Date (Uncontrolled)" defaultValue={parseDate("2020-02-03")} />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/visible-months.raw.jsx b/apps/docs/content/components/calendar/visible-months.raw.jsx
new file mode 100644
index 0000000000..bf0c6aff77
--- /dev/null
+++ b/apps/docs/content/components/calendar/visible-months.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar aria-label="Date (Visible Month)" visibleMonths={3} />;
+}
diff --git a/apps/docs/content/components/calendar/visible-months.ts b/apps/docs/content/components/calendar/visible-months.ts
index 796fc6d9b8..38c2db8f01 100644
--- a/apps/docs/content/components/calendar/visible-months.ts
+++ b/apps/docs/content/components/calendar/visible-months.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Visible Month)" 
-      visibleMonths={3} 
-    />
-  );
-}`;
+import App from "./visible-months.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx
new file mode 100644
index 0000000000..a6a3c56866
--- /dev/null
+++ b/apps/docs/content/components/calendar/with-month-and-year-picker.raw.jsx
@@ -0,0 +1,5 @@
+import {Calendar} from "@nextui-org/react";
+
+export default function App() {
+  return <Calendar showMonthAndYearPickers aria-label="Date (Show Month and Year Picker)" />;
+}
diff --git a/apps/docs/content/components/calendar/with-month-and-year-picker.ts b/apps/docs/content/components/calendar/with-month-and-year-picker.ts
index 1774984501..53df2d1367 100644
--- a/apps/docs/content/components/calendar/with-month-and-year-picker.ts
+++ b/apps/docs/content/components/calendar/with-month-and-year-picker.ts
@@ -1,13 +1,4 @@
-const App = `import {Calendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Calendar 
-      aria-label="Date (Show Month and Year Picker)" 
-      showMonthAndYearPickers 
-    />
-  );
-}`;
+import App from "./with-month-and-year-picker.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/blurred-footer.raw.jsx b/apps/docs/content/components/card/blurred-footer.raw.jsx
new file mode 100644
index 0000000000..5d3be92b5b
--- /dev/null
+++ b/apps/docs/content/components/card/blurred-footer.raw.jsx
@@ -0,0 +1,27 @@
+import {Card, CardFooter, Image, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card isFooterBlurred className="border-none" radius="lg">
+      <Image
+        alt="Woman listing to music"
+        className="object-cover"
+        height={200}
+        src="https://nextui.org/images/hero-card.jpeg"
+        width={200}
+      />
+      <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+        <p className="text-tiny text-white/80">Available soon.</p>
+        <Button
+          className="text-tiny text-white bg-black/20"
+          color="default"
+          radius="lg"
+          size="sm"
+          variant="flat"
+        >
+          Notify me
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/blurred-footer.ts b/apps/docs/content/components/card/blurred-footer.ts
index ba3e83bd87..a3fd650d04 100644
--- a/apps/docs/content/components/card/blurred-footer.ts
+++ b/apps/docs/content/components/card/blurred-footer.ts
@@ -1,28 +1,4 @@
-const App = `import {Card, CardFooter, Image, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card
-      isFooterBlurred
-      radius="lg"
-      className="border-none"
-    >
-      <Image
-        alt="Woman listing to music"
-        className="object-cover"
-        height={200}
-        src="https://nextui.org/images/hero-card.jpeg"
-        width={200}
-      />
-      <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
-        <p className="text-tiny text-white/80">Available soon.</p>
-        <Button className="text-tiny text-white bg-black/20" variant="flat" color="default" radius="lg" size="sm">
-          Notify me
-        </Button>
-      </CardFooter>
-    </Card>
-  );
-}`;
+import App from "./blurred-footer.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/blurred.raw.jsx b/apps/docs/content/components/card/blurred.raw.jsx
new file mode 100644
index 0000000000..eac2a6fbaa
--- /dev/null
+++ b/apps/docs/content/components/card/blurred.raw.jsx
@@ -0,0 +1,264 @@
+import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react";
+
+export const HeartIcon = ({
+  size = 24,
+  width,
+  height,
+  strokeWidth = 1.5,
+  fill = "none",
+  ...props
+}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill={fill}
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export const PauseCircleIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M11.9688 2C6.44875 2 1.96875 6.48 1.96875 12C1.96875 17.52 6.44875 22 11.9688 22C17.4888 22 21.9688 17.52 21.9688 12C21.9688 6.48 17.4988 2 11.9688 2ZM10.7188 15.03C10.7188 15.51 10.5188 15.7 10.0087 15.7H8.70875C8.19875 15.7 7.99875 15.51 7.99875 15.03V8.97C7.99875 8.49 8.19875 8.3 8.70875 8.3H9.99875C10.5087 8.3 10.7087 8.49 10.7087 8.97V15.03H10.7188ZM15.9987 15.03C15.9987 15.51 15.7987 15.7 15.2887 15.7H13.9987C13.4887 15.7 13.2887 15.51 13.2887 15.03V8.97C13.2887 8.49 13.4887 8.3 13.9987 8.3H15.2887C15.7987 8.3 15.9987 8.49 15.9987 8.97V15.03Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const NextIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M3.76172 7.21957V16.7896C3.76172 18.7496 5.89172 19.9796 7.59172 18.9996L11.7417 16.6096L15.8917 14.2096C17.5917 13.2296 17.5917 10.7796 15.8917 9.79957L11.7417 7.39957L7.59172 5.00957C5.89172 4.02957 3.76172 5.24957 3.76172 7.21957Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.2383 18.9303C19.8283 18.9303 19.4883 18.5903 19.4883 18.1803V5.82031C19.4883 5.41031 19.8283 5.07031 20.2383 5.07031C20.6483 5.07031 20.9883 5.41031 20.9883 5.82031V18.1803C20.9883 18.5903 20.6583 18.9303 20.2383 18.9303Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PreviousIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M20.2409 7.21957V16.7896C20.2409 18.7496 18.1109 19.9796 16.4109 18.9996L12.2609 16.6096L8.11094 14.2096C6.41094 13.2296 6.41094 10.7796 8.11094 9.79957L12.2609 7.39957L16.4109 5.00957C18.1109 4.02957 20.2409 5.24957 20.2409 7.21957Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.76172 18.9303C3.35172 18.9303 3.01172 18.5903 3.01172 18.1803V5.82031C3.01172 5.41031 3.35172 5.07031 3.76172 5.07031C4.17172 5.07031 4.51172 5.41031 4.51172 5.82031V18.1803C4.51172 18.5903 4.17172 18.9303 3.76172 18.9303Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const RepeatOneIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M3.91 17.1814C3.72 17.1814 3.53 17.1114 3.38 16.9614C2.01 15.5814 1.25 13.7614 1.25 11.8314C1.25 7.82139 4.5 4.56139 8.5 4.56139L14.57 4.58139L13.48 3.54139C13.18 3.25139 13.17 2.78139 13.46 2.48139C13.75 2.18139 14.22 2.17139 14.52 2.46139L16.96 4.80139C17.18 5.01139 17.25 5.34139 17.14 5.62139C17.03 5.90139 16.75 6.09139 16.44 6.09139L8.5 6.07139C5.33 6.07139 2.75 8.66139 2.75 11.8414C2.75 13.3714 3.35 14.8214 4.44 15.9114C4.73 16.2014 4.73 16.6814 4.44 16.9714C4.29 17.1114 4.1 17.1814 3.91 17.1814Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.9999 21.75C9.8099 21.75 9.6299 21.68 9.4799 21.54L7.0399 19.2C6.8199 18.99 6.7499 18.66 6.8599 18.38C6.9799 18.1 7.2599 17.95 7.5599 17.91L15.5099 17.93C18.6799 17.93 21.2599 15.34 21.2599 12.16C21.2599 10.63 20.6599 9.18 19.5699 8.09C19.2799 7.8 19.2799 7.32 19.5699 7.03C19.8599 6.74 20.3399 6.74 20.6299 7.03C21.9999 8.41 22.7599 10.23 22.7599 12.16C22.7599 16.17 19.5099 19.43 15.5099 19.43L9.4399 19.41L10.5299 20.45C10.8299 20.74 10.8399 21.21 10.5499 21.51C10.3899 21.67 10.1999 21.75 9.9999 21.75Z"
+        fill="currentColor"
+      />
+      <path
+        d="M12.2485 15.4191C11.8385 15.4191 11.4985 15.0791 11.4985 14.6691V11.2791L11.3085 11.4891C11.0285 11.7991 10.5585 11.8191 10.2485 11.5491C9.93853 11.2791 9.91853 10.7991 10.1885 10.4891L11.6885 8.81909C11.8985 8.58909 12.2285 8.50909 12.5185 8.61909C12.8085 8.73909 12.9985 9.00909 12.9985 9.32909V14.6791C12.9985 15.0891 12.6585 15.4191 12.2485 15.4191Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ShuffleIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M21.7507 17.9809C21.7507 17.9609 21.7407 17.9409 21.7407 17.9209C21.7307 17.8409 21.7207 17.7609 21.6907 17.6909C21.6507 17.6009 21.6007 17.5309 21.5407 17.4609C21.5407 17.4609 21.5407 17.4509 21.5307 17.4509C21.4607 17.3809 21.3807 17.3309 21.2907 17.2909C21.2007 17.2509 21.1007 17.2309 21.0007 17.2309L16.3307 17.2509C16.3307 17.2509 16.3307 17.2509 16.3207 17.2509C15.7207 17.2509 15.1407 16.9709 14.7807 16.4909L13.5607 14.9209C13.3107 14.5909 12.8407 14.5309 12.5107 14.7909C12.1807 15.0509 12.1207 15.5109 12.3807 15.8409L13.6007 17.4109C14.2507 18.2509 15.2707 18.7509 16.3307 18.7509H16.3407L19.1907 18.7409L18.4807 19.4509C18.1907 19.7409 18.1907 20.2209 18.4807 20.5109C18.6307 20.6609 18.8207 20.7309 19.0107 20.7309C19.2007 20.7309 19.3907 20.6609 19.5407 20.5109L21.5407 18.5109C21.6107 18.4409 21.6607 18.3609 21.7007 18.2709C21.7307 18.1709 21.7507 18.0709 21.7507 17.9809Z"
+        fill="currentColor"
+      />
+      <path
+        d="M8.42 6.69172C7.77 5.79172 6.73 5.26172 5.62 5.26172C5.61 5.26172 5.61 5.26172 5.6 5.26172L3 5.27172C2.59 5.27172 2.25 5.61172 2.25 6.02172C2.25 6.43172 2.59 6.77172 3 6.77172L5.61 6.76172H5.62C6.25 6.76172 6.84 7.06172 7.2 7.57172L8.28 9.07172C8.43 9.27172 8.66 9.38172 8.89 9.38172C9.04 9.38172 9.2 9.33172 9.33 9.24172C9.67 8.99172 9.74 8.52172 9.5 8.19172L8.42 6.69172Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.74 6.07875C21.74 6.05875 21.75 6.03875 21.75 6.02875C21.75 5.92875 21.73 5.82875 21.69 5.73875C21.65 5.64875 21.6 5.56875 21.53 5.49875L19.53 3.49875C19.24 3.20875 18.76 3.20875 18.47 3.49875C18.18 3.78875 18.18 4.26875 18.47 4.55875L19.18 5.26875L16.45 5.25875C16.44 5.25875 16.44 5.25875 16.43 5.25875C15.28 5.25875 14.2 5.82875 13.56 6.79875L7.17 16.3787C6.81 16.9187 6.2 17.2487 5.55 17.2487H5.54L3 17.2287C2.59 17.2287 2.25 17.5587 2.25 17.9787C2.25 18.3887 2.58 18.7287 3 18.7287L5.55 18.7387C5.56 18.7387 5.56 18.7387 5.57 18.7387C6.73 18.7387 7.8 18.1688 8.44 17.1988L14.83 7.61875C15.19 7.07875 15.8 6.74875 16.45 6.74875H16.46L21 6.76875C21.1 6.76875 21.19 6.74875 21.29 6.70875C21.38 6.66875 21.46 6.61875 21.53 6.54875C21.53 6.54875 21.53 6.53875 21.54 6.53875C21.6 6.46875 21.66 6.39875 21.69 6.30875C21.72 6.23875 21.73 6.15875 21.74 6.07875Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [liked, setLiked] = React.useState(false);
+
+  return (
+    <Card
+      isBlurred
+      className="border-none bg-background/60 dark:bg-default-100/50 max-w-[610px]"
+      shadow="sm"
+    >
+      <CardBody>
+        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
+          <div className="relative col-span-6 md:col-span-4">
+            <Image
+              alt="Album cover"
+              className="object-cover"
+              height={200}
+              shadow="md"
+              src="https://nextui.org/images/album-cover.png"
+              width="100%"
+            />
+          </div>
+
+          <div className="flex flex-col col-span-6 md:col-span-8">
+            <div className="flex justify-between items-start">
+              <div className="flex flex-col gap-0">
+                <h3 className="font-semibold text-foreground/90">Daily Mix</h3>
+                <p className="text-small text-foreground/80">12 Tracks</p>
+                <h1 className="text-large font-medium mt-2">Frontend Radio</h1>
+              </div>
+              <Button
+                isIconOnly
+                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
+                radius="full"
+                variant="light"
+                onPress={() => setLiked((v) => !v)}
+              >
+                <HeartIcon
+                  className={liked ? "[&>path]:stroke-transparent" : ""}
+                  fill={liked ? "currentColor" : "none"}
+                />
+              </Button>
+            </div>
+
+            <div className="flex flex-col mt-3 gap-1">
+              <Slider
+                aria-label="Music progress"
+                classNames={{
+                  track: "bg-default-500/30",
+                  thumb: "w-2 h-2 after:w-2 after:h-2 after:bg-foreground",
+                }}
+                color="foreground"
+                defaultValue={33}
+                size="sm"
+              />
+              <div className="flex justify-between">
+                <p className="text-small">1:23</p>
+                <p className="text-small text-foreground/50">4:32</p>
+              </div>
+            </div>
+
+            <div className="flex w-full items-center justify-center">
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <RepeatOneIcon className="text-foreground/80" />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <PreviousIcon />
+              </Button>
+              <Button
+                isIconOnly
+                className="w-auto h-auto data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <PauseCircleIcon size={54} />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <NextIcon />
+              </Button>
+              <Button
+                isIconOnly
+                className="data-[hover]:bg-foreground/10"
+                radius="full"
+                variant="light"
+              >
+                <ShuffleIcon className="text-foreground/80" />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/blurred.ts b/apps/docs/content/components/card/blurred.ts
index 8ba66a5acc..0c08e28f90 100644
--- a/apps/docs/content/components/card/blurred.ts
+++ b/apps/docs/content/components/card/blurred.ts
@@ -1,270 +1,7 @@
-const HearIcon = `export const HeartIcon = ({
-  size = 24,
-  width,
-  height,
-  strokeWidth = 1.5,
-  fill = "none",
-  ...props
-}) => (
-  <svg
-    aria-hidden="true"
-    fill={fill}
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M12.62 20.81C12.28 20.93 11.72 20.93 11.38 20.81C8.48 19.82 2 15.69 2 8.68998C2 5.59998 4.49 3.09998 7.56 3.09998C9.38 3.09998 10.99 3.97998 12 5.33998C13.01 3.97998 14.63 3.09998 16.44 3.09998C19.51 3.09998 22 5.59998 22 8.68998C22 15.69 15.52 19.82 12.62 20.81Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);`;
-
-const PauseCircleIcon = `export const PauseCircleIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M11.9688 2C6.44875 2 1.96875 6.48 1.96875 12C1.96875 17.52 6.44875 22 11.9688 22C17.4888 22 21.9688 17.52 21.9688 12C21.9688 6.48 17.4988 2 11.9688 2ZM10.7188 15.03C10.7188 15.51 10.5188 15.7 10.0087 15.7H8.70875C8.19875 15.7 7.99875 15.51 7.99875 15.03V8.97C7.99875 8.49 8.19875 8.3 8.70875 8.3H9.99875C10.5087 8.3 10.7087 8.49 10.7087 8.97V15.03H10.7188ZM15.9987 15.03C15.9987 15.51 15.7987 15.7 15.2887 15.7H13.9987C13.4887 15.7 13.2887 15.51 13.2887 15.03V8.97C13.2887 8.49 13.4887 8.3 13.9987 8.3H15.2887C15.7987 8.3 15.9987 8.49 15.9987 8.97V15.03Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const NextIcon = `export const NextIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M3.76172 7.21957V16.7896C3.76172 18.7496 5.89172 19.9796 7.59172 18.9996L11.7417 16.6096L15.8917 14.2096C17.5917 13.2296 17.5917 10.7796 15.8917 9.79957L11.7417 7.39957L7.59172 5.00957C5.89172 4.02957 3.76172 5.24957 3.76172 7.21957Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.2383 18.9303C19.8283 18.9303 19.4883 18.5903 19.4883 18.1803V5.82031C19.4883 5.41031 19.8283 5.07031 20.2383 5.07031C20.6483 5.07031 20.9883 5.41031 20.9883 5.82031V18.1803C20.9883 18.5903 20.6583 18.9303 20.2383 18.9303Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const PreviousIcon = `export const PreviousIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M20.2409 7.21957V16.7896C20.2409 18.7496 18.1109 19.9796 16.4109 18.9996L12.2609 16.6096L8.11094 14.2096C6.41094 13.2296 6.41094 10.7796 8.11094 9.79957L12.2609 7.39957L16.4109 5.00957C18.1109 4.02957 20.2409 5.24957 20.2409 7.21957Z"
-      fill="currentColor"
-    />
-    <path
-      d="M3.76172 18.9303C3.35172 18.9303 3.01172 18.5903 3.01172 18.1803V5.82031C3.01172 5.41031 3.35172 5.07031 3.76172 5.07031C4.17172 5.07031 4.51172 5.41031 4.51172 5.82031V18.1803C4.51172 18.5903 4.17172 18.9303 3.76172 18.9303Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const RepeatOneIcon = `export const RepeatOneIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M3.91 17.1814C3.72 17.1814 3.53 17.1114 3.38 16.9614C2.01 15.5814 1.25 13.7614 1.25 11.8314C1.25 7.82139 4.5 4.56139 8.5 4.56139L14.57 4.58139L13.48 3.54139C13.18 3.25139 13.17 2.78139 13.46 2.48139C13.75 2.18139 14.22 2.17139 14.52 2.46139L16.96 4.80139C17.18 5.01139 17.25 5.34139 17.14 5.62139C17.03 5.90139 16.75 6.09139 16.44 6.09139L8.5 6.07139C5.33 6.07139 2.75 8.66139 2.75 11.8414C2.75 13.3714 3.35 14.8214 4.44 15.9114C4.73 16.2014 4.73 16.6814 4.44 16.9714C4.29 17.1114 4.1 17.1814 3.91 17.1814Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.9999 21.75C9.8099 21.75 9.6299 21.68 9.4799 21.54L7.0399 19.2C6.8199 18.99 6.7499 18.66 6.8599 18.38C6.9799 18.1 7.2599 17.95 7.5599 17.91L15.5099 17.93C18.6799 17.93 21.2599 15.34 21.2599 12.16C21.2599 10.63 20.6599 9.18 19.5699 8.09C19.2799 7.8 19.2799 7.32 19.5699 7.03C19.8599 6.74 20.3399 6.74 20.6299 7.03C21.9999 8.41 22.7599 10.23 22.7599 12.16C22.7599 16.17 19.5099 19.43 15.5099 19.43L9.4399 19.41L10.5299 20.45C10.8299 20.74 10.8399 21.21 10.5499 21.51C10.3899 21.67 10.1999 21.75 9.9999 21.75Z"
-      fill="currentColor"
-    />
-    <path
-      d="M12.2485 15.4191C11.8385 15.4191 11.4985 15.0791 11.4985 14.6691V11.2791L11.3085 11.4891C11.0285 11.7991 10.5585 11.8191 10.2485 11.5491C9.93853 11.2791 9.91853 10.7991 10.1885 10.4891L11.6885 8.81909C11.8985 8.58909 12.2285 8.50909 12.5185 8.61909C12.8085 8.73909 12.9985 9.00909 12.9985 9.32909V14.6791C12.9985 15.0891 12.6585 15.4191 12.2485 15.4191Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const ShuffleIcon = `export const ShuffleIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M21.7507 17.9809C21.7507 17.9609 21.7407 17.9409 21.7407 17.9209C21.7307 17.8409 21.7207 17.7609 21.6907 17.6909C21.6507 17.6009 21.6007 17.5309 21.5407 17.4609C21.5407 17.4609 21.5407 17.4509 21.5307 17.4509C21.4607 17.3809 21.3807 17.3309 21.2907 17.2909C21.2007 17.2509 21.1007 17.2309 21.0007 17.2309L16.3307 17.2509C16.3307 17.2509 16.3307 17.2509 16.3207 17.2509C15.7207 17.2509 15.1407 16.9709 14.7807 16.4909L13.5607 14.9209C13.3107 14.5909 12.8407 14.5309 12.5107 14.7909C12.1807 15.0509 12.1207 15.5109 12.3807 15.8409L13.6007 17.4109C14.2507 18.2509 15.2707 18.7509 16.3307 18.7509H16.3407L19.1907 18.7409L18.4807 19.4509C18.1907 19.7409 18.1907 20.2209 18.4807 20.5109C18.6307 20.6609 18.8207 20.7309 19.0107 20.7309C19.2007 20.7309 19.3907 20.6609 19.5407 20.5109L21.5407 18.5109C21.6107 18.4409 21.6607 18.3609 21.7007 18.2709C21.7307 18.1709 21.7507 18.0709 21.7507 17.9809Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.42 6.69172C7.77 5.79172 6.73 5.26172 5.62 5.26172C5.61 5.26172 5.61 5.26172 5.6 5.26172L3 5.27172C2.59 5.27172 2.25 5.61172 2.25 6.02172C2.25 6.43172 2.59 6.77172 3 6.77172L5.61 6.76172H5.62C6.25 6.76172 6.84 7.06172 7.2 7.57172L8.28 9.07172C8.43 9.27172 8.66 9.38172 8.89 9.38172C9.04 9.38172 9.2 9.33172 9.33 9.24172C9.67 8.99172 9.74 8.52172 9.5 8.19172L8.42 6.69172Z"
-      fill="currentColor"
-    />
-    <path
-      d="M21.74 6.07875C21.74 6.05875 21.75 6.03875 21.75 6.02875C21.75 5.92875 21.73 5.82875 21.69 5.73875C21.65 5.64875 21.6 5.56875 21.53 5.49875L19.53 3.49875C19.24 3.20875 18.76 3.20875 18.47 3.49875C18.18 3.78875 18.18 4.26875 18.47 4.55875L19.18 5.26875L16.45 5.25875C16.44 5.25875 16.44 5.25875 16.43 5.25875C15.28 5.25875 14.2 5.82875 13.56 6.79875L7.17 16.3787C6.81 16.9187 6.2 17.2487 5.55 17.2487H5.54L3 17.2287C2.59 17.2287 2.25 17.5587 2.25 17.9787C2.25 18.3887 2.58 18.7287 3 18.7287L5.55 18.7387C5.56 18.7387 5.56 18.7387 5.57 18.7387C6.73 18.7387 7.8 18.1688 8.44 17.1988L14.83 7.61875C15.19 7.07875 15.8 6.74875 16.45 6.74875H16.46L21 6.76875C21.1 6.76875 21.19 6.74875 21.29 6.70875C21.38 6.66875 21.46 6.61875 21.53 6.54875C21.53 6.54875 21.53 6.53875 21.54 6.53875C21.6 6.46875 21.66 6.39875 21.69 6.30875C21.72 6.23875 21.73 6.15875 21.74 6.07875Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Card, CardBody, Image, Button, Slider} from "@nextui-org/react";
-import {HeartIcon} from "./HeartIcon";
-import {PauseCircleIcon} from "./PauseCircleIcon";
-import {NextIcon} from "./NextIcon";
-import {PreviousIcon} from "./PreviousIcon";
-import {RepeatOneIcon} from "./RepeatOneIcon";
-import {ShuffleIcon} from "./ShuffleIcon";
-
-export default function App() {
-  const [liked, setLiked] = React.useState(false);
-
-  return (
-    <Card
-      isBlurred
-      className="border-none bg-background/60 dark:bg-default-100/50 max-w-[610px]"
-      shadow="sm"
-    >
-      <CardBody>
-        <div className="grid grid-cols-6 md:grid-cols-12 gap-6 md:gap-4 items-center justify-center">
-          <div className="relative col-span-6 md:col-span-4">
-            <Image
-              alt="Album cover"
-              className="object-cover"
-              height={200}
-              shadow="md"
-              src="https://nextui.org/images/album-cover.png"
-              width="100%"
-            />
-          </div>
-
-          <div className="flex flex-col col-span-6 md:col-span-8">
-            <div className="flex justify-between items-start">
-              <div className="flex flex-col gap-0">
-                <h3 className="font-semibold text-foreground/90">Daily Mix</h3>
-                <p className="text-small text-foreground/80">12 Tracks</p>
-                <h1 className="text-large font-medium mt-2">Frontend Radio</h1>
-              </div>
-              <Button
-                isIconOnly
-                className="text-default-900/60 data-[hover]:bg-foreground/10 -translate-y-2 translate-x-2"
-                radius="full"
-                variant="light"
-                onPress={() => setLiked((v) => !v)}
-              >
-                <HeartIcon
-                  className={liked ? "[&>path]:stroke-transparent" : ""}
-                  fill={liked ? "currentColor" : "none"}
-                />
-              </Button>
-            </div>
-
-            <div className="flex flex-col mt-3 gap-1">
-              <Slider
-                aria-label="Music progress"
-                classNames={{
-                  track: "bg-default-500/30",
-                  thumb: "w-2 h-2 after:w-2 after:h-2 after:bg-foreground",
-                }}
-                color="foreground"
-                defaultValue={33}
-                size="sm"
-              />
-              <div className="flex justify-between">
-                <p className="text-small">1:23</p>
-                <p className="text-small text-foreground/50">4:32</p>
-              </div>
-            </div>
-
-            <div className="flex w-full items-center justify-center">
-              <Button
-                isIconOnly
-                className="data-[hover]:bg-foreground/10"
-                radius="full"
-                variant="light"
-              >
-                <RepeatOneIcon className="text-foreground/80" />
-              </Button>
-              <Button
-                isIconOnly
-                className="data-[hover]:bg-foreground/10"
-                radius="full"
-                variant="light"
-              >
-                <PreviousIcon />
-              </Button>
-              <Button
-                isIconOnly
-                className="w-auto h-auto data-[hover]:bg-foreground/10"
-                radius="full"
-                variant="light"
-              >
-                <PauseCircleIcon size={54} />
-              </Button>
-              <Button
-                isIconOnly
-                className="data-[hover]:bg-foreground/10"
-                radius="full"
-                variant="light"
-              >
-                <NextIcon />
-              </Button>
-              <Button
-                isIconOnly
-                className="data-[hover]:bg-foreground/10"
-                radius="full"
-                variant="light"
-              >
-                <ShuffleIcon className="text-foreground/80" />
-              </Button>
-            </div>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
-  );
-}`;
+import App from "./blurred.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HeartIcon.jsx": HearIcon,
-  "/PauseCircleIcon.jsx": PauseCircleIcon,
-  "/NextIcon.jsx": NextIcon,
-  "/PreviousIcon.jsx": PreviousIcon,
-  "/RepeatOneIcon.jsx": RepeatOneIcon,
-  "/ShuffleIcon.jsx": ShuffleIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/card/composition.raw.jsx b/apps/docs/content/components/card/composition.raw.jsx
new file mode 100644
index 0000000000..0cfc1e93eb
--- /dev/null
+++ b/apps/docs/content/components/card/composition.raw.jsx
@@ -0,0 +1,53 @@
+import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isFollowed, setIsFollowed] = React.useState(false);
+
+  return (
+    <Card className="max-w-[340px]">
+      <CardHeader className="justify-between">
+        <div className="flex gap-5">
+          <Avatar
+            isBordered
+            radius="full"
+            size="md"
+            src="https://nextui.org/avatars/avatar-1.png"
+          />
+          <div className="flex flex-col gap-1 items-start justify-center">
+            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
+            <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>
+          </div>
+        </div>
+        <Button
+          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
+          color="primary"
+          radius="full"
+          size="sm"
+          variant={isFollowed ? "bordered" : "solid"}
+          onPress={() => setIsFollowed(!isFollowed)}
+        >
+          {isFollowed ? "Unfollow" : "Follow"}
+        </Button>
+      </CardHeader>
+      <CardBody className="px-3 py-0 text-small text-default-400">
+        <p>Frontend developer and UI/UX enthusiast. Join me on this coding adventure!</p>
+        <span className="pt-2">
+          #FrontendWithZoey
+          <span aria-label="computer" className="py-2" role="img">
+            💻
+          </span>
+        </span>
+      </CardBody>
+      <CardFooter className="gap-3">
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-400 text-small">4</p>
+          <p className=" text-default-400 text-small">Following</p>
+        </div>
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-400 text-small">97.1K</p>
+          <p className="text-default-400 text-small">Followers</p>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/composition.ts b/apps/docs/content/components/card/composition.ts
index 821d5a8bf8..82a0d549f3 100644
--- a/apps/docs/content/components/card/composition.ts
+++ b/apps/docs/content/components/card/composition.ts
@@ -1,53 +1,4 @@
-const App = `import {Card, CardHeader, CardBody, CardFooter, Avatar, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isFollowed, setIsFollowed] = React.useState(false);
-
-  return (
-    <Card className="max-w-[340px]">
-      <CardHeader className="justify-between">
-        <div className="flex gap-5">
-          <Avatar isBordered radius="full" size="md" src="https://nextui.org/avatars/avatar-1.png" />
-          <div className="flex flex-col gap-1 items-start justify-center">
-            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
-            <h5 className="text-small tracking-tight text-default-400">@zoeylang</h5>
-          </div>
-        </div>
-        <Button
-          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
-          color="primary"
-          radius="full"
-          size="sm"
-          variant={isFollowed ? "bordered" : "solid"}
-          onPress={() => setIsFollowed(!isFollowed)}
-        >
-          {isFollowed ? "Unfollow" : "Follow"}
-        </Button>
-      </CardHeader>
-      <CardBody className="px-3 py-0 text-small text-default-400">
-        <p>
-          Frontend developer and UI/UX enthusiast. Join me on this coding adventure!
-        </p>
-        <span className="pt-2">
-          #FrontendWithZoey 
-          <span className="py-2" aria-label="computer" role="img">
-            💻
-          </span>
-        </span>
-      </CardBody>
-      <CardFooter className="gap-3">
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-small">4</p>
-          <p className=" text-default-400 text-small">Following</p>
-        </div>
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-400 text-small">97.1K</p>
-          <p className="text-default-400 text-small">Followers</p>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-}`;
+import App from "./composition.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/cover-image.raw.jsx b/apps/docs/content/components/card/cover-image.raw.jsx
new file mode 100644
index 0000000000..e50eccf2c6
--- /dev/null
+++ b/apps/docs/content/components/card/cover-image.raw.jsx
@@ -0,0 +1,93 @@
+import {Card, CardHeader, CardFooter, Image, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
+      <Card className="col-span-12 sm:col-span-4 h-[300px]">
+        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+          <p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
+          <h4 className="text-white font-medium text-large">Stream the Acme event</h4>
+        </CardHeader>
+        <Image
+          removeWrapper
+          alt="Card background"
+          className="z-0 w-full h-full object-cover"
+          src="https://nextui.org/images/card-example-4.jpeg"
+        />
+      </Card>
+      <Card className="col-span-12 sm:col-span-4 h-[300px]">
+        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+          <p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
+          <h4 className="text-white font-medium text-large">Contribute to the planet</h4>
+        </CardHeader>
+        <Image
+          removeWrapper
+          alt="Card background"
+          className="z-0 w-full h-full object-cover"
+          src="https://nextui.org/images/card-example-3.jpeg"
+        />
+      </Card>
+      <Card className="col-span-12 sm:col-span-4 h-[300px]">
+        <CardHeader className="absolute z-10 top-1 flex-col !items-start">
+          <p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
+          <h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
+        </CardHeader>
+        <Image
+          removeWrapper
+          alt="Card background"
+          className="z-0 w-full h-full object-cover"
+          src="https://nextui.org/images/card-example-2.jpeg"
+        />
+      </Card>
+      <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start">
+          <p className="text-tiny text-white/60 uppercase font-bold">New</p>
+          <h4 className="text-black font-medium text-2xl">Acme camera</h4>
+        </CardHeader>
+        <Image
+          removeWrapper
+          alt="Card example background"
+          className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
+          src="https://nextui.org/images/card-example-6.jpeg"
+        />
+        <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
+          <div>
+            <p className="text-black text-tiny">Available soon.</p>
+            <p className="text-black text-tiny">Get notified.</p>
+          </div>
+          <Button className="text-tiny" color="primary" radius="full" size="sm">
+            Notify Me
+          </Button>
+        </CardFooter>
+      </Card>
+      <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-7">
+        <CardHeader className="absolute z-10 top-1 flex-col items-start">
+          <p className="text-tiny text-white/60 uppercase font-bold">Your day your way</p>
+          <h4 className="text-white/90 font-medium text-xl">Your checklist for better sleep</h4>
+        </CardHeader>
+        <Image
+          removeWrapper
+          alt="Relaxing app background"
+          className="z-0 w-full h-full object-cover"
+          src="https://nextui.org/images/card-example-5.jpeg"
+        />
+        <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
+          <div className="flex flex-grow gap-2 items-center">
+            <Image
+              alt="Breathing app icon"
+              className="rounded-full w-10 h-11 bg-black"
+              src="https://nextui.org/images/breathing-app-icon.jpeg"
+            />
+            <div className="flex flex-col">
+              <p className="text-tiny text-white/60">Breathing App</p>
+              <p className="text-tiny text-white/60">Get a good night&#39;s sleep.</p>
+            </div>
+          </div>
+          <Button radius="full" size="sm">
+            Get App
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/card/cover-image.ts b/apps/docs/content/components/card/cover-image.ts
index 795f955142..80517c8549 100644
--- a/apps/docs/content/components/card/cover-image.ts
+++ b/apps/docs/content/components/card/cover-image.ts
@@ -1,94 +1,4 @@
-const App = `import {Card, CardHeader, CardBody, CardFooter, Image, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="max-w-[900px] gap-2 grid grid-cols-12 grid-rows-2 px-8">
-    <Card className="col-span-12 sm:col-span-4 h-[300px]">
-      <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-tiny text-white/60 uppercase font-bold">What to watch</p>
-        <h4 className="text-white font-medium text-large">Stream the Acme event</h4>
-      </CardHeader>
-      <Image
-        removeWrapper
-        alt="Card background"
-        className="z-0 w-full h-full object-cover"
-        src="https://nextui.org/images/card-example-4.jpeg"
-      />
-    </Card>
-    <Card className="col-span-12 sm:col-span-4 h-[300px]">
-      <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-tiny text-white/60 uppercase font-bold">Plant a tree</p>
-        <h4 className="text-white font-medium text-large">Contribute to the planet</h4>
-      </CardHeader>
-      <Image
-        removeWrapper
-        alt="Card background"
-        className="z-0 w-full h-full object-cover"
-        src="https://nextui.org/images/card-example-3.jpeg"
-      />
-    </Card>
-    <Card className="col-span-12 sm:col-span-4 h-[300px]">
-      <CardHeader className="absolute z-10 top-1 flex-col !items-start">
-        <p className="text-tiny text-white/60 uppercase font-bold">Supercharged</p>
-        <h4 className="text-white font-medium text-large">Creates beauty like a beast</h4>
-      </CardHeader>
-      <Image
-        removeWrapper
-        alt="Card background"
-        className="z-0 w-full h-full object-cover"
-        src="https://nextui.org/images/card-example-2.jpeg"
-      />
-    </Card>
-    <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-5">
-      <CardHeader className="absolute z-10 top-1 flex-col items-start">
-        <p className="text-tiny text-white/60 uppercase font-bold">New</p>
-        <h4 className="text-black font-medium text-2xl">Acme camera</h4>
-      </CardHeader>
-      <Image
-        removeWrapper
-        alt="Card example background"
-        className="z-0 w-full h-full scale-125 -translate-y-6 object-cover"
-        src="https://nextui.org/images/card-example-6.jpeg"
-      />
-      <CardFooter className="absolute bg-white/30 bottom-0 border-t-1 border-zinc-100/50 z-10 justify-between">
-        <div>
-          <p className="text-black text-tiny">Available soon.</p>
-          <p className="text-black text-tiny">Get notified.</p>
-        </div>
-        <Button className="text-tiny" color="primary" radius="full" size="sm">
-          Notify Me
-        </Button>
-      </CardFooter>
-    </Card>
-    <Card isFooterBlurred className="w-full h-[300px] col-span-12 sm:col-span-7">
-      <CardHeader className="absolute z-10 top-1 flex-col items-start">
-        <p className="text-tiny text-white/60 uppercase font-bold">Your day your way</p>
-        <h4 className="text-white/90 font-medium text-xl">Your checklist for better sleep</h4>
-      </CardHeader>
-      <Image
-        removeWrapper
-        alt="Relaxing app background"
-        className="z-0 w-full h-full object-cover"
-        src="https://nextui.org/images/card-example-5.jpeg"
-      />
-      <CardFooter className="absolute bg-black/40 bottom-0 z-10 border-t-1 border-default-600 dark:border-default-100">
-        <div className="flex flex-grow gap-2 items-center">
-          <Image
-            alt="Breathing app icon"
-            className="rounded-full w-10 h-11 bg-black"
-            src="https://nextui.org/images/breathing-app-icon.jpeg"
-          />
-          <div className="flex flex-col">
-            <p className="text-tiny text-white/60">Breathing App</p>
-            <p className="text-tiny text-white/60">Get a good night's sleep.</p>
-          </div>
-        </div>
-        <Button radius="full" size="sm">Get App</Button>
-      </CardFooter>
-    </Card>
-  </div>
-  );
-}`;
+import App from "./cover-image.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/divider.raw.jsx b/apps/docs/content/components/card/divider.raw.jsx
new file mode 100644
index 0000000000..09c8a0d90a
--- /dev/null
+++ b/apps/docs/content/components/card/divider.raw.jsx
@@ -0,0 +1,31 @@
+import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="max-w-[400px]">
+      <CardHeader className="flex gap-3">
+        <Image
+          alt="nextui logo"
+          height={40}
+          radius="sm"
+          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
+          width={40}
+        />
+        <div className="flex flex-col">
+          <p className="text-md">NextUI</p>
+          <p className="text-small text-default-500">nextui.org</p>
+        </div>
+      </CardHeader>
+      <Divider />
+      <CardBody>
+        <p>Make beautiful websites regardless of your design experience.</p>
+      </CardBody>
+      <Divider />
+      <CardFooter>
+        <Link isExternal showAnchorIcon href="https://github.com/nextui-org/nextui">
+          Visit source code on GitHub.
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/divider.ts b/apps/docs/content/components/card/divider.ts
index b482a6acb0..b6500e8d63 100644
--- a/apps/docs/content/components/card/divider.ts
+++ b/apps/docs/content/components/card/divider.ts
@@ -1,38 +1,4 @@
-const App = `import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card className="max-w-[400px]">
-      <CardHeader className="flex gap-3">
-        <Image
-          alt="nextui logo"
-          height={40}
-          radius="sm"
-          src="https://avatars.githubusercontent.com/u/86160567?s=200&v=4"
-          width={40}
-        />
-        <div className="flex flex-col">
-          <p className="text-md">NextUI</p>
-          <p className="text-small text-default-500">nextui.org</p>
-        </div>
-      </CardHeader>
-      <Divider/>
-      <CardBody>
-        <p>Make beautiful websites regardless of your design experience.</p>
-      </CardBody>
-      <Divider/>
-      <CardFooter>
-        <Link
-          isExternal
-          showAnchorIcon
-          href="https://github.com/nextui-org/nextui"
-        >
-          Visit source code on GitHub.
-        </Link>
-      </CardFooter>
-    </Card>
-  );
-}`;
+import App from "./divider.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/image.raw.jsx b/apps/docs/content/components/card/image.raw.jsx
new file mode 100644
index 0000000000..54be0bbb40
--- /dev/null
+++ b/apps/docs/content/components/card/image.raw.jsx
@@ -0,0 +1,21 @@
+import {Card, CardHeader, CardBody, Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="py-4">
+      <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
+        <p className="text-tiny uppercase font-bold">Daily Mix</p>
+        <small className="text-default-500">12 Tracks</small>
+        <h4 className="font-bold text-large">Frontend Radio</h4>
+      </CardHeader>
+      <CardBody className="overflow-visible py-2">
+        <Image
+          alt="Card background"
+          className="object-cover rounded-xl"
+          src="https://nextui.org/images/hero-card-complete.jpeg"
+          width={270}
+        />
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/image.ts b/apps/docs/content/components/card/image.ts
index 08e2d16c15..30e67acb4f 100644
--- a/apps/docs/content/components/card/image.ts
+++ b/apps/docs/content/components/card/image.ts
@@ -1,24 +1,4 @@
-const App = `import {Card, CardHeader, CardBody, Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card className="py-4">
-      <CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
-        <p className="text-tiny uppercase font-bold">Daily Mix</p>
-        <small className="text-default-500">12 Tracks</small>
-        <h4 className="font-bold text-large">Frontend Radio</h4>
-      </CardHeader>
-      <CardBody className="overflow-visible py-2">
-        <Image
-          alt="Card background"
-          className="object-cover rounded-xl"
-          src="https://nextui.org/images/hero-card-complete.jpeg"
-          width={270}
-        />
-      </CardBody>
-    </Card>
-  );
-}`;
+import App from "./image.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/primary-action.raw.jsx b/apps/docs/content/components/card/primary-action.raw.jsx
new file mode 100644
index 0000000000..ce62f8b388
--- /dev/null
+++ b/apps/docs/content/components/card/primary-action.raw.jsx
@@ -0,0 +1,70 @@
+import {Card, CardBody, CardFooter, Image} from "@nextui-org/react";
+
+export default function App() {
+  const list = [
+    {
+      title: "Orange",
+      img: "/images/fruit-1.jpeg",
+      price: "$5.50",
+    },
+    {
+      title: "Tangerine",
+      img: "/images/fruit-2.jpeg",
+      price: "$3.00",
+    },
+    {
+      title: "Raspberry",
+      img: "/images/fruit-3.jpeg",
+      price: "$10.00",
+    },
+    {
+      title: "Lemon",
+      img: "/images/fruit-4.jpeg",
+      price: "$5.30",
+    },
+    {
+      title: "Avocado",
+      img: "/images/fruit-5.jpeg",
+      price: "$15.70",
+    },
+    {
+      title: "Lemon 2",
+      img: "/images/fruit-6.jpeg",
+      price: "$8.00",
+    },
+    {
+      title: "Banana",
+      img: "/images/fruit-7.jpeg",
+      price: "$7.50",
+    },
+    {
+      title: "Watermelon",
+      img: "/images/fruit-8.jpeg",
+      price: "$12.20",
+    },
+  ];
+
+  return (
+    <div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
+      {list.map((item, index) => (
+        /* eslint-disable no-console */
+        <Card key={index} isPressable shadow="sm" onPress={() => console.log("item pressed")}>
+          <CardBody className="overflow-visible p-0">
+            <Image
+              alt={item.title}
+              className="w-full object-cover h-[140px]"
+              radius="lg"
+              shadow="sm"
+              src={item.img}
+              width="100%"
+            />
+          </CardBody>
+          <CardFooter className="text-small justify-between">
+            <b>{item.title}</b>
+            <p className="text-default-500">{item.price}</p>
+          </CardFooter>
+        </Card>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/card/primary-action.ts b/apps/docs/content/components/card/primary-action.ts
index 0d36aef25a..78338d94af 100644
--- a/apps/docs/content/components/card/primary-action.ts
+++ b/apps/docs/content/components/card/primary-action.ts
@@ -1,72 +1,4 @@
-const App = `import {Card, CardBody, CardFooter, Image} from "@nextui-org/react";
-
-export default function App() {
-  const list = [
-    {
-      title: "Orange",
-      img: "/images/fruit-1.jpeg",
-      price: "$5.50",
-    },
-    {
-      title: "Tangerine",
-      img: "/images/fruit-2.jpeg",
-      price: "$3.00",
-    },
-    {
-      title: "Raspberry",
-      img: "/images/fruit-3.jpeg",
-      price: "$10.00",
-    },
-    {
-      title: "Lemon",
-      img: "/images/fruit-4.jpeg",
-      price: "$5.30",
-    },
-    {
-      title: "Avocado",
-      img: "/images/fruit-5.jpeg",
-      price: "$15.70",
-    },
-    {
-      title: "Lemon 2",
-      img: "/images/fruit-6.jpeg",
-      price: "$8.00",
-    },
-    {
-      title: "Banana",
-      img: "/images/fruit-7.jpeg",
-      price: "$7.50",
-    },
-    {
-      title: "Watermelon",
-      img: "/images/fruit-8.jpeg",
-      price: "$12.20",
-    },
-  ];
-
-  return (
-    <div className="gap-2 grid grid-cols-2 sm:grid-cols-4">
-      {list.map((item, index) => (
-        <Card shadow="sm" key={index} isPressable onPress={() => console.log("item pressed")}>
-          <CardBody className="overflow-visible p-0">
-            <Image
-              shadow="sm"
-              radius="lg"
-              width="100%"
-              alt={item.title}
-              className="w-full object-cover h-[140px]"
-              src={item.img}
-            />
-          </CardBody>
-          <CardFooter className="text-small justify-between">
-            <b>{item.title}</b>
-            <p className="text-default-500">{item.price}</p>
-          </CardFooter>
-        </Card>
-      ))}
-    </div>
-  );
-}`;
+import App from "./primary-action.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/card/usage.raw.jsx b/apps/docs/content/components/card/usage.raw.jsx
new file mode 100644
index 0000000000..34167f151a
--- /dev/null
+++ b/apps/docs/content/components/card/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card>
+      <CardBody>
+        <p>Make beautiful websites regardless of your design experience.</p>
+      </CardBody>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/card/usage.ts b/apps/docs/content/components/card/usage.ts
index 5ad425b264..1118304c37 100644
--- a/apps/docs/content/components/card/usage.ts
+++ b/apps/docs/content/components/card/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Card, CardBody} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card>
-      <CardBody>
-        <p>Make beautiful websites regardless of your design experience.</p>
-      </CardBody>
-    </Card>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox-group/controlled.raw.jsx b/apps/docs/content/components/checkbox-group/controlled.raw.jsx
new file mode 100644
index 0000000000..c316983534
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/controlled.raw.jsx
@@ -0,0 +1,21 @@
+import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <CheckboxGroup
+        color="warning"
+        label="Select cities"
+        value={selected}
+        onValueChange={setSelected}
+      >
+        <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+        <Checkbox value="sydney">Sydney</Checkbox>
+        <Checkbox value="san-francisco">San Francisco</Checkbox>
+      </CheckboxGroup>
+      <p className="text-default-500 text-small">Selected: {selected.join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/controlled.ts b/apps/docs/content/components/checkbox-group/controlled.ts
index 708b214cbb..2c3f0cacb4 100644
--- a/apps/docs/content/components/checkbox-group/controlled.ts
+++ b/apps/docs/content/components/checkbox-group/controlled.ts
@@ -1,24 +1,4 @@
-const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState(["buenos-aires", "sydney"]);
-
-  return (
-    <div className="flex flex-col gap-3">
-      <CheckboxGroup
-        label="Select cities"
-        color="warning"
-        value={selected}
-        onValueChange={setSelected}
-      >
-        <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-        <Checkbox value="sydney">Sydney</Checkbox>
-        <Checkbox value="san-francisco">San Francisco</Checkbox>
-      </CheckboxGroup>
-      <p className="text-default-500 text-small">Selected: {selected.join(", ")}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
new file mode 100644
index 0000000000..fe4324f756
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
@@ -0,0 +1,94 @@
+import {useCheckbox, CheckboxGroup, Chip, VisuallyHidden, tv} from "@nextui-org/react";
+
+const checkbox = tv({
+  slots: {
+    base: "border-default hover:bg-default-200",
+    content: "text-default-500",
+  },
+  variants: {
+    isSelected: {
+      true: {
+        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
+        content: "text-primary-foreground pl-1",
+      },
+    },
+    isFocusVisible: {
+      true: {
+        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+      },
+    },
+  },
+});
+
+export const CustomCheckbox = (props) => {
+  const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
+    useCheckbox({
+      ...props,
+    });
+
+  const styles = checkbox({isSelected, isFocusVisible});
+
+  return (
+    <label {...getBaseProps()}>
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <Chip
+        classNames={{
+          base: styles.base(),
+          content: styles.content(),
+        }}
+        color="primary"
+        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
+        variant="faded"
+        {...getLabelProps()}
+      >
+        {children ? children : isSelected ? "Enabled" : "Disabled"}
+      </Chip>
+    </label>
+  );
+};
+
+export const CheckIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [groupSelected, setGroupSelected] = React.useState([]);
+
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <CheckboxGroup
+        className="gap-1"
+        label="Select amenities"
+        orientation="horizontal"
+        value={groupSelected}
+        onChange={setGroupSelected}
+      >
+        <CustomCheckbox value="wifi">Wifi</CustomCheckbox>
+        <CustomCheckbox value="tv">TV</CustomCheckbox>
+        <CustomCheckbox value="kitchen">Kitchen</CustomCheckbox>
+        <CustomCheckbox value="parking">Parking</CustomCheckbox>
+        <CustomCheckbox value="pool">Pool</CustomCheckbox>
+        <CustomCheckbox value="gym">Gym</CustomCheckbox>
+      </CheckboxGroup>
+      <p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.ts b/apps/docs/content/components/checkbox-group/custom-implementation.ts
index 7a50848086..cf79f4d84e 100644
--- a/apps/docs/content/components/checkbox-group/custom-implementation.ts
+++ b/apps/docs/content/components/checkbox-group/custom-implementation.ts
@@ -1,113 +1,7 @@
-const CheckIcon = `export const CheckIcon = (props) =>
-  (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );`;
-
-const CustomCheckbox = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
-import {CheckIcon} from './CheckIcon.jsx'
-
-const checkbox = tv({
-  slots: {
-    base: "border-default hover:bg-default-200",
-    content: "text-default-500"
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
-        content: "text-primary-foreground pl-1"
-      }
-    },
-    isFocusVisible: {
-      true: { 
-        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
-      }
-    }
-  }
-})
-
-export const CustomCheckbox = (props) => {
-  const {
-    children,
-    isSelected,
-    isFocusVisible,
-    getBaseProps,
-    getLabelProps,
-    getInputProps,
-  } = useCheckbox({
-    ...props
-  })
-
-  const styles = checkbox({ isSelected, isFocusVisible })
-
-  return (
-    <label {...getBaseProps()}>
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <Chip
-        classNames={{
-          base: styles.base(),
-          content: styles.content(),
-        }}
-        color="primary"
-        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
-        variant="faded"
-        {...getLabelProps()}
-      >
-        {children ? children : isSelected ? "Enabled" : "Disabled"}
-      </Chip>
-    </label>
-  );
-}`;
-
-const App = `import {CheckboxGroup} from "@nextui-org/react";
-import {CustomCheckbox} from "./CustomCheckbox";
-
-export default function App() {
-  const [groupSelected, setGroupSelected] = React.useState([]);
-
-  return (
-    <div className="flex flex-col gap-1 w-full">
-      <CheckboxGroup
-        className="gap-1"
-        label="Select amenities"
-        orientation="horizontal"
-        value={groupSelected}
-        onChange={setGroupSelected}
-      >
-        <CustomCheckbox value="wifi">Wifi</CustomCheckbox>
-        <CustomCheckbox value="tv">TV</CustomCheckbox>
-        <CustomCheckbox value="kitchen">Kitchen</CustomCheckbox>
-        <CustomCheckbox value="parking">Parking</CustomCheckbox>
-        <CustomCheckbox value="pool">Pool</CustomCheckbox>
-        <CustomCheckbox value="gym">Gym</CustomCheckbox>
-      </CheckboxGroup>
-      <p className="mt-4 ml-1 text-default-500">
-        Selected: {groupSelected.join(", ")}
-      </p>
-    </div>
-  );
-}`;
+import App from "./custom-implementation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CustomCheckbox.jsx": CustomCheckbox,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx
new file mode 100644
index 0000000000..94ae0969ba
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/custom-styles.raw.jsx
@@ -0,0 +1,104 @@
+import {Checkbox, CheckboxGroup, Link, User, Chip, cn} from "@nextui-org/react";
+
+export const CustomCheckbox = ({user, statusColor, value}) => {
+  return (
+    <Checkbox
+      aria-label={user.name}
+      classNames={{
+        base: cn(
+          "inline-flex max-w-md w-full bg-content1 m-0",
+          "hover:bg-content2 items-center justify-start",
+          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        label: "w-full",
+      }}
+      value={value}
+    >
+      <div className="w-full flex justify-between gap-2">
+        <User
+          avatarProps={{size: "md", src: user.avatar}}
+          description={
+            <Link isExternal href={user.url} size="sm">
+              @{user.username}
+            </Link>
+          }
+          name={user.name}
+        />
+        <div className="flex flex-col items-end gap-1">
+          <span className="text-tiny text-default-500">{user.role}</span>
+          <Chip color={statusColor} size="sm" variant="flat">
+            {user.status}
+          </Chip>
+        </div>
+      </div>
+    </Checkbox>
+  );
+};
+
+export default function App() {
+  const [groupSelected, setGroupSelected] = React.useState([]);
+
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <CheckboxGroup
+        classNames={{
+          base: "w-full",
+        }}
+        label="Select employees"
+        value={groupSelected}
+        onChange={setGroupSelected}
+      >
+        <CustomCheckbox
+          statusColor="secondary"
+          user={{
+            name: "Junior Garcia",
+            avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
+            username: "jrgarciadev",
+            url: "https://x.com/jrgarciadev",
+            role: "Software Developer",
+            status: "Active",
+          }}
+          value="junior"
+        />
+        <CustomCheckbox
+          statusColor="warning"
+          user={{
+            name: "John Doe",
+            avatar: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
+            username: "johndoe",
+            url: "#",
+            role: "Product Designer",
+            status: "Vacation",
+          }}
+          value="johndoe"
+        />
+        <CustomCheckbox
+          statusColor="danger"
+          user={{
+            name: "Zoey Lang",
+            avatar: "https://i.pravatar.cc/300?u=a042581f4e29026704d",
+            username: "zoeylang",
+            url: "#",
+            role: "Technical Writer",
+            status: "Out of office",
+          }}
+          value="zoeylang"
+        />
+        <CustomCheckbox
+          statusColor="secondary"
+          user={{
+            name: "William Howard",
+            avatar: "https://i.pravatar.cc/300?u=a048581f4e29026701d",
+            username: "william",
+            url: "#",
+            role: "Sales Manager",
+            status: "Active",
+          }}
+          value="william"
+        />
+      </CheckboxGroup>
+      <p className="mt-4 ml-1 text-default-500">Selected: {groupSelected.join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/custom-styles.ts b/apps/docs/content/components/checkbox-group/custom-styles.ts
index 51485619e0..da3ea9093a 100644
--- a/apps/docs/content/components/checkbox-group/custom-styles.ts
+++ b/apps/docs/content/components/checkbox-group/custom-styles.ts
@@ -1,116 +1,7 @@
-const CustomCheckbox = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
-
-export const CustomCheckbox = ({ user, statusColor, value }) => {
-  return (
-    <Checkbox
-      aria-label={user.name}
-      classNames={{
-        base: cn(
-          "inline-flex max-w-md w-full bg-content1 m-0",
-          "hover:bg-content2 items-center justify-start",
-          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary"
-        ),
-        label: "w-full",
-      }}
-      value={value}
-    >
-      <div className="w-full flex justify-between gap-2">
-        <User
-          avatarProps={{ size: "md", src: user.avatar }}
-          description={
-            <Link isExternal href={user.url} size="sm">
-              @{user.username}
-            </Link>
-          }
-          name={user.name}
-        />
-        <div className="flex flex-col items-end gap-1">
-          <span className="text-tiny text-default-500">{user.role}</span>
-          <Chip color={statusColor} size="sm" variant="flat">
-            {user.status}
-          </Chip>
-        </div>
-      </div>
-    </Checkbox>
-  );
-};`;
-
-const App = `import {CheckboxGroup} from "@nextui-org/react";
-import {CustomCheckbox} from "./CustomCheckbox";
-
-export default function App() {
-  const [groupSelected, setGroupSelected] = React.useState([]);
-
-  return (
-    <div className="flex flex-col gap-1 w-full">
-      <CheckboxGroup
-        label="Select employees"
-        value={groupSelected}
-        onChange={setGroupSelected}
-        classNames={{
-          base: "w-full"
-        }}
-      >
-        <CustomCheckbox
-          value="junior"
-          user={{
-            name: "Junior Garcia",
-            avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
-            username: "jrgarciadev",
-            url: "https://twitter.com/jrgarciadev",
-            role: "Software Developer",
-            status: "Active",
-          }}
-          statusColor="secondary"
-        />
-        <CustomCheckbox
-          value="johndoe"
-          user={{
-            name: "John Doe",
-            avatar: "https://i.pravatar.cc/300?u=a042581f4e29026707d",
-            username: "johndoe",
-            url: "#",
-            role: "Product Designer",
-            status: "Vacation",
-          }}
-          statusColor="warning"
-        />
-        <CustomCheckbox
-          value="zoeylang"
-          user={{
-            name: "Zoey Lang",
-            avatar: "https://i.pravatar.cc/300?u=a042581f4e29026704d",
-            username: "zoeylang",
-            url: "#",
-            role: "Technical Writer",
-            status: "Out of office",
-          }}
-          statusColor="danger"
-        />
-        <CustomCheckbox
-          value="william"
-          user={{
-            name: "William Howard",
-            avatar: "https://i.pravatar.cc/300?u=a048581f4e29026701d",
-            username: "william",
-            url: "#",
-            role: "Sales Manager",
-            status: "Active",
-          }}
-          statusColor="secondary"
-        />
-      </CheckboxGroup>
-      <p className="mt-4 ml-1 text-default-500">
-        Selected: {groupSelected.join(", ")}
-      </p>
-    </div>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CustomCheckbox.jsx": CustomCheckbox,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox-group/disabled.raw.jsx b/apps/docs/content/components/checkbox-group/disabled.raw.jsx
new file mode 100644
index 0000000000..9f71a07c1f
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CheckboxGroup isDisabled defaultValue={["buenos-aires", "london"]} label="Select cities">
+      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+      <Checkbox value="sydney">Sydney</Checkbox>
+      <Checkbox value="san-francisco">San Francisco</Checkbox>
+      <Checkbox value="london">London</Checkbox>
+      <Checkbox value="tokyo">Tokyo</Checkbox>
+    </CheckboxGroup>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/disabled.ts b/apps/docs/content/components/checkbox-group/disabled.ts
index 6ae54731a6..1a215cc91f 100644
--- a/apps/docs/content/components/checkbox-group/disabled.ts
+++ b/apps/docs/content/components/checkbox-group/disabled.ts
@@ -1,20 +1,4 @@
-const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CheckboxGroup
-      isDisabled
-      label="Select cities"
-      defaultValue={["buenos-aires", "london"]}
-    >
-      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-      <Checkbox value="sydney">Sydney</Checkbox>
-      <Checkbox value="san-francisco">San Francisco</Checkbox>
-      <Checkbox value="london">London</Checkbox>
-      <Checkbox value="tokyo">Tokyo</Checkbox>
-    </CheckboxGroup>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox-group/horizontal.raw.jsx b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx
new file mode 100644
index 0000000000..4555eb346f
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/horizontal.raw.jsx
@@ -0,0 +1,18 @@
+import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CheckboxGroup
+      color="secondary"
+      defaultValue={["buenos-aires", "san-francisco"]}
+      label="Select cities"
+      orientation="horizontal"
+    >
+      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+      <Checkbox value="sydney">Sydney</Checkbox>
+      <Checkbox value="san-francisco">San Francisco</Checkbox>
+      <Checkbox value="london">London</Checkbox>
+      <Checkbox value="tokyo">Tokyo</Checkbox>
+    </CheckboxGroup>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/horizontal.ts b/apps/docs/content/components/checkbox-group/horizontal.ts
index b5083f40af..60be4b4077 100644
--- a/apps/docs/content/components/checkbox-group/horizontal.ts
+++ b/apps/docs/content/components/checkbox-group/horizontal.ts
@@ -1,21 +1,4 @@
-const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CheckboxGroup
-      label="Select cities"
-      orientation="horizontal"
-      color="secondary"
-      defaultValue={["buenos-aires", "san-francisco"]}
-    >
-      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-      <Checkbox value="sydney">Sydney</Checkbox>
-      <Checkbox value="san-francisco">San Francisco</Checkbox>
-      <Checkbox value="london">London</Checkbox>
-      <Checkbox value="tokyo">Tokyo</Checkbox>
-    </CheckboxGroup>
-  );
-}`;
+import App from "./horizontal.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox-group/invalid.raw.jsx b/apps/docs/content/components/checkbox-group/invalid.raw.jsx
new file mode 100644
index 0000000000..a587998c56
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/invalid.raw.jsx
@@ -0,0 +1,23 @@
+import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  const [isInvalid, setIsInvalid] = React.useState(true);
+
+  return (
+    <CheckboxGroup
+      isRequired
+      description="Select the cities you want to visit"
+      isInvalid={isInvalid}
+      label="Select cities"
+      onValueChange={(value) => {
+        setIsInvalid(value.length < 1);
+      }}
+    >
+      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+      <Checkbox value="sydney">Sydney</Checkbox>
+      <Checkbox value="san-francisco">San Francisco</Checkbox>
+      <Checkbox value="london">London</Checkbox>
+      <Checkbox value="tokyo">Tokyo</Checkbox>
+    </CheckboxGroup>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/invalid.ts b/apps/docs/content/components/checkbox-group/invalid.ts
index 60dffaff8f..a02a8fe9c1 100644
--- a/apps/docs/content/components/checkbox-group/invalid.ts
+++ b/apps/docs/content/components/checkbox-group/invalid.ts
@@ -1,26 +1,4 @@
-const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  const [isInvalid, setIsInvalid] = React.useState(true);
-
-  return (
-    <CheckboxGroup
-      isRequired
-      description="Select the cities you want to visit"
-      isInvalid={isInvalid}
-      label="Select cities"
-      onValueChange={(value) => {
-        setIsInvalid(value.length < 1);
-      }}
-    >
-      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-      <Checkbox value="sydney">Sydney</Checkbox>
-      <Checkbox value="san-francisco">San Francisco</Checkbox>
-      <Checkbox value="london">London</Checkbox>
-      <Checkbox value="tokyo">Tokyo</Checkbox>
-    </CheckboxGroup>
-  );
-}`;
+import App from "./invalid.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox-group/usage.raw.jsx b/apps/docs/content/components/checkbox-group/usage.raw.jsx
new file mode 100644
index 0000000000..7909467770
--- /dev/null
+++ b/apps/docs/content/components/checkbox-group/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {CheckboxGroup, Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CheckboxGroup defaultValue={["buenos-aires", "london"]} label="Select cities">
+      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
+      <Checkbox value="sydney">Sydney</Checkbox>
+      <Checkbox value="san-francisco">San Francisco</Checkbox>
+      <Checkbox value="london">London</Checkbox>
+      <Checkbox value="tokyo">Tokyo</Checkbox>
+    </CheckboxGroup>
+  );
+}
diff --git a/apps/docs/content/components/checkbox-group/usage.ts b/apps/docs/content/components/checkbox-group/usage.ts
index 8867a1d86e..1118304c37 100644
--- a/apps/docs/content/components/checkbox-group/usage.ts
+++ b/apps/docs/content/components/checkbox-group/usage.ts
@@ -1,19 +1,4 @@
-const App = `import {CheckboxGroup, Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CheckboxGroup
-      label="Select cities"
-      defaultValue={["buenos-aires", "london"]}
-    >
-      <Checkbox value="buenos-aires">Buenos Aires</Checkbox>
-      <Checkbox value="sydney">Sydney</Checkbox>
-      <Checkbox value="san-francisco">San Francisco</Checkbox>
-      <Checkbox value="london">London</Checkbox>
-      <Checkbox value="tokyo">Tokyo</Checkbox>
-    </CheckboxGroup>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/colors.raw.jsx b/apps/docs/content/components/checkbox/colors.raw.jsx
new file mode 100644
index 0000000000..1444356a3b
--- /dev/null
+++ b/apps/docs/content/components/checkbox/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected color="default">
+        Default
+      </Checkbox>
+      <Checkbox defaultSelected color="primary">
+        Primary
+      </Checkbox>
+      <Checkbox defaultSelected color="secondary">
+        Secondary
+      </Checkbox>
+      <Checkbox defaultSelected color="success">
+        Success
+      </Checkbox>
+      <Checkbox defaultSelected color="warning">
+        Warning
+      </Checkbox>
+      <Checkbox defaultSelected color="danger">
+        Danger
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/colors.ts b/apps/docs/content/components/checkbox/colors.ts
index a7d318f734..d5bef810aa 100644
--- a/apps/docs/content/components/checkbox/colors.ts
+++ b/apps/docs/content/components/checkbox/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected color="default">Default</Checkbox>
-      <Checkbox defaultSelected color="primary">Primary</Checkbox>
-      <Checkbox defaultSelected color="secondary">Secondary</Checkbox>
-      <Checkbox defaultSelected color="success">Success</Checkbox>
-      <Checkbox defaultSelected color="warning">Warning</Checkbox>
-      <Checkbox defaultSelected color="danger">Danger</Checkbox>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/controlled.raw.jsx b/apps/docs/content/components/checkbox/controlled.raw.jsx
new file mode 100644
index 0000000000..4d81052b0e
--- /dev/null
+++ b/apps/docs/content/components/checkbox/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
+        Subscribe (controlled)
+      </Checkbox>
+      <p className="text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/controlled.ts b/apps/docs/content/components/checkbox/controlled.ts
index 61c09eb3ae..2c3f0cacb4 100644
--- a/apps/docs/content/components/checkbox/controlled.ts
+++ b/apps/docs/content/components/checkbox/controlled.ts
@@ -1,19 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Checkbox isSelected={isSelected} onValueChange={setIsSelected}>
-        Subscribe (controlled)
-      </Checkbox>
-      <p className="text-default-500">
-        Selected: {isSelected ? "true" : "false"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx
new file mode 100644
index 0000000000..bea37878e1
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-check-icon.raw.jsx
@@ -0,0 +1,68 @@
+import {Checkbox} from "@nextui-org/react";
+
+export const HeartIcon = ({size, height, width, ...props}) => {
+  // avoid passing non-DOM attributes to svg
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
+  return (
+    <svg
+      fill="fill"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...otherProps}
+    >
+      <path
+        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PlusIcon = ({size, height, width, ...props}) => {
+  // avoid passing non-DOM attributes to svg
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...otherProps}
+    >
+      <path
+        d="M6 12H18"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+      <path
+        d="M12 18V6"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected icon={<HeartIcon />}>
+        Option
+      </Checkbox>
+      <Checkbox defaultSelected color="warning" icon={<PlusIcon />}>
+        Option
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-check-icon.ts b/apps/docs/content/components/checkbox/custom-check-icon.ts
index 5bd83fa324..6f2bd3d139 100644
--- a/apps/docs/content/components/checkbox/custom-check-icon.ts
+++ b/apps/docs/content/components/checkbox/custom-check-icon.ts
@@ -1,73 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
-  // avoid passing non-DOM attributes to svg
-  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
-
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill='fill'
-      xmlns="http://www.w3.org/2000/svg"
-      {...otherProps}
-    >
-      <path
-        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
-        fill='currentColor'
-      />
-    </svg>
-  );
-};
-`;
-
-const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
-  // avoid passing non-DOM attributes to svg
-  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
-
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...otherProps}
-    >
-      <path
-        d="M6 12H18"
-        stroke="currentColor"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M12 18V6"
-        stroke="currentColor"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Checkbox} from "@nextui-org/react";
-import {HeartIcon} from './HeartIcon.jsx';  
-import {PlusIcon} from './PlusIcon.jsx';
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected icon={<HeartIcon/>}>Option</Checkbox>
-      <Checkbox defaultSelected icon={<PlusIcon/>} color="warning">Option</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./custom-check-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HeartIcon.jsx": HeartIcon,
-  "/PlusIcon.jsx": PlusIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
new file mode 100644
index 0000000000..0d7e501710
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
@@ -0,0 +1,70 @@
+import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
+
+export const CheckIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+};
+
+const checkbox = tv({
+  slots: {
+    base: "border-default hover:bg-default-200",
+    content: "text-default-500",
+  },
+  variants: {
+    isSelected: {
+      true: {
+        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
+        content: "text-primary-foreground pl-1",
+      },
+    },
+    isFocusVisible: {
+      true: {
+        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
+      },
+    },
+  },
+});
+
+export default function App() {
+  const {children, isSelected, isFocusVisible, getBaseProps, getLabelProps, getInputProps} =
+    useCheckbox({
+      defaultSelected: true,
+    });
+
+  const styles = checkbox({isSelected, isFocusVisible});
+
+  return (
+    <label {...getBaseProps()}>
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <Chip
+        classNames={{
+          base: styles.base(),
+          content: styles.content(),
+        }}
+        color="primary"
+        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
+        variant="faded"
+        {...getLabelProps()}
+      >
+        {children ? children : isSelected ? "Enabled" : "Disabled"}
+      </Chip>
+    </label>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-implementation.ts b/apps/docs/content/components/checkbox/custom-implementation.ts
index 6c73006698..cf79f4d84e 100644
--- a/apps/docs/content/components/checkbox/custom-implementation.ts
+++ b/apps/docs/content/components/checkbox/custom-implementation.ts
@@ -1,83 +1,7 @@
-const CheckIcon = `export const CheckIcon = (props) =>
-  (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={2}
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );`;
-
-const App = `import {useCheckbox, Chip, VisuallyHidden, tv} from "@nextui-org/react";
-import {CheckIcon} from './CheckIcon.jsx'
-
-const checkbox = tv({
-  slots: {
-    base: "border-default hover:bg-default-200",
-    content: "text-default-500"
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "border-primary bg-primary hover:bg-primary-500 hover:border-primary-500",
-        content: "text-primary-foreground pl-1"
-      }
-    },
-    isFocusVisible: {
-      true: { 
-        base: "outline-none ring-2 ring-focus ring-offset-2 ring-offset-background",
-      }
-    }
-  }
-})
-
-export default function App() {
-  const {
-    children,
-    isSelected,
-    isFocusVisible,
-    getBaseProps,
-    getLabelProps,
-    getInputProps,
-  } = useCheckbox({
-    defaultSelected: true,
-  })
-
-  const styles = checkbox({ isSelected, isFocusVisible })
-
-  return (
-    <label {...getBaseProps()}>
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <Chip
-        classNames={{
-          base: styles.base(),
-          content: styles.content(),
-        }}
-        color="primary"
-        startContent={isSelected ? <CheckIcon className="ml-1" /> : null}
-        variant="faded"
-        {...getLabelProps()}
-      >
-        {children ? children : isSelected ? "Enabled" : "Disabled"}
-      </Chip>
-    </label>
-  );
-}`;
+import App from "./custom-implementation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "./CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/checkbox/custom-styles.raw.jsx b/apps/docs/content/components/checkbox/custom-styles.raw.jsx
new file mode 100644
index 0000000000..d3e98200e4
--- /dev/null
+++ b/apps/docs/content/components/checkbox/custom-styles.raw.jsx
@@ -0,0 +1,49 @@
+import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  const user = {
+    name: "Junior Garcia",
+    avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
+    username: "jrgarciadev",
+    url: "https://x.com/jrgarciadev",
+    role: "Software Developer",
+    status: "Active",
+  };
+
+  return (
+    <Checkbox
+      aria-label={user.name}
+      classNames={{
+        base: cn(
+          "inline-flex w-full max-w-md bg-content1",
+          "hover:bg-content2 items-center justify-start",
+          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        label: "w-full",
+      }}
+      isSelected={isSelected}
+      onValueChange={setIsSelected}
+    >
+      <div className="w-full flex justify-between gap-2">
+        <User
+          avatarProps={{size: "md", src: user.avatar}}
+          description={
+            <Link isExternal href={user.url} size="sm">
+              @{user.username}
+            </Link>
+          }
+          name={user.name}
+        />
+        <div className="flex flex-col items-end gap-1">
+          <span className="text-tiny text-default-500">{user.role}</span>
+          <Chip color="success" size="sm" variant="flat">
+            {user.status}
+          </Chip>
+        </div>
+      </div>
+    </Checkbox>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/custom-styles.ts b/apps/docs/content/components/checkbox/custom-styles.ts
index d833e77f21..da3ea9093a 100644
--- a/apps/docs/content/components/checkbox/custom-styles.ts
+++ b/apps/docs/content/components/checkbox/custom-styles.ts
@@ -1,52 +1,4 @@
-const App = `import {Checkbox, Link, User, Chip, cn} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  const user = {
-    name: "Junior Garcia",
-    avatar: "https://avatars.githubusercontent.com/u/30373425?v=4",
-    username: "jrgarciadev",
-    url: "https://twitter.com/jrgarciadev",
-    role: "Software Developer",
-    status: "Active",
-  }
-
-  return (
-    <Checkbox       
-      aria-label={user.name}
-      classNames={{
-        base: cn(
-          "inline-flex w-full max-w-md bg-content1",
-          "hover:bg-content2 items-center justify-start",
-          "cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-        ),
-        label: "w-full",
-      }}
-      isSelected={isSelected}
-      onValueChange={setIsSelected}
-    >
-      <div className="w-full flex justify-between gap-2">
-        <User
-          avatarProps={{size: "md", src: user.avatar}}
-          description={
-            <Link isExternal href={user.url} size="sm">
-              @{user.username}
-            </Link>
-          }
-          name={user.name}
-        />
-        <div className="flex flex-col items-end gap-1">
-          <span className="text-tiny text-default-500">{user.role}</span>
-          <Chip color="success" size="sm" variant="flat">
-            {user.status}
-          </Chip>
-        </div>
-      </div>
-    </Checkbox>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/disabled.raw.jsx b/apps/docs/content/components/checkbox/disabled.raw.jsx
new file mode 100644
index 0000000000..c92dd3711e
--- /dev/null
+++ b/apps/docs/content/components/checkbox/disabled.raw.jsx
@@ -0,0 +1,12 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox isDisabled>Option</Checkbox>
+      <Checkbox defaultSelected isDisabled>
+        Option
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/disabled.ts b/apps/docs/content/components/checkbox/disabled.ts
index 23f637e682..1a215cc91f 100644
--- a/apps/docs/content/components/checkbox/disabled.ts
+++ b/apps/docs/content/components/checkbox/disabled.ts
@@ -1,13 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox isDisabled>Option</Checkbox>
-      <Checkbox isDisabled defaultSelected>Option</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/indeterminate.raw.jsx b/apps/docs/content/components/checkbox/indeterminate.raw.jsx
new file mode 100644
index 0000000000..0bc1851041
--- /dev/null
+++ b/apps/docs/content/components/checkbox/indeterminate.raw.jsx
@@ -0,0 +1,5 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return <Checkbox isIndeterminate>Option</Checkbox>;
+}
diff --git a/apps/docs/content/components/checkbox/indeterminate.ts b/apps/docs/content/components/checkbox/indeterminate.ts
index bc9ad778aa..7094e42950 100644
--- a/apps/docs/content/components/checkbox/indeterminate.ts
+++ b/apps/docs/content/components/checkbox/indeterminate.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox isIndeterminate>Option</Checkbox>
-  );
-}`;
+import App from "./indeterminate.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/line-through.raw.jsx b/apps/docs/content/components/checkbox/line-through.raw.jsx
new file mode 100644
index 0000000000..4e4408c213
--- /dev/null
+++ b/apps/docs/content/components/checkbox/line-through.raw.jsx
@@ -0,0 +1,9 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Checkbox defaultSelected lineThrough>
+      Option
+    </Checkbox>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/line-through.ts b/apps/docs/content/components/checkbox/line-through.ts
index ce5f7e3d22..f4c8aaa857 100644
--- a/apps/docs/content/components/checkbox/line-through.ts
+++ b/apps/docs/content/components/checkbox/line-through.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox defaultSelected lineThrough>Option</Checkbox>
-  );
-}`;
+import App from "./line-through.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/radius.raw.jsx b/apps/docs/content/components/checkbox/radius.raw.jsx
new file mode 100644
index 0000000000..cabb65bcde
--- /dev/null
+++ b/apps/docs/content/components/checkbox/radius.raw.jsx
@@ -0,0 +1,23 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected radius="full">
+        Full
+      </Checkbox>
+      <Checkbox defaultSelected radius="lg">
+        Large
+      </Checkbox>
+      <Checkbox defaultSelected radius="md">
+        Medium
+      </Checkbox>
+      <Checkbox defaultSelected radius="sm">
+        Small
+      </Checkbox>
+      <Checkbox defaultSelected radius="none">
+        None
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/radius.ts b/apps/docs/content/components/checkbox/radius.ts
index a8446ab909..7b78db1ce0 100644
--- a/apps/docs/content/components/checkbox/radius.ts
+++ b/apps/docs/content/components/checkbox/radius.ts
@@ -1,16 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected radius="full">Full</Checkbox>
-      <Checkbox defaultSelected radius="lg">Large</Checkbox>
-      <Checkbox defaultSelected radius="md">Medium</Checkbox>
-      <Checkbox defaultSelected radius="sm">Small</Checkbox>
-      <Checkbox defaultSelected radius="none">None</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/sizes.raw.jsx b/apps/docs/content/components/checkbox/sizes.raw.jsx
new file mode 100644
index 0000000000..3e3c51a9e2
--- /dev/null
+++ b/apps/docs/content/components/checkbox/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Checkbox defaultSelected size="sm">
+        Small
+      </Checkbox>
+      <Checkbox defaultSelected size="md">
+        Medium
+      </Checkbox>
+      <Checkbox defaultSelected size="lg">
+        Large
+      </Checkbox>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/checkbox/sizes.ts b/apps/docs/content/components/checkbox/sizes.ts
index 7dc596b4ec..85a2f5b30b 100644
--- a/apps/docs/content/components/checkbox/sizes.ts
+++ b/apps/docs/content/components/checkbox/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Checkbox defaultSelected size="sm">Small</Checkbox>
-      <Checkbox defaultSelected size="md">Medium</Checkbox>
-      <Checkbox defaultSelected size="lg">Large</Checkbox>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/checkbox/usage.raw.jsx b/apps/docs/content/components/checkbox/usage.raw.jsx
new file mode 100644
index 0000000000..050e56a5a7
--- /dev/null
+++ b/apps/docs/content/components/checkbox/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Checkbox} from "@nextui-org/react";
+
+export default function App() {
+  return <Checkbox defaultSelected>Option</Checkbox>;
+}
diff --git a/apps/docs/content/components/checkbox/usage.ts b/apps/docs/content/components/checkbox/usage.ts
index e7b4a84d96..1118304c37 100644
--- a/apps/docs/content/components/checkbox/usage.ts
+++ b/apps/docs/content/components/checkbox/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Checkbox} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Checkbox defaultSelected>Option</Checkbox>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/avatar.raw.jsx b/apps/docs/content/components/chip/avatar.raw.jsx
new file mode 100644
index 0000000000..1eef36faa2
--- /dev/null
+++ b/apps/docs/content/components/chip/avatar.raw.jsx
@@ -0,0 +1,20 @@
+import {Chip, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        avatar={<Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+      <Chip
+        avatar={<Avatar getInitials={(name) => name.charAt(0)} name="JW" size="sm" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/avatar.ts b/apps/docs/content/components/chip/avatar.ts
index d0a767543d..4d86784b87 100644
--- a/apps/docs/content/components/chip/avatar.ts
+++ b/apps/docs/content/components/chip/avatar.ts
@@ -1,30 +1,4 @@
-const App = `import {Chip, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar
-            name="JW"
-            src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-          />
-        }
-      >
-        Avatar
-      </Chip>
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar name="JW" size="sm" getInitials={(name) => name.charAt(0)} />
-        }
-      >
-        Avatar
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./avatar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/close-button.raw.jsx b/apps/docs/content/components/chip/close-button.raw.jsx
new file mode 100644
index 0000000000..5e55351dda
--- /dev/null
+++ b/apps/docs/content/components/chip/close-button.raw.jsx
@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      {/* eslint-disable no-console */}
+      <Chip onClose={() => console.log("close")}>Chip</Chip>
+      {/* eslint-disable no-console */}
+      <Chip variant="bordered" onClose={() => console.log("close")}>
+        Chip
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/close-button.ts b/apps/docs/content/components/chip/close-button.ts
index 096eeba7dc..f0fdaba6b9 100644
--- a/apps/docs/content/components/chip/close-button.ts
+++ b/apps/docs/content/components/chip/close-button.ts
@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip onClose={() => console.log("close")}>Chip</Chip>
-      <Chip onClose={() => console.log("close")} variant="bordered">
-        Chip
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./close-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/colors.raw.jsx b/apps/docs/content/components/chip/colors.raw.jsx
new file mode 100644
index 0000000000..c61777b169
--- /dev/null
+++ b/apps/docs/content/components/chip/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="default">Default</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="danger">Danger</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/colors.ts b/apps/docs/content/components/chip/colors.ts
index ac0f61f8f5..d5bef810aa 100644
--- a/apps/docs/content/components/chip/colors.ts
+++ b/apps/docs/content/components/chip/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip color="default">Default</Chip>
-      <Chip color="primary">Primary</Chip>
-      <Chip color="secondary">Secondary</Chip>
-      <Chip color="success">Success</Chip>
-      <Chip color="warning">Warning</Chip>
-      <Chip color="danger">Danger</Chip>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/custom-styles.raw.jsx b/apps/docs/content/components/chip/custom-styles.raw.jsx
new file mode 100644
index 0000000000..61979d0db2
--- /dev/null
+++ b/apps/docs/content/components/chip/custom-styles.raw.jsx
@@ -0,0 +1,15 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip
+      classNames={{
+        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        content: "drop-shadow shadow-black text-white",
+      }}
+      variant="shadow"
+    >
+      New
+    </Chip>
+  );
+}
diff --git a/apps/docs/content/components/chip/custom-styles.ts b/apps/docs/content/components/chip/custom-styles.ts
index df78467892..da3ea9093a 100644
--- a/apps/docs/content/components/chip/custom-styles.ts
+++ b/apps/docs/content/components/chip/custom-styles.ts
@@ -1,18 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip
-      variant="shadow"
-      classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
-        content: "drop-shadow shadow-black text-white",
-      }}
-    >
-      New
-    </Chip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/disabled.raw.jsx b/apps/docs/content/components/chip/disabled.raw.jsx
new file mode 100644
index 0000000000..28ac8dfe82
--- /dev/null
+++ b/apps/docs/content/components/chip/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip isDisabled color="primary">
+      Chip
+    </Chip>
+  );
+}
diff --git a/apps/docs/content/components/chip/disabled.ts b/apps/docs/content/components/chip/disabled.ts
index 15a8dd3a21..1a215cc91f 100644
--- a/apps/docs/content/components/chip/disabled.ts
+++ b/apps/docs/content/components/chip/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip isDisabled color="primary">Chip</Chip>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/list.raw.jsx b/apps/docs/content/components/chip/list.raw.jsx
new file mode 100644
index 0000000000..32757cd873
--- /dev/null
+++ b/apps/docs/content/components/chip/list.raw.jsx
@@ -0,0 +1,24 @@
+import {Chip} from "@nextui-org/react";
+
+const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"];
+
+export default function App() {
+  const [fruits, setFruits] = React.useState(initialFruits);
+
+  const handleClose = (fruitToRemove) => {
+    setFruits(fruits.filter((fruit) => fruit !== fruitToRemove));
+    if (fruits.length === 1) {
+      setFruits(initialFruits);
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      {fruits.map((fruit, index) => (
+        <Chip key={index} variant="flat" onClose={() => handleClose(fruit)}>
+          {fruit}
+        </Chip>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/list.ts b/apps/docs/content/components/chip/list.ts
index 8676a06015..2caeebc928 100644
--- a/apps/docs/content/components/chip/list.ts
+++ b/apps/docs/content/components/chip/list.ts
@@ -1,27 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
-
-export default function App() {
-  const [fruits, setFruits] = React.useState(initialFruits);
-
-  const handleClose = (fruitToRemove) => {
-    setFruits(fruits.filter(fruit => fruit !== fruitToRemove));
-    if (fruits.length === 1) {
-      setFruits(initialFruits);
-    }
-  };
-
-  return (
-    <div className="flex gap-2">
-      {fruits.map((fruit, index) => (
-        <Chip key={index} onClose={() => handleClose(fruit)} variant="flat">
-          {fruit}
-        </Chip>
-      ))}
-    </div>
-  );
-}`;
+import App from "./list.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/radius.raw.jsx b/apps/docs/content/components/chip/radius.raw.jsx
new file mode 100644
index 0000000000..2f320071ac
--- /dev/null
+++ b/apps/docs/content/components/chip/radius.raw.jsx
@@ -0,0 +1,12 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip radius="full">Full</Chip>
+      <Chip radius="lg">Large</Chip>
+      <Chip radius="md">Medium</Chip>
+      <Chip radius="sm">Small</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/radius.ts b/apps/docs/content/components/chip/radius.ts
index e53280621d..7b78db1ce0 100644
--- a/apps/docs/content/components/chip/radius.ts
+++ b/apps/docs/content/components/chip/radius.ts
@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip radius="full">Full</Chip>
-      <Chip radius="lg">Large</Chip>
-      <Chip radius="md">Medium</Chip>
-      <Chip radius="sm">Small</Chip>
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/sizes.raw.jsx b/apps/docs/content/components/chip/sizes.raw.jsx
new file mode 100644
index 0000000000..c02511ab8f
--- /dev/null
+++ b/apps/docs/content/components/chip/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip size="sm">Small</Chip>
+      <Chip size="md">Medium</Chip>
+      <Chip size="lg">Large</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/sizes.ts b/apps/docs/content/components/chip/sizes.ts
index 72db218534..85a2f5b30b 100644
--- a/apps/docs/content/components/chip/sizes.ts
+++ b/apps/docs/content/components/chip/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip size="sm">Small</Chip>
-      <Chip size="md">Medium</Chip>
-      <Chip size="lg">Large</Chip>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/start-end-content.raw.jsx b/apps/docs/content/components/chip/start-end-content.raw.jsx
new file mode 100644
index 0000000000..f901308ecc
--- /dev/null
+++ b/apps/docs/content/components/chip/start-end-content.raw.jsx
@@ -0,0 +1,52 @@
+import {Chip} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="success" startContent={<CheckIcon size={18} />} variant="faded">
+        Chip
+      </Chip>
+      <Chip color="secondary" endContent={<NotificationIcon size={18} />} variant="flat">
+        Chip
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/start-end-content.ts b/apps/docs/content/components/chip/start-end-content.ts
index 415216b802..e99c7e5997 100644
--- a/apps/docs/content/components/chip/start-end-content.ts
+++ b/apps/docs/content/components/chip/start-end-content.ts
@@ -1,72 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/>
-    </svg>
-  );
-};`;
-
-const App = `import {Chip} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip
-        startContent={<CheckIcon size={18} />}
-        variant="faded"
-        color="success"
-      >
-        Chip
-      </Chip>
-      <Chip
-        endContent={<NotificationIcon size={18} />}
-        variant="flat"
-        color="secondary"
-      >
-        Chip
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/chip/usage.raw.jsx b/apps/docs/content/components/chip/usage.raw.jsx
new file mode 100644
index 0000000000..0a4eda3a36
--- /dev/null
+++ b/apps/docs/content/components/chip/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return <Chip>Chip</Chip>;
+}
diff --git a/apps/docs/content/components/chip/usage.ts b/apps/docs/content/components/chip/usage.ts
index d8e05d0a6f..1118304c37 100644
--- a/apps/docs/content/components/chip/usage.ts
+++ b/apps/docs/content/components/chip/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip>Chip</Chip>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/variants.raw.jsx b/apps/docs/content/components/chip/variants.raw.jsx
new file mode 100644
index 0000000000..ad79cf0878
--- /dev/null
+++ b/apps/docs/content/components/chip/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="warning" variant="solid">
+        Solid
+      </Chip>
+      <Chip color="warning" variant="bordered">
+        Bordered
+      </Chip>
+      <Chip color="warning" variant="light">
+        Light
+      </Chip>
+      <Chip color="warning" variant="flat">
+        Flat
+      </Chip>
+      <Chip color="warning" variant="faded">
+        Faded
+      </Chip>
+      <Chip color="warning" variant="shadow">
+        Shadow
+      </Chip>
+      <Chip color="warning" variant="dot">
+        Dot
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/variants.ts b/apps/docs/content/components/chip/variants.ts
index 7893976585..ddea95fb2e 100644
--- a/apps/docs/content/components/chip/variants.ts
+++ b/apps/docs/content/components/chip/variants.ts
@@ -1,18 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip color="warning" variant="solid">Solid</Chip>
-      <Chip color="warning" variant="bordered">Bordered</Chip>
-      <Chip color="warning" variant="light">Light</Chip>
-      <Chip color="warning" variant="flat">Flat</Chip>
-      <Chip color="warning" variant="faded">Faded</Chip>
-      <Chip color="warning" variant="shadow">Shadow</Chip>
-      <Chip color="warning" variant="dot">Dot</Chip>
-    </div> 
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/colors.raw.jsx b/apps/docs/content/components/circular-progress/colors.raw.jsx
new file mode 100644
index 0000000000..09e7cc6aa1
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress aria-label="Loading..." color="default" />
+      <CircularProgress aria-label="Loading..." color="primary" />
+      <CircularProgress aria-label="Loading..." color="secondary" />
+      <CircularProgress aria-label="Loading..." color="success" />
+      <CircularProgress aria-label="Loading..." color="warning" />
+      <CircularProgress aria-label="Loading..." color="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/colors.ts b/apps/docs/content/components/circular-progress/colors.ts
index 2a8fff62a5..d5bef810aa 100644
--- a/apps/docs/content/components/circular-progress/colors.ts
+++ b/apps/docs/content/components/circular-progress/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <CircularProgress color="default" aria-label="Loading..."/>
-      <CircularProgress color="primary" aria-label="Loading..."/>
-      <CircularProgress color="secondary" aria-label="Loading..."/>
-      <CircularProgress color="success" aria-label="Loading..."/>
-      <CircularProgress color="warning" aria-label="Loading..."/>
-      <CircularProgress color="danger" aria-label="Loading..."/>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/custom-styles.raw.jsx b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
new file mode 100644
index 0000000000..8e2f2d9e64
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/custom-styles.raw.jsx
@@ -0,0 +1,32 @@
+import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
+      <CardBody className="justify-center items-center pb-0">
+        <CircularProgress
+          classNames={{
+            svg: "w-36 h-36 drop-shadow-md",
+            indicator: "stroke-white",
+            track: "stroke-white/10",
+            value: "text-3xl font-semibold text-white",
+          }}
+          showValueLabel={true}
+          strokeWidth={4}
+          value={70}
+        />
+      </CardBody>
+      <CardFooter className="justify-center items-center pt-0">
+        <Chip
+          classNames={{
+            base: "border-1 border-white/30",
+            content: "text-white/90 text-small font-semibold",
+          }}
+          variant="bordered"
+        >
+          2800 Data points
+        </Chip>
+      </CardFooter>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/custom-styles.ts b/apps/docs/content/components/circular-progress/custom-styles.ts
index 53b74c16c2..da3ea9093a 100644
--- a/apps/docs/content/components/circular-progress/custom-styles.ts
+++ b/apps/docs/content/components/circular-progress/custom-styles.ts
@@ -1,35 +1,4 @@
-const App = `import {CircularProgress, Card, CardBody, CardFooter, Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card className="w-[240px] h-[240px] border-none bg-gradient-to-br from-violet-500 to-fuchsia-500">
-      <CardBody className="justify-center items-center pb-0">
-        <CircularProgress
-          classNames={{
-            svg: "w-36 h-36 drop-shadow-md",
-            indicator: "stroke-white",
-            track: "stroke-white/10",
-            value: "text-3xl font-semibold text-white",
-          }}
-          value={70}
-          strokeWidth={4}
-          showValueLabel={true}
-        />
-      </CardBody>
-      <CardFooter className="justify-center items-center pt-0">
-        <Chip
-          classNames={{
-            base: "border-1 border-white/30",
-            content: "text-white/90 text-small font-semibold",
-          }}
-          variant="bordered"
-        >
-          2800 Data points
-        </Chip>
-      </CardFooter>
-    </Card>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/label.raw.jsx b/apps/docs/content/components/circular-progress/label.raw.jsx
new file mode 100644
index 0000000000..7767e1e4f8
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/label.raw.jsx
@@ -0,0 +1,5 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return <CircularProgress label="Loading..." />;
+}
diff --git a/apps/docs/content/components/circular-progress/label.ts b/apps/docs/content/components/circular-progress/label.ts
index e9bd60e770..254b95afb8 100644
--- a/apps/docs/content/components/circular-progress/label.ts
+++ b/apps/docs/content/components/circular-progress/label.ts
@@ -1,10 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress label="Loading..." />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/sizes.raw.jsx b/apps/docs/content/components/circular-progress/sizes.raw.jsx
new file mode 100644
index 0000000000..cdf5cdb24f
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <CircularProgress aria-label="Loading..." size="sm" />
+      <CircularProgress aria-label="Loading..." size="md" />
+      <CircularProgress aria-label="Loading..." size="lg" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/sizes.ts b/apps/docs/content/components/circular-progress/sizes.ts
index ef5050c7a3..85a2f5b30b 100644
--- a/apps/docs/content/components/circular-progress/sizes.ts
+++ b/apps/docs/content/components/circular-progress/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <CircularProgress size="sm" aria-label="Loading..."/>
-      <CircularProgress size="md" aria-label="Loading..."/>
-      <CircularProgress size="lg" aria-label="Loading..."/>
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/usage.raw.jsx b/apps/docs/content/components/circular-progress/usage.raw.jsx
new file mode 100644
index 0000000000..fb6ac8e2ac
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return <CircularProgress aria-label="Loading..." />;
+}
diff --git a/apps/docs/content/components/circular-progress/usage.ts b/apps/docs/content/components/circular-progress/usage.ts
index ab4db2bbda..1118304c37 100644
--- a/apps/docs/content/components/circular-progress/usage.ts
+++ b/apps/docs/content/components/circular-progress/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress aria-label="Loading..." />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/value-formatting.raw.jsx b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx
new file mode 100644
index 0000000000..81112502da
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/value-formatting.raw.jsx
@@ -0,0 +1,14 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <CircularProgress
+      color="success"
+      formatOptions={{style: "unit", unit: "kilometer"}}
+      label="Speed"
+      showValueLabel={true}
+      size="lg"
+      value={70}
+    />
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/value-formatting.ts b/apps/docs/content/components/circular-progress/value-formatting.ts
index 498c16ff29..0cd558d45d 100644
--- a/apps/docs/content/components/circular-progress/value-formatting.ts
+++ b/apps/docs/content/components/circular-progress/value-formatting.ts
@@ -1,17 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <CircularProgress
-      label="Speed"
-      size="lg"
-      value={70}
-      color="success"
-      formatOptions={{ style: "unit", unit: "kilometer" }}
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/circular-progress/value.raw.jsx b/apps/docs/content/components/circular-progress/value.raw.jsx
new file mode 100644
index 0000000000..fc075f67ac
--- /dev/null
+++ b/apps/docs/content/components/circular-progress/value.raw.jsx
@@ -0,0 +1,23 @@
+import {CircularProgress} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((v) => (v >= 100 ? 0 : v + 10));
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <CircularProgress
+      aria-label="Loading..."
+      color="warning"
+      showValueLabel={true}
+      size="lg"
+      value={value}
+    />
+  );
+}
diff --git a/apps/docs/content/components/circular-progress/value.ts b/apps/docs/content/components/circular-progress/value.ts
index 1915a88907..e2de0e9024 100644
--- a/apps/docs/content/components/circular-progress/value.ts
+++ b/apps/docs/content/components/circular-progress/value.ts
@@ -1,26 +1,4 @@
-const App = `import {CircularProgress} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(0);
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setValue((v) => (v >= 100 ? 0 : v + 10));
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <CircularProgress
-      aria-label="Loading..."
-      size="lg"
-      value={value}
-      color="warning"
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/code/colors.raw.jsx b/apps/docs/content/components/code/colors.raw.jsx
new file mode 100644
index 0000000000..f80c81779f
--- /dev/null
+++ b/apps/docs/content/components/code/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Code color="default">npm install @nextui-org/react</Code>
+      <Code color="primary">npm install @nextui-org/react</Code>
+      <Code color="secondary">npm install @nextui-org/react</Code>
+      <Code color="success">npm install @nextui-org/react</Code>
+      <Code color="warning">npm install @nextui-org/react</Code>
+      <Code color="danger">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/colors.ts b/apps/docs/content/components/code/colors.ts
index 7c2641f200..d5bef810aa 100644
--- a/apps/docs/content/components/code/colors.ts
+++ b/apps/docs/content/components/code/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Code color="default">npm install @nextui-org/react</Code>
-      <Code color="primary">npm install @nextui-org/react</Code>
-      <Code color="secondary">npm install @nextui-org/react</Code>
-      <Code color="success">npm install @nextui-org/react</Code>
-      <Code color="warning">npm install @nextui-org/react</Code>
-      <Code color="danger">npm install @nextui-org/react</Code>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/code/sizes.raw.jsx b/apps/docs/content/components/code/sizes.raw.jsx
new file mode 100644
index 0000000000..51a27c7dee
--- /dev/null
+++ b/apps/docs/content/components/code/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Code size="sm">npm install @nextui-org/react</Code>
+      <Code size="md">npm install @nextui-org/react</Code>
+      <Code size="lg">npm install @nextui-org/react</Code>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/code/sizes.ts b/apps/docs/content/components/code/sizes.ts
index 9d13253761..85a2f5b30b 100644
--- a/apps/docs/content/components/code/sizes.ts
+++ b/apps/docs/content/components/code/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4">
-      <Code size="sm">npm install @nextui-org/react</Code>
-      <Code size="md">npm install @nextui-org/react</Code>
-      <Code size="lg">npm install @nextui-org/react</Code>
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/code/usage.raw.jsx b/apps/docs/content/components/code/usage.raw.jsx
new file mode 100644
index 0000000000..d2adf43cb4
--- /dev/null
+++ b/apps/docs/content/components/code/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Code} from "@nextui-org/react";
+
+export default function App() {
+  return <Code>npm install @nextui-org/react</Code>;
+}
diff --git a/apps/docs/content/components/code/usage.ts b/apps/docs/content/components/code/usage.ts
index b5a5a2895b..1118304c37 100644
--- a/apps/docs/content/components/code/usage.ts
+++ b/apps/docs/content/components/code/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Code} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Code>npm install @nextui-org/react</Code>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/controlled.raw.jsx b/apps/docs/content/components/date-input/controlled.raw.jsx
new file mode 100644
index 0000000000..b56cc09e3a
--- /dev/null
+++ b/apps/docs/content/components/date-input/controlled.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/controlled.raw.tsx b/apps/docs/content/components/date-input/controlled.raw.tsx
new file mode 100644
index 0000000000..bb4fae7fab
--- /dev/null
+++ b/apps/docs/content/components/date-input/controlled.raw.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/controlled.ts b/apps/docs/content/components/date-input/controlled.ts
index cc8ce5a7b1..1f1a363363 100644
--- a/apps/docs/content/components/date-input/controlled.ts
+++ b/apps/docs/content/components/date-input/controlled.ts
@@ -1,50 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateInput label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/description.raw.jsx b/apps/docs/content/components/date-input/description.raw.jsx
new file mode 100644
index 0000000000..8a43b6fa59
--- /dev/null
+++ b/apps/docs/content/components/date-input/description.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        description={"This is my birth date."}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/description.ts b/apps/docs/content/components/date-input/description.ts
index 344087e325..aeb6340b6b 100644
--- a/apps/docs/content/components/date-input/description.ts
+++ b/apps/docs/content/components/date-input/description.ts
@@ -1,17 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/disabled.raw.jsx b/apps/docs/content/components/date-input/disabled.raw.jsx
new file mode 100644
index 0000000000..e674aeb93e
--- /dev/null
+++ b/apps/docs/content/components/date-input/disabled.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isDisabled
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/disabled.ts b/apps/docs/content/components/date-input/disabled.ts
index b61e928461..1a215cc91f 100644
--- a/apps/docs/content/components/date-input/disabled.ts
+++ b/apps/docs/content/components/date-input/disabled.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isDisabled
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/error-message-function.raw.jsx b/apps/docs/content/components/date-input/error-message-function.raw.jsx
new file mode 100644
index 0000000000..085aaa3254
--- /dev/null
+++ b/apps/docs/content/components/date-input/error-message-function.raw.jsx
@@ -0,0 +1,22 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/error-message-function.ts b/apps/docs/content/components/date-input/error-message-function.ts
index 35371af420..1af0006141 100644
--- a/apps/docs/content/components/date-input/error-message-function.ts
+++ b/apps/docs/content/components/date-input/error-message-function.ts
@@ -1,25 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"This is my birth date."}
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/error-message.raw.jsx b/apps/docs/content/components/date-input/error-message.raw.jsx
new file mode 100644
index 0000000000..2f73e9d0d1
--- /dev/null
+++ b/apps/docs/content/components/date-input/error-message.raw.jsx
@@ -0,0 +1,18 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isInvalid
+        className="max-w-xs"
+        defaultValue={parseDate("2024-04-04")}
+        description={"This is my birth date."}
+        errorMessage="Please enter a valid date."
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/error-message.ts b/apps/docs/content/components/date-input/error-message.ts
index a76208e779..fb8101b132 100644
--- a/apps/docs/content/components/date-input/error-message.ts
+++ b/apps/docs/content/components/date-input/error-message.ts
@@ -1,21 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput 
-        label={"Birth date"} 
-        defaultValue={parseDate("2024-04-04")} 
-        placeholderValue={new CalendarDate(1995, 11, 6)} 
-        description={"Thiis is my birth date."}
-        isInvalid
-        errorMessage="Please enter a valid date."
-        className="max-w-xs"
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/granularity.raw.jsx b/apps/docs/content/components/date-input/granularity.raw.jsx
new file mode 100644
index 0000000000..712b58eebe
--- /dev/null
+++ b/apps/docs/content/components/date-input/granularity.raw.jsx
@@ -0,0 +1,19 @@
+import {DateInput} from "@nextui-org/react";
+import {now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/granularity.raw.tsx b/apps/docs/content/components/date-input/granularity.raw.tsx
new file mode 100644
index 0000000000..d186cfdb91
--- /dev/null
+++ b/apps/docs/content/components/date-input/granularity.raw.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateInput granularity="second" label="Date and time" value={date} onChange={setDate} />
+      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
+      <DateInput granularity="second" label="Event date" />
+      <DateInput
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/granularity.ts b/apps/docs/content/components/date-input/granularity.ts
index 936bcddffa..6196832da6 100644
--- a/apps/docs/content/components/date-input/granularity.ts
+++ b/apps/docs/content/components/date-input/granularity.ts
@@ -1,60 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateInput
-        granularity="second"
-        label="Date and time"
-        value={date}
-        onChange={setDate}
-      />
-      <DateInput granularity="day" label="Date" value={date} onChange={setDate} />
-      <DateInput granularity="second" label="Event date" />
-      <DateInput
-        granularity="second"
-        label="Event date"
-        placeholderValue={now("America/New_York")}
-      />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/hide-timezone.raw.jsx b/apps/docs/content/components/date-input/hide-timezone.raw.jsx
new file mode 100644
index 0000000000..0629cf8eb7
--- /dev/null
+++ b/apps/docs/content/components/date-input/hide-timezone.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateInput
+        hideTimeZone
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label="Appointment time"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/hide-timezone.ts b/apps/docs/content/components/date-input/hide-timezone.ts
index cde093363e..225f731355 100644
--- a/apps/docs/content/components/date-input/hide-timezone.ts
+++ b/apps/docs/content/components/date-input/hide-timezone.ts
@@ -1,17 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateInput
-        label="Appointment time"
-        hideTimeZone
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      />
-    </div>
-  );
-}`;
+import App from "./hide-timezone.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/hourly-cycle.raw.jsx b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx
new file mode 100644
index 0000000000..cd1be2e6a8
--- /dev/null
+++ b/apps/docs/content/components/date-input/hourly-cycle.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        granularity={"minute"}
+        hourCycle={24}
+        label="Appointment time"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/hourly-cycle.ts b/apps/docs/content/components/date-input/hourly-cycle.ts
index 0336f7ea19..21381611a1 100644
--- a/apps/docs/content/components/date-input/hourly-cycle.ts
+++ b/apps/docs/content/components/date-input/hourly-cycle.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateInput
-        label="Appointment time"
-        hourCycle={24}
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        granularity={"minute"}
-      />
-    </div>
-  );
-}`;
+import App from "./hourly-cycle.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/international-calendar.raw.jsx b/apps/docs/content/components/date-input/international-calendar.raw.jsx
new file mode 100644
index 0000000000..cc0ee60556
--- /dev/null
+++ b/apps/docs/content/components/date-input/international-calendar.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateInput label="Appointment date" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/international-calendar.raw.tsx b/apps/docs/content/components/date-input/international-calendar.raw.tsx
new file mode 100644
index 0000000000..5f088ad832
--- /dev/null
+++ b/apps/docs/content/components/date-input/international-calendar.raw.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import {DateInput} from "@nextui-org/react";
+import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  const [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateInput label="Appointment date" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/international-calendar.ts b/apps/docs/content/components/date-input/international-calendar.ts
index 20f9064feb..a8707fd093 100644
--- a/apps/docs/content/components/date-input/international-calendar.ts
+++ b/apps/docs/content/components/date-input/international-calendar.ts
@@ -1,40 +1,15 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  const [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateInput label="Appointment date" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateInput} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  const [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateInput label="Appointment date" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
+import App from "./international-calendar.raw.jsx?raw";
+import AppTs from "./international-calendar.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-input/label-placements.raw.jsx b/apps/docs/content/components/date-input/label-placements.raw.jsx
new file mode 100644
index 0000000000..112edbdeb6
--- /dev/null
+++ b/apps/docs/content/components/date-input/label-placements.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="w-full flex flex-col max-w-sm gap-4">
+      {placements.map((placement) => (
+        <DateInput
+          key={placement}
+          description={placement}
+          label="Birth date"
+          labelPlacement={placement}
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/label-placements.ts b/apps/docs/content/components/date-input/label-placements.ts
index df3d59c5ff..cd2a65d352 100644
--- a/apps/docs/content/components/date-input/label-placements.ts
+++ b/apps/docs/content/components/date-input/label-placements.ts
@@ -1,26 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="w-full flex flex-col max-w-sm gap-4">
-      {placements.map((placement) => (
-        <DateInput 
-          label="Birth date" 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          description={placement}
-          labelPlacement={placement}
-        />
-      ))}
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/min-and-max-date.raw.jsx b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..ba54d4dc99
--- /dev/null
+++ b/apps/docs/content/components/date-input/min-and-max-date.raw.jsx
@@ -0,0 +1,25 @@
+import {DateInput} from "@nextui-org/react";
+import {getLocalTimeZone, today} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <div className="w-full flex flex-col gap-1">
+        <h3>Min date</h3>
+        <DateInput
+          defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <h3>Max date</h3>
+        <DateInput
+          defaultValue={today(getLocalTimeZone()).add({days: 1})}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/min-and-max-date.ts b/apps/docs/content/components/date-input/min-and-max-date.ts
index 5d59cb9f4a..be9af0fc43 100644
--- a/apps/docs/content/components/date-input/min-and-max-date.ts
+++ b/apps/docs/content/components/date-input/min-and-max-date.ts
@@ -1,28 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <div className="w-full flex flex-col gap-1">
-        <h3>Min date</h3>
-        <DateInput
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).subtract({ days: 1 })}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-2">
-        <h3>Max date</h3>
-        <DateInput
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).add({ days: 1 })}
-        />
-      </div>
-    </div>
-  );
-}`;
+import App from "./min-and-max-date.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/readonly.raw.jsx b/apps/docs/content/components/date-input/readonly.raw.jsx
new file mode 100644
index 0000000000..46aedeed30
--- /dev/null
+++ b/apps/docs/content/components/date-input/readonly.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isReadOnly
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/readonly.ts b/apps/docs/content/components/date-input/readonly.ts
index ddd06f00bb..fabd05ba36 100644
--- a/apps/docs/content/components/date-input/readonly.ts
+++ b/apps/docs/content/components/date-input/readonly.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isReadOnly
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/required.raw.jsx b/apps/docs/content/components/date-input/required.raw.jsx
new file mode 100644
index 0000000000..909e91a0fe
--- /dev/null
+++ b/apps/docs/content/components/date-input/required.raw.jsx
@@ -0,0 +1,15 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        isRequired
+        defaultValue={parseDate("2024-04-04")}
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/required.ts b/apps/docs/content/components/date-input/required.ts
index 7e064fec4b..b50b781e6f 100644
--- a/apps/docs/content/components/date-input/required.ts
+++ b/apps/docs/content/components/date-input/required.ts
@@ -1,18 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DateInput 
-          label={"Birth date"} 
-          isRequired
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-        />
-    </div>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/start-end-content.raw.jsx b/apps/docs/content/components/date-input/start-end-content.raw.jsx
new file mode 100644
index 0000000000..ad70c51ed3
--- /dev/null
+++ b/apps/docs/content/components/date-input/start-end-content.raw.jsx
@@ -0,0 +1,55 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export const CalendarIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z"
+        fill="currentColor"
+      />
+      <path
+        clipRule="evenodd"
+        d="M2 12c0-.839 0-1.585.013-2.25h19.974C22 10.415 22 11.161 22 12v2c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14zm15 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-4-5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-6-3a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <DateInput
+          defaultValue={parseDate("2024-04-04")}
+          label="Date Input"
+          labelPlacement="outside"
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+          startContent={
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+        />
+        <DateInput
+          defaultValue={parseDate("2024-04-04")}
+          endContent={
+            <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          label="Date Input"
+          labelPlacement="outside"
+          placeholderValue={new CalendarDate(1995, 11, 6)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/start-end-content.ts b/apps/docs/content/components/date-input/start-end-content.ts
index 182305c868..e99c7e5997 100644
--- a/apps/docs/content/components/date-input/start-end-content.ts
+++ b/apps/docs/content/components/date-input/start-end-content.ts
@@ -1,61 +1,7 @@
-const CalendarIcon = `export const CalendarIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.75 2.5a.75.75 0 0 0-1.5 0v1.58c-1.44.115-2.384.397-3.078 1.092c-.695.694-.977 1.639-1.093 3.078h19.842c-.116-1.44-.398-2.384-1.093-3.078c-.694-.695-1.639-.977-3.078-1.093V2.5a.75.75 0 0 0-1.5 0v1.513C15.585 4 14.839 4 14 4h-4c-.839 0-1.585 0-2.25.013z"
-      fill="currentColor"
-    />
-    <path
-      clipRule="evenodd"
-      d="M2 12c0-.839 0-1.585.013-2.25h19.974C22 10.415 22 11.161 22 12v2c0 3.771 0 5.657-1.172 6.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172C2 19.657 2 17.771 2 14zm15 2a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-4-5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m0 4a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-6-3a1 1 0 1 0 0-2a1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate, parseDate} from "@internationalized/date";
-import {CalendarIcon} from './CalendarIcon';
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col gap-4">
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <DateInput
-          label="Date Input"
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          labelPlacement="outside"
-          startContent={
-           <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <DateInput
-          label="Date Input"
-          defaultValue={parseDate("2024-04-04")} 
-          placeholderValue={new CalendarDate(1995, 11, 6)} 
-          labelPlacement="outside"
-          endContent={
-           <CalendarIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-      </div>
-    </div>  
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CalendarIcon.jsx": CalendarIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-input/time-zones.raw.jsx b/apps/docs/content/components/date-input/time-zones.raw.jsx
new file mode 100644
index 0000000000..cd28b8ef1c
--- /dev/null
+++ b/apps/docs/content/components/date-input/time-zones.raw.jsx
@@ -0,0 +1,19 @@
+import {DateInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-end gap-4">
+      <DateInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label={"Event date"}
+        labelPlacement="outside"
+      />
+      <DateInput
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        label={"Event date"}
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/time-zones.ts b/apps/docs/content/components/date-input/time-zones.ts
index 65b11c09c1..803b4ec768 100644
--- a/apps/docs/content/components/date-input/time-zones.ts
+++ b/apps/docs/content/components/date-input/time-zones.ts
@@ -1,22 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-     <div className="w-full max-w-xl flex flex-col items-end gap-4">
-      <DateInput
-        label={"Event date"}
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        labelPlacement="outside"
-      />
-      <DateInput
-        label={"Event date"}
-        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-        labelPlacement="outside"
-      />
-    </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/usage.raw.jsx b/apps/docs/content/components/date-input/usage.raw.jsx
new file mode 100644
index 0000000000..bbc6bdd82d
--- /dev/null
+++ b/apps/docs/content/components/date-input/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput
+        className="max-w-sm"
+        label={"Birth date"}
+        placeholderValue={new CalendarDate(1995, 11, 6)}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/usage.ts b/apps/docs/content/components/date-input/usage.ts
index eed0992112..1118304c37 100644
--- a/apps/docs/content/components/date-input/usage.ts
+++ b/apps/docs/content/components/date-input/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateInput label={"Birth date"} placeholderValue={new CalendarDate(1995, 11, 6)} className="max-w-sm" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-input/variants.raw.jsx b/apps/docs/content/components/date-input/variants.raw.jsx
new file mode 100644
index 0000000000..9549261715
--- /dev/null
+++ b/apps/docs/content/components/date-input/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {DateInput} from "@nextui-org/react";
+import {CalendarDate} from "@internationalized/date";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <DateInput
+            label={"Birth date"}
+            placeholderValue={new CalendarDate(1995, 11, 6)}
+            variant={variant}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-input/variants.ts b/apps/docs/content/components/date-input/variants.ts
index 5d37e4d194..ddea95fb2e 100644
--- a/apps/docs/content/components/date-input/variants.ts
+++ b/apps/docs/content/components/date-input/variants.ts
@@ -1,19 +1,4 @@
-const App = `import {DateInput} from "@nextui-org/react";
-import {CalendarDate} from "@internationalized/date";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <DateInput variant={variant} label={"Birth date"} placeholderValue={new CalendarDate(1995, 11, 6)}  />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/controlled.raw.jsx b/apps/docs/content/components/date-picker/controlled.raw.jsx
new file mode 100644
index 0000000000..f831b0792d
--- /dev/null
+++ b/apps/docs/content/components/date-picker/controlled.raw.jsx
@@ -0,0 +1,30 @@
+import {DatePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DatePicker
+          className="max-w-[284px]"
+          label="Date (controlled)"
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+      <DatePicker
+        className="max-w-[284px]"
+        defaultValue={parseDate("2024-04-04")}
+        label="Date (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/controlled.raw.tsx b/apps/docs/content/components/date-picker/controlled.raw.tsx
new file mode 100644
index 0000000000..389bfa5323
--- /dev/null
+++ b/apps/docs/content/components/date-picker/controlled.raw.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
+
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DatePicker
+          className="max-w-[284px]"
+          label="Date (controlled)"
+          value={value}
+          onChange={setValue}
+        />
+        <p className="text-default-500 text-sm">
+          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+        </p>
+      </div>
+      <DatePicker
+        className="max-w-[284px]"
+        defaultValue={parseDate("2024-04-04")}
+        label="Date (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/controlled.ts b/apps/docs/content/components/date-picker/controlled.ts
index fdbcded26b..1f1a363363 100644
--- a/apps/docs/content/components/date-picker/controlled.ts
+++ b/apps/docs/content/components/date-picker/controlled.ts
@@ -1,52 +1,15 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState<DateValue>(parseDate("2024-04-04"));
-
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DatePicker className="max-w-[284px]" label="Date (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-        </p>
-      </div>
-      <DatePicker className="max-w-[284px]" defaultValue={parseDate("2024-04-04")} label="Date (uncontrolled)" />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-picker/description.raw.jsx b/apps/docs/content/components/date-picker/description.raw.jsx
new file mode 100644
index 0000000000..ee4547c976
--- /dev/null
+++ b/apps/docs/content/components/date-picker/description.raw.jsx
@@ -0,0 +1,13 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        className="max-w-[284px]"
+        description={"This is my birth date."}
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/description.ts b/apps/docs/content/components/date-picker/description.ts
index 79b1239ba7..aeb6340b6b 100644
--- a/apps/docs/content/components/date-picker/description.ts
+++ b/apps/docs/content/components/date-picker/description.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        description={"Thiis is my birth date."}
-      />
-    </div>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/disabled.raw.jsx b/apps/docs/content/components/date-picker/disabled.raw.jsx
new file mode 100644
index 0000000000..96f50a7a62
--- /dev/null
+++ b/apps/docs/content/components/date-picker/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isDisabled className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/disabled.ts b/apps/docs/content/components/date-picker/disabled.ts
index d6c59845d6..1a215cc91f 100644
--- a/apps/docs/content/components/date-picker/disabled.ts
+++ b/apps/docs/content/components/date-picker/disabled.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isDisabled
-        />
-    </div>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-picker/error-message-function.raw.jsx
new file mode 100644
index 0000000000..68272a7093
--- /dev/null
+++ b/apps/docs/content/components/date-picker/error-message-function.raw.jsx
@@ -0,0 +1,18 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/error-message-function.ts b/apps/docs/content/components/date-picker/error-message-function.ts
index 2b473c9f5d..1af0006141 100644
--- a/apps/docs/content/components/date-picker/error-message-function.ts
+++ b/apps/docs/content/components/date-picker/error-message-function.ts
@@ -1,21 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage={(value) => {
-          if (value.isInvalid) {
-            return "Please enter a valid date.";
-          }
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/error-message.raw.jsx b/apps/docs/content/components/date-picker/error-message.raw.jsx
new file mode 100644
index 0000000000..b367b03746
--- /dev/null
+++ b/apps/docs/content/components/date-picker/error-message.raw.jsx
@@ -0,0 +1,14 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker
+        isInvalid
+        className="max-w-[284px]"
+        errorMessage="Please enter a valid date."
+        label="Birth date"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/error-message.ts b/apps/docs/content/components/date-picker/error-message.ts
index d1c85629ae..fb8101b132 100644
--- a/apps/docs/content/components/date-picker/error-message.ts
+++ b/apps/docs/content/components/date-picker/error-message.ts
@@ -1,17 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        className="max-w-[284px]"
-        isInvalid
-        errorMessage="Please enter a valid date."
-      />
-    </div>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/granularity.raw.jsx b/apps/docs/content/components/date-picker/granularity.raw.jsx
new file mode 100644
index 0000000000..b1edba5b99
--- /dev/null
+++ b/apps/docs/content/components/date-picker/granularity.raw.jsx
@@ -0,0 +1,32 @@
+import {DatePicker} from "@nextui-org/react";
+import {now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/granularity.raw.tsx b/apps/docs/content/components/date-picker/granularity.raw.tsx
new file mode 100644
index 0000000000..47db9bc44e
--- /dev/null
+++ b/apps/docs/content/components/date-picker/granularity.raw.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Date and time"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker
+        className="max-w-md"
+        granularity="day"
+        label="Date"
+        value={date}
+        onChange={setDate}
+      />
+      <DatePicker className="max-w-md" granularity="second" label="Event date" />
+      <DatePicker
+        className="max-w-md"
+        granularity="second"
+        label="Event date"
+        placeholderValue={now("America/New_York")}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/index.ts b/apps/docs/content/components/date-picker/index.ts
index d99bfc245f..cc346caff1 100644
--- a/apps/docs/content/components/date-picker/index.ts
+++ b/apps/docs/content/components/date-picker/index.ts
@@ -10,6 +10,7 @@ import errorMessageFunction from "./error-message-function";
 import withMonthAndYearPickers from "./with-month-and-year-pickers";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
+import selectorButtonPlacement from "./selector-button-placement";
 import controlled from "./controlled";
 import timeZones from "./time-zones";
 import granularity from "./granularity";
@@ -33,6 +34,7 @@ export const datePickerContent = {
   withMonthAndYearPickers,
   withTimeField,
   selectorIcon,
+  selectorButtonPlacement,
   controlled,
   timeZones,
   granularity,
diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-picker/international-calendar.raw.jsx
new file mode 100644
index 0000000000..02f132c4fd
--- /dev/null
+++ b/apps/docs/content/components/date-picker/international-calendar.raw.jsx
@@ -0,0 +1,22 @@
+import {DatePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-picker/international-calendar.raw.tsx
new file mode 100644
index 0000000000..8b9e570dd8
--- /dev/null
+++ b/apps/docs/content/components/date-picker/international-calendar.raw.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import {DatePicker} from "@nextui-org/react";
+import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DatePicker
+          showMonthAndYearPickers
+          className="max-w-md"
+          label="Appointment date"
+          value={date}
+          variant="bordered"
+          onChange={setDate}
+        />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/international-calendar.ts b/apps/docs/content/components/date-picker/international-calendar.ts
index ba86ec20fd..a8707fd093 100644
--- a/apps/docs/content/components/date-picker/international-calendar.ts
+++ b/apps/docs/content/components/date-picker/international-calendar.ts
@@ -1,54 +1,15 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DatePicker
-          showMonthAndYearPickers
-          variant="bordered"
-          className="max-w-md"
-          label="Appointment date"
-          value={date}
-          onChange={setDate}
-        />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker} from "@nextui-org/react";
-import {DateValue, now, parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<DateValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DatePicker
-          showMonthAndYearPickers
-          variant="bordered"
-          className="max-w-md"
-          label="Appointment date"
-          value={date}
-          onChange={setDate}
-        />
-      </I18nProvider>
-    </div>
-  );
-}`;
+import App from "./international-calendar.raw.jsx?raw";
+import AppTs from "./international-calendar.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-picker/label-placements.raw.jsx b/apps/docs/content/components/date-picker/label-placements.raw.jsx
new file mode 100644
index 0000000000..551c5d6a00
--- /dev/null
+++ b/apps/docs/content/components/date-picker/label-placements.raw.jsx
@@ -0,0 +1,23 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <DatePicker
+              key={placement}
+              className="max-w-[284px]"
+              description={placement}
+              label={"Birth date"}
+              labelPlacement={placement}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/label-placements.ts b/apps/docs/content/components/date-picker/label-placements.ts
index abd21541dd..cd2a65d352 100644
--- a/apps/docs/content/components/date-picker/label-placements.ts
+++ b/apps/docs/content/components/date-picker/label-placements.ts
@@ -1,29 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <DatePicker 
-              label={"Birth date"} 
-              className="max-w-[284px]"
-              description={placement}
-              labelPlacement={placement}
-            />
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..06f92bb8f1
--- /dev/null
+++ b/apps/docs/content/components/date-picker/min-and-max-date.raw.jsx
@@ -0,0 +1,25 @@
+import {DatePicker} from "@nextui-org/react";
+import {getLocalTimeZone, today} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <div className="w-full flex flex-col gap-1">
+        <h3>Min date</h3>
+        <DatePicker
+          defaultValue={today(getLocalTimeZone()).subtract({days: 1})}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-1">
+        <h3>Max date</h3>
+        <DatePicker
+          defaultValue={today(getLocalTimeZone()).add({days: 1})}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/min-and-max-date.ts b/apps/docs/content/components/date-picker/min-and-max-date.ts
index bdd9992138..be9af0fc43 100644
--- a/apps/docs/content/components/date-picker/min-and-max-date.ts
+++ b/apps/docs/content/components/date-picker/min-and-max-date.ts
@@ -1,28 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {getLocalTimeZone, today} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <div className="w-full flex flex-col gap-1">
-        <h3>Min date</h3>
-        <DatePicker
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).subtract({ days: 1 })}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-1">
-        <h3>Max date</h3>
-        <DatePicker
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={today(getLocalTimeZone()).add({ days: 1 })}
-        />
-      </div>
-    </div>
-  );
-}`;
+import App from "./min-and-max-date.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-picker/page-behavior.raw.jsx
new file mode 100644
index 0000000000..5c5833cd1f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/page-behavior.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Birth date" pageBehavior="single" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/page-behavior.ts b/apps/docs/content/components/date-picker/page-behavior.ts
index dda732673a..70c2ebfd2f 100644
--- a/apps/docs/content/components/date-picker/page-behavior.ts
+++ b/apps/docs/content/components/date-picker/page-behavior.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        visibleMonths={2}
-        pageBehavior="single"
-      />
-    </div> 
-  );
-}`;
+import App from "./page-behavior.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/preset.raw.jsx b/apps/docs/content/components/date-picker/preset.raw.jsx
new file mode 100644
index 0000000000..d93f2e6a32
--- /dev/null
+++ b/apps/docs/content/components/date-picker/preset.raw.jsx
@@ -0,0 +1,92 @@
+import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+
+  const [value, setValue] = React.useState(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(now.add({months: 1}));
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DatePicker
+        CalendarBottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[380px] overflow-x-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        CalendarTopContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button onPress={() => setValue(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value,
+          onFocusChange: setValue,
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/preset.raw.tsx b/apps/docs/content/components/date-picker/preset.raw.tsx
new file mode 100644
index 0000000000..de9dd853d6
--- /dev/null
+++ b/apps/docs/content/components/date-picker/preset.raw.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
+import {
+  DateValue,
+  startOfWeek,
+  startOfMonth,
+  getLocalTimeZone,
+  today,
+} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+
+  const [value, setValue] = React.useState<DateValue>(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+
+  let now = today(getLocalTimeZone());
+  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
+  let nextMonth = startOfMonth(now.add({months: 1}));
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DatePicker
+        CalendarBottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[380px] overflow-x-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        CalendarTopContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button onPress={() => setValue(now)}>Today</Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value,
+          onFocusChange: setValue,
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/preset.ts b/apps/docs/content/components/date-picker/preset.ts
index 884ffbd063..ae3ac37b4f 100644
--- a/apps/docs/content/components/date-picker/preset.ts
+++ b/apps/docs/content/components/date-picker/preset.ts
@@ -1,194 +1,15 @@
-const App = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
-import {startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-
-  const [value, setValue] = React.useState(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(now.add({months: 1}));
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full max-w-sm">
-      <DatePicker
-        CalendarBottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[380px] overflow-x-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        CalendarTopContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button onPress={() => setValue(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value,
-          onFocusChange: setValue,
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-      </p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DatePicker, RadioGroup, Radio, ButtonGroup, Button, cn} from "@nextui-org/react";
-import {DateValue, startOfWeek, startOfMonth, getLocalTimeZone, today} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-
-  const [value, setValue] = React.useState<DateValue>(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-
-  let now = today(getLocalTimeZone());
-  let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
-  let nextMonth = startOfMonth(now.add({months: 1}));
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full max-w-sm">
-      <DatePicker
-        CalendarBottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[380px] overflow-x-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        CalendarTopContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button onPress={() => setValue(now)}>Today</Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value,
-          onFocusChange: setValue,
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date: {value ? formatter.format(value.toDate(getLocalTimeZone())) : "--"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./preset.raw.jsx?raw";
+import AppTs from "./preset.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-picker/readonly.raw.jsx b/apps/docs/content/components/date-picker/readonly.raw.jsx
new file mode 100644
index 0000000000..26698bb916
--- /dev/null
+++ b/apps/docs/content/components/date-picker/readonly.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isReadOnly className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/readonly.ts b/apps/docs/content/components/date-picker/readonly.ts
index 35ac2d8809..fabd05ba36 100644
--- a/apps/docs/content/components/date-picker/readonly.ts
+++ b/apps/docs/content/components/date-picker/readonly.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isReadOnly
-        />
-    </div>
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/required.raw.jsx b/apps/docs/content/components/date-picker/required.raw.jsx
new file mode 100644
index 0000000000..745bc44be6
--- /dev/null
+++ b/apps/docs/content/components/date-picker/required.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker isRequired className="max-w-[284px]" label="Birth date" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/required.ts b/apps/docs/content/components/date-picker/required.ts
index c5746bef43..b50b781e6f 100644
--- a/apps/docs/content/components/date-picker/required.ts
+++ b/apps/docs/content/components/date-picker/required.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-        <DatePicker 
-          label="Birth date"
-          className="max-w-[284px]"
-          isRequired
-        />
-    </div>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx
new file mode 100644
index 0000000000..20372e750f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/selector-button-placement.raw.jsx
@@ -0,0 +1,10 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Placement start" selectorButtonPlacement="start" />
+      <DatePicker label="Placement end (default)" selectorButtonPlacement="end" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/selector-button-placement.ts b/apps/docs/content/components/date-picker/selector-button-placement.ts
new file mode 100644
index 0000000000..2d69e80fe8
--- /dev/null
+++ b/apps/docs/content/components/date-picker/selector-button-placement.ts
@@ -0,0 +1,9 @@
+import App from "./selector-button-placement.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/date-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-picker/selector-icon.raw.jsx
new file mode 100644
index 0000000000..87c2819f91
--- /dev/null
+++ b/apps/docs/content/components/date-picker/selector-icon.raw.jsx
@@ -0,0 +1,27 @@
+import {DatePicker} from "@nextui-org/react";
+
+export const SelectorIcon = () => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em">
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      >
+        <path d="M8 2v4m8-4v4" />
+        <rect height="18" rx="2" width="18" x="3" y="4" />
+        <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Birth date" selectorIcon={<SelectorIcon />} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/selector-icon.ts b/apps/docs/content/components/date-picker/selector-icon.ts
index b7fd8509eb..9997d508de 100644
--- a/apps/docs/content/components/date-picker/selector-icon.ts
+++ b/apps/docs/content/components/date-picker/selector-icon.ts
@@ -1,36 +1,7 @@
-const SelectorIcon = `export const SelectorIcon = () => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em">
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8 2v4m8-4v4" />
-      <rect height="18" rx="2" width="18" x="3" y="4" />
-      <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {DatePicker} from "@nextui-org/react";
-import {SelectorIcon} from './SelectorIcon';
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        selectorIcon={<SelectorIcon />}
-      />
-    </div> 
-  );
-}`;
+import App from "./selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-picker/time-zones.raw.jsx b/apps/docs/content/components/date-picker/time-zones.raw.jsx
new file mode 100644
index 0000000000..f2986331dd
--- /dev/null
+++ b/apps/docs/content/components/date-picker/time-zones.raw.jsx
@@ -0,0 +1,21 @@
+import {DatePicker} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DatePicker
+        className="max-w-xs"
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        label="Zoned Date Time"
+        labelPlacement="outside"
+      />
+      <DatePicker
+        className="max-w-xs"
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        label="Zoned Date Time"
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/time-zones.ts b/apps/docs/content/components/date-picker/time-zones.ts
index 85c1d3c554..803b4ec768 100644
--- a/apps/docs/content/components/date-picker/time-zones.ts
+++ b/apps/docs/content/components/date-picker/time-zones.ts
@@ -1,24 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-     <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DatePicker
-        label="Zoned Date Time"
-        className="max-w-xs"
-        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-        labelPlacement="outside"
-      />
-      <DatePicker
-        label="Zoned Date Time"
-        className="max-w-xs"
-        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-        labelPlacement="outside"
-      />
-  </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..fc8e72798e
--- /dev/null
+++ b/apps/docs/content/components/date-picker/unavailable-dates.raw.jsx
@@ -0,0 +1,30 @@
+import {DatePicker} from "@nextui-org/react";
+import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let now = today(getLocalTimeZone());
+
+  let disabledRanges = [
+    [now, now.add({days: 5})],
+    [now.add({days: 14}), now.add({days: 16})],
+    [now.add({days: 23}), now.add({days: 24})],
+  ];
+
+  let {locale} = useLocale();
+
+  let isDateUnavailable = (date) =>
+    isWeekend(date, locale) ||
+    disabledRanges.some(
+      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+    );
+
+  return (
+    <DatePicker
+      aria-label="Appointment date"
+      isDateUnavailable={isDateUnavailable}
+      label="Appointment date"
+      minValue={today(getLocalTimeZone())}
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-picker/unavailable-dates.ts b/apps/docs/content/components/date-picker/unavailable-dates.ts
index 93e0606772..b4e1f4df1a 100644
--- a/apps/docs/content/components/date-picker/unavailable-dates.ts
+++ b/apps/docs/content/components/date-picker/unavailable-dates.ts
@@ -1,33 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let now = today(getLocalTimeZone());
-
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let {locale} = useLocale();
-
-  let isDateUnavailable = (date) =>
-    isWeekend(date, locale) ||
-    disabledRanges.some(
-      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-    );
-
-  return (
-    <DatePicker
-      label="Appointment date"
-      aria-label="Appointment date"
-      isDateUnavailable={isDateUnavailable}
-      minValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/usage.raw.jsx b/apps/docs/content/components/date-picker/usage.raw.jsx
new file mode 100644
index 0000000000..d007f1291a
--- /dev/null
+++ b/apps/docs/content/components/date-picker/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return <DatePicker className="max-w-[284px]" label="Birth date" />;
+}
diff --git a/apps/docs/content/components/date-picker/usage.ts b/apps/docs/content/components/date-picker/usage.ts
index 2f3a5d5ca4..1118304c37 100644
--- a/apps/docs/content/components/date-picker/usage.ts
+++ b/apps/docs/content/components/date-picker/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DatePicker label="Birth date" className="max-w-[284px]" />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/variants.raw.jsx b/apps/docs/content/components/date-picker/variants.raw.jsx
new file mode 100644
index 0000000000..8111333b5a
--- /dev/null
+++ b/apps/docs/content/components/date-picker/variants.raw.jsx
@@ -0,0 +1,15 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <DatePicker label={"Birth date"} variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/variants.ts b/apps/docs/content/components/date-picker/variants.ts
index b31ec23aeb..ddea95fb2e 100644
--- a/apps/docs/content/components/date-picker/variants.ts
+++ b/apps/docs/content/components/date-picker/variants.ts
@@ -1,18 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <DatePicker label={"Birth date"} variant={variant} />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/visible-month.raw.jsx b/apps/docs/content/components/date-picker/visible-month.raw.jsx
new file mode 100644
index 0000000000..0143d03c4f
--- /dev/null
+++ b/apps/docs/content/components/date-picker/visible-month.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker label="Birth date" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/visible-month.ts b/apps/docs/content/components/date-picker/visible-month.ts
index 2e9f01b039..7c3a2abe6a 100644
--- a/apps/docs/content/components/date-picker/visible-month.ts
+++ b/apps/docs/content/components/date-picker/visible-month.ts
@@ -1,15 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DatePicker 
-        label="Birth date"
-        visibleMonths={2}
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-month.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx
new file mode 100644
index 0000000000..5047a454ea
--- /dev/null
+++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.raw.jsx
@@ -0,0 +1,9 @@
+import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DatePicker showMonthAndYearPickers label="Birth Date" variant="bordered" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
index eeb8ae32a1..5e5431496b 100644
--- a/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
+++ b/apps/docs/content/components/date-picker/with-month-and-year-pickers.ts
@@ -1,16 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DatePicker
-        label="Birth Date"
-        variant="bordered"
-        showMonthAndYearPickers
-      />
-    </div>
-  );
-}`;
+import App from "./with-month-and-year-pickers.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-picker/with-time-field.raw.jsx
new file mode 100644
index 0000000000..b6784d7ca8
--- /dev/null
+++ b/apps/docs/content/components/date-picker/with-time-field.raw.jsx
@@ -0,0 +1,16 @@
+import {DatePicker} from "@nextui-org/react";
+import {now, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DatePicker
+        hideTimeZone
+        showMonthAndYearPickers
+        defaultValue={now(getLocalTimeZone())}
+        label="Event Date"
+        variant="bordered"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-picker/with-time-field.ts b/apps/docs/content/components/date-picker/with-time-field.ts
index 54d597e371..8df135a004 100644
--- a/apps/docs/content/components/date-picker/with-time-field.ts
+++ b/apps/docs/content/components/date-picker/with-time-field.ts
@@ -1,19 +1,4 @@
-const App = `import {DatePicker} from "@nextui-org/react";
-import {now, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DatePicker
-        label="Event Date"
-        variant="bordered"
-        hideTimeZone
-        showMonthAndYearPickers
-        defaultValue={now(getLocalTimeZone())}
-      />
-    </div>
-  );
-}`;
+import App from "./with-time-field.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.jsx b/apps/docs/content/components/date-range-picker/controlled.raw.jsx
new file mode 100644
index 0000000000..fd7b3063f3
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/controlled.raw.jsx
@@ -0,0 +1,36 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/controlled.raw.tsx b/apps/docs/content/components/date-range-picker/controlled.raw.tsx
new file mode 100644
index 0000000000..868b5440f2
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/controlled.raw.tsx
@@ -0,0 +1,40 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate, getLocalTimeZone} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  const [value, setValue] = React.useState<RangeValue<DateValue>>({
+    start: parseDate("2024-04-01"),
+    end: parseDate("2024-04-08"),
+  });
+
+  let formatter = useDateFormatter({dateStyle: "long"});
+
+  return (
+    <div className="flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <DateRangePicker label="Date range (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          Selected date:{" "}
+          {value
+            ? formatter.formatRange(
+                value.start.toDate(getLocalTimeZone()),
+                value.end.toDate(getLocalTimeZone()),
+              )
+            : "--"}
+        </p>
+      </div>
+      <DateRangePicker
+        defaultValue={{
+          start: parseDate("2024-04-01"),
+          end: parseDate("2024-04-08"),
+        }}
+        label="Date range (uncontrolled)"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/controlled.ts b/apps/docs/content/components/date-range-picker/controlled.ts
index 12f5e4d8ae..1f1a363363 100644
--- a/apps/docs/content/components/date-range-picker/controlled.ts
+++ b/apps/docs/content/components/date-range-picker/controlled.ts
@@ -1,86 +1,5 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  const [value, setValue] = React.useState({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate, getLocalTimeZone} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-import {RangeValue} from "@react-types/shared";
-import {DateValue} from "@react-types/datepicker";
-
-export default function App() {
-  const [value, setValue] = React.useState<RangeValue<DateValue>>({
-    start: parseDate("2024-04-01"),
-    end: parseDate("2024-04-08"),
-  });
-
-  let formatter = useDateFormatter({dateStyle: "long"});
-
-  return (
-    <div className="flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <DateRangePicker
-          label="Date range (controlled)"
-          value={value}
-          onChange={setValue}
-        />
-        <p className="text-default-500 text-sm">
-          Selected date:{" "}
-          {value
-            ? formatter.formatRange(
-                value.start.toDate(getLocalTimeZone()),
-                value.end.toDate(getLocalTimeZone()),
-              )
-            : "--"}
-        </p>
-      </div>
-      <DateRangePicker
-        defaultValue={{
-          start: parseDate("2024-04-01"),
-          end: parseDate("2024-04-08"),
-        }}
-        label="Date range (uncontrolled)"
-      />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx
new file mode 100644
index 0000000000..17a676327c
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/custom-styles.raw.jsx
@@ -0,0 +1,33 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      calendarProps={{
+        classNames: {
+          base: "bg-background",
+          headerWrapper: "pt-4 bg-background",
+          prevButton: "border-1 border-default-200 rounded-small",
+          nextButton: "border-1 border-default-200 rounded-small",
+          gridHeader: "bg-background shadow-none border-b-1 border-default-100",
+          cellButton: [
+            "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
+            // start (pseudo)
+            "data-[range-start=true]:before:rounded-l-small",
+            "data-[selection-start=true]:before:rounded-l-small",
+            // end (pseudo)
+            "data-[range-end=true]:before:rounded-r-small",
+            "data-[selection-end=true]:before:rounded-r-small",
+            // start (selected)
+            "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
+            // end (selected)
+            "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
+          ],
+        },
+      }}
+      className="max-w-xs"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/custom-styles.ts b/apps/docs/content/components/date-range-picker/custom-styles.ts
index 6c11daf883..da3ea9093a 100644
--- a/apps/docs/content/components/date-range-picker/custom-styles.ts
+++ b/apps/docs/content/components/date-range-picker/custom-styles.ts
@@ -1,36 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-        calendarProps={{
-          classNames: {
-            base: "bg-background",
-            headerWrapper: "pt-4 bg-background",
-            prevButton: "border-1 border-default-200 rounded-small",
-            nextButton: "border-1 border-default-200 rounded-small",
-            gridHeader: "bg-background shadow-none border-b-1 border-default-100",
-            cellButton: [
-              "data-[today=true]:bg-default-100 data-[selected=true]:bg-transparent rounded-small",
-              // start (pseudo)
-              "data-[range-start=true]:before:rounded-l-small",
-              "data-[selection-start=true]:before:rounded-l-small",
-              // end (pseudo)
-              "data-[range-end=true]:before:rounded-r-small",
-              "data-[selection-end=true]:before:rounded-r-small",
-              // start (selected)
-              "data-[selected=true]:data-[selection-start=true]:data-[range-selection=true]:rounded-small",
-              // end (selected)
-              "data-[selected=true]:data-[selection-end=true]:data-[range-selection=true]:rounded-small",
-            ],
-          },
-      }}
-      className="max-w-xs"
-      label="Stay duration"
-      variant="bordered"
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/description.raw.jsx b/apps/docs/content/components/date-range-picker/description.raw.jsx
new file mode 100644
index 0000000000..0300812373
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/description.raw.jsx
@@ -0,0 +1,11 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      className="max-w-xs"
+      description="Please enter your stay duration"
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/description.ts b/apps/docs/content/components/date-range-picker/description.ts
index a81889d1bd..aeb6340b6b 100644
--- a/apps/docs/content/components/date-range-picker/description.ts
+++ b/apps/docs/content/components/date-range-picker/description.ts
@@ -1,14 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker
-      label="Stay duration"
-      description="Please enter your stay duration"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/disabled.raw.jsx b/apps/docs/content/components/date-range-picker/disabled.raw.jsx
new file mode 100644
index 0000000000..c1ac55a525
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/disabled.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isDisabled
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/disabled.ts b/apps/docs/content/components/date-range-picker/disabled.ts
index ea2ff51167..1a215cc91f 100644
--- a/apps/docs/content/components/date-range-picker/disabled.ts
+++ b/apps/docs/content/components/date-range-picker/disabled.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isDisabled
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx
new file mode 100644
index 0000000000..db1263f550
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/error-message-function.raw.jsx
@@ -0,0 +1,22 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter your stay duration";
+        }
+      }}
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/error-message-function.ts b/apps/docs/content/components/date-range-picker/error-message-function.ts
index 9e8cb16eab..1af0006141 100644
--- a/apps/docs/content/components/date-range-picker/error-message-function.ts
+++ b/apps/docs/content/components/date-range-picker/error-message-function.ts
@@ -1,25 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter your stay duration";
-        }
-      }}
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/error-message.raw.jsx b/apps/docs/content/components/date-range-picker/error-message.raw.jsx
new file mode 100644
index 0000000000..fe6d92e392
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/error-message.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isInvalid
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      errorMessage="Please enter your stay duration"
+      label="Stay duration"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/error-message.ts b/apps/docs/content/components/date-range-picker/error-message.ts
index ed0abd8ab5..fb8101b132 100644
--- a/apps/docs/content/components/date-range-picker/error-message.ts
+++ b/apps/docs/content/components/date-range-picker/error-message.ts
@@ -1,21 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      isInvalid
-      label="Stay duration" 
-      variant="bordered"
-      errorMessage="Please enter your stay duration"
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.jsx b/apps/docs/content/components/date-range-picker/granularity.raw.jsx
new file mode 100644
index 0000000000..46d82da6ac
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/granularity.raw.jsx
@@ -0,0 +1,28 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState({
+    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
+  });
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        fullWidth
+        granularity="second"
+        label="Date and time range"
+        value={date}
+        onChange={setDate}
+      />
+      <DateRangePicker
+        fullWidth
+        granularity="day"
+        label="Date range"
+        value={date}
+        onChange={setDate}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/granularity.raw.tsx b/apps/docs/content/components/date-range-picker/granularity.raw.tsx
new file mode 100644
index 0000000000..e1ec7fb919
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/granularity.raw.tsx
@@ -0,0 +1,32 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
+  });
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        fullWidth
+        granularity="second"
+        label="Date and time range"
+        value={date}
+        onChange={setDate}
+      />
+      <DateRangePicker
+        fullWidth
+        granularity="day"
+        label="Date range"
+        value={date}
+        onChange={setDate}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/granularity.ts b/apps/docs/content/components/date-range-picker/granularity.ts
index 10094d839a..6196832da6 100644
--- a/apps/docs/content/components/date-range-picker/granularity.ts
+++ b/apps/docs/content/components/date-range-picker/granularity.ts
@@ -1,67 +1,15 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState({
-    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
-  });
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        fullWidth
-        granularity="second"
-        label="Date and time range"
-        value={date}
-        onChange={setDate}
-      />
-      <DateRangePicker
-        fullWidth
-        granularity="day"
-        label="Date range"
-        value={date}
-        onChange={setDate}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
-
-export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
-    start: parseAbsoluteToLocal("2024-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2024-04-08T19:15:22Z"),
-  });
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        fullWidth
-        granularity="second"
-        label="Date and time range"
-        value={date}
-        onChange={setDate}
-      />
-      <DateRangePicker
-        fullWidth
-        granularity="day"
-        label="Date range"
-        value={date}
-        onChange={setDate}
-      />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-range-picker/index.ts b/apps/docs/content/components/date-range-picker/index.ts
index 313789ff29..2f64826bed 100644
--- a/apps/docs/content/components/date-range-picker/index.ts
+++ b/apps/docs/content/components/date-range-picker/index.ts
@@ -9,6 +9,7 @@ import errorMessage from "./error-message";
 import errorMessageFunction from "./error-message-function";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
+import selectorButtonPlacement from "./selector-button-placement";
 import controlled from "./controlled";
 import timeZones from "./time-zones";
 import granularity from "./granularity";
@@ -19,6 +20,7 @@ import visibleMonth from "./visible-month";
 import pageBehavior from "./page-behavior";
 import nonContigous from "./non-contiguous";
 import presets from "./presets";
+import withMonthAndYearPickers from "./with-month-and-year-pickers";
 import customStyles from "./custom-styles";
 
 export const dateRangePickerContent = {
@@ -33,6 +35,7 @@ export const dateRangePickerContent = {
   errorMessageFunction,
   withTimeField,
   selectorIcon,
+  selectorButtonPlacement,
   controlled,
   timeZones,
   granularity,
@@ -43,5 +46,6 @@ export const dateRangePickerContent = {
   pageBehavior,
   nonContigous,
   presets,
+  withMonthAndYearPickers,
   customStyles,
 };
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx
new file mode 100644
index 0000000000..75e82363c9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState({
+    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx
new file mode 100644
index 0000000000..c6eca23922
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/international-calendar.raw.tsx
@@ -0,0 +1,22 @@
+import type {RangeValue} from "@react-types/shared";
+import type {DateValue} from "@react-types/datepicker";
+
+import React from "react";
+import {DateRangePicker} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<RangeValue<DateValue>>({
+    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
+    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
+  });
+
+  return (
+    <div className="flex flex-col gap-4">
+      <I18nProvider locale="hi-IN-u-ca-indian">
+        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
+      </I18nProvider>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/international-calendar.ts b/apps/docs/content/components/date-range-picker/international-calendar.ts
index e28d31e8ea..a8707fd093 100644
--- a/apps/docs/content/components/date-range-picker/international-calendar.ts
+++ b/apps/docs/content/components/date-range-picker/international-calendar.ts
@@ -1,47 +1,15 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseAbsoluteToLocal} from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState({
-    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
-
-const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-import {DateValue, parseAbsoluteToLocal} from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
-    start: parseAbsoluteToLocal("2021-04-01T18:45:22Z"),
-    end: parseAbsoluteToLocal("2021-04-14T19:15:22Z"),
-  });
-
-  return (
-    <div className="flex flex-col gap-4">
-      <I18nProvider locale="hi-IN-u-ca-indian">
-        <DateRangePicker label="Stay duration" value={date} onChange={setDate} />
-      </I18nProvider>
-    </div>
-  );
-}`;
+import App from "./international-calendar.raw.jsx?raw";
+import AppTs from "./international-calendar.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/date-range-picker/label-placements.raw.jsx b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx
new file mode 100644
index 0000000000..1f5b70d378
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/label-placements.raw.jsx
@@ -0,0 +1,20 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        {placements.map((placement) => (
+          <DateRangePicker
+            key={placement}
+            description={placement}
+            label="Stay duration"
+            labelPlacement={placement}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/label-placements.ts b/apps/docs/content/components/date-range-picker/label-placements.ts
index ae0d8f4c5b..cd2a65d352 100644
--- a/apps/docs/content/components/date-range-picker/label-placements.ts
+++ b/apps/docs/content/components/date-range-picker/label-placements.ts
@@ -1,27 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        {placements.map((placement) => (
-          <DateRangePicker
-            key={placement}
-            label="Stay duration"
-            labelPlacement={placement}
-            description={placement}
-          />
-        ))}
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx
new file mode 100644
index 0000000000..b3557e1621
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/min-and-max-date.raw.jsx
@@ -0,0 +1,31 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <div className="w-full flex flex-col gap-1">
+        <h3>Min date</h3>
+        <DateRangePicker
+          defaultValue={{
+            start: today(getLocalTimeZone()).subtract({days: 1}),
+            end: parseDate("2024-04-08"),
+          }}
+          label="Date and time"
+          minValue={today(getLocalTimeZone())}
+        />
+      </div>
+      <div className="w-full flex flex-col gap-1">
+        <h3>Max date</h3>
+        <DateRangePicker
+          defaultValue={{
+            start: today(getLocalTimeZone()).subtract({days: 1}),
+            end: parseDate("2024-04-08"),
+          }}
+          label="Date and time"
+          maxValue={today(getLocalTimeZone())}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/min-and-max-date.ts b/apps/docs/content/components/date-range-picker/min-and-max-date.ts
index a1db8afe8f..be9af0fc43 100644
--- a/apps/docs/content/components/date-range-picker/min-and-max-date.ts
+++ b/apps/docs/content/components/date-range-picker/min-and-max-date.ts
@@ -1,34 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {getLocalTimeZone, parseDate, today} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <div className="w-full flex flex-col gap-1">
-        <h3>Min date</h3>
-        <DateRangePicker
-          label="Date and time"
-          minValue={today(getLocalTimeZone())}
-          defaultValue={{
-            start: today(getLocalTimeZone()).subtract({days: 1}),
-            end: parseDate("2024-04-08"),
-          }}
-        />
-      </div>
-      <div className="w-full flex flex-col gap-1">
-        <h3>Max date</h3>
-        <DateRangePicker
-          label="Date and time"
-          maxValue={today(getLocalTimeZone())}
-          defaultValue={{
-            start: today(getLocalTimeZone()).subtract({days: 1}),
-            end: parseDate("2024-04-08"),
-          }}
-        />
-      </div>
-    </div>
-  );
-}`;
+import App from "./min-and-max-date.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx
new file mode 100644
index 0000000000..ea418e7815
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/non-contiguous.raw.jsx
@@ -0,0 +1,17 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {isWeekend, today, getLocalTimeZone} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let {locale} = useLocale();
+
+  return (
+    <DateRangePicker
+      allowsNonContiguousRanges
+      isDateUnavailable={(date) => isWeekend(date, locale)}
+      label="Time off request"
+      minValue={today(getLocalTimeZone())}
+      visibleMonths={2}
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/non-contiguous.ts b/apps/docs/content/components/date-range-picker/non-contiguous.ts
index a85e7f570e..1d0c412e68 100644
--- a/apps/docs/content/components/date-range-picker/non-contiguous.ts
+++ b/apps/docs/content/components/date-range-picker/non-contiguous.ts
@@ -1,20 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {isWeekend, today, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let {locale} = useLocale();
-
-  return (
-    <DateRangePicker
-      allowsNonContiguousRanges
-      isDateUnavailable={(date) => isWeekend(date, locale)}
-      label="Time off request"
-      minValue={today(getLocalTimeZone())}
-      visibleMonths={2}
-    />
-  );
-}`;
+import App from "./non-contiguous.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx
new file mode 100644
index 0000000000..a7493015c9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/page-behavior.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Birth date" pageBehavior="single" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/page-behavior.ts b/apps/docs/content/components/date-range-picker/page-behavior.ts
index 49d92881d7..70c2ebfd2f 100644
--- a/apps/docs/content/components/date-range-picker/page-behavior.ts
+++ b/apps/docs/content/components/date-range-picker/page-behavior.ts
@@ -1,16 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Birth date"
-        visibleMonths={2}
-        pageBehavior="single"
-      />
-    </div> 
-  );
-}`;
+import App from "./page-behavior.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/presets.raw.jsx b/apps/docs/content/components/date-range-picker/presets.raw.jsx
new file mode 100644
index 0000000000..6a14eaf429
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/presets.raw.jsx
@@ -0,0 +1,122 @@
+import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {
+  today,
+  startOfWeek,
+  startOfMonth,
+  endOfWeek,
+  endOfMonth,
+  getLocalTimeZone,
+} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let defaultDate = {
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({days: 7}),
+  };
+  let [value, setValue] = React.useState(defaultDate);
+
+  let {locale} = useLocale();
+  let formatter = useDateFormatter({dateStyle: "full"});
+  let now = today(getLocalTimeZone());
+  let nextWeek = {
+    start: startOfWeek(now.add({weeks: 1}), locale),
+    end: endOfWeek(now.add({weeks: 1}), locale),
+  };
+  let nextMonth = {
+    start: startOfMonth(now.add({months: 1})),
+    end: endOfMonth(now.add({months: 1})),
+  };
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DateRangePicker
+        CalendarBottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper:
+                "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        CalendarTopContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button
+              onPress={() =>
+                setValue({
+                  start: now,
+                  end: now.add({days: 7}),
+                })
+              }
+            >
+              This week
+            </Button>
+            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
+            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
+          </ButtonGroup>
+        }
+        calendarProps={{
+          focusedValue: value.start,
+          onFocusChange: (val) => setValue({...value, start: val}),
+          nextButtonProps: {
+            variant: "bordered",
+          },
+          prevButtonProps: {
+            variant: "bordered",
+          },
+        }}
+        label="Event date"
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 text-sm">
+        Selected date:{" "}
+        {value
+          ? formatter.formatRange(
+              value.start.toDate(getLocalTimeZone()),
+              value.end.toDate(getLocalTimeZone()),
+            )
+          : "--"}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/presets.ts b/apps/docs/content/components/date-range-picker/presets.ts
index 6bf954195b..a73828a679 100644
--- a/apps/docs/content/components/date-range-picker/presets.ts
+++ b/apps/docs/content/components/date-range-picker/presets.ts
@@ -1,241 +1,7 @@
-const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
-import {useLocale, useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let defaultDate = {
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({days: 7}),
-  };
-  let [value, setValue] = React.useState(defaultDate);
-
-  let {locale} = useLocale();
-  let formatter = useDateFormatter({dateStyle: "full"});
-  let now = today(getLocalTimeZone());
-  let nextWeek = {
-    start: startOfWeek(now.add({weeks: 1}), locale),
-    end: endOfWeek(now.add({weeks: 1}), locale),
-  };
-  let nextMonth = {
-    start: startOfMonth(now.add({months: 1})),
-    end: endOfMonth(now.add({months: 1})),
-  };
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4 w-full max-w-sm">
-      <DateRangePicker
-        CalendarBottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper:
-                "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        CalendarTopContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button
-              onPress={() =>
-                setValue({
-                  start: now,
-                  end: now.add({days: 7}),
-                })
-              }
-            >
-              This week
-            </Button>
-            <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-            <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-          </ButtonGroup>
-        }
-        calendarProps={{
-          focusedValue: value?.start,
-          onFocusChange: (val) => setValue({...value, start: val}),
-          nextButtonProps: {
-            variant: "bordered",
-          },
-          prevButtonProps: {
-            variant: "bordered",
-          },
-        }}
-        value={value}
-        onChange={setValue}
-        label="Event date"
-      />
-      <p className="text-default-500 text-sm">
-        Selected date:{" "}
-        {value
-          ? formatter.formatRange(
-              value.start.toDate(getLocalTimeZone()),
-              value.end.toDate(getLocalTimeZone()),
-            )
-          : "--"}
-      </p>
-    </div>
-  );
-}`;
-
-// const AppTs = `import {DateRangePicker} from "@nextui-org/react";
-// import {now, today, startOfWeek, startOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-// import {useLocale} from "@react-aria/i18n";
-// import {RangeValue} from "@react-types/shared";
-
-// export default function App() {
-//   let defaultDate = {
-//     start: today(getLocalTimeZone()),
-//     end: today(getLocalTimeZone()).add({days: 7}),
-//   };
-
-//   const [value, setValue] = React.useState<RangeValue<DateValue>>(defaultDate);
-
-//   let {locale} = useLocale();
-//   let formatter = useDateFormatter({dateStyle: "full"});
-
-//   let now = today(getLocalTimeZone());
-//   let nextWeek = {
-//     start: startOfWeek(now.add({weeks: 1}), locale),
-//     end: endOfWeek(now.add({weeks: 1}), locale),
-//   };
-//   let nextMonth = {
-//     start: startOfMonth(now.add({months: 1})),
-//     end: endOfMonth(now.add({months: 1})),
-//   };
-
-//   const CustomRadio = (props) => {
-//     const {children, ...otherProps} = props;
-
-//     return (
-//       <Radio
-//         {...otherProps}
-//         classNames={{
-//           base: cn(
-//             "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-//             "cursor-pointer rounded-full border-2 border-default-200/60",
-//             "data-[selected=true]:border-primary",
-//           ),
-//           label: "text-tiny text-default-500",
-//           labelWrapper: "px-1 m-0",
-//           wrapper: "hidden",
-//         }}
-//       >
-//         {children}
-//       </Radio>
-//     );
-//   };
-
-//   return (
-//     <div className="flex flex-col gap-4 w-full max-w-sm">
-//       <DateRangePicker
-//         CalendarBottomContent={
-//           <RadioGroup
-//             aria-label="Date precision"
-//             classNames={{
-//               base: "w-full pb-2",
-//               wrapper:
-//                 "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[w-[calc(var(--visible-months)_*_var(--calendar-width))]] overflow-scroll",
-//             }}
-//             defaultValue="exact_dates"
-//             orientation="horizontal"
-//           >
-//             <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-//             <CustomRadio value="1_day">1 day</CustomRadio>
-//             <CustomRadio value="2_days">2 days</CustomRadio>
-//             <CustomRadio value="3_days">3 days</CustomRadio>
-//             <CustomRadio value="7_days">7 days</CustomRadio>
-//             <CustomRadio value="14_days">14 days</CustomRadio>
-//           </RadioGroup>
-//         }
-//         CalendarTopContent={
-//           <ButtonGroup
-//             fullWidth
-//             className="px-3 pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-//             radius="full"
-//             size="sm"
-//             variant="bordered"
-//           >
-//             <Button
-//               onPress={() =>
-//                 setValue({
-//                   start: now,
-//                   end: now.add({days: 7}),
-//                 })
-//               }
-//             >
-//               This week
-//             </Button>
-//             <Button onPress={() => setValue(nextWeek)}>Next week</Button>
-//             <Button onPress={() => setValue(nextMonth)}>Next month</Button>
-//           </ButtonGroup>
-//         }
-//         calendarProps={{
-//           focusedValue: value.start,
-//           onFocusChange: (val) => setValue({...value, start: val}),
-//           nextButtonProps: {
-//             variant: "bordered",
-//           },
-//           prevButtonProps: {
-//             variant: "bordered",
-//           },
-//         }}
-//         value={value}
-//         onChange={setValue}
-//         label="Event date"
-//       />
-//       <p className="text-default-500 text-sm">
-//         Selected date:{" "}
-//         {value
-//           ? formatter.formatRange(
-//               value.start.toDate(getLocalTimeZone()),
-//               value.end.toDate(getLocalTimeZone()),
-//             )
-//           : "--"}
-//       </p>
-//     </div>
-//   );
-// }`;
+import App from "./presets.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  // "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-range-picker/readonly.raw.jsx b/apps/docs/content/components/date-range-picker/readonly.raw.jsx
new file mode 100644
index 0000000000..11e281d0a9
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/readonly.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isReadOnly
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/readonly.ts b/apps/docs/content/components/date-range-picker/readonly.ts
index 4ac98ed8b4..fabd05ba36 100644
--- a/apps/docs/content/components/date-range-picker/readonly.ts
+++ b/apps/docs/content/components/date-range-picker/readonly.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isReadOnly
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/required.raw.jsx b/apps/docs/content/components/date-range-picker/required.raw.jsx
new file mode 100644
index 0000000000..8076e8e767
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/required.raw.jsx
@@ -0,0 +1,16 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker
+      isRequired
+      className="max-w-xs"
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      label="Stay duration"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/required.ts b/apps/docs/content/components/date-range-picker/required.ts
index c3c9e0bbd1..b50b781e6f 100644
--- a/apps/docs/content/components/date-range-picker/required.ts
+++ b/apps/docs/content/components/date-range-picker/required.ts
@@ -1,19 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseDate} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      isRequired
-      defaultValue={{
-        start: parseDate("2024-04-01"),
-        end: parseDate("2024-04-08"),
-      }}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx
new file mode 100644
index 0000000000..f8f253caf7
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/selector-button-placement.raw.jsx
@@ -0,0 +1,10 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Placement start" selectorButtonPlacement="start" />
+      <DateRangePicker label="Placement end (default)" selectorButtonPlacement="end" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/selector-button-placement.ts b/apps/docs/content/components/date-range-picker/selector-button-placement.ts
new file mode 100644
index 0000000000..2d69e80fe8
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/selector-button-placement.ts
@@ -0,0 +1,9 @@
+import App from "./selector-button-placement.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx
new file mode 100644
index 0000000000..0df488b234
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/selector-icon.raw.jsx
@@ -0,0 +1,27 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export const SelectorIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      >
+        <path d="M8 2v4m8-4v4" />
+        <rect height="18" rx="2" width="18" x="3" y="4" />
+        <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Stay duration" selectorIcon={<SelectorIcon className="text-xl" />} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/selector-icon.ts b/apps/docs/content/components/date-range-picker/selector-icon.ts
index 10e4eeb89d..9997d508de 100644
--- a/apps/docs/content/components/date-range-picker/selector-icon.ts
+++ b/apps/docs/content/components/date-range-picker/selector-icon.ts
@@ -1,35 +1,7 @@
-const SelectorIcon = `export const SelectorIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    >
-      <path d="M8 2v4m8-4v4" />
-      <rect height="18" rx="2" width="18" x="3" y="4" />
-      <path d="M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {SelectorIcon} from './SelectorIcon';
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Stay duration"
-        selectorIcon={<SelectorIcon className="text-xl" />}
-      />
-    </div> 
-  );
-}`;
+import App from "./selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/date-range-picker/time-zones.raw.jsx b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx
new file mode 100644
index 0000000000..b353f82593
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/time-zones.raw.jsx
@@ -0,0 +1,25 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <DateRangePicker
+        defaultValue={{
+          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
+          end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
+        }}
+        label="Stay duration"
+        labelPlacement="outside"
+      />
+      <DateRangePicker
+        defaultValue={{
+          start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
+          end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
+        }}
+        label="Stay duration"
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/time-zones.ts b/apps/docs/content/components/date-range-picker/time-zones.ts
index ac08becc56..803b4ec768 100644
--- a/apps/docs/content/components/date-range-picker/time-zones.ts
+++ b/apps/docs/content/components/date-range-picker/time-zones.ts
@@ -1,28 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <DateRangePicker
-        defaultValue={{
-          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
-          end: parseZonedDateTime("2024-04-14T11:15[America/Los_Angeles]"),
-        }}
-        label="Stay duration"
-        labelPlacement="outside"
-      />
-      <DateRangePicker
-        defaultValue={{
-          start: parseAbsoluteToLocal("2024-04-01T07:45:00Z"),
-          end: parseAbsoluteToLocal("2024-04-14T19:15:00Z"),
-        }}
-        label="Stay duration"
-        labelPlacement="outside"
-      />
-    </div>
-  );
-}`;
+import App from "./time-zones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..3e2324f44d
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/unavailable-dates.raw.jsx
@@ -0,0 +1,33 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let now = today(getLocalTimeZone());
+
+  let disabledRanges = [
+    [now, now.add({days: 5})],
+    [now.add({days: 14}), now.add({days: 16})],
+    [now.add({days: 23}), now.add({days: 24})],
+  ];
+
+  return (
+    <DateRangePicker
+      isDateUnavailable={(date) =>
+        disabledRanges.some(
+          (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+        )
+      }
+      label="Stay duration"
+      minValue={today(getLocalTimeZone())}
+      validate={(value) =>
+        disabledRanges.some(
+          (interval) =>
+            value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0,
+        )
+          ? "Selected date range may not include unavailable dates."
+          : null
+      }
+      validationBehavior="native"
+    />
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/unavailable-dates.ts b/apps/docs/content/components/date-range-picker/unavailable-dates.ts
index c300b5fc5b..b4e1f4df1a 100644
--- a/apps/docs/content/components/date-range-picker/unavailable-dates.ts
+++ b/apps/docs/content/components/date-range-picker/unavailable-dates.ts
@@ -1,36 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let now = today(getLocalTimeZone());
-
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  return (
-    <DateRangePicker
-      label="Stay duration"
-      isDateUnavailable={(date) =>
-        disabledRanges.some(
-          (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-        )
-      }
-      minValue={today(getLocalTimeZone())}
-      validate={(value) =>
-        disabledRanges.some(
-          (interval) =>
-            value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0,
-        )
-          ? "Selected date range may not include unavailable dates."
-          : null
-      }
-      validationBehavior="native"
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/usage.raw.jsx b/apps/docs/content/components/date-range-picker/usage.raw.jsx
new file mode 100644
index 0000000000..0eacc56b4e
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return <DateRangePicker className="max-w-xs" label="Stay duration" />;
+}
diff --git a/apps/docs/content/components/date-range-picker/usage.ts b/apps/docs/content/components/date-range-picker/usage.ts
index b83666a5cb..1118304c37 100644
--- a/apps/docs/content/components/date-range-picker/usage.ts
+++ b/apps/docs/content/components/date-range-picker/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <DateRangePicker 
-      label="Stay duration" 
-      className="max-w-xs" 
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/variants.raw.jsx b/apps/docs/content/components/date-range-picker/variants.raw.jsx
new file mode 100644
index 0000000000..5f20d0946b
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/variants.raw.jsx
@@ -0,0 +1,15 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <DateRangePicker className="max-w-xs" label="Stay duration" variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/variants.ts b/apps/docs/content/components/date-range-picker/variants.ts
index 668f9c83fe..ddea95fb2e 100644
--- a/apps/docs/content/components/date-range-picker/variants.ts
+++ b/apps/docs/content/components/date-range-picker/variants.ts
@@ -1,22 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <DateRangePicker 
-            variant={variant} 
-            label="Stay duration" 
-            className="max-w-xs" 
-          />
-        </div>
-      ))}
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/visible-month.raw.jsx b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx
new file mode 100644
index 0000000000..a45041c3da
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/visible-month.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateRangePicker label="Stay duration" visibleMonths={2} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/visible-month.ts b/apps/docs/content/components/date-range-picker/visible-month.ts
index 0f30be2412..7c3a2abe6a 100644
--- a/apps/docs/content/components/date-range-picker/visible-month.ts
+++ b/apps/docs/content/components/date-range-picker/visible-month.ts
@@ -1,15 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <DateRangePicker 
-        label="Stay duration"
-        visibleMonths={2}
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-month.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx
new file mode 100644
index 0000000000..3107c1c489
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.raw.jsx
@@ -0,0 +1,9 @@
+import {DateRangePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateRangePicker showMonthAndYearPickers label="Birth Date" variant="bordered" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
new file mode 100644
index 0000000000..5e5431496b
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/with-month-and-year-pickers.ts
@@ -0,0 +1,9 @@
+import App from "./with-month-and-year-pickers.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx
new file mode 100644
index 0000000000..e988e95839
--- /dev/null
+++ b/apps/docs/content/components/date-range-picker/with-time-field.raw.jsx
@@ -0,0 +1,18 @@
+import {DateRangePicker} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-row gap-4">
+      <DateRangePicker
+        hideTimeZone
+        defaultValue={{
+          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
+          end: parseZonedDateTime("2024-04-08T11:15[America/Los_Angeles]"),
+        }}
+        label="Event duration"
+        visibleMonths={2}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/date-range-picker/with-time-field.ts b/apps/docs/content/components/date-range-picker/with-time-field.ts
index 318f9f3770..8df135a004 100644
--- a/apps/docs/content/components/date-range-picker/with-time-field.ts
+++ b/apps/docs/content/components/date-range-picker/with-time-field.ts
@@ -1,21 +1,4 @@
-const App = `import {DateRangePicker} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-row gap-4">
-      <DateRangePicker
-        label="Event duration"
-        hideTimeZone
-        visibleMonths={2}
-        defaultValue={{
-          start: parseZonedDateTime("2024-04-01T00:45[America/Los_Angeles]"),
-          end: parseZonedDateTime("2024-04-08T11:15[America/Los_Angeles]"),
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./with-time-field.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/divider/usage.raw.jsx b/apps/docs/content/components/divider/usage.raw.jsx
new file mode 100644
index 0000000000..580e85126f
--- /dev/null
+++ b/apps/docs/content/components/divider/usage.raw.jsx
@@ -0,0 +1,20 @@
+import {Divider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="max-w-md">
+      <div className="space-y-1">
+        <h4 className="text-medium font-medium">NextUI Components</h4>
+        <p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
+      </div>
+      <Divider className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-small">
+        <div>Blog</div>
+        <Divider orientation="vertical" />
+        <div>Docs</div>
+        <Divider orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/divider/usage.ts b/apps/docs/content/components/divider/usage.ts
index d3509c6414..1118304c37 100644
--- a/apps/docs/content/components/divider/usage.ts
+++ b/apps/docs/content/components/divider/usage.ts
@@ -1,23 +1,4 @@
-const App = `import {Divider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="max-w-md">
-      <div className="space-y-1">
-        <h4 className="text-medium font-medium">NextUI Components</h4>
-        <p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
-      </div>
-      <Divider className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-small">
-        <div>Blog</div>
-        <Divider orientation="vertical" />
-        <div>Docs</div>
-        <Divider orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/drawer/backdrop.raw.jsx b/apps/docs/content/components/drawer/backdrop.raw.jsx
new file mode 100644
index 0000000000..2985ae2612
--- /dev/null
+++ b/apps/docs/content/components/drawer/backdrop.raw.jsx
@@ -0,0 +1,134 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+  Input,
+  Checkbox,
+  Link,
+} from "@nextui-org/react";
+
+export const MailIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const LockIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [backdrop, setBackdrop] = React.useState("opaque");
+
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const handleBackdropChange = (backdrop) => {
+    setBackdrop(backdrop);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex gap-2">
+        {backdrops.map((backdrop) => (
+          <Button
+            key={backdrop}
+            className="capitalize"
+            color="primary"
+            variant="flat"
+            onPress={() => handleBackdropChange(backdrop)}
+          >
+            {backdrop}
+          </Button>
+        ))}
+      </div>
+      <Drawer backdrop={backdrop} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+              <DrawerBody>
+                <Input
+                  endContent={
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Email"
+                  placeholder="Enter your email"
+                  variant="bordered"
+                />
+                <Input
+                  endContent={
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  variant="bordered"
+                />
+                <div className="flex py-2 px-1 justify-between">
+                  <Checkbox
+                    classNames={{
+                      label: "text-small",
+                    }}
+                  >
+                    Remember me
+                  </Checkbox>
+                  <Link color="primary" href="#" size="sm">
+                    Forgot password?
+                  </Link>
+                </div>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="flat" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Sign in
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/backdrop.ts b/apps/docs/content/components/drawer/backdrop.ts
new file mode 100644
index 0000000000..53412b0f5b
--- /dev/null
+++ b/apps/docs/content/components/drawer/backdrop.ts
@@ -0,0 +1,9 @@
+import App from "./backdrop.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/custom-motion.raw.jsx b/apps/docs/content/components/drawer/custom-motion.raw.jsx
new file mode 100644
index 0000000000..6baf7f42f4
--- /dev/null
+++ b/apps/docs/content/components/drawer/custom-motion.raw.jsx
@@ -0,0 +1,61 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer
+        isOpen={isOpen}
+        motionProps={{
+          variants: {
+            enter: {
+              opacity: 1,
+              x: 0,
+              duration: 0.3,
+            },
+            exit: {
+              x: 100,
+              opacity: 0,
+              duration: 0.3,
+            },
+          },
+        }}
+        onOpenChange={onOpenChange}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Custom Motion Drawer</DrawerHeader>
+              <DrawerBody>
+                <p>This drawer has custom enter/exit animations.</p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/custom-motion.ts b/apps/docs/content/components/drawer/custom-motion.ts
new file mode 100644
index 0000000000..389f462ddd
--- /dev/null
+++ b/apps/docs/content/components/drawer/custom-motion.ts
@@ -0,0 +1,9 @@
+import App from "./custom-motion.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/custom-styles.raw.jsx b/apps/docs/content/components/drawer/custom-styles.raw.jsx
new file mode 100644
index 0000000000..d0aa226285
--- /dev/null
+++ b/apps/docs/content/components/drawer/custom-styles.raw.jsx
@@ -0,0 +1,342 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+  Image,
+  Link,
+  Tooltip,
+  Avatar,
+  AvatarGroup,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button
+        color="primary"
+        endContent={
+          <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.75 1.25a.75.75 0 1 0-1.5 0v.823l-.392.044c-.9.121-1.658.38-2.26.982s-.861 1.36-.982 2.26C.5 6.225.5 7.328.5 8.695v.11l.117 3.337c.121.9.38 1.658.982 2.26s1.36.861 2.26.982c.867.117 1.969.117 3.337.117h1.658l3.337-.117c.9-.121 1.658-.38 2.26-.982s.861-1.36.982-2.26c.117-.867.117-1.969.117-3.337v-.11l-.117-3.337c-.121-.9-.38-1.658-.982-2.26s-1.36-.861-2.26-.982l-.44-.048V1.25a.75.75 0 0 0-1.5 0v.756L8.853 2H7.195q-.78-.002-1.445.006zm4.5 3v-.744L8.798 3.5H7.25l-1.5.007v.743a.75.75 0 1 1-1.5 0v-.67l-.192.023c-.734.099-1.122.279-1.399.556s-.457.665-.556 1.399C2.002 6.313 2 7.315 2 8.75l.103 3.192c.099.734.279 1.122.556 1.399s.665.457 1.399.556c.755.101 1.756.103 3.192.103h1.548l3.192-.103c.734-.099 1.122-.279 1.399-.556s.457-.665.556-1.399c.102-.755.103-1.757.103-3.192l-.103-3.192c-.099-.734-.279-1.122-.556-1.399s-.665-.457-1.399-.556l-.241-.028v.675a.75.75 0 0 1-1.5 0zm-5 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0m0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M8 8.5A.75.75 0 1 0 8 7a.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M11.5 8.5a.75.75 0 1 0 0-1.5.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        }
+        variant="flat"
+        onPress={onOpen}
+      >
+        See Event
+      </Button>
+      <Drawer
+        hideCloseButton
+        backdrop="blur"
+        classNames={{
+          base: "data-[placement=right]:sm:m-2 data-[placement=left]:sm:m-2  rounded-medium",
+        }}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="absolute top-0 inset-x-0 z-50 flex flex-row gap-2 px-2 py-2 border-b border-default-200/50 justify-between bg-content1/50 backdrop-saturate-150 backdrop-blur-lg">
+                <Tooltip content="Close">
+                  <Button
+                    isIconOnly
+                    className="text-default-400"
+                    size="sm"
+                    variant="light"
+                    onPress={onClose}
+                  >
+                    <svg
+                      fill="none"
+                      height="20"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="m13 17 5-5-5-5M6 17l5-5-5-5" />
+                    </svg>
+                  </Button>
+                </Tooltip>
+                <div className="w-full flex justify-start gap-2">
+                  <Button
+                    className="font-medium text-small text-default-500"
+                    size="sm"
+                    startContent={
+                      <svg
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.85.75c-.908 0-1.702.328-2.265.933-.558.599-.835 1.41-.835 2.29V7.88c0 .801.23 1.548.697 2.129.472.587 1.15.96 1.951 1.06a.75.75 0 1 0 .185-1.489c-.435-.054-.752-.243-.967-.51-.219-.273-.366-.673-.366-1.19V3.973c0-.568.176-.993.433-1.268.25-.27.632-.455 1.167-.455h4.146c.479 0 .828.146 1.071.359.246.215.43.54.497.979a.75.75 0 0 0 1.483-.23c-.115-.739-.447-1.4-.99-1.877C9.51 1 8.796.75 7.996.75zM7.9 4.828c-.908 0-1.702.326-2.265.93-.558.6-.835 1.41-.835 2.29v3.905c0 .879.275 1.69.833 2.289.563.605 1.357.931 2.267.931h4.144c.91 0 1.705-.326 2.268-.931.558-.599.833-1.41.833-2.289V8.048c0-.879-.275-1.69-.833-2.289-.563-.605-1.357-.931-2.267-.931zm-1.6 3.22c0-.568.176-.992.432-1.266.25-.27.632-.454 1.168-.454h4.145c.54 0 .92.185 1.17.453.255.274.43.698.43 1.267v3.905c0 .569-.175.993-.43 1.267-.25.268-.631.453-1.17.453H7.898c-.54 0-.92-.185-1.17-.453-.255-.274-.43-.698-.43-1.267z"
+                          fill="currentColor"
+                          fillRule="evenodd"
+                        />
+                      </svg>
+                    }
+                    variant="flat"
+                  >
+                    Copy Link
+                  </Button>
+                  <Button
+                    className="font-medium text-small text-default-500"
+                    endContent={
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M7 17 17 7M7 7h10v10" />
+                      </svg>
+                    }
+                    size="sm"
+                    variant="flat"
+                  >
+                    Event Page
+                  </Button>
+                </div>
+                <div className="flex gap-1 items-center">
+                  <Tooltip content="Previous">
+                    <Button isIconOnly className="text-default-500" size="sm" variant="flat">
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="m18 15-6-6-6 6" />
+                      </svg>
+                    </Button>
+                  </Tooltip>
+                  <Tooltip content="Next">
+                    <Button isIconOnly className="text-default-500" size="sm" variant="flat">
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="m6 9 6 6 6-6" />
+                      </svg>
+                    </Button>
+                  </Tooltip>
+                </div>
+              </DrawerHeader>
+              <DrawerBody className="pt-16">
+                <div className="flex w-full justify-center items-center pt-4">
+                  <Image
+                    isBlurred
+                    isZoomed
+                    alt="Event image"
+                    className="aspect-square w-full hover:scale-110"
+                    height={300}
+                    src="https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/places/san-francisco.png"
+                  />
+                </div>
+                <div className="flex flex-col gap-2 py-4">
+                  <h1 className="text-2xl font-bold leading-7">SF Bay Area Meetup in November</h1>
+                  <p className="text-sm text-default-500">
+                    555 California St, San Francisco, CA 94103
+                  </p>
+                  <div className="mt-4 flex flex-col gap-3">
+                    <div className="flex gap-3 items-center">
+                      <div className="flex-none border-1 border-default-200/50 rounded-small text-center w-11 overflow-hidden">
+                        <div className="text-tiny bg-default-100 py-0.5 text-default-500">Nov</div>
+                        <div className="flex items-center justify-center font-semibold text-medium h-6 text-default-500">
+                          19
+                        </div>
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <p className="text-medium text-foreground font-medium">
+                          Tuesday, November 19
+                        </p>
+                        <p className="text-small text-default-500">5:00 PM - 9:00 PM PST</p>
+                      </div>
+                    </div>
+                    <div className="flex gap-3 items-center">
+                      <div className="flex items-center justify-center border-1 border-default-200/50 rounded-small w-11 h-11">
+                        <svg
+                          className="text-default-500"
+                          height="20"
+                          viewBox="0 0 16 16"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            fill="none"
+                            fillRule="evenodd"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="1.5"
+                          >
+                            <path d="M2 6.854C2 11.02 7.04 15 8 15s6-3.98 6-8.146C14 3.621 11.314 1 8 1S2 3.62 2 6.854" />
+                            <path d="M9.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+                          </g>
+                        </svg>
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <Link
+                          isExternal
+                          showAnchorIcon
+                          anchorIcon={
+                            <svg
+                              className="group-hover:text-inherit text-default-400 transition-[color,transform] group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+                              fill="none"
+                              height="16"
+                              stroke="currentColor"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              viewBox="0 0 24 24"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path d="M7 17 17 7M7 7h10v10" />
+                            </svg>
+                          }
+                          className="group gap-x-0.5 text-medium text-foreground font-medium"
+                          href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103"
+                          rel="noreferrer noopener"
+                        >
+                          555 California St suite 500
+                        </Link>
+                        <p className="text-small text-default-500">San Francisco, California</p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-medium font-medium">About the event</span>
+                      <div className="text-medium text-default-500 flex flex-col gap-2">
+                        <p>
+                          Hey Bay Area! We are excited to announce our next meetup on Tuesday,
+                          November 19th.
+                        </p>
+                        <p>
+                          Join us for an evening of insightful discussions and hands-on workshops
+                          focused on the latest developments in web development and design. Our
+                          featured speakers will share their experiences with modern frontend
+                          frameworks, responsive design patterns, and emerging web technologies.
+                          You&apos;ll have the opportunity to network with fellow developers and
+                          designers while enjoying refreshments and snacks.
+                        </p>
+                        <p>
+                          During the main session, we&apos;ll dive deep into practical examples of
+                          building scalable applications, exploring best practices for component
+                          architecture, and understanding advanced state management techniques. Our
+                          interactive workshop portion will let you apply these concepts directly,
+                          with experienced mentors available to provide guidance and answer your
+                          questions. Whether you&apos;re a seasoned developer or just starting your
+                          journey, you&apos;ll find valuable takeaways from this session.
+                        </p>
+
+                        <p className="mt-4">
+                          Brought to you by the{" "}
+                          <Link className="text-default-700" href="https://nextui.org">
+                            NextUI team
+                          </Link>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-small text-default-500">Hosted By</span>
+                      <div className="flex gap-2 items-center">
+                        <Avatar
+                          name="NextUI"
+                          size="sm"
+                          src="https://nextui.org/android-chrome-192x192.png"
+                        />
+                        <span className="text-small text-default-500">NextUI Team</span>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-small text-default-500">105 Going</span>
+                      <div className="flex gap-2 items-center">
+                        <AvatarGroup
+                          isBordered
+                          classNames={{
+                            base: "pl-2",
+                            count: "text-default-500 text-tiny bg-default-100",
+                          }}
+                          size="sm"
+                          total={101}
+                        >
+                          <Tooltip content="Alex">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Alex"
+                              src="https://i.pravatar.cc/150?u=a04258114e29026708c"
+                            />
+                          </Tooltip>
+                          <Tooltip content="Joe">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Joe"
+                              src="https://i.pravatar.cc/150?u=a04258114e290267084"
+                            />
+                          </Tooltip>
+                          <Tooltip content="John">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="John"
+                              src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
+                            />
+                          </Tooltip>
+                          <Tooltip content="Jane">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Jane"
+                              src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+                            />
+                          </Tooltip>
+                        </AvatarGroup>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </DrawerBody>
+              <DrawerFooter className="flex flex-col gap-1">
+                <Link className="text-default-400" href="mailto:hello@nextui.org" size="sm">
+                  Contact the host
+                </Link>
+                <Link className="text-default-400" href="mailto:hello@nextui.org" size="sm">
+                  Report event
+                </Link>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/custom-styles.ts b/apps/docs/content/components/drawer/custom-styles.ts
new file mode 100644
index 0000000000..da3ea9093a
--- /dev/null
+++ b/apps/docs/content/components/drawer/custom-styles.ts
@@ -0,0 +1,9 @@
+import App from "./custom-styles.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/form.raw.jsx b/apps/docs/content/components/drawer/form.raw.jsx
new file mode 100644
index 0000000000..9198594672
--- /dev/null
+++ b/apps/docs/content/components/drawer/form.raw.jsx
@@ -0,0 +1,116 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+  Input,
+  Checkbox,
+  Link,
+} from "@nextui-org/react";
+
+export const MailIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const LockIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button color="warning" variant="flat" onPress={onOpen}>
+        Open Drawer
+      </Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+              <DrawerBody>
+                <Input
+                  endContent={
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Email"
+                  placeholder="Enter your email"
+                  variant="bordered"
+                />
+                <Input
+                  endContent={
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  variant="bordered"
+                />
+                <div className="flex py-2 px-1 justify-between">
+                  <Checkbox
+                    classNames={{
+                      label: "text-small",
+                    }}
+                  >
+                    Remember me
+                  </Checkbox>
+                  <Link color="primary" href="#" size="sm">
+                    Forgot password?
+                  </Link>
+                </div>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="flat" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Sign in
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/form.ts b/apps/docs/content/components/drawer/form.ts
new file mode 100644
index 0000000000..c9bad48bd2
--- /dev/null
+++ b/apps/docs/content/components/drawer/form.ts
@@ -0,0 +1,9 @@
+import App from "./form.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/index.ts b/apps/docs/content/components/drawer/index.ts
new file mode 100644
index 0000000000..d04c3bf31b
--- /dev/null
+++ b/apps/docs/content/components/drawer/index.ts
@@ -0,0 +1,19 @@
+import usage from "./usage";
+import sizes from "./sizes";
+import nonDismissable from "./non-dismissable";
+import placement from "./placement";
+import form from "./form";
+import backdrop from "./backdrop";
+import customMotion from "./custom-motion";
+import customStyles from "./custom-styles";
+
+export const drawerContent = {
+  usage,
+  sizes,
+  nonDismissable,
+  placement,
+  form,
+  backdrop,
+  customMotion,
+  customStyles,
+};
diff --git a/apps/docs/content/components/drawer/non-dismissable.raw.jsx b/apps/docs/content/components/drawer/non-dismissable.raw.jsx
new file mode 100644
index 0000000000..6e91e64682
--- /dev/null
+++ b/apps/docs/content/components/drawer/non-dismissable.raw.jsx
@@ -0,0 +1,52 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer
+        isDismissable={false}
+        isKeyboardDismissDisabled={true}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Non Dismissable Drawer</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  Click the close button or action button to close the drawer. Clicking outside or
+                  pressing the escape key won&apos;t close it.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/non-dismissable.ts b/apps/docs/content/components/drawer/non-dismissable.ts
new file mode 100644
index 0000000000..a1281cb23a
--- /dev/null
+++ b/apps/docs/content/components/drawer/non-dismissable.ts
@@ -0,0 +1,9 @@
+import App from "./non-dismissable.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/placement.raw.jsx b/apps/docs/content/components/drawer/placement.raw.jsx
new file mode 100644
index 0000000000..d91526dd87
--- /dev/null
+++ b/apps/docs/content/components/drawer/placement.raw.jsx
@@ -0,0 +1,60 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [placement, setPlacement] = React.useState("left");
+
+  const handleOpen = (placement) => {
+    setPlacement(placement);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {["left", "right", "top", "bottom"].map((placement) => (
+          <Button key={placement} className="capitalize" onPress={() => handleOpen(placement)}>
+            Open {placement}
+          </Button>
+        ))}
+      </div>
+      <Drawer isOpen={isOpen} placement={placement} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/placement.ts b/apps/docs/content/components/drawer/placement.ts
new file mode 100644
index 0000000000..eee2244366
--- /dev/null
+++ b/apps/docs/content/components/drawer/placement.ts
@@ -0,0 +1,9 @@
+import App from "./placement.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/sizes.raw.jsx b/apps/docs/content/components/drawer/sizes.raw.jsx
new file mode 100644
index 0000000000..a61da6eade
--- /dev/null
+++ b/apps/docs/content/components/drawer/sizes.raw.jsx
@@ -0,0 +1,62 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+  const [size, setSize] = React.useState("md");
+
+  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"];
+
+  const handleOpen = (size) => {
+    setSize(size);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {sizes.map((size) => (
+          <Button key={size} onPress={() => handleOpen(size)}>
+            Open {size}
+          </Button>
+        ))}
+      </div>
+      <Drawer isOpen={isOpen} size={size} onClose={onClose}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/sizes.ts b/apps/docs/content/components/drawer/sizes.ts
new file mode 100644
index 0000000000..85a2f5b30b
--- /dev/null
+++ b/apps/docs/content/components/drawer/sizes.ts
@@ -0,0 +1,9 @@
+import App from "./sizes.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/drawer/usage.raw.jsx b/apps/docs/content/components/drawer/usage.raw.jsx
new file mode 100644
index 0000000000..9b878ad52b
--- /dev/null
+++ b/apps/docs/content/components/drawer/usage.raw.jsx
@@ -0,0 +1,55 @@
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer isOpen={isOpen} onOpenChange={onOpenChange}>
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="flex flex-col gap-1">Drawer Title</DrawerHeader>
+              <DrawerBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </DrawerBody>
+              <DrawerFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/drawer/usage.ts b/apps/docs/content/components/drawer/usage.ts
new file mode 100644
index 0000000000..1118304c37
--- /dev/null
+++ b/apps/docs/content/components/drawer/usage.ts
@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/dropdown/action.raw.jsx b/apps/docs/content/components/dropdown/action.raw.jsx
new file mode 100644
index 0000000000..281521b426
--- /dev/null
+++ b/apps/docs/content/components/dropdown/action.raw.jsx
@@ -0,0 +1,19 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Action event example" onAction={(key) => alert(key)}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/action.ts b/apps/docs/content/components/dropdown/action.ts
index 21a6a4109c..3f0f8e8a41 100644
--- a/apps/docs/content/components/dropdown/action.ts
+++ b/apps/docs/content/components/dropdown/action.ts
@@ -1,29 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Action event example" 
-        onAction={(key) => alert(key)}
-      >
-        <DropdownItem key="new">New file</DropdownItem>
-        <DropdownItem key="copy">Copy link</DropdownItem>
-        <DropdownItem key="edit">Edit file</DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./action.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/backdrop.raw.jsx b/apps/docs/content/components/dropdown/backdrop.raw.jsx
new file mode 100644
index 0000000000..c96bc3d0cd
--- /dev/null
+++ b/apps/docs/content/components/dropdown/backdrop.raw.jsx
@@ -0,0 +1,19 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Dropdown backdrop="blur">
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Static Actions" variant="faded">
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/backdrop.ts b/apps/docs/content/components/dropdown/backdrop.ts
index 797fee6953..53412b0f5b 100644
--- a/apps/docs/content/components/dropdown/backdrop.ts
+++ b/apps/docs/content/components/dropdown/backdrop.ts
@@ -1,26 +1,4 @@
-const App = `import {Dropdown, Link, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Dropdown backdrop="blur">
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="faded" aria-label="Static Actions">
-        <DropdownItem key="new">New file</DropdownItem>
-        <DropdownItem key="copy">Copy link</DropdownItem>
-        <DropdownItem key="edit">Edit file</DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
new file mode 100644
index 0000000000..24e4b8af8b
--- /dev/null
+++ b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
@@ -0,0 +1,123 @@
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownSection,
+  DropdownItem,
+  Button,
+  User,
+} from "@nextui-org/react";
+
+export const PlusIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path d="M6 12h12" />
+        <path d="M12 18V6" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Dropdown
+      showArrow
+      classNames={{
+        base: "before:bg-default-200", // change arrow background
+        content: "p-0 border-small border-divider bg-background",
+      }}
+      radius="sm"
+    >
+      <DropdownTrigger>
+        <Button disableRipple variant="ghost">
+          Open Menu
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        aria-label="Custom item styles"
+        className="p-3"
+        disabledKeys={["profile"]}
+        itemClasses={{
+          base: [
+            "rounded-md",
+            "text-default-500",
+            "transition-opacity",
+            "data-[hover=true]:text-foreground",
+            "data-[hover=true]:bg-default-100",
+            "dark:data-[hover=true]:bg-default-50",
+            "data-[selectable=true]:focus:bg-default-50",
+            "data-[pressed=true]:opacity-70",
+            "data-[focus-visible=true]:ring-default-500",
+          ],
+        }}
+      >
+        <DropdownSection showDivider aria-label="Profile & Actions">
+          <DropdownItem key="profile" isReadOnly className="h-14 gap-2 opacity-100">
+            <User
+              avatarProps={{
+                size: "sm",
+                src: "https://avatars.githubusercontent.com/u/30373425?v=4",
+              }}
+              classNames={{
+                name: "text-default-600",
+                description: "text-default-500",
+              }}
+              description="@jrgarciadev"
+              name="Junior Garcia"
+            />
+          </DropdownItem>
+          <DropdownItem key="dashboard">Dashboard</DropdownItem>
+          <DropdownItem key="settings">Settings</DropdownItem>
+          <DropdownItem key="new_project" endContent={<PlusIcon className="text-large" />}>
+            New Project
+          </DropdownItem>
+        </DropdownSection>
+
+        <DropdownSection showDivider aria-label="Preferences">
+          <DropdownItem key="quick_search" shortcut="⌘K">
+            Quick search
+          </DropdownItem>
+          <DropdownItem
+            key="theme"
+            isReadOnly
+            className="cursor-default"
+            endContent={
+              <select
+                className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
+                id="theme"
+                name="theme"
+              >
+                <option>System</option>
+                <option>Dark</option>
+                <option>Light</option>
+              </select>
+            }
+          >
+            Theme
+          </DropdownItem>
+        </DropdownSection>
+
+        <DropdownSection aria-label="Help & Feedback">
+          <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+          <DropdownItem key="logout">Log Out</DropdownItem>
+        </DropdownSection>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/custom-items-styles.ts b/apps/docs/content/components/dropdown/custom-items-styles.ts
index fde0ff2fa7..7589406d71 100644
--- a/apps/docs/content/components/dropdown/custom-items-styles.ts
+++ b/apps/docs/content/components/dropdown/custom-items-styles.ts
@@ -1,130 +1,7 @@
-const PlusIcon = `export const PlusIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    >
-      <path d="M6 12h12" />
-      <path d="M12 18V6" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, User} from "@nextui-org/react";
-import {PlusIcon} from "./PlusIcon.jsx";
-export default function App() {
-  return (
-    <Dropdown
-      showArrow
-      radius="sm"
-      classNames={{
-        base: "before:bg-default-200", // change arrow background
-        content: "p-0 border-small border-divider bg-background",
-      }}
-    >
-      <DropdownTrigger>
-        <Button variant="ghost" disableRipple>Open Menu</Button>
-      </DropdownTrigger>
-      <DropdownMenu
-        aria-label="Custom item styles"
-        disabledKeys={["profile"]}
-        className="p-3"
-        itemClasses={{
-          base: [
-            "rounded-md",
-            "text-default-500",
-            "transition-opacity",
-            "data-[hover=true]:text-foreground",
-            "data-[hover=true]:bg-default-100",
-            "dark:data-[hover=true]:bg-default-50",
-            "data-[selectable=true]:focus:bg-default-50",
-            "data-[pressed=true]:opacity-70",
-            "data-[focus-visible=true]:ring-default-500",
-          ],
-        }}
-      >
-        <DropdownSection aria-label="Profile & Actions" showDivider>
-          <DropdownItem
-            isReadOnly
-            key="profile"
-            className="h-14 gap-2"
-            className="opacity-100"
-          >
-            <User
-              name="Junior Garcia"
-              description="@jrgarciadev"
-              classNames={{
-                name: "text-default-600",
-                description: "text-default-500",
-              }}
-              avatarProps={{
-                size: "sm",
-                src: "https://avatars.githubusercontent.com/u/30373425?v=4",
-              }}
-            />
-          </DropdownItem>
-          <DropdownItem key="dashboard">
-            Dashboard
-          </DropdownItem>
-          <DropdownItem key="settings">Settings</DropdownItem>
-          <DropdownItem
-            key="new_project"
-            endContent={<PlusIcon className="text-large" />}
-          >
-            New Project
-          </DropdownItem>
-        </DropdownSection>
-
-        <DropdownSection aria-label="Preferences" showDivider>
-          <DropdownItem key="quick_search" shortcut="⌘K">
-            Quick search
-          </DropdownItem>
-          <DropdownItem
-            isReadOnly
-            key="theme"
-            className="cursor-default"
-            endContent={
-              <select
-                className="z-10 outline-none w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
-                id="theme"
-                name="theme"
-              >
-                <option>System</option>
-                <option>Dark</option>
-                <option>Light</option>
-              </select>
-            }
-          >
-            Theme
-          </DropdownItem>
-        </DropdownSection>  
-
-        <DropdownSection aria-label="Help & Feedback">
-          <DropdownItem key="help_and_feedback">
-            Help & Feedback
-          </DropdownItem>
-          <DropdownItem key="logout">Log Out</DropdownItem>
-        </DropdownSection> 
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./custom-items-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/PlusIcon.jsx": PlusIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
new file mode 100644
index 0000000000..83eefe76d2
--- /dev/null
+++ b/apps/docs/content/components/dropdown/custom-popover-styles.raw.jsx
@@ -0,0 +1,178 @@
+import {
+  Dropdown,
+  DropdownSection,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  cn,
+} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <Dropdown
+      showArrow
+      classNames={{
+        base: "before:bg-default-200", // change arrow background
+        content:
+          "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
+      }}
+    >
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown menu with description" variant="faded">
+        <DropdownSection title="Actions">
+          <DropdownItem
+            key="new"
+            description="Create a new file"
+            shortcut="⌘N"
+            startContent={<AddNoteIcon className={iconClasses} />}
+          >
+            New file
+          </DropdownItem>
+          <DropdownItem
+            key="copy"
+            description="Copy the file link"
+            shortcut="⌘C"
+            startContent={<CopyDocumentIcon className={iconClasses} />}
+          >
+            Copy link
+          </DropdownItem>
+          <DropdownItem
+            key="edit"
+            description="Allows you to edit the file"
+            shortcut="⌘⇧E"
+            startContent={<EditDocumentIcon className={iconClasses} />}
+          >
+            Edit file
+          </DropdownItem>
+        </DropdownSection>
+        <DropdownSection title="Danger zone">
+          <DropdownItem
+            key="delete"
+            className="text-danger"
+            color="danger"
+            description="Permanently delete the file"
+            shortcut="⌘⇧D"
+            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+          >
+            Delete file
+          </DropdownItem>
+        </DropdownSection>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/custom-popover-styles.ts b/apps/docs/content/components/dropdown/custom-popover-styles.ts
index b93aee09cb..348d838d21 100644
--- a/apps/docs/content/components/dropdown/custom-popover-styles.ts
+++ b/apps/docs/content/components/dropdown/custom-popover-styles.ts
@@ -1,179 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <Dropdown
-      showArrow
-      classNames={{
-        base: "before:bg-default-200", // change arrow background
-        content: "py-1 px-1 border border-default-200 bg-gradient-to-br from-white to-default-200 dark:from-default-50 dark:to-black",
-      }}
-    >
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="faded" aria-label="Dropdown menu with description">
-      <DropdownSection title="Actions">  
-        <DropdownItem
-            key="new"
-            shortcut="⌘N"
-            description="Create a new file"
-            startContent={<AddNoteIcon className={iconClasses} />}
-          >
-            New file
-          </DropdownItem>
-          <DropdownItem
-            key="copy"
-            shortcut="⌘C"
-            description="Copy the file link"
-            startContent={<CopyDocumentIcon className={iconClasses} />}
-          >
-            Copy link
-          </DropdownItem>
-          <DropdownItem
-            key="edit"
-            shortcut="⌘⇧E"
-            description="Allows you to edit the file"
-            startContent={<EditDocumentIcon className={iconClasses} />}
-          >
-            Edit file
-          </DropdownItem>
-        </DropdownSection>
-        <DropdownSection title="Danger zone">  
-          <DropdownItem
-            key="delete"
-            className="text-danger"
-            color="danger"
-            shortcut="⌘⇧D"
-            description="Permanently delete the file"
-            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-          >
-            Delete file
-          </DropdownItem>
-        </DropdownSection>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./custom-popover-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/dropdown/custom-trigger.raw.jsx b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx
new file mode 100644
index 0000000000..f610f72c70
--- /dev/null
+++ b/apps/docs/content/components/dropdown/custom-trigger.raw.jsx
@@ -0,0 +1,69 @@
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Avatar,
+  User,
+} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex items-center gap-4">
+      <Dropdown placement="bottom-end">
+        <DropdownTrigger>
+          <Avatar
+            isBordered
+            as="button"
+            className="transition-transform"
+            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+          />
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Profile Actions" variant="flat">
+          <DropdownItem key="profile" className="h-14 gap-2">
+            <p className="font-semibold">Signed in as</p>
+            <p className="font-semibold">zoey@example.com</p>
+          </DropdownItem>
+          <DropdownItem key="settings">My Settings</DropdownItem>
+          <DropdownItem key="team_settings">Team Settings</DropdownItem>
+          <DropdownItem key="analytics">Analytics</DropdownItem>
+          <DropdownItem key="system">System</DropdownItem>
+          <DropdownItem key="configurations">Configurations</DropdownItem>
+          <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+          <DropdownItem key="logout" color="danger">
+            Log Out
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+      <Dropdown placement="bottom-start">
+        <DropdownTrigger>
+          <User
+            as="button"
+            avatarProps={{
+              isBordered: true,
+              src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+            }}
+            className="transition-transform"
+            description="@tonyreichert"
+            name="Tony Reichert"
+          />
+        </DropdownTrigger>
+        <DropdownMenu aria-label="User Actions" variant="flat">
+          <DropdownItem key="profile" className="h-14 gap-2">
+            <p className="font-bold">Signed in as</p>
+            <p className="font-bold">@tonyreichert</p>
+          </DropdownItem>
+          <DropdownItem key="settings">My Settings</DropdownItem>
+          <DropdownItem key="team_settings">Team Settings</DropdownItem>
+          <DropdownItem key="analytics">Analytics</DropdownItem>
+          <DropdownItem key="system">System</DropdownItem>
+          <DropdownItem key="configurations">Configurations</DropdownItem>
+          <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+          <DropdownItem key="logout" color="danger">
+            Log Out
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/custom-trigger.ts b/apps/docs/content/components/dropdown/custom-trigger.ts
index 7f08714582..dcc6b44a07 100644
--- a/apps/docs/content/components/dropdown/custom-trigger.ts
+++ b/apps/docs/content/components/dropdown/custom-trigger.ts
@@ -1,77 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Avatar, User} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex items-center gap-4">
-      <Dropdown placement="bottom-end">
-        <DropdownTrigger>
-          <Avatar
-            isBordered
-            as="button"
-            className="transition-transform"
-            src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-          />
-        </DropdownTrigger>
-        <DropdownMenu aria-label="Profile Actions" variant="flat">
-          <DropdownItem key="profile" className="h-14 gap-2">
-            <p className="font-semibold">Signed in as</p>
-            <p className="font-semibold">zoey@example.com</p>
-          </DropdownItem>
-          <DropdownItem key="settings">
-            My Settings
-          </DropdownItem>
-          <DropdownItem key="team_settings">Team Settings</DropdownItem>
-          <DropdownItem key="analytics">
-            Analytics
-          </DropdownItem>
-          <DropdownItem key="system">System</DropdownItem>
-          <DropdownItem key="configurations">Configurations</DropdownItem>
-          <DropdownItem key="help_and_feedback">
-            Help & Feedback
-          </DropdownItem>
-          <DropdownItem key="logout" color="danger">
-            Log Out
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-      <Dropdown placement="bottom-start">
-        <DropdownTrigger>
-          <User
-            as="button"
-            avatarProps={{
-              isBordered: true,
-              src: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-            }}
-            className="transition-transform"
-            description="@tonyreichert"
-            name="Tony Reichert"
-          />
-        </DropdownTrigger>
-        <DropdownMenu aria-label="User Actions" variant="flat">
-          <DropdownItem key="profile" className="h-14 gap-2">
-            <p className="font-bold">Signed in as</p>
-            <p className="font-bold">@tonyreichert</p>
-          </DropdownItem>
-          <DropdownItem key="settings">
-            My Settings
-          </DropdownItem>
-          <DropdownItem key="team_settings">Team Settings</DropdownItem>
-          <DropdownItem key="analytics">
-            Analytics
-          </DropdownItem>
-          <DropdownItem key="system">System</DropdownItem>
-          <DropdownItem key="configurations">Configurations</DropdownItem>
-          <DropdownItem key="help_and_feedback">
-            Help & Feedback
-          </DropdownItem>
-          <DropdownItem key="logout" color="danger">
-            Log Out
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </div>
-  );
-}`;
+import App from "./custom-trigger.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/description.raw.jsx b/apps/docs/content/components/dropdown/description.raw.jsx
new file mode 100644
index 0000000000..734cf9ebb0
--- /dev/null
+++ b/apps/docs/content/components/dropdown/description.raw.jsx
@@ -0,0 +1,160 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown menu with description" variant="faded">
+        <DropdownItem
+          key="new"
+          description="Create a new file"
+          shortcut="⌘N"
+          startContent={<AddNoteIcon className={iconClasses} />}
+        >
+          New file
+        </DropdownItem>
+        <DropdownItem
+          key="copy"
+          description="Copy the file link"
+          shortcut="⌘C"
+          startContent={<CopyDocumentIcon className={iconClasses} />}
+        >
+          Copy link
+        </DropdownItem>
+        <DropdownItem
+          key="edit"
+          showDivider
+          description="Allows you to edit the file"
+          shortcut="⌘⇧E"
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </DropdownItem>
+        <DropdownItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          description="Permanently delete the file"
+          shortcut="⌘⇧D"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/description.ts b/apps/docs/content/components/dropdown/description.ts
index f5dbd0138b..aeb6340b6b 100644
--- a/apps/docs/content/components/dropdown/description.ts
+++ b/apps/docs/content/components/dropdown/description.ts
@@ -1,170 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="faded" aria-label="Dropdown menu with description">
-        <DropdownItem
-          key="new"
-          shortcut="⌘N"
-          description="Create a new file"
-          startContent={<AddNoteIcon className={iconClasses} />}
-        >
-          New file
-        </DropdownItem>
-        <DropdownItem
-          key="copy"
-          shortcut="⌘C"
-          description="Copy the file link"
-          startContent={<CopyDocumentIcon className={iconClasses} />}
-        >
-          Copy link
-        </DropdownItem>
-        <DropdownItem
-          key="edit"
-          shortcut="⌘⇧E"
-          showDivider
-          description="Allows you to edit the file"
-          startContent={<EditDocumentIcon className={iconClasses} />}
-        >
-          Edit file
-        </DropdownItem>
-        <DropdownItem
-          key="delete"
-          className="text-danger"
-          color="danger"
-          shortcut="⌘⇧D"
-          description="Permanently delete the file"
-          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-        >
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/dropdown/disabled-keys.raw.jsx b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx
new file mode 100644
index 0000000000..00e1fa7965
--- /dev/null
+++ b/apps/docs/content/components/dropdown/disabled-keys.raw.jsx
@@ -0,0 +1,19 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Example with disabled actions" disabledKeys={["edit", "delete"]}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/disabled-keys.ts b/apps/docs/content/components/dropdown/disabled-keys.ts
index f37a8f3394..b179b7cb75 100644
--- a/apps/docs/content/components/dropdown/disabled-keys.ts
+++ b/apps/docs/content/components/dropdown/disabled-keys.ts
@@ -1,26 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Dropdown >
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu aria-label="Example with disabled actions" disabledKeys={["edit", "delete"]}>
-        <DropdownItem key="new">New file</DropdownItem>
-        <DropdownItem key="copy">Copy link</DropdownItem>
-        <DropdownItem key="edit">Edit file</DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./disabled-keys.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/dynamic.raw.jsx b/apps/docs/content/components/dropdown/dynamic.raw.jsx
new file mode 100644
index 0000000000..885ee88b93
--- /dev/null
+++ b/apps/docs/content/components/dropdown/dynamic.raw.jsx
@@ -0,0 +1,41 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  const items = [
+    {
+      key: "new",
+      label: "New file",
+    },
+    {
+      key: "copy",
+      label: "Copy link",
+    },
+    {
+      key: "edit",
+      label: "Edit file",
+    },
+    {
+      key: "delete",
+      label: "Delete file",
+    },
+  ];
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dynamic Actions" items={items}>
+        {(item) => (
+          <DropdownItem
+            key={item.key}
+            className={item.key === "delete" ? "text-danger" : ""}
+            color={item.key === "delete" ? "danger" : "default"}
+          >
+            {item.label}
+          </DropdownItem>
+        )}
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/dynamic.ts b/apps/docs/content/components/dropdown/dynamic.ts
index d3e672ca5e..5d3c97bb9a 100644
--- a/apps/docs/content/components/dropdown/dynamic.ts
+++ b/apps/docs/content/components/dropdown/dynamic.ts
@@ -1,48 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  const items = [
-    {
-      key: "new",
-      label: "New file",
-    },
-    {
-      key: "copy",
-      label: "Copy link",
-    },
-    {
-      key: "edit",
-      label: "Edit file",
-    },
-    {
-      key: "delete",
-      label: "Delete file",
-    }
-  ];
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu aria-label="Dynamic Actions" items={items}>
-        {(item) => (
-          <DropdownItem
-            key={item.key}
-            color={item.key === "delete" ? "danger" : "default"}
-            className={item.key === "delete" ? "text-danger" : ""}
-          >
-            {item.label}
-          </DropdownItem>
-        )}
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/icons.raw.jsx b/apps/docs/content/components/dropdown/icons.raw.jsx
new file mode 100644
index 0000000000..ea47c662e2
--- /dev/null
+++ b/apps/docs/content/components/dropdown/icons.raw.jsx
@@ -0,0 +1,155 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown menu with icons" variant="faded">
+        <DropdownItem
+          key="new"
+          shortcut="⌘N"
+          startContent={<AddNoteIcon className={iconClasses} />}
+        >
+          New file
+        </DropdownItem>
+        <DropdownItem
+          key="copy"
+          shortcut="⌘C"
+          startContent={<CopyDocumentIcon className={iconClasses} />}
+        >
+          Copy link
+        </DropdownItem>
+        <DropdownItem
+          key="edit"
+          shortcut="⌘⇧E"
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </DropdownItem>
+        <DropdownItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          shortcut="⌘⇧D"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/icons.ts b/apps/docs/content/components/dropdown/icons.ts
index 0b9d01ada6..22a410c88f 100644
--- a/apps/docs/content/components/dropdown/icons.ts
+++ b/apps/docs/content/components/dropdown/icons.ts
@@ -1,165 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, cn} from "@nextui-org/react";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="faded" aria-label="Dropdown menu with icons">
-        <DropdownItem
-          key="new"
-          shortcut="⌘N"
-          startContent={<AddNoteIcon className={iconClasses} />}
-        >
-          New file
-        </DropdownItem>
-        <DropdownItem
-          key="copy"
-          shortcut="⌘C"
-          startContent={<CopyDocumentIcon className={iconClasses} />}
-        >
-          Copy link
-        </DropdownItem>
-        <DropdownItem
-          key="edit"
-          shortcut="⌘⇧E"
-          startContent={<EditDocumentIcon className={iconClasses} />}
-        >
-          Edit file
-        </DropdownItem>
-        <DropdownItem
-          key="delete"
-          className="text-danger"
-          color="danger"
-          shortcut="⌘⇧D"
-          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-        >
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.jsx b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx
new file mode 100644
index 0000000000..a631230d99
--- /dev/null
+++ b/apps/docs/content/components/dropdown/multiple-selection.raw.jsx
@@ -0,0 +1,35 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys],
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" variant="bordered">
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        disallowEmptySelection
+        aria-label="Multiple selection example"
+        closeOnSelect={false}
+        selectedKeys={selectedKeys}
+        selectionMode="multiple"
+        variant="flat"
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/multiple-selection.raw.tsx b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx
new file mode 100644
index 0000000000..1deb785283
--- /dev/null
+++ b/apps/docs/content/components/dropdown/multiple-selection.raw.tsx
@@ -0,0 +1,38 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replace(/_/g, ""),
+    [selectedKeys],
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" variant="bordered">
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        disallowEmptySelection
+        aria-label="Multiple selection example"
+        closeOnSelect={false}
+        selectedKeys={selectedKeys}
+        selectionMode="multiple"
+        variant="flat"
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/multiple-selection.ts b/apps/docs/content/components/dropdown/multiple-selection.ts
index 9d439aa553..033f4a3524 100644
--- a/apps/docs/content/components/dropdown/multiple-selection.ts
+++ b/apps/docs/content/components/dropdown/multiple-selection.ts
@@ -1,87 +1,15 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
-    [selectedKeys]
-  );
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-          className="capitalize"
-        >
-          {selectedValue}
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Multiple selection example"
-        variant="flat"
-        closeOnSelect={false}
-        disallowEmptySelection
-        selectionMode="multiple"
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
-      >
-        <DropdownItem key="text">Text</DropdownItem>
-        <DropdownItem key="number">Number</DropdownItem>
-        <DropdownItem key="date">Date</DropdownItem>
-        <DropdownItem key="single_date">Single Date</DropdownItem>
-        <DropdownItem key="iteration">Iteration</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
-
-const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-import type { Selection } from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
-    [selectedKeys]
-  );
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-          className="capitalize"
-        >
-          {selectedValue}
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Multiple selection example"
-        variant="flat"
-        closeOnSelect={false}
-        disallowEmptySelection
-        selectionMode="multiple"
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
-      >
-        <DropdownItem key="text">Text</DropdownItem>
-        <DropdownItem key="number">Number</DropdownItem>
-        <DropdownItem key="date">Date</DropdownItem>
-        <DropdownItem key="single_date">Single Date</DropdownItem>
-        <DropdownItem key="iteration">Iteration</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./multiple-selection.raw.jsx?raw";
+import AppTs from "./multiple-selection.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/dropdown/sections.raw.jsx b/apps/docs/content/components/dropdown/sections.raw.jsx
new file mode 100644
index 0000000000..1d8e2e22fe
--- /dev/null
+++ b/apps/docs/content/components/dropdown/sections.raw.jsx
@@ -0,0 +1,171 @@
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownSection,
+  DropdownItem,
+  Button,
+  cn,
+} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown menu with description" variant="faded">
+        <DropdownSection showDivider title="Actions">
+          <DropdownItem
+            key="new"
+            description="Create a new file"
+            shortcut="⌘N"
+            startContent={<AddNoteIcon className={iconClasses} />}
+          >
+            New file
+          </DropdownItem>
+          <DropdownItem
+            key="copy"
+            description="Copy the file link"
+            shortcut="⌘C"
+            startContent={<CopyDocumentIcon className={iconClasses} />}
+          >
+            Copy link
+          </DropdownItem>
+          <DropdownItem
+            key="edit"
+            description="Allows you to edit the file"
+            shortcut="⌘⇧E"
+            startContent={<EditDocumentIcon className={iconClasses} />}
+          >
+            Edit file
+          </DropdownItem>
+        </DropdownSection>
+        <DropdownSection title="Danger zone">
+          <DropdownItem
+            key="delete"
+            className="text-danger"
+            color="danger"
+            description="Permanently delete the file"
+            shortcut="⌘⇧D"
+            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+          >
+            Delete file
+          </DropdownItem>
+        </DropdownSection>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/sections.ts b/apps/docs/content/components/dropdown/sections.ts
index d66ebc8a05..17cd360ea3 100644
--- a/apps/docs/content/components/dropdown/sections.ts
+++ b/apps/docs/content/components/dropdown/sections.ts
@@ -1,173 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownSection, DropdownItem, Button, cn} from "@nextui-org/react";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="faded" aria-label="Dropdown menu with description">
-      <DropdownSection title="Actions" showDivider>  
-        <DropdownItem
-            key="new"
-            shortcut="⌘N"
-            description="Create a new file"
-            startContent={<AddNoteIcon className={iconClasses} />}
-          >
-            New file
-          </DropdownItem>
-          <DropdownItem
-            key="copy"
-            shortcut="⌘C"
-            description="Copy the file link"
-            startContent={<CopyDocumentIcon className={iconClasses} />}
-          >
-            Copy link
-          </DropdownItem>
-          <DropdownItem
-            key="edit"
-            shortcut="⌘⇧E"
-            description="Allows you to edit the file"
-            startContent={<EditDocumentIcon className={iconClasses} />}
-          >
-            Edit file
-          </DropdownItem>
-        </DropdownSection>
-        <DropdownSection title="Danger zone">  
-          <DropdownItem
-            key="delete"
-            className="text-danger"
-            color="danger"
-            shortcut="⌘⇧D"
-            description="Permanently delete the file"
-            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-          >
-            Delete file
-          </DropdownItem>
-        </DropdownSection>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./sections.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/dropdown/shortcut.raw.jsx b/apps/docs/content/components/dropdown/shortcut.raw.jsx
new file mode 100644
index 0000000000..012ce48069
--- /dev/null
+++ b/apps/docs/content/components/dropdown/shortcut.raw.jsx
@@ -0,0 +1,25 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown menu with shortcut" variant="flat">
+        <DropdownItem key="new" shortcut="⌘N">
+          New file
+        </DropdownItem>
+        <DropdownItem key="copy" shortcut="⌘C">
+          Copy link
+        </DropdownItem>
+        <DropdownItem key="edit" shortcut="⌘⇧E">
+          Edit file
+        </DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger" shortcut="⌘⇧D">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/shortcut.ts b/apps/docs/content/components/dropdown/shortcut.ts
index 26a2c65265..a02522a1b9 100644
--- a/apps/docs/content/components/dropdown/shortcut.ts
+++ b/apps/docs/content/components/dropdown/shortcut.ts
@@ -1,26 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu variant="flat" aria-label="Dropdown menu with shortcut">
-        <DropdownItem key="new" shortcut="⌘N">New file</DropdownItem>
-        <DropdownItem key="copy" shortcut="⌘C">Copy link</DropdownItem>
-        <DropdownItem key="edit" shortcut="⌘⇧E">Edit file</DropdownItem>
-        <DropdownItem key="delete" shortcut="⌘⇧D" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./shortcut.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/single-selection.raw.jsx b/apps/docs/content/components/dropdown/single-selection.raw.jsx
new file mode 100644
index 0000000000..80ad30b87f
--- /dev/null
+++ b/apps/docs/content/components/dropdown/single-selection.raw.jsx
@@ -0,0 +1,34 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replace(/_/g, ""),
+    [selectedKeys],
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" variant="bordered">
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        disallowEmptySelection
+        aria-label="Single selection example"
+        selectedKeys={selectedKeys}
+        selectionMode="single"
+        variant="flat"
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/single-selection.raw.tsx b/apps/docs/content/components/dropdown/single-selection.raw.tsx
new file mode 100644
index 0000000000..4c2edfa60b
--- /dev/null
+++ b/apps/docs/content/components/dropdown/single-selection.raw.tsx
@@ -0,0 +1,37 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replace(/_/g, ""),
+    [selectedKeys],
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" variant="bordered">
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        disallowEmptySelection
+        aria-label="Single selection example"
+        selectedKeys={selectedKeys}
+        selectionMode="single"
+        variant="flat"
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/single-selection.ts b/apps/docs/content/components/dropdown/single-selection.ts
index 8bf8911fff..8c6c97a329 100644
--- a/apps/docs/content/components/dropdown/single-selection.ts
+++ b/apps/docs/content/components/dropdown/single-selection.ts
@@ -1,85 +1,15 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
-    [selectedKeys]
-  );
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-          className="capitalize"
-        >
-          {selectedValue}
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Single selection example"
-        variant="flat"
-        disallowEmptySelection
-        selectionMode="single"
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
-      >
-        <DropdownItem key="text">Text</DropdownItem>
-        <DropdownItem key="number">Number</DropdownItem>
-        <DropdownItem key="date">Date</DropdownItem>
-        <DropdownItem key="single_date">Single Date</DropdownItem>
-        <DropdownItem key="iteration">Iteration</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
-
-const AppTs = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-import type { Selection } from "@nextui-org/react";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
-    [selectedKeys]
-  );
-
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-          className="capitalize"
-        >
-          {selectedValue}
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Single selection example"
-        variant="flat"
-        disallowEmptySelection
-        selectionMode="single"
-        selectedKeys={selectedKeys}
-        onSelectionChange={setSelectedKeys}
-      >
-        <DropdownItem key="text">Text</DropdownItem>
-        <DropdownItem key="number">Number</DropdownItem>
-        <DropdownItem key="date">Date</DropdownItem>
-        <DropdownItem key="single_date">Single Date</DropdownItem>
-        <DropdownItem key="iteration">Iteration</DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./single-selection.raw.jsx?raw";
+import AppTs from "./single-selection.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/dropdown/usage.raw.jsx b/apps/docs/content/components/dropdown/usage.raw.jsx
new file mode 100644
index 0000000000..e8d76aeb4e
--- /dev/null
+++ b/apps/docs/content/components/dropdown/usage.raw.jsx
@@ -0,0 +1,19 @@
+import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button variant="bordered">Open Menu</Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Static Actions">
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/usage.ts b/apps/docs/content/components/dropdown/usage.ts
index 214d0ff561..1118304c37 100644
--- a/apps/docs/content/components/dropdown/usage.ts
+++ b/apps/docs/content/components/dropdown/usage.ts
@@ -1,26 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          variant="bordered" 
-        >
-          Open Menu
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu aria-label="Static Actions">
-        <DropdownItem key="new">New file</DropdownItem>
-        <DropdownItem key="copy">Copy link</DropdownItem>
-        <DropdownItem key="edit">Edit file</DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/dropdown/variants.raw.jsx b/apps/docs/content/components/dropdown/variants.raw.jsx
new file mode 100644
index 0000000000..22fbd2a6c3
--- /dev/null
+++ b/apps/docs/content/components/dropdown/variants.raw.jsx
@@ -0,0 +1,55 @@
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Button,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+export default function App() {
+  const [selectedColor, setSelectedColor] = React.useState("default");
+
+  const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"];
+
+  const DropdownContent = ({variant, color}) => (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" color={color} variant={variant}>
+          {variant}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Dropdown Variants" color={color} variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {variants.map((variant) => (
+        <DropdownContent key={variant} color={selectedColor} variant={variant} />
+      ))}
+      <RadioGroup
+        color={selectedColor}
+        defaultValue="default"
+        label="Select dropdown color"
+        orientation="horizontal"
+        onValueChange={setSelectedColor}
+      >
+        <Radio value="default">Default</Radio>
+        <Radio value="primary">Primary</Radio>
+        <Radio value="secondary">Secondary</Radio>
+        <Radio value="success">Success</Radio>
+        <Radio value="warning">Warning</Radio>
+        <Radio value="danger">Danger</Radio>
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/dropdown/variants.ts b/apps/docs/content/components/dropdown/variants.ts
index f2c577d712..ddea95fb2e 100644
--- a/apps/docs/content/components/dropdown/variants.ts
+++ b/apps/docs/content/components/dropdown/variants.ts
@@ -1,58 +1,4 @@
-const App = `import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button, RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("default")
-
-  const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"];
-
-  const DropdownContent = ({variant, color}) => (
-    <Dropdown>
-      <DropdownTrigger>
-        <Button 
-          color={color}
-          variant={variant}
-          className="capitalize"
-        >
-          {variant}
-        </Button>
-      </DropdownTrigger>
-      <DropdownMenu 
-        aria-label="Dropdown Variants"
-        color={color} 
-        variant={variant}
-      >
-        <DropdownItem key="new">New file</DropdownItem>
-        <DropdownItem key="copy">Copy link</DropdownItem>
-        <DropdownItem key="edit">Edit file</DropdownItem>
-        <DropdownItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </DropdownItem>
-      </DropdownMenu>
-    </Dropdown>
-  )
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {variants.map((variant) => (
-        <DropdownContent key={variant} color={selectedColor} variant={variant} />
-      ))}
-      <RadioGroup
-        label="Select dropdown color"
-        orientation="horizontal"
-        color={selectedColor}
-        defaultValue="default"
-        onValueChange={setSelectedColor}
-      >
-        <Radio value="default">Default</Radio>
-        <Radio value="primary">Primary</Radio>
-        <Radio value="secondary">Secondary</Radio>
-        <Radio value="success">Success</Radio>
-        <Radio value="warning">Warning</Radio>
-        <Radio value="danger">Danger</Radio>
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/form/controlled.raw.jsx b/apps/docs/content/components/form/controlled.raw.jsx
new file mode 100644
index 0000000000..5e8efc9901
--- /dev/null
+++ b/apps/docs/content/components/form/controlled.raw.jsx
@@ -0,0 +1,38 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [email, setEmail] = React.useState("");
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+        onValueChange={setEmail}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/controlled.ts b/apps/docs/content/components/form/controlled.ts
new file mode 100644
index 0000000000..2c3f0cacb4
--- /dev/null
+++ b/apps/docs/content/components/form/controlled.ts
@@ -0,0 +1,9 @@
+import App from "./controlled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/custom-error-messages.raw.jsx b/apps/docs/content/components/form/custom-error-messages.raw.jsx
new file mode 100644
index 0000000000..84135c005b
--- /dev/null
+++ b/apps/docs/content/components/form/custom-error-messages.raw.jsx
@@ -0,0 +1,28 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage={({validationDetails}) => {
+          if (validationDetails.valueMissing) {
+            return "Please enter a valid name";
+          }
+        }}
+        label="Name"
+        labelPlacement="outside"
+        name="name"
+        placeholder="Enter your name"
+        type="text"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/custom-error-messages.ts b/apps/docs/content/components/form/custom-error-messages.ts
new file mode 100644
index 0000000000..789601eda6
--- /dev/null
+++ b/apps/docs/content/components/form/custom-error-messages.ts
@@ -0,0 +1,9 @@
+import App from "./custom-error-messages.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/custom-validation.raw.jsx b/apps/docs/content/components/form/custom-validation.raw.jsx
new file mode 100644
index 0000000000..2d33795a0c
--- /dev/null
+++ b/apps/docs/content/components/form/custom-validation.raw.jsx
@@ -0,0 +1,30 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/custom-validation.ts b/apps/docs/content/components/form/custom-validation.ts
new file mode 100644
index 0000000000..b0bf5b8588
--- /dev/null
+++ b/apps/docs/content/components/form/custom-validation.ts
@@ -0,0 +1,9 @@
+import App from "./custom-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/demo.raw.jsx b/apps/docs/content/components/form/demo.raw.jsx
new file mode 100644
index 0000000000..c6adb3b5a3
--- /dev/null
+++ b/apps/docs/content/components/form/demo.raw.jsx
@@ -0,0 +1,170 @@
+import {Form, Input, Select, SelectItem, Checkbox, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [password, setPassword] = React.useState("");
+  const [submitted, setSubmitted] = React.useState(null);
+  const [errors, setErrors] = React.useState({});
+
+  // Real-time password validation
+  const getPasswordError = (value) => {
+    if (value.length < 4) {
+      return "Password must be 4 characters or more";
+    }
+    if ((value.match(/[A-Z]/g) || []).length < 1) {
+      return "Password needs at least 1 uppercase letter";
+    }
+    if ((value.match(/[^a-z]/gi) || []).length < 1) {
+      return "Password needs at least 1 symbol";
+    }
+
+    return null;
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    // Custom validation checks
+    const newErrors = {};
+
+    // Password validation
+    const passwordError = getPasswordError(data.password);
+
+    if (passwordError) {
+      newErrors.password = passwordError;
+    }
+
+    // Username validation
+    if (data.name === "admin") {
+      newErrors.name = "Nice try! Choose a different username";
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+
+      return;
+    }
+
+    if (data.terms !== "true") {
+      setErrors({terms: "Please accept the terms"});
+
+      return;
+    }
+
+    // Clear errors and submit
+    setErrors({});
+    setSubmitted(data);
+  };
+
+  return (
+    <Form
+      className="w-full justify-center items-center w-full space-y-4"
+      validationBehavior="native"
+      validationErrors={errors}
+      onReset={() => setSubmitted(null)}
+      onSubmit={onSubmit}
+    >
+      <div className="flex flex-col gap-4 max-w-md">
+        <Input
+          isRequired
+          errorMessage={({validationDetails}) => {
+            if (validationDetails.valueMissing) {
+              return "Please enter your name";
+            }
+
+            return errors.name;
+          }}
+          label="Name"
+          labelPlacement="outside"
+          name="name"
+          placeholder="Enter your name"
+        />
+
+        <Input
+          isRequired
+          errorMessage={({validationDetails}) => {
+            if (validationDetails.valueMissing) {
+              return "Please enter your email";
+            }
+            if (validationDetails.typeMismatch) {
+              return "Please enter a valid email address";
+            }
+          }}
+          label="Email"
+          labelPlacement="outside"
+          name="email"
+          placeholder="Enter your email"
+          type="email"
+        />
+
+        <Input
+          isRequired
+          errorMessage={getPasswordError(password)}
+          isInvalid={getPasswordError(password) !== null}
+          label="Password"
+          labelPlacement="outside"
+          name="password"
+          placeholder="Enter your password"
+          type="password"
+          value={password}
+          onValueChange={setPassword}
+        />
+
+        <Select
+          isRequired
+          label="Country"
+          labelPlacement="outside"
+          name="country"
+          placeholder="Select country"
+        >
+          <SelectItem key="ar" value="ar">
+            Argentina
+          </SelectItem>
+          <SelectItem key="us" value="us">
+            United States
+          </SelectItem>
+          <SelectItem key="ca" value="ca">
+            Canada
+          </SelectItem>
+          <SelectItem key="uk" value="uk">
+            United Kingdom
+          </SelectItem>
+          <SelectItem key="au" value="au">
+            Australia
+          </SelectItem>
+        </Select>
+
+        <Checkbox
+          isRequired
+          classNames={{
+            label: "text-small",
+          }}
+          isInvalid={!!errors.terms}
+          name="terms"
+          validationBehavior="aria"
+          value="true"
+          onValueChange={() => setErrors((prev) => ({...prev, terms: undefined}))}
+        >
+          I agree to the terms and conditions
+        </Checkbox>
+
+        {errors.terms && <span className="text-danger text-small">{errors.terms}</span>}
+
+        <div className="flex gap-4">
+          <Button className="w-full" color="primary" type="submit">
+            Submit
+          </Button>
+          <Button type="reset" variant="bordered">
+            Reset
+          </Button>
+        </div>
+      </div>
+
+      {submitted && (
+        <div className="text-small text-default-500 mt-4">
+          Submitted data: <pre>{JSON.stringify(submitted, null, 2)}</pre>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/demo.ts b/apps/docs/content/components/form/demo.ts
new file mode 100644
index 0000000000..594455d220
--- /dev/null
+++ b/apps/docs/content/components/form/demo.ts
@@ -0,0 +1,9 @@
+import App from "./demo.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/events.raw.jsx b/apps/docs/content/components/form/events.raw.jsx
new file mode 100644
index 0000000000..798afc0753
--- /dev/null
+++ b/apps/docs/content/components/form/events.raw.jsx
@@ -0,0 +1,52 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [action, setAction] = React.useState(null);
+
+  return (
+    <Form
+      className="w-full max-w-xs flex flex-col gap-4"
+      validationBehavior="native"
+      onReset={() => setAction("reset")}
+      onSubmit={(e) => {
+        e.preventDefault();
+        let data = Object.fromEntries(new FormData(e.currentTarget));
+
+        setAction(`submit ${JSON.stringify(data)}`);
+      }}
+    >
+      <Input
+        isRequired
+        errorMessage="Please enter a valid username"
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+      />
+
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <div className="flex gap-2">
+        <Button color="primary" type="submit">
+          Submit
+        </Button>
+        <Button type="reset" variant="flat">
+          Reset
+        </Button>
+      </div>
+      {action && (
+        <div className="text-small text-default-500">
+          Action: <code>{action}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/events.ts b/apps/docs/content/components/form/events.ts
new file mode 100644
index 0000000000..ae3acdef17
--- /dev/null
+++ b/apps/docs/content/components/form/events.ts
@@ -0,0 +1,9 @@
+import App from "./events.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/index.ts b/apps/docs/content/components/form/index.ts
new file mode 100644
index 0000000000..3c4c0e9632
--- /dev/null
+++ b/apps/docs/content/components/form/index.ts
@@ -0,0 +1,21 @@
+import demo from "./demo";
+import usage from "./usage";
+import controlled from "./controlled";
+import nativeValidation from "./native-validation";
+import customErrorMessages from "./custom-error-messages";
+import customValidation from "./custom-validation";
+import realTimeValidation from "./real-time-validation";
+import serverValidation from "./server-validation";
+import events from "./events";
+
+export const formContent = {
+  demo,
+  usage,
+  controlled,
+  nativeValidation,
+  customErrorMessages,
+  customValidation,
+  realTimeValidation,
+  serverValidation,
+  events,
+};
diff --git a/apps/docs/content/components/form/native-validation.raw.jsx b/apps/docs/content/components/form/native-validation.raw.jsx
new file mode 100644
index 0000000000..44424f5ff0
--- /dev/null
+++ b/apps/docs/content/components/form/native-validation.raw.jsx
@@ -0,0 +1,24 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/native-validation.ts b/apps/docs/content/components/form/native-validation.ts
new file mode 100644
index 0000000000..0f4055bc62
--- /dev/null
+++ b/apps/docs/content/components/form/native-validation.ts
@@ -0,0 +1,9 @@
+import App from "./native-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/real-time-validation.raw.jsx b/apps/docs/content/components/form/real-time-validation.raw.jsx
new file mode 100644
index 0000000000..f41eacd57d
--- /dev/null
+++ b/apps/docs/content/components/form/real-time-validation.raw.jsx
@@ -0,0 +1,35 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [password, setPassword] = React.useState("");
+  const errors = [];
+
+  if (password.length < 4) {
+    errors.push("Password must be 4 characters or more.");
+  }
+  if ((password.match(/[A-Z]/g) || []).length < 1) {
+    errors.push("Password must include at least 1 upper case letter");
+  }
+  if ((password.match(/[^a-z]/gi) || []).length < 1) {
+    errors.push("Password must include at least 1 symbol.");
+  }
+
+  return (
+    <Input
+      errorMessage={() => (
+        <ul>
+          {errors.map((error, i) => (
+            <li key={i}>{error}</li>
+          ))}
+        </ul>
+      )}
+      isInvalid={errors.length > 0}
+      label="Password"
+      labelPlacement="outside"
+      placeholder="Enter your password"
+      value={password}
+      variant="bordered"
+      onValueChange={setPassword}
+    />
+  );
+}
diff --git a/apps/docs/content/components/form/real-time-validation.ts b/apps/docs/content/components/form/real-time-validation.ts
new file mode 100644
index 0000000000..6f8034a877
--- /dev/null
+++ b/apps/docs/content/components/form/real-time-validation.ts
@@ -0,0 +1,9 @@
+import App from "./real-time-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/server-validation.raw.jsx b/apps/docs/content/components/form/server-validation.raw.jsx
new file mode 100644
index 0000000000..304f1eb51c
--- /dev/null
+++ b/apps/docs/content/components/form/server-validation.raw.jsx
@@ -0,0 +1,49 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [errors, setErrors] = React.useState({});
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    if (!data.username) {
+      setErrors({username: "Username is required"});
+
+      return;
+    }
+
+    const result = callServer(data);
+
+    setErrors(result.errors);
+  };
+
+  return (
+    <Form
+      className="w-full max-w-xs flex flex-col gap-3"
+      validationErrors={errors}
+      onSubmit={onSubmit}
+    >
+      <Input
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+      />
+      <Button type="submit" variant="flat">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+// Fake server used in this example.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function callServer(data) {
+  return {
+    errors: {
+      username: "Sorry, this username is taken.",
+    },
+  };
+}
diff --git a/apps/docs/content/components/form/server-validation.ts b/apps/docs/content/components/form/server-validation.ts
new file mode 100644
index 0000000000..84a2823b6a
--- /dev/null
+++ b/apps/docs/content/components/form/server-validation.ts
@@ -0,0 +1,9 @@
+import App from "./server-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/form/usage.raw.jsx b/apps/docs/content/components/form/usage.raw.jsx
new file mode 100644
index 0000000000..f8af6d3de3
--- /dev/null
+++ b/apps/docs/content/components/form/usage.raw.jsx
@@ -0,0 +1,35 @@
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/form/usage.ts b/apps/docs/content/components/form/usage.ts
new file mode 100644
index 0000000000..1118304c37
--- /dev/null
+++ b/apps/docs/content/components/form/usage.ts
@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/image/blurred.raw.jsx b/apps/docs/content/components/image/blurred.raw.jsx
new file mode 100644
index 0000000000..c1bcc75e14
--- /dev/null
+++ b/apps/docs/content/components/image/blurred.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isBlurred
+      alt="NextUI Album Cover"
+      className="m-5"
+      src="https://nextui.org/images/album-cover.png"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/blurred.ts b/apps/docs/content/components/image/blurred.ts
index 379e433c7a..0c08e28f90 100644
--- a/apps/docs/content/components/image/blurred.ts
+++ b/apps/docs/content/components/image/blurred.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isBlurred
-      width={240}
-      src="https://nextui.org/images/album-cover.png"
-      alt="NextUI Album Cover"
-      className="m-5"
-    />
-  );
-}`;
+import App from "./blurred.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/fallback.raw.jsx b/apps/docs/content/components/image/fallback.raw.jsx
new file mode 100644
index 0000000000..dba0cca441
--- /dev/null
+++ b/apps/docs/content/components/image/fallback.raw.jsx
@@ -0,0 +1,13 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI Image with fallback"
+      fallbackSrc="https://via.placeholder.com/300x200"
+      height={200}
+      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/fallback.ts b/apps/docs/content/components/image/fallback.ts
index 165089d80a..20854071f7 100644
--- a/apps/docs/content/components/image/fallback.ts
+++ b/apps/docs/content/components/image/fallback.ts
@@ -1,16 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      src="https://app.requestly.io/delay/1000/https://nextui.org/images/fruit-4.jpeg"
-      fallbackSrc="https://via.placeholder.com/300x200"
-      alt="NextUI Image with fallback"
-    />
-  );
-}`;
+import App from "./fallback.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/loading.raw.jsx b/apps/docs/content/components/image/loading.raw.jsx
new file mode 100644
index 0000000000..3ad1b17619
--- /dev/null
+++ b/apps/docs/content/components/image/loading.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image with delay"
+      height={200}
+      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/loading.ts b/apps/docs/content/components/image/loading.ts
index e2d70af02f..0c8fea5a5f 100644
--- a/apps/docs/content/components/image/loading.ts
+++ b/apps/docs/content/components/image/loading.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      height={200}
-      alt="NextUI hero Image with delay"
-      src="https://app.requestly.io/delay/5000/https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./loading.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/nextjs.raw.jsx b/apps/docs/content/components/image/nextjs.raw.jsx
new file mode 100644
index 0000000000..deee4e2121
--- /dev/null
+++ b/apps/docs/content/components/image/nextjs.raw.jsx
@@ -0,0 +1,14 @@
+import {Image} from "@nextui-org/react";
+import NextImage from "next/image";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      as={NextImage}
+      height={200}
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/nextjs.ts b/apps/docs/content/components/image/nextjs.ts
index ff6a18e14e..1d69196630 100644
--- a/apps/docs/content/components/image/nextjs.ts
+++ b/apps/docs/content/components/image/nextjs.ts
@@ -1,17 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-import NextImage from "next/image";
-
-export default function App() {
-  return (
-    <Image
-      as={NextImage}
-      width={300}
-      height={200}
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-      alt="NextUI hero Image"
-    />
-  );
-}`;
+import App from "./nextjs.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/usage.raw.jsx b/apps/docs/content/components/image/usage.raw.jsx
new file mode 100644
index 0000000000..f7be019c8d
--- /dev/null
+++ b/apps/docs/content/components/image/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      alt="NextUI hero Image"
+      src="https://nextui.org/images/hero-card-complete.jpeg"
+      width={300}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/usage.ts b/apps/docs/content/components/image/usage.ts
index 7041554fed..1118304c37 100644
--- a/apps/docs/content/components/image/usage.ts
+++ b/apps/docs/content/components/image/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      width={300}
-      alt="NextUI hero Image"
-      src="https://nextui.org/images/hero-card-complete.jpeg"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/image/zoomed.raw.jsx b/apps/docs/content/components/image/zoomed.raw.jsx
new file mode 100644
index 0000000000..8e05d6217b
--- /dev/null
+++ b/apps/docs/content/components/image/zoomed.raw.jsx
@@ -0,0 +1,12 @@
+import {Image} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Image
+      isZoomed
+      alt="NextUI Fruit Image with Zoom"
+      src="https://nextui.org/images/fruit-1.jpeg"
+      width={240}
+    />
+  );
+}
diff --git a/apps/docs/content/components/image/zoomed.ts b/apps/docs/content/components/image/zoomed.ts
index 2aaa13b28f..19b1fbb781 100644
--- a/apps/docs/content/components/image/zoomed.ts
+++ b/apps/docs/content/components/image/zoomed.ts
@@ -1,15 +1,4 @@
-const App = `import {Image} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Image
-      isZoomed
-      width={240}
-      alt="NextUI Fruit Image with Zoom"
-      src="https://nextui.org/images/fruit-1.jpeg"
-    />
-  );
-}`;
+import App from "./zoomed.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/index.ts b/apps/docs/content/components/index.ts
index ac6e664826..ced4352a6f 100644
--- a/apps/docs/content/components/index.ts
+++ b/apps/docs/content/components/index.ts
@@ -18,6 +18,7 @@ export * from "./user";
 export * from "./skeleton";
 export * from "./snippet";
 export * from "./input";
+export * from "./input-otp";
 export * from "./textarea";
 export * from "./image";
 export * from "./radio-group";
@@ -31,3 +32,5 @@ export * from "./dropdown";
 export * from "./navbar";
 export * from "./table";
 export * from "./autocomplete";
+export * from "./alert";
+export * from "./drawer";
diff --git a/apps/docs/content/components/input-otp/allowed-keys.raw.jsx b/apps/docs/content/components/input-otp/allowed-keys.raw.jsx
new file mode 100644
index 0000000000..515ca67c41
--- /dev/null
+++ b/apps/docs/content/components/input-otp/allowed-keys.raw.jsx
@@ -0,0 +1,25 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const allowedKeysConfig = [
+    {
+      name: "Only lowercase letters (a-z):",
+      value: "^[a-z]*$",
+    },
+    {
+      name: "Only uppercase letters (A-Z):",
+      value: "^[A-Z]*$",
+    },
+  ];
+
+  return (
+    <div className="w-full flex flex-wrap gap-6">
+      {allowedKeysConfig.map((config, idx) => (
+        <div key={idx}>
+          <div className="text-default-500">{config.name}</div>
+          <InputOtp allowedKeys={config.value} length={4} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/allowed-keys.ts b/apps/docs/content/components/input-otp/allowed-keys.ts
new file mode 100644
index 0000000000..4b28d9836f
--- /dev/null
+++ b/apps/docs/content/components/input-otp/allowed-keys.ts
@@ -0,0 +1,9 @@
+import App from "./allowed-keys.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/colors.raw.jsx b/apps/docs/content/components/input-otp/colors.raw.jsx
new file mode 100644
index 0000000000..18c2464a31
--- /dev/null
+++ b/apps/docs/content/components/input-otp/colors.raw.jsx
@@ -0,0 +1,16 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <div key={color}>
+          <div className="text-default-500">color: {color}</div>
+          <InputOtp color={color} length={4} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/colors.ts b/apps/docs/content/components/input-otp/colors.ts
new file mode 100644
index 0000000000..d5bef810aa
--- /dev/null
+++ b/apps/docs/content/components/input-otp/colors.ts
@@ -0,0 +1,9 @@
+import App from "./colors.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/controlled.raw.jsx b/apps/docs/content/components/input-otp/controlled.raw.jsx
new file mode 100644
index 0000000000..704223054b
--- /dev/null
+++ b/apps/docs/content/components/input-otp/controlled.raw.jsx
@@ -0,0 +1,13 @@
+import {InputOtp} from "@nextui-org/react";
+import React from "react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <InputOtp length={4} value={value} onValueChange={setValue} />
+      <p className="text-default-500 text-small">value: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/controlled.ts b/apps/docs/content/components/input-otp/controlled.ts
new file mode 100644
index 0000000000..2c3f0cacb4
--- /dev/null
+++ b/apps/docs/content/components/input-otp/controlled.ts
@@ -0,0 +1,9 @@
+import App from "./controlled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/custom-styles.raw.jsx b/apps/docs/content/components/input-otp/custom-styles.raw.jsx
new file mode 100644
index 0000000000..ab0903a72c
--- /dev/null
+++ b/apps/docs/content/components/input-otp/custom-styles.raw.jsx
@@ -0,0 +1,33 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp
+        classNames={{
+          segmentWrapper: "gap-x-0",
+          segment: [
+            "relative",
+            "h-10",
+            "w-10",
+            "border-y",
+            "border-r",
+            "first:rounded-l-md",
+            "first:border-l",
+            "last:rounded-r-md",
+            "border-default-200",
+            "data-[active=true]:border",
+            "data-[active=true]:z-20",
+            "data-[active=true]:ring-2",
+            "data-[active=true]:ring-offset-2",
+            "data-[active=true]:ring-offset-background",
+            "data-[active=true]:ring-foreground",
+          ],
+        }}
+        description="Enter the 4 digit code sent to your email"
+        length={4}
+        radius="none"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/custom-styles.ts b/apps/docs/content/components/input-otp/custom-styles.ts
new file mode 100644
index 0000000000..da3ea9093a
--- /dev/null
+++ b/apps/docs/content/components/input-otp/custom-styles.ts
@@ -0,0 +1,9 @@
+import App from "./custom-styles.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/description.raw.jsx b/apps/docs/content/components/input-otp/description.raw.jsx
new file mode 100644
index 0000000000..54ac7feb36
--- /dev/null
+++ b/apps/docs/content/components/input-otp/description.raw.jsx
@@ -0,0 +1,9 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp description="This is description to the OTP component." length={4} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/description.ts b/apps/docs/content/components/input-otp/description.ts
new file mode 100644
index 0000000000..aeb6340b6b
--- /dev/null
+++ b/apps/docs/content/components/input-otp/description.ts
@@ -0,0 +1,9 @@
+import App from "./description.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/disabled.raw.jsx b/apps/docs/content/components/input-otp/disabled.raw.jsx
new file mode 100644
index 0000000000..d6fb4a2cc9
--- /dev/null
+++ b/apps/docs/content/components/input-otp/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp isDisabled defaultValue="1234" length={4} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/disabled.ts b/apps/docs/content/components/input-otp/disabled.ts
new file mode 100644
index 0000000000..1a215cc91f
--- /dev/null
+++ b/apps/docs/content/components/input-otp/disabled.ts
@@ -0,0 +1,9 @@
+import App from "./disabled.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/error-message.raw.jsx b/apps/docs/content/components/input-otp/error-message.raw.jsx
new file mode 100644
index 0000000000..5bce6a865f
--- /dev/null
+++ b/apps/docs/content/components/input-otp/error-message.raw.jsx
@@ -0,0 +1,9 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp isInvalid errorMessage="Invalid OTP code" length={4} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/error-message.ts b/apps/docs/content/components/input-otp/error-message.ts
new file mode 100644
index 0000000000..fb8101b132
--- /dev/null
+++ b/apps/docs/content/components/input-otp/error-message.ts
@@ -0,0 +1,9 @@
+import App from "./error-message.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/form.raw.jsx b/apps/docs/content/components/input-otp/form.raw.jsx
new file mode 100644
index 0000000000..df36468520
--- /dev/null
+++ b/apps/docs/content/components/input-otp/form.raw.jsx
@@ -0,0 +1,46 @@
+import {InputOtp} from "@nextui-org/react";
+import {useForm, Controller} from "react-hook-form";
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  const {
+    handleSubmit,
+    control,
+    formState: {errors},
+  } = useForm({
+    defaultValues: {
+      otp: "",
+    },
+  });
+
+  const onSubmit = (data) => {
+    alert(JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 w-full max-w-[300px]" onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="otp"
+        render={({field}) => (
+          <InputOtp
+            {...field}
+            errorMessage={errors.otp && errors.otp.message}
+            isInvalid={!!errors.otp}
+            length={4}
+          />
+        )}
+        rules={{
+          required: "OTP is required",
+          minLength: {
+            value: 4,
+            message: "Please enter a valid OTP",
+          },
+        }}
+      />
+      <Button className="max-w-fit" type="submit" variant="flat">
+        Verify OTP
+      </Button>
+    </form>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/form.raw.tsx b/apps/docs/content/components/input-otp/form.raw.tsx
new file mode 100644
index 0000000000..4c05544f7b
--- /dev/null
+++ b/apps/docs/content/components/input-otp/form.raw.tsx
@@ -0,0 +1,50 @@
+import {InputOtp} from "@nextui-org/react";
+import {useForm, Controller, SubmitHandler} from "react-hook-form";
+import {Button} from "@nextui-org/react";
+
+interface FormValues {
+  otp: string;
+}
+
+export default function App() {
+  const {
+    handleSubmit,
+    control,
+    formState: {errors},
+  } = useForm<FormValues>({
+    defaultValues: {
+      otp: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    alert(JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 w-full max-w-[300px]" onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="otp"
+        render={({field}) => (
+          <InputOtp
+            {...field}
+            errorMessage={errors.otp?.message}
+            isInvalid={!!errors.otp}
+            length={4}
+          />
+        )}
+        rules={{
+          required: "OTP is required",
+          minLength: {
+            value: 4,
+            message: "Please enter a valid OTP",
+          },
+        }}
+      />
+      <Button className="max-w-fit" type="submit" variant="flat">
+        Verify OTP
+      </Button>
+    </form>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/form.ts b/apps/docs/content/components/input-otp/form.ts
new file mode 100644
index 0000000000..2f8c0d8490
--- /dev/null
+++ b/apps/docs/content/components/input-otp/form.ts
@@ -0,0 +1,15 @@
+import App from "./form.raw.jsx?raw";
+import AppTs from "./form.raw.tsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+const reactTs = {
+  "/App.tsx": AppTs,
+};
+
+export default {
+  ...react,
+  ...reactTs,
+};
diff --git a/apps/docs/content/components/input-otp/index.ts b/apps/docs/content/components/input-otp/index.ts
new file mode 100644
index 0000000000..81fa6be2b3
--- /dev/null
+++ b/apps/docs/content/components/input-otp/index.ts
@@ -0,0 +1,35 @@
+import usage from "./usage";
+import disabled from "./disabled";
+import readonly from "./readonly";
+import required from "./required";
+import sizes from "./sizes";
+import colors from "./colors";
+import variants from "./variants";
+import radius from "./radius";
+import description from "./description";
+import errorMessage from "./error-message";
+import allowedKeys from "./allowed-keys";
+import controlled from "./controlled";
+import password from "./password";
+import form from "./form";
+import customStyles from "./custom-styles";
+import lengths from "./lengths";
+
+export const inputOtpContent = {
+  usage,
+  disabled,
+  readonly,
+  required,
+  sizes,
+  colors,
+  variants,
+  radius,
+  description,
+  errorMessage,
+  allowedKeys,
+  controlled,
+  password,
+  form,
+  customStyles,
+  lengths,
+};
diff --git a/apps/docs/content/components/input-otp/lengths.raw.jsx b/apps/docs/content/components/input-otp/lengths.raw.jsx
new file mode 100644
index 0000000000..01c8e04eb4
--- /dev/null
+++ b/apps/docs/content/components/input-otp/lengths.raw.jsx
@@ -0,0 +1,17 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4 w-full">
+      <div>
+        <p className="text-default-500 text-small mb-2">Basic length (4 digits)</p>
+        <InputOtp length={4} />
+      </div>
+
+      <div>
+        <p className="text-default-500 text-small mb-2">6 digits OTP</p>
+        <InputOtp length={6} />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/lengths.ts b/apps/docs/content/components/input-otp/lengths.ts
new file mode 100644
index 0000000000..1e958bacc0
--- /dev/null
+++ b/apps/docs/content/components/input-otp/lengths.ts
@@ -0,0 +1,9 @@
+import App from "./lengths.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/password.raw.jsx b/apps/docs/content/components/input-otp/password.raw.jsx
new file mode 100644
index 0000000000..f7e95bdbac
--- /dev/null
+++ b/apps/docs/content/components/input-otp/password.raw.jsx
@@ -0,0 +1,9 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp length={4} radius="full" size="sm" type="password" variant="bordered" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/password.ts b/apps/docs/content/components/input-otp/password.ts
new file mode 100644
index 0000000000..7751eaf935
--- /dev/null
+++ b/apps/docs/content/components/input-otp/password.ts
@@ -0,0 +1,9 @@
+import App from "./password.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/radius.raw.jsx b/apps/docs/content/components/input-otp/radius.raw.jsx
new file mode 100644
index 0000000000..30da83d3c6
--- /dev/null
+++ b/apps/docs/content/components/input-otp/radius.raw.jsx
@@ -0,0 +1,16 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const radiusValues = ["none", "sm", "md", "lg", "full"];
+
+  return (
+    <div className="w-full flex flex-wrap gap-6">
+      {radiusValues.map((radius) => (
+        <div key={radius}>
+          <div className="text-default-500">radius: {radius}</div>
+          <InputOtp length={4} radius={radius} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/radius.ts b/apps/docs/content/components/input-otp/radius.ts
new file mode 100644
index 0000000000..7b78db1ce0
--- /dev/null
+++ b/apps/docs/content/components/input-otp/radius.ts
@@ -0,0 +1,9 @@
+import App from "./radius.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/readonly.raw.jsx b/apps/docs/content/components/input-otp/readonly.raw.jsx
new file mode 100644
index 0000000000..80212c91ef
--- /dev/null
+++ b/apps/docs/content/components/input-otp/readonly.raw.jsx
@@ -0,0 +1,9 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <InputOtp isReadOnly defaultValue="1234" length={4} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/readonly.ts b/apps/docs/content/components/input-otp/readonly.ts
new file mode 100644
index 0000000000..fabd05ba36
--- /dev/null
+++ b/apps/docs/content/components/input-otp/readonly.ts
@@ -0,0 +1,9 @@
+import App from "./readonly.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/required.raw.jsx b/apps/docs/content/components/input-otp/required.raw.jsx
new file mode 100644
index 0000000000..c5d275ec3e
--- /dev/null
+++ b/apps/docs/content/components/input-otp/required.raw.jsx
@@ -0,0 +1,31 @@
+import {Button, InputOtp, Form} from "@nextui-org/react";
+
+export default function App() {
+  const [otp, setOtp] = React.useState("");
+
+  return (
+    <Form
+      className="flex w-full flex-col items-start gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const otp = formData.get("otp");
+
+        setOtp(otp);
+      }}
+    >
+      <InputOtp
+        isRequired
+        aria-label="OTP input field"
+        length={4}
+        name="otp"
+        placeholder="Enter code"
+        validationBehavior="native"
+      />
+      <Button size="sm" type="submit" variant="bordered">
+        Submit
+      </Button>
+      {otp && <div className="text-small text-default-500">OTP submitted: {otp}</div>}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/required.ts b/apps/docs/content/components/input-otp/required.ts
new file mode 100644
index 0000000000..b50b781e6f
--- /dev/null
+++ b/apps/docs/content/components/input-otp/required.ts
@@ -0,0 +1,9 @@
+import App from "./required.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/sizes.raw.jsx b/apps/docs/content/components/input-otp/sizes.raw.jsx
new file mode 100644
index 0000000000..51a6135176
--- /dev/null
+++ b/apps/docs/content/components/input-otp/sizes.raw.jsx
@@ -0,0 +1,16 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex flex-col w-full">
+          <div className="text-default-500">size: {size}</div>
+          <InputOtp length={4} size={size} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/sizes.ts b/apps/docs/content/components/input-otp/sizes.ts
new file mode 100644
index 0000000000..85a2f5b30b
--- /dev/null
+++ b/apps/docs/content/components/input-otp/sizes.ts
@@ -0,0 +1,9 @@
+import App from "./sizes.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/usage.raw.jsx b/apps/docs/content/components/input-otp/usage.raw.jsx
new file mode 100644
index 0000000000..c44c4bde47
--- /dev/null
+++ b/apps/docs/content/components/input-otp/usage.raw.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <InputOtp length={4} value={value} onValueChange={setValue} />
+      <div className="text-small text-default-500">
+        OTP value: <span className="text-md font-medium">{value}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/usage.ts b/apps/docs/content/components/input-otp/usage.ts
new file mode 100644
index 0000000000..1118304c37
--- /dev/null
+++ b/apps/docs/content/components/input-otp/usage.ts
@@ -0,0 +1,9 @@
+import App from "./usage.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input-otp/variants.raw.jsx b/apps/docs/content/components/input-otp/variants.raw.jsx
new file mode 100644
index 0000000000..978123f522
--- /dev/null
+++ b/apps/docs/content/components/input-otp/variants.raw.jsx
@@ -0,0 +1,16 @@
+import {InputOtp} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-wrap gap-4">
+      {variants.map((variant) => (
+        <div key={variant}>
+          <div className="text-default-500">variant: {variant}</div>
+          <InputOtp length={4} variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input-otp/variants.ts b/apps/docs/content/components/input-otp/variants.ts
new file mode 100644
index 0000000000..ddea95fb2e
--- /dev/null
+++ b/apps/docs/content/components/input-otp/variants.ts
@@ -0,0 +1,9 @@
+import App from "./variants.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input/clear-button.raw.jsx b/apps/docs/content/components/input/clear-button.raw.jsx
new file mode 100644
index 0000000000..c2fea3d79b
--- /dev/null
+++ b/apps/docs/content/components/input/clear-button.raw.jsx
@@ -0,0 +1,17 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isClearable
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      placeholder="Enter your email"
+      type="email"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("input cleared")}
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/clear-button.ts b/apps/docs/content/components/input/clear-button.ts
index 892ea1dd45..f84fe2f74e 100644
--- a/apps/docs/content/components/input/clear-button.ts
+++ b/apps/docs/content/components/input/clear-button.ts
@@ -1,19 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isClearable
-      type="email"
-      label="Email"
-      variant="bordered"
-      placeholder="Enter your email"
-      defaultValue="junior@nextui.org"
-      onClear={() => console.log("input cleared")}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./clear-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/colors.raw.jsx b/apps/docs/content/components/input/colors.raw.jsx
new file mode 100644
index 0000000000..f1dd7e6e5b
--- /dev/null
+++ b/apps/docs/content/components/input/colors.raw.jsx
@@ -0,0 +1,21 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Input
+          key={color}
+          className="max-w-[220px]"
+          color={color}
+          defaultValue="junior@nextui.org"
+          label="Email"
+          placeholder="Enter your email"
+          type="email"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/colors.ts b/apps/docs/content/components/input/colors.ts
index 40885df2c1..d5bef810aa 100644
--- a/apps/docs/content/components/input/colors.ts
+++ b/apps/docs/content/components/input/colors.ts
@@ -1,31 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Input
-          key={color}
-          type="email"
-          color={color}
-          label="Email"
-          placeholder="Enter your email"
-          defaultValue="junior@nextui.org"
-          className="max-w-[220px]"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/controlled.raw.jsx b/apps/docs/content/components/input/controlled.raw.jsx
new file mode 100644
index 0000000000..7cb97a37be
--- /dev/null
+++ b/apps/docs/content/components/input/controlled.raw.jsx
@@ -0,0 +1,12 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <Input label="Email" placeholder="Enter your email" value={value} onValueChange={setValue} />
+      <p className="text-default-500 text-small">Input value: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/controlled.ts b/apps/docs/content/components/input/controlled.ts
index 7c923292b9..2c3f0cacb4 100644
--- a/apps/docs/content/components/input/controlled.ts
+++ b/apps/docs/content/components/input/controlled.ts
@@ -1,20 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <div className="w-full flex flex-col gap-2 max-w-[240px]">
-      <Input
-        label="Email"
-        placeholder="Enter your email"
-        value={value}
-        onValueChange={setValue}
-      />
-      <p className="text-default-500 text-small">Input value: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/custom-impl.raw.jsx b/apps/docs/content/components/input/custom-impl.raw.jsx
new file mode 100644
index 0000000000..9a75192076
--- /dev/null
+++ b/apps/docs/content/components/input/custom-impl.raw.jsx
@@ -0,0 +1,162 @@
+import React, {forwardRef} from "react";
+import {useInput} from "@nextui-org/react";
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const CloseFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+const styles = {
+  label: "text-black/50 dark:text-white/90",
+  input: [
+    "bg-transparent",
+    "text-black/90 dark:text-white/90",
+    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
+  ],
+  innerWrapper: "bg-transparent",
+  inputWrapper: [
+    "shadow-xl",
+    "bg-default-200/50",
+    "dark:bg-default/60",
+    "backdrop-blur-xl",
+    "backdrop-saturate-200",
+    "hover:bg-default-200/70",
+    "focus-within:!bg-default-200/50",
+    "dark:hover:bg-default/70",
+    "dark:focus-within:!bg-default/60",
+    "!cursor-text",
+  ],
+};
+
+const MyInput = forwardRef((props, ref) => {
+  const {
+    Component,
+    label,
+    domRef,
+    description,
+    isClearable,
+    startContent,
+    endContent,
+    shouldLabelBeOutside,
+    shouldLabelBeInside,
+    errorMessage,
+    getBaseProps,
+    getLabelProps,
+    getInputProps,
+    getInnerWrapperProps,
+    getInputWrapperProps,
+    getDescriptionProps,
+    getErrorMessageProps,
+    getClearButtonProps,
+  } = useInput({
+    ...props,
+    ref,
+    // this is just for the example, the props bellow should be passed by the parent component
+    label: "Search",
+    type: "search",
+    placeholder: "Type to search...",
+    startContent: (
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+    ),
+    // custom styles
+    classNames: {
+      ...styles,
+    },
+  });
+
+  const labelContent = <label {...getLabelProps()}>{label}</label>;
+
+  const end = React.useMemo(() => {
+    if (isClearable) {
+      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
+    }
+
+    return endContent;
+  }, [isClearable, getClearButtonProps]);
+
+  const innerWrapper = React.useMemo(() => {
+    if (startContent || end) {
+      return (
+        <div {...getInnerWrapperProps()}>
+          {startContent}
+          <input {...getInputProps()} />
+          {end}
+        </div>
+      );
+    }
+
+    return <input {...getInputProps()} />;
+  }, [startContent, end, getInputProps, getInnerWrapperProps]);
+
+  return (
+    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <Component {...getBaseProps()}>
+        {shouldLabelBeOutside ? labelContent : null}
+        <div
+          tabIndex={0}
+          {...getInputWrapperProps()}
+          role="button"
+          onClick={() => {
+            domRef.current?.focus();
+          }}
+          onKeyDown={() => {
+            domRef.current?.focus();
+          }}
+        >
+          {shouldLabelBeInside ? labelContent : null}
+          {innerWrapper}
+        </div>
+        {description && <div {...getDescriptionProps()}>{description}</div>}
+        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
+      </Component>
+    </div>
+  );
+});
+
+MyInput.displayName = "MyInput";
+
+export default MyInput;
diff --git a/apps/docs/content/components/input/custom-impl.ts b/apps/docs/content/components/input/custom-impl.ts
index 8fb99cecdb..ab37512cec 100644
--- a/apps/docs/content/components/input/custom-impl.ts
+++ b/apps/docs/content/components/input/custom-impl.ts
@@ -1,164 +1,7 @@
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const CloseFilledIcon = `export const CloseFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12 2a10 10 0 1010 10A10.016 10.016 0 0012 2zm3.36 12.3a.754.754 0 010 1.06.748.748 0 01-1.06 0l-2.3-2.3-2.3 2.3a.748.748 0 01-1.06 0 .754.754 0 010-1.06l2.3-2.3-2.3-2.3A.75.75 0 019.7 8.64l2.3 2.3 2.3-2.3a.75.75 0 011.06 1.06l-2.3 2.3z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import React, {forwardRef} from "react";
-import {useInput} from "@nextui-org/react";
-import {SearchIcon} from "./SearchIcon";
-import {CloseFilledIcon} from "./CloseFilledIcon";
-
-const styles = {
-  label: "text-black/50 dark:text-white/90",
-  input: [
-    "bg-transparent",
-    "text-black/90 dark:text-white/90",
-    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
-  ],
-  innerWrapper: "bg-transparent",
-  inputWrapper: [
-    "shadow-xl",
-    "bg-default-200/50",
-    "dark:bg-default/60",
-    "backdrop-blur-xl",
-    "backdrop-saturate-200",
-    "hover:bg-default-200/70",
-    "focus-within:!bg-default-200/50",
-    "dark:hover:bg-default/70",
-    "dark:focus-within:!bg-default/60",
-    "!cursor-text",
-  ],
-};
-
-const MyInput = forwardRef((props, ref) => {
-  const {
-    Component,
-    label,
-    domRef,
-    description,
-    isClearable,
-    startContent,
-    endContent,
-    shouldLabelBeOutside,
-    shouldLabelBeInside,
-    errorMessage,
-    getBaseProps,
-    getLabelProps,
-    getInputProps,
-    getInnerWrapperProps,
-    getInputWrapperProps,
-    getDescriptionProps,
-    getErrorMessageProps,
-    getClearButtonProps,
-  } = useInput({
-    ...props,
-    ref,
-    // this is just for the example, the props bellow should be passed by the parent component
-    label: "Search",
-    type: "search",
-    placeholder: "Type to search...",
-    startContent: (
-      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
-    ),
-    // custom styles
-    classNames: {
-      ...styles,
-    },
-  });
-
-  const labelContent = <label {...getLabelProps()}>{label}</label>;
-
-  const end = React.useMemo(() => {
-    if (isClearable) {
-      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
-    }
-
-    return endContent;
-  }, [isClearable, getClearButtonProps]);
-
-  const innerWrapper = React.useMemo(() => {
-    if (startContent || end) {
-      return (
-        <div {...getInnerWrapperProps()}>
-          {startContent}
-          <input {...getInputProps()} />
-          {end}
-        </div>
-      );
-    }
-
-    return <input {...getInputProps()} />;
-  }, [startContent, end, getInputProps, getInnerWrapperProps]);
-
-  return (
-    <div className="w-[340px] h-[300px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      <Component {...getBaseProps()}>
-        {shouldLabelBeOutside ? labelContent : null}
-        <div
-          {...getInputWrapperProps()}
-          role="button"
-          onClick={() => {
-            domRef.current?.focus();
-          }}
-        >
-          {shouldLabelBeInside ? labelContent : null}
-          {innerWrapper}
-        </div>
-        {description && <div {...getDescriptionProps()}>{description}</div>}
-        {errorMessage && <div {...getErrorMessageProps()}>{errorMessage}</div>}
-      </Component>
-    </div>
-  );
-});
-
-MyInput.displayName = "MyInput";
-
-export default MyInput;`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SearchIcon.jsx": SearchIcon,
-  "/CloseFilledIcon.jsx": CloseFilledIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/custom-styles.raw.jsx b/apps/docs/content/components/input/custom-styles.raw.jsx
new file mode 100644
index 0000000000..98c11c99bb
--- /dev/null
+++ b/apps/docs/content/components/input/custom-styles.raw.jsx
@@ -0,0 +1,68 @@
+import {Input} from "@nextui-org/react";
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
+      <Input
+        isClearable
+        classNames={{
+          label: "text-black/50 dark:text-white/90",
+          input: [
+            "bg-transparent",
+            "text-black/90 dark:text-white/90",
+            "placeholder:text-default-700/50 dark:placeholder:text-white/60",
+          ],
+          innerWrapper: "bg-transparent",
+          inputWrapper: [
+            "shadow-xl",
+            "bg-default-200/50",
+            "dark:bg-default/60",
+            "backdrop-blur-xl",
+            "backdrop-saturate-200",
+            "hover:bg-default-200/70",
+            "dark:hover:bg-default/70",
+            "group-data-[focus=true]:bg-default-200/50",
+            "dark:group-data-[focus=true]:bg-default/60",
+            "!cursor-text",
+          ],
+        }}
+        label="Search"
+        placeholder="Type to search..."
+        radius="lg"
+        startContent={
+          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+        }
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/custom-styles.ts b/apps/docs/content/components/input/custom-styles.ts
index 3908b17561..da3ea9093a 100644
--- a/apps/docs/content/components/input/custom-styles.ts
+++ b/apps/docs/content/components/input/custom-styles.ts
@@ -1,74 +1,7 @@
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {SearchIcon} from "./SearchIcon";
-
-export default function App() {
-  return (
-    <div className="w-[340px] h-[240px] px-8 rounded-2xl flex justify-center items-center bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      <Input
-        label="Search"
-        isClearable
-        radius="lg"
-        classNames={{
-          label: "text-black/50 dark:text-white/90",
-          input: [
-            "bg-transparent",
-            "text-black/90 dark:text-white/90",
-            "placeholder:text-default-700/50 dark:placeholder:text-white/60",
-          ],
-          innerWrapper: "bg-transparent",
-          inputWrapper: [
-            "shadow-xl",
-            "bg-default-200/50",
-            "dark:bg-default/60",
-            "backdrop-blur-xl",
-            "backdrop-saturate-200",
-            "hover:bg-default-200/70",
-            "dark:hover:bg-default/70",
-            "group-data-[focus=true]:bg-default-200/50",
-            "dark:group-data-[focus=true]:bg-default/60",
-            "!cursor-text",
-          ],
-        }}
-        placeholder="Type to search..."
-        startContent={
-          <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
-        }
-      />
-    </div>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/SearchIcon.jsx": SearchIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/description.raw.jsx b/apps/docs/content/components/input/description.raw.jsx
new file mode 100644
index 0000000000..3362ef3dcd
--- /dev/null
+++ b/apps/docs/content/components/input/description.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      description="We'll never share your email with anyone else."
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/description.ts b/apps/docs/content/components/input/description.ts
index 8a286b3692..aeb6340b6b 100644
--- a/apps/docs/content/components/input/description.ts
+++ b/apps/docs/content/components/input/description.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      description="We'll never share your email with anyone else."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/disabled.raw.jsx b/apps/docs/content/components/input/disabled.raw.jsx
new file mode 100644
index 0000000000..6ed57cee8d
--- /dev/null
+++ b/apps/docs/content/components/input/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isDisabled
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/disabled.ts b/apps/docs/content/components/input/disabled.ts
index f3122337c3..1a215cc91f 100644
--- a/apps/docs/content/components/input/disabled.ts
+++ b/apps/docs/content/components/input/disabled.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isDisabled
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/error-message.raw.jsx b/apps/docs/content/components/input/error-message.raw.jsx
new file mode 100644
index 0000000000..d8f0f19f5c
--- /dev/null
+++ b/apps/docs/content/components/input/error-message.raw.jsx
@@ -0,0 +1,15 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      className="max-w-xs"
+      defaultValue="junior2nextui.org"
+      errorMessage="Please enter a valid email"
+      isInvalid={true}
+      label="Email"
+      type="email"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/error-message.ts b/apps/docs/content/components/input/error-message.ts
index 8ed295e659..fb8101b132 100644
--- a/apps/docs/content/components/input/error-message.ts
+++ b/apps/docs/content/components/input/error-message.ts
@@ -1,18 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      type="email"
-      label="Email"
-      variant="bordered"
-      defaultValue="junior2nextui.org"
-      isInvalid={true}
-      errorMessage="Please enter a valid email"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/label-placements.raw.jsx b/apps/docs/content/components/input/label-placements.raw.jsx
new file mode 100644
index 0000000000..01c6692667
--- /dev/null
+++ b/apps/docs/content/components/input/label-placements.raw.jsx
@@ -0,0 +1,39 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">Without placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Input
+              key={placement}
+              description={placement}
+              label="Email"
+              labelPlacement={placement}
+              type="email"
+            />
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">With placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Input
+              key={placement}
+              description={placement}
+              label="Email"
+              labelPlacement={placement}
+              placeholder="Enter your email"
+              type="email"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/label-placements.ts b/apps/docs/content/components/input/label-placements.ts
index f37fc6cf78..cd2a65d352 100644
--- a/apps/docs/content/components/input/label-placements.ts
+++ b/apps/docs/content/components/input/label-placements.ts
@@ -1,46 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">Without placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Input
-              key={placement}
-              type="email"
-              label="Email"
-              labelPlacement={placement}
-              description={placement}
-            />
-          ))}
-        </div>
-      </div>  
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">With placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Input
-              key={placement}
-              type="email"
-              label="Email"
-              labelPlacement={placement}
-              placeholder="Enter your email"
-              description={placement}
-            />
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx
new file mode 100644
index 0000000000..e8aa0025cd
--- /dev/null
+++ b/apps/docs/content/components/input/password.raw.jsx
@@ -0,0 +1,91 @@
+import {Input} from "@nextui-org/react";
+
+export const EyeSlashFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z"
+        fill="currentColor"
+      />
+      <path
+        d="M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EyeFilledIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isVisible, setIsVisible] = React.useState(false);
+
+  const toggleVisibility = () => setIsVisible(!isVisible);
+
+  return (
+    <Input
+      className="max-w-xs"
+      endContent={
+        <button
+          aria-label="toggle password visibility"
+          className="focus:outline-none"
+          type="button"
+          onClick={toggleVisibility}
+        >
+          {isVisible ? (
+            <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+          ) : (
+            <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
+          )}
+        </button>
+      }
+      label="Password"
+      placeholder="Enter your password"
+      type={isVisible ? "text" : "password"}
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/password.ts b/apps/docs/content/components/input/password.ts
index 02822deb75..7751eaf935 100644
--- a/apps/docs/content/components/input/password.ts
+++ b/apps/docs/content/components/input/password.ts
@@ -1,92 +1,7 @@
-const EyeSlashFilledIcon = `export const EyeSlashFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z"
-      fill="currentColor"
-    />
-    <path
-      d="M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z"
-      fill="currentColor"
-    />
-    <path
-      d="M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EyeFilledIcon = `export const EyeFilledIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {EyeFilledIcon} from "./EyeFilledIcon";
-import {EyeSlashFilledIcon} from "./EyeSlashFilledIcon";
-
-export default function App() {
-  const [isVisible, setIsVisible] = React.useState(false);
-
-  const toggleVisibility = () => setIsVisible(!isVisible);
-
-  return (
-    <Input
-      label="Password"
-      variant="bordered"
-      placeholder="Enter your password"
-      endContent={
-        <button className="focus:outline-none" type="button" onClick={toggleVisibility} aria-label="toggle password visibility">
-          {isVisible ? (
-            <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-          ) : (
-            <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
-          )}
-        </button>
-      }
-      type={isVisible ? "text" : "password"}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./password.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/EyeSlashFilledIcon.jsx": EyeSlashFilledIcon,
-  "/EyeFilledIcon.jsx": EyeFilledIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/radius.raw.jsx b/apps/docs/content/components/input/radius.raw.jsx
new file mode 100644
index 0000000000..cf85ff22f2
--- /dev/null
+++ b/apps/docs/content/components/input/radius.raw.jsx
@@ -0,0 +1,21 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {radius.map((r) => (
+        <Input
+          key={r}
+          className="max-w-[220px]"
+          defaultValue="junior@nextui.org"
+          label="Email"
+          placeholder="Enter your email"
+          radius={r}
+          type="email"
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/radius.ts b/apps/docs/content/components/input/radius.ts
index 13eaba44b0..7b78db1ce0 100644
--- a/apps/docs/content/components/input/radius.ts
+++ b/apps/docs/content/components/input/radius.ts
@@ -1,30 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {radius.map((r) => (
-        <Input
-          key={r}
-          radius={r}
-          type="email"
-          label="Email"
-          placeholder="Enter your email"
-          defaultValue="junior@nextui.org"
-          className="max-w-[220px]"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/readonly.raw.jsx b/apps/docs/content/components/input/readonly.raw.jsx
new file mode 100644
index 0000000000..50cb471ded
--- /dev/null
+++ b/apps/docs/content/components/input/readonly.raw.jsx
@@ -0,0 +1,14 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isReadOnly
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/readonly.ts b/apps/docs/content/components/input/readonly.ts
index 7e9bf99da4..fabd05ba36 100644
--- a/apps/docs/content/components/input/readonly.ts
+++ b/apps/docs/content/components/input/readonly.ts
@@ -1,17 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isReadOnly
-      type="email"
-      label="Email"
-      variant="bordered"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/regex-validation.raw.jsx b/apps/docs/content/components/input/regex-validation.raw.jsx
new file mode 100644
index 0000000000..64e06b69c7
--- /dev/null
+++ b/apps/docs/content/components/input/regex-validation.raw.jsx
@@ -0,0 +1,27 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("junior2nextui.org");
+
+  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
+
+  const isInvalid = React.useMemo(() => {
+    if (value === "") return false;
+
+    return validateEmail(value) ? false : true;
+  }, [value]);
+
+  return (
+    <Input
+      className="max-w-xs"
+      color={isInvalid ? "danger" : "success"}
+      errorMessage="Please enter a valid email"
+      isInvalid={isInvalid}
+      label="Email"
+      type="email"
+      value={value}
+      variant="bordered"
+      onValueChange={setValue}
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/regex-validation.ts b/apps/docs/content/components/input/regex-validation.ts
index 1eb62d8e2b..395d689b17 100644
--- a/apps/docs/content/components/input/regex-validation.ts
+++ b/apps/docs/content/components/input/regex-validation.ts
@@ -1,30 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("junior2nextui.org");
-
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
-
-  const isInvalid = React.useMemo(() => {
-    if (value === "") return false;
-
-    return validateEmail(value) ? false : true;
-  }, [value]);
-
-  return (
-    <Input
-      value={value}
-      type="email"
-      label="Email"
-      variant="bordered"
-      isInvalid={isInvalid}
-      color={isInvalid ? "danger" : "success"}
-      errorMessage="Please enter a valid email"
-      onValueChange={setValue}
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./regex-validation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/required.raw.jsx b/apps/docs/content/components/input/required.raw.jsx
new file mode 100644
index 0000000000..6e97f4494b
--- /dev/null
+++ b/apps/docs/content/components/input/required.raw.jsx
@@ -0,0 +1,13 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Input
+      isRequired
+      className="max-w-xs"
+      defaultValue="junior@nextui.org"
+      label="Email"
+      type="email"
+    />
+  );
+}
diff --git a/apps/docs/content/components/input/required.ts b/apps/docs/content/components/input/required.ts
index 2af84c5b46..b50b781e6f 100644
--- a/apps/docs/content/components/input/required.ts
+++ b/apps/docs/content/components/input/required.ts
@@ -1,16 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Input
-      isRequired
-      type="email"
-      label="Email"
-      defaultValue="junior@nextui.org"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/sizes.raw.jsx b/apps/docs/content/components/input/sizes.raw.jsx
new file mode 100644
index 0000000000..01e44c76d4
--- /dev/null
+++ b/apps/docs/content/components/input/sizes.raw.jsx
@@ -0,0 +1,16 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Input label="Email" size={size} type="email" />
+          <Input label="Email" placeholder="Enter your email" size={size} type="email" />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/sizes.ts b/apps/docs/content/components/input/sizes.ts
index 6294e756c7..85a2f5b30b 100644
--- a/apps/docs/content/components/input/sizes.ts
+++ b/apps/docs/content/components/input/sizes.ts
@@ -1,20 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {sizes.map((size) => (
-        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Input size={size} type="email" label="Email" />
-          <Input size={size} type="email" label="Email" placeholder="Enter your email" />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx
new file mode 100644
index 0000000000..306c4f70b0
--- /dev/null
+++ b/apps/docs/content/components/input/start-end-content.raw.jsx
@@ -0,0 +1,152 @@
+import {Input} from "@nextui-org/react";
+
+export const MailIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          label="Email"
+          labelPlacement="outside"
+          placeholder="you@example.com"
+          startContent={
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          type="email"
+        />
+        <Input
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          type="number"
+        />
+        <Input
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui.org"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">https://</span>
+            </div>
+          }
+          type="url"
+        />
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          endContent={
+            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+          label="Email"
+          labelPlacement="outside"
+          placeholder="you@example.com"
+          type="email"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          type="number"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">.org/</span>
+            </div>
+          }
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui"
+          type="url"
+        />
+      </div>
+      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">@gmail.com</span>
+            </div>
+          }
+          label="Email"
+          labelPlacement="outside"
+          placeholder="nextui"
+          startContent={
+            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+          }
+        />
+        <Input
+          endContent={
+            <div className="flex items-center">
+              <label className="sr-only" htmlFor="currency">
+                Currency
+              </label>
+              <select
+                className="outline-none border-0 bg-transparent text-default-400 text-small"
+                id="currency"
+                name="currency"
+              >
+                <option>USD</option>
+                <option>ARS</option>
+                <option>EUR</option>
+              </select>
+            </div>
+          }
+          label="Price"
+          labelPlacement="outside"
+          placeholder="0.00"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">$</span>
+            </div>
+          }
+          type="number"
+        />
+        <Input
+          endContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">.org</span>
+            </div>
+          }
+          label="Website"
+          labelPlacement="outside"
+          placeholder="nextui"
+          startContent={
+            <div className="pointer-events-none flex items-center">
+              <span className="text-default-400 text-small">https://</span>
+            </div>
+          }
+          type="url"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/start-end-content.ts b/apps/docs/content/components/input/start-end-content.ts
index 767530eb9d..e99c7e5997 100644
--- a/apps/docs/content/components/input/start-end-content.ts
+++ b/apps/docs/content/components/input/start-end-content.ts
@@ -1,158 +1,7 @@
-const MailIcon = `export const MailIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Input} from "@nextui-org/react";
-import {MailIcon} from './MailIcon';
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          type="email"
-          label="Email"
-          placeholder="you@example.com"
-          labelPlacement="outside"
-          startContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <Input
-          type="number"
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui.org"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">https://</span>
-            </div>
-          }
-        />
-      </div>
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          type="email"
-          label="Email"
-          placeholder="you@example.com"
-          labelPlacement="outside"
-          endContent={
-            <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-        />
-        <Input
-          type="number"
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui"
-          labelPlacement="outside"
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">.org/</span>
-            </div>
-          }
-        />
-      </div>
-      <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-        <Input
-          label="Email"
-          placeholder="nextui"
-          labelPlacement="outside"
-          startContent={
-            <MailIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-          }
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">@gmail.com</span>
-            </div>
-          }
-        />
-        <Input
-          label="Price"
-          placeholder="0.00"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">$</span>
-            </div>
-          }
-          endContent={
-            <div className="flex items-center">
-              <label className="sr-only" htmlFor="currency">
-                Currency
-              </label>
-              <select
-                className="outline-none border-0 bg-transparent text-default-400 text-small"
-                id="currency"
-                name="currency"
-              >
-                <option>USD</option>
-                <option>ARS</option>
-                <option>EUR</option>
-              </select>
-            </div>
-          }
-          type="number"
-        />
-        <Input
-          type="url"
-          label="Website"
-          placeholder="nextui"
-          labelPlacement="outside"
-          startContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">https://</span>
-            </div>
-          }
-          endContent={
-            <div className="pointer-events-none flex items-center">
-              <span className="text-default-400 text-small">.org</span>
-            </div>
-          }
-        />
-      </div>
-    </div>  
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": MailIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/input/usage.raw.jsx b/apps/docs/content/components/input/usage.raw.jsx
new file mode 100644
index 0000000000..3b7f143b55
--- /dev/null
+++ b/apps/docs/content/components/input/usage.raw.jsx
@@ -0,0 +1,10 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Input label="Email" type="email" />
+      <Input label="Email" placeholder="Enter your email" type="email" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/usage.ts b/apps/docs/content/components/input/usage.ts
index e2896cf877..1118304c37 100644
--- a/apps/docs/content/components/input/usage.ts
+++ b/apps/docs/content/components/input/usage.ts
@@ -1,13 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Input type="email" label="Email" />
-      <Input type="email" label="Email" placeholder="Enter your email" />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/input/variants.raw.jsx b/apps/docs/content/components/input/variants.raw.jsx
new file mode 100644
index 0000000000..bfe66708dc
--- /dev/null
+++ b/apps/docs/content/components/input/variants.raw.jsx
@@ -0,0 +1,16 @@
+import {Input} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Input label="Email" type="email" variant={variant} />
+          <Input label="Email" placeholder="Enter your email" type="email" variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/input/variants.ts b/apps/docs/content/components/input/variants.ts
index d8308fd586..ddea95fb2e 100644
--- a/apps/docs/content/components/input/variants.ts
+++ b/apps/docs/content/components/input/variants.ts
@@ -1,19 +1,4 @@
-const App = `import {Input} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Input type="email" variant={variant} label="Email" />
-          <Input type="email" variant={variant} label="Email" placeholder="Enter your email" />
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/kbd/keys.raw.jsx b/apps/docs/content/components/kbd/keys.raw.jsx
new file mode 100644
index 0000000000..b1a656827e
--- /dev/null
+++ b/apps/docs/content/components/kbd/keys.raw.jsx
@@ -0,0 +1,11 @@
+import {Kbd} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Kbd keys={["command"]}>K</Kbd>
+      <Kbd keys={["command", "shift"]}>N</Kbd>
+      <Kbd keys={["option", "command"]}>P</Kbd>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/kbd/keys.ts b/apps/docs/content/components/kbd/keys.ts
index e4f45fd712..34b8861432 100644
--- a/apps/docs/content/components/kbd/keys.ts
+++ b/apps/docs/content/components/kbd/keys.ts
@@ -1,14 +1,4 @@
-const App = `import {Kbd} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Kbd keys={["command"]}>K</Kbd>
-      <Kbd keys={["command", "shift"]}>N</Kbd>
-      <Kbd keys={["option", "command"]}>P</Kbd>
-    </div>  
-  );
-}`;
+import App from "./keys.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/kbd/usage.raw.jsx b/apps/docs/content/components/kbd/usage.raw.jsx
new file mode 100644
index 0000000000..2195959b23
--- /dev/null
+++ b/apps/docs/content/components/kbd/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Kbd} from "@nextui-org/react";
+
+export default function App() {
+  return <Kbd keys={["command"]}>K</Kbd>;
+}
diff --git a/apps/docs/content/components/kbd/usage.ts b/apps/docs/content/components/kbd/usage.ts
index 11fd11aba2..1118304c37 100644
--- a/apps/docs/content/components/kbd/usage.ts
+++ b/apps/docs/content/components/kbd/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Kbd} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Kbd keys={["command"]}>K</Kbd>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/block.raw.jsx b/apps/docs/content/components/link/block.raw.jsx
new file mode 100644
index 0000000000..d8f5a60f1c
--- /dev/null
+++ b/apps/docs/content/components/link/block.raw.jsx
@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Link isBlock showAnchorIcon color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link isBlock showAnchorIcon color="primary" href="#">
+        Primary
+      </Link>
+      <Link isBlock showAnchorIcon color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link isBlock showAnchorIcon color="success" href="#">
+        Success
+      </Link>
+      <Link isBlock showAnchorIcon color="warning" href="#">
+        Warning
+      </Link>
+      <Link isBlock showAnchorIcon color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/block.ts b/apps/docs/content/components/link/block.ts
index b7ee134ec8..7262af3b6d 100644
--- a/apps/docs/content/components/link/block.ts
+++ b/apps/docs/content/components/link/block.ts
@@ -1,29 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Link isBlock showAnchorIcon href="#" color="foreground">
-        Foreground
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="primary">
-        Primary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="secondary">
-        Secondary
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="success">
-        Success
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="warning">
-        Warning
-      </Link>
-      <Link isBlock showAnchorIcon href="#" color="danger">
-        Danger
-      </Link>
-    </div>
-  );
-}`;
+import App from "./block.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/colors.raw.jsx b/apps/docs/content/components/link/colors.raw.jsx
new file mode 100644
index 0000000000..66192e6a92
--- /dev/null
+++ b/apps/docs/content/components/link/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link color="foreground" href="#">
+        Foreground
+      </Link>
+      <Link color="primary" href="#">
+        Primary
+      </Link>
+      <Link color="secondary" href="#">
+        Secondary
+      </Link>
+      <Link color="success" href="#">
+        Success
+      </Link>
+      <Link color="warning" href="#">
+        Warning
+      </Link>
+      <Link color="danger" href="#">
+        Danger
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/colors.ts b/apps/docs/content/components/link/colors.ts
index 99a84bf238..d5bef810aa 100644
--- a/apps/docs/content/components/link/colors.ts
+++ b/apps/docs/content/components/link/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" color="foreground">Foreground</Link>
-      <Link href="#" color="primary">Primary</Link>
-      <Link href="#" color="secondary">Secondary</Link>
-      <Link href="#" color="success">Success</Link>
-      <Link href="#" color="warning">Warning</Link>
-      <Link href="#" color="danger">Danger</Link>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/custom-anchor-icon.raw.jsx b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx
new file mode 100644
index 0000000000..8892552391
--- /dev/null
+++ b/apps/docs/content/components/link/custom-anchor-icon.raw.jsx
@@ -0,0 +1,37 @@
+import {Link} from "@nextui-org/react";
+
+export const AnchorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
+        fill="currentColor"
+      />
+      <path
+        d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Link
+      isExternal
+      showAnchorIcon
+      anchorIcon={<AnchorIcon />}
+      href="https://github.com/nextui-org/nextui"
+    >
+      Custom Icon
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/custom-anchor-icon.ts b/apps/docs/content/components/link/custom-anchor-icon.ts
index ca70aee5a7..6d105abc2e 100644
--- a/apps/docs/content/components/link/custom-anchor-icon.ts
+++ b/apps/docs/content/components/link/custom-anchor-icon.ts
@@ -1,43 +1,7 @@
-const AnchorIcon = `export const AnchorIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    {...props}
-  >
-    <path
-      d="M8.465,11.293c1.133-1.133,3.109-1.133,4.242,0L13.414,12l1.414-1.414l-0.707-0.707c-0.943-0.944-2.199-1.465-3.535-1.465 S7.994,8.935,7.051,9.879L4.929,12c-1.948,1.949-1.948,5.122,0,7.071c0.975,0.975,2.255,1.462,3.535,1.462 c1.281,0,2.562-0.487,3.536-1.462l0.707-0.707l-1.414-1.414l-0.707,0.707c-1.17,1.167-3.073,1.169-4.243,0 c-1.169-1.17-1.169-3.073,0-4.243L8.465,11.293z"
-      fill="currentColor"
-    />
-    <path
-      d="M12,4.929l-0.707,0.707l1.414,1.414l0.707-0.707c1.169-1.167,3.072-1.169,4.243,0c1.169,1.17,1.169,3.073,0,4.243 l-2.122,2.121c-1.133,1.133-3.109,1.133-4.242,0L10.586,12l-1.414,1.414l0.707,0.707c0.943,0.944,2.199,1.465,3.535,1.465 s2.592-0.521,3.535-1.465L19.071,12c1.948-1.949,1.948-5.122,0-7.071C17.121,2.979,13.948,2.98,12,4.929z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Link} from "@nextui-org/react";
-import {AnchorIcon} from "./AnchorIcon";
-
-export default function App() {
-  return (
-    <Link
-      isExternal
-      showAnchorIcon
-      href="https://github.com/nextui-org/nextui"
-      anchorIcon={<AnchorIcon />}
-    >
-      Custom Icon
-    </Link>
-  );
-}`;
+import App from "./custom-anchor-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AnchorIcon.jsx": AnchorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/link/custom-impl.raw.jsx b/apps/docs/content/components/link/custom-impl.raw.jsx
new file mode 100644
index 0000000000..bfadf4d60d
--- /dev/null
+++ b/apps/docs/content/components/link/custom-impl.raw.jsx
@@ -0,0 +1,30 @@
+import {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {useLink} from "@nextui-org/react";
+
+const MyLink = forwardRef((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;
diff --git a/apps/docs/content/components/link/custom-impl.raw.tsx b/apps/docs/content/components/link/custom-impl.raw.tsx
new file mode 100644
index 0000000000..c4cd0ba569
--- /dev/null
+++ b/apps/docs/content/components/link/custom-impl.raw.tsx
@@ -0,0 +1,32 @@
+import React, {forwardRef} from "react";
+import {LinkIcon} from "@nextui-org/shared-icons";
+import {linkAnchorClasses} from "@nextui-org/theme";
+import {LinkProps, useLink} from "@nextui-org/react";
+
+export interface MyLinkProps extends LinkProps {}
+
+const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
+  const {
+    Component,
+    children,
+    showAnchorIcon,
+    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
+    getLinkProps,
+  } = useLink({
+    ...props,
+    ref,
+  });
+
+  return (
+    <Component {...getLinkProps()}>
+      <>
+        {children}
+        {showAnchorIcon && anchorIcon}
+      </>
+    </Component>
+  );
+});
+
+MyLink.displayName = "MyLink";
+
+export default MyLink;
diff --git a/apps/docs/content/components/link/custom-impl.ts b/apps/docs/content/components/link/custom-impl.ts
index 9c1a72017d..ef0d8ef531 100644
--- a/apps/docs/content/components/link/custom-impl.ts
+++ b/apps/docs/content/components/link/custom-impl.ts
@@ -1,68 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {useLink} from "@nextui-org/react";
-
-const MyLink = forwardRef((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
-
-const AppTs = `import {forwardRef} from "react";
-import {LinkIcon} from "@nextui-org/shared-icons";
-import {linkAnchorClasses} from "@nextui-org/theme";
-
-import {LinkProps, useLink} from "@nextui-org/react";
-
-export interface MyLinkProps extends LinkProps {}
-
-const MyLink = forwardRef<HTMLAnchorElement, MyLinkProps>((props, ref) => {
-  const {
-    Component,
-    children,
-    showAnchorIcon,
-    anchorIcon = <LinkIcon className={linkAnchorClasses} />,
-    getLinkProps,
-  } = useLink({
-    ...props,
-    ref,
-  });
-
-  return (
-    <Component {...getLinkProps()}>
-      <>
-        {children}
-        {showAnchorIcon && anchorIcon}
-      </>
-    </Component>
-  );
-});
-
-MyLink.displayName = "MyLink";
-
-export default MyLink;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/disabled.raw.jsx b/apps/docs/content/components/link/disabled.raw.jsx
new file mode 100644
index 0000000000..28ab3b52b3
--- /dev/null
+++ b/apps/docs/content/components/link/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Link isDisabled href="#">
+      Disabled Link
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/disabled.ts b/apps/docs/content/components/link/disabled.ts
index a4db371fba..1a215cc91f 100644
--- a/apps/docs/content/components/link/disabled.ts
+++ b/apps/docs/content/components/link/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Link href="#" isDisabled>Disabled Link</Link>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/external.raw.jsx b/apps/docs/content/components/link/external.raw.jsx
new file mode 100644
index 0000000000..63d17130ca
--- /dev/null
+++ b/apps/docs/content/components/link/external.raw.jsx
@@ -0,0 +1,14 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link isExternal href="https://github.com/nextui-org/nextui">
+        External Link
+      </Link>
+      <Link isExternal showAnchorIcon href="https://github.com/nextui-org/nextui">
+        External Link Anchor
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/external.ts b/apps/docs/content/components/link/external.ts
index b59e78c177..ad0973aa0f 100644
--- a/apps/docs/content/components/link/external.ts
+++ b/apps/docs/content/components/link/external.ts
@@ -1,21 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link isExternal href="https://github.com/nextui-org/nextui">
-        External Link
-      </Link>
-      <Link
-        isExternal
-        href="https://github.com/nextui-org/nextui"
-        showAnchorIcon
-      >
-        External Link Anchor
-      </Link>
-    </div>
-  );
-}`;
+import App from "./external.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/nextjs.raw.jsx b/apps/docs/content/components/link/nextjs.raw.jsx
new file mode 100644
index 0000000000..38e7674e6a
--- /dev/null
+++ b/apps/docs/content/components/link/nextjs.raw.jsx
@@ -0,0 +1,10 @@
+import {Link} from "@nextui-org/react";
+import NextLink from "next/link";
+
+export default function App() {
+  return (
+    <Link as={NextLink} href="/route">
+      Next.js Link
+    </Link>
+  );
+}
diff --git a/apps/docs/content/components/link/nextjs.ts b/apps/docs/content/components/link/nextjs.ts
index 77f0e808a9..1d69196630 100644
--- a/apps/docs/content/components/link/nextjs.ts
+++ b/apps/docs/content/components/link/nextjs.ts
@@ -1,13 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-import NextLink from "next/link";
-
-export default function App() {
-  return (
-    <Link href="/route" as={NextLink}>
-      Next.js Link
-    </Link>
-  );
-}`;
+import App from "./nextjs.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/polymorphic.raw.jsx b/apps/docs/content/components/link/polymorphic.raw.jsx
new file mode 100644
index 0000000000..52e8f3bd83
--- /dev/null
+++ b/apps/docs/content/components/link/polymorphic.raw.jsx
@@ -0,0 +1,15 @@
+import {Link, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      showAnchorIcon
+      as={Link}
+      color="primary"
+      href="https://github.com/nextui-org/nextui"
+      variant="solid"
+    >
+      Button Link
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/link/polymorphic.ts b/apps/docs/content/components/link/polymorphic.ts
index 10c04b327b..5722a6ee48 100644
--- a/apps/docs/content/components/link/polymorphic.ts
+++ b/apps/docs/content/components/link/polymorphic.ts
@@ -1,18 +1,4 @@
-const App = `import { Link, Button } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button
-      href="https://github.com/nextui-org/nextui"
-      as={Link}
-      color="primary"
-      showAnchorIcon
-      variant="solid"
-    >
-      Button Link
-    </Button>
-  );
-}`;
+import App from "./polymorphic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/sizes.raw.jsx b/apps/docs/content/components/link/sizes.raw.jsx
new file mode 100644
index 0000000000..2230bd9113
--- /dev/null
+++ b/apps/docs/content/components/link/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" size="sm">
+        Small
+      </Link>
+      <Link href="#" size="md">
+        Medium
+      </Link>
+      <Link href="#" size="lg">
+        Large
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/sizes.ts b/apps/docs/content/components/link/sizes.ts
index 63df519edc..85a2f5b30b 100644
--- a/apps/docs/content/components/link/sizes.ts
+++ b/apps/docs/content/components/link/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" size="sm">Small</Link>
-      <Link href="#" size="md">Medium</Link>
-      <Link href="#" size="lg">Large</Link>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/underline.raw.jsx b/apps/docs/content/components/link/underline.raw.jsx
new file mode 100644
index 0000000000..456a63929c
--- /dev/null
+++ b/apps/docs/content/components/link/underline.raw.jsx
@@ -0,0 +1,23 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Link href="#" underline="none">
+        None
+      </Link>
+      <Link href="#" underline="hover">
+        Hover
+      </Link>
+      <Link href="#" underline="always">
+        Always
+      </Link>
+      <Link href="#" underline="active">
+        Active
+      </Link>
+      <Link href="#" underline="focus">
+        Focus
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/link/underline.ts b/apps/docs/content/components/link/underline.ts
index 78e0d7b87e..0d7eb45ee3 100644
--- a/apps/docs/content/components/link/underline.ts
+++ b/apps/docs/content/components/link/underline.ts
@@ -1,16 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Link href="#" underline="none">None</Link>
-      <Link href="#" underline="hover">Hover</Link>
-      <Link href="#" underline="always">Always</Link>
-      <Link href="#" underline="active">Active</Link>
-      <Link href="#" underline="focus">Focus</Link>
-    </div>  
-  );
-}`;
+import App from "./underline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/link/usage.raw.jsx b/apps/docs/content/components/link/usage.raw.jsx
new file mode 100644
index 0000000000..4418696de5
--- /dev/null
+++ b/apps/docs/content/components/link/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Link} from "@nextui-org/react";
+
+export default function App() {
+  return <Link href="#">Default Link</Link>;
+}
diff --git a/apps/docs/content/components/link/usage.ts b/apps/docs/content/components/link/usage.ts
index bcd07ac923..1118304c37 100644
--- a/apps/docs/content/components/link/usage.ts
+++ b/apps/docs/content/components/link/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Link href="#">Default Link</Link>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/listbox/custom-styles.raw.jsx b/apps/docs/content/components/listbox/custom-styles.raw.jsx
new file mode 100644
index 0000000000..fc90e0f636
--- /dev/null
+++ b/apps/docs/content/components/listbox/custom-styles.raw.jsx
@@ -0,0 +1,269 @@
+import {Listbox, ListboxItem, cn} from "@nextui-org/react";
+
+export const BugIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PullRequestIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M19.01 15.163V7.997C19.005 6.391 17.933 4 15 4V2l-4 3 4 3V6c1.829 0 2.001 1.539 2.01 2v7.163c-1.44.434-2.5 1.757-2.5 3.337 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337zm-1 4.837c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zM9.5 5.5C9.5 3.57 7.93 2 6 2S2.5 3.57 2.5 5.5c0 1.58 1.06 2.903 2.5 3.337v6.326c-1.44.434-2.5 1.757-2.5 3.337C2.5 20.43 4.07 22 6 22s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337V8.837C8.44 8.403 9.5 7.08 9.5 5.5zm-5 0C4.5 4.673 5.173 4 6 4s1.5.673 1.5 1.5S6.827 7 6 7s-1.5-.673-1.5-1.5zm3 13c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5S5.173 17 6 17s1.5.673 1.5 1.5z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const ChatIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
+        fill="currentColor"
+      />
+      <path
+        d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const PlayCircleIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"
+        fill="currentColor"
+      />
+      <path d="m9 17 8-5-8-5z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export const LayoutIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 4H5V5h14zM5 11h8v8H5v-8zm10 8v-8h4.001l.001 8H15z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const TagIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M11.707 2.293A.997.997 0 0 0 11 2H6a.997.997 0 0 0-.707.293l-3 3A.996.996 0 0 0 2 6v5c0 .266.105.52.293.707l10 10a.997.997 0 0 0 1.414 0l8-8a.999.999 0 0 0 0-1.414l-10-10zM13 19.586l-9-9V6.414L6.414 4h4.172l9 9L13 19.586z"
+        fill="currentColor"
+      />
+      <circle cx="8.353" cy="8.353" fill="currentColor" r="1.647" />
+    </svg>
+  );
+};
+
+export const UsersIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const WatchersIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="m21.977 13.783-2-9A1.002 1.002 0 0 0 19 4h-3v2h2.198l.961 4.326A4.467 4.467 0 0 0 17.5 10c-1.953 0-3.603 1.258-4.224 3h-2.553c-.621-1.742-2.271-3-4.224-3-.587 0-1.145.121-1.659.326L5.802 6H8V4H5a1 1 0 0 0-.976.783l-2 9 .047.011A4.552 4.552 0 0 0 2 14.5C2 16.981 4.019 19 6.5 19c2.31 0 4.197-1.756 4.449-4h2.102c.252 2.244 2.139 4 4.449 4 2.481 0 4.5-2.019 4.5-4.5 0-.242-.034-.475-.071-.706l.048-.011zM6.5 17C5.122 17 4 15.878 4 14.5S5.122 12 6.5 12 9 13.122 9 14.5 7.878 17 6.5 17zm11 0c-1.379 0-2.5-1.122-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.121 2.5-2.5 2.5z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const BookIcon = (props) => {
+  return (
+    <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M6 22h15v-2H6.012C5.55 19.988 5 19.805 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3zM5 8V5c0-.805.55-.988 1-1h13v12H5V8z"
+        fill="currentColor"
+      />
+      <path d="M8 6h9v2H8z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export const ChevronRightIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+};
+
+export const IconWrapper = ({children, className}) => (
+  <div className={cn(className, "flex items-center rounded-small justify-center w-7 h-7")}>
+    {children}
+  </div>
+);
+
+export const ItemCounter = ({number}) => (
+  <div className="flex items-center gap-1 text-default-400">
+    <span className="text-small">{number}</span>
+    <ChevronRightIcon className="text-xl" />
+  </div>
+);
+
+export default function App() {
+  return (
+    <Listbox
+      aria-label="User Menu"
+      className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium"
+      itemClasses={{
+        base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80",
+      }}
+      onAction={(key) => alert(key)}
+    >
+      <ListboxItem
+        key="issues"
+        endContent={<ItemCounter number={13} />}
+        startContent={
+          <IconWrapper className="bg-success/10 text-success">
+            <BugIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Issues
+      </ListboxItem>
+      <ListboxItem
+        key="pull_requests"
+        endContent={<ItemCounter number={6} />}
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <PullRequestIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Pull Requests
+      </ListboxItem>
+      <ListboxItem
+        key="discussions"
+        endContent={<ItemCounter number={293} />}
+        startContent={
+          <IconWrapper className="bg-secondary/10 text-secondary">
+            <ChatIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Discussions
+      </ListboxItem>
+      <ListboxItem
+        key="actions"
+        endContent={<ItemCounter number={2} />}
+        startContent={
+          <IconWrapper className="bg-warning/10 text-warning">
+            <PlayCircleIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Actions
+      </ListboxItem>
+      <ListboxItem
+        key="projects"
+        endContent={<ItemCounter number={4} />}
+        startContent={
+          <IconWrapper className="bg-default/50 text-foreground">
+            <LayoutIcon className="text-lg " />
+          </IconWrapper>
+        }
+      >
+        Projects
+      </ListboxItem>
+      <ListboxItem
+        key="releases"
+        className="group h-auto py-3"
+        endContent={<ItemCounter number={399} />}
+        startContent={
+          <IconWrapper className="bg-primary/10 text-primary">
+            <TagIcon className="text-lg" />
+          </IconWrapper>
+        }
+        textValue="Releases"
+      >
+        <div className="flex flex-col gap-1">
+          <span>Releases</span>
+          <div className="px-2 py-1 rounded-small bg-default-100 group-data-[hover=true]:bg-default-200">
+            <span className="text-tiny text-default-600">@nextui-org/react@2.0.10</span>
+            <div className="flex gap-2 text-tiny">
+              <span className="text-default-500">49 minutes ago</span>
+              <span className="text-success">Latest</span>
+            </div>
+          </div>
+        </div>
+      </ListboxItem>
+      <ListboxItem
+        key="contributors"
+        endContent={<ItemCounter number={79} />}
+        startContent={
+          <IconWrapper className="bg-warning/10 text-warning">
+            <UsersIcon />
+          </IconWrapper>
+        }
+      >
+        Contributors
+      </ListboxItem>
+      <ListboxItem
+        key="watchers"
+        endContent={<ItemCounter number={82} />}
+        startContent={
+          <IconWrapper className="bg-default/50 text-foreground">
+            <WatchersIcon />
+          </IconWrapper>
+        }
+      >
+        Watchers
+      </ListboxItem>
+      <ListboxItem
+        key="license"
+        endContent={<span className="text-small text-default-400">MIT</span>}
+        startContent={
+          <IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
+            <BookIcon />
+          </IconWrapper>
+        }
+      >
+        License
+      </ListboxItem>
+    </Listbox>
+  );
+}
diff --git a/apps/docs/content/components/listbox/custom-styles.ts b/apps/docs/content/components/listbox/custom-styles.ts
index 1a29e8b682..da3ea9093a 100644
--- a/apps/docs/content/components/listbox/custom-styles.ts
+++ b/apps/docs/content/components/listbox/custom-styles.ts
@@ -1,282 +1,7 @@
-const BugIcon = `export const BugIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M16.895,6.519l2.813-2.812l-1.414-1.414l-2.846,2.846c-0.233-0.166-0.473-0.321-0.723-0.454 c-1.723-0.91-3.726-0.911-5.45,0c-0.25,0.132-0.488,0.287-0.722,0.453L5.707,2.293L4.293,3.707l2.813,2.812 C6.53,7.242,6.08,8.079,5.756,9H2v2h2.307C4.242,11.495,4.2,11.997,4.2,12.5c0,0.507,0.042,1.013,0.107,1.511H2v2h2.753 c0.013,0.039,0.021,0.08,0.034,0.118c0.188,0.555,0.421,1.093,0.695,1.6c0.044,0.081,0.095,0.155,0.141,0.234l-2.33,2.33 l1.414,1.414l2.11-2.111c0.235,0.254,0.478,0.498,0.736,0.716c0.418,0.354,0.867,0.657,1.332,0.903 c0.479,0.253,0.982,0.449,1.496,0.58C10.911,21.931,11.455,22,12,22s1.089-0.069,1.618-0.204c0.514-0.131,1.017-0.327,1.496-0.58 c0.465-0.246,0.914-0.55,1.333-0.904c0.258-0.218,0.5-0.462,0.734-0.716l2.111,2.111l1.414-1.414l-2.33-2.33 c0.047-0.08,0.098-0.155,0.142-0.236c0.273-0.505,0.507-1.043,0.694-1.599c0.013-0.039,0.021-0.079,0.034-0.118H22v-2h-2.308 c0.065-0.499,0.107-1.004,0.107-1.511c0-0.503-0.042-1.005-0.106-1.5H22V9h-3.756C17.92,8.079,17.47,7.242,16.895,6.519z M8.681,7.748c0.445-0.558,0.96-0.993,1.528-1.294c1.141-0.603,2.442-0.602,3.581,0c0.569,0.301,1.084,0.736,1.53,1.295 c0.299,0.373,0.54,0.8,0.753,1.251H7.927C8.141,8.549,8.381,8.121,8.681,7.748z M17.8,12.5c0,0.522-0.042,1.044-0.126,1.553 c-0.079,0.49-0.199,0.973-0.355,1.436c-0.151,0.449-0.34,0.882-0.559,1.288c-0.217,0.399-0.463,0.772-0.733,1.11 c-0.267,0.333-0.56,0.636-0.869,0.898c-0.31,0.261-0.639,0.484-0.979,0.664s-0.695,0.317-1.057,0.41 c-0.04,0.01-0.082,0.014-0.122,0.023V14h-2v5.881c-0.04-0.009-0.082-0.013-0.122-0.023c-0.361-0.093-0.717-0.23-1.057-0.41 s-0.669-0.403-0.978-0.664c-0.311-0.263-0.604-0.565-0.871-0.899c-0.27-0.337-0.516-0.71-0.731-1.108 c-0.22-0.407-0.408-0.84-0.56-1.289c-0.156-0.463-0.276-0.946-0.356-1.438C6.242,13.544,6.2,13.022,6.2,12.5 c0-0.505,0.041-1.009,0.119-1.5h11.361C17.759,11.491,17.8,11.995,17.8,12.5z"
-      fill="currentColor"
-    />
-  </svg>
-);
-`;
-
-const PullRequestIcon = `export const PullRequestIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M19.01 15.163V7.997C19.005 6.391 17.933 4 15 4V2l-4 3 4 3V6c1.829 0 2.001 1.539 2.01 2v7.163c-1.44.434-2.5 1.757-2.5 3.337 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337zm-1 4.837c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zM9.5 5.5C9.5 3.57 7.93 2 6 2S2.5 3.57 2.5 5.5c0 1.58 1.06 2.903 2.5 3.337v6.326c-1.44.434-2.5 1.757-2.5 3.337C2.5 20.43 4.07 22 6 22s3.5-1.57 3.5-3.5c0-1.58-1.06-2.903-2.5-3.337V8.837C8.44 8.403 9.5 7.08 9.5 5.5zm-5 0C4.5 4.673 5.173 4 6 4s1.5.673 1.5 1.5S6.827 7 6 7s-1.5-.673-1.5-1.5zm3 13c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5S5.173 17 6 17s1.5.673 1.5 1.5z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const ChatIcon = `export const ChatIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z"
-      fill="currentColor"
-    />
-    <path
-      d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const PlayCircleIcon = `export const PlayCircleIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"
-      fill="currentColor"
-    />
-    <path d="m9 17 8-5-8-5z" fill="currentColor" />
-  </svg>
-);`;
-
-const LayoutIcon = `export const LayoutIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 4H5V5h14zM5 11h8v8H5v-8zm10 8v-8h4.001l.001 8H15z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const TagIcon = `export const TagIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M11.707 2.293A.997.997 0 0 0 11 2H6a.997.997 0 0 0-.707.293l-3 3A.996.996 0 0 0 2 6v5c0 .266.105.52.293.707l10 10a.997.997 0 0 0 1.414 0l8-8a.999.999 0 0 0 0-1.414l-10-10zM13 19.586l-9-9V6.414L6.414 4h4.172l9 9L13 19.586z"
-      fill="currentColor"
-    />
-    <circle cx="8.353" cy="8.353" fill="currentColor" r="1.647" />
-  </svg>
-);`;
-
-const UsersIcon = `export const UsersIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M16.604 11.048a5.67 5.67 0 0 0 .751-3.44c-.179-1.784-1.175-3.361-2.803-4.44l-1.105 1.666c1.119.742 1.8 1.799 1.918 2.974a3.693 3.693 0 0 1-1.072 2.986l-1.192 1.192 1.618.475C18.951 13.701 19 17.957 19 18h2c0-1.789-.956-5.285-4.396-6.952z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.5 12c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zm1.5 7H8c-3.309 0-6 2.691-6 6v1h2v-1c0-2.206 1.794-4 4-4h3c2.206 0 4 1.794 4 4v1h2v-1c0-3.309-2.691-6-6-6z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const WatchersIcon = `export const WatchersIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="m21.977 13.783-2-9A1.002 1.002 0 0 0 19 4h-3v2h2.198l.961 4.326A4.467 4.467 0 0 0 17.5 10c-1.953 0-3.603 1.258-4.224 3h-2.553c-.621-1.742-2.271-3-4.224-3-.587 0-1.145.121-1.659.326L5.802 6H8V4H5a1 1 0 0 0-.976.783l-2 9 .047.011A4.552 4.552 0 0 0 2 14.5C2 16.981 4.019 19 6.5 19c2.31 0 4.197-1.756 4.449-4h2.102c.252 2.244 2.139 4 4.449 4 2.481 0 4.5-2.019 4.5-4.5 0-.242-.034-.475-.071-.706l.048-.011zM6.5 17C5.122 17 4 15.878 4 14.5S5.122 12 6.5 12 9 13.122 9 14.5 7.878 17 6.5 17zm11 0c-1.379 0-2.5-1.122-2.5-2.5s1.121-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.121 2.5-2.5 2.5z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const BookIcon = `export const BookIcon = (props) => (
-  <svg height="1em" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" {...props}>
-    <path
-      d="M6 22h15v-2H6.012C5.55 19.988 5 19.805 5 19s.55-.988 1.012-1H21V4c0-1.103-.897-2-2-2H6c-1.206 0-3 .799-3 3v14c0 2.201 1.794 3 3 3zM5 8V5c0-.805.55-.988 1-1h13v12H5V8z"
-      fill="currentColor"
-    />
-    <path d="M8 6h9v2H8z" fill="currentColor" />
-  </svg>
-);`;
-
-const ChevronRightIcon = `export const ChevronRightIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth="1.5"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path d="m9 18 6-6-6-6" />
-  </svg>
-);`;
-
-const IconWrapper = `import {cn} from "@nextui-org/react";
-
-export const IconWrapper = ({children, className}) => (
-  <div className={cn(className, "flex items-center rounded-small justify-center w-7 h-7")}>
-    {children}
-  </div>
-);`;
-
-const ItemCounter = `export const ItemCounter = ({number}) => (
-  <div className="flex items-center gap-1 text-default-400">
-    <span className="text-small">{number}</span>
-    <ChevronRightIcon className="text-xl" />
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {IconWrapper} from "./IconWrapper";
-import {ItemCounter} from "./ItemCounter";
-import {BugIcon} from "./BugIcon";
-import {PullRequestIcon} from "./PullRequestIcon";
-import {ChatIcon} from "./ChatIcon";
-import {PlayCircleIcon} from "./PlayCircleIcon";
-import {LayoutIcon} from "./LayoutIcon";
-import {TagIcon} from "./TagIcon";
-import {UsersIcon} from "./UsersIcon";
-import {WatchersIcon} from "./WatchersIcon";
-import {BookIcon} from "./BookIcon";
-import {ChevronRightIcon} from "./ChevronRightIcon";
-
-export default function App() {
-  return (
-    <Listbox
-      aria-label="User Menu"
-      onAction={(key) => alert(key)}
-      className="p-0 gap-0 divide-y divide-default-300/50 dark:divide-default-100/80 bg-content1 max-w-[300px] overflow-visible shadow-small rounded-medium"
-      itemClasses={{
-        base: "px-3 first:rounded-t-medium last:rounded-b-medium rounded-none gap-3 h-12 data-[hover=true]:bg-default-100/80",
-      }}
-    >
-      <ListboxItem
-        key="issues"
-        endContent={<ItemCounter number={13} />}
-        startContent={
-          <IconWrapper className="bg-success/10 text-success">
-            <BugIcon className="text-lg " />
-          </IconWrapper>
-        }
-      >
-        Issues
-      </ListboxItem>
-      <ListboxItem
-        key="pull_requests"
-        endContent={<ItemCounter number={6} />}
-        startContent={
-          <IconWrapper className="bg-primary/10 text-primary">
-            <PullRequestIcon className="text-lg " />
-          </IconWrapper>
-        }
-      >
-        Pull Requests
-      </ListboxItem>
-      <ListboxItem
-        key="discussions"
-        endContent={<ItemCounter number={293} />}
-        startContent={
-          <IconWrapper className="bg-secondary/10 text-secondary">
-            <ChatIcon className="text-lg " />
-          </IconWrapper>
-        }
-      >
-        Discussions
-      </ListboxItem>
-      <ListboxItem
-        key="actions"
-        endContent={<ItemCounter number={2} />}
-        startContent={
-          <IconWrapper className="bg-warning/10 text-warning">
-            <PlayCircleIcon className="text-lg " />
-          </IconWrapper>
-        }
-      >
-        Actions
-      </ListboxItem>
-      <ListboxItem
-        key="projects"
-        endContent={<ItemCounter number={4} />}
-        startContent={
-          <IconWrapper className="bg-default/50 text-foreground">
-            <LayoutIcon className="text-lg " />
-          </IconWrapper>
-        }
-      >
-        Projects
-      </ListboxItem>
-      <ListboxItem
-        key="releases"
-        className="group h-auto py-3"
-        endContent={<ItemCounter number={399} />}
-        startContent={
-          <IconWrapper className="bg-primary/10 text-primary">
-            <TagIcon className="text-lg" />
-          </IconWrapper>
-        }
-        textValue="Releases"
-      >
-        <div className="flex flex-col gap-1">
-          <span>Releases</span>
-          <div className="px-2 py-1 rounded-small bg-default-100 group-data-[hover=true]:bg-default-200">
-            <span className="text-tiny text-default-600">@nextui-org/react@2.0.10</span>
-            <div className="flex gap-2 text-tiny">
-              <span className="text-default-500">49 minutes ago</span>
-              <span className="text-success">Latest</span>
-            </div>
-          </div>
-        </div>
-      </ListboxItem>
-      <ListboxItem
-        key="contributors"
-        endContent={<ItemCounter number={79} />}
-        startContent={
-          <IconWrapper className="bg-warning/10 text-warning">
-            <UsersIcon />
-          </IconWrapper>
-        }
-      >
-        Contributors
-      </ListboxItem>
-      <ListboxItem
-        key="watchers"
-        endContent={<ItemCounter number={82} />}
-        startContent={
-          <IconWrapper className="bg-default/50 text-foreground">
-            <WatchersIcon />
-          </IconWrapper>
-        }
-      >
-        Watchers
-      </ListboxItem>
-      <ListboxItem
-        key="license"
-        endContent={<span className="text-small text-default-400">MIT</span>}
-        startContent={
-          <IconWrapper className="bg-danger/10 text-danger dark:text-danger-500">
-            <BookIcon />
-          </IconWrapper>
-        }
-      >
-        License
-      </ListboxItem>
-    </Listbox>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/IconWrapper.jsx": IconWrapper,
-  "/ItemCounter.jsx": ItemCounter,
-  "/BugIcon.jsx": BugIcon,
-  "/PullRequestIcon.jsx": PullRequestIcon,
-  "/ChatIcon.jsx": ChatIcon,
-  "/PlayCircleIcon.jsx": PlayCircleIcon,
-  "/LayoutIcon.jsx": LayoutIcon,
-  "/TagIcon.jsx": TagIcon,
-  "/UsersIcon.jsx": UsersIcon,
-  "/WatchersIcon.jsx": WatchersIcon,
-  "/BookIcon.jsx": BookIcon,
-  "/ChevronRightIcon.jsx": ChevronRightIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/description.raw.jsx b/apps/docs/content/components/listbox/description.raw.jsx
new file mode 100644
index 0000000000..3f68906518
--- /dev/null
+++ b/apps/docs/content/components/listbox/description.raw.jsx
@@ -0,0 +1,159 @@
+import {Listbox, ListboxItem, cn} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox aria-label="Listbox menu with descriptions" variant="flat">
+        <ListboxItem
+          key="new"
+          description="Create a new file"
+          startContent={<AddNoteIcon className={iconClasses} />}
+        >
+          New file
+        </ListboxItem>
+        <ListboxItem
+          key="copy"
+          description="Copy the file link"
+          startContent={<CopyDocumentIcon className={iconClasses} />}
+        >
+          Copy link
+        </ListboxItem>
+        <ListboxItem
+          key="edit"
+          showDivider
+          description="Allows you to edit the file"
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </ListboxItem>
+        <ListboxItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          description="Permanently delete the file"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/description.ts b/apps/docs/content/components/listbox/description.ts
index 62a21c4465..aeb6340b6b 100644
--- a/apps/docs/content/components/listbox/description.ts
+++ b/apps/docs/content/components/listbox/description.ts
@@ -1,167 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <ListboxWrapper>
-      <Listbox variant="flat" aria-label="Listbox menu with descriptions">
-        <ListboxItem
-          key="new"
-          description="Create a new file"
-          startContent={<AddNoteIcon className={iconClasses} />}
-        >
-          New file
-        </ListboxItem>
-        <ListboxItem
-          key="copy"
-          description="Copy the file link"
-          startContent={<CopyDocumentIcon className={iconClasses} />}
-        >
-          Copy link
-        </ListboxItem>
-        <ListboxItem
-          key="edit"
-          showDivider
-          description="Allows you to edit the file"
-          startContent={<EditDocumentIcon className={iconClasses} />}
-        >
-          Edit file
-        </ListboxItem>
-        <ListboxItem
-          key="delete"
-          className="text-danger"
-          color="danger"
-          description="Permanently delete the file"
-          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-        >
-          Delete file
-        </ListboxItem>
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/disabled-keys.raw.jsx b/apps/docs/content/components/listbox/disabled-keys.raw.jsx
new file mode 100644
index 0000000000..7b76cfa74b
--- /dev/null
+++ b/apps/docs/content/components/listbox/disabled-keys.raw.jsx
@@ -0,0 +1,26 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  return (
+    <ListboxWrapper>
+      <Listbox
+        aria-label="Example with disabled actions"
+        disabledKeys={["edit", "delete"]}
+        onAction={(key) => alert(key)}
+      >
+        <ListboxItem key="new">New file</ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+        <ListboxItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/disabled-keys.ts b/apps/docs/content/components/listbox/disabled-keys.ts
index 09e5aec235..b179b7cb75 100644
--- a/apps/docs/content/components/listbox/disabled-keys.ts
+++ b/apps/docs/content/components/listbox/disabled-keys.ts
@@ -1,34 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  return (
-    <ListboxWrapper>
-      <Listbox
-        aria-label="Example with disabled actions" 
-        disabledKeys={["edit", "delete"]}
-        onAction={(key) => alert(key)}
-      >
-        <ListboxItem key="new">New file</ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-        <ListboxItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </ListboxItem>
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./disabled-keys.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/dynamic.raw.jsx b/apps/docs/content/components/listbox/dynamic.raw.jsx
new file mode 100644
index 0000000000..2f15512995
--- /dev/null
+++ b/apps/docs/content/components/listbox/dynamic.raw.jsx
@@ -0,0 +1,44 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const items = [
+    {
+      key: "new",
+      label: "New file",
+    },
+    {
+      key: "copy",
+      label: "Copy link",
+    },
+    {
+      key: "edit",
+      label: "Edit file",
+    },
+    {
+      key: "delete",
+      label: "Delete file",
+    },
+  ];
+
+  return (
+    <ListboxWrapper>
+      <Listbox aria-label="Dynamic Actions" items={items} onAction={(key) => alert(key)}>
+        {(item) => (
+          <ListboxItem
+            key={item.key}
+            className={item.key === "delete" ? "text-danger" : ""}
+            color={item.key === "delete" ? "danger" : "default"}
+          >
+            {item.label}
+          </ListboxItem>
+        )}
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/dynamic.ts b/apps/docs/content/components/listbox/dynamic.ts
index c5b598c0a7..5d3c97bb9a 100644
--- a/apps/docs/content/components/listbox/dynamic.ts
+++ b/apps/docs/content/components/listbox/dynamic.ts
@@ -1,56 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  const items = [
-    {
-      key: "new",
-      label: "New file",
-    },
-    {
-      key: "copy",
-      label: "Copy link",
-    },
-    {
-      key: "edit",
-      label: "Edit file",
-    },
-    {
-      key: "delete",
-      label: "Delete file",
-    }
-  ];
-
-  return (
-    <ListboxWrapper>
-      <Listbox
-        items={items}
-        aria-label="Dynamic Actions"
-        onAction={(key) => alert(key)}
-      >
-        {(item) => (
-          <ListboxItem
-            key={item.key}
-            color={item.key === "delete" ? "danger" : "default"}
-            className={item.key === "delete" ? "text-danger" : ""}
-          >
-            {item.label}
-          </ListboxItem>
-        )}
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/icons.raw.jsx b/apps/docs/content/components/listbox/icons.raw.jsx
new file mode 100644
index 0000000000..54d3acdc43
--- /dev/null
+++ b/apps/docs/content/components/listbox/icons.raw.jsx
@@ -0,0 +1,149 @@
+import {Listbox, ListboxItem, cn} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox aria-label="Listbox menu with icons" variant="faded">
+        <ListboxItem key="new" startContent={<AddNoteIcon className={iconClasses} />}>
+          New file
+        </ListboxItem>
+        <ListboxItem key="copy" startContent={<CopyDocumentIcon className={iconClasses} />}>
+          Copy link
+        </ListboxItem>
+        <ListboxItem
+          key="edit"
+          showDivider
+          startContent={<EditDocumentIcon className={iconClasses} />}
+        >
+          Edit file
+        </ListboxItem>
+        <ListboxItem
+          key="delete"
+          className="text-danger"
+          color="danger"
+          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+        >
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/icons.ts b/apps/docs/content/components/listbox/icons.ts
index 1349f4e1e1..22a410c88f 100644
--- a/apps/docs/content/components/listbox/icons.ts
+++ b/apps/docs/content/components/listbox/icons.ts
@@ -1,163 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem, cn} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <ListboxWrapper>
-      <Listbox variant="faded" aria-label="Listbox menu with icons">
-        <ListboxItem
-          key="new"
-          startContent={<AddNoteIcon className={iconClasses} />}
-        >
-          New file
-        </ListboxItem>
-        <ListboxItem
-          key="copy"
-          startContent={<CopyDocumentIcon className={iconClasses} />}
-        >
-          Copy link
-        </ListboxItem>
-        <ListboxItem
-          key="edit"
-          showDivider
-          startContent={<EditDocumentIcon className={iconClasses} />}
-        >
-          Edit file
-        </ListboxItem>
-        <ListboxItem
-          key="delete"
-          className="text-danger"
-          color="danger"
-          startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-        >
-          Delete file
-        </ListboxItem>
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/index.ts b/apps/docs/content/components/listbox/index.ts
index 35c8dcd9c4..2f83ec0bd9 100644
--- a/apps/docs/content/components/listbox/index.ts
+++ b/apps/docs/content/components/listbox/index.ts
@@ -9,6 +9,8 @@ import description from "./description";
 import sections from "./sections";
 import customStyles from "./custom-styles";
 import topContent from "./top-content";
+import virtualization from "./virtualization";
+import virtualizationTenThousand from "./virtualization-ten-thousand";
 
 export const listboxContent = {
   usage,
@@ -22,4 +24,6 @@ export const listboxContent = {
   sections,
   customStyles,
   topContent,
+  virtualization,
+  virtualizationTenThousand,
 };
diff --git a/apps/docs/content/components/listbox/multiple-selection.raw.jsx b/apps/docs/content/components/listbox/multiple-selection.raw.jsx
new file mode 100644
index 0000000000..e7c81351f9
--- /dev/null
+++ b/apps/docs/content/components/listbox/multiple-selection.raw.jsx
@@ -0,0 +1,35 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ListboxWrapper>
+        <Listbox
+          disallowEmptySelection
+          aria-label="Multiple selection example"
+          selectedKeys={selectedKeys}
+          selectionMode="multiple"
+          variant="flat"
+          onSelectionChange={setSelectedKeys}
+        >
+          <ListboxItem key="text">Text</ListboxItem>
+          <ListboxItem key="number">Number</ListboxItem>
+          <ListboxItem key="date">Date</ListboxItem>
+          <ListboxItem key="single_date">Single Date</ListboxItem>
+          <ListboxItem key="iteration">Iteration</ListboxItem>
+        </Listbox>
+      </ListboxWrapper>
+      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/listbox/multiple-selection.ts b/apps/docs/content/components/listbox/multiple-selection.ts
index 9bb63acdba..f03bb84fb5 100644
--- a/apps/docs/content/components/listbox/multiple-selection.ts
+++ b/apps/docs/content/components/listbox/multiple-selection.ts
@@ -1,46 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", "),
-    [selectedKeys]
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <ListboxWrapper>
-        <Listbox 
-          aria-label="Multiple selection example"
-          variant="flat"
-          disallowEmptySelection
-          selectionMode="multiple"
-          selectedKeys={selectedKeys}
-          onSelectionChange={setSelectedKeys}
-        >
-          <ListboxItem key="text">Text</ListboxItem>
-          <ListboxItem key="number">Number</ListboxItem>
-          <ListboxItem key="date">Date</ListboxItem>
-          <ListboxItem key="single_date">Single Date</ListboxItem>
-          <ListboxItem key="iteration">Iteration</ListboxItem>
-        </Listbox>
-      </ListboxWrapper>
-      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
-    </div>
-  );
-}`;
+import App from "./multiple-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/sections.raw.jsx b/apps/docs/content/components/listbox/sections.raw.jsx
new file mode 100644
index 0000000000..5f2e1b6ecb
--- /dev/null
+++ b/apps/docs/content/components/listbox/sections.raw.jsx
@@ -0,0 +1,162 @@
+import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react";
+
+export const AddNoteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const CopyDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const EditDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
+        fill="currentColor"
+        opacity={0.4}
+      />
+      <path
+        d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const DeleteDocumentIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
+        fill="currentColor"
+        opacity={0.399}
+      />
+      <path
+        clipRule="evenodd"
+        d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
+
+  return (
+    <ListboxWrapper>
+      <Listbox aria-label="Listbox menu with sections" variant="flat">
+        <ListboxSection showDivider title="Actions">
+          <ListboxItem
+            key="new"
+            description="Create a new file"
+            startContent={<AddNoteIcon className={iconClasses} />}
+          >
+            New file
+          </ListboxItem>
+          <ListboxItem
+            key="copy"
+            description="Copy the file link"
+            startContent={<CopyDocumentIcon className={iconClasses} />}
+          >
+            Copy link
+          </ListboxItem>
+          <ListboxItem
+            key="edit"
+            description="Allows you to edit the file"
+            startContent={<EditDocumentIcon className={iconClasses} />}
+          >
+            Edit file
+          </ListboxItem>
+        </ListboxSection>
+        <ListboxSection title="Danger zone">
+          <ListboxItem
+            key="delete"
+            className="text-danger"
+            color="danger"
+            description="Permanently delete the file"
+            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
+          >
+            Delete file
+          </ListboxItem>
+        </ListboxSection>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/sections.ts b/apps/docs/content/components/listbox/sections.ts
index 7f8f204430..17cd360ea3 100644
--- a/apps/docs/content/components/listbox/sections.ts
+++ b/apps/docs/content/components/listbox/sections.ts
@@ -1,170 +1,7 @@
-const AddNoteIcon = `export const AddNoteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M7.37 22h9.25a4.87 4.87 0 0 0 4.87-4.87V8.37a4.87 4.87 0 0 0-4.87-4.87H7.37A4.87 4.87 0 0 0 2.5 8.37v8.75c0 2.7 2.18 4.88 4.87 4.88Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M8.29 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM15.71 6.29c-.42 0-.75-.34-.75-.75V2.75a.749.749 0 1 1 1.5 0v2.78c0 .42-.33.76-.75.76ZM12 14.75h-1.69V13c0-.41-.34-.75-.75-.75s-.75.34-.75.75v1.75H7c-.41 0-.75.34-.75.75s.34.75.75.75h1.81V18c0 .41.34.75.75.75s.75-.34.75-.75v-1.75H12c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const CopyDocumentIcon = `export const CopyDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 13.15h-2.17c-1.78 0-3.23-1.44-3.23-3.23V7.75c0-.41-.33-.75-.75-.75H6.18C3.87 7 2 8.5 2 11.18v6.64C2 20.5 3.87 22 6.18 22h5.89c2.31 0 4.18-1.5 4.18-4.18V13.9c0-.42-.34-.75-.75-.75Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M17.82 2H11.93C9.67 2 7.84 3.44 7.76 6.01c.06 0 .11-.01.17-.01h5.89C16.13 6 18 7.5 18 10.18V16.83c0 .06-.01.11-.01.16 2.23-.07 4.01-1.55 4.01-4.16V6.18C22 3.5 20.13 2 17.82 2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.98 7.15c-.31-.31-.84-.1-.84.33v2.62c0 1.1.93 2 2.07 2 .71.01 1.7.01 2.55.01.43 0 .65-.5.35-.8-1.09-1.09-3.03-3.04-4.13-4.16Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const EditDocumentIcon = `export const EditDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.48 3H7.52C4.07 3 2 5.06 2 8.52v7.95C2 19.94 4.07 22 7.52 22h7.95c3.46 0 5.52-2.06 5.52-5.52V8.52C21 5.06 18.93 3 15.48 3Z"
-      fill="currentColor"
-      opacity={0.4}
-    />
-    <path
-      d="M21.02 2.98c-1.79-1.8-3.54-1.84-5.38 0L14.51 4.1c-.1.1-.13.24-.09.37.7 2.45 2.66 4.41 5.11 5.11.03.01.08.01.11.01.1 0 .2-.04.27-.11l1.11-1.12c.91-.91 1.36-1.78 1.36-2.67 0-.9-.45-1.79-1.36-2.71ZM17.86 10.42c-.27-.13-.53-.26-.77-.41-.2-.12-.4-.25-.59-.39-.16-.1-.34-.25-.52-.4-.02-.01-.08-.06-.16-.14-.31-.25-.64-.59-.95-.96-.02-.02-.08-.08-.13-.17-.1-.11-.25-.3-.38-.51-.11-.14-.24-.34-.36-.55-.15-.25-.28-.5-.4-.76-.13-.28-.23-.54-.32-.79L7.9 10.72c-.35.35-.69 1.01-.76 1.5l-.43 2.98c-.09.63.08 1.22.47 1.61.33.33.78.5 1.28.5.11 0 .22-.01.33-.02l2.97-.42c.49-.07 1.15-.4 1.5-.76l5.38-5.38c-.25-.08-.5-.19-.78-.31Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const DeleteDocumentIcon = `export const DeleteDocumentIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z"
-      fill="currentColor"
-      opacity={0.399}
-    />
-    <path
-      clipRule="evenodd"
-      d="M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem, ListboxSection, cn} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-import {AddNoteIcon} from "./AddNoteIcon.jsx";
-import {CopyDocumentIcon} from "./CopyDocumentIcon.jsx";
-import {EditDocumentIcon} from "./EditDocumentIcon.jsx";
-import {DeleteDocumentIcon} from "./DeleteDocumentIcon.jsx";
-
-export default function App() {
-  const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
-
-  return (
-    <ListboxWrapper>
-      <Listbox variant="flat" aria-label="Listbox menu with sections">
-        <ListboxSection title="Actions" showDivider>  
-          <ListboxItem
-            key="new"
-            description="Create a new file"
-            startContent={<AddNoteIcon className={iconClasses} />}
-          >
-            New file
-          </ListboxItem>
-          <ListboxItem
-            key="copy"
-            description="Copy the file link"
-            startContent={<CopyDocumentIcon className={iconClasses} />}
-          >
-            Copy link
-          </ListboxItem>
-          <ListboxItem
-            key="edit"
-            description="Allows you to edit the file"
-            startContent={<EditDocumentIcon className={iconClasses} />}
-          >
-            Edit file
-          </ListboxItem>
-        </ListboxSection> 
-        <ListboxSection title="Danger zone">  
-          <ListboxItem
-            key="delete"
-            className="text-danger"
-            color="danger"
-            description="Permanently delete the file"
-            startContent={<DeleteDocumentIcon className={cn(iconClasses, "text-danger")} />}
-          >
-            Delete file
-          </ListboxItem>
-        </ListboxSection> 
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./sections.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
-  "/AddNoteIcon.jsx": AddNoteIcon,
-  "/CopyDocumentIcon.jsx": CopyDocumentIcon,
-  "/EditDocumentIcon.jsx": EditDocumentIcon,
-  "/DeleteDocumentIcon.jsx": DeleteDocumentIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/single-selection.raw.jsx b/apps/docs/content/components/listbox/single-selection.raw.jsx
new file mode 100644
index 0000000000..86a04a4777
--- /dev/null
+++ b/apps/docs/content/components/listbox/single-selection.raw.jsx
@@ -0,0 +1,34 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(() => Array.from(selectedKeys).join(", "), [selectedKeys]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <ListboxWrapper>
+        <Listbox
+          disallowEmptySelection
+          aria-label="Single selection example"
+          selectedKeys={selectedKeys}
+          selectionMode="single"
+          variant="flat"
+          onSelectionChange={setSelectedKeys}
+        >
+          <ListboxItem key="text">Text</ListboxItem>
+          <ListboxItem key="number">Number</ListboxItem>
+          <ListboxItem key="date">Date</ListboxItem>
+          <ListboxItem key="single_date">Single Date</ListboxItem>
+          <ListboxItem key="iteration">Iteration</ListboxItem>
+        </Listbox>
+      </ListboxWrapper>
+      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/listbox/single-selection.ts b/apps/docs/content/components/listbox/single-selection.ts
index 343f90df05..65d8454ff8 100644
--- a/apps/docs/content/components/listbox/single-selection.ts
+++ b/apps/docs/content/components/listbox/single-selection.ts
@@ -1,46 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
-
-  const selectedValue = React.useMemo(
-    () => Array.from(selectedKeys).join(", "),
-    [selectedKeys]
-  );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <ListboxWrapper>
-        <Listbox 
-          aria-label="Single selection example"
-          variant="flat"
-          disallowEmptySelection
-          selectionMode="single"
-          selectedKeys={selectedKeys}
-          onSelectionChange={setSelectedKeys}
-        >
-          <ListboxItem key="text">Text</ListboxItem>
-          <ListboxItem key="number">Number</ListboxItem>
-          <ListboxItem key="date">Date</ListboxItem>
-          <ListboxItem key="single_date">Single Date</ListboxItem>
-          <ListboxItem key="iteration">Iteration</ListboxItem>
-        </Listbox>
-      </ListboxWrapper>
-      <p className="text-small text-default-500">Selected value: {selectedValue}</p>
-    </div>
-  );
-}`;
+import App from "./single-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/top-content.raw.jsx b/apps/docs/content/components/listbox/top-content.raw.jsx
new file mode 100644
index 0000000000..3e652b8ef2
--- /dev/null
+++ b/apps/docs/content/components/listbox/top-content.raw.jsx
@@ -0,0 +1,264 @@
+import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const [values, setValues] = React.useState(new Set(["1"]));
+
+  const arrayValues = Array.from(values);
+
+  const topContent = React.useMemo(() => {
+    if (!arrayValues.length) {
+      return null;
+    }
+
+    return (
+      <ScrollShadow
+        hideScrollBar
+        className="w-full flex py-0.5 px-2 gap-1"
+        orientation="horizontal"
+      >
+        {arrayValues.map((value) => (
+          <Chip key={value}>{users.find((user) => `${user.id}` === `${value}`).name}</Chip>
+        ))}
+      </ScrollShadow>
+    );
+  }, [arrayValues.length]);
+
+  return (
+    <ListboxWrapper>
+      <Listbox
+        classNames={{
+          base: "max-w-xs",
+          list: "max-h-[300px] overflow-scroll",
+        }}
+        defaultSelectedKeys={["1"]}
+        items={users}
+        label="Assigned to"
+        selectionMode="multiple"
+        topContent={topContent}
+        variant="flat"
+        onSelectionChange={setValues}
+      >
+        {(item) => (
+          <ListboxItem key={item.id} textValue={item.name}>
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.email}</span>
+              </div>
+            </div>
+          </ListboxItem>
+        )}
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/top-content.raw.tsx b/apps/docs/content/components/listbox/top-content.raw.tsx
new file mode 100644
index 0000000000..284462f73a
--- /dev/null
+++ b/apps/docs/content/components/listbox/top-content.raw.tsx
@@ -0,0 +1,267 @@
+import type {Selection} from "@react-types/shared";
+
+import React from "react";
+import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export const ListboxWrapper = ({children}: {children: React.ReactNode}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const [values, setValues] = React.useState<Selection>(new Set(["1"]));
+
+  const arrayValues = Array.from(values);
+
+  const topContent = React.useMemo(() => {
+    if (!arrayValues.length) {
+      return null;
+    }
+
+    return (
+      <ScrollShadow
+        hideScrollBar
+        className="w-full flex py-0.5 px-2 gap-1"
+        orientation="horizontal"
+      >
+        {arrayValues.map((value) => (
+          <Chip key={value}>{users.find((user) => `${user.id}` === `${value}`)?.name}</Chip>
+        ))}
+      </ScrollShadow>
+    );
+  }, [arrayValues.length]);
+
+  return (
+    <ListboxWrapper>
+      <Listbox
+        classNames={{
+          base: "max-w-xs",
+          list: "max-h-[300px] overflow-scroll",
+        }}
+        defaultSelectedKeys={["1"]}
+        items={users}
+        label="Assigned to"
+        selectionMode="multiple"
+        topContent={topContent}
+        variant="flat"
+        onSelectionChange={setValues}
+      >
+        {(item) => (
+          <ListboxItem key={item.id} textValue={item.name}>
+            <div className="flex gap-2 items-center">
+              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
+              <div className="flex flex-col">
+                <span className="text-small">{item.name}</span>
+                <span className="text-tiny text-default-400">{item.email}</span>
+              </div>
+            </div>
+          </ListboxItem>
+        )}
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/top-content.ts b/apps/docs/content/components/listbox/top-content.ts
index fac030443d..c9f1db104d 100644
--- a/apps/docs/content/components/listbox/top-content.ts
+++ b/apps/docs/content/components/listbox/top-content.ts
@@ -1,344 +1,12 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const ListboxWrapperTs = `export const ListboxWrapper = ({children}: { children: React.ReactNode }) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-import {users} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState(new Set(["1"]));
-
-  const arrayValues = Array.from(values);
-
-  const topContent = React.useMemo(() => {
-    if (!arrayValues.length) {
-      return null;
-    }
-
-    return (
-      <ScrollShadow
-        hideScrollBar
-        className="w-full flex py-0.5 px-2 gap-1"
-        orientation="horizontal"
-      >
-        {arrayValues.map((value) => (
-          <Chip key={value}>{users.find((user) => \`\${user.id}\` === \`\${value}\`).name}</Chip>
-        ))}
-      </ScrollShadow>
-    );
-  }, [arrayValues.length]);
-
-  return (
-    <ListboxWrapper>
-      <Listbox
-        topContent={topContent}
-        classNames={{
-          base: "max-w-xs",
-          list: "max-h-[300px] overflow-scroll",
-        }}
-        defaultSelectedKeys={["1"]}
-        items={users}
-        label="Assigned to"
-        selectionMode="multiple"
-        onSelectionChange={setValues}
-        variant="flat"
-      >
-        {(item) => (
-          <ListboxItem key={item.id} textValue={item.name}>
-            <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
-              <div className="flex flex-col">
-                <span className="text-small">{item.name}</span>
-                <span className="text-tiny text-default-400">{item.email}</span>
-              </div>
-            </div>
-          </ListboxItem>
-        )}
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
-
-const AppTs = `import {Listbox, ListboxItem, Chip, ScrollShadow, Avatar, Selection} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-import {users} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState<Selection>(new Set(["1"]));
-
-  const arrayValues = Array.from(values);
-
-  const topContent = React.useMemo(() => {
-    if (!arrayValues.length) {
-      return null;
-    }
-
-    return (
-      <ScrollShadow
-        hideScrollBar
-        className="w-full flex py-0.5 px-2 gap-1"
-        orientation="horizontal"
-      >
-        {arrayValues.map((value) => (
-          <Chip key={value}>{users.find((user) => \`\${user.id}\` === \`\${value}\`).name}</Chip>
-        ))}
-      </ScrollShadow>
-    );
-  }, [arrayValues.length]);
-
-  return (
-    <ListboxWrapper>
-      <Listbox
-        topContent={topContent}
-        classNames={{
-          base: "max-w-xs",
-          list: "max-h-[300px] overflow-scroll",
-        }}
-        defaultSelectedKeys={["1"]}
-        items={users}
-        label="Assigned to"
-        selectionMode="multiple"
-        onSelectionChange={setValues}
-        variant="flat"
-      >
-        {(item) => (
-          <ListboxItem key={item.id} textValue={item.name}>
-            <div className="flex gap-2 items-center">
-              <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} />
-              <div className="flex flex-col">
-                <span className="text-small">{item.name}</span>
-                <span className="text-tiny text-default-400">{item.email}</span>
-              </div>
-            </div>
-          </ListboxItem>
-        )}
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./top-content.raw.jsx?raw";
+import AppTs from "./top-content.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/ListboxWrapper.tsx": ListboxWrapperTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/usage.raw.jsx b/apps/docs/content/components/listbox/usage.raw.jsx
new file mode 100644
index 0000000000..2726c45d8f
--- /dev/null
+++ b/apps/docs/content/components/listbox/usage.raw.jsx
@@ -0,0 +1,22 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  return (
+    <ListboxWrapper>
+      <Listbox aria-label="Actions" onAction={(key) => alert(key)}>
+        <ListboxItem key="new">New file</ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+        <ListboxItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </ListboxItem>
+      </Listbox>
+    </ListboxWrapper>
+  );
+}
diff --git a/apps/docs/content/components/listbox/usage.ts b/apps/docs/content/components/listbox/usage.ts
index 53bf3488a9..1118304c37 100644
--- a/apps/docs/content/components/listbox/usage.ts
+++ b/apps/docs/content/components/listbox/usage.ts
@@ -1,33 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  return (
-    <ListboxWrapper>
-      <Listbox
-        aria-label="Actions"
-        onAction={(key) => alert(key)}
-      >
-        <ListboxItem key="new">New file</ListboxItem>
-        <ListboxItem key="copy">Copy link</ListboxItem>
-        <ListboxItem key="edit">Edit file</ListboxItem>
-        <ListboxItem key="delete" className="text-danger" color="danger">
-          Delete file
-        </ListboxItem>
-      </Listbox>
-    </ListboxWrapper>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/variants.raw.jsx b/apps/docs/content/components/listbox/variants.raw.jsx
new file mode 100644
index 0000000000..17fef96b5b
--- /dev/null
+++ b/apps/docs/content/components/listbox/variants.raw.jsx
@@ -0,0 +1,58 @@
+import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react";
+
+export const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const [selectedVariant, setSelectedVariant] = React.useState("solid");
+  const [selectedColor, setSelectedColor] = React.useState("default");
+
+  const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"];
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <ListboxWrapper>
+        <Listbox aria-label="Listbox Variants" color={selectedColor} variant={selectedVariant}>
+          <ListboxItem key="new">New file</ListboxItem>
+          <ListboxItem key="copy">Copy link</ListboxItem>
+          <ListboxItem key="edit">Edit file</ListboxItem>
+          <ListboxItem key="delete" className="text-danger" color="danger">
+            Delete file
+          </ListboxItem>
+        </Listbox>
+      </ListboxWrapper>
+      <div className="flex flex-col gap-2">
+        <RadioGroup
+          color={selectedVariant}
+          defaultValue="solid"
+          label="Select listbox item variant"
+          orientation="horizontal"
+          onValueChange={setSelectedVariant}
+        >
+          {variants.map((variant) => (
+            <Radio key={variant} className="capitalize" value={variant}>
+              {variant}
+            </Radio>
+          ))}
+        </RadioGroup>
+        <RadioGroup
+          color={selectedColor}
+          defaultValue="default"
+          label="Select listbox item color"
+          orientation="horizontal"
+          onValueChange={setSelectedColor}
+        >
+          {colors.map((color) => (
+            <Radio key={color} className="capitalize" value={color}>
+              {color}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/listbox/variants.ts b/apps/docs/content/components/listbox/variants.ts
index 99a566944f..ddea95fb2e 100644
--- a/apps/docs/content/components/listbox/variants.ts
+++ b/apps/docs/content/components/listbox/variants.ts
@@ -1,70 +1,7 @@
-const ListboxWrapper = `export const ListboxWrapper = ({children}) => (
-  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
-    {children}
-  </div>
-);`;
-
-const App = `import {Listbox, ListboxItem, RadioGroup, Radio} from "@nextui-org/react";
-import {ListboxWrapper} from "./ListboxWrapper";
-
-export default function App() {
-  const [selectedVariant, setSelectedVariant] = React.useState("solid")
-  const [selectedColor, setSelectedColor] = React.useState("default")
-
-  const variants = ["solid", "bordered", "light", "flat", "faded", "shadow"];
-  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-  return (
-    <div className="flex flex-col gap-4">
-      <ListboxWrapper>
-        <Listbox
-          aria-label="Listbox Variants"
-          color={selectedColor} 
-          variant={selectedVariant}
-        >
-          <ListboxItem key="new">New file</ListboxItem>
-          <ListboxItem key="copy">Copy link</ListboxItem>
-          <ListboxItem key="edit">Edit file</ListboxItem>
-          <ListboxItem key="delete" className="text-danger" color="danger">
-            Delete file
-          </ListboxItem>
-        </Listbox>
-      </ListboxWrapper>  
-      <div className="flex flex-col gap-2">
-        <RadioGroup
-          label="Select listbox item variant"
-          orientation="horizontal"
-          color={selectedVariant}
-          defaultValue="solid"
-          onValueChange={setSelectedVariant}
-        >
-          {variants.map((variant) => (
-            <Radio key={variant} value={variant} className="capitalize">
-              {variant}
-            </Radio>
-          ))}
-        </RadioGroup>
-        <RadioGroup
-          label="Select listbox item color"
-          orientation="horizontal"
-          color={selectedColor}
-          defaultValue="default"
-          onValueChange={setSelectedColor}
-        >
-          {colors.map((color) => (
-            <Radio key={color} value={color} className="capitalize">
-              {color}
-            </Radio>
-          ))}
-        </RadioGroup>
-      </div> 
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ListboxWrapper.jsx": ListboxWrapper,
 };
 
 export default {
diff --git a/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx
new file mode 100644
index 0000000000..1969440621
--- /dev/null
+++ b/apps/docs/content/components/listbox/virtualization-ten-thousand.raw.jsx
@@ -0,0 +1,66 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const items = generateItems(10000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <ListboxWrapper>
+        <Listbox
+          isVirtualized
+          className="max-w-xs"
+          label={"Select from 10000 items"}
+          placeholder="Select..."
+          virtualization={{
+            maxListboxHeight: 400,
+            itemHeight: 40,
+          }}
+        >
+          {items.map((item, index) => (
+            <ListboxItem key={index} value={item.value}>
+              {item.label}
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </ListboxWrapper>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/listbox/virtualization-ten-thousand.ts b/apps/docs/content/components/listbox/virtualization-ten-thousand.ts
new file mode 100644
index 0000000000..1b8e486cb5
--- /dev/null
+++ b/apps/docs/content/components/listbox/virtualization-ten-thousand.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/listbox/virtualization.raw.jsx b/apps/docs/content/components/listbox/virtualization.raw.jsx
new file mode 100644
index 0000000000..34aa80ade1
--- /dev/null
+++ b/apps/docs/content/components/listbox/virtualization.raw.jsx
@@ -0,0 +1,65 @@
+import {Listbox, ListboxItem} from "@nextui-org/react";
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+const ListboxWrapper = ({children}) => (
+  <div className="w-full max-w-[260px] border-small px-1 py-2 rounded-small border-default-200 dark:border-default-100">
+    {children}
+  </div>
+);
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <ListboxWrapper>
+        <Listbox
+          isVirtualized
+          className="max-w-xs"
+          label={"Select from 1000 items"}
+          placeholder="Select..."
+          virtualization={{
+            maxListboxHeight: 400,
+            itemHeight: 40,
+          }}
+        >
+          {items.map((item, index) => (
+            <ListboxItem key={index} value={item.value}>
+              {item.label}
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </ListboxWrapper>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/listbox/virtualization.ts b/apps/docs/content/components/listbox/virtualization.ts
new file mode 100644
index 0000000000..e40cbd641f
--- /dev/null
+++ b/apps/docs/content/components/listbox/virtualization.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/modal/backdrop.raw.jsx b/apps/docs/content/components/modal/backdrop.raw.jsx
new file mode 100644
index 0000000000..70beec0096
--- /dev/null
+++ b/apps/docs/content/components/modal/backdrop.raw.jsx
@@ -0,0 +1,75 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+  const [backdrop, setBackdrop] = React.useState("opaque");
+
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const handleOpen = (backdrop) => {
+    setBackdrop(backdrop);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {backdrops.map((b) => (
+          <Button
+            key={b}
+            className="capitalize"
+            color="warning"
+            variant="flat"
+            onPress={() => handleOpen(b)}
+          >
+            {b}
+          </Button>
+        ))}
+      </div>
+      <Modal backdrop={backdrop} isOpen={isOpen} onClose={onClose}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/backdrop.ts b/apps/docs/content/components/modal/backdrop.ts
index b12764e892..53412b0f5b 100644
--- a/apps/docs/content/components/modal/backdrop.ts
+++ b/apps/docs/content/components/modal/backdrop.ts
@@ -1,70 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onClose} = useDisclosure();
-  const [backdrop, setBackdrop] = React.useState('opaque')
-
-  const backdrops = ["opaque", "blur", "transparent"];
-
-  const handleOpen = (backdrop) => {
-    setBackdrop(backdrop)
-    onOpen();
-  }
-
-  return (
-    <>
-      <div className="flex flex-wrap gap-3">
-        {backdrops.map((b) => (
-          <Button  
-            key={b}
-            variant="flat" 
-            color="warning" 
-            onPress={() => handleOpen(b)}
-            className="capitalize"
-          >
-           {b}
-          </Button>
-        ))}  
-      </div>
-      <Modal backdrop={backdrop} isOpen={isOpen} onClose={onClose}>
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/custom-backdrop.raw.jsx b/apps/docs/content/components/modal/custom-backdrop.raw.jsx
new file mode 100644
index 0000000000..f4d0d35987
--- /dev/null
+++ b/apps/docs/content/components/modal/custom-backdrop.raw.jsx
@@ -0,0 +1,62 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal
+        backdrop="opaque"
+        classNames={{
+          backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20",
+        }}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/custom-backdrop.ts b/apps/docs/content/components/modal/custom-backdrop.ts
index f66cceaaf2..b1364484c4 100644
--- a/apps/docs/content/components/modal/custom-backdrop.ts
+++ b/apps/docs/content/components/modal/custom-backdrop.ts
@@ -1,57 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen}>Open Modal</Button>
-      <Modal 
-        backdrop="opaque" 
-        isOpen={isOpen} 
-        onOpenChange={onOpenChange}
-        classNames={{
-          backdrop: "bg-gradient-to-t from-zinc-900 to-zinc-900/10 backdrop-opacity-20"
-        }}
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./custom-backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/custom-motion.raw.jsx b/apps/docs/content/components/modal/custom-motion.raw.jsx
new file mode 100644
index 0000000000..a7ed2dd4a8
--- /dev/null
+++ b/apps/docs/content/components/modal/custom-motion.raw.jsx
@@ -0,0 +1,79 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal
+        backdrop="opaque"
+        isOpen={isOpen}
+        motionProps={{
+          variants: {
+            enter: {
+              y: 0,
+              opacity: 1,
+              transition: {
+                duration: 0.3,
+                ease: "easeOut",
+              },
+            },
+            exit: {
+              y: -20,
+              opacity: 0,
+              transition: {
+                duration: 0.2,
+                ease: "easeIn",
+              },
+            },
+          },
+        }}
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/custom-motion.ts b/apps/docs/content/components/modal/custom-motion.ts
index e57792729e..389f462ddd 100644
--- a/apps/docs/content/components/modal/custom-motion.ts
+++ b/apps/docs/content/components/modal/custom-motion.ts
@@ -1,74 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen}>Open Modal</Button>
-      <Modal 
-        backdrop="opaque" 
-        isOpen={isOpen} 
-        onOpenChange={onOpenChange}
-        motionProps={{
-          variants: {
-            enter: {
-              y: 0,
-              opacity: 1,
-              transition: {
-                duration: 0.3,
-                ease: "easeOut",
-              },
-            },
-            exit: {
-              y: -20,
-              opacity: 0,
-              transition: {
-                duration: 0.2,
-                ease: "easeIn",
-              },
-            },
-          }
-        }}
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/custom-styles.raw.jsx b/apps/docs/content/components/modal/custom-styles.raw.jsx
new file mode 100644
index 0000000000..d58f5885f4
--- /dev/null
+++ b/apps/docs/content/components/modal/custom-styles.raw.jsx
@@ -0,0 +1,70 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button color="secondary" onPress={onOpen}>
+        Open Modal
+      </Button>
+      <Modal
+        backdrop="opaque"
+        classNames={{
+          body: "py-6",
+          backdrop: "bg-[#292f46]/50 backdrop-opacity-40",
+          base: "border-[#292f46] bg-[#19172c] dark:bg-[#19172c] text-[#a8b0d3]",
+          header: "border-b-[1px] border-[#292f46]",
+          footer: "border-t-[1px] border-[#292f46]",
+          closeButton: "hover:bg-white/5 active:bg-white/10",
+        }}
+        isOpen={isOpen}
+        radius="lg"
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="foreground" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button className="bg-[#6f4ef2] shadow-lg shadow-indigo-500/20" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/custom-styles.ts b/apps/docs/content/components/modal/custom-styles.ts
index b2aca285d2..da3ea9093a 100644
--- a/apps/docs/content/components/modal/custom-styles.ts
+++ b/apps/docs/content/components/modal/custom-styles.ts
@@ -1,63 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen} color="secondary">Open Modal</Button>
-      <Modal 
-        backdrop="opaque" 
-        isOpen={isOpen} 
-        onOpenChange={onOpenChange}
-        radius="lg"
-        classNames={{
-          body: "py-6",
-          backdrop: "bg-[#292f46]/50 backdrop-opacity-40",
-          base: "border-[#292f46] bg-[#19172c] dark:bg-[#19172c] text-[#a8b0d3]",
-          header: "border-b-[1px] border-[#292f46]",
-          footer: "border-t-[1px] border-[#292f46]",
-          closeButton: "hover:bg-white/5 active:bg-white/10",
-        }}
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="foreground" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button className="bg-[#6f4ef2] shadow-lg shadow-indigo-500/20" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/draggable-overflow.raw.jsx b/apps/docs/content/components/modal/draggable-overflow.raw.jsx
new file mode 100644
index 0000000000..dc428323b0
--- /dev/null
+++ b/apps/docs/content/components/modal/draggable-overflow.raw.jsx
@@ -0,0 +1,48 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  useDraggable,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const targetRef = React.useRef(null);
+  const {moveProps} = useDraggable({targetRef, canOverflow: true});
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader {...moveProps} className="flex flex-col gap-1">
+                Modal Title
+              </ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/draggable-overflow.ts b/apps/docs/content/components/modal/draggable-overflow.ts
new file mode 100644
index 0000000000..86fe16fec6
--- /dev/null
+++ b/apps/docs/content/components/modal/draggable-overflow.ts
@@ -0,0 +1,9 @@
+import App from "./draggable-overflow.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/modal/draggable.raw.jsx b/apps/docs/content/components/modal/draggable.raw.jsx
new file mode 100644
index 0000000000..de199e7fb4
--- /dev/null
+++ b/apps/docs/content/components/modal/draggable.raw.jsx
@@ -0,0 +1,48 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  useDraggable,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const targetRef = React.useRef(null);
+  const {moveProps} = useDraggable({targetRef, isDisabled: !isOpen});
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader {...moveProps} className="flex flex-col gap-1">
+                Modal Title
+              </ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/draggable.ts b/apps/docs/content/components/modal/draggable.ts
new file mode 100644
index 0000000000..276b37d2be
--- /dev/null
+++ b/apps/docs/content/components/modal/draggable.ts
@@ -0,0 +1,9 @@
+import App from "./draggable.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/modal/form.raw.jsx b/apps/docs/content/components/modal/form.raw.jsx
new file mode 100644
index 0000000000..07529d78a2
--- /dev/null
+++ b/apps/docs/content/components/modal/form.raw.jsx
@@ -0,0 +1,116 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  Checkbox,
+  Input,
+  Link,
+} from "@nextui-org/react";
+
+export const MailIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const LockIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button color="primary" onPress={onOpen}>
+        Open Modal
+      </Button>
+      <Modal isOpen={isOpen} placement="top-center" onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Log in</ModalHeader>
+              <ModalBody>
+                <Input
+                  endContent={
+                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Email"
+                  placeholder="Enter your email"
+                  variant="bordered"
+                />
+                <Input
+                  endContent={
+                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+                  }
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                  variant="bordered"
+                />
+                <div className="flex py-2 px-1 justify-between">
+                  <Checkbox
+                    classNames={{
+                      label: "text-small",
+                    }}
+                  >
+                    Remember me
+                  </Checkbox>
+                  <Link color="primary" href="#" size="sm">
+                    Forgot password?
+                  </Link>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="flat" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Sign in
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/form.ts b/apps/docs/content/components/modal/form.ts
index 576d5657e2..c9bad48bd2 100644
--- a/apps/docs/content/components/modal/form.ts
+++ b/apps/docs/content/components/modal/form.ts
@@ -1,115 +1,7 @@
-const MailIcon = `export const MailIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M17 3.5H7C4 3.5 2 5 2 8.5V15.5C2 19 4 20.5 7 20.5H17C20 20.5 22 19 22 15.5V8.5C22 5 20 3.5 17 3.5ZM17.47 9.59L14.34 12.09C13.68 12.62 12.84 12.88 12 12.88C11.16 12.88 10.31 12.62 9.66 12.09L6.53 9.59C6.21 9.33 6.16 8.85 6.41 8.53C6.67 8.21 7.14 8.15 7.46 8.41L10.59 10.91C11.35 11.52 12.64 11.52 13.4 10.91L16.53 8.41C16.85 8.15 17.33 8.2 17.58 8.53C17.84 8.85 17.79 9.33 17.47 9.59Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-`;
-
-const LockIcon = `export const LockIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12.0011 17.3498C12.9013 17.3498 13.6311 16.6201 13.6311 15.7198C13.6311 14.8196 12.9013 14.0898 12.0011 14.0898C11.1009 14.0898 10.3711 14.8196 10.3711 15.7198C10.3711 16.6201 11.1009 17.3498 12.0011 17.3498Z"
-      fill="currentColor"
-    />
-    <path
-      d="M18.28 9.53V8.28C18.28 5.58 17.63 2 12 2C6.37 2 5.72 5.58 5.72 8.28V9.53C2.92 9.88 2 11.3 2 14.79V16.65C2 20.75 3.25 22 7.35 22H16.65C20.75 22 22 20.75 22 16.65V14.79C22 11.3 21.08 9.88 18.28 9.53ZM12 18.74C10.33 18.74 8.98 17.38 8.98 15.72C8.98 14.05 10.34 12.7 12 12.7C13.66 12.7 15.02 14.06 15.02 15.72C15.02 17.39 13.67 18.74 12 18.74ZM7.35 9.44C7.27 9.44 7.2 9.44 7.12 9.44V8.28C7.12 5.35 7.95 3.4 12 3.4C16.05 3.4 16.88 5.35 16.88 8.28V9.45C16.8 9.45 16.73 9.45 16.65 9.45H7.35V9.44Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, Checkbox, Input, Link} from "@nextui-org/react";
-import {MailIcon} from './MailIcon.jsx';
-import {LockIcon} from './LockIcon.jsx';
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen} color="primary">Open Modal</Button>
-      <Modal 
-        isOpen={isOpen} 
-        onOpenChange={onOpenChange}
-        placement="top-center"
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Log in</ModalHeader>
-              <ModalBody>
-                <Input
-                  autoFocus
-                  endContent={
-                    <MailIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-                  }
-                  label="Email"
-                  placeholder="Enter your email"
-                  variant="bordered"
-                />
-                <Input
-                  endContent={
-                    <LockIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
-                  }
-                  label="Password"
-                  placeholder="Enter your password"
-                  type="password"
-                  variant="bordered"
-                />
-                <div className="flex py-2 px-1 justify-between">
-                  <Checkbox
-                    classNames={{
-                      label: "text-small",
-                    }}
-                  >
-                    Remember me
-                  </Checkbox>
-                  <Link color="primary" href="#" size="sm">
-                    Forgot password?
-                  </Link>
-                </div>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="flat" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Sign in
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./form.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MailIcon.jsx": MailIcon,
-  "/LockIcon.jsx": LockIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/modal/index.ts b/apps/docs/content/components/modal/index.ts
index b1e1808e4c..d95be572a0 100644
--- a/apps/docs/content/components/modal/index.ts
+++ b/apps/docs/content/components/modal/index.ts
@@ -8,6 +8,8 @@ import backdrop from "./backdrop";
 import customBackdrop from "./custom-backdrop";
 import customMotion from "./custom-motion";
 import customStyles from "./custom-styles";
+import draggable from "./draggable";
+import draggableOverflow from "./draggable-overflow";
 
 export const modalContent = {
   usage,
@@ -20,4 +22,6 @@ export const modalContent = {
   customBackdrop,
   customMotion,
   customStyles,
+  draggable,
+  draggableOverflow,
 };
diff --git a/apps/docs/content/components/modal/non-dismissable.raw.jsx b/apps/docs/content/components/modal/non-dismissable.raw.jsx
new file mode 100644
index 0000000000..64d29b31da
--- /dev/null
+++ b/apps/docs/content/components/modal/non-dismissable.raw.jsx
@@ -0,0 +1,60 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal
+        isDismissable={false}
+        isKeyboardDismissDisabled={true}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/non-dismissable.ts b/apps/docs/content/components/modal/non-dismissable.ts
index 5e84335ca8..a1281cb23a 100644
--- a/apps/docs/content/components/modal/non-dismissable.ts
+++ b/apps/docs/content/components/modal/non-dismissable.ts
@@ -1,50 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen}>Open Modal</Button>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={false} isKeyboardDismissDisabled={true}>
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./non-dismissable.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/overflow.raw.jsx b/apps/docs/content/components/modal/overflow.raw.jsx
new file mode 100644
index 0000000000..69ff91e9c1
--- /dev/null
+++ b/apps/docs/content/components/modal/overflow.raw.jsx
@@ -0,0 +1,112 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] = React.useState("inside");
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <RadioGroup
+        label="Select scroll behavior"
+        orientation="horizontal"
+        value={scrollBehavior}
+        onValueChange={setScrollBehavior}
+      >
+        <Radio value="inside">inside</Radio>
+        <Radio value="outside">outside</Radio>
+      </RadioGroup>
+      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
+                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
+                  et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/modal/overflow.raw.tsx b/apps/docs/content/components/modal/overflow.raw.tsx
new file mode 100644
index 0000000000..866bd1c396
--- /dev/null
+++ b/apps/docs/content/components/modal/overflow.raw.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalProps,
+  Button,
+  useDisclosure,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] =
+    React.useState<ModalProps["scrollBehavior"]>("inside");
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <RadioGroup
+        label="Select scroll behavior"
+        orientation="horizontal"
+        value={scrollBehavior}
+        onValueChange={(v) => setScrollBehavior(v as ModalProps["scrollBehavior"])}
+      >
+        <Radio value="inside">inside</Radio>
+        <Radio value="outside">outside</Radio>
+      </RadioGroup>
+      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
+                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
+                  et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/modal/overflow.ts b/apps/docs/content/components/modal/overflow.ts
index d9d3ba869f..5276c45e73 100644
--- a/apps/docs/content/components/modal/overflow.ts
+++ b/apps/docs/content/components/modal/overflow.ts
@@ -1,244 +1,5 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [scrollBehavior, setScrollBehavior] = React.useState("inside");
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen}>Open Modal</Button>
-      <RadioGroup
-        label="Select scroll behavior"
-        orientation="horizontal"
-        value={scrollBehavior}
-        onValueChange={setScrollBehavior}
-      >
-        <Radio value="inside">inside</Radio>
-        <Radio value="outside">outside</Radio>
-      </RadioGroup>
-      <Modal
-        isOpen={isOpen}
-        onOpenChange={onOpenChange}
-        scrollBehavior={scrollBehavior}
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">
-                Modal Title
-              </ModalHeader>
-              <ModalBody>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
-                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
-                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
-                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
-                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
-                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
-                  venenatis. Pellentesque sit amet hendrerit risus, sed
-                  porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit
-                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
-                  mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
-                  veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
-                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
-                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
-                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
-                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
-                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
-                  venenatis. Pellentesque sit amet hendrerit risus, sed
-                  porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit
-                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
-                  mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
-                  veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalProps, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [scrollBehavior, setScrollBehavior] = React.useState<ModalProps["scrollBehavior"]>("inside");
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen}>Open Modal</Button>
-      <RadioGroup
-        label="Select scroll behavior"
-        orientation="horizontal"
-        value={scrollBehavior}
-        onValueChange={setScrollBehavior}
-      >
-        <Radio value="inside">inside</Radio>
-        <Radio value="outside">outside</Radio>
-      </RadioGroup>
-      <Modal
-        isOpen={isOpen}
-        onOpenChange={onOpenChange}
-        scrollBehavior={scrollBehavior}
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">
-                Modal Title
-              </ModalHeader>
-              <ModalBody>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
-                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
-                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
-                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
-                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
-                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
-                  venenatis. Pellentesque sit amet hendrerit risus, sed
-                  porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit
-                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
-                  mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
-                  veniam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat
-                  consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
-                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem
-                  aliqua enim laboris do dolor eiusmod. Et mollit incididunt
-                  nisi consectetur esse laborum eiusmod pariatur proident Lorem
-                  eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-                <p>
-                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit
-                  duis sit officia eiusmod Lorem aliqua enim laboris do dolor
-                  eiusmod. Et mollit incididunt nisi consectetur esse laborum
-                  eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt
-                  nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur
-                  adipiscing elit. Nullam pulvinar risus non risus hendrerit
-                  venenatis. Pellentesque sit amet hendrerit risus, sed
-                  porttitor quam. Magna exercitation reprehenderit magna aute
-                  tempor cupidatat consequat elit dolor adipisicing. Mollit
-                  dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
-                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et
-                  mollit incididunt nisi consectetur esse laborum eiusmod
-                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad
-                  veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-}`;
+import App from "./overflow.raw.jsx?raw";
+import AppTs from "./overflow.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/placement.raw.jsx b/apps/docs/content/components/modal/placement.raw.jsx
new file mode 100644
index 0000000000..a3ff752be8
--- /dev/null
+++ b/apps/docs/content/components/modal/placement.raw.jsx
@@ -0,0 +1,114 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  ModalProps,
+  Button,
+  useDisclosure,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+  const [scrollBehavior, setScrollBehavior] =
+    React.useState < ModalProps["scrollBehavior"] > "inside";
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <RadioGroup
+        label="Select scroll behavior"
+        orientation="horizontal"
+        value={scrollBehavior}
+        onValueChange={setScrollBehavior}
+      >
+        <Radio value="inside">inside</Radio>
+        <Radio value="outside">outside</Radio>
+      </RadioGroup>
+      <Modal isOpen={isOpen} scrollBehavior={scrollBehavior} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
+                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis
+                  sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+                  incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod
+                  et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+                <p>
+                  Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia
+                  eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi
+                  consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
+                  elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
+                  hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute
+                  tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex
+                  incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris
+                  do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod
+                  pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/modal/placement.ts b/apps/docs/content/components/modal/placement.ts
index 626f888ee9..eee2244366 100644
--- a/apps/docs/content/components/modal/placement.ts
+++ b/apps/docs/content/components/modal/placement.ts
@@ -1,61 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure, RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-  const [modalPlacement, setModalPlacement] = React.useState("auto");
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Button onPress={onOpen} className="max-w-fit">Open Modal</Button>
-      <RadioGroup
-        label="Select modal placement"
-        orientation="horizontal"
-        value={modalPlacement}
-        onValueChange={setModalPlacement}
-      >
-        <Radio value="auto">auto</Radio>
-        <Radio value="top">top</Radio>
-        <Radio value="bottom">bottom</Radio>
-        <Radio value="center">center</Radio>
-        <Radio value="top-center">top-center</Radio>
-        <Radio value="bottom-center">bottom-center</Radio>
-      </RadioGroup>
-      <Modal 
-        isOpen={isOpen} 
-        placement={modalPlacement}
-        onOpenChange={onOpenChange} 
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </div>
-  );
-}`;
+import App from "./placement.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/sizes.raw.jsx b/apps/docs/content/components/modal/sizes.raw.jsx
new file mode 100644
index 0000000000..44857c1481
--- /dev/null
+++ b/apps/docs/content/components/modal/sizes.raw.jsx
@@ -0,0 +1,67 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onClose} = useDisclosure();
+  const [size, setSize] = React.useState("md");
+
+  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"];
+
+  const handleOpen = (size) => {
+    setSize(size);
+    onOpen();
+  };
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-3">
+        {sizes.map((size) => (
+          <Button key={size} onPress={() => handleOpen(size)}>
+            Open {size}
+          </Button>
+        ))}
+      </div>
+      <Modal isOpen={isOpen} size={size} onClose={onClose}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/sizes.ts b/apps/docs/content/components/modal/sizes.ts
index 53347ff38f..85a2f5b30b 100644
--- a/apps/docs/content/components/modal/sizes.ts
+++ b/apps/docs/content/components/modal/sizes.ts
@@ -1,65 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onClose} = useDisclosure();
-  const [size, setSize] = React.useState('md')
-
-  const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "full"];
-
-
-  const handleOpen = (size) => {
-    setSize(size)
-    onOpen();
-  }
-
-  return (
-    <>
-      <div className="flex flex-wrap gap-3">
-        {sizes.map((size) => (
-          <Button key={size} onPress={() => handleOpen(size)}>Open {size}</Button>
-        ))}  
-      </div>
-      <Modal 
-        size={size} 
-        isOpen={isOpen} 
-        onClose={onClose} 
-      >
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/modal/usage.raw.jsx b/apps/docs/content/components/modal/usage.raw.jsx
new file mode 100644
index 0000000000..8c6bab9c69
--- /dev/null
+++ b/apps/docs/content/components/modal/usage.raw.jsx
@@ -0,0 +1,55 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+} from "@nextui-org/react";
+
+export default function App() {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure();
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          {(onClose) => (
+            <>
+              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+              <ModalBody>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non
+                  risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor
+                  quam.
+                </p>
+                <p>
+                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor
+                  adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
+                  officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt
+                  nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+                  deserunt nostrud ad veniam.
+                </p>
+              </ModalBody>
+              <ModalFooter>
+                <Button color="danger" variant="light" onPress={onClose}>
+                  Close
+                </Button>
+                <Button color="primary" onPress={onClose}>
+                  Action
+                </Button>
+              </ModalFooter>
+            </>
+          )}
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
diff --git a/apps/docs/content/components/modal/usage.ts b/apps/docs/content/components/modal/usage.ts
index e0199aac0a..1118304c37 100644
--- a/apps/docs/content/components/modal/usage.ts
+++ b/apps/docs/content/components/modal/usage.ts
@@ -1,50 +1,4 @@
-const App = `import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, useDisclosure} from "@nextui-org/react";
-
-export default function App() {
-  const {isOpen, onOpen, onOpenChange} = useDisclosure();
-
-  return (
-    <>
-      <Button onPress={onOpen}>Open Modal</Button>
-      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-        <ModalContent>
-          {(onClose) => (
-            <>
-              <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
-              <ModalBody>
-                <p> 
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Nullam pulvinar risus non risus hendrerit venenatis.
-                  Pellentesque sit amet hendrerit risus, sed porttitor quam.
-                </p>
-                <p>
-                  Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit
-                  dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. 
-                  Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. 
-                  Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur 
-                  proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-                </p>
-              </ModalBody>
-              <ModalFooter>
-                <Button color="danger" variant="light" onPress={onClose}>
-                  Close
-                </Button>
-                <Button color="primary" onPress={onClose}>
-                  Action
-                </Button>
-              </ModalFooter>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/navbar/bordered.raw.jsx b/apps/docs/content/components/navbar/bordered.raw.jsx
new file mode 100644
index 0000000000..0d9f45e996
--- /dev/null
+++ b/apps/docs/content/components/navbar/bordered.raw.jsx
@@ -0,0 +1,52 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar isBordered>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/bordered.ts b/apps/docs/content/components/navbar/bordered.ts
index 131a1d1c4f..4e025375c3 100644
--- a/apps/docs/content/components/navbar/bordered.ts
+++ b/apps/docs/content/components/navbar/bordered.ts
@@ -1,58 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar isBordered>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./bordered.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/controlled-menu.raw.jsx b/apps/docs/content/components/navbar/controlled-menu.raw.jsx
new file mode 100644
index 0000000000..129004d662
--- /dev/null
+++ b/apps/docs/content/components/navbar/controlled-menu.raw.jsx
@@ -0,0 +1,106 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarMenuToggle,
+  NavbarMenuItem,
+  NavbarMenu,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  Button,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const menuItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Navbar isBordered isMenuOpen={isMenuOpen} onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent className="sm:hidden" justify="start">
+        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
+      </NavbarContent>
+
+      <NavbarContent className="sm:hidden pr-3" justify="center">
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="warning" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              className="w-full"
+              color={
+                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+              }
+              href="#"
+              size="lg"
+            >
+              {item}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/controlled-menu.ts b/apps/docs/content/components/navbar/controlled-menu.ts
index bac2a98e55..40facd8ed4 100644
--- a/apps/docs/content/components/navbar/controlled-menu.ts
+++ b/apps/docs/content/components/navbar/controlled-menu.ts
@@ -1,106 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenuItem, NavbarMenu, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const menuItems = [
-    "Profile",
-    "Dashboard",
-    "Activity",
-    "Analytics",
-    "System",
-    "Deployments",
-    "My Settings",
-    "Team Settings",
-    "Help & Feedback",
-    "Log Out",
-  ];
-
-  return (
-    <Navbar
-      isBordered
-      isMenuOpen={isMenuOpen}
-      onMenuOpenChange={setIsMenuOpen}
-    >
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle aria-label={isMenuOpen ? "Close menu" : "Open menu"} />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarMenu>
-        {menuItems.map((item, index) => (
-          <NavbarMenuItem key={\`\${item}-\${index}\`}>
-            <Link
-              className="w-full"
-              color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
-              }
-              href="#"
-              size="lg"
-            >
-              {item}
-            </Link>
-          </NavbarMenuItem>
-        ))}
-      </NavbarMenu>
-    </Navbar>
-  );
-}`;
+import App from "./controlled-menu.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/custom-active-item.raw.jsx b/apps/docs/content/components/navbar/custom-active-item.raw.jsx
new file mode 100644
index 0000000000..b2f1617098
--- /dev/null
+++ b/apps/docs/content/components/navbar/custom-active-item.raw.jsx
@@ -0,0 +1,69 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar
+      classNames={{
+        item: [
+          "flex",
+          "relative",
+          "h-full",
+          "items-center",
+          "data-[active=true]:after:content-['']",
+          "data-[active=true]:after:absolute",
+          "data-[active=true]:after:bottom-0",
+          "data-[active=true]:after:left-0",
+          "data-[active=true]:after:right-0",
+          "data-[active=true]:after:h-[2px]",
+          "data-[active=true]:after:rounded-[2px]",
+          "data-[active=true]:after:bg-primary",
+        ],
+      }}
+    >
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/custom-active-item.ts b/apps/docs/content/components/navbar/custom-active-item.ts
index a564688395..f62f66c256 100644
--- a/apps/docs/content/components/navbar/custom-active-item.ts
+++ b/apps/docs/content/components/navbar/custom-active-item.ts
@@ -1,75 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar
-      classNames={{
-        item: [
-          "flex",
-          "relative",
-          "h-full",
-          "items-center",
-          "data-[active=true]:after:content-['']",
-          "data-[active=true]:after:absolute",
-          "data-[active=true]:after:bottom-0",
-          "data-[active=true]:after:left-0",
-          "data-[active=true]:after:right-0",
-          "data-[active=true]:after:h-[2px]",
-          "data-[active=true]:after:rounded-[2px]",
-          "data-[active=true]:after:bg-primary",
-        ],
-      }}
-    >
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./custom-active-item.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx
new file mode 100644
index 0000000000..858e009612
--- /dev/null
+++ b/apps/docs/content/components/navbar/disable-menu-animation.raw.jsx
@@ -0,0 +1,104 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarMenuToggle,
+  NavbarMenu,
+  NavbarMenuItem,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  Button,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const menuItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Navbar disableAnimation isBordered>
+      <NavbarContent className="sm:hidden" justify="start">
+        <NavbarMenuToggle />
+      </NavbarContent>
+
+      <NavbarContent className="sm:hidden pr-3" justify="center">
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" color="warning" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="warning" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              className="w-full"
+              color={
+                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
+              }
+              href="#"
+              size="lg"
+            >
+              {item}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/disable-menu-animation.ts b/apps/docs/content/components/navbar/disable-menu-animation.ts
index a0e0382579..a485b0530f 100644
--- a/apps/docs/content/components/navbar/disable-menu-animation.ts
+++ b/apps/docs/content/components/navbar/disable-menu-animation.ts
@@ -1,100 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  const menuItems = [
-    "Profile",
-    "Dashboard",
-    "Activity",
-    "Analytics",
-    "System",
-    "Deployments",
-    "My Settings",
-    "Team Settings",
-    "Help & Feedback",
-    "Log Out",
-  ];
-
-  return (
-    <Navbar disableAnimation isBordered>
-      <NavbarContent className="sm:hidden" justify="start">
-        <NavbarMenuToggle />
-      </NavbarContent>
-
-      <NavbarContent className="sm:hidden pr-3" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page" color="warning">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="warning" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarMenu>
-        {menuItems.map((item, index) => (
-          <NavbarMenuItem key={\`\${item}-\${index}\`}>
-            <Link
-              className="w-full"
-              color={
-                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
-              }
-              href="#"
-              size="lg"
-            >
-              {item}
-            </Link>
-          </NavbarMenuItem>
-        ))}
-      </NavbarMenu>
-    </Navbar>
-  );
-}`;
+import App from "./disable-menu-animation.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/disabled-blur.raw.jsx b/apps/docs/content/components/navbar/disabled-blur.raw.jsx
new file mode 100644
index 0000000000..c725d9db9b
--- /dev/null
+++ b/apps/docs/content/components/navbar/disabled-blur.raw.jsx
@@ -0,0 +1,52 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar isBordered isBlurred={false}>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/disabled-blur.ts b/apps/docs/content/components/navbar/disabled-blur.ts
index 8f9b04eb19..b3b7865113 100644
--- a/apps/docs/content/components/navbar/disabled-blur.ts
+++ b/apps/docs/content/components/navbar/disabled-blur.ts
@@ -1,58 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar isBordered isBlurred={false}>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./disabled-blur.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx
new file mode 100644
index 0000000000..3e76a1088b
--- /dev/null
+++ b/apps/docs/content/components/navbar/hide-on-scroll.raw.jsx
@@ -0,0 +1,52 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar shouldHideOnScroll>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/hide-on-scroll.ts b/apps/docs/content/components/navbar/hide-on-scroll.ts
index 4f2372e15e..a160f6edf7 100644
--- a/apps/docs/content/components/navbar/hide-on-scroll.ts
+++ b/apps/docs/content/components/navbar/hide-on-scroll.ts
@@ -1,58 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar shouldHideOnScroll>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./hide-on-scroll.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/static.raw.jsx b/apps/docs/content/components/navbar/static.raw.jsx
new file mode 100644
index 0000000000..27eec0adb0
--- /dev/null
+++ b/apps/docs/content/components/navbar/static.raw.jsx
@@ -0,0 +1,52 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar position="static">
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/static.ts b/apps/docs/content/components/navbar/static.ts
index 59177f7de5..1b7a00893d 100644
--- a/apps/docs/content/components/navbar/static.ts
+++ b/apps/docs/content/components/navbar/static.ts
@@ -1,58 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar position="static">
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./static.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/usage.raw.jsx b/apps/docs/content/components/navbar/usage.raw.jsx
new file mode 100644
index 0000000000..1ec1d37c9b
--- /dev/null
+++ b/apps/docs/content/components/navbar/usage.raw.jsx
@@ -0,0 +1,52 @@
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/usage.ts b/apps/docs/content/components/navbar/usage.ts
index c651a56f7e..1118304c37 100644
--- a/apps/docs/content/components/navbar/usage.ts
+++ b/apps/docs/content/components/navbar/usage.ts
@@ -1,58 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/with-avatar.raw.jsx b/apps/docs/content/components/navbar/with-avatar.raw.jsx
new file mode 100644
index 0000000000..ce2386a05c
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-avatar.raw.jsx
@@ -0,0 +1,85 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  DropdownItem,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  Avatar,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" color="secondary" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+
+      <NavbarContent as="div" justify="end">
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              color="secondary"
+              name="Jason Hughes"
+              size="sm"
+              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+            />
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Profile Actions" variant="flat">
+            <DropdownItem key="profile" className="h-14 gap-2">
+              <p className="font-semibold">Signed in as</p>
+              <p className="font-semibold">zoey@example.com</p>
+            </DropdownItem>
+            <DropdownItem key="settings">My Settings</DropdownItem>
+            <DropdownItem key="team_settings">Team Settings</DropdownItem>
+            <DropdownItem key="analytics">Analytics</DropdownItem>
+            <DropdownItem key="system">System</DropdownItem>
+            <DropdownItem key="configurations">Configurations</DropdownItem>
+            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+            <DropdownItem key="logout" color="danger">
+              Log Out
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/with-avatar.ts b/apps/docs/content/components/navbar/with-avatar.ts
index c5e11c58cd..17d3676daf 100644
--- a/apps/docs/content/components/navbar/with-avatar.ts
+++ b/apps/docs/content/components/navbar/with-avatar.ts
@@ -1,80 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  return (
-    <Navbar>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page" color="secondary">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-
-      <NavbarContent as="div" justify="end">
-        <Dropdown placement="bottom-end">
-          <DropdownTrigger>
-            <Avatar
-              isBordered
-              as="button"
-              className="transition-transform"
-              color="secondary"
-              name="Jason Hughes"
-              size="sm"
-              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-            />
-          </DropdownTrigger>
-          <DropdownMenu aria-label="Profile Actions" variant="flat">
-            <DropdownItem key="profile" className="h-14 gap-2">
-              <p className="font-semibold">Signed in as</p>
-              <p className="font-semibold">zoey@example.com</p>
-            </DropdownItem>
-            <DropdownItem key="settings">My Settings</DropdownItem>
-            <DropdownItem key="team_settings">Team Settings</DropdownItem>
-            <DropdownItem key="analytics">Analytics</DropdownItem>
-            <DropdownItem key="system">System</DropdownItem>
-            <DropdownItem key="configurations">Configurations</DropdownItem>
-            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
-            <DropdownItem key="logout" color="danger">
-              Log Out
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./with-avatar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx
new file mode 100644
index 0000000000..8b0f82f756
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-dropdown-menu.raw.jsx
@@ -0,0 +1,320 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  Button,
+  DropdownItem,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDown = ({fill, size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const Lock = ({fill, size, height, width, ...props}) => {
+  const color = fill;
+
+  return (
+    <svg
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g transform="translate(3.5 2)">
+        <path
+          d="M9.121,6.653V4.5A4.561,4.561,0,0,0,0,4.484V6.653"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth={1.5}
+          transform="translate(3.85 0.75)"
+        />
+        <path
+          d="M.5,0V2.221"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth={1.5}
+          transform="translate(7.91 12.156)"
+        />
+        <path
+          d="M7.66,0C1.915,0,0,1.568,0,6.271s1.915,6.272,7.66,6.272,7.661-1.568,7.661-6.272S13.4,0,7.66,0Z"
+          fill="none"
+          stroke={color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          strokeWidth={1.5}
+          transform="translate(0.75 6.824)"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const Activity = ({fill, size, height, width, ...props}) => {
+  return (
+    <svg
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path d="M6.918 14.854l2.993-3.889 3.414 2.68 2.929-3.78" />
+        <path d="M19.668 2.35a1.922 1.922 0 11-1.922 1.922 1.921 1.921 0 011.922-1.922z" />
+        <path d="M20.756 9.269a20.809 20.809 0 01.194 3.034c0 6.938-2.312 9.25-9.25 9.25s-9.25-2.312-9.25-9.25 2.313-9.25 9.25-9.25a20.931 20.931 0 012.983.187" />
+      </g>
+    </svg>
+  );
+};
+
+export const Flash = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.09 13.28h3.09v7.2c0 1.68.91 2.02 2.02.76l7.57-8.6c.93-1.05.54-1.92-.87-1.92h-3.09v-7.2c0-1.68-.91-2.02-2.02-.76l-7.57 8.6c-.92 1.06-.53 1.92.87 1.92Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const Server = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M19.32 10H4.69c-1.48 0-2.68-1.21-2.68-2.68V4.69c0-1.48 1.21-2.68 2.68-2.68h14.63C20.8 2.01 22 3.22 22 4.69v2.63C22 8.79 20.79 10 19.32 10ZM19.32 22H4.69c-1.48 0-2.68-1.21-2.68-2.68v-2.63c0-1.48 1.21-2.68 2.68-2.68h14.63c1.48 0 2.68 1.21 2.68 2.68v2.63c0 1.47-1.21 2.68-2.68 2.68ZM6 5v2M10 5v2M6 17v2M10 17v2M14 6h4M14 18h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const TagUser = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M18 18.86h-.76c-.8 0-1.56.31-2.12.87l-1.71 1.69c-.78.77-2.05.77-2.83 0l-1.71-1.69c-.56-.56-1.33-.87-2.12-.87H6c-1.66 0-3-1.33-3-2.97V4.98c0-1.64 1.34-2.97 3-2.97h12c1.66 0 3 1.33 3 2.97v10.91c0 1.63-1.34 2.97-3 2.97Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M12 10a2.33 2.33 0 1 0 0-4.66A2.33 2.33 0 0 0 12 10ZM16 15.66c0-1.8-1.79-3.26-4-3.26s-4 1.46-4 3.26"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const Scale = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height}
+      viewBox="0 0 24 24"
+      width={size || width}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M18 10V6h-4M6 14v4h4"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const icons = {
+    chevron: <ChevronDown fill="currentColor" size={16} />,
+    scale: <Scale className="text-warning" fill="currentColor" size={30} />,
+    lock: <Lock className="text-success" fill="currentColor" size={30} />,
+    activity: <Activity className="text-secondary" fill="currentColor" size={30} />,
+    flash: <Flash className="text-primary" fill="currentColor" size={30} />,
+    server: <Server className="text-success" fill="currentColor" size={30} />,
+    user: <TagUser className="text-danger" fill="currentColor" size={30} />,
+  };
+
+  return (
+    <Navbar>
+      <NavbarBrand>
+        <AcmeLogo />
+        <p className="font-bold text-inherit">ACME</p>
+      </NavbarBrand>
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <Dropdown>
+          <NavbarItem>
+            <DropdownTrigger>
+              <Button
+                disableRipple
+                className="p-0 bg-transparent data-[hover=true]:bg-transparent"
+                endContent={icons.chevron}
+                radius="sm"
+                variant="light"
+              >
+                Features
+              </Button>
+            </DropdownTrigger>
+          </NavbarItem>
+          <DropdownMenu
+            aria-label="ACME features"
+            className="w-[340px]"
+            itemClasses={{
+              base: "gap-4",
+            }}
+          >
+            <DropdownItem
+              key="autoscaling"
+              description="ACME scales apps to meet user demand, automagically, based on load."
+              startContent={icons.scale}
+            >
+              Autoscaling
+            </DropdownItem>
+            <DropdownItem
+              key="usage_metrics"
+              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
+              startContent={icons.activity}
+            >
+              Usage Metrics
+            </DropdownItem>
+            <DropdownItem
+              key="production_ready"
+              description="ACME runs on ACME, join us and others serving requests at web scale."
+              startContent={icons.flash}
+            >
+              Production Ready
+            </DropdownItem>
+            <DropdownItem
+              key="99_uptime"
+              description="Applications stay on the grid with high availability and high uptime guarantees."
+              startContent={icons.server}
+            >
+              +99% Uptime
+            </DropdownItem>
+            <DropdownItem
+              key="supreme_support"
+              description="Overcome any challenge with a supporting team ready to respond."
+              startContent={icons.user}
+            >
+              +Supreme Support
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/with-dropdown-menu.ts b/apps/docs/content/components/navbar/with-dropdown-menu.ts
index 61b4a6a4fa..e5badd5a96 100644
--- a/apps/docs/content/components/navbar/with-dropdown-menu.ts
+++ b/apps/docs/content/components/navbar/with-dropdown-menu.ts
@@ -1,342 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const Icons = `export const ChevronDown = ({fill, size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      />
-    </svg>
-  );
-};
-
-export const Lock = ({fill, size, height, width, ...props}) => {
-  const color = fill;
-
-  return (
-    <svg
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g transform="translate(3.5 2)">
-        <path
-          d="M9.121,6.653V4.5A4.561,4.561,0,0,0,0,4.484V6.653"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth={1.5}
-          transform="translate(3.85 0.75)"
-        />
-        <path
-          d="M.5,0V2.221"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth={1.5}
-          transform="translate(7.91 12.156)"
-        />
-        <path
-          d="M7.66,0C1.915,0,0,1.568,0,6.271s1.915,6.272,7.66,6.272,7.661-1.568,7.661-6.272S13.4,0,7.66,0Z"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth={1.5}
-          transform="translate(0.75 6.824)"
-        />
-      </g>
-    </svg>
-  );
-};
-
-export const Activity = ({fill, size, height, width, ...props}) => {
-  return (
-    <svg
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      >
-        <path d="M6.918 14.854l2.993-3.889 3.414 2.68 2.929-3.78" />
-        <path d="M19.668 2.35a1.922 1.922 0 11-1.922 1.922 1.921 1.921 0 011.922-1.922z" />
-        <path d="M20.756 9.269a20.809 20.809 0 01.194 3.034c0 6.938-2.312 9.25-9.25 9.25s-9.25-2.312-9.25-9.25 2.313-9.25 9.25-9.25a20.931 20.931 0 012.983.187" />
-      </g>
-    </svg>
-  );
-};
-
-export const Flash = ({
-  fill = "currentColor",
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height}
-      viewBox="0 0 24 24"
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M6.09 13.28h3.09v7.2c0 1.68.91 2.02 2.02.76l7.57-8.6c.93-1.05.54-1.92-.87-1.92h-3.09v-7.2c0-1.68-.91-2.02-2.02-.76l-7.57 8.6c-.92 1.06-.53 1.92.87 1.92Z"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      />
-    </svg>
-  );
-};
-
-export const Server = ({
-  fill = "currentColor",
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height}
-      viewBox="0 0 24 24"
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M19.32 10H4.69c-1.48 0-2.68-1.21-2.68-2.68V4.69c0-1.48 1.21-2.68 2.68-2.68h14.63C20.8 2.01 22 3.22 22 4.69v2.63C22 8.79 20.79 10 19.32 10ZM19.32 22H4.69c-1.48 0-2.68-1.21-2.68-2.68v-2.63c0-1.48 1.21-2.68 2.68-2.68h14.63c1.48 0 2.68 1.21 2.68 2.68v2.63c0 1.47-1.21 2.68-2.68 2.68ZM6 5v2M10 5v2M6 17v2M10 17v2M14 6h4M14 18h4"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-    </svg>
-  );
-};
-
-export const TagUser = ({
-  fill = "currentColor",
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height}
-      viewBox="0 0 24 24"
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M18 18.86h-.76c-.8 0-1.56.31-2.12.87l-1.71 1.69c-.78.77-2.05.77-2.83 0l-1.71-1.69c-.56-.56-1.33-.87-2.12-.87H6c-1.66 0-3-1.33-3-2.97V4.98c0-1.64 1.34-2.97 3-2.97h12c1.66 0 3 1.33 3 2.97v10.91c0 1.63-1.34 2.97-3 2.97Z"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      />
-      <path
-        d="M12 10a2.33 2.33 0 1 0 0-4.66A2.33 2.33 0 0 0 12 10ZM16 15.66c0-1.8-1.79-3.26-4-3.26s-4 1.46-4 3.26"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-    </svg>
-  );
-};
-
-
-export const Scale = ({
-  fill = "currentColor",
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height}
-      viewBox="0 0 24 24"
-      width={size || width}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7ZM18 6 6 18"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-      <path
-        d="M18 10V6h-4M6 14v4h4"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={1.5}
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu} from "@nextui-org/react";
-import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "./Icons.jsx";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  const icons = {
-    chevron: <ChevronDown fill="currentColor" size={16} />,
-    scale: <Scale className="text-warning" fill="currentColor" size={30} />,
-    lock: <Lock className="text-success" fill="currentColor" size={30} />,
-    activity: <Activity className="text-secondary" fill="currentColor" size={30} />,
-    flash: <Flash className="text-primary" fill="currentColor" size={30} />,
-    server: <Server className="text-success" fill="currentColor" size={30} />,
-    user: <TagUser className="text-danger" fill="currentColor" size={30} />,
-  };
-
-  return (
-    <Navbar>
-      <NavbarBrand>
-        <AcmeLogo />
-        <p className="font-bold text-inherit">ACME</p>
-      </NavbarBrand>
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <Dropdown>
-          <NavbarItem>
-            <DropdownTrigger>
-              <Button
-                disableRipple
-                className="p-0 bg-transparent data-[hover=true]:bg-transparent"
-                endContent={icons.chevron}
-                radius="sm"
-                variant="light"
-              >
-                Features
-              </Button>
-            </DropdownTrigger>
-          </NavbarItem>
-          <DropdownMenu
-            aria-label="ACME features"
-            className="w-[340px]"
-            itemClasses={{
-              base: "gap-4",
-            }}
-          >
-            <DropdownItem
-              key="autoscaling"
-              description="ACME scales apps to meet user demand, automagically, based on load."
-              startContent={icons.scale}
-            >
-              Autoscaling
-            </DropdownItem>
-            <DropdownItem
-              key="usage_metrics"
-              description="Real-time metrics to debug issues. Slow query added? We’ll show you exactly where."
-              startContent={icons.activity}
-            >
-              Usage Metrics
-            </DropdownItem>
-            <DropdownItem
-              key="production_ready"
-              description="ACME runs on ACME, join us and others serving requests at web scale."
-              startContent={icons.flash}
-            >
-              Production Ready
-            </DropdownItem>
-            <DropdownItem
-              key="99_uptime"
-              description="Applications stay on the grid with high availability and high uptime guarantees."
-              startContent={icons.server}
-            >
-              +99% Uptime
-            </DropdownItem>
-            <DropdownItem
-              key="supreme_support"
-              description="Overcome any challenge with a supporting team ready to respond."
-              startContent={icons.user}
-            >
-              +Supreme Support
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./with-dropdown-menu.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
-  "/Icons.jsx": Icons,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/with-menu.raw.jsx b/apps/docs/content/components/navbar/with-menu.raw.jsx
new file mode 100644
index 0000000000..78320c99d5
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-menu.raw.jsx
@@ -0,0 +1,100 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  NavbarMenuToggle,
+  NavbarMenu,
+  NavbarMenuItem,
+  Link,
+  Button,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const menuItems = [
+    "Profile",
+    "Dashboard",
+    "Activity",
+    "Analytics",
+    "System",
+    "Deployments",
+    "My Settings",
+    "Team Settings",
+    "Help & Feedback",
+    "Log Out",
+  ];
+
+  return (
+    <Navbar onMenuOpenChange={setIsMenuOpen}>
+      <NavbarContent>
+        <NavbarMenuToggle
+          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          className="sm:hidden"
+        />
+        <NavbarBrand>
+          <AcmeLogo />
+          <p className="font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+      </NavbarContent>
+
+      <NavbarContent className="hidden sm:flex gap-4" justify="center">
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Features
+          </Link>
+        </NavbarItem>
+        <NavbarItem isActive>
+          <Link aria-current="page" href="#">
+            Customers
+          </Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Link color="foreground" href="#">
+            Integrations
+          </Link>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarContent justify="end">
+        <NavbarItem className="hidden lg:flex">
+          <Link href="#">Login</Link>
+        </NavbarItem>
+        <NavbarItem>
+          <Button as={Link} color="primary" href="#" variant="flat">
+            Sign Up
+          </Button>
+        </NavbarItem>
+      </NavbarContent>
+      <NavbarMenu>
+        {menuItems.map((item, index) => (
+          <NavbarMenuItem key={`${item}-${index}`}>
+            <Link
+              className="w-full"
+              color={
+                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
+              }
+              href="#"
+              size="lg"
+            >
+              {item}
+            </Link>
+          </NavbarMenuItem>
+        ))}
+      </NavbarMenu>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/with-menu.ts b/apps/docs/content/components/navbar/with-menu.ts
index 7762007966..be734be3c5 100644
--- a/apps/docs/content/components/navbar/with-menu.ts
+++ b/apps/docs/content/components/navbar/with-menu.ts
@@ -1,96 +1,7 @@
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle, NavbarMenu, NavbarMenuItem, Link, Button} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-
-export default function App() {
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const menuItems = [
-    "Profile",
-    "Dashboard",
-    "Activity",
-    "Analytics",
-    "System",
-    "Deployments",
-    "My Settings",
-    "Team Settings",
-    "Help & Feedback",
-    "Log Out",
-  ];
-
-  return (
-    <Navbar onMenuOpenChange={setIsMenuOpen}>
-      <NavbarContent>
-        <NavbarMenuToggle
-          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
-          className="sm:hidden"
-        />
-        <NavbarBrand>
-          <AcmeLogo />
-          <p className="font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-      </NavbarContent>
-
-      <NavbarContent className="hidden sm:flex gap-4" justify="center">
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Features
-          </Link>
-        </NavbarItem>
-        <NavbarItem isActive>
-          <Link href="#" aria-current="page">
-            Customers
-          </Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Link color="foreground" href="#">
-            Integrations
-          </Link>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarContent justify="end">
-        <NavbarItem className="hidden lg:flex">
-          <Link href="#">Login</Link>
-        </NavbarItem>
-        <NavbarItem>
-          <Button as={Link} color="primary" href="#" variant="flat">
-            Sign Up
-          </Button>
-        </NavbarItem>
-      </NavbarContent>
-      <NavbarMenu>
-        {menuItems.map((item, index) => (
-          <NavbarMenuItem key={\`\${item}-\${index}\`}>
-            <Link
-              color={
-                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
-              }
-              className="w-full"
-              href="#"
-              size="lg"
-            >
-              {item}
-            </Link>
-          </NavbarMenuItem>
-        ))}
-      </NavbarMenu>
-    </Navbar>
-  );
-}`;
+import App from "./with-menu.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
 };
 
 export default {
diff --git a/apps/docs/content/components/navbar/with-search-input.raw.jsx b/apps/docs/content/components/navbar/with-search-input.raw.jsx
new file mode 100644
index 0000000000..300f80cb51
--- /dev/null
+++ b/apps/docs/content/components/navbar/with-search-input.raw.jsx
@@ -0,0 +1,130 @@
+import {
+  Navbar,
+  NavbarBrand,
+  NavbarContent,
+  NavbarItem,
+  Link,
+  Input,
+  DropdownItem,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  Avatar,
+} from "@nextui-org/react";
+
+export const AcmeLogo = () => {
+  return (
+    <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
+      <path
+        clipRule="evenodd"
+        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const SearchIcon = ({size = 24, strokeWidth = 1.5, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={height || size}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={width || size}
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Navbar isBordered>
+      <NavbarContent justify="start">
+        <NavbarBrand className="mr-4">
+          <AcmeLogo />
+          <p className="hidden sm:block font-bold text-inherit">ACME</p>
+        </NavbarBrand>
+        <NavbarContent className="hidden sm:flex gap-3">
+          <NavbarItem>
+            <Link color="foreground" href="#">
+              Features
+            </Link>
+          </NavbarItem>
+          <NavbarItem isActive>
+            <Link aria-current="page" color="secondary" href="#">
+              Customers
+            </Link>
+          </NavbarItem>
+          <NavbarItem>
+            <Link color="foreground" href="#">
+              Integrations
+            </Link>
+          </NavbarItem>
+        </NavbarContent>
+      </NavbarContent>
+
+      <NavbarContent as="div" className="items-center" justify="end">
+        <Input
+          classNames={{
+            base: "max-w-full sm:max-w-[10rem] h-10",
+            mainWrapper: "h-full",
+            input: "text-small",
+            inputWrapper:
+              "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
+          }}
+          placeholder="Type to search..."
+          size="sm"
+          startContent={<SearchIcon size={18} />}
+          type="search"
+        />
+        <Dropdown placement="bottom-end">
+          <DropdownTrigger>
+            <Avatar
+              isBordered
+              as="button"
+              className="transition-transform"
+              color="secondary"
+              name="Jason Hughes"
+              size="sm"
+              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+            />
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Profile Actions" variant="flat">
+            <DropdownItem key="profile" className="h-14 gap-2">
+              <p className="font-semibold">Signed in as</p>
+              <p className="font-semibold">zoey@example.com</p>
+            </DropdownItem>
+            <DropdownItem key="settings">My Settings</DropdownItem>
+            <DropdownItem key="team_settings">Team Settings</DropdownItem>
+            <DropdownItem key="analytics">Analytics</DropdownItem>
+            <DropdownItem key="system">System</DropdownItem>
+            <DropdownItem key="configurations">Configurations</DropdownItem>
+            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+            <DropdownItem key="logout" color="danger">
+              Log Out
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </NavbarContent>
+    </Navbar>
+  );
+}
diff --git a/apps/docs/content/components/navbar/with-search-input.ts b/apps/docs/content/components/navbar/with-search-input.ts
index 871710ca62..88fc86bd2b 100644
--- a/apps/docs/content/components/navbar/with-search-input.ts
+++ b/apps/docs/content/components/navbar/with-search-input.ts
@@ -1,130 +1,7 @@
-const SearchIcon = `export const SearchIcon = ({
-  size = 24,
-  strokeWidth = 1.5,
-  width,
-  height,
-  ...props
-}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={height || size}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={width || size}
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);
-`;
-
-const AcmeLogo = `export const AcmeLogo = () => (
-  <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
-    <path
-      clipRule="evenodd"
-      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
-      fill="currentColor"
-      fillRule="evenodd"
-    />
-  </svg>
-);`;
-
-const App = `import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Input, DropdownItem, DropdownTrigger, Dropdown, DropdownMenu, Avatar} from "@nextui-org/react";
-import {AcmeLogo} from "./AcmeLogo.jsx";
-import {SearchIcon} from "./SearchIcon.jsx";
-
-export default function App() {
-  return (
-    <Navbar isBordered>
-      <NavbarContent justify="start">
-        <NavbarBrand className="mr-4">
-          <AcmeLogo />
-          <p className="hidden sm:block font-bold text-inherit">ACME</p>
-        </NavbarBrand>
-        <NavbarContent className="hidden sm:flex gap-3">
-          <NavbarItem>
-            <Link color="foreground" href="#">
-              Features
-            </Link>
-          </NavbarItem>
-          <NavbarItem isActive>
-            <Link href="#" aria-current="page" color="secondary">
-              Customers
-            </Link>
-          </NavbarItem>
-          <NavbarItem>
-            <Link color="foreground" href="#">
-              Integrations
-            </Link>
-          </NavbarItem>
-        </NavbarContent>
-      </NavbarContent>
-
-      <NavbarContent as="div" className="items-center" justify="end">
-        <Input
-          classNames={{
-            base: "max-w-full sm:max-w-[10rem] h-10",
-            mainWrapper: "h-full",
-            input: "text-small",
-            inputWrapper: "h-full font-normal text-default-500 bg-default-400/20 dark:bg-default-500/20",
-          }}
-          placeholder="Type to search..."
-          size="sm"
-          startContent={<SearchIcon size={18} />}
-          type="search"
-        />
-        <Dropdown placement="bottom-end">
-          <DropdownTrigger>
-            <Avatar
-              isBordered
-              as="button"
-              className="transition-transform"
-              color="secondary"
-              name="Jason Hughes"
-              size="sm"
-              src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
-            />
-          </DropdownTrigger>
-          <DropdownMenu aria-label="Profile Actions" variant="flat">
-            <DropdownItem key="profile" className="h-14 gap-2">
-              <p className="font-semibold">Signed in as</p>
-              <p className="font-semibold">zoey@example.com</p>
-            </DropdownItem>
-            <DropdownItem key="settings">My Settings</DropdownItem>
-            <DropdownItem key="team_settings">Team Settings</DropdownItem>
-            <DropdownItem key="analytics">Analytics</DropdownItem>
-            <DropdownItem key="system">System</DropdownItem>
-            <DropdownItem key="configurations">Configurations</DropdownItem>
-            <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
-            <DropdownItem key="logout" color="danger">
-              Log Out
-            </DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </NavbarContent>
-    </Navbar>
-  );
-}`;
+import App from "./with-search-input.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/AcmeLogo.jsx": AcmeLogo,
-  "/SearchIcon.jsx": SearchIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/pagination/boundaries.raw.jsx b/apps/docs/content/components/pagination/boundaries.raw.jsx
new file mode 100644
index 0000000000..7c6e436708
--- /dev/null
+++ b/apps/docs/content/components/pagination/boundaries.raw.jsx
@@ -0,0 +1,14 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-5">
+      <p>1 Boundary (default)</p>
+      <Pagination color="secondary" total={10} />
+      <p>2 Boundaries</p>
+      <Pagination boundaries={2} color="secondary" total={10} />
+      <p>3 Boundaries</p>
+      <Pagination boundaries={3} color="secondary" total={10} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/boundaries.ts b/apps/docs/content/components/pagination/boundaries.ts
index 56b1ffe9ef..e3b0fe3955 100644
--- a/apps/docs/content/components/pagination/boundaries.ts
+++ b/apps/docs/content/components/pagination/boundaries.ts
@@ -1,28 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-5">
-      <p>1 Boundary (default)</p>
-      <Pagination
-        total={10}
-        color="secondary"
-      />
-      <p>2 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={2}
-        color="secondary"
-      />
-      <p>3 Boundaries</p>
-      <Pagination
-        total={10}
-        boundaries={3}
-        color="secondary"
-      />
-    </div>
-  );
-}`;
+import App from "./boundaries.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/colors.raw.jsx b/apps/docs/content/components/pagination/colors.raw.jsx
new file mode 100644
index 0000000000..bf5afca8cd
--- /dev/null
+++ b/apps/docs/content/components/pagination/colors.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {colors.map((color) => (
+        <Pagination key={color} color={color} initialPage={1} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/colors.ts b/apps/docs/content/components/pagination/colors.ts
index d2988d221a..d5bef810aa 100644
--- a/apps/docs/content/components/pagination/colors.ts
+++ b/apps/docs/content/components/pagination/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const colors = ["primary", "secondary", "success", "warning", "danger"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {colors.map((color) => (
-        <Pagination key={color} total={10} initialPage={1} color={color} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/compact.raw.jsx b/apps/docs/content/components/pagination/compact.raw.jsx
new file mode 100644
index 0000000000..c0419e978f
--- /dev/null
+++ b/apps/docs/content/components/pagination/compact.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination isCompact showControls initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/compact.ts b/apps/docs/content/components/pagination/compact.ts
index dff50103bf..c3cdfc316e 100644
--- a/apps/docs/content/components/pagination/compact.ts
+++ b/apps/docs/content/components/pagination/compact.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination isCompact showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./compact.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/controlled.raw.jsx b/apps/docs/content/components/pagination/controlled.raw.jsx
new file mode 100644
index 0000000000..6580d3b7fc
--- /dev/null
+++ b/apps/docs/content/components/pagination/controlled.raw.jsx
@@ -0,0 +1,30 @@
+import {Pagination, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [currentPage, setCurrentPage] = React.useState(1);
+
+  return (
+    <div className="flex flex-col gap-5">
+      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
+      <Pagination color="secondary" page={currentPage} total={10} onChange={setCurrentPage} />
+      <div className="flex gap-2">
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
+        >
+          Previous
+        </Button>
+        <Button
+          color="secondary"
+          size="sm"
+          variant="flat"
+          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/controlled.ts b/apps/docs/content/components/pagination/controlled.ts
index 6b3c4d7c45..2c3f0cacb4 100644
--- a/apps/docs/content/components/pagination/controlled.ts
+++ b/apps/docs/content/components/pagination/controlled.ts
@@ -1,38 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [currentPage, setCurrentPage] = React.useState(1);
-
-  return (
-    <div className="flex flex-col gap-5">
-      <p className="text-small text-default-500">Selected Page: {currentPage}</p>
-      <Pagination
-        total={10}
-        color="secondary"
-        page={currentPage}
-        onChange={setCurrentPage}
-      />
-      <div className="flex gap-2">
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}
-        >
-          Previous
-        </Button>
-        <Button
-          size="sm"
-          variant="flat"
-          color="secondary"
-          onPress={() => setCurrentPage((prev) => (prev < 10 ? prev + 1 : prev))}
-        >
-          Next
-        </Button>
-      </div>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/controls.raw.jsx b/apps/docs/content/components/pagination/controls.raw.jsx
new file mode 100644
index 0000000000..8b5909bba0
--- /dev/null
+++ b/apps/docs/content/components/pagination/controls.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination showControls initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/controls.ts b/apps/docs/content/components/pagination/controls.ts
index f8db1c1658..74b3403042 100644
--- a/apps/docs/content/components/pagination/controls.ts
+++ b/apps/docs/content/components/pagination/controls.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination showControls total={10} initialPage={1} />
-  );
-}`;
+import App from "./controls.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/custom-impl.raw.jsx b/apps/docs/content/components/pagination/custom-impl.raw.jsx
new file mode 100644
index 0000000000..aa3dedd161
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-impl.raw.jsx
@@ -0,0 +1,82 @@
+import {usePagination, PaginationItemType} from "@nextui-org/react";
+
+export const ChevronIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
+    total: 6,
+    showControls: true,
+    siblings: 10,
+    boundaries: 10,
+  });
+
+  return (
+    <div className="flex flex-col gap-2">
+      <p>Active page: {activePage}</p>
+      <ul className="flex gap-2 items-center">
+        {range.map((page) => {
+          if (page === PaginationItemType.NEXT) {
+            return (
+              <li key={page} aria-label="next page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onNext}>
+                  <ChevronIcon className="rotate-180" />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.PREV) {
+            return (
+              <li key={page} aria-label="previous page" className="w-4 h-4">
+                <button className="w-full h-full bg-default-200 rounded-full" onClick={onPrevious}>
+                  <ChevronIcon />
+                </button>
+              </li>
+            );
+          }
+
+          if (page === PaginationItemType.DOTS) {
+            return (
+              <li key={page} className="w-4 h-4">
+                ...
+              </li>
+            );
+          }
+
+          return (
+            <li key={page} aria-label={`page ${page}`} className="w-4 h-4">
+              <button
+                className={cn(
+                  "w-full h-full bg-default-300 rounded-full",
+                  activePage === page && "bg-secondary",
+                )}
+                onClick={() => setPage(page)}
+              />
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-impl.ts b/apps/docs/content/components/pagination/custom-impl.ts
index 72da8c7611..ab37512cec 100644
--- a/apps/docs/content/components/pagination/custom-impl.ts
+++ b/apps/docs/content/components/pagination/custom-impl.ts
@@ -1,95 +1,7 @@
-const ChevronIcon = `export const ChevronIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const App = `import {usePagination, PaginationItemType} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const {activePage, range, setPage, onNext, onPrevious} = usePagination({
-    total: 6,
-    showControls: true,
-    siblings: 10,
-    boundaries: 10,
-  });
-
-  return (
-    <div className="flex flex-col gap-2">
-      <p>Active page: {activePage}</p>
-      <ul className="flex gap-2 items-center">
-        {range.map((page) => {
-          if (page === PaginationItemType.NEXT) {
-            return (
-              <li key={page} aria-label="next page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onNext}
-                >
-                  <ChevronIcon className="rotate-180" />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.PREV) {
-            return (
-              <li key={page} aria-label="previous page" className="w-4 h-4">
-                <button
-                  className="w-full h-full bg-default-200 rounded-full"
-                  onClick={onPrevious}
-                >
-                  <ChevronIcon />
-                </button>
-              </li>
-            );
-          }
-
-          if (page === PaginationItemType.DOTS) {
-            return (
-              <li key={page} className="w-4 h-4">
-                ...
-              </li>
-            );
-          }
-
-          return (
-            <li key={page} aria-label={\`page \${page}\`} className="w-4 h-4">
-              <button
-                className={cn(
-                  "w-full h-full bg-default-300 rounded-full",
-                  activePage === page && "bg-secondary"
-                )}
-                onClick={() => setPage(page)}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}`;
+import App from "./custom-impl.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronIcon.jsx": ChevronIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/pagination/custom-items.raw.jsx b/apps/docs/content/components/pagination/custom-items.raw.jsx
new file mode 100644
index 0000000000..d691f8eed1
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-items.raw.jsx
@@ -0,0 +1,88 @@
+import {Pagination, PaginationItemType} from "@nextui-org/react";
+
+export const ChevronIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const renderItem = ({ref, key, value, isActive, onNext, onPrevious, setPage, className}) => {
+    if (value === PaginationItemType.NEXT) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onNext}
+        >
+          <ChevronIcon className="rotate-180" />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.PREV) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onPrevious}
+        >
+          <ChevronIcon />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.DOTS) {
+      return (
+        <button key={key} className={className}>
+          ...
+        </button>
+      );
+    }
+
+    // cursor is the default item
+    return (
+      <button
+        key={key}
+        ref={ref}
+        className={cn(
+          className,
+          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+        )}
+        onClick={() => setPage(value)}
+      >
+        {value}
+      </button>
+    );
+  };
+
+  return (
+    <Pagination
+      disableCursorAnimation
+      showControls
+      className="gap-2"
+      initialPage={1}
+      radius="full"
+      renderItem={renderItem}
+      total={10}
+      variant="light"
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-items.raw.tsx b/apps/docs/content/components/pagination/custom-items.raw.tsx
new file mode 100644
index 0000000000..9756766c9e
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-items.raw.tsx
@@ -0,0 +1,100 @@
+import React, {SVGProps} from "react";
+import {cn, Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react";
+
+type IconSvgProps = SVGProps<SVGSVGElement>;
+
+export const ChevronIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M15.5 19l-7-7 7-7"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const renderItem = ({
+    ref,
+    key,
+    value,
+    isActive,
+    onNext,
+    onPrevious,
+    setPage,
+    className,
+  }: PaginationItemRenderProps) => {
+    if (value === PaginationItemType.NEXT) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onNext}
+        >
+          <ChevronIcon className="rotate-180" />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.PREV) {
+      return (
+        <button
+          key={key}
+          className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")}
+          onClick={onPrevious}
+        >
+          <ChevronIcon />
+        </button>
+      );
+    }
+
+    if (value === PaginationItemType.DOTS) {
+      return (
+        <button key={key} className={className}>
+          ...
+        </button>
+      );
+    }
+
+    // cursor is the default item
+    return (
+      <button
+        key={key}
+        ref={ref}
+        className={cn(
+          className,
+          isActive && "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
+        )}
+        onClick={() => setPage(value)}
+      >
+        {value}
+      </button>
+    );
+  };
+
+  return (
+    <Pagination
+      disableCursorAnimation
+      showControls
+      className="gap-2"
+      initialPage={1}
+      radius="full"
+      renderItem={renderItem}
+      total={10}
+      variant="light"
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-items.ts b/apps/docs/content/components/pagination/custom-items.ts
index 3e94ff8c6b..708622f442 100644
--- a/apps/docs/content/components/pagination/custom-items.ts
+++ b/apps/docs/content/components/pagination/custom-items.ts
@@ -1,189 +1,12 @@
-const ChevronIcon = `export const ChevronIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const ChevronIconTs = `import {SVGProps} from "react";
-
-type IconSvgProps = SVGProps<SVGSVGElement>;
-
-export const ChevronIcon = (props: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M15.5 19l-7-7 7-7"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-  </svg>
-);
-`;
-
-const AppTs = `import {Pagination, PaginationItemType, PaginationItemRenderProps} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const renderItem = ({
-    ref,
-    key,
-    value,
-    isActive,
-    onNext,
-    onPrevious,
-    setPage,
-    className,
-  }: PaginationItemRenderProps) => {
-    if (value === PaginationItemType.NEXT) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onNext}>
-          <ChevronIcon className="rotate-180" />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.PREV) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onPrevious}>
-          <ChevronIcon />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.DOTS) {
-      return <button key={key} className={className}>...</button>;
-    }
-
-    // cursor is the default item
-    return (
-      <button
-        ref={ref}
-        key={key}
-        className={cn(
-          className,
-          isActive &&
-            "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
-        )}
-        onClick={() => setPage(value)}
-      >
-        {value}
-      </button>
-    );
-  };
-
-  return (
-    <Pagination
-      disableCursorAnimation
-      showControls
-      total={10}
-      initialPage={1}
-      className="gap-2"
-      radius="full"
-      renderItem={renderItem}
-      variant="light"
-    />
-  );
-}`;
-
-const App = `import {Pagination, PaginationItemType} from "@nextui-org/react";
-import {ChevronIcon} from "./ChevronIcon";
-
-export default function App() {
-  const renderItem = ({
-    ref,
-    key,
-    value,
-    isActive,
-    onNext,
-    onPrevious,
-    setPage,
-    className,
-  }) => {
-    if (value === PaginationItemType.NEXT) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onNext}>
-          <ChevronIcon className="rotate-180" />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.PREV) {
-      return (
-        <button key={key} className={cn(className, "bg-default-200/50 min-w-8 w-8 h-8")} onClick={onPrevious}>
-          <ChevronIcon />
-        </button>
-      );
-    }
-
-    if (value === PaginationItemType.DOTS) {
-      return <button key={key} className={className}>...</button>;
-    }
-
-    // cursor is the default item
-    return (
-      <button
-        key={key}
-        ref={ref}
-        className={cn(
-          className,
-          isActive &&
-          "text-white bg-gradient-to-br from-indigo-500 to-pink-500 font-bold",
-        )}
-        onClick={() => setPage(value)}
-      >
-        {value}
-      </button>
-    );
-  };
-
-  return (
-    <Pagination
-      disableCursorAnimation
-      showControls
-      total={10}
-      initialPage={1}
-      className="gap-2"
-      radius="full"
-      renderItem={renderItem}
-      variant="light"
-    />
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
+import AppTs from "./custom-items.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronIcon.jsx": ChevronIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/ChevronIcon.tsx": ChevronIconTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/pagination/custom-styles.raw.jsx b/apps/docs/content/components/pagination/custom-styles.raw.jsx
new file mode 100644
index 0000000000..2438a31fe2
--- /dev/null
+++ b/apps/docs/content/components/pagination/custom-styles.raw.jsx
@@ -0,0 +1,15 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Pagination
+      classNames={{
+        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
+        item: "w-8 h-8 text-small rounded-none bg-transparent",
+        cursor:
+          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
+      }}
+      total={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/pagination/custom-styles.ts b/apps/docs/content/components/pagination/custom-styles.ts
index 099f57350e..da3ea9093a 100644
--- a/apps/docs/content/components/pagination/custom-styles.ts
+++ b/apps/docs/content/components/pagination/custom-styles.ts
@@ -1,18 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination
-      total={10}
-      classNames={{
-        wrapper: "gap-0 overflow-visible h-8 rounded border border-divider",
-        item: "w-8 h-8 text-small rounded-none bg-transparent",
-        cursor:
-          "bg-gradient-to-b shadow-lg from-default-500 to-default-800 dark:from-default-300 dark:to-default-100 text-white font-bold",
-      }}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/disabled.raw.jsx b/apps/docs/content/components/pagination/disabled.raw.jsx
new file mode 100644
index 0000000000..0052b38f31
--- /dev/null
+++ b/apps/docs/content/components/pagination/disabled.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination isDisabled initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/disabled.ts b/apps/docs/content/components/pagination/disabled.ts
index 8e541c5ade..1a215cc91f 100644
--- a/apps/docs/content/components/pagination/disabled.ts
+++ b/apps/docs/content/components/pagination/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination isDisabled total={10} initialPage={1} />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/initial-page.raw.jsx b/apps/docs/content/components/pagination/initial-page.raw.jsx
new file mode 100644
index 0000000000..3c255ae348
--- /dev/null
+++ b/apps/docs/content/components/pagination/initial-page.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination color="warning" initialPage={3} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/initial-page.ts b/apps/docs/content/components/pagination/initial-page.ts
index 0d0dd5277c..7a868386df 100644
--- a/apps/docs/content/components/pagination/initial-page.ts
+++ b/apps/docs/content/components/pagination/initial-page.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination color="warning" initialPage={3} total={10} />
-  );
-}`;
+import App from "./initial-page.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/loop.raw.jsx b/apps/docs/content/components/pagination/loop.raw.jsx
new file mode 100644
index 0000000000..38d37be5d6
--- /dev/null
+++ b/apps/docs/content/components/pagination/loop.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination loop showControls color="success" initialPage={1} total={5} />;
+}
diff --git a/apps/docs/content/components/pagination/loop.ts b/apps/docs/content/components/pagination/loop.ts
index a0b3d320f7..75721e3bc3 100644
--- a/apps/docs/content/components/pagination/loop.ts
+++ b/apps/docs/content/components/pagination/loop.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination loop showControls color="success" total={5} initialPage={1} />
-  );
-}`;
+import App from "./loop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/radius.raw.jsx b/apps/docs/content/components/pagination/radius.raw.jsx
new file mode 100644
index 0000000000..583afb18a4
--- /dev/null
+++ b/apps/docs/content/components/pagination/radius.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "xl", "lg", "md", "sm", "base", "none"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {radius.map((r) => (
+        <Pagination key={r} initialPage={1} radius={r} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/radius.ts b/apps/docs/content/components/pagination/radius.ts
index 6cc77848ac..7b78db1ce0 100644
--- a/apps/docs/content/components/pagination/radius.ts
+++ b/apps/docs/content/components/pagination/radius.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const radius = ["full", "xl", "lg", "md", "sm", "base", "none"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {radius.map((r) => (
-        <Pagination key={r} total={10} initialPage={1} radius={r} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/shadow.raw.jsx b/apps/docs/content/components/pagination/shadow.raw.jsx
new file mode 100644
index 0000000000..a1e25bf9ca
--- /dev/null
+++ b/apps/docs/content/components/pagination/shadow.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination showShadow color="warning" initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/shadow.ts b/apps/docs/content/components/pagination/shadow.ts
index 12edcbb3e1..a18f8ca4bf 100644
--- a/apps/docs/content/components/pagination/shadow.ts
+++ b/apps/docs/content/components/pagination/shadow.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination showShadow color="warning" total={10} initialPage={1} />
-  );
-}`;
+import App from "./shadow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/siblings.raw.jsx b/apps/docs/content/components/pagination/siblings.raw.jsx
new file mode 100644
index 0000000000..711a37d3b9
--- /dev/null
+++ b/apps/docs/content/components/pagination/siblings.raw.jsx
@@ -0,0 +1,14 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-5">
+      <p>1 Sibling (default)</p>
+      <Pagination total={10} />
+      <p>2 Siblings</p>
+      <Pagination siblings={2} total={10} />
+      <p>3 Siblings</p>
+      <Pagination siblings={3} total={10} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/siblings.ts b/apps/docs/content/components/pagination/siblings.ts
index e54287d83a..af93036092 100644
--- a/apps/docs/content/components/pagination/siblings.ts
+++ b/apps/docs/content/components/pagination/siblings.ts
@@ -1,25 +1,4 @@
-const App = `import {Pagination, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-5">
-      <p>1 Sibling (default)</p>
-      <Pagination
-        total={10}
-      />
-      <p>2 Siblings</p>
-      <Pagination
-        total={10}
-        siblings={2}
-      />
-      <p>3 Siblings</p>
-      <Pagination
-        total={10}
-        siblings={3}
-      />
-    </div>
-  );
-}`;
+import App from "./siblings.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/sizes.raw.jsx b/apps/docs/content/components/pagination/sizes.raw.jsx
new file mode 100644
index 0000000000..a91ac73bcb
--- /dev/null
+++ b/apps/docs/content/components/pagination/sizes.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {sizes.map((size) => (
+        <Pagination key={size} initialPage={1} size={size} total={10} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/sizes.ts b/apps/docs/content/components/pagination/sizes.ts
index 0400dfff03..85a2f5b30b 100644
--- a/apps/docs/content/components/pagination/sizes.ts
+++ b/apps/docs/content/components/pagination/sizes.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const sizes = ["sm", "md", "lg"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {sizes.map((size) => (
-        <Pagination key={size} total={10} initialPage={1} size={size} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/usage.raw.jsx b/apps/docs/content/components/pagination/usage.raw.jsx
new file mode 100644
index 0000000000..7bc069b20d
--- /dev/null
+++ b/apps/docs/content/components/pagination/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  return <Pagination initialPage={1} total={10} />;
+}
diff --git a/apps/docs/content/components/pagination/usage.ts b/apps/docs/content/components/pagination/usage.ts
index 7b042283a0..1118304c37 100644
--- a/apps/docs/content/components/pagination/usage.ts
+++ b/apps/docs/content/components/pagination/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Pagination total={10} initialPage={1} />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/pagination/variants.raw.jsx b/apps/docs/content/components/pagination/variants.raw.jsx
new file mode 100644
index 0000000000..5de44baff0
--- /dev/null
+++ b/apps/docs/content/components/pagination/variants.raw.jsx
@@ -0,0 +1,13 @@
+import {Pagination} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "bordered", "faded", "light"];
+
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      {variants.map((variant) => (
+        <Pagination key={variant} initialPage={1} total={10} variant={variant} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/pagination/variants.ts b/apps/docs/content/components/pagination/variants.ts
index 7e049b1eb9..ddea95fb2e 100644
--- a/apps/docs/content/components/pagination/variants.ts
+++ b/apps/docs/content/components/pagination/variants.ts
@@ -1,17 +1,4 @@
-const App = `import {Pagination} from "@nextui-org/react";
-
-export default function App() {
-
-  const variants = ["flat", "bordered", "faded", "light"]
-
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      {variants.map((variant) => (
-        <Pagination key={variant} total={10} initialPage={1} variant={variant} />
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/arrow.raw.jsx b/apps/docs/content/components/popover/arrow.raw.jsx
new file mode 100644
index 0000000000..61a1799eba
--- /dev/null
+++ b/apps/docs/content/components/popover/arrow.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="bottom" showArrow={true}>
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/arrow.ts b/apps/docs/content/components/popover/arrow.ts
index dcbd90869d..d04dbb0e9d 100644
--- a/apps/docs/content/components/popover/arrow.ts
+++ b/apps/docs/content/components/popover/arrow.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" showArrow={true}>
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/backdrop.raw.jsx b/apps/docs/content/components/popover/backdrop.raw.jsx
new file mode 100644
index 0000000000..0c43b090d7
--- /dev/null
+++ b/apps/docs/content/components/popover/backdrop.raw.jsx
@@ -0,0 +1,38 @@
+import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  const backdrops = ["opaque", "blur", "transparent"];
+
+  const content = (
+    <PopoverContent className="w-[240px]">
+      {(titleProps) => (
+        <div className="px-1 py-2 w-full">
+          <p className="text-small font-bold text-foreground" {...titleProps}>
+            Dimensions
+          </p>
+          <div className="mt-2 flex flex-col gap-2 w-full">
+            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
+            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+          </div>
+        </div>
+      )}
+    </PopoverContent>
+  );
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {backdrops.map((backdrop) => (
+        <Popover key={backdrop} showArrow backdrop={backdrop} offset={10} placement="bottom">
+          <PopoverTrigger>
+            <Button className="capitalize" color="warning" variant="flat">
+              {backdrop}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/backdrop.ts b/apps/docs/content/components/popover/backdrop.ts
index be28d365d7..53412b0f5b 100644
--- a/apps/docs/content/components/popover/backdrop.ts
+++ b/apps/docs/content/components/popover/backdrop.ts
@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
-
-export default function App() {
-
-  const backdrops = ["opaque", "blur", "transparent"];
-
-  const content = (
-    <PopoverContent className="w-[240px]">
-      {(titleProps) => (
-        <div className="px-1 py-2 w-full">
-          <p className="text-small font-bold text-foreground" {...titleProps}>
-            Dimensions
-          </p>
-          <div className="mt-2 flex flex-col gap-2 w-full">
-            <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
-            <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
-            <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
-            <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
-          </div>
-        </div>
-      )}
-    </PopoverContent>
-  )
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {backdrops.map((backdrop) => (
-        <Popover
-          key={backdrop}
-          showArrow
-          offset={10}
-          placement="bottom"
-          backdrop={backdrop}
-        >
-          <PopoverTrigger>
-            <Button color="warning" variant="flat" className="capitalize">
-              {backdrop}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./backdrop.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/colors.raw.jsx b/apps/docs/content/components/popover/colors.raw.jsx
new file mode 100644
index 0000000000..5e255bdb66
--- /dev/null
+++ b/apps/docs/content/components/popover/colors.raw.jsx
@@ -0,0 +1,29 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <Popover key={color} color={color} placement="top">
+          <PopoverTrigger>
+            <Button className="capitalize" color={color}>
+              {color}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/colors.ts b/apps/docs/content/components/popover/colors.ts
index 4cff076495..d5bef810aa 100644
--- a/apps/docs/content/components/popover/colors.ts
+++ b/apps/docs/content/components/popover/colors.ts
@@ -1,40 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => (
-        <Popover key={color} placement="top" color={color}>
-          <PopoverTrigger>
-            <Button color={color} className="capitalize">
-              {color}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/controlled.raw.jsx b/apps/docs/content/components/popover/controlled.raw.jsx
new file mode 100644
index 0000000000..f246c33533
--- /dev/null
+++ b/apps/docs/content/components/popover/controlled.raw.jsx
@@ -0,0 +1,22 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <PopoverTrigger>
+          <Button>Open Popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <div className="px-1 py-2">
+            <div className="text-small font-bold">Popover Content</div>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        </PopoverContent>
+      </Popover>
+      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/controlled.ts b/apps/docs/content/components/popover/controlled.ts
index c0dd3736db..2c3f0cacb4 100644
--- a/apps/docs/content/components/popover/controlled.ts
+++ b/apps/docs/content/components/popover/controlled.ts
@@ -1,25 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
-        <PopoverTrigger>
-          <Button>Open Popover</Button>
-        </PopoverTrigger>
-        <PopoverContent>
-          <div className="px-1 py-2">
-            <div className="text-small font-bold">Popover Content</div>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        </PopoverContent>
-      </Popover>
-      <p className="text-small text-default-400">Open: {isOpen ? "true" : "false"}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/custom-motion.raw.jsx b/apps/docs/content/components/popover/custom-motion.raw.jsx
new file mode 100644
index 0000000000..3629b32d89
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-motion.raw.jsx
@@ -0,0 +1,45 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      motionProps={{
+        variants: {
+          enter: {
+            y: 0,
+            opacity: 1,
+            duration: 0.1,
+            transition: {
+              opacity: {
+                duration: 0.15,
+              },
+            },
+          },
+          exit: {
+            y: "10%",
+            opacity: 0,
+            duration: 0,
+            transition: {
+              opacity: {
+                duration: 0.1,
+              },
+            },
+          },
+        },
+      }}
+      offset={10}
+      placement="bottom"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-motion.ts b/apps/docs/content/components/popover/custom-motion.ts
index 90332f7f03..389f462ddd 100644
--- a/apps/docs/content/components/popover/custom-motion.ts
+++ b/apps/docs/content/components/popover/custom-motion.ts
@@ -1,48 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover
-      showArrow
-      offset={10}
-      placement="bottom"
-      motionProps={{
-        variants: {
-          enter: {
-            y: 0,
-            opacity: 1,
-            duration: 0.1,
-            transition: {
-              opacity: {
-                duration: 0.15,
-              },
-            },
-          },
-          exit: {
-            y: "10%",
-            opacity: 0,
-            duration: 0,
-            transition: {
-              opacity: {
-                duration: 0.1,
-              },
-            },
-          },
-        },
-      }}
-    >
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/custom-styles.raw.jsx b/apps/docs/content/components/popover/custom-styles.raw.jsx
new file mode 100644
index 0000000000..4c34e65d93
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-styles.raw.jsx
@@ -0,0 +1,36 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover
+      showArrow
+      backdrop="opaque"
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-default-200",
+        ],
+        content: [
+          "py-3 px-4 border border-default-200",
+          "bg-gradient-to-br from-white to-default-300",
+          "dark:from-default-100 dark:to-default-50",
+        ],
+      }}
+      placement="right"
+    >
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-small font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-styles.ts b/apps/docs/content/components/popover/custom-styles.ts
index 42684474c5..da3ea9093a 100644
--- a/apps/docs/content/components/popover/custom-styles.ts
+++ b/apps/docs/content/components/popover/custom-styles.ts
@@ -1,39 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover 
-      showArrow
-      backdrop="opaque"
-      placement="right"
-      classNames={{
-        base: [  
-          // arrow color
-          "before:bg-default-200"
-        ],
-        content: [
-          "py-3 px-4 border border-default-200",
-          "bg-gradient-to-br from-white to-default-300",
-          "dark:from-default-100 dark:to-default-50",
-        ],
-      }}
-    >
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        {(titleProps) => (
-          <div className="px-1 py-2">
-            <h3 className="text-small font-bold" {...titleProps}>
-              Popover Content
-            </h3>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/custom-trigger.raw.jsx b/apps/docs/content/components/popover/custom-trigger.raw.jsx
new file mode 100644
index 0000000000..bca3caa644
--- /dev/null
+++ b/apps/docs/content/components/popover/custom-trigger.raw.jsx
@@ -0,0 +1,85 @@
+import {
+  Avatar,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  Button,
+  User,
+} from "@nextui-org/react";
+
+export const UserTwitterCard = () => {
+  const [isFollowed, setIsFollowed] = React.useState(false);
+
+  return (
+    <Card className="max-w-[300px] border-none bg-transparent" shadow="none">
+      <CardHeader className="justify-between">
+        <div className="flex gap-3">
+          <Avatar
+            isBordered
+            radius="full"
+            size="md"
+            src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+          />
+          <div className="flex flex-col items-start justify-center">
+            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
+            <h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
+          </div>
+        </div>
+        <Button
+          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
+          color="primary"
+          radius="full"
+          size="sm"
+          variant={isFollowed ? "bordered" : "solid"}
+          onPress={() => setIsFollowed(!isFollowed)}
+        >
+          {isFollowed ? "Unfollow" : "Follow"}
+        </Button>
+      </CardHeader>
+      <CardBody className="px-3 py-0">
+        <p className="text-small pl-px text-default-500">
+          Full-stack developer, @getnextui lover she/her
+          <span aria-label="confetti" role="img">
+            🎉
+          </span>
+        </p>
+      </CardBody>
+      <CardFooter className="gap-3">
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-600 text-small">4</p>
+          <p className=" text-default-500 text-small">Following</p>
+        </div>
+        <div className="flex gap-1">
+          <p className="font-semibold text-default-600 text-small">97.1K</p>
+          <p className="text-default-500 text-small">Followers</p>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default function App() {
+  return (
+    <Popover showArrow placement="bottom">
+      <PopoverTrigger>
+        <User
+          as="button"
+          avatarProps={{
+            src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+          }}
+          className="transition-transform"
+          description="Product Designer"
+          name="Zoe Lang"
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-1">
+        <UserTwitterCard />
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/custom-trigger.ts b/apps/docs/content/components/popover/custom-trigger.ts
index 48d95eac20..dcc6b44a07 100644
--- a/apps/docs/content/components/popover/custom-trigger.ts
+++ b/apps/docs/content/components/popover/custom-trigger.ts
@@ -1,78 +1,7 @@
-const UserTwitterCard = `import { Avatar, Button, Card, CardBody, CardFooter, CardHeader } from "@nextui-org/react";
-
-export const UserTwitterCard = () => {
-  const [isFollowed, setIsFollowed] = React.useState(false);
-
-  return (
-    <Card shadow="none" className="max-w-[300px] border-none bg-transparent">
-      <CardHeader className="justify-between">
-        <div className="flex gap-3">
-          <Avatar isBordered radius="full" size="md" src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
-          <div className="flex flex-col items-start justify-center">
-            <h4 className="text-small font-semibold leading-none text-default-600">Zoey Lang</h4>
-            <h5 className="text-small tracking-tight text-default-500">@zoeylang</h5>
-          </div>
-        </div>
-        <Button
-          className={isFollowed ? "bg-transparent text-foreground border-default-200" : ""}
-          color="primary"
-          radius="full"
-          size="sm"
-          variant={isFollowed ? "bordered" : "solid"}
-          onPress={() => setIsFollowed(!isFollowed)}
-        >
-          {isFollowed ? "Unfollow" : "Follow"}
-        </Button>
-      </CardHeader>
-      <CardBody className="px-3 py-0">
-        <p className="text-small pl-px text-default-500">
-          Full-stack developer, @getnextui lover she/her
-          <span aria-label="confetti" role="img">
-            🎉
-          </span>
-        </p>
-      </CardBody>
-      <CardFooter className="gap-3">
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-600 text-small">4</p>
-          <p className=" text-default-500 text-small">Following</p>
-        </div>
-        <div className="flex gap-1">
-          <p className="font-semibold text-default-600 text-small">97.1K</p>
-          <p className="text-default-500 text-small">Followers</p>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};`;
-
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, User} from "@nextui-org/react";
-import {UserTwitterCard} from "./UserTwitterCard";
-
-export default function App() {
-  return (
-    <Popover showArrow placement="bottom">
-      <PopoverTrigger>
-        <User   
-          as="button"
-          name="Zoe Lang"
-          description="Product Designer"
-          className="transition-transform"
-          avatarProps={{
-            src: "https://i.pravatar.cc/150?u=a04258114e29026702d"
-          }}
-        />
-      </PopoverTrigger>
-      <PopoverContent className="p-1">
-        <UserTwitterCard />
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./custom-trigger.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/UserTwitterCard.jsx": UserTwitterCard,
 };
 
 export default {
diff --git a/apps/docs/content/components/popover/offset.raw.jsx b/apps/docs/content/components/popover/offset.raw.jsx
new file mode 100644
index 0000000000..2658e184d8
--- /dev/null
+++ b/apps/docs/content/components/popover/offset.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover showArrow offset={20} placement="bottom">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/offset.ts b/apps/docs/content/components/popover/offset.ts
index cdcd9328e0..2fb601047c 100644
--- a/apps/docs/content/components/popover/offset.ts
+++ b/apps/docs/content/components/popover/offset.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" offset={20} showArrow>
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/placements.raw.jsx b/apps/docs/content/components/popover/placements.raw.jsx
new file mode 100644
index 0000000000..57e62d3a96
--- /dev/null
+++ b/apps/docs/content/components/popover/placements.raw.jsx
@@ -0,0 +1,42 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const placements = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+    "right-start",
+    "right",
+    "right-end",
+    "left-start",
+    "left",
+    "left-end",
+  ];
+
+  return (
+    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
+      {placements.map((placement) => (
+        <Popover key={placement} color="secondary" placement={placement}>
+          <PopoverTrigger>
+            <Button className="capitalize" color="secondary" variant="flat">
+              {placement.replace("-", " ")}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/placements.ts b/apps/docs/content/components/popover/placements.ts
index 2ec2ca6021..dc67908b7e 100644
--- a/apps/docs/content/components/popover/placements.ts
+++ b/apps/docs/content/components/popover/placements.ts
@@ -1,45 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const placements = [
-    "top-start",
-    "top",
-    "top-end",
-    "bottom-start",
-    "bottom",
-    "bottom-end",
-    "right-start",
-    "right",
-    "right-end",
-    "left-start",
-    "left",
-    "left-end",
-  ];
-
-  return (
-    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
-      {placements.map((placement) => (
-        <Popover key={placement} placement={placement} color="secondary">
-          <PopoverTrigger>
-            <Button color="secondary" variant="flat" className="capitalize">
-              {placement.replace("-", " ")}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/title-props.raw.jsx b/apps/docs/content/components/popover/title-props.raw.jsx
new file mode 100644
index 0000000000..464e8f0730
--- /dev/null
+++ b/apps/docs/content/components/popover/title-props.raw.jsx
@@ -0,0 +1,21 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        {(titleProps) => (
+          <div className="px-1 py-2">
+            <h3 className="text-small font-bold" {...titleProps}>
+              Popover Content
+            </h3>
+            <div className="text-tiny">This is the popover content</div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/title-props.ts b/apps/docs/content/components/popover/title-props.ts
index 022087fe27..3c92a7ebef 100644
--- a/apps/docs/content/components/popover/title-props.ts
+++ b/apps/docs/content/components/popover/title-props.ts
@@ -1,24 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="right">
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        {(titleProps) => (
-          <div className="px-1 py-2">
-            <h3 className="text-small font-bold" {...titleProps}>
-              Popover Content
-            </h3>
-            <div className="text-tiny">This is the popover content</div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./title-props.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/usage.raw.jsx b/apps/docs/content/components/popover/usage.raw.jsx
new file mode 100644
index 0000000000..2d25bb18f5
--- /dev/null
+++ b/apps/docs/content/components/popover/usage.raw.jsx
@@ -0,0 +1,17 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover placement="right">
+      <PopoverTrigger>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Popover Content</div>
+          <div className="text-tiny">This is the popover content</div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/usage.ts b/apps/docs/content/components/popover/usage.ts
index 7f5a4a17eb..1118304c37 100644
--- a/apps/docs/content/components/popover/usage.ts
+++ b/apps/docs/content/components/popover/usage.ts
@@ -1,20 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="right">
-      <PopoverTrigger>
-        <Button>Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Popover Content</div>
-          <div className="text-tiny">This is the popover content</div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/variants.raw.jsx b/apps/docs/content/components/popover/variants.raw.jsx
new file mode 100644
index 0000000000..9b08823adf
--- /dev/null
+++ b/apps/docs/content/components/popover/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
+
+export default function App() {
+  const content = (
+    <PopoverContent>
+      <div className="px-1 py-2">
+        <div className="text-small font-bold">Popover Content</div>
+        <div className="text-tiny">This is the popover content</div>
+      </div>
+    </PopoverContent>
+  );
+
+  const variants = ["solid", "bordered", "flat", "faded", "shadow"];
+
+  return (
+    <div className="flex gap-2">
+      {variants.map((variant) => (
+        <Popover key={variant} placement="top" variant={variant}>
+          <PopoverTrigger>
+            <Button className="capitalize" variant={variant}>
+              {variant}
+            </Button>
+          </PopoverTrigger>
+          {content}
+        </Popover>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/popover/variants.ts b/apps/docs/content/components/popover/variants.ts
index ee608fd157..ddea95fb2e 100644
--- a/apps/docs/content/components/popover/variants.ts
+++ b/apps/docs/content/components/popover/variants.ts
@@ -1,32 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button} from "@nextui-org/react";
-
-export default function App() {
-  const content = (
-    <PopoverContent>
-      <div className="px-1 py-2">
-        <div className="text-small font-bold">Popover Content</div>
-        <div className="text-tiny">This is the popover content</div>
-      </div>
-    </PopoverContent>
-  );
-
-  const variants = ["solid", "bordered", "flat", "faded", "shadow"];
-
-  return (
-    <div className="flex gap-2">
-      {variants.map((variant) => (
-        <Popover key={variant} placement="top" variant={variant}>
-          <PopoverTrigger>
-            <Button variant={variant} className="capitalize">
-              {variant}
-            </Button>
-          </PopoverTrigger>
-          {content}
-        </Popover>
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/popover/with-form.raw.jsx b/apps/docs/content/components/popover/with-form.raw.jsx
new file mode 100644
index 0000000000..3b9443ad93
--- /dev/null
+++ b/apps/docs/content/components/popover/with-form.raw.jsx
@@ -0,0 +1,26 @@
+import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Popover showArrow offset={10} placement="bottom">
+      <PopoverTrigger>
+        <Button color="primary">Customize</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[240px]">
+        {(titleProps) => (
+          <div className="px-1 py-2 w-full">
+            <p className="text-small font-bold text-foreground" {...titleProps}>
+              Dimensions
+            </p>
+            <div className="mt-2 flex flex-col gap-2 w-full">
+              <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
+              <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
+              <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
+              <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
+            </div>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/docs/content/components/popover/with-form.ts b/apps/docs/content/components/popover/with-form.ts
index 59e869c420..c9a0cff490 100644
--- a/apps/docs/content/components/popover/with-form.ts
+++ b/apps/docs/content/components/popover/with-form.ts
@@ -1,29 +1,4 @@
-const App = `import {Popover, PopoverTrigger, PopoverContent, Button, Input} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Popover placement="bottom" showArrow offset={10}>
-      <PopoverTrigger>
-        <Button color="primary">Customize</Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[240px]">
-        {(titleProps) => (
-          <div className="px-1 py-2 w-full">
-            <p className="text-small font-bold text-foreground" {...titleProps}>
-              Dimensions
-            </p>
-            <div className="mt-2 flex flex-col gap-2 w-full">
-              <Input defaultValue="100%" label="Width" size="sm" variant="bordered" />
-              <Input defaultValue="300px" label="Max. width" size="sm" variant="bordered" />
-              <Input defaultValue="24px" label="Height" size="sm" variant="bordered" />
-              <Input defaultValue="30px" label="Max. height" size="sm" variant="bordered" />
-            </div>
-          </div>
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}`;
+import App from "./with-form.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/colors.raw.jsx b/apps/docs/content/components/progress/colors.raw.jsx
new file mode 100644
index 0000000000..fe106ebe2b
--- /dev/null
+++ b/apps/docs/content/components/progress/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Progress aria-label="Loading..." color="default" value={70} />
+      <Progress aria-label="Loading..." color="primary" value={70} />
+      <Progress aria-label="Loading..." color="secondary" value={70} />
+      <Progress aria-label="Loading..." color="success" value={70} />
+      <Progress aria-label="Loading..." color="warning" value={70} />
+      <Progress aria-label="Loading..." color="danger" value={70} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/progress/colors.ts b/apps/docs/content/components/progress/colors.ts
index 50c389a595..d5bef810aa 100644
--- a/apps/docs/content/components/progress/colors.ts
+++ b/apps/docs/content/components/progress/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Progress color="default" aria-label="Loading..." value={70} />
-      <Progress color="primary" aria-label="Loading..." value={70} />
-      <Progress color="secondary" aria-label="Loading..." value={70} />
-      <Progress color="success" aria-label="Loading..." value={70} />
-      <Progress color="warning" aria-label="Loading..." value={70} />
-      <Progress color="danger" aria-label="Loading..." value={70} />
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/custom-styles.raw.jsx b/apps/docs/content/components/progress/custom-styles.raw.jsx
new file mode 100644
index 0000000000..e1ded1a4b1
--- /dev/null
+++ b/apps/docs/content/components/progress/custom-styles.raw.jsx
@@ -0,0 +1,20 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress
+      classNames={{
+        base: "max-w-md",
+        track: "drop-shadow-md border border-default",
+        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
+        label: "tracking-wider font-medium text-default-600",
+        value: "text-foreground/60",
+      }}
+      label="Lose weight"
+      radius="sm"
+      showValueLabel={true}
+      size="sm"
+      value={65}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/custom-styles.ts b/apps/docs/content/components/progress/custom-styles.ts
index 84f5061b1c..da3ea9093a 100644
--- a/apps/docs/content/components/progress/custom-styles.ts
+++ b/apps/docs/content/components/progress/custom-styles.ts
@@ -1,23 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      size="sm"
-      radius="sm"
-      classNames={{
-        base: "max-w-md",
-        track: "drop-shadow-md border border-default",
-        indicator: "bg-gradient-to-r from-pink-500 to-yellow-500",
-        label: "tracking-wider font-medium text-default-600",
-        value: "text-foreground/60",
-      }}
-      label="Lose weight"
-      value={65}
-      showValueLabel={true}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/indeterminate.raw.jsx b/apps/docs/content/components/progress/indeterminate.raw.jsx
new file mode 100644
index 0000000000..df0f7bd1e1
--- /dev/null
+++ b/apps/docs/content/components/progress/indeterminate.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress isIndeterminate aria-label="Loading..." className="max-w-md" size="sm" />;
+}
diff --git a/apps/docs/content/components/progress/indeterminate.ts b/apps/docs/content/components/progress/indeterminate.ts
index ea51f815f9..7094e42950 100644
--- a/apps/docs/content/components/progress/indeterminate.ts
+++ b/apps/docs/content/components/progress/indeterminate.ts
@@ -1,15 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      size="sm"
-      isIndeterminate
-      aria-label="Loading..."
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./indeterminate.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/label.raw.jsx b/apps/docs/content/components/progress/label.raw.jsx
new file mode 100644
index 0000000000..f623f9081f
--- /dev/null
+++ b/apps/docs/content/components/progress/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress className="max-w-md" label="Loading..." value={55} />;
+}
diff --git a/apps/docs/content/components/progress/label.ts b/apps/docs/content/components/progress/label.ts
index ec0021c73f..254b95afb8 100644
--- a/apps/docs/content/components/progress/label.ts
+++ b/apps/docs/content/components/progress/label.ts
@@ -1,10 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress label="Loading..." value={55}  className="max-w-md" />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/sizes.raw.jsx b/apps/docs/content/components/progress/sizes.raw.jsx
new file mode 100644
index 0000000000..dae25bd97b
--- /dev/null
+++ b/apps/docs/content/components/progress/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Progress aria-label="Loading..." size="sm" value={30} />
+      <Progress aria-label="Loading..." size="md" value={40} />
+      <Progress aria-label="Loading..." size="lg" value={50} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/progress/sizes.ts b/apps/docs/content/components/progress/sizes.ts
index a521327385..85a2f5b30b 100644
--- a/apps/docs/content/components/progress/sizes.ts
+++ b/apps/docs/content/components/progress/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Progress size="sm" aria-label="Loading..." value={30} />
-      <Progress size="md" aria-label="Loading..." value={40} />
-      <Progress size="lg" aria-label="Loading..." value={50} />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/striped.raw.jsx b/apps/docs/content/components/progress/striped.raw.jsx
new file mode 100644
index 0000000000..f8c21c29e4
--- /dev/null
+++ b/apps/docs/content/components/progress/striped.raw.jsx
@@ -0,0 +1,7 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress isStriped aria-label="Loading..." className="max-w-md" color="secondary" value={60} />
+  );
+}
diff --git a/apps/docs/content/components/progress/striped.ts b/apps/docs/content/components/progress/striped.ts
index b5f348fb4e..efcbdde82e 100644
--- a/apps/docs/content/components/progress/striped.ts
+++ b/apps/docs/content/components/progress/striped.ts
@@ -1,17 +1,4 @@
-const App = `import { Progress } from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      isStriped
-      aria-label="Loading..."
-      color="secondary"
-      value={60}
-      className="max-w-md"
-    />
-  );
-}
-`;
+import App from "./striped.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/usage.raw.jsx b/apps/docs/content/components/progress/usage.raw.jsx
new file mode 100644
index 0000000000..d1e31aff49
--- /dev/null
+++ b/apps/docs/content/components/progress/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return <Progress aria-label="Loading..." className="max-w-md" value={60} />;
+}
diff --git a/apps/docs/content/components/progress/usage.ts b/apps/docs/content/components/progress/usage.ts
index 61bc662eb4..1118304c37 100644
--- a/apps/docs/content/components/progress/usage.ts
+++ b/apps/docs/content/components/progress/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress aria-label="Loading..." value={60} className="max-w-md"/>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/value-formatting.raw.jsx b/apps/docs/content/components/progress/value-formatting.raw.jsx
new file mode 100644
index 0000000000..f6defdafcd
--- /dev/null
+++ b/apps/docs/content/components/progress/value-formatting.raw.jsx
@@ -0,0 +1,16 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Progress
+      className="max-w-md"
+      color="warning"
+      formatOptions={{style: "currency", currency: "ARS"}}
+      label="Monthly expenses"
+      maxValue={10000}
+      showValueLabel={true}
+      size="sm"
+      value={4000}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/value-formatting.ts b/apps/docs/content/components/progress/value-formatting.ts
index d31dc42a99..0cd558d45d 100644
--- a/apps/docs/content/components/progress/value-formatting.ts
+++ b/apps/docs/content/components/progress/value-formatting.ts
@@ -1,19 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Progress
-      label="Monthly expenses"
-      size="sm"
-      value={4000}
-      maxValue={10000}
-      color="warning"
-      formatOptions={{style: "currency", currency: "ARS"}}
-      showValueLabel={true}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/progress/value.raw.jsx b/apps/docs/content/components/progress/value.raw.jsx
new file mode 100644
index 0000000000..2700ccda53
--- /dev/null
+++ b/apps/docs/content/components/progress/value.raw.jsx
@@ -0,0 +1,24 @@
+import {Progress} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setValue((v) => (v >= 100 ? 0 : v + 10));
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Progress
+      aria-label="Downloading..."
+      className="max-w-md"
+      color="success"
+      showValueLabel={true}
+      size="md"
+      value={value}
+    />
+  );
+}
diff --git a/apps/docs/content/components/progress/value.ts b/apps/docs/content/components/progress/value.ts
index 8b87769cbf..e2de0e9024 100644
--- a/apps/docs/content/components/progress/value.ts
+++ b/apps/docs/content/components/progress/value.ts
@@ -1,27 +1,4 @@
-const App = `import {Progress} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(0);
-
-  React.useEffect(() => {
-    const interval = setInterval(() => {
-      setValue((v) => (v >= 100 ? 0 : v + 10));
-    }, 500);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Progress
-      aria-label="Downloading..."
-      size="md"
-      value={value}
-      color="success"
-      showValueLabel={true}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/controlled.raw.jsx b/apps/docs/content/components/radio-group/controlled.raw.jsx
new file mode 100644
index 0000000000..f55d1149fe
--- /dev/null
+++ b/apps/docs/content/components/radio-group/controlled.raw.jsx
@@ -0,0 +1,18 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("london");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <RadioGroup label="Select your favorite city" value={selected} onValueChange={setSelected}>
+        <Radio value="buenos-aires">Buenos Aires</Radio>
+        <Radio value="sydney">Sydney</Radio>
+        <Radio value="san-francisco">San Francisco</Radio>
+        <Radio value="london">London</Radio>
+        <Radio value="tokyo">Tokyo</Radio>
+      </RadioGroup>
+      <p className="text-default-500 text-small">Selected: {selected}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/controlled.ts b/apps/docs/content/components/radio-group/controlled.ts
index dcfc6298c1..2c3f0cacb4 100644
--- a/apps/docs/content/components/radio-group/controlled.ts
+++ b/apps/docs/content/components/radio-group/controlled.ts
@@ -1,25 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("london");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <RadioGroup
-        label="Select your favorite city"
-        value={selected}
-        onValueChange={setSelected}
-      >
-        <Radio value="buenos-aires">Buenos Aires</Radio>
-        <Radio value="sydney">Sydney</Radio>
-        <Radio value="san-francisco">San Francisco</Radio>
-        <Radio value="london">London</Radio>
-        <Radio value="tokyo">Tokyo</Radio>
-      </RadioGroup>
-      <p className="text-default-500 text-small">Selected: {selected}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.jsx b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
new file mode 100644
index 0000000000..a4676eff43
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
@@ -0,0 +1,55 @@
+import {RadioGroup, useRadio, VisuallyHidden, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props) => {
+  const {
+    Component,
+    children,
+    description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
+        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {description && (
+          <span className="text-small text-foreground opacity-70">{description}</span>
+        )}
+      </div>
+    </Component>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.tsx b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
new file mode 100644
index 0000000000..ca96dac02e
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import {RadioGroup, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props: RadioProps) => {
+  const {
+    Component,
+    children,
+    description,
+    getBaseProps,
+    getWrapperProps,
+    getInputProps,
+    getLabelProps,
+    getLabelWrapperProps,
+    getControlProps,
+  } = useRadio(props);
+
+  return (
+    <Component
+      {...getBaseProps()}
+      className={cn(
+        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
+        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+        "data-[selected=true]:border-primary",
+      )}
+    >
+      <VisuallyHidden>
+        <input {...getInputProps()} />
+      </VisuallyHidden>
+      <span {...getWrapperProps()}>
+        <span {...getControlProps()} />
+      </span>
+      <div {...getLabelWrapperProps()}>
+        {children && <span {...getLabelProps()}>{children}</span>}
+        {description && (
+          <span className="text-small text-foreground opacity-70">{description}</span>
+        )}
+      </div>
+    </Component>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-impl.ts b/apps/docs/content/components/radio-group/custom-impl.ts
index f2c072f1d3..ef0d8ef531 100644
--- a/apps/docs/content/components/radio-group/custom-impl.ts
+++ b/apps/docs/content/components/radio-group/custom-impl.ts
@@ -1,122 +1,5 @@
-const App = `import {RadioGroup, Radio, useRadio, VisuallyHidden, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props) => {
-  const {
-    Component,
-    children,
-    isSelected,
-    description,
-    getBaseProps,
-    getWrapperProps,
-    getInputProps,
-    getLabelProps,
-    getLabelWrapperProps,
-    getControlProps,
-  } = useRadio(props);
-
-  return (
-    <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <span {...getWrapperProps()}>
-        <span {...getControlProps()} />
-      </span>
-      <div {...getLabelWrapperProps()}>
-        {children && <span {...getLabelProps()}>{children}</span>}
-        {description && (
-          <span className="text-small text-foreground opacity-70">{description}</span>
-        )}
-      </div>
-    </Component>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
-
-const AppTs = `import {RadioGroup, Radio, useRadio, VisuallyHidden, RadioProps, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props: RadioProps) => {
-  const {
-    Component,
-    children,
-    isSelected,
-    description,
-    getBaseProps,
-    getWrapperProps,
-    getInputProps,
-    getLabelProps,
-    getLabelWrapperProps,
-    getControlProps,
-  } = useRadio(props);
-
-  return (
-    <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
-    >
-      <VisuallyHidden>
-        <input {...getInputProps()} />
-      </VisuallyHidden>
-      <span {...getWrapperProps()}>
-        <span {...getControlProps()} />
-      </span>
-      <div {...getLabelWrapperProps()}>
-        {children && <span {...getLabelProps()}>{children}</span>}
-        {description && (
-          <span className="text-small text-foreground opacity-70">{description}</span>
-        )}
-      </div>
-    </Component>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/custom-styles.raw.jsx b/apps/docs/content/components/radio-group/custom-styles.raw.jsx
new file mode 100644
index 0000000000..c034ff8787
--- /dev/null
+++ b/apps/docs/content/components/radio-group/custom-styles.raw.jsx
@@ -0,0 +1,36 @@
+import {RadioGroup, Radio, cn} from "@nextui-org/react";
+
+export const CustomRadio = (props) => {
+  const {children, ...otherProps} = props;
+
+  return (
+    <Radio
+      {...otherProps}
+      classNames={{
+        base: cn(
+          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
+          "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+      }}
+    >
+      {children}
+    </Radio>
+  );
+};
+
+export default function App() {
+  return (
+    <RadioGroup description="Selected plan can be changed at any time." label="Plans">
+      <CustomRadio description="Up to 20 items" value="free">
+        Free
+      </CustomRadio>
+      <CustomRadio description="Unlimited items. $10 per month." value="pro">
+        Pro
+      </CustomRadio>
+      <CustomRadio description="24/7 support. Contact us for pricing." value="enterprise">
+        Enterprise
+      </CustomRadio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/custom-styles.ts b/apps/docs/content/components/radio-group/custom-styles.ts
index 32ecea0803..da3ea9093a 100644
--- a/apps/docs/content/components/radio-group/custom-styles.ts
+++ b/apps/docs/content/components/radio-group/custom-styles.ts
@@ -1,42 +1,4 @@
-const App = `import {RadioGroup, Radio, cn} from "@nextui-org/react";
-
-export const CustomRadio = (props) => {
-  const {children, ...otherProps} = props;
-
-  return (
-    <Radio
-      {...otherProps}
-      classNames={{
-        base: cn(
-          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
-          "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary"
-        ),
-      }}
-    >
-      {children}
-    </Radio>
-  );
-};
-
-export default function App() {
-  return (
-    <RadioGroup label="Plans" description="Selected plan can be changed at any time.">
-      <CustomRadio description="Up to 20 items" value="free">
-        Free
-      </CustomRadio>
-      <CustomRadio description="Unlimited items. $10 per month." value="pro">
-        Pro
-      </CustomRadio>
-      <CustomRadio
-        description="24/7 support. Contact us for pricing."
-        value="enterprise"
-      >
-        Enterprise
-      </CustomRadio>
-    </RadioGroup>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/default-value.raw.jsx b/apps/docs/content/components/radio-group/default-value.raw.jsx
new file mode 100644
index 0000000000..18df962e51
--- /dev/null
+++ b/apps/docs/content/components/radio-group/default-value.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup color="secondary" defaultValue="london" label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/default-value.ts b/apps/docs/content/components/radio-group/default-value.ts
index d10be982f0..6a12c77816 100644
--- a/apps/docs/content/components/radio-group/default-value.ts
+++ b/apps/docs/content/components/radio-group/default-value.ts
@@ -1,20 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      color="secondary"
-      defaultValue="london"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./default-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/disabled.raw.jsx b/apps/docs/content/components/radio-group/disabled.raw.jsx
new file mode 100644
index 0000000000..950e2d63d9
--- /dev/null
+++ b/apps/docs/content/components/radio-group/disabled.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup isDisabled label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/disabled.ts b/apps/docs/content/components/radio-group/disabled.ts
index b707ad15cf..1a215cc91f 100644
--- a/apps/docs/content/components/radio-group/disabled.ts
+++ b/apps/docs/content/components/radio-group/disabled.ts
@@ -1,19 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      isDisabled
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/horizontal.raw.jsx b/apps/docs/content/components/radio-group/horizontal.raw.jsx
new file mode 100644
index 0000000000..9e822ee189
--- /dev/null
+++ b/apps/docs/content/components/radio-group/horizontal.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup label="Select your favorite city" orientation="horizontal">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/horizontal.ts b/apps/docs/content/components/radio-group/horizontal.ts
index 543ceacbf2..60be4b4077 100644
--- a/apps/docs/content/components/radio-group/horizontal.ts
+++ b/apps/docs/content/components/radio-group/horizontal.ts
@@ -1,19 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      orientation="horizontal"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./horizontal.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/invalid.raw.jsx b/apps/docs/content/components/radio-group/invalid.raw.jsx
new file mode 100644
index 0000000000..6abf555c09
--- /dev/null
+++ b/apps/docs/content/components/radio-group/invalid.raw.jsx
@@ -0,0 +1,27 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("london");
+
+  const validOptions = ["buenos-aires", "san-francisco", "tokyo"];
+
+  const isInvalid = !validOptions.includes(selected);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <RadioGroup
+        isInvalid={isInvalid}
+        label="Select your favorite city"
+        value={selected}
+        onValueChange={setSelected}
+      >
+        <Radio value="buenos-aires">Buenos Aires</Radio>
+        <Radio value="sydney">Sydney</Radio>
+        <Radio value="san-francisco">San Francisco</Radio>
+        <Radio value="london">London</Radio>
+        <Radio value="tokyo">Tokyo</Radio>
+      </RadioGroup>
+      <p className="text-default-500 text-small">Selected: {selected}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/invalid.ts b/apps/docs/content/components/radio-group/invalid.ts
index 163615f5e9..a02a8fe9c1 100644
--- a/apps/docs/content/components/radio-group/invalid.ts
+++ b/apps/docs/content/components/radio-group/invalid.ts
@@ -1,30 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("london");
-
-  const validOptions = ["buenos-aires", "san-francisco", "tokyo"];
-
-  const isInvalid = !validOptions.includes(selected);
-
-  return (
-    <div className="flex flex-col gap-3">
-      <RadioGroup
-        label="Select your favorite city"
-        value={selected}
-        isInvalid={isInvalid}
-        onValueChange={setSelected}
-      >
-        <Radio value="buenos-aires">Buenos Aires</Radio>
-        <Radio value="sydney">Sydney</Radio>
-        <Radio value="san-francisco">San Francisco</Radio>
-        <Radio value="london">London</Radio>
-        <Radio value="tokyo">Tokyo</Radio>
-      </RadioGroup>
-      <p className="text-default-500 text-small">Selected: {selected}</p>
-    </div>
-  );
-}`;
+import App from "./invalid.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/usage.raw.jsx b/apps/docs/content/components/radio-group/usage.raw.jsx
new file mode 100644
index 0000000000..90f7d3bc87
--- /dev/null
+++ b/apps/docs/content/components/radio-group/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup label="Select your favorite city">
+      <Radio value="buenos-aires">Buenos Aires</Radio>
+      <Radio value="sydney">Sydney</Radio>
+      <Radio value="san-francisco">San Francisco</Radio>
+      <Radio value="london">London</Radio>
+      <Radio value="tokyo">Tokyo</Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/usage.ts b/apps/docs/content/components/radio-group/usage.ts
index 70292f055a..1118304c37 100644
--- a/apps/docs/content/components/radio-group/usage.ts
+++ b/apps/docs/content/components/radio-group/usage.ts
@@ -1,18 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-    >
-      <Radio value="buenos-aires">Buenos Aires</Radio>
-      <Radio value="sydney">Sydney</Radio>
-      <Radio value="san-francisco">San Francisco</Radio>
-      <Radio value="london">London</Radio>
-      <Radio value="tokyo">Tokyo</Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/radio-group/with-description.raw.jsx b/apps/docs/content/components/radio-group/with-description.raw.jsx
new file mode 100644
index 0000000000..5764f14cc2
--- /dev/null
+++ b/apps/docs/content/components/radio-group/with-description.raw.jsx
@@ -0,0 +1,20 @@
+import {RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <RadioGroup color="warning" label="Select your favorite city">
+      <Radio description="The capital of Argentina" value="buenos-aires">
+        Buenos Aires
+      </Radio>
+      <Radio description="The capital of Australia" value="canberra">
+        Canberra
+      </Radio>
+      <Radio description="The capital of England" value="london">
+        London
+      </Radio>
+      <Radio description="The capital of Japan" value="tokyo">
+        Tokyo
+      </Radio>
+    </RadioGroup>
+  );
+}
diff --git a/apps/docs/content/components/radio-group/with-description.ts b/apps/docs/content/components/radio-group/with-description.ts
index 8514baafb8..d42b2150ff 100644
--- a/apps/docs/content/components/radio-group/with-description.ts
+++ b/apps/docs/content/components/radio-group/with-description.ts
@@ -1,26 +1,4 @@
-const App = `import {RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RadioGroup
-      label="Select your favorite city"
-      color="warning"
-    >
-      <Radio value="buenos-aires" description="The capital of Argentina">
-        Buenos Aires
-      </Radio>
-      <Radio value="canberra" description="The capital of Australia">
-        Canberra
-      </Radio>
-      <Radio value="london" description="The capital of England">
-        London
-      </Radio>
-      <Radio value="tokyo" description="The capital of Japan">
-        Tokyo
-      </Radio>
-    </RadioGroup>
-  );
-}`;
+import App from "./with-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx
new file mode 100644
index 0000000000..a735718b95
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/controlled-focused-value.raw.jsx
@@ -0,0 +1,15 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let defaultDate = today(getLocalTimeZone());
+  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
+
+  return (
+    <RangeCalendar
+      aria-label="Date (Controlled Focused Value)"
+      focusedValue={focusedDate}
+      onFocusChange={setFocusedDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/controlled-focused-value.ts b/apps/docs/content/components/range-calendar/controlled-focused-value.ts
index 94014c4cd2..4a47b1bdd9 100644
--- a/apps/docs/content/components/range-calendar/controlled-focused-value.ts
+++ b/apps/docs/content/components/range-calendar/controlled-focused-value.ts
@@ -1,18 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let defaultDate = today(getLocalTimeZone());
-  let [focusedDate, setFocusedDate] = React.useState(defaultDate);
-
-  return (
-    <RangeCalendar
-      aria-label="Date (Controlled Focused Value)"
-      focusedValue={focusedDate}
-      onFocusChange={setFocusedDate}
-    />
-  );
-}`;
+import App from "./controlled-focused-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/controlled.raw.jsx b/apps/docs/content/components/range-calendar/controlled.raw.jsx
new file mode 100644
index 0000000000..9ac565f493
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/controlled.raw.jsx
@@ -0,0 +1,11 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1}),
+  });
+
+  return <RangeCalendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/range-calendar/controlled.raw.tsx b/apps/docs/content/components/range-calendar/controlled.raw.tsx
new file mode 100644
index 0000000000..dd4d514223
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/controlled.raw.tsx
@@ -0,0 +1,15 @@
+import type {DateValue} from "@react-types/calendar";
+import type {RangeValue} from "@react-types/shared";
+
+import React from "react";
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1}),
+  });
+
+  return <RangeCalendar aria-label="Date (Controlled)" value={value} onChange={setValue} />;
+}
diff --git a/apps/docs/content/components/range-calendar/controlled.ts b/apps/docs/content/components/range-calendar/controlled.ts
index 2544a02634..1f1a363363 100644
--- a/apps/docs/content/components/range-calendar/controlled.ts
+++ b/apps/docs/content/components/range-calendar/controlled.ts
@@ -1,46 +1,15 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1}),
-  });
-
-  return (
-    <RangeCalendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
-
-const AppTs = `import {RangeCalendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import type {RangeValue} from "@react-types/shared";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  let [value, setValue] = React.useState<RangeValue<DateValue>>({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1}),
-  });
-
-  return (
-    <RangeCalendar 
-      aria-label="Date (Controlled)" 
-      value={value} 
-      onChange={setValue} 
-    />
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/range-calendar/disabled.raw.jsx b/apps/docs/content/components/range-calendar/disabled.raw.jsx
new file mode 100644
index 0000000000..b1867734a5
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/disabled.raw.jsx
@@ -0,0 +1,5 @@
+import {RangeCalendar} from "@nextui-org/react";
+
+export default function App() {
+  return <RangeCalendar isDisabled aria-label="Date (Disabled)" />;
+}
diff --git a/apps/docs/content/components/range-calendar/disabled.ts b/apps/docs/content/components/range-calendar/disabled.ts
index 80f5d578ec..1a215cc91f 100644
--- a/apps/docs/content/components/range-calendar/disabled.ts
+++ b/apps/docs/content/components/range-calendar/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RangeCalendar aria-label="Date (Disabled)" isDisabled />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/index.ts b/apps/docs/content/components/range-calendar/index.ts
index 9b92f64465..37396dac6d 100644
--- a/apps/docs/content/components/range-calendar/index.ts
+++ b/apps/docs/content/components/range-calendar/index.ts
@@ -12,6 +12,7 @@ import internationalCalendars from "./international-calendars";
 import visibleMonths from "./visible-months";
 import pageBehaviour from "./page-behaviour";
 import presets from "./presets";
+import withMonthAndYearPicker from "./with-month-and-year-picker";
 
 export const rangeCalendarContent = {
   usage,
@@ -28,4 +29,5 @@ export const rangeCalendarContent = {
   visibleMonths,
   pageBehaviour,
   presets,
+  withMonthAndYearPicker,
 };
diff --git a/apps/docs/content/components/range-calendar/international-calendars.raw.jsx b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx
new file mode 100644
index 0000000000..cc12c88378
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/international-calendars.raw.jsx
@@ -0,0 +1,10 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {I18nProvider} from "@react-aria/i18n";
+
+export default function App() {
+  return (
+    <I18nProvider locale="zh-CN-u-ca-chinese">
+      <RangeCalendar aria-label="Date (International RangeCalendar)" />
+    </I18nProvider>
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/international-calendars.ts b/apps/docs/content/components/range-calendar/international-calendars.ts
index bd4fac3ffc..98bb8449e6 100644
--- a/apps/docs/content/components/range-calendar/international-calendars.ts
+++ b/apps/docs/content/components/range-calendar/international-calendars.ts
@@ -1,13 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {I18nProvider} from "@react-aria/i18n";
-
-export default function App() {
-  return (
-    <I18nProvider locale="zh-CN-u-ca-chinese">
-      <RangeCalendar aria-label="Date (International RangeCalendar)" />
-    </I18nProvider>
-  );
-}`;
+import App from "./international-calendars.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.jsx b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx
new file mode 100644
index 0000000000..4813c3ac25
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/invalid-date.raw.jsx
@@ -0,0 +1,22 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1}),
+  });
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);
+
+  return (
+    <RangeCalendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/invalid-date.raw.tsx b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx
new file mode 100644
index 0000000000..df98335247
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/invalid-date.raw.tsx
@@ -0,0 +1,26 @@
+import type {DateValue} from "@react-types/calendar";
+import type {RangeValue} from "@react-types/shared";
+
+import React from "react";
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [date, setDate] = React.useState<RangeValue<DateValue> | null>({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1}),
+  });
+  let {locale} = useLocale();
+  let isInvalid = isWeekend(date!.start, locale) || isWeekend(date!.end, locale);
+
+  return (
+    <RangeCalendar
+      aria-label="Date (Invalid on weekends)"
+      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
+      isInvalid={isInvalid}
+      value={date}
+      onChange={setDate}
+    />
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/invalid-date.ts b/apps/docs/content/components/range-calendar/invalid-date.ts
index 4e053c0658..e373a04e5b 100644
--- a/apps/docs/content/components/range-calendar/invalid-date.ts
+++ b/apps/docs/content/components/range-calendar/invalid-date.ts
@@ -1,58 +1,15 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1}),
-  });
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);
-
-  return (
-    <RangeCalendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
-
-const AppTs = `import {RangeCalendar} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import type {RangeValue} from "@react-types/shared";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let [date, setDate] = React.useState<RangeValue<DateValue>>({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1}),
-  });
-  let {locale} = useLocale();
-  let isInvalid = isWeekend(date.start, locale) || isWeekend(date.end, locale);
-
-  return (
-    <RangeCalendar
-      aria-label="Date (Invalid on weekends)"
-      errorMessage={isInvalid ? "We are closed on weekends" : undefined}
-      isInvalid={isInvalid}
-      value={date}
-      onChange={setDate}
-    />
-  );
-}`;
+import App from "./invalid-date.raw.jsx?raw";
+import AppTs from "./invalid-date.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/range-calendar/max-date-value.raw.jsx b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx
new file mode 100644
index 0000000000..888dcea793
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/max-date-value.raw.jsx
@@ -0,0 +1,6 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return <RangeCalendar aria-label="Date (Max Date Value)" maxValue={today(getLocalTimeZone())} />;
+}
diff --git a/apps/docs/content/components/range-calendar/max-date-value.ts b/apps/docs/content/components/range-calendar/max-date-value.ts
index 32c1359e13..6a82913361 100644
--- a/apps/docs/content/components/range-calendar/max-date-value.ts
+++ b/apps/docs/content/components/range-calendar/max-date-value.ts
@@ -1,14 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <RangeCalendar
-      aria-label="Date (Max Date Value)"
-      maxValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./max-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/min-date-value.raw.jsx b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx
new file mode 100644
index 0000000000..cbcc6865ff
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/min-date-value.raw.jsx
@@ -0,0 +1,6 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return <RangeCalendar aria-label="Date (Min Date Value)" minValue={today(getLocalTimeZone())} />;
+}
diff --git a/apps/docs/content/components/range-calendar/min-date-value.ts b/apps/docs/content/components/range-calendar/min-date-value.ts
index 602cb5d6a1..4e86e82613 100644
--- a/apps/docs/content/components/range-calendar/min-date-value.ts
+++ b/apps/docs/content/components/range-calendar/min-date-value.ts
@@ -1,14 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <RangeCalendar
-      aria-label="Date (Min Date Value)"
-      minValue={today(getLocalTimeZone())}
-    />
-  );
-}`;
+import App from "./min-date-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx
new file mode 100644
index 0000000000..9e8d39c445
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.raw.jsx
@@ -0,0 +1,15 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let {locale} = useLocale();
+
+  return (
+    <RangeCalendar
+      allowsNonContiguousRanges
+      aria-label="Time off request"
+      isDateUnavailable={(date) => isWeekend(date, locale)}
+    />
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts
index 15c294adb7..92f01fe2cf 100644
--- a/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts
+++ b/apps/docs/content/components/range-calendar/non-contiguous-ranges.ts
@@ -1,18 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let {locale} = useLocale();
-
-  return (
-    <RangeCalendar
-      allowsNonContiguousRanges
-      aria-label="Time off request"
-      isDateUnavailable={(date) => isWeekend(date, locale)}
-    />
-  );
-}`;
+import App from "./non-contiguous-ranges.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx
new file mode 100644
index 0000000000..479d02aa19
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/page-behaviour.raw.jsx
@@ -0,0 +1,5 @@
+import {RangeCalendar} from "@nextui-org/react";
+
+export default function App() {
+  return <RangeCalendar aria-label="Date (Page Behaviour)" pageBehavior="single" />;
+}
diff --git a/apps/docs/content/components/range-calendar/page-behaviour.ts b/apps/docs/content/components/range-calendar/page-behaviour.ts
index 3408f23cc9..ef31c845d8 100644
--- a/apps/docs/content/components/range-calendar/page-behaviour.ts
+++ b/apps/docs/content/components/range-calendar/page-behaviour.ts
@@ -1,13 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RangeCalendar 
-      aria-label="Date (Page Behaviour)" 
-      pageBehavior="single" 
-    />
-  );
-}`;
+import App from "./page-behaviour.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/presets.raw.jsx b/apps/docs/content/components/range-calendar/presets.raw.jsx
new file mode 100644
index 0000000000..93e1902856
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/presets.raw.jsx
@@ -0,0 +1,116 @@
+import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
+  });
+  let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone()));
+
+  let {locale} = useLocale();
+
+  let now = today(getLocalTimeZone());
+  let nextMonth = now.add({months: 1});
+
+  let nextWeek = {
+    start: startOfWeek(now.add({weeks: 1}), locale),
+    end: endOfWeek(now.add({weeks: 1}), locale),
+  };
+  let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)};
+  let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)};
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <RangeCalendar
+        bottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        classNames={{
+          content: "w-full",
+        }}
+        focusedValue={focusedValue}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 max-w-full pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button
+              onPress={() => {
+                setValue(nextWeek);
+                setFocusedValue(nextWeek.end);
+              }}
+            >
+              Next week
+            </Button>
+            <Button
+              onPress={() => {
+                setValue(thisMonth);
+                setFocusedValue(thisMonth.start);
+              }}
+            >
+              This month
+            </Button>
+            <Button
+              onPress={() => {
+                setValue(nextMonthValue), setFocusedValue(nextMonthValue.start);
+              }}
+            >
+              Next month
+            </Button>
+          </ButtonGroup>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setFocusedValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/presets.raw.tsx b/apps/docs/content/components/range-calendar/presets.raw.tsx
new file mode 100644
index 0000000000..51aced67b2
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/presets.raw.tsx
@@ -0,0 +1,125 @@
+import type {DateValue} from "@react-types/calendar";
+import type {RangeValue} from "@react-types/shared";
+
+import React from "react";
+import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
+import {
+  today,
+  getLocalTimeZone,
+  startOfWeek,
+  endOfWeek,
+  startOfMonth,
+  endOfMonth,
+} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>({
+    start: today(getLocalTimeZone()),
+    end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
+  });
+
+  let [focusedValue, setFocusedValue] = React.useState<DateValue>(today(getLocalTimeZone()));
+
+  let {locale} = useLocale();
+
+  let now = today(getLocalTimeZone());
+  let nextMonth = now.add({months: 1});
+
+  let nextWeek = {
+    start: startOfWeek(now.add({weeks: 1}), locale),
+    end: endOfWeek(now.add({weeks: 1}), locale),
+  };
+  let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)};
+  let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)};
+
+  const CustomRadio = (props) => {
+    const {children, ...otherProps} = props;
+
+    return (
+      <Radio
+        {...otherProps}
+        classNames={{
+          base: cn(
+            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
+            "cursor-pointer rounded-full border-2 border-default-200/60",
+            "data-[selected=true]:border-primary",
+          ),
+          label: "text-tiny text-default-500",
+          labelWrapper: "px-1 m-0",
+          wrapper: "hidden",
+        }}
+      >
+        {children}
+      </Radio>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <RangeCalendar
+        bottomContent={
+          <RadioGroup
+            aria-label="Date precision"
+            classNames={{
+              base: "w-full pb-2",
+              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
+            }}
+            defaultValue="exact_dates"
+            orientation="horizontal"
+          >
+            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
+            <CustomRadio value="1_day">1 day</CustomRadio>
+            <CustomRadio value="2_days">2 days</CustomRadio>
+            <CustomRadio value="3_days">3 days</CustomRadio>
+            <CustomRadio value="7_days">7 days</CustomRadio>
+            <CustomRadio value="14_days">14 days</CustomRadio>
+          </RadioGroup>
+        }
+        focusedValue={focusedValue}
+        nextButtonProps={{
+          variant: "bordered",
+        }}
+        prevButtonProps={{
+          variant: "bordered",
+        }}
+        topContent={
+          <ButtonGroup
+            fullWidth
+            className="px-3 max-w-full pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
+            radius="full"
+            size="sm"
+            variant="bordered"
+          >
+            <Button
+              onPress={() => {
+                setValue(nextWeek);
+                setFocusedValue(nextWeek.end);
+              }}
+            >
+              Next week
+            </Button>
+            <Button
+              onPress={() => {
+                setValue(thisMonth);
+                setFocusedValue(thisMonth.start);
+              }}
+            >
+              This month
+            </Button>
+            <Button
+              onPress={() => {
+                setValue(nextMonthValue), setFocusedValue(nextMonthValue.start);
+              }}
+            >
+              Next month
+            </Button>
+          </ButtonGroup>
+        }
+        value={value}
+        onChange={setValue}
+        onFocusChange={setFocusedValue}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/presets.ts b/apps/docs/content/components/range-calendar/presets.ts
index a6157ae288..334d59a763 100644
--- a/apps/docs/content/components/range-calendar/presets.ts
+++ b/apps/docs/content/components/range-calendar/presets.ts
@@ -1,238 +1,5 @@
-const App = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
-  });
-  let [focusedValue, setFocusedValue] = React.useState(today(getLocalTimeZone()));
-
-  let {locale} = useLocale();
-
-  let now = today(getLocalTimeZone());
-  let nextMonth = now.add({months: 1});
-
-  let nextWeek = {
-    start: startOfWeek(now.add({weeks: 1}), locale),
-    end: endOfWeek(now.add({weeks: 1}), locale),
-  };
-  let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)};
-  let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)};
-
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <RangeCalendar
-        bottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        classNames={{
-          content: "w-full",
-        }}
-        focusedValue={focusedValue}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 max-w-full pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button
-              onPress={() => {
-                setValue(nextWeek);
-                setFocusedValue(nextWeek.end);
-              }}
-            >
-              Next week
-            </Button>
-            <Button
-              onPress={() => {
-                setValue(thisMonth);
-                setFocusedValue(thisMonth.start);
-              }}
-            >
-              This month
-            </Button>
-            <Button
-              onPress={() => {
-                setValue(nextMonthValue), setFocusedValue(nextMonthValue.start);
-              }}
-            >
-              Next month
-            </Button>
-          </ButtonGroup>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setFocusedValue}
-      />
-    </div>
-  );
-}`;
-
-const AppTs = `import {RangeCalendar, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import type {DateValue} from "@react-types/calendar";
-import type {RangeValue} from "@react-types/shared";
-import {today, getLocalTimeZone, startOfWeek, startOfMonth} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState<RangeValue<DateValue>>({
-    start: today(getLocalTimeZone()),
-    end: today(getLocalTimeZone()).add({weeks: 1, days: 3}),
-  });
-  
-  let [focusedValue, setFocusedValue] = React.useState<DateValue>(today(getLocalTimeZone()));
-
-  let {locale} = useLocale();
-
-  let now = today(getLocalTimeZone());
-  let nextMonth = now.add({months: 1});
-
-  let nextWeek = {
-    start: startOfWeek(now.add({weeks: 1}), locale),
-    end: endOfWeek(now.add({weeks: 1}), locale),
-  };
-  let thisMonth = {start: startOfMonth(now), end: endOfMonth(now)};
-  let nextMonthValue = {start: startOfMonth(nextMonth), end: endOfMonth(nextMonth)};
-
-
-  const CustomRadio = (props) => {
-    const {children, ...otherProps} = props;
-
-    return (
-      <Radio
-        {...otherProps}
-        classNames={{
-          base: cn(
-            "flex-none m-0 h-8 bg-content1 hover:bg-content2 items-center justify-between",
-            "cursor-pointer rounded-full border-2 border-default-200/60",
-            "data-[selected=true]:border-primary",
-          ),
-          label: "text-tiny text-default-500",
-          labelWrapper: "px-1 m-0",
-          wrapper: "hidden",
-        }}
-      >
-        {children}
-      </Radio>
-    );
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <RangeCalendar
-        bottomContent={
-          <RadioGroup
-            aria-label="Date precision"
-            classNames={{
-              base: "w-full pb-2",
-              wrapper: "-my-2.5 py-2.5 px-3 gap-1 flex-nowrap max-w-[280px] overflow-x-scroll",
-            }}
-            defaultValue="exact_dates"
-            orientation="horizontal"
-          >
-            <CustomRadio value="exact_dates">Exact dates</CustomRadio>
-            <CustomRadio value="1_day">1 day</CustomRadio>
-            <CustomRadio value="2_days">2 days</CustomRadio>
-            <CustomRadio value="3_days">3 days</CustomRadio>
-            <CustomRadio value="7_days">7 days</CustomRadio>
-            <CustomRadio value="14_days">14 days</CustomRadio>
-          </RadioGroup>
-        }
-        focusedValue={focusedValue}
-        nextButtonProps={{
-          variant: "bordered",
-        }}
-        prevButtonProps={{
-          variant: "bordered",
-        }}
-        topContent={
-          <ButtonGroup
-            fullWidth
-            className="px-3 max-w-full pb-2 pt-3 bg-content1 [&>button]:text-default-500 [&>button]:border-default-200/60"
-            radius="full"
-            size="sm"
-            variant="bordered"
-          >
-            <Button
-              onPress={() => {
-                setValue(nextWeek);
-                setFocusedValue(nextWeek.end);
-              }}
-            >
-              Next week
-            </Button>
-            <Button
-              onPress={() => {
-                setValue(thisMonth);
-                setFocusedValue(thisMonth.start);
-              }}
-            >
-              This month
-            </Button>
-            <Button
-              onPress={() => {
-                setValue(nextMonthValue), setFocusedValue(nextMonthValue.start);
-              }}
-            >
-              Next month
-            </Button>
-          </ButtonGroup>
-        }
-        value={value}
-        onChange={setValue}
-        onFocusChange={setFocusedValue}
-      />
-    </div>
-  );
-}`;
+import App from "./presets.raw.jsx?raw";
+import AppTs from "./presets.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/read-only.raw.jsx b/apps/docs/content/components/range-calendar/read-only.raw.jsx
new file mode 100644
index 0000000000..3a6ba6e3fd
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/read-only.raw.jsx
@@ -0,0 +1,15 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <RangeCalendar
+      isReadOnly
+      aria-label="Date (Read Only)"
+      value={{
+        start: today(getLocalTimeZone()),
+        end: today(getLocalTimeZone()).add({weeks: 1}),
+      }}
+    />
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/read-only.ts b/apps/docs/content/components/range-calendar/read-only.ts
index 1badad0004..caf4be10cf 100644
--- a/apps/docs/content/components/range-calendar/read-only.ts
+++ b/apps/docs/content/components/range-calendar/read-only.ts
@@ -1,18 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <RangeCalendar 
-      aria-label="Date (Read Only)" 
-      value={{
-        start: today(getLocalTimeZone()),
-        end: today(getLocalTimeZone()).add({weeks: 1}),
-      }} 
-      isReadOnly 
-    />
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx
new file mode 100644
index 0000000000..3803115132
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/unavailable-dates.raw.jsx
@@ -0,0 +1,23 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
+import {useLocale} from "@react-aria/i18n";
+
+export default function App() {
+  let now = today(getLocalTimeZone());
+
+  let disabledRanges = [
+    [now, now.add({days: 5})],
+    [now.add({days: 14}), now.add({days: 16})],
+    [now.add({days: 23}), now.add({days: 24})],
+  ];
+
+  let {locale} = useLocale();
+
+  let isDateUnavailable = (date) =>
+    isWeekend(date, locale) ||
+    disabledRanges.some(
+      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
+    );
+
+  return <RangeCalendar aria-label="Date (Unavailable)" isDateUnavailable={isDateUnavailable} />;
+}
diff --git a/apps/docs/content/components/range-calendar/unavailable-dates.ts b/apps/docs/content/components/range-calendar/unavailable-dates.ts
index 6d656ff8f3..b4e1f4df1a 100644
--- a/apps/docs/content/components/range-calendar/unavailable-dates.ts
+++ b/apps/docs/content/components/range-calendar/unavailable-dates.ts
@@ -1,32 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone, isWeekend} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
-
-
-export default function App() {
-  let now = today(getLocalTimeZone());
-
-  let disabledRanges = [
-    [now, now.add({days: 5})],
-    [now.add({days: 14}), now.add({days: 16})],
-    [now.add({days: 23}), now.add({days: 24})],
-  ];
-
-  let {locale} = useLocale();
-
-  let isDateUnavailable = (date) =>
-    isWeekend(date, locale) ||
-    disabledRanges.some(
-      (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
-    );
-
-  return (
-    <RangeCalendar
-      aria-label="Date (Unavailable)"
-      isDateUnavailable={isDateUnavailable} 
-    />
-  );
-}`;
+import App from "./unavailable-dates.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/usage.raw.jsx b/apps/docs/content/components/range-calendar/usage.raw.jsx
new file mode 100644
index 0000000000..1e81856a24
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/usage.raw.jsx
@@ -0,0 +1,17 @@
+import {RangeCalendar} from "@nextui-org/react";
+import {today, getLocalTimeZone} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex gap-x-4">
+      <RangeCalendar aria-label="Date (No Selection)" />
+      <RangeCalendar
+        aria-label="Date (Uncontrolled)"
+        defaultValue={{
+          start: today(getLocalTimeZone()),
+          end: today(getLocalTimeZone()).add({weeks: 1}),
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/range-calendar/usage.ts b/apps/docs/content/components/range-calendar/usage.ts
index 7cbaeec6e0..1118304c37 100644
--- a/apps/docs/content/components/range-calendar/usage.ts
+++ b/apps/docs/content/components/range-calendar/usage.ts
@@ -1,20 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-import {today, getLocalTimeZone} from '@internationalized/date';
-
-export default function App() {
-  return (
-    <div className="flex gap-x-4">
-      <RangeCalendar aria-label="Date (No Selection)" />
-      <RangeCalendar
-        aria-label="Date (Uncontrolled)"
-        defaultValue={{
-          start: today(getLocalTimeZone()),
-          end: today(getLocalTimeZone()).add({weeks: 1}),
-        }}
-      />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/visible-months.raw.jsx b/apps/docs/content/components/range-calendar/visible-months.raw.jsx
new file mode 100644
index 0000000000..bbefbd53e6
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/visible-months.raw.jsx
@@ -0,0 +1,5 @@
+import {RangeCalendar} from "@nextui-org/react";
+
+export default function App() {
+  return <RangeCalendar aria-label="Date (Visible Month)" visibleMonths={3} />;
+}
diff --git a/apps/docs/content/components/range-calendar/visible-months.ts b/apps/docs/content/components/range-calendar/visible-months.ts
index a669107921..38c2db8f01 100644
--- a/apps/docs/content/components/range-calendar/visible-months.ts
+++ b/apps/docs/content/components/range-calendar/visible-months.ts
@@ -1,13 +1,4 @@
-const App = `import {RangeCalendar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <RangeCalendar 
-      aria-label="Date (Visible Month)" 
-      visibleMonths={3} 
-    />
-  );
-}`;
+import App from "./visible-months.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx
new file mode 100644
index 0000000000..98e50fce5e
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.raw.jsx
@@ -0,0 +1,5 @@
+import {RangeCalendar} from "@nextui-org/react";
+
+export default function App() {
+  return <RangeCalendar showMonthAndYearPickers aria-label="Date (Show Month and Year Picker)" />;
+}
diff --git a/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts
new file mode 100644
index 0000000000..53df2d1367
--- /dev/null
+++ b/apps/docs/content/components/range-calendar/with-month-and-year-picker.ts
@@ -0,0 +1,9 @@
+import App from "./with-month-and-year-picker.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx
new file mode 100644
index 0000000000..d31e069dd5
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="w-[300px] h-[400px]" size={100}>
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/custom-size.ts b/apps/docs/content/components/scroll-shadow/custom-size.ts
index 5df7bfd1c5..bdac09246a 100644
--- a/apps/docs/content/components/scroll-shadow/custom-size.ts
+++ b/apps/docs/content/components/scroll-shadow/custom-size.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-  <div>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-
-export default function App() {
-  return (
-    <ScrollShadow size={100} className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./custom-size.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx
new file mode 100644
index 0000000000..9f2fdf5ba2
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow hideScrollBar className="w-[300px] h-[400px]">
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
index 74e82bc299..c431601bc5 100644
--- a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
+++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-  <div>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow hideScrollBar className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./hide-scrollbar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx
new file mode 100644
index 0000000000..4da067924e
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="max-w-[400px] max-h-[300px]" orientation="horizontal">
+      <Content className="w-[800px]" />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/horizontal.ts b/apps/docs/content/components/scroll-shadow/horizontal.ts
index a9a1d87cd3..60be4b4077 100644
--- a/apps/docs/content/components/scroll-shadow/horizontal.ts
+++ b/apps/docs/content/components/scroll-shadow/horizontal.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = ({className}) => (
-  <div className={className}>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow orientation="horizontal" className="max-w-[400px] max-h-[300px]">
-      <Content className="w-[800px]" />
-    </ScrollShadow>
-  );
-}`;
+import App from "./horizontal.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/offset.raw.jsx b/apps/docs/content/components/scroll-shadow/offset.raw.jsx
new file mode 100644
index 0000000000..e5a237b0e7
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/offset.raw.jsx
@@ -0,0 +1,79 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow
+      hideScrollBar
+      className="max-w-[400px] max-h-[300px]"
+      offset={100}
+      orientation="horizontal"
+    >
+      <Content className="w-[800px]" />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/offset.ts b/apps/docs/content/components/scroll-shadow/offset.ts
index 9980333ad5..2fb601047c 100644
--- a/apps/docs/content/components/scroll-shadow/offset.ts
+++ b/apps/docs/content/components/scroll-shadow/offset.ts
@@ -1,57 +1,7 @@
-const Content = `export const Content = ({className}) => (
-  <div className={className}>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow 
-      hideScrollBar 
-      offset={100}
-      orientation="horizontal" 
-      className="max-w-[400px] max-h-[300px]"
-    >
-      <Content className="w-[800px]" />
-    </ScrollShadow>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/usage.raw.jsx b/apps/docs/content/components/scroll-shadow/usage.raw.jsx
new file mode 100644
index 0000000000..12f96b5ff0
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/usage.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="w-[300px] h-[400px]">
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/usage.ts b/apps/docs/content/components/scroll-shadow/usage.ts
index 5c911e8a84..1118304c37 100644
--- a/apps/docs/content/components/scroll-shadow/usage.ts
+++ b/apps/docs/content/components/scroll-shadow/usage.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-<div>
-  <p>
-    Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-  </p>
-  <p>
-    Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-  </p>
-  <p>
-    Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-  </p>
-  <p>
-    Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-  </p>
-  <p>
-    Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-  </p>
-  <p>
-    Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-  </p>
-  <p>
-    Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-  </p>
-  <p>
-    Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-  </p>
-  <p>
-    Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-  </p>
-  <p>
-    Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-  </p>
-</div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-
-export default function App() {
-  return (
-    <ScrollShadow className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/async-loading-items.raw.jsx b/apps/docs/content/components/select/async-loading-items.raw.jsx
new file mode 100644
index 0000000000..9e6e7713b8
--- /dev/null
+++ b/apps/docs/content/components/select/async-loading-items.raw.jsx
@@ -0,0 +1,98 @@
+import {Select, SelectItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export function usePokemonList({fetchDelay = 0} = {}) {
+  const [items, setItems] = React.useState([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
+        console.log("Fetch aborted");
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Select
+      className="max-w-xs"
+      isLoading={isLoading}
+      items={items}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      selectionMode="single"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <SelectItem key={item.name} className="capitalize">
+          {item.name}
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/async-loading-items.raw.tsx b/apps/docs/content/components/select/async-loading-items.raw.tsx
new file mode 100644
index 0000000000..9d27a59662
--- /dev/null
+++ b/apps/docs/content/components/select/async-loading-items.raw.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+
+export type Pokemon = {
+  name: string;
+  url: string;
+};
+
+export type UsePokemonListProps = {
+  /** Delay to wait before fetching more items */
+  fetchDelay?: number;
+};
+
+export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
+  const [items, setItems] = React.useState<Pokemon[]>([]);
+  const [hasMore, setHasMore] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [offset, setOffset] = React.useState(0);
+  const limit = 10; // Number of items per page, adjust as necessary
+
+  const loadPokemon = async (currentOffset: number) => {
+    const controller = new AbortController();
+    const {signal} = controller;
+
+    try {
+      setIsLoading(true);
+
+      if (offset > 0) {
+        // Delay to simulate network latency
+        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
+      }
+
+      let res = await fetch(
+        `https://pokeapi.co/api/v2/pokemon?offset=${currentOffset}&limit=${limit}`,
+        {signal},
+      );
+
+      if (!res.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+      // Append new results to existing ones
+      setItems((prevItems) => [...prevItems, ...json.results]);
+    } catch (error) {
+      // @ts-ignore
+      if (error.name === "AbortError") {
+        // eslint-disable-next-line no-console
+        console.log("Fetch aborted");
+      } else {
+        // eslint-disable-next-line no-console
+        console.error("There was an error with the fetch operation:", error);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    loadPokemon(offset);
+  }, []);
+
+  const onLoadMore = () => {
+    const newOffset = offset + limit;
+
+    setOffset(newOffset);
+    loadPokemon(newOffset);
+  };
+
+  return {
+    items,
+    hasMore,
+    isLoading,
+    onLoadMore,
+  };
+}
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
+
+  const [, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    isEnabled: isOpen,
+    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
+    onLoadMore,
+  });
+
+  return (
+    <Select
+      className="max-w-xs"
+      isLoading={isLoading}
+      items={items}
+      label="Pick a Pokemon"
+      placeholder="Select a Pokemon"
+      scrollRef={scrollerRef}
+      selectionMode="single"
+      onOpenChange={setIsOpen}
+    >
+      {(item) => (
+        <SelectItem key={item.name} className="capitalize">
+          {item.name}
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/async-loading-items.ts b/apps/docs/content/components/select/async-loading-items.ts
index c6de820cab..a69188c565 100644
--- a/apps/docs/content/components/select/async-loading-items.ts
+++ b/apps/docs/content/components/select/async-loading-items.ts
@@ -1,184 +1,12 @@
-const usePokemonListTs = `export type Pokemon = {
-  name: string;
-  url: string;
-};
-
-export type UsePokemonListProps = {
-  /** Delay to wait before fetching more items */
-  fetchDelay?: number;
-};
-
-export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
-  const [items, setItems] = React.useState<Pokemon[]>([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset: number) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-}
-
-`;
-
-const usePokemonList = `export function usePokemonList({fetchDelay = 0} = {}) {
-  const [items, setItems] = React.useState([]);
-  const [hasMore, setHasMore] = React.useState(true);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [offset, setOffset] = React.useState(0);
-  const limit = 10; // Number of items per page, adjust as necessary
-
-  const loadPokemon = async (currentOffset) => {
-    const controller = new AbortController();
-    const {signal} = controller;
-
-    try {
-      setIsLoading(true);
-
-      if (offset > 0) {
-        // Delay to simulate network latency
-        await new Promise((resolve) => setTimeout(resolve, fetchDelay));
-      }
-
-      let res = await fetch(
-        \`https://pokeapi.co/api/v2/pokemon?offset=\${currentOffset}&limit=\${limit}\`,
-        {signal},
-      );
-
-      if (!res.ok) {
-        throw new Error("Network response was not ok");
-      }
-
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-      // Append new results to existing ones
-      setItems((prevItems) => [...prevItems, ...json.results]);
-    } catch (error) {
-      if (error.name === "AbortError") {
-        console.log("Fetch aborted");
-      } else {
-        console.error("There was an error with the fetch operation:", error);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  React.useEffect(() => {
-    loadPokemon(offset);
-  }, []);
-
-  const onLoadMore = () => {
-    const newOffset = offset + limit;
-
-    setOffset(newOffset);
-    loadPokemon(newOffset);
-  };
-
-  return {
-    items,
-    hasMore,
-    isLoading,
-    onLoadMore,
-  };
-};`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
-import {usePokemonList} from "./usePokemonList";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const {items, hasMore, isLoading, onLoadMore} = usePokemonList({fetchDelay: 1500});
-
-  const [, scrollerRef] = useInfiniteScroll({
-    hasMore,
-    isEnabled: isOpen,
-    shouldUseLoader: false, // We don't want to show the loader at the bottom of the list
-    onLoadMore,
-  });
-
-  return (
-    <Select
-      className="max-w-xs"
-      isLoading={isLoading}
-      items={items}
-      label="Pick a Pokemon"
-      placeholder="Select a Pokemon"
-      scrollRef={scrollerRef}
-      selectionMode="single"
-      onOpenChange={setIsOpen}
-    >
-      {(item) => (
-        <SelectItem key={item.name} className="capitalize">
-          {item.name}
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./async-loading-items.raw.jsx?raw";
+import AppTs from "./async-loading-items.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/usePokemonList.js": usePokemonList,
 };
 
 const reactTs = {
-  "/App.tsx": App,
-  "/usePokemonList.ts": usePokemonListTs,
+  "/App.tsx": AppTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/colors.raw.jsx b/apps/docs/content/components/select/colors.raw.jsx
new file mode 100644
index 0000000000..1732747ba5
--- /dev/null
+++ b/apps/docs/content/components/select/colors.raw.jsx
@@ -0,0 +1,40 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {colors.map((color) => (
+        <Select
+          key={color}
+          className="max-w-xs"
+          color={color}
+          defaultSelectedKeys={["cat"]}
+          label="Favorite Animal"
+          placeholder="Select an animal"
+        >
+          {animals.map((animal) => (
+            <SelectItem key={animal.key}>{animal.label}</SelectItem>
+          ))}
+        </Select>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/colors.ts b/apps/docs/content/components/select/colors.ts
index c830262ca1..d5bef810aa 100644
--- a/apps/docs/content/components/select/colors.ts
+++ b/apps/docs/content/components/select/colors.ts
@@ -1,57 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {colors.map((color) => (
-        <Select
-          key={color}
-          color={color}
-          label="Favorite Animal"
-          placeholder="Select an animal"
-          defaultSelectedKeys={["cat"]}
-          className="max-w-xs"
-        >
-          {animals.map((animal) => (
-            <SelectItem key={animal.key}>
-              {animal.label}
-            </SelectItem>
-          ))}
-        </Select>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-items.raw.jsx b/apps/docs/content/components/select/custom-items.raw.jsx
new file mode 100644
index 0000000000..b1b78c716a
--- /dev/null
+++ b/apps/docs/content/components/select/custom-items.raw.jsx
@@ -0,0 +1,228 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-items.ts b/apps/docs/content/components/select/custom-items.ts
index 66f7d96dd7..26a1e0f9ac 100644
--- a/apps/docs/content/components/select/custom-items.ts
+++ b/apps/docs/content/components/select/custom-items.ts
@@ -1,236 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      className="max-w-xs"
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-render-value.raw.jsx b/apps/docs/content/components/select/custom-render-value.raw.jsx
new file mode 100644
index 0000000000..c038d4d13a
--- /dev/null
+++ b/apps/docs/content/components/select/custom-render-value.raw.jsx
@@ -0,0 +1,247 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "h-12",
+      }}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data.name}</span>
+              <span className="text-default-500 text-tiny">({item.data.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-render-value.raw.tsx b/apps/docs/content/components/select/custom-render-value.raw.tsx
new file mode 100644
index 0000000000..5c2c71f9fb
--- /dev/null
+++ b/apps/docs/content/components/select/custom-render-value.raw.tsx
@@ -0,0 +1,259 @@
+import React from "react";
+import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+type User = {
+  id: number;
+  name: string;
+  role: string;
+  team: string;
+  status: string;
+  age: string;
+  avatar: string;
+  email: string;
+};
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "h-12",
+      }}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items: SelectedItems<User>) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data?.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data?.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data?.name}</span>
+              <span className="text-default-500 text-tiny">({item.data?.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-render-value.ts b/apps/docs/content/components/select/custom-render-value.ts
index dc52e11211..3d16320688 100644
--- a/apps/docs/content/components/select/custom-render-value.ts
+++ b/apps/docs/content/components/select/custom-render-value.ts
@@ -1,317 +1,12 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "h-12",
-      }}
-      renderValue={(items) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Avatar, SelectedItems} from "@nextui-org/react";
-import {users} from "./data";
-
-type User = {
-  id: number;
-  name: string;
-  role: string;
-  team: string;
-  status: string;
-  age: string;
-  avatar: string;
-  email: string;
-};
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "h-12",
-      }}
-      renderValue={(items: SelectedItems<User>) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-render-value.raw.jsx?raw";
+import AppTs from "./custom-render-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-sections-style.raw.jsx b/apps/docs/content/components/select/custom-sections-style.raw.jsx
new file mode 100644
index 0000000000..17826ba15c
--- /dev/null
+++ b/apps/docs/content/components/select/custom-sections-style.raw.jsx
@@ -0,0 +1,48 @@
+import {Select, SelectItem, SelectSection} from "@nextui-org/react";
+
+export default function App() {
+  const headingClasses =
+    "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
+
+  return (
+    <Select
+      className="max-w-xs"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+    >
+      <SelectSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Mammals"
+      >
+        <SelectItem key="Lion">Lion</SelectItem>
+        <SelectItem key="Tiger">Tiger</SelectItem>
+        <SelectItem key="Elephant">Elephant</SelectItem>
+        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
+        <SelectItem key="Panda">Panda</SelectItem>
+        <SelectItem key="Giraffe">Giraffe</SelectItem>
+        <SelectItem key="Zebra">Zebra</SelectItem>
+        <SelectItem key="Cheetah">Cheetah</SelectItem>
+      </SelectSection>
+      <SelectSection
+        classNames={{
+          heading: headingClasses,
+        }}
+        title="Birds"
+      >
+        <SelectItem key="Eagle">Eagle</SelectItem>
+        <SelectItem key="Parrot">Parrot</SelectItem>
+        <SelectItem key="Penguin">Penguin</SelectItem>
+        <SelectItem key="Ostrich">Ostrich</SelectItem>
+        <SelectItem key="Peacock">Peacock</SelectItem>
+        <SelectItem key="Swan">Swan</SelectItem>
+        <SelectItem key="Falcon">Falcon</SelectItem>
+        <SelectItem key="Flamingo">Flamingo</SelectItem>
+      </SelectSection>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-sections-style.ts b/apps/docs/content/components/select/custom-sections-style.ts
index 9551a80049..9ba8a6cd9c 100644
--- a/apps/docs/content/components/select/custom-sections-style.ts
+++ b/apps/docs/content/components/select/custom-sections-style.ts
@@ -1,50 +1,4 @@
-const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react";
-
-export default function App() {
-  const headingClasses = "flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-small rounded-small";
-
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false,
-      }}
-    >
-      <SelectSection 
-        title="Mammals"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <SelectItem key="Lion">Lion</SelectItem>
-        <SelectItem key="Tiger">Tiger</SelectItem>
-        <SelectItem key="Elephant">Elephant</SelectItem>
-        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
-        <SelectItem key="Panda">Panda</SelectItem>
-        <SelectItem key="Giraffe">Giraffe</SelectItem>
-        <SelectItem key="Zebra">Zebra</SelectItem>
-        <SelectItem key="Cheetah">Cheetah</SelectItem>
-      </SelectSection>
-      <SelectSection 
-        title="Birds"
-        classNames={{
-          heading: headingClasses,
-        }}
-      >
-        <SelectItem key="Eagle">Eagle</SelectItem>
-        <SelectItem key="Parrot">Parrot</SelectItem>
-        <SelectItem key="Penguin">Penguin</SelectItem>
-        <SelectItem key="Ostrich">Ostrich</SelectItem>
-        <SelectItem key="Peacock">Peacock</SelectItem>
-        <SelectItem key="Swan">Swan</SelectItem>
-        <SelectItem key="Falcon">Falcon</SelectItem>
-        <SelectItem key="Flamingo">Flamingo</SelectItem>
-      </SelectSection>
-    </Select>
-  );
-}`;
+import App from "./custom-sections-style.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/custom-selector-icon.raw.jsx b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
new file mode 100644
index 0000000000..f63192b0b5
--- /dev/null
+++ b/apps/docs/content/components/select/custom-selector-icon.raw.jsx
@@ -0,0 +1,57 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const SelectorIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
+      <path d="M8 9l4 -4l4 4" />
+      <path d="M16 15l-4 4l-4 -4" />
+    </svg>
+  );
+};
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      disableSelectorIconRotation
+      className="max-w-xs"
+      label="Favorite Animal"
+      labelPlacement="outside"
+      placeholder="Select an animal"
+      selectorIcon={<SelectorIcon />}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-selector-icon.ts b/apps/docs/content/components/select/custom-selector-icon.ts
index 18770cfb44..ee2c7d9a8b 100644
--- a/apps/docs/content/components/select/custom-selector-icon.ts
+++ b/apps/docs/content/components/select/custom-selector-icon.ts
@@ -1,67 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const SelectorIcon = `export const SelectorIcon = (props) => (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <path d="M0 0h24v24H0z" fill="none" stroke="none" />
-      <path d="M8 9l4 -4l4 4" />
-      <path d="M16 15l-4 4l-4 -4" />
-    </svg>
-);`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {SelectorIcon} from "./SelectorIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      labelPlacement="outside"
-      className="max-w-xs"
-      disableSelectorIconRotation
-      selectorIcon={<SelectorIcon />}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./custom-selector-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/SelectorIcon.jsx": SelectorIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/custom-styles.raw.jsx b/apps/docs/content/components/select/custom-styles.raw.jsx
new file mode 100644
index 0000000000..6aad7b60dc
--- /dev/null
+++ b/apps/docs/content/components/select/custom-styles.raw.jsx
@@ -0,0 +1,269 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      classNames={{
+        label: "group-data-[filled=true]:-translate-y-5",
+        trigger: "min-h-16",
+        listboxWrapper: "max-h-[400px]",
+      }}
+      items={users}
+      label="Assigned to"
+      listboxProps={{
+        itemClasses: {
+          base: [
+            "rounded-md",
+            "text-default-500",
+            "transition-opacity",
+            "data-[hover=true]:text-foreground",
+            "data-[hover=true]:bg-default-100",
+            "dark:data-[hover=true]:bg-default-50",
+            "data-[selectable=true]:focus:bg-default-50",
+            "data-[pressed=true]:opacity-70",
+            "data-[focus-visible=true]:ring-default-500",
+          ],
+        },
+      }}
+      popoverProps={{
+        classNames: {
+          base: "before:bg-default-200",
+          content: "p-0 border-small border-divider bg-background",
+        },
+      }}
+      renderValue={(items) => {
+        return items.map((item) => (
+          <div key={item.key} className="flex items-center gap-2">
+            <Avatar
+              alt={item.data.name}
+              className="flex-shrink-0"
+              size="sm"
+              src={item.data.avatar}
+            />
+            <div className="flex flex-col">
+              <span>{item.data.name}</span>
+              <span className="text-default-500 text-tiny">({item.data.email})</span>
+            </div>
+          </div>
+        ));
+      }}
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/custom-styles.ts b/apps/docs/content/components/select/custom-styles.ts
index ae2db45e8a..da3ea9093a 100644
--- a/apps/docs/content/components/select/custom-styles.ts
+++ b/apps/docs/content/components/select/custom-styles.ts
@@ -1,277 +1,7 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      className="max-w-xs"
-      variant="bordered"
-      classNames={{
-        label: "group-data-[filled=true]:-translate-y-5",
-        trigger: "min-h-16",
-        listboxWrapper: "max-h-[400px]",
-      }}
-      listboxProps={{
-        itemClasses: {
-          base: [
-            "rounded-md",
-            "text-default-500",
-            "transition-opacity",
-            "data-[hover=true]:text-foreground",
-            "data-[hover=true]:bg-default-100",
-            "dark:data-[hover=true]:bg-default-50",
-            "data-[selectable=true]:focus:bg-default-50",
-            "data-[pressed=true]:opacity-70",
-            "data-[focus-visible=true]:ring-default-500",
-          ],
-        },
-      }}
-      popoverProps={{
-        classNames: {
-          base: "before:bg-default-200",
-          content: "p-0 border-small border-divider bg-background",
-        },
-      }}
-      renderValue={(items) => {
-        return items.map((item) => (
-          <div key={item.key} className="flex items-center gap-2">
-            <Avatar
-              alt={item.data.name}
-              className="flex-shrink-0"
-              size="sm"
-              src={item.data.avatar}
-            />
-            <div className="flex flex-col">
-              <span>{item.data.name}</span>
-              <span className="text-default-500 text-tiny">({item.data.email})</span>
-            </div>
-          </div>
-        ));
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/description.raw.jsx b/apps/docs/content/components/select/description.raw.jsx
new file mode 100644
index 0000000000..ead30aaa95
--- /dev/null
+++ b/apps/docs/content/components/select/description.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      description="The second most popular pet in the world"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/description.ts b/apps/docs/content/components/select/description.ts
index b39c36847d..aeb6340b6b 100644
--- a/apps/docs/content/components/select/description.ts
+++ b/apps/docs/content/components/select/description.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      description="The second most popular pet in the world"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/disabled-items.raw.jsx b/apps/docs/content/components/select/disabled-items.raw.jsx
new file mode 100644
index 0000000000..fcebedbb83
--- /dev/null
+++ b/apps/docs/content/components/select/disabled-items.raw.jsx
@@ -0,0 +1,32 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/disabled-items.ts b/apps/docs/content/components/select/disabled-items.ts
index 64bed55e89..4ff907eed2 100644
--- a/apps/docs/content/components/select/disabled-items.ts
+++ b/apps/docs/content/components/select/disabled-items.ts
@@ -1,42 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      disabledKeys={["zebra", "tiger", "lion", "elephant", "crocodile", "whale"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./disabled-items.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/disabled.raw.jsx b/apps/docs/content/components/select/disabled.raw.jsx
new file mode 100644
index 0000000000..401ae52a4d
--- /dev/null
+++ b/apps/docs/content/components/select/disabled.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      isDisabled
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/disabled.ts b/apps/docs/content/components/select/disabled.ts
index dc9b756812..1a215cc91f 100644
--- a/apps/docs/content/components/select/disabled.ts
+++ b/apps/docs/content/components/select/disabled.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      isDisabled
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/dynamic.raw.jsx b/apps/docs/content/components/select/dynamic.raw.jsx
new file mode 100644
index 0000000000..5796f069eb
--- /dev/null
+++ b/apps/docs/content/components/select/dynamic.raw.jsx
@@ -0,0 +1,30 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      items={animals}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {(animal) => <SelectItem>{animal.label}</SelectItem>}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/dynamic.ts b/apps/docs/content/components/select/dynamic.ts
index 6a7c5304c9..5d3c97bb9a 100644
--- a/apps/docs/content/components/select/dynamic.ts
+++ b/apps/docs/content/components/select/dynamic.ts
@@ -1,38 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={animals}
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-    >
-      {(animal) => <SelectItem>{animal.label}</SelectItem>}
-    </Select>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/error-message.raw.jsx b/apps/docs/content/components/select/error-message.raw.jsx
new file mode 100644
index 0000000000..a4499144e7
--- /dev/null
+++ b/apps/docs/content/components/select/error-message.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState(new Set([]));
+  const [touched, setTouched] = React.useState(false);
+
+  const isValid = value.has("cat");
+
+  return (
+    <Select
+      className="max-w-xs"
+      description="The second most popular pet in the world"
+      errorMessage={isValid || !touched ? "" : "You must select a cat"}
+      isInvalid={isValid || !touched ? false : true}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      selectedKeys={value}
+      variant="bordered"
+      onClose={() => setTouched(true)}
+      onSelectionChange={setValue}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/error-message.ts b/apps/docs/content/components/select/error-message.ts
index 416a1d49bb..fb8101b132 100644
--- a/apps/docs/content/components/select/error-message.ts
+++ b/apps/docs/content/components/select/error-message.ts
@@ -1,53 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState(new Set([]));
-  const [touched, setTouched] = React.useState(false);
-
-  const isValid = value.has("cat");
-
-  return (
-    <Select
-      label="Favorite Animal"
-      variant="bordered"
-      placeholder="Select an animal"
-      description="The second most popular pet in the world"
-      errorMessage={isValid || !touched ? "" : "You must select a cat"}
-      isInvalid={isValid || !touched ? false : true}
-      selectedKeys={value}
-      className="max-w-xs"
-      onSelectionChange={setValue}
-      onClose={() => setTouched(true)}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/index.ts b/apps/docs/content/components/select/index.ts
index 1b28504d4d..2f5a7e5f47 100644
--- a/apps/docs/content/components/select/index.ts
+++ b/apps/docs/content/components/select/index.ts
@@ -27,6 +27,10 @@ import multipleControlledOnChange from "./multiple-controlled-onchange";
 import multipleWithChips from "./multiple-chips";
 import customSelectorIcon from "./custom-selector-icon";
 import customStyles from "./custom-styles";
+import virtualization from "./virtualization";
+import virtualizationTenThousand from "./virtualization-ten-thousand";
+import virtualizationCustomItemHeight from "./virtualization-custom-item-height";
+import virtualizationMaxListboxHeight from "./virtualization-max-listbox-height";
 
 export const selectContent = {
   usage,
@@ -58,4 +62,8 @@ export const selectContent = {
   multipleWithChips,
   customSelectorIcon,
   customStyles,
+  virtualization,
+  virtualizationTenThousand,
+  virtualizationCustomItemHeight,
+  virtualizationMaxListboxHeight,
 };
diff --git a/apps/docs/content/components/select/item-start-content.raw.jsx b/apps/docs/content/components/select/item-start-content.raw.jsx
new file mode 100644
index 0000000000..9006a2bf1b
--- /dev/null
+++ b/apps/docs/content/components/select/item-start-content.raw.jsx
@@ -0,0 +1,68 @@
+import {Select, SelectItem, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Select className="max-w-xs" label="Select country">
+      <SelectItem
+        key="argentina"
+        startContent={
+          <Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />
+        }
+      >
+        Argentina
+      </SelectItem>
+      <SelectItem
+        key="venezuela"
+        startContent={
+          <Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />
+        }
+      >
+        Venezuela
+      </SelectItem>
+      <SelectItem
+        key="brazil"
+        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
+      >
+        Brazil
+      </SelectItem>
+      <SelectItem
+        key="switzerland"
+        startContent={
+          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
+        }
+      >
+        Switzerland
+      </SelectItem>
+      <SelectItem
+        key="germany"
+        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
+      >
+        Germany
+      </SelectItem>
+      <SelectItem
+        key="spain"
+        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
+      >
+        Spain
+      </SelectItem>
+      <SelectItem
+        key="france"
+        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
+      >
+        France
+      </SelectItem>
+      <SelectItem
+        key="italy"
+        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
+      >
+        Italy
+      </SelectItem>
+      <SelectItem
+        key="mexico"
+        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
+      >
+        Mexico
+      </SelectItem>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/item-start-content.ts b/apps/docs/content/components/select/item-start-content.ts
index ddf3818b25..294a22e6b2 100644
--- a/apps/docs/content/components/select/item-start-content.ts
+++ b/apps/docs/content/components/select/item-start-content.ts
@@ -1,70 +1,4 @@
-const App = `import {Select, SelectItem, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Select
-      className="max-w-xs"
-      label="Select country"
-    >
-      <SelectItem
-        key="argentina"
-        startContent={<Avatar alt="Argentina" className="w-6 h-6" src="https://flagcdn.com/ar.svg" />}
-      >
-        Argentina
-      </SelectItem>
-      <SelectItem
-        key="venezuela"
-        startContent={<Avatar alt="Venezuela" className="w-6 h-6" src="https://flagcdn.com/ve.svg" />}
-      >
-        Venezuela
-      </SelectItem>
-      <SelectItem
-        key="brazil"
-        startContent={<Avatar alt="Brazil" className="w-6 h-6" src="https://flagcdn.com/br.svg" />}
-      >
-        Brazil
-      </SelectItem>
-      <SelectItem
-        key="switzerland"
-        startContent={
-          <Avatar alt="Switzerland" className="w-6 h-6" src="https://flagcdn.com/ch.svg" />
-        }
-      >
-        Switzerland
-      </SelectItem>
-      <SelectItem
-        key="germany"
-        startContent={<Avatar alt="Germany" className="w-6 h-6" src="https://flagcdn.com/de.svg" />}
-      >
-        Germany
-      </SelectItem>
-      <SelectItem
-        key="spain"
-        startContent={<Avatar alt="Spain" className="w-6 h-6" src="https://flagcdn.com/es.svg" />}
-      >
-        Spain
-      </SelectItem>
-      <SelectItem
-        key="france"
-        startContent={<Avatar alt="France" className="w-6 h-6" src="https://flagcdn.com/fr.svg" />}
-      >
-        France
-      </SelectItem>
-      <SelectItem
-        key="italy"
-        startContent={<Avatar alt="Italy" className="w-6 h-6" src="https://flagcdn.com/it.svg" />}
-      >
-        Italy
-      </SelectItem>
-      <SelectItem
-        key="mexico"
-        startContent={<Avatar alt="Mexico" className="w-6 h-6" src="https://flagcdn.com/mx.svg" />}
-      >
-        Mexico
-      </SelectItem>
-    </Select>
-  );
-}`;
+import App from "./item-start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/label-placements.raw.jsx b/apps/docs/content/components/select/label-placements.raw.jsx
new file mode 100644
index 0000000000..86982bafb1
--- /dev/null
+++ b/apps/docs/content/components/select/label-placements.raw.jsx
@@ -0,0 +1,61 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const placements = ["inside", "outside", "outside-left"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">Without placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Select
+              key={placement}
+              className="max-w-xs"
+              label="Favorite Animal"
+              labelPlacement={placement}
+            >
+              {animals.map((animal) => (
+                <SelectItem key={animal.key}>{animal.label}</SelectItem>
+              ))}
+            </Select>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500 text-small">With placeholder</h3>
+        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
+          {placements.map((placement) => (
+            <Select
+              key={placement}
+              className="max-w-xs"
+              label="Favorite Animal"
+              labelPlacement={placement}
+              placeholder="Select an animal"
+            >
+              {animals.map((animal) => (
+                <SelectItem key={animal.key}>{animal.label}</SelectItem>
+              ))}
+            </Select>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/label-placements.ts b/apps/docs/content/components/select/label-placements.ts
index a147bb84a7..cd2a65d352 100644
--- a/apps/docs/content/components/select/label-placements.ts
+++ b/apps/docs/content/components/select/label-placements.ts
@@ -1,75 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const placements = [
-    "inside",
-    "outside",
-    "outside-left",
-  ];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">Without placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Select
-              labelPlacement={placement}
-              label="Favorite Animal"
-              className="max-w-xs"
-            >
-              {animals.map((animal) => (
-                <SelectItem key={animal.key}>
-                  {animal.label}
-                </SelectItem>
-              ))}
-            </Select>
-          ))}
-        </div>
-      </div>  
-      <div className="flex flex-col gap-2">
-        <h3 className="text-default-500 text-small">With placeholder</h3>
-        <div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
-          {placements.map((placement) => (
-            <Select
-              labelPlacement={placement}
-              label="Favorite Animal"
-              placeholder="Select an animal"
-              className="max-w-xs"
-            >
-              {animals.map((animal) => (
-                <SelectItem key={animal.key}>
-                  {animal.label}
-                </SelectItem>
-              ))}
-            </Select>
-          ))}
-        </div>
-      </div>  
-    </div>  
-  );
-}`;
+import App from "./label-placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-chips.raw.jsx b/apps/docs/content/components/select/multiple-chips.raw.jsx
new file mode 100644
index 0000000000..3c0dd44cad
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-chips.raw.jsx
@@ -0,0 +1,243 @@
+import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "min-h-12 py-2",
+      }}
+      isMultiline={true}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items) => {
+        return (
+          <div className="flex flex-wrap gap-2">
+            {items.map((item) => (
+              <Chip key={item.key}>{item.data.name}</Chip>
+            ))}
+          </div>
+        );
+      }}
+      selectionMode="multiple"
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-chips.raw.tsx b/apps/docs/content/components/select/multiple-chips.raw.tsx
new file mode 100644
index 0000000000..18f206aed9
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-chips.raw.tsx
@@ -0,0 +1,255 @@
+import React from "react";
+import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react";
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
+    email: "mia.robinson@example.com",
+  },
+];
+
+type User = {
+  id: number;
+  name: string;
+  role: string;
+  team: string;
+  status: string;
+  age: string;
+  avatar: string;
+  email: string;
+};
+
+export default function App() {
+  return (
+    <Select
+      classNames={{
+        base: "max-w-xs",
+        trigger: "min-h-12 py-2",
+      }}
+      isMultiline={true}
+      items={users}
+      label="Assigned to"
+      labelPlacement="outside"
+      placeholder="Select a user"
+      renderValue={(items: SelectedItems<User>) => {
+        return (
+          <div className="flex flex-wrap gap-2">
+            {items.map((item) => (
+              <Chip key={item.key}>{item.data?.name}</Chip>
+            ))}
+          </div>
+        );
+      }}
+      selectionMode="multiple"
+      variant="bordered"
+    >
+      {(user) => (
+        <SelectItem key={user.id} textValue={user.name}>
+          <div className="flex gap-2 items-center">
+            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
+            <div className="flex flex-col">
+              <span className="text-small">{user.name}</span>
+              <span className="text-tiny text-default-400">{user.email}</span>
+            </div>
+          </div>
+        </SelectItem>
+      )}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-chips.ts b/apps/docs/content/components/select/multiple-chips.ts
index 1919c994ea..0c169cde37 100644
--- a/apps/docs/content/components/select/multiple-chips.ts
+++ b/apps/docs/content/components/select/multiple-chips.ts
@@ -1,309 +1,12 @@
-const data = `export const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png",
-    email: "mia.robinson@example.com",
-  },
-];`;
-
-const App = `import {Select, SelectItem, Avatar, Chip} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      variant="bordered"
-      isMultiline={true}
-      selectionMode="multiple"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "min-h-12 py-2",
-      }}
-      renderValue={(items) => {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {items.map((item) => (
-              <Chip key={item.key}>{item.data.name}</Chip>
-            ))}
-          </div>
-        );
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Avatar, Chip, SelectedItems} from "@nextui-org/react";
-import {users} from "./data";
-
-type User = {
-  id: number;
-  name: string;
-  role: string;
-  team: string;
-  status: string;
-  age: string;
-  avatar: string;
-  email: string;
-};
-
-export default function App() {
-  return (
-    <Select
-      items={users}
-      label="Assigned to"
-      variant="bordered"
-      isMultiline={true}
-      selectionMode="multiple"
-      placeholder="Select a user"
-      labelPlacement="outside"
-      classNames={{
-        base: "max-w-xs",
-        trigger: "min-h-12 py-2",
-      }}
-      renderValue={(items: SelectedItems<User>) => {
-        return (
-          <div className="flex flex-wrap gap-2">
-            {items.map((item) => (
-              <Chip key={item.key}>{item.data.name}</Chip>
-            ))}
-          </div>
-        );
-      }}
-    >
-      {(user) => (
-        <SelectItem key={user.id} textValue={user.name}>
-          <div className="flex gap-2 items-center">
-            <Avatar alt={user.name} className="flex-shrink-0" size="sm" src={user.avatar} />
-            <div className="flex flex-col">
-              <span className="text-small">{user.name}</span>
-              <span className="text-tiny text-default-400">{user.email}</span>
-            </div>
-          </div>
-        </SelectItem>
-      )}
-    </Select>
-  );
-}`;
+import App from "./multiple-chips.raw.jsx?raw";
+import AppTs from "./multiple-chips.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx
new file mode 100644
index 0000000000..1b79957568
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState(new Set([]));
+
+  const handleSelectionChange = (e) => {
+    setValues(new Set(e.target.value.split(",")));
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx
new file mode 100644
index 0000000000..d171292536
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.raw.tsx
@@ -0,0 +1,46 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState<Selection>(new Set([]));
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValues(new Set(e.target.value.split(",")));
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled-onchange.ts b/apps/docs/content/components/select/multiple-controlled-onchange.ts
index e12d5cf7d3..a8b2a21759 100644
--- a/apps/docs/content/components/select/multiple-controlled-onchange.ts
+++ b/apps/docs/content/components/select/multiple-controlled-onchange.ts
@@ -1,89 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState(new Set([]));
-
-  const handleSelectionChange = (e) => {
-    setValues(new Set(e.target.value.split(",")));
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>      
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState<Selection>(new Set([]));
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setValues(new Set(e.target.value.split(",")));
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>      
-  );
-}`;
+import App from "./multiple-controlled-onchange.raw.jsx?raw";
+import AppTs from "./multiple-controlled-onchange.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple-controlled.raw.jsx b/apps/docs/content/components/select/multiple-controlled.raw.jsx
new file mode 100644
index 0000000000..0d18ab0e6e
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled.raw.jsx
@@ -0,0 +1,39 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState(new Set(["cat", "dog"]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onSelectionChange={setValues}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled.raw.tsx b/apps/docs/content/components/select/multiple-controlled.raw.tsx
new file mode 100644
index 0000000000..c9b9d3f8bf
--- /dev/null
+++ b/apps/docs/content/components/select/multiple-controlled.raw.tsx
@@ -0,0 +1,42 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [values, setValues] = React.useState<Selection>(new Set(["cat", "dog"]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={values}
+        selectionMode="multiple"
+        onSelectionChange={setValues}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple-controlled.ts b/apps/docs/content/components/select/multiple-controlled.ts
index 2bfc63c6c7..ebc28a01db 100644
--- a/apps/docs/content/components/select/multiple-controlled.ts
+++ b/apps/docs/content/components/select/multiple-controlled.ts
@@ -1,81 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState(new Set(["cat", "dog"]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onSelectionChange={setValues}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [values, setValues] = React.useState<Selection>(new Set(["cat", "dog"]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        selectionMode="multiple"
-        placeholder="Select an animal"
-        selectedKeys={values}
-        className="max-w-xs"
-        onSelectionChange={setValues}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {Array.from(values).join(", ")}</p>
-    </div>
-  );
-}`;
+import App from "./multiple-controlled.raw.jsx?raw";
+import AppTs from "./multiple-controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.ts": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/multiple.raw.jsx b/apps/docs/content/components/select/multiple.raw.jsx
new file mode 100644
index 0000000000..71bf4b1465
--- /dev/null
+++ b/apps/docs/content/components/select/multiple.raw.jsx
@@ -0,0 +1,32 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      selectionMode="multiple"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/multiple.ts b/apps/docs/content/components/select/multiple.ts
index 5edb2da50f..8ad090fa27 100644
--- a/apps/docs/content/components/select/multiple.ts
+++ b/apps/docs/content/components/select/multiple.ts
@@ -1,42 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      selectionMode="multiple"
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/open-state.raw.jsx b/apps/docs/content/components/select/open-state.raw.jsx
new file mode 100644
index 0000000000..bd553f9d07
--- /dev/null
+++ b/apps/docs/content/components/select/open-state.raw.jsx
@@ -0,0 +1,41 @@
+import {Select, SelectItem, Button} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex w-full max-w-xs items-center gap-2">
+      <Select
+        className="max-w-xs"
+        defaultSelectedKeys={["cat"]}
+        isOpen={isOpen}
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        onOpenChange={(open) => open !== isOpen && setIsOpen(open)}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <Button aria-label="Open" aria-pressed={isOpen} onPress={() => setIsOpen(!isOpen)}>
+        {isOpen ? "Close" : "Open"}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/open-state.ts b/apps/docs/content/components/select/open-state.ts
index 97e13a99a7..5d40fb0bf0 100644
--- a/apps/docs/content/components/select/open-state.ts
+++ b/apps/docs/content/components/select/open-state.ts
@@ -1,51 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem, Button} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex w-full max-w-xs items-center gap-2">
-      <Select
-        isOpen={isOpen}
-        label="Favorite Animal"
-        placeholder="Select an animal"
-        defaultSelectedKeys={["cat"]}
-        onOpenChange={(open) => open !== isOpen && setIsOpen(open)}
-        className="max-w-xs"
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <Button aria-label="Open" aria-pressed={isOpen} onPress={() => setIsOpen(!isOpen)}>
-        {isOpen ? "Close" : "Open"}
-      </Button>
-    </div>
-  );
-}`;
+import App from "./open-state.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/radius.raw.jsx b/apps/docs/content/components/select/radius.raw.jsx
new file mode 100644
index 0000000000..9375e69cb6
--- /dev/null
+++ b/apps/docs/content/components/select/radius.raw.jsx
@@ -0,0 +1,40 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="w-full flex flex-row flex-wrap gap-4">
+      {radius.map((r) => (
+        <Select
+          key={r}
+          className="max-w-[45%]"
+          defaultSelectedKeys={["cat"]}
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          radius={r}
+        >
+          {animals.map((animal) => (
+            <SelectItem key={animal.key}>{animal.label}</SelectItem>
+          ))}
+        </Select>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/radius.ts b/apps/docs/content/components/select/radius.ts
index 543c0c91df..7b78db1ce0 100644
--- a/apps/docs/content/components/select/radius.ts
+++ b/apps/docs/content/components/select/radius.ts
@@ -1,56 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="w-full flex flex-row flex-wrap gap-4">
-      {radius.map((r) => (
-        <Select
-          key={r}
-          radius={r}
-          label="Favorite Animal"
-          placeholder="Select an animal"
-          defaultSelectedKeys={["cat"]}
-          className="max-w-[45%]"
-        >
-          {animals.map((animal) => (
-            <SelectItem key={animal.key}>
-              {animal.label}
-            </SelectItem>
-          ))}
-        </Select>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/required.raw.jsx b/apps/docs/content/components/select/required.raw.jsx
new file mode 100644
index 0000000000..9a9f4f0cbd
--- /dev/null
+++ b/apps/docs/content/components/select/required.raw.jsx
@@ -0,0 +1,33 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      isRequired
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/required.ts b/apps/docs/content/components/select/required.ts
index f6447eba53..b50b781e6f 100644
--- a/apps/docs/content/components/select/required.ts
+++ b/apps/docs/content/components/select/required.ts
@@ -1,43 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      isRequired
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/sections.raw.jsx b/apps/docs/content/components/select/sections.raw.jsx
new file mode 100644
index 0000000000..30a61aa009
--- /dev/null
+++ b/apps/docs/content/components/select/sections.raw.jsx
@@ -0,0 +1,28 @@
+import {Select, SelectItem, SelectSection} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Select className="max-w-xs" label="Favorite Animal" placeholder="Select an animal">
+      <SelectSection showDivider title="Mammals">
+        <SelectItem key="Lion">Lion</SelectItem>
+        <SelectItem key="Tiger">Tiger</SelectItem>
+        <SelectItem key="Elephant">Elephant</SelectItem>
+        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
+        <SelectItem key="Panda">Panda</SelectItem>
+        <SelectItem key="Giraffe">Giraffe</SelectItem>
+        <SelectItem key="Zebra">Zebra</SelectItem>
+        <SelectItem key="Cheetah">Cheetah</SelectItem>
+      </SelectSection>
+      <SelectSection title="Birds">
+        <SelectItem key="Eagle">Eagle</SelectItem>
+        <SelectItem key="Parrot">Parrot</SelectItem>
+        <SelectItem key="Penguin">Penguin</SelectItem>
+        <SelectItem key="Ostrich">Ostrich</SelectItem>
+        <SelectItem key="Peacock">Peacock</SelectItem>
+        <SelectItem key="Swan">Swan</SelectItem>
+        <SelectItem key="Falcon">Falcon</SelectItem>
+        <SelectItem key="Flamingo">Flamingo</SelectItem>
+      </SelectSection>
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/sections.ts b/apps/docs/content/components/select/sections.ts
index e1c02ebdb4..17cd360ea3 100644
--- a/apps/docs/content/components/select/sections.ts
+++ b/apps/docs/content/components/select/sections.ts
@@ -1,35 +1,4 @@
-const App = `import {Select, SelectItem, SelectSection} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      className="max-w-xs"
-    >
-      <SelectSection showDivider title="Mammals">
-        <SelectItem key="Lion">Lion</SelectItem>
-        <SelectItem key="Tiger">Tiger</SelectItem>
-        <SelectItem key="Elephant">Elephant</SelectItem>
-        <SelectItem key="Kangaroo">Kangaroo</SelectItem>
-        <SelectItem key="Panda">Panda</SelectItem>
-        <SelectItem key="Giraffe">Giraffe</SelectItem>
-        <SelectItem key="Zebra">Zebra</SelectItem>
-        <SelectItem key="Cheetah">Cheetah</SelectItem>
-      </SelectSection>
-      <SelectSection title="Birds">
-        <SelectItem key="Eagle">Eagle</SelectItem>
-        <SelectItem key="Parrot">Parrot</SelectItem>
-        <SelectItem key="Penguin">Penguin</SelectItem>
-        <SelectItem key="Ostrich">Ostrich</SelectItem>
-        <SelectItem key="Peacock">Peacock</SelectItem>
-        <SelectItem key="Swan">Swan</SelectItem>
-        <SelectItem key="Falcon">Falcon</SelectItem>
-        <SelectItem key="Flamingo">Flamingo</SelectItem>
-      </SelectSection>
-    </Select>
-  );
-}`;
+import App from "./sections.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.jsx b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx
new file mode 100644
index 0000000000..43b41a4e27
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled-onchange.raw.jsx
@@ -0,0 +1,43 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  const handleSelectionChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={[value]}
+        variant="bordered"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled-onchange.raw.tsx b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx
new file mode 100644
index 0000000000..c5199449ce
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled-onchange.raw.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState<string>("");
+
+  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={[value]}
+        variant="bordered"
+        onChange={handleSelectionChange}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled-onchange.ts b/apps/docs/content/components/select/single-controlled-onchange.ts
index b74254621a..3b52be133b 100644
--- a/apps/docs/content/components/select/single-controlled-onchange.ts
+++ b/apps/docs/content/components/select/single-controlled-onchange.ts
@@ -1,89 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  const handleSelectionChange = (e) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={[value]}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<string>("");
-
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setValue(e.target.value);
-  };
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={[value]}
-        className="max-w-xs"
-        onChange={handleSelectionChange}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
+import App from "./single-controlled-onchange.raw.jsx?raw";
+import AppTs from "./single-controlled-onchange.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/single-controlled.raw.jsx b/apps/docs/content/components/select/single-controlled.raw.jsx
new file mode 100644
index 0000000000..a066013863
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled.raw.jsx
@@ -0,0 +1,39 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState(new Set([]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={value}
+        variant="bordered"
+        onSelectionChange={setValue}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-small text-default-500">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled.raw.tsx b/apps/docs/content/components/select/single-controlled.raw.tsx
new file mode 100644
index 0000000000..13a1a847c0
--- /dev/null
+++ b/apps/docs/content/components/select/single-controlled.raw.tsx
@@ -0,0 +1,42 @@
+import type {Selection} from "@nextui-org/react";
+
+import React from "react";
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const [value, setValue] = React.useState<Selection>(new Set([]));
+
+  return (
+    <div className="flex w-full max-w-xs flex-col gap-2">
+      <Select
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectedKeys={value}
+        variant="bordered"
+        onSelectionChange={setValue}
+      >
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <p className="text-default-500 text-small">Selected: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/single-controlled.ts b/apps/docs/content/components/select/single-controlled.ts
index cae9bd5401..44c55e0568 100644
--- a/apps/docs/content/components/select/single-controlled.ts
+++ b/apps/docs/content/components/select/single-controlled.ts
@@ -1,81 +1,12 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const AppTs = `import {Select, SelectItem, Selection} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState<Selection>(new Set([]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={value}
-        className="max-w-xs"
-        onSelectionChange={setValue}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-default-500 text-small">Selected: {value}</p>
-    </div>
-  );
-}`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const [value, setValue] = React.useState(new Set([]));
-
-  return (
-    <div className="flex w-full max-w-xs flex-col gap-2">
-      <Select
-        label="Favorite Animal"
-        variant="bordered"
-        placeholder="Select an animal"
-        selectedKeys={value}
-        className="max-w-xs"
-        onSelectionChange={setValue}
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <p className="text-small text-default-500">Selected: {value}</p>
-    </div>
-  );
-}`;
+import App from "./single-controlled.raw.jsx?raw";
+import AppTs from "./single-controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/sizes.raw.jsx b/apps/docs/content/components/select/sizes.raw.jsx
new file mode 100644
index 0000000000..afaeafc7a0
--- /dev/null
+++ b/apps/docs/content/components/select/sizes.raw.jsx
@@ -0,0 +1,45 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {sizes.map((size) => (
+        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Select className="max-w-xs" label="Select an animal" size={size}>
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+          <Select
+            className="max-w-xs"
+            label="Favorite Animal"
+            placeholder="Select an animal"
+            size={size}
+          >
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/sizes.ts b/apps/docs/content/components/select/sizes.ts
index 02b1cde2d0..85a2f5b30b 100644
--- a/apps/docs/content/components/select/sizes.ts
+++ b/apps/docs/content/components/select/sizes.ts
@@ -1,61 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const sizes = ["sm", "md", "lg"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {sizes.map((size) => (
-        <div key={size} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Select 
-            size={size}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-          <Select
-            size={size}
-            label="Favorite Animal"
-            placeholder="Select an animal"
-            className="max-w-xs"
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/start-content.raw.jsx b/apps/docs/content/components/select/start-content.raw.jsx
new file mode 100644
index 0000000000..9164a68d79
--- /dev/null
+++ b/apps/docs/content/components/select/start-content.raw.jsx
@@ -0,0 +1,69 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const PetIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      startContent={<PetIcon />}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/start-content.ts b/apps/docs/content/components/select/start-content.ts
index 7b896eaf3f..59191d72a7 100644
--- a/apps/docs/content/components/select/start-content.ts
+++ b/apps/docs/content/components/select/start-content.ts
@@ -1,78 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const PetIcon = `export const PetIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
-      fill="currentColor"
-    />
-    <path
-      d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
-      fill="currentColor"
-    />
-    <path
-      d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
-      fill="currentColor"
-    />
-    <path
-      d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {PetIcon} from "./PetIcon";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      className="max-w-xs"
-      defaultSelectedKeys={["cat"]}
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      startContent={<PetIcon />}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>{animal.label}</SelectItem>
-      ))}
-    </Select>
-  );
-}
-`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/PetIcon.jsx": PetIcon,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/usage.raw.jsx b/apps/docs/content/components/select/usage.raw.jsx
new file mode 100644
index 0000000000..1337231116
--- /dev/null
+++ b/apps/docs/content/components/select/usage.raw.jsx
@@ -0,0 +1,34 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select className="max-w-xs" label="Select an animal">
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+      <Select className="max-w-xs" label="Favorite Animal" placeholder="Select an animal">
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/usage.ts b/apps/docs/content/components/select/usage.ts
index d676e3edb7..1118304c37 100644
--- a/apps/docs/content/components/select/usage.ts
+++ b/apps/docs/content/components/select/usage.ts
@@ -1,53 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
-      <Select 
-        label="Select an animal" 
-        className="max-w-xs" 
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-      <Select
-        label="Favorite Animal"
-        placeholder="Select an animal"
-        className="max-w-xs"
-      >
-        {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-            {animal.label}
-          </SelectItem>
-        ))}
-      </Select>
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/variants.raw.jsx b/apps/docs/content/components/select/variants.raw.jsx
new file mode 100644
index 0000000000..78c5577ca7
--- /dev/null
+++ b/apps/docs/content/components/select/variants.raw.jsx
@@ -0,0 +1,45 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  const variants = ["flat", "bordered", "underlined", "faded"];
+
+  return (
+    <div className="w-full flex flex-col gap-4">
+      {variants.map((variant) => (
+        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <Select className="max-w-xs" label="Select an animal" variant={variant}>
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+          <Select
+            className="max-w-xs"
+            label="Favorite Animal"
+            placeholder="Select an animal"
+            variant={variant}
+          >
+            {animals.map((animal) => (
+              <SelectItem key={animal.key}>{animal.label}</SelectItem>
+            ))}
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/variants.ts b/apps/docs/content/components/select/variants.ts
index 040be0e123..ddea95fb2e 100644
--- a/apps/docs/content/components/select/variants.ts
+++ b/apps/docs/content/components/select/variants.ts
@@ -1,61 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  const variants = ["flat", "bordered", "underlined", "faded"];
-
-  return (
-    <div className="w-full flex flex-col gap-4">
-      {variants.map((variant) => (
-        <div key={variant} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-          <Select 
-            variant={variant}
-            label="Select an animal" 
-            className="max-w-xs" 
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-          <Select
-            variant={variant}
-            label="Favorite Animal"
-            placeholder="Select an animal"
-            className="max-w-xs"
-          >
-            {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                {animal.label}
-              </SelectItem>
-            ))}
-          </Select>
-        </div>
-      ))}  
-    </div>  
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx b/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx
new file mode 100644
index 0000000000..efc2db30c2
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-custom-item-height.raw.jsx
@@ -0,0 +1,56 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        itemHeight={40}
+        label={"Select from 1000 items"}
+        maxListboxHeight={400}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/virtualization-custom-item-height.ts b/apps/docs/content/components/select/virtualization-custom-item-height.ts
new file mode 100644
index 0000000000..fd9a236015
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-custom-item-height.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-custom-item-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx
new file mode 100644
index 0000000000..8aafa4625c
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-max-listbox-height.raw.jsx
@@ -0,0 +1,55 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        label={"Select from 1000 items"}
+        maxListboxHeight={400}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/virtualization-max-listbox-height.ts b/apps/docs/content/components/select/virtualization-max-listbox-height.ts
new file mode 100644
index 0000000000..c23ef32193
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-max-listbox-height.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-max-listbox-height.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx
new file mode 100644
index 0000000000..b5ec3606bd
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-ten-thousand.raw.jsx
@@ -0,0 +1,54 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(10000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        label={"Select from 10000 items"}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/virtualization-ten-thousand.ts b/apps/docs/content/components/select/virtualization-ten-thousand.ts
new file mode 100644
index 0000000000..1b8e486cb5
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization-ten-thousand.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization-ten-thousand.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/select/virtualization.raw.jsx b/apps/docs/content/components/select/virtualization.raw.jsx
new file mode 100644
index 0000000000..5701198948
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization.raw.jsx
@@ -0,0 +1,54 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+const generateItems = (n) => {
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  const dataset = [];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+};
+
+export default function App() {
+  const items = generateItems(1000);
+
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <Select
+        isVirtualized
+        className="max-w-xs"
+        label={"Select from 1000 items"}
+        placeholder="Select..."
+      >
+        {items.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/virtualization.ts b/apps/docs/content/components/select/virtualization.ts
new file mode 100644
index 0000000000..e40cbd641f
--- /dev/null
+++ b/apps/docs/content/components/select/virtualization.ts
@@ -0,0 +1,9 @@
+import App from "./virtualization.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/select/without-scroll-shadow.raw.jsx b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx
new file mode 100644
index 0000000000..3aab534e2b
--- /dev/null
+++ b/apps/docs/content/components/select/without-scroll-shadow.raw.jsx
@@ -0,0 +1,35 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export default function App() {
+  return (
+    <Select
+      className="max-w-xs"
+      defaultSelectedKeys={["cat"]}
+      label="Favorite Animal"
+      placeholder="Select an animal"
+      scrollShadowProps={{
+        isEnabled: false,
+      }}
+    >
+      {animals.map((animal) => (
+        <SelectItem key={animal.key}>{animal.label}</SelectItem>
+      ))}
+    </Select>
+  );
+}
diff --git a/apps/docs/content/components/select/without-scroll-shadow.ts b/apps/docs/content/components/select/without-scroll-shadow.ts
index 7a4d8b585d..1cfe3080fa 100644
--- a/apps/docs/content/components/select/without-scroll-shadow.ts
+++ b/apps/docs/content/components/select/without-scroll-shadow.ts
@@ -1,45 +1,7 @@
-const data = `export const animals = [
-  {key: "cat", label: "Cat"},
-  {key: "dog", label: "Dog"},
-  {key: "elephant", label: "Elephant"},
-  {key: "lion", label: "Lion"},
-  {key: "tiger", label: "Tiger"},
-  {key: "giraffe", label: "Giraffe"},
-  {key: "dolphin", label: "Dolphin"},
-  {key: "penguin", label: "Penguin"},
-  {key: "zebra", label: "Zebra"},
-  {key: "shark", label: "Shark"},
-  {key: "whale", label: "Whale"},
-  {key: "otter", label: "Otter"},
-  {key: "crocodile", label: "Crocodile"}
-];`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-
-export default function App() {
-  return (
-    <Select
-      label="Favorite Animal"
-      placeholder="Select an animal"
-      defaultSelectedKeys={["cat"]}
-      className="max-w-xs"
-      scrollShadowProps={{
-        isEnabled: false
-      }}
-    >
-      {animals.map((animal) => (
-        <SelectItem key={animal.key}>
-          {animal.label}
-        </SelectItem>
-      ))}
-    </Select>
-  );
-}`;
+import App from "./without-scroll-shadow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/skeleton/loaded.raw.jsx b/apps/docs/content/components/skeleton/loaded.raw.jsx
new file mode 100644
index 0000000000..44516e9a06
--- /dev/null
+++ b/apps/docs/content/components/skeleton/loaded.raw.jsx
@@ -0,0 +1,33 @@
+import {Card, Skeleton, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  const toggleLoad = () => {
+    setIsLoaded(!isLoaded);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Card className="w-[200px] space-y-5 p-4" radius="lg">
+        <Skeleton className="rounded-lg" isLoaded={isLoaded}>
+          <div className="h-24 rounded-lg bg-secondary" />
+        </Skeleton>
+        <div className="space-y-3">
+          <Skeleton className="w-3/5 rounded-lg" isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary" />
+          </Skeleton>
+          <Skeleton className="w-4/5 rounded-lg" isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary-300" />
+          </Skeleton>
+          <Skeleton className="w-2/5 rounded-lg" isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary-200" />
+          </Skeleton>
+        </div>
+      </Card>
+      <Button color="secondary" size="sm" variant="flat" onPress={toggleLoad}>
+        {isLoaded ? "Show" : "Hide"} Skeleton
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/skeleton/loaded.ts b/apps/docs/content/components/skeleton/loaded.ts
index 59cb7528f9..cab1fe22ec 100644
--- a/apps/docs/content/components/skeleton/loaded.ts
+++ b/apps/docs/content/components/skeleton/loaded.ts
@@ -1,36 +1,4 @@
-const App = `import {Card, Skeleton, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isLoaded, setIsLoaded] = React.useState(false);
-
-  const toggleLoad = () => {
-    setIsLoaded(!isLoaded);
-  };
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Card className="w-[200px] space-y-5 p-4" radius="lg">
-        <Skeleton isLoaded={isLoaded} className="rounded-lg">
-          <div className="h-24 rounded-lg bg-secondary"></div>
-        </Skeleton>
-        <div className="space-y-3">
-          <Skeleton isLoaded={isLoaded} className="w-3/5 rounded-lg">
-            <div className="h-3 w-full rounded-lg bg-secondary"></div>
-          </Skeleton>
-          <Skeleton isLoaded={isLoaded} className="w-4/5 rounded-lg">
-            <div className="h-3 w-full rounded-lg bg-secondary-300"></div>
-          </Skeleton>
-          <Skeleton isLoaded={isLoaded} className="w-2/5 rounded-lg">
-            <div className="h-3 w-full rounded-lg bg-secondary-200"></div>
-          </Skeleton>
-        </div>
-      </Card>
-      <Button size="sm" variant="flat" color="secondary" onPress={toggleLoad}>
-        {isLoaded ? "Show" : "Hide"} Skeleton
-      </Button>
-    </div>
-  );
-}`;
+import App from "./loaded.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/skeleton/standalone.raw.jsx b/apps/docs/content/components/skeleton/standalone.raw.jsx
new file mode 100644
index 0000000000..bb76f7e0d4
--- /dev/null
+++ b/apps/docs/content/components/skeleton/standalone.raw.jsx
@@ -0,0 +1,15 @@
+import {Skeleton} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="max-w-[300px] w-full flex items-center gap-3">
+      <div>
+        <Skeleton className="flex rounded-full w-12 h-12" />
+      </div>
+      <div className="w-full flex flex-col gap-2">
+        <Skeleton className="h-3 w-3/5 rounded-lg" />
+        <Skeleton className="h-3 w-4/5 rounded-lg" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/skeleton/standalone.ts b/apps/docs/content/components/skeleton/standalone.ts
index 09d0c1b510..450aed160e 100644
--- a/apps/docs/content/components/skeleton/standalone.ts
+++ b/apps/docs/content/components/skeleton/standalone.ts
@@ -1,18 +1,4 @@
-const App = `import {Skeleton} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="max-w-[300px] w-full flex items-center gap-3">
-      <div>
-        <Skeleton className="flex rounded-full w-12 h-12"/>
-      </div>  
-      <div className="w-full flex flex-col gap-2">
-        <Skeleton className="h-3 w-3/5 rounded-lg"/>
-        <Skeleton className="h-3 w-4/5 rounded-lg"/>
-      </div>
-    </div>
-  );
-}`;
+import App from "./standalone.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/skeleton/usage.raw.jsx b/apps/docs/content/components/skeleton/usage.raw.jsx
new file mode 100644
index 0000000000..50e4660b0f
--- /dev/null
+++ b/apps/docs/content/components/skeleton/usage.raw.jsx
@@ -0,0 +1,22 @@
+import {Card, Skeleton} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Card className="w-[200px] space-y-5 p-4" radius="lg">
+      <Skeleton className="rounded-lg">
+        <div className="h-24 rounded-lg bg-default-300" />
+      </Skeleton>
+      <div className="space-y-3">
+        <Skeleton className="w-3/5 rounded-lg">
+          <div className="h-3 w-3/5 rounded-lg bg-default-200" />
+        </Skeleton>
+        <Skeleton className="w-4/5 rounded-lg">
+          <div className="h-3 w-4/5 rounded-lg bg-default-200" />
+        </Skeleton>
+        <Skeleton className="w-2/5 rounded-lg">
+          <div className="h-3 w-2/5 rounded-lg bg-default-300" />
+        </Skeleton>
+      </div>
+    </Card>
+  );
+}
diff --git a/apps/docs/content/components/skeleton/usage.ts b/apps/docs/content/components/skeleton/usage.ts
index cdeace87e8..1118304c37 100644
--- a/apps/docs/content/components/skeleton/usage.ts
+++ b/apps/docs/content/components/skeleton/usage.ts
@@ -1,25 +1,4 @@
-const App = `import {Card, Skeleton} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Card className="w-[200px] space-y-5 p-4" radius="lg">
-      <Skeleton className="rounded-lg">
-        <div className="h-24 rounded-lg bg-default-300"></div>
-      </Skeleton>
-      <div className="space-y-3">
-        <Skeleton className="w-3/5 rounded-lg">
-          <div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
-        </Skeleton>
-        <Skeleton className="w-4/5 rounded-lg">
-          <div className="h-3 w-4/5 rounded-lg bg-default-200"></div>
-        </Skeleton>
-        <Skeleton className="w-2/5 rounded-lg">  
-          <div className="h-3 w-2/5 rounded-lg bg-default-300"></div>
-        </Skeleton>
-      </div>
-    </Card>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/colors.raw.jsx b/apps/docs/content/components/slider/colors.raw.jsx
new file mode 100644
index 0000000000..b96faeaa72
--- /dev/null
+++ b/apps/docs/content/components/slider/colors.raw.jsx
@@ -0,0 +1,22 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["foreground", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      {colors.map((color) => (
+        <Slider
+          key={color}
+          aria-label="Temperature"
+          className="max-w-md"
+          color={color}
+          defaultValue={0.7}
+          maxValue={1}
+          minValue={0}
+          step={0.01}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/colors.ts b/apps/docs/content/components/slider/colors.ts
index f26d3f88a5..d5bef810aa 100644
--- a/apps/docs/content/components/slider/colors.ts
+++ b/apps/docs/content/components/slider/colors.ts
@@ -1,32 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "foreground",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      {colors.map((color) => (
-        <Slider
-          key={color}
-          color={color}
-          step={0.01}
-          maxValue={1}
-          minValue={0}
-          defaultValue={0.7}
-          aria-label="Temperature"
-          className="max-w-md"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.jsx b/apps/docs/content/components/slider/controlled-change-end.raw.jsx
new file mode 100644
index 0000000000..53360e0bef
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-change-end.raw.jsx
@@ -0,0 +1,18 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="secondary"
+        size="lg"
+        onChangeEnd={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-change-end.raw.tsx b/apps/docs/content/components/slider/controlled-change-end.raw.tsx
new file mode 100644
index 0000000000..e88a356599
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-change-end.raw.tsx
@@ -0,0 +1,22 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={70}
+        size="lg"
+        onChangeEnd={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-change-end.ts b/apps/docs/content/components/slider/controlled-change-end.ts
index 5206d4118a..21ef7f007b 100644
--- a/apps/docs/content/components/slider/controlled-change-end.ts
+++ b/apps/docs/content/components/slider/controlled-change-end.ts
@@ -1,41 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider
-        aria-label="Volume"
-        size="lg"
-        color="secondary"
-        onChangeEnd={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        aria-label="Volume"
-        size="lg"
-        color="secondary"
-        defaultValue={70}
-        onChangeEnd={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled-change-end.raw.jsx?raw";
+import AppTs from "./controlled-change-end.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled-range.raw.jsx b/apps/docs/content/components/slider/controlled-range.raw.jsx
new file mode 100644
index 0000000000..e5404dfc72
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-range.raw.jsx
@@ -0,0 +1,23 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState([100, 300]);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        className="max-w-md"
+        formatOptions={{style: "currency", currency: "USD"}}
+        label="Select a budget"
+        maxValue={1000}
+        minValue={0}
+        step={10}
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">
+        Selected budget: {Array.isArray(value) && value.map((b) => `${b}`).join(" – ")}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-range.raw.tsx b/apps/docs/content/components/slider/controlled-range.raw.tsx
new file mode 100644
index 0000000000..267342eb21
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled-range.raw.tsx
@@ -0,0 +1,26 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>([100, 300]);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        className="max-w-md"
+        formatOptions={{style: "currency", currency: "USD"}}
+        label="Select a budget"
+        maxValue={1000}
+        minValue={0}
+        step={10}
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">
+        Selected budget: {Array.isArray(value) && value.map((b) => `$${b}`).join(" – ")}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled-range.ts b/apps/docs/content/components/slider/controlled-range.ts
index 61d0bf1929..90412a80b9 100644
--- a/apps/docs/content/components/slider/controlled-range.ts
+++ b/apps/docs/content/components/slider/controlled-range.ts
@@ -1,50 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState([100, 300]);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        label="Select a budget"
-        formatOptions={{style: "currency", currency: "USD"}}
-        step={10}
-        maxValue={1000}
-        minValue={0}
-        value={value} 
-        onChange={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">
-        Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")}
-      </p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>([100, 300]);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        label="Select a budget"
-        formatOptions={{style: "currency", currency: "USD"}}
-        step={10}
-        maxValue={1000}
-        minValue={0}
-        value={value} 
-        onChange={setValue}
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">
-        Selected budget: {Array.isArray(value) && value.map((b) => \`$\${b}\`).join(" – ")}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled-range.raw.jsx?raw";
+import AppTs from "./controlled-range.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/controlled.raw.jsx b/apps/docs/content/components/slider/controlled.raw.jsx
new file mode 100644
index 0000000000..52cac72992
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled.raw.jsx
@@ -0,0 +1,91 @@
+import {Slider, Button} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [value, setValue] = React.useState(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="success"
+        endContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (prev <= 90 ? prev + 10 : 100))}
+          >
+            <VolumeHighIcon className="text-2xl" />
+          </Button>
+        }
+        size="lg"
+        startContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (prev >= 10 ? prev - 10 : 0))}
+          >
+            <VolumeLowIcon className="text-2xl" />
+          </Button>
+        }
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled.raw.tsx b/apps/docs/content/components/slider/controlled.raw.tsx
new file mode 100644
index 0000000000..9f9728ea67
--- /dev/null
+++ b/apps/docs/content/components/slider/controlled.raw.tsx
@@ -0,0 +1,94 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Slider, Button} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(25);
+
+  return (
+    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
+      <Slider
+        aria-label="Volume"
+        className="max-w-md"
+        color="success"
+        endContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (Number(prev) <= 90 ? Number(prev) + 10 : 100))}
+          >
+            <VolumeHighIcon className="text-2xl" />
+          </Button>
+        }
+        size="lg"
+        startContent={
+          <Button
+            isIconOnly
+            radius="full"
+            variant="light"
+            onPress={() => setValue((prev) => (Number(prev) >= 10 ? Number(prev) - 10 : 0))}
+          >
+            <VolumeLowIcon className="text-2xl" />
+          </Button>
+        }
+        value={value}
+        onChange={setValue}
+      />
+      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/controlled.ts b/apps/docs/content/components/slider/controlled.ts
index 0f7e03ef4e..1f1a363363 100644
--- a/apps/docs/content/components/slider/controlled.ts
+++ b/apps/docs/content/components/slider/controlled.ts
@@ -1,139 +1,8 @@
-const VolumeHighIcon = `export const VolumeHighIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const VolumeLowIcon = `export const VolumeLowIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Slider, Button} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  const [value, setValue] = React.useState(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider
-        aria-label="Volume"
-        size="lg"
-        color="success"
-        value={value}
-        onChange={setValue}
-        startContent={
-          <Button
-            isIconOnly
-            radius="full"
-            variant="light"
-            onPress={() => setValue((prev) => prev >= 10 ? prev - 10 : 0)}
-          >
-            <VolumeLowIcon className="text-2xl" />
-          </Button>
-        }
-        endContent={
-          <Button
-            isIconOnly
-            radius="full"
-            variant="light"
-            onPress={() => setValue((prev) => prev <= 90 ? prev + 10 : 100)}
-          >
-            <VolumeHighIcon className="text-2xl" />
-          </Button>
-        }
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Slider, Button, SliderValue} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(25);
-
-  return (
-    <div className="flex flex-col gap-2 w-full h-full max-w-md items-start justify-center">
-      <Slider 
-        aria-label="Volume"
-        size="lg"
-        color="success"
-        value={value} 
-        onChange={setValue}
-        startContent={
-          <Button
-            isIconOnly
-            variant="light"
-            radius="full"
-            onPress={() => setValue((prev) => prev >= 10 ? prev - 10 : 0)}
-          >
-            <VolumeLowIcon className="text-2xl" />
-          </Button>
-        }
-        endContent={
-          <Button
-            isIconOnly
-            variant="light"
-            radius="full"
-            onPress={() => setValue((prev) => prev <= 90 ? prev + 10 : 100)}
-          >
-            <VolumeHighIcon className="text-2xl" />
-          </Button>
-        }
-        className="max-w-md"
-      />
-      <p className="text-default-500 font-medium text-small">Current volume: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/VolumeHighIcon.jsx": VolumeHighIcon,
-  "/VolumeLowIcon.jsx": VolumeLowIcon,
 };
 
 const reactTs = {
diff --git a/apps/docs/content/components/slider/custom-styles.raw.jsx b/apps/docs/content/components/slider/custom-styles.raw.jsx
new file mode 100644
index 0000000000..0090efa5d7
--- /dev/null
+++ b/apps/docs/content/components/slider/custom-styles.raw.jsx
@@ -0,0 +1,47 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
+        labelWrapper: "mb-2",
+        label: "font-medium text-default-700 text-medium",
+        value: "font-medium text-default-500 text-small",
+        thumb: [
+          "transition-size",
+          "bg-gradient-to-r from-secondary-400 to-primary-500",
+          "data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
+          "data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6",
+        ],
+        step: "data-[in-range=true]:bg-black/30 dark:data-[in-range=true]:bg-white/50",
+      }}
+      defaultValue={[0, 800]}
+      disableThumbScale={true}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      minValue={0}
+      showOutline={true}
+      showSteps={true}
+      showTooltip={true}
+      step={100}
+      tooltipProps={{
+        offset: 10,
+        placement: "bottom",
+        classNames: {
+          base: [
+            // arrow color
+            "before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
+          ],
+          content: [
+            "py-2 shadow-xl",
+            "text-white bg-gradient-to-r from-secondary-400 to-primary-500",
+          ],
+        },
+      }}
+      tooltipValueFormatOptions={{style: "currency", currency: "USD", maximumFractionDigits: 0}}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/custom-styles.ts b/apps/docs/content/components/slider/custom-styles.ts
index 94269cc8bc..da3ea9093a 100644
--- a/apps/docs/content/components/slider/custom-styles.ts
+++ b/apps/docs/content/components/slider/custom-styles.ts
@@ -1,50 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Price Range"
-      step={100} 
-      maxValue={1000} 
-      minValue={0} 
-      defaultValue={[0, 800]}
-      showSteps={true}
-      showTooltip={true}
-      showOutline={true}
-      disableThumbScale={true}
-      formatOptions={{style: "currency", currency: "USD"}}
-      tooltipValueFormatOptions={{style: "currency", currency: "USD", maximumFractionDigits: 0}}
-      classNames={{
-        base: "max-w-md",
-        filler: "bg-gradient-to-r from-primary-500 to-secondary-400",
-        labelWrapper: "mb-2",
-        label: "font-medium text-default-700 text-medium",
-        value: "font-medium text-default-500 text-small",
-        thumb: [
-          "transition-size",
-          "bg-gradient-to-r from-secondary-400 to-primary-500",
-          "data-[dragging=true]:shadow-lg data-[dragging=true]:shadow-black/20",
-          "data-[dragging=true]:w-7 data-[dragging=true]:h-7 data-[dragging=true]:after:h-6 data-[dragging=true]:after:w-6"
-        ],
-        step: "data-[in-range=true]:bg-black/30 dark:data-[in-range=true]:bg-white/50"
-      }}
-      tooltipProps={{
-        offset: 10,
-        placement: "bottom",
-        classNames: {
-          base: [
-            // arrow color
-            "before:bg-gradient-to-r before:from-secondary-400 before:to-primary-500",
-          ],
-          content: [
-            "py-2 shadow-xl",
-            "text-white bg-gradient-to-r from-secondary-400 to-primary-500",
-          ],
-        },
-      }}
-    />
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx
new file mode 100644
index 0000000000..49b2641f17
--- /dev/null
+++ b/apps/docs/content/components/slider/disable-thumb-scale.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.2}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.4}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="secondary"
+        defaultValue={0.6}
+        disableThumbScale={true}
+        maxValue={1}
+        minValue={0}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/disable-thumb-scale.ts b/apps/docs/content/components/slider/disable-thumb-scale.ts
index 681e6fa099..a6d8994a9a 100644
--- a/apps/docs/content/components/slider/disable-thumb-scale.ts
+++ b/apps/docs/content/components/slider/disable-thumb-scale.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="secondary"
-        disableThumbScale={true}
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./disable-thumb-scale.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/disabled.raw.jsx b/apps/docs/content/components/slider/disabled.raw.jsx
new file mode 100644
index 0000000000..f805a3ade7
--- /dev/null
+++ b/apps/docs/content/components/slider/disabled.raw.jsx
@@ -0,0 +1,15 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      isDisabled
+      className="max-w-md"
+      defaultValue={0.6}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/disabled.ts b/apps/docs/content/components/slider/disabled.ts
index 07ac82bc41..1a215cc91f 100644
--- a/apps/docs/content/components/slider/disabled.ts
+++ b/apps/docs/content/components/slider/disabled.ts
@@ -1,18 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      isDisabled 
-      label="Temperature" 
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.6}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/fill-offset.raw.jsx b/apps/docs/content/components/slider/fill-offset.raw.jsx
new file mode 100644
index 0000000000..3f432829fc
--- /dev/null
+++ b/apps/docs/content/components/slider/fill-offset.raw.jsx
@@ -0,0 +1,18 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="warning"
+      defaultValue={1.5}
+      fillOffset={0}
+      formatOptions={{signDisplay: "always"}}
+      label="Exposure"
+      maxValue={5}
+      minValue={-5}
+      size="sm"
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/fill-offset.ts b/apps/docs/content/components/slider/fill-offset.ts
index e293a6fa98..3a5faaa7da 100644
--- a/apps/docs/content/components/slider/fill-offset.ts
+++ b/apps/docs/content/components/slider/fill-offset.ts
@@ -1,21 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Exposure" 
-      size="sm"
-      color="warning"
-      step={0.01} 
-      maxValue={5} 
-      minValue={-5} 
-      fillOffset={0}
-      defaultValue={1.5}
-      className="max-w-md"
-      formatOptions={{signDisplay: 'always'}}
-    />
-  );
-}`;
+import App from "./fill-offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/get-value.raw.jsx b/apps/docs/content/components/slider/get-value.raw.jsx
new file mode 100644
index 0000000000..9fb2965c6d
--- /dev/null
+++ b/apps/docs/content/components/slider/get-value.raw.jsx
@@ -0,0 +1,13 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      getValue={(donuts) => `${donuts} of 60 Donuts`}
+      label="Donuts to buy"
+      maxValue={60}
+      size="sm"
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/get-value.ts b/apps/docs/content/components/slider/get-value.ts
index 58a100dbcd..b44c91bd81 100644
--- a/apps/docs/content/components/slider/get-value.ts
+++ b/apps/docs/content/components/slider/get-value.ts
@@ -1,16 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Donuts to buy"
-      size="sm"
-      maxValue={60}
-      getValue={(donuts) => \`\${donuts} of 60 Donuts\`}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./get-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/hide-thumb.raw.jsx b/apps/docs/content/components/slider/hide-thumb.raw.jsx
new file mode 100644
index 0000000000..8157e09ed9
--- /dev/null
+++ b/apps/docs/content/components/slider/hide-thumb.raw.jsx
@@ -0,0 +1,13 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      aria-label="Player progress"
+      className="max-w-md"
+      color="foreground"
+      defaultValue={20}
+      hideThumb={true}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/hide-thumb.ts b/apps/docs/content/components/slider/hide-thumb.ts
index 4be475c9dd..bd5db5b627 100644
--- a/apps/docs/content/components/slider/hide-thumb.ts
+++ b/apps/docs/content/components/slider/hide-thumb.ts
@@ -1,16 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      aria-label="Player progress" 
-      color="foreground"
-      hideThumb={true}
-      defaultValue={20}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./hide-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/hide-value.raw.jsx b/apps/docs/content/components/slider/hide-value.raw.jsx
new file mode 100644
index 0000000000..df98a823ab
--- /dev/null
+++ b/apps/docs/content/components/slider/hide-value.raw.jsx
@@ -0,0 +1,16 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="danger"
+      defaultValue={0.4}
+      hideValue={true}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/hide-value.ts b/apps/docs/content/components/slider/hide-value.ts
index 54d1607025..cfd8be7222 100644
--- a/apps/docs/content/components/slider/hide-value.ts
+++ b/apps/docs/content/components/slider/hide-value.ts
@@ -1,19 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Temperature" 
-      color="danger"
-      hideValue={true}
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.4}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./hide-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/marks.raw.jsx b/apps/docs/content/components/slider/marks.raw.jsx
new file mode 100644
index 0000000000..ff41ef28d2
--- /dev/null
+++ b/apps/docs/content/components/slider/marks.raw.jsx
@@ -0,0 +1,28 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      color="foreground"
+      defaultValue={20}
+      label="Select a value"
+      marks={[
+        {
+          value: 20,
+          label: "20%",
+        },
+        {
+          value: 50,
+          label: "50%",
+        },
+        {
+          value: 80,
+          label: "80%",
+        },
+      ]}
+      size="sm"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/marks.ts b/apps/docs/content/components/slider/marks.ts
index 07c7ac65cc..cdccdb9cea 100644
--- a/apps/docs/content/components/slider/marks.ts
+++ b/apps/docs/content/components/slider/marks.ts
@@ -1,31 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Select a value" 
-      color="foreground"
-      size="sm"
-      step={10} 
-      marks={[
-        {
-          value: 20,
-          label: "20%",
-        },
-        {
-          value: 50,
-          label: "50%",
-        },
-        {
-          value: 80,
-          label: "80%",
-        },
-      ]}
-      defaultValue={20}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./marks.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/outline.raw.jsx b/apps/docs/content/components/slider/outline.raw.jsx
new file mode 100644
index 0000000000..67d251a4b7
--- /dev/null
+++ b/apps/docs/content/components/slider/outline.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        showOutline={true}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/outline.ts b/apps/docs/content/components/slider/outline.ts
index ec94e797c3..08038eb9c4 100644
--- a/apps/docs/content/components/slider/outline.ts
+++ b/apps/docs/content/components/slider/outline.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        color="foreground"
-        showOutline={true}
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./outline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/radius.raw.jsx b/apps/docs/content/components/slider/radius.raw.jsx
new file mode 100644
index 0000000000..181343ac11
--- /dev/null
+++ b/apps/docs/content/components/slider/radius.raw.jsx
@@ -0,0 +1,22 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  const radius = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      {radius.map((r) => (
+        <Slider
+          key={r}
+          aria-label="Temperature"
+          className="max-w-md"
+          defaultValue={0.7}
+          maxValue={1}
+          minValue={0}
+          radius={r}
+          step={0.01}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/radius.ts b/apps/docs/content/components/slider/radius.ts
index 6fb5696ad1..7b78db1ce0 100644
--- a/apps/docs/content/components/slider/radius.ts
+++ b/apps/docs/content/components/slider/radius.ts
@@ -1,31 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const radius = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      {radius.map((r) => (
-        <Slider
-          key={r}
-          radius={r}
-          step={0.01}
-          maxValue={1}
-          minValue={0}
-          defaultValue={0.7}
-          aria-label="Temperature"
-          className="max-w-md"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/range.raw.jsx b/apps/docs/content/components/slider/range.raw.jsx
new file mode 100644
index 0000000000..9f733fdbb0
--- /dev/null
+++ b/apps/docs/content/components/slider/range.raw.jsx
@@ -0,0 +1,15 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={[100, 500]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      minValue={0}
+      step={50}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/range.ts b/apps/docs/content/components/slider/range.ts
index 9b958ceee5..90e4b05194 100644
--- a/apps/docs/content/components/slider/range.ts
+++ b/apps/docs/content/components/slider/range.ts
@@ -1,18 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Price Range"
-      step={50} 
-      minValue={0} 
-      maxValue={1000} 
-      defaultValue={[100, 500]} 
-      formatOptions={{style: "currency", currency: "USD"}}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./range.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-label.raw.jsx b/apps/docs/content/components/slider/render-label.raw.jsx
new file mode 100644
index 0000000000..2af183ce22
--- /dev/null
+++ b/apps/docs/content/components/slider/render-label.raw.jsx
@@ -0,0 +1,84 @@
+import {Slider, Tooltip} from "@nextui-org/react";
+
+export const InfoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12 8V13"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M11.9945 16H12.0035"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+      }}
+      defaultValue={[100, 300]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      renderLabel={({children, ...props}) => (
+        <label {...props} className="text-medium flex gap-2 items-center">
+          {children}
+          <Tooltip
+            className="w-[200px] px-1.5 text-tiny text-default-600 rounded-small"
+            content="The price range you want to search for."
+            placement="right"
+          >
+            <span className="transition-opacity opacity-80 hover:opacity-100">
+              <InfoIcon />
+            </span>
+          </Tooltip>
+        </label>
+      )}
+      renderThumb={({index, ...props}) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span
+            className={cn(
+              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              index === 0
+                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
+                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
+            )}
+          />
+        </div>
+      )}
+      size="lg"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-label.ts b/apps/docs/content/components/slider/render-label.ts
index 5248574a7f..f4fc289c53 100644
--- a/apps/docs/content/components/slider/render-label.ts
+++ b/apps/docs/content/components/slider/render-label.ts
@@ -1,91 +1,7 @@
-const InfoIcon = `export const InfoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M12 8V13"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="1.5"
-    />
-    <path
-      d="M11.9945 16H12.0035"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);
-`;
-
-const App = `import {Slider, Tooltip} from "@nextui-org/react";
-import {InfoIcon} from "./InfoIcon";
-
-export default function App() {
-  return (
-    <Slider
-      size="lg"
-      label="Price Range"
-      maxValue={1000}
-      step={10}
-      defaultValue={[100, 300]}
-      formatOptions={{style: "currency", currency: "USD"}}
-      classNames={{
-        base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
-      }}
-      renderLabel={({children, ...props}) => (
-        <label {...props} className="text-medium flex gap-2 items-center">
-          {children}
-          <Tooltip
-            className="w-[200px] px-1.5 text-tiny text-default-600 rounded-small"
-            content="The price range you want to search for."
-            placement="right"
-          >
-            <span className="transition-opacity opacity-80 hover:opacity-100">
-              <InfoIcon />
-            </span>
-          </Tooltip>
-        </label>
-      )}
-      renderThumb={({index, ...props}) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span
-            className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
-              index === 0
-                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
-                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
-            )}
-          />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/InfoIcon.jsx": InfoIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/slider/render-range-thumb.raw.jsx b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
new file mode 100644
index 0000000000..c9b831be31
--- /dev/null
+++ b/apps/docs/content/components/slider/render-range-thumb.raw.jsx
@@ -0,0 +1,33 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
+      }}
+      defaultValue={[100, 300]}
+      formatOptions={{style: "currency", currency: "USD"}}
+      label="Price Range"
+      maxValue={1000}
+      renderThumb={({index, ...props}) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span
+            className={cn(
+              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
+              index === 0
+                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
+                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
+            )}
+          />
+        </div>
+      )}
+      size="lg"
+      step={10}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-range-thumb.ts b/apps/docs/content/components/slider/render-range-thumb.ts
index 8f212229ca..6745f61592 100644
--- a/apps/docs/content/components/slider/render-range-thumb.ts
+++ b/apps/docs/content/components/slider/render-range-thumb.ts
@@ -1,36 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider
-      size="lg"
-      label="Price Range"
-      maxValue={1000}
-      step={10}
-      defaultValue={[100, 300]}
-      formatOptions={{style: "currency", currency: "USD"}}
-      classNames={{
-        base: "max-w-md gap-3",
-        filler: "bg-gradient-to-r from-pink-300 to-cyan-300 dark:from-pink-600 dark:to-cyan-800",
-      }}
-      renderThumb={({index, ...props}) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span
-            className={cn(
-              "transition-transform bg-gradient-to-br shadow-small rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80",
-              index === 0
-                ? "from-pink-200 to-pink-500 dark:from-pink-400 dark:to-pink-600" // first thumb
-                : "from-cyan-200 to-cyan-600 dark:from-cyan-600 dark:to-cyan-800", // second thumb
-            )}
-          />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-range-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-thumb.raw.jsx b/apps/docs/content/components/slider/render-thumb.raw.jsx
new file mode 100644
index 0000000000..29657194a5
--- /dev/null
+++ b/apps/docs/content/components/slider/render-thumb.raw.jsx
@@ -0,0 +1,24 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md gap-3",
+        track: "border-s-secondary-100",
+        filler: "bg-gradient-to-r from-secondary-100 to-secondary-500",
+      }}
+      defaultValue={60}
+      label="Select brightness"
+      renderThumb={(props) => (
+        <div
+          {...props}
+          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
+        >
+          <span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
+        </div>
+      )}
+      size="sm"
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-thumb.ts b/apps/docs/content/components/slider/render-thumb.ts
index 3a020ce676..0198aaa4a1 100644
--- a/apps/docs/content/components/slider/render-thumb.ts
+++ b/apps/docs/content/components/slider/render-thumb.ts
@@ -1,27 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      size="sm"
-      label="Select brightness"
-      defaultValue={60}
-      classNames={{
-        base: "max-w-md gap-3",
-        track: "border-s-secondary-100",
-        filler: "bg-gradient-to-r from-secondary-100 to-secondary-500"
-      }}
-      renderThumb={(props) => (
-        <div
-          {...props}
-          className="group p-1 top-1/2 bg-background border-small border-default-200 dark:border-default-400/50 shadow-medium rounded-full cursor-grab data-[dragging=true]:cursor-grabbing"
-        >
-          <span className="transition-transform bg-gradient-to-br shadow-small from-secondary-100 to-secondary-500 rounded-full w-5 h-5 block group-data-[dragging=true]:scale-80" />
-        </div>
-      )}
-    />
-  );
-}`;
+import App from "./render-thumb.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx
new file mode 100644
index 0000000000..4b548d15a4
--- /dev/null
+++ b/apps/docs/content/components/slider/render-value.raw.jsx
@@ -0,0 +1,58 @@
+import {Slider, Tooltip} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState(0.2);
+  const [inputValue, setInputValue] = React.useState("0.2");
+
+  const handleChange = (value) => {
+    if (isNaN(Number(value))) return;
+
+    setValue(value);
+    setInputValue(value.toString());
+  };
+
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        label: "text-medium",
+      }}
+      color="foreground"
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      renderValue={({children, ...props}) => (
+        <output {...props}>
+          <Tooltip
+            className="text-tiny text-default-500 rounded-md"
+            content="Press Enter to confirm"
+            placement="left"
+          >
+            <input
+              aria-label="Temperature value"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              type="text"
+              value={inputValue}
+              onChange={(e) => {
+                const v = e.target.value;
+
+                setInputValue(v);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
+                  setValue(Number(inputValue));
+                }
+              }}
+            />
+          </Tooltip>
+        </output>
+      )}
+      size="sm"
+      // we extract the default children to render the input
+      step={0.01}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx
new file mode 100644
index 0000000000..a51b665be9
--- /dev/null
+++ b/apps/docs/content/components/slider/render-value.raw.tsx
@@ -0,0 +1,61 @@
+import type {SliderValue} from "@nextui-org/react";
+
+import React from "react";
+import {Tooltip, Slider} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState<SliderValue>(0.2);
+  const [inputValue, setInputValue] = React.useState<string>("0.2");
+
+  const handleChange = (value: SliderValue) => {
+    if (isNaN(Number(value))) return;
+
+    setValue(value);
+    setInputValue(value.toString());
+  };
+
+  return (
+    <Slider
+      classNames={{
+        base: "max-w-md",
+        label: "text-medium",
+      }}
+      color="foreground"
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      renderValue={({children, ...props}) => (
+        <output {...props}>
+          <Tooltip
+            className="text-tiny text-default-500 rounded-md"
+            content="Press Enter to confirm"
+            placement="left"
+          >
+            <input
+              aria-label="Temperature value"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              type="text"
+              value={inputValue}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                const v = e.target.value;
+
+                setInputValue(v);
+              }}
+              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
+                  setValue(Number(inputValue));
+                }
+              }}
+            />
+          </Tooltip>
+        </output>
+      )}
+      size="sm"
+      step={0.01}
+      // we extract the default children to render the input
+      value={value}
+      onChange={handleChange}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/render-value.ts b/apps/docs/content/components/slider/render-value.ts
index 09da36972b..ab16e1fc22 100644
--- a/apps/docs/content/components/slider/render-value.ts
+++ b/apps/docs/content/components/slider/render-value.ts
@@ -1,118 +1,5 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState(0.2);
-  const [inputValue, setInputValue] = React.useState("0.2");
-
-  const handleChange = (value) => {
-    if (isNaN(Number(value))) return;
-
-    setValue(value);
-    setInputValue(value.toString());
-  };
-
-  return (
-    <Slider 
-      label="Temperature" 
-      size="sm"
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      color="foreground"
-      classNames={{
-        base: "max-w-md",
-        label: "text-medium",
-      }}
-      // we extract the default children to render the input
-      renderValue={({children, ...props}) => (
-        <output {...props}>
-          <Tooltip
-            className="text-tiny text-default-500 rounded-md"
-            content="Press Enter to confirm"
-            placement="left"
-          >
-            <input
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
-              type="text"
-              aria-label="Temperature value"
-              value={inputValue}
-              onChange={(e) => {
-                const v = e.target.value;
-
-                setInputValue(v);
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
-                  setValue(Number(inputValue));
-                }
-              }}
-            />
-          </Tooltip>
-        </output>
-      )}
-      value={value}
-      onChange={handleChange}
-    />
-  );
-}`;
-
-const AppTs = `import {Slider, SliderValue} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState<SliderValue>(0.2);
-  const [inputValue, setInputValue] = React.useState<string>("0.2");
-
-  const handleChange = (value: SliderValue) => {
-    if (isNaN(Number(value))) return;
-
-    setValue(value);
-    setInputValue(value.toString());
-  };
-
-  return (
-    <Slider 
-      label="Temperature" 
-      size="sm"
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      color="foreground"
-      classNames={{
-        base: "max-w-md",
-        label: "text-medium",
-      }}
-      // we extract the default children to render the input
-      renderValue={({children, ...props}) => (
-        <output {...props}>
-          <Tooltip
-            className="text-tiny text-default-500 rounded-md"
-            content="Press Enter to confirm"
-            placement="left"
-          >
-            <input
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-none transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
-              type="text"
-              aria-label="Temperature value"
-              value={inputValue}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                const v = e.target.value;
-
-                setInputValue(v);
-              }}
-              onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                if (e.key === "Enter" && !isNaN(Number(inputValue))) {
-                  setValue(Number(inputValue));
-                }
-              }}
-            />
-          </Tooltip>
-        </output>
-      )}
-      value={value}
-      onChange={handleChange}
-    />
-  );
-}`;
+import App from "./render-value.raw.jsx?raw";
+import AppTs from "./render-value.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/sizes.raw.jsx b/apps/docs/content/components/slider/sizes.raw.jsx
new file mode 100644
index 0000000000..26693981b1
--- /dev/null
+++ b/apps/docs/content/components/slider/sizes.raw.jsx
@@ -0,0 +1,35 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        className="max-w-md"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/sizes.ts b/apps/docs/content/components/slider/sizes.ts
index 83741c655d..85a2f5b30b 100644
--- a/apps/docs/content/components/slider/sizes.ts
+++ b/apps/docs/content/components/slider/sizes.ts
@@ -1,38 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        aria-label="Temperature"
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/start-end-content.raw.jsx b/apps/docs/content/components/slider/start-end-content.raw.jsx
new file mode 100644
index 0000000000..1b9172bdda
--- /dev/null
+++ b/apps/docs/content/components/slider/start-end-content.raw.jsx
@@ -0,0 +1,67 @@
+import {Slider} from "@nextui-org/react";
+
+export const VolumeHighIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VolumeLowIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
+        fill="currentColor"
+      />
+      <path
+        d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Slider
+      aria-label="Volume"
+      className="max-w-md"
+      color="success"
+      defaultValue={40}
+      endContent={<VolumeHighIcon className="text-2xl" />}
+      size="lg"
+      startContent={<VolumeLowIcon className="text-2xl" />}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/start-end-content.ts b/apps/docs/content/components/slider/start-end-content.ts
index f478eea061..e99c7e5997 100644
--- a/apps/docs/content/components/slider/start-end-content.ts
+++ b/apps/docs/content/components/slider/start-end-content.ts
@@ -1,73 +1,7 @@
-const VolumeHighIcon = `export const VolumeHighIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M18.0003 16.7503C17.8403 16.7503 17.6903 16.7003 17.5503 16.6003C17.2203 16.3503 17.1503 15.8803 17.4003 15.5503C18.9703 13.4603 18.9703 10.5403 17.4003 8.45027C17.1503 8.12027 17.2203 7.65027 17.5503 7.40027C17.8803 7.15027 18.3503 7.22027 18.6003 7.55027C20.5603 10.1703 20.5603 13.8303 18.6003 16.4503C18.4503 16.6503 18.2303 16.7503 18.0003 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M19.8284 19.2503C19.6684 19.2503 19.5184 19.2003 19.3784 19.1003C19.0484 18.8503 18.9784 18.3803 19.2284 18.0503C21.8984 14.4903 21.8984 9.51027 19.2284 5.95027C18.9784 5.62027 19.0484 5.15027 19.3784 4.90027C19.7084 4.65027 20.1784 4.72027 20.4284 5.05027C23.4984 9.14027 23.4984 14.8603 20.4284 18.9503C20.2884 19.1503 20.0584 19.2503 19.8284 19.2503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M14.02 3.78168C12.9 3.16168 11.47 3.32168 10.01 4.23168L7.09 6.06168C6.89 6.18168 6.66 6.25168 6.43 6.25168H5.5H5C2.58 6.25168 1.25 7.58168 1.25 10.0017V14.0017C1.25 16.4217 2.58 17.7517 5 17.7517H5.5H6.43C6.66 17.7517 6.89 17.8217 7.09 17.9417L10.01 19.7717C10.89 20.3217 11.75 20.5917 12.55 20.5917C13.07 20.5917 13.57 20.4717 14.02 20.2217C15.13 19.6017 15.75 18.3117 15.75 16.5917V7.41168C15.75 5.69168 15.13 4.40168 14.02 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const VolumeLowIcon = `export const VolumeLowIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M19.3284 16.7503C19.1684 16.7503 19.0184 16.7003 18.8784 16.6003C18.5484 16.3503 18.4784 15.8803 18.7284 15.5503C20.2984 13.4603 20.2984 10.5403 18.7284 8.45027C18.4784 8.12027 18.5484 7.65027 18.8784 7.40027C19.2084 7.15027 19.6784 7.22027 19.9284 7.55027C21.8984 10.1703 21.8984 13.8303 19.9284 16.4503C19.7884 16.6503 19.5584 16.7503 19.3284 16.7503Z"
-      fill="currentColor"
-    />
-    <path
-      d="M15.3481 3.78168C14.2281 3.16168 12.7981 3.32168 11.3381 4.23168L8.41813 6.06168C8.21813 6.18168 7.98813 6.25168 7.75813 6.25168H6.82812H6.32812C3.90812 6.25168 2.57812 7.58168 2.57812 10.0017V14.0017C2.57812 16.4217 3.90812 17.7517 6.32812 17.7517H6.82812H7.75813C7.98813 17.7517 8.21813 17.8217 8.41813 17.9417L11.3381 19.7717C12.2181 20.3217 13.0781 20.5917 13.8781 20.5917C14.3981 20.5917 14.8981 20.4717 15.3481 20.2217C16.4581 19.6017 17.0781 18.3117 17.0781 16.5917V7.41168C17.0781 5.69168 16.4581 4.40168 15.3481 3.78168Z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const App = `import {Slider} from "@nextui-org/react";
-import {VolumeLowIcon} from "./VolumeLowIcon";
-import {VolumeHighIcon} from "./VolumeHighIcon";
-
-export default function App() {
-  return (
-    <Slider 
-      aria-label="Volume"
-      size="lg"
-      color="success"
-      startContent={<VolumeLowIcon className="text-2xl" />}
-      endContent={<VolumeHighIcon className="text-2xl" />}
-      className="max-w-md"
-      defaultValue={40}
-    />
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/VolumeHighIcon.jsx": VolumeHighIcon,
-  "/VolumeLowIcon.jsx": VolumeLowIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/slider/tooltip.raw.jsx b/apps/docs/content/components/slider/tooltip.raw.jsx
new file mode 100644
index 0000000000..5719863d85
--- /dev/null
+++ b/apps/docs/content/components/slider/tooltip.raw.jsx
@@ -0,0 +1,30 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={0.2}
+      formatOptions={{style: "percent"}}
+      label="Select a value"
+      marks={[
+        {
+          value: 0.2,
+          label: "20%",
+        },
+        {
+          value: 0.5,
+          label: "50%",
+        },
+        {
+          value: 0.8,
+          label: "80%",
+        },
+      ]}
+      maxValue={1}
+      minValue={0}
+      showTooltip={true}
+      step={0.1}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/tooltip.ts b/apps/docs/content/components/slider/tooltip.ts
index bd97529987..d5f80e1265 100644
--- a/apps/docs/content/components/slider/tooltip.ts
+++ b/apps/docs/content/components/slider/tooltip.ts
@@ -1,33 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Select a value" 
-      showTooltip={true}
-      step={0.1} 
-      formatOptions={{style: "percent"}}
-      maxValue={1}
-      minValue={0}
-      marks={[
-        {
-          value: 0.2,
-          label: "20%",
-        },
-        {
-          value: 0.5,
-          label: "50%",
-        },
-        {
-          value: 0.8,
-          label: "80%",
-        },
-      ]}
-      defaultValue={0.2}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./tooltip.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/usage.raw.jsx b/apps/docs/content/components/slider/usage.raw.jsx
new file mode 100644
index 0000000000..960b8c9791
--- /dev/null
+++ b/apps/docs/content/components/slider/usage.raw.jsx
@@ -0,0 +1,14 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={0.4}
+      label="Temperature"
+      maxValue={1}
+      minValue={0}
+      step={0.01}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/usage.ts b/apps/docs/content/components/slider/usage.ts
index 9d2e81ac21..1118304c37 100644
--- a/apps/docs/content/components/slider/usage.ts
+++ b/apps/docs/content/components/slider/usage.ts
@@ -1,17 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Temperature" 
-      step={0.01} 
-      maxValue={1} 
-      minValue={0} 
-      defaultValue={0.4}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/value-formatting.raw.jsx b/apps/docs/content/components/slider/value-formatting.raw.jsx
new file mode 100644
index 0000000000..1bd3f0cd26
--- /dev/null
+++ b/apps/docs/content/components/slider/value-formatting.raw.jsx
@@ -0,0 +1,14 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Slider
+      className="max-w-md"
+      defaultValue={40}
+      formatOptions={{style: "currency", currency: "JPY"}}
+      label="Currency"
+      showTooltip={true}
+      tooltipValueFormatOptions={{style: "currency", currency: "JPY"}}
+    />
+  );
+}
diff --git a/apps/docs/content/components/slider/value-formatting.ts b/apps/docs/content/components/slider/value-formatting.ts
index 096dd9947f..0cd558d45d 100644
--- a/apps/docs/content/components/slider/value-formatting.ts
+++ b/apps/docs/content/components/slider/value-formatting.ts
@@ -1,17 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Slider 
-      label="Currency" 
-      showTooltip={true}
-      formatOptions={{style: 'currency', currency: 'JPY'}}
-      tooltipValueFormatOptions={{style: 'currency', currency: 'JPY'}}
-      defaultValue={40}
-      className="max-w-md"
-    />
-  );
-}`;
+import App from "./value-formatting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/vertical.raw.jsx b/apps/docs/content/components/slider/vertical.raw.jsx
new file mode 100644
index 0000000000..779c0628cd
--- /dev/null
+++ b/apps/docs/content/components/slider/vertical.raw.jsx
@@ -0,0 +1,35 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-row  max-w-md h-[348px] gap-6 w-full">
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.2}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="sm"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.4}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="md"
+        step={0.01}
+      />
+      <Slider
+        aria-label="Temperature"
+        defaultValue={0.6}
+        maxValue={1}
+        minValue={0}
+        orientation="vertical"
+        size="lg"
+        step={0.01}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/vertical.ts b/apps/docs/content/components/slider/vertical.ts
index f3f7799b1e..697ac10343 100644
--- a/apps/docs/content/components/slider/vertical.ts
+++ b/apps/docs/content/components/slider/vertical.ts
@@ -1,38 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-row  max-w-md h-[348px] gap-6 w-full">
-      <Slider   
-        size="sm"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.2}
-      />
-      <Slider   
-        size="md"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.4}
-      />
-      <Slider   
-        size="lg"
-        step={0.01} 
-        maxValue={1} 
-        minValue={0} 
-        orientation="vertical"
-        aria-label="Temperature"
-        defaultValue={0.6}
-      />
-    </div> 
-  );
-}`;
+import App from "./vertical.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/slider/visible-steps.raw.jsx b/apps/docs/content/components/slider/visible-steps.raw.jsx
new file mode 100644
index 0000000000..d6e3690efa
--- /dev/null
+++ b/apps/docs/content/components/slider/visible-steps.raw.jsx
@@ -0,0 +1,41 @@
+import {Slider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-col gap-6 w-full max-w-md">
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.2}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="sm"
+        step={0.1}
+      />
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.4}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="md"
+        step={0.1}
+      />
+      <Slider
+        className="max-w-md"
+        color="foreground"
+        defaultValue={0.6}
+        label="Temperature"
+        maxValue={1}
+        minValue={0}
+        showSteps={true}
+        size="lg"
+        step={0.1}
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/slider/visible-steps.ts b/apps/docs/content/components/slider/visible-steps.ts
index da06557c73..ae20aa27a1 100644
--- a/apps/docs/content/components/slider/visible-steps.ts
+++ b/apps/docs/content/components/slider/visible-steps.ts
@@ -1,44 +1,4 @@
-const App = `import {Slider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-col gap-6 w-full max-w-md">
-      <Slider   
-        size="sm"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.2}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="md"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.4}
-        className="max-w-md" 
-      />
-      <Slider   
-        size="lg"
-        step={0.1}
-        color="foreground"
-        label="Temperature"
-        showSteps={true} 
-        maxValue={1} 
-        minValue={0} 
-        defaultValue={0.6}
-        className="max-w-md" 
-      />
-    </div> 
-  );
-}`;
+import App from "./visible-steps.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/colors.raw.jsx b/apps/docs/content/components/snippet/colors.raw.jsx
new file mode 100644
index 0000000000..f0f95cee40
--- /dev/null
+++ b/apps/docs/content/components/snippet/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet color="default">npm install @nextui-org/react</Snippet>
+      <Snippet color="primary">npm install @nextui-org/react</Snippet>
+      <Snippet color="secondary">npm install @nextui-org/react</Snippet>
+      <Snippet color="success">npm install @nextui-org/react</Snippet>
+      <Snippet color="warning">npm install @nextui-org/react</Snippet>
+      <Snippet color="danger">npm install @nextui-org/react</Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/colors.ts b/apps/docs/content/components/snippet/colors.ts
index e46614cd14..d5bef810aa 100644
--- a/apps/docs/content/components/snippet/colors.ts
+++ b/apps/docs/content/components/snippet/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet color="default">npm install @nextui-org/react</Snippet>
-      <Snippet color="primary">npm install @nextui-org/react</Snippet>
-      <Snippet color="secondary">npm install @nextui-org/react</Snippet>
-      <Snippet color="success">npm install @nextui-org/react</Snippet>
-      <Snippet color="warning">npm install @nextui-org/react</Snippet>
-      <Snippet color="danger">npm install @nextui-org/react</Snippet>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/custom-icons.raw.jsx b/apps/docs/content/components/snippet/custom-icons.raw.jsx
new file mode 100644
index 0000000000..55d6386773
--- /dev/null
+++ b/apps/docs/content/components/snippet/custom-icons.raw.jsx
@@ -0,0 +1,43 @@
+import {Snippet} from "@nextui-org/react";
+
+export const CopyIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 20}
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width={size || width || 20}
+      {...props}
+    >
+      <path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z" />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="currentColor"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Snippet checkIcon={<CheckIcon />} copyIcon={<CopyIcon />} variant="bordered">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/custom-icons.ts b/apps/docs/content/components/snippet/custom-icons.ts
index 10bd84d109..7954d41595 100644
--- a/apps/docs/content/components/snippet/custom-icons.ts
+++ b/apps/docs/content/components/snippet/custom-icons.ts
@@ -1,62 +1,7 @@
-export const CopyIcon = `export const CopyIcon = ({ size, height, width, ...props }) => {
-  return (
-    <svg
-      fill="none"
-      height={height || 20}
-      shape-rendering="geometricPrecision"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-      viewBox="0 0 24 24"
-      width={width || 20}
-      {...props}
-    >
-      <path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z" />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z"/>
-    </svg>
-  );
-};`;
-
-const App = `import {Snippet} from "@nextui-org/react";
-import {CopyIcon} from "./CopyIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <Snippet
-      variant="bordered"
-      copyIcon={<CopyIcon />}
-      checkIcon={<CheckIcon />}
-    >
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./custom-icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CopyIcon.jsx": CopyIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/snippet/custom-tooltip.raw.jsx b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx
new file mode 100644
index 0000000000..5998d383fe
--- /dev/null
+++ b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx
@@ -0,0 +1,17 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet
+      tooltipProps={{
+        color: "foreground",
+        content: "Copy this snippet",
+        disableAnimation: true,
+        placement: "right",
+        closeDelay: 0,
+      }}
+    >
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/custom-tooltip.ts b/apps/docs/content/components/snippet/custom-tooltip.ts
index 60ffed31d8..247cbd98de 100644
--- a/apps/docs/content/components/snippet/custom-tooltip.ts
+++ b/apps/docs/content/components/snippet/custom-tooltip.ts
@@ -1,20 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet
-      tooltipProps={{
-        color: "foreground",
-        content: "Copy this snippet",
-        disableAnimation: true,
-        placement: "right",
-        closeDelay: 0
-      }}
-    >
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./custom-tooltip.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/multiline.raw.jsx b/apps/docs/content/components/snippet/multiline.raw.jsx
new file mode 100644
index 0000000000..189857d3b3
--- /dev/null
+++ b/apps/docs/content/components/snippet/multiline.raw.jsx
@@ -0,0 +1,11 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet>
+      <span>npm install @nextui-org/react</span>
+      <span>yarn add @nextui-org/react</span>
+      <span>pnpm add @nextui-org/react</span>
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/multiline.ts b/apps/docs/content/components/snippet/multiline.ts
index 03b960723a..a5e525766b 100644
--- a/apps/docs/content/components/snippet/multiline.ts
+++ b/apps/docs/content/components/snippet/multiline.ts
@@ -1,14 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet>
-      <span>npm install @nextui-org/react</span>
-      <span>yarn add @nextui-org/react</span>
-      <span>pnpm add @nextui-org/react</span>
-    </Snippet>
-  );
-}`;
+import App from "./multiline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/sizes.raw.jsx b/apps/docs/content/components/snippet/sizes.raw.jsx
new file mode 100644
index 0000000000..261e6f098c
--- /dev/null
+++ b/apps/docs/content/components/snippet/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet size="sm">npm install @nextui-org/react</Snippet>
+      <Snippet size="md">npm install @nextui-org/react</Snippet>
+      <Snippet size="lg">npm install @nextui-org/react</Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/sizes.ts b/apps/docs/content/components/snippet/sizes.ts
index 0456000507..85a2f5b30b 100644
--- a/apps/docs/content/components/snippet/sizes.ts
+++ b/apps/docs/content/components/snippet/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet size="sm">npm install @nextui-org/react</Snippet>
-      <Snippet size="md">npm install @nextui-org/react</Snippet>
-      <Snippet size="lg">npm install @nextui-org/react</Snippet>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/symbol.raw.jsx b/apps/docs/content/components/snippet/symbol.raw.jsx
new file mode 100644
index 0000000000..425ff9a9ac
--- /dev/null
+++ b/apps/docs/content/components/snippet/symbol.raw.jsx
@@ -0,0 +1,9 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet symbol="#" variant="bordered">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/symbol.ts b/apps/docs/content/components/snippet/symbol.ts
index 8215c07fa8..414f199963 100644
--- a/apps/docs/content/components/snippet/symbol.ts
+++ b/apps/docs/content/components/snippet/symbol.ts
@@ -1,10 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet symbol="#" variant="bordered">npm install @nextui-org/react</Snippet>
-  );
-}`;
+import App from "./symbol.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/usage.raw.jsx b/apps/docs/content/components/snippet/usage.raw.jsx
new file mode 100644
index 0000000000..88cb317e61
--- /dev/null
+++ b/apps/docs/content/components/snippet/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return <Snippet>npm install @nextui-org/react</Snippet>;
+}
diff --git a/apps/docs/content/components/snippet/usage.ts b/apps/docs/content/components/snippet/usage.ts
index 38c8c5b1c0..1118304c37 100644
--- a/apps/docs/content/components/snippet/usage.ts
+++ b/apps/docs/content/components/snippet/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet>npm install @nextui-org/react</Snippet>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/variants.raw.jsx b/apps/docs/content/components/snippet/variants.raw.jsx
new file mode 100644
index 0000000000..86dfb39028
--- /dev/null
+++ b/apps/docs/content/components/snippet/variants.raw.jsx
@@ -0,0 +1,18 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet variant="bordered">npm install @nextui-org/react</Snippet>
+      <Snippet color="warning" variant="flat">
+        npm install @nextui-org/react
+      </Snippet>
+      <Snippet color="primary" variant="solid">
+        npm install @nextui-org/react
+      </Snippet>
+      <Snippet color="secondary" variant="shadow">
+        npm install @nextui-org/react
+      </Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/variants.ts b/apps/docs/content/components/snippet/variants.ts
index bc2d96bb01..ddea95fb2e 100644
--- a/apps/docs/content/components/snippet/variants.ts
+++ b/apps/docs/content/components/snippet/variants.ts
@@ -1,15 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet variant="bordered">npm install @nextui-org/react</Snippet>
-      <Snippet variant="flat" color="warning">npm install @nextui-org/react</Snippet>
-      <Snippet variant="solid" color="primary">npm install @nextui-org/react</Snippet>
-      <Snippet variant="shadow" color="secondary">npm install @nextui-org/react</Snippet>
-    </div> 
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/snippet/without-copy.raw.jsx b/apps/docs/content/components/snippet/without-copy.raw.jsx
new file mode 100644
index 0000000000..baab96d178
--- /dev/null
+++ b/apps/docs/content/components/snippet/without-copy.raw.jsx
@@ -0,0 +1,9 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet hideCopyButton color="primary" variant="solid">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/without-copy.ts b/apps/docs/content/components/snippet/without-copy.ts
index 60eceab25a..9a8e663e42 100644
--- a/apps/docs/content/components/snippet/without-copy.ts
+++ b/apps/docs/content/components/snippet/without-copy.ts
@@ -1,12 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet hideCopyButton color="primary" variant="solid">
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./without-copy.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spacer/usage.raw.jsx b/apps/docs/content/components/spacer/usage.raw.jsx
new file mode 100644
index 0000000000..8eb045dd61
--- /dev/null
+++ b/apps/docs/content/components/spacer/usage.raw.jsx
@@ -0,0 +1,24 @@
+import {Spacer, Card} from "@nextui-org/react";
+
+export const CustomCard = () => (
+  <Card className="w-[200px] space-y-5 p-4" radius="2xl">
+    <div className="h-24 rounded-lg bg-default-300" />
+    <div className="space-y-3">
+      <div className="h-3 w-3/5 rounded-lg bg-default-200" />
+      <div className="h-3 w-4/5 rounded-lg bg-default-200" />
+      <div className="h-3 w-2/5 rounded-lg bg-default-300" />
+    </div>
+  </Card>
+);
+
+export default function App() {
+  return (
+    <div className="flex">
+      <CustomCard />
+      <Spacer x={4} />
+      <CustomCard />
+      <Spacer x={4} />
+      <CustomCard />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spacer/usage.ts b/apps/docs/content/components/spacer/usage.ts
index 92882e0eb0..1118304c37 100644
--- a/apps/docs/content/components/spacer/usage.ts
+++ b/apps/docs/content/components/spacer/usage.ts
@@ -1,34 +1,7 @@
-const CustomCard = `import {Card} from "@nextui-org/react";
-
-export const CustomCard = () => (
-  <Card className="w-[200px] space-y-5 p-4" radius="2xl">
-    <div className="h-24 rounded-lg bg-default-300"></div>
-    <div className="space-y-3">
-      <div className="h-3 w-3/5 rounded-lg bg-default-200"></div>
-      <div className="h-3 w-4/5 rounded-lg bg-default-200"></div>
-      <div className="h-3 w-2/5 rounded-lg bg-default-300"></div>
-    </div>
-  </Card>
-);`;
-
-const App = `import {Spacer} from "@nextui-org/react";
-import {CustomCard} from "./CustomCard";
-
-export default function App() {
-  return (
-    <div className="flex">
-      <CustomCard />
-      <Spacer x={4} />
-      <CustomCard />
-      <Spacer x={4} />
-      <CustomCard />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CustomCard.jsx": CustomCard,
 };
 
 export default {
diff --git a/apps/docs/content/components/spinner/colors.raw.jsx b/apps/docs/content/components/spinner/colors.raw.jsx
new file mode 100644
index 0000000000..61dd419d98
--- /dev/null
+++ b/apps/docs/content/components/spinner/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner color="default" />
+      <Spinner color="primary" />
+      <Spinner color="secondary" />
+      <Spinner color="success" />
+      <Spinner color="warning" />
+      <Spinner color="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/colors.ts b/apps/docs/content/components/spinner/colors.ts
index 33b27d5392..d5bef810aa 100644
--- a/apps/docs/content/components/spinner/colors.ts
+++ b/apps/docs/content/components/spinner/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner color="default"/>
-      <Spinner color="primary"/>
-      <Spinner color="secondary"/>
-      <Spinner color="success"/>
-      <Spinner color="warning"/>
-      <Spinner color="danger"/>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/label-colors.raw.jsx b/apps/docs/content/components/spinner/label-colors.raw.jsx
new file mode 100644
index 0000000000..706793018b
--- /dev/null
+++ b/apps/docs/content/components/spinner/label-colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner color="default" label="Default" labelColor="foreground" />
+      <Spinner color="primary" label="Primary" labelColor="primary" />
+      <Spinner color="secondary" label="Secondary" labelColor="secondary" />
+      <Spinner color="success" label="Success" labelColor="success" />
+      <Spinner color="warning" label="Warning" labelColor="warning" />
+      <Spinner color="danger" label="Danger" labelColor="danger" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/label-colors.ts b/apps/docs/content/components/spinner/label-colors.ts
index acd289fea0..38384cdf03 100644
--- a/apps/docs/content/components/spinner/label-colors.ts
+++ b/apps/docs/content/components/spinner/label-colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner label="Default" color="default" labelColor="foreground"/>
-      <Spinner label="Primary" color="primary" labelColor="primary"/>
-      <Spinner label="Secondary" color="secondary" labelColor="secondary"/>
-      <Spinner label="Success" color="success" labelColor="success"/>
-      <Spinner label="Warning" color="warning" labelColor="warning"/>
-      <Spinner label="Danger" color="danger" labelColor="danger"/>
-    </div> 
-  );
-}`;
+import App from "./label-colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/label.raw.jsx b/apps/docs/content/components/spinner/label.raw.jsx
new file mode 100644
index 0000000000..d7f29abfa6
--- /dev/null
+++ b/apps/docs/content/components/spinner/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return <Spinner color="warning" label="Loading..." />;
+}
diff --git a/apps/docs/content/components/spinner/label.ts b/apps/docs/content/components/spinner/label.ts
index 3e08afd962..254b95afb8 100644
--- a/apps/docs/content/components/spinner/label.ts
+++ b/apps/docs/content/components/spinner/label.ts
@@ -1,10 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Spinner label="Loading..." color="warning" />
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/sizes.raw.jsx b/apps/docs/content/components/spinner/sizes.raw.jsx
new file mode 100644
index 0000000000..7e740a9dd3
--- /dev/null
+++ b/apps/docs/content/components/spinner/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/spinner/sizes.ts b/apps/docs/content/components/spinner/sizes.ts
index 29c59b2d3a..85a2f5b30b 100644
--- a/apps/docs/content/components/spinner/sizes.ts
+++ b/apps/docs/content/components/spinner/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Spinner size="sm" />
-      <Spinner size="md" />
-      <Spinner size="lg" />
-    </div> 
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/spinner/usage.raw.jsx b/apps/docs/content/components/spinner/usage.raw.jsx
new file mode 100644
index 0000000000..0e516c76c9
--- /dev/null
+++ b/apps/docs/content/components/spinner/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Spinner} from "@nextui-org/react";
+
+export default function App() {
+  return <Spinner />;
+}
diff --git a/apps/docs/content/components/spinner/usage.ts b/apps/docs/content/components/spinner/usage.ts
index c61327f31c..1118304c37 100644
--- a/apps/docs/content/components/spinner/usage.ts
+++ b/apps/docs/content/components/spinner/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Spinner} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Spinner />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/colors.raw.jsx b/apps/docs/content/components/switch/colors.raw.jsx
new file mode 100644
index 0000000000..569b6eb4a6
--- /dev/null
+++ b/apps/docs/content/components/switch/colors.raw.jsx
@@ -0,0 +1,26 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected color="default">
+        Default
+      </Switch>
+      <Switch defaultSelected color="primary">
+        Primary
+      </Switch>
+      <Switch defaultSelected color="secondary">
+        Secondary
+      </Switch>
+      <Switch defaultSelected color="success">
+        Success
+      </Switch>
+      <Switch defaultSelected color="warning">
+        Warning
+      </Switch>
+      <Switch defaultSelected color="danger">
+        Danger
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/colors.ts b/apps/docs/content/components/switch/colors.ts
index a3da415b92..d5bef810aa 100644
--- a/apps/docs/content/components/switch/colors.ts
+++ b/apps/docs/content/components/switch/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Switch defaultSelected color="default">Default</Switch>
-      <Switch defaultSelected color="primary">Primary</Switch>
-      <Switch defaultSelected color="secondary">Secondary</Switch>
-      <Switch defaultSelected color="success">Success</Switch>
-      <Switch defaultSelected color="warning">Warning</Switch>
-      <Switch defaultSelected color="danger">Danger</Switch>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/controlled.raw.jsx b/apps/docs/content/components/switch/controlled.raw.jsx
new file mode 100644
index 0000000000..2e8633b943
--- /dev/null
+++ b/apps/docs/content/components/switch/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  const [isSelected, setIsSelected] = React.useState(true);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
+        Airplane mode
+      </Switch>
+      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/controlled.ts b/apps/docs/content/components/switch/controlled.ts
index b7abbb6ae0..2c3f0cacb4 100644
--- a/apps/docs/content/components/switch/controlled.ts
+++ b/apps/docs/content/components/switch/controlled.ts
@@ -1,17 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  const [isSelected, setIsSelected] = React.useState(true);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Switch isSelected={isSelected} onValueChange={setIsSelected}>
-        Airplane mode
-      </Switch>  
-      <p className="text-small text-default-500">Selected: {isSelected ? "true" : "false"}</p>
-    </div>
-  )  
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/custom-impl.raw.jsx b/apps/docs/content/components/switch/custom-impl.raw.jsx
new file mode 100644
index 0000000000..205a5fcd4f
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-impl.raw.jsx
@@ -0,0 +1,71 @@
+import {VisuallyHidden, useSwitch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+      </g>
+    </svg>
+  );
+};
+
+const ThemeSwitch = (props) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}
diff --git a/apps/docs/content/components/switch/custom-impl.raw.tsx b/apps/docs/content/components/switch/custom-impl.raw.tsx
new file mode 100644
index 0000000000..3cd1d1965f
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-impl.raw.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import {useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
+
+export const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+      </g>
+    </svg>
+  );
+};
+
+const ThemeSwitch = (props: SwitchProps) => {
+  const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} =
+    useSwitch(props);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Component {...getBaseProps()}>
+        <VisuallyHidden>
+          <input {...getInputProps()} />
+        </VisuallyHidden>
+        <div
+          {...getWrapperProps()}
+          className={slots.wrapper({
+            class: [
+              "w-8 h-8",
+              "flex items-center justify-center",
+              "rounded-lg bg-default-100 hover:bg-default-200",
+            ],
+          })}
+        >
+          {isSelected ? <SunIcon /> : <MoonIcon />}
+        </div>
+      </Component>
+      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
+    </div>
+  );
+};
+
+export default function App() {
+  return <ThemeSwitch />;
+}
diff --git a/apps/docs/content/components/switch/custom-impl.ts b/apps/docs/content/components/switch/custom-impl.ts
index 31bb02960d..ef0d8ef531 100644
--- a/apps/docs/content/components/switch/custom-impl.ts
+++ b/apps/docs/content/components/switch/custom-impl.ts
@@ -1,133 +1,12 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch, VisuallyHidden, useSwitch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
-
-const AppTs = `import {Switch, useSwitch, VisuallyHidden, SwitchProps} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-const ThemeSwitch = (props: SwitchProps) => {
-  const {
-    Component, 
-    slots, 
-    isSelected, 
-    getBaseProps, 
-    getInputProps, 
-    getWrapperProps
-  } = useSwitch(props);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Component {...getBaseProps()}>
-          <VisuallyHidden>
-            <input {...getInputProps()} />
-          </VisuallyHidden>
-          <div
-            {...getWrapperProps()}
-            className={slots.wrapper({
-              class: [
-                "w-8 h-8",
-                "flex items-center justify-center",
-                "rounded-lg bg-default-100 hover:bg-default-200",
-              ],
-            })}
-          >
-            {isSelected ? <SunIcon/> : <MoonIcon/>}
-          </div>
-      </Component>
-      <p className="text-default-500 select-none">Lights: {isSelected ? "on" : "off"}</p>
-    </div>
-  )
-}
-
-
-export default function App() {
-  return <ThemeSwitch/>
-}`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/MoonIcon.tsx": MoonIcon,
-  "/SunIcon.tsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/custom-styles.raw.jsx b/apps/docs/content/components/switch/custom-styles.raw.jsx
new file mode 100644
index 0000000000..db7a3568c9
--- /dev/null
+++ b/apps/docs/content/components/switch/custom-styles.raw.jsx
@@ -0,0 +1,32 @@
+import {Switch, cn} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch
+      classNames={{
+        base: cn(
+          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
+          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
+        ),
+        wrapper: "p-0 h-4 overflow-visible",
+        thumb: cn(
+          "w-6 h-6 border-2 shadow-lg",
+          "group-data-[hover=true]:border-primary",
+          //selected
+          "group-data-[selected=true]:ml-6",
+          // pressed
+          "group-data-[pressed=true]:w-7",
+          "group-data-[selected]:group-data-[pressed]:ml-4",
+        ),
+      }}
+    >
+      <div className="flex flex-col gap-1">
+        <p className="text-medium">Enable early access</p>
+        <p className="text-tiny text-default-400">
+          Get access to new features before they are released.
+        </p>
+      </div>
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/custom-styles.ts b/apps/docs/content/components/switch/custom-styles.ts
index c4470a56e0..da3ea9093a 100644
--- a/apps/docs/content/components/switch/custom-styles.ts
+++ b/apps/docs/content/components/switch/custom-styles.ts
@@ -1,34 +1,4 @@
-const App = `import {Switch, cn} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch
-      classNames={{
-        base: cn(
-          "inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center",
-          "justify-between cursor-pointer rounded-lg gap-2 p-4 border-2 border-transparent",
-          "data-[selected=true]:border-primary",
-        ),
-        wrapper: "p-0 h-4 overflow-visible",
-        thumb: cn("w-6 h-6 border-2 shadow-lg",
-          "group-data-[hover=true]:border-primary",
-          //selected
-          "group-data-[selected=true]:ml-6",
-          // pressed
-          "group-data-[pressed=true]:w-7",
-          "group-data-[selected]:group-data-[pressed]:ml-4",
-        ),
-      }}
-    >
-      <div className="flex flex-col gap-1">
-        <p className="text-medium">Enable early access</p>
-        <p className="text-tiny text-default-400">
-          Get access to new features before they are released.
-        </p>
-      </div>
-    </Switch>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/disabled.raw.jsx b/apps/docs/content/components/switch/disabled.raw.jsx
new file mode 100644
index 0000000000..146c57ed38
--- /dev/null
+++ b/apps/docs/content/components/switch/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Switch defaultSelected isDisabled>
+      Automatic updates
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/disabled.ts b/apps/docs/content/components/switch/disabled.ts
index 5914c616bb..1a215cc91f 100644
--- a/apps/docs/content/components/switch/disabled.ts
+++ b/apps/docs/content/components/switch/disabled.ts
@@ -1,12 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch isDisabled defaultSelected>
-      Automatic updates
-    </Switch>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/icons.raw.jsx b/apps/docs/content/components/switch/icons.raw.jsx
new file mode 100644
index 0000000000..ce9264d15c
--- /dev/null
+++ b/apps/docs/content/components/switch/icons.raw.jsx
@@ -0,0 +1,53 @@
+import {Switch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      color="success"
+      endContent={<MoonIcon />}
+      size="lg"
+      startContent={<SunIcon />}
+    >
+      Dark mode
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/icons.ts b/apps/docs/content/components/switch/icons.ts
index 3f3d9fcf1d..22a410c88f 100644
--- a/apps/docs/content/components/switch/icons.ts
+++ b/apps/docs/content/components/switch/icons.ts
@@ -1,59 +1,7 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-export default function App() {
-  return (
-    <Switch
-      defaultSelected
-      size="lg"
-      color="success"
-      startContent={<SunIcon />}
-      endContent={<MoonIcon />}
-    >
-      Dark mode
-    </Switch>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/label.raw.jsx b/apps/docs/content/components/switch/label.raw.jsx
new file mode 100644
index 0000000000..c349c1b537
--- /dev/null
+++ b/apps/docs/content/components/switch/label.raw.jsx
@@ -0,0 +1,5 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return <Switch defaultSelected>Automatic updates</Switch>;
+}
diff --git a/apps/docs/content/components/switch/label.ts b/apps/docs/content/components/switch/label.ts
index c9786705ff..254b95afb8 100644
--- a/apps/docs/content/components/switch/label.ts
+++ b/apps/docs/content/components/switch/label.ts
@@ -1,12 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch defaultSelected>
-      Automatic updates
-    </Switch>
-  );
-}`;
+import App from "./label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/sizes.raw.jsx b/apps/docs/content/components/switch/sizes.raw.jsx
new file mode 100644
index 0000000000..36dbbb9b47
--- /dev/null
+++ b/apps/docs/content/components/switch/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Switch defaultSelected size="sm">
+        Small
+      </Switch>
+      <Switch defaultSelected size="md">
+        Medium
+      </Switch>
+      <Switch defaultSelected size="lg">
+        Large
+      </Switch>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/switch/sizes.ts b/apps/docs/content/components/switch/sizes.ts
index 8a8b6f4f15..85a2f5b30b 100644
--- a/apps/docs/content/components/switch/sizes.ts
+++ b/apps/docs/content/components/switch/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Switch defaultSelected size="sm">Small</Switch>
-      <Switch defaultSelected size="md">Medium</Switch>
-      <Switch defaultSelected size="lg">Large</Switch>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/switch/thumb-icon.raw.jsx b/apps/docs/content/components/switch/thumb-icon.raw.jsx
new file mode 100644
index 0000000000..aa55ff9c33
--- /dev/null
+++ b/apps/docs/content/components/switch/thumb-icon.raw.jsx
@@ -0,0 +1,54 @@
+import {Switch} from "@nextui-org/react";
+
+export const MoonIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SunIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
+        <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Switch
+      defaultSelected
+      color="secondary"
+      size="lg"
+      thumbIcon={({isSelected, className}) =>
+        isSelected ? <SunIcon className={className} /> : <MoonIcon className={className} />
+      }
+    >
+      Dark mode
+    </Switch>
+  );
+}
diff --git a/apps/docs/content/components/switch/thumb-icon.ts b/apps/docs/content/components/switch/thumb-icon.ts
index 41746fa903..4201c3f43c 100644
--- a/apps/docs/content/components/switch/thumb-icon.ts
+++ b/apps/docs/content/components/switch/thumb-icon.ts
@@ -1,64 +1,7 @@
-const MoonIcon = `export const MoonIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M21.53 15.93c-.16-.27-.61-.69-1.73-.49a8.46 8.46 0 01-1.88.13 8.409 8.409 0 01-5.91-2.82 8.068 8.068 0 01-1.44-8.66c.44-1.01.13-1.54-.09-1.76s-.77-.55-1.83-.11a10.318 10.318 0 00-6.32 10.21 10.475 10.475 0 007.04 8.99 10 10 0 002.89.55c.16.01.32.02.48.02a10.5 10.5 0 008.47-4.27c.67-.93.49-1.519.32-1.79z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SunIcon = `export const SunIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="currentColor">
-      <path d="M19 12a7 7 0 11-7-7 7 7 0 017 7z" />
-      <path d="M12 22.96a.969.969 0 01-1-.96v-.08a1 1 0 012 0 1.038 1.038 0 01-1 1.04zm7.14-2.82a1.024 1.024 0 01-.71-.29l-.13-.13a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.984.984 0 01-.7.29zm-14.28 0a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a1 1 0 01-.7.29zM22 13h-.08a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zM2.08 13H2a1 1 0 010-2 1.038 1.038 0 011.04 1 .969.969 0 01-.96 1zm16.93-7.01a1.024 1.024 0 01-.71-.29 1 1 0 010-1.41l.13-.13a1 1 0 011.41 1.41l-.13.13a.984.984 0 01-.7.29zm-14.02 0a1.024 1.024 0 01-.71-.29l-.13-.14a1 1 0 011.41-1.41l.13.13a1 1 0 010 1.41.97.97 0 01-.7.3zM12 3.04a.969.969 0 01-1-.96V2a1 1 0 012 0 1.038 1.038 0 01-1 1.04z" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {Switch} from "@nextui-org/react";
-import {MoonIcon} from "./MoonIcon";
-import {SunIcon} from "./SunIcon";
-
-export default function App() {
-  return (
-    <Switch
-      defaultSelected
-      size="lg"
-      color="secondary"
-      thumbIcon={({ isSelected, className }) =>
-        isSelected ? (
-          <SunIcon className={className} />
-        ) : (
-          <MoonIcon className={className} />
-        )
-      }
-    >
-      Dark mode
-    </Switch>
-  );
-}`;
+import App from "./thumb-icon.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/MoonIcon.jsx": MoonIcon,
-  "/SunIcon.jsx": SunIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/switch/usage.raw.jsx b/apps/docs/content/components/switch/usage.raw.jsx
new file mode 100644
index 0000000000..434305473b
--- /dev/null
+++ b/apps/docs/content/components/switch/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Switch} from "@nextui-org/react";
+
+export default function App() {
+  return <Switch defaultSelected aria-label="Automatic updates" />;
+}
diff --git a/apps/docs/content/components/switch/usage.ts b/apps/docs/content/components/switch/usage.ts
index e76fed14c7..1118304c37 100644
--- a/apps/docs/content/components/switch/usage.ts
+++ b/apps/docs/content/components/switch/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Switch} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Switch defaultSelected aria-label="Automatic updates"/>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/async-pagination.raw.jsx b/apps/docs/content/components/table/async-pagination.raw.jsx
new file mode 100644
index 0000000000..266a97e842
--- /dev/null
+++ b/apps/docs/content/components/table/async-pagination.raw.jsx
@@ -0,0 +1,69 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Pagination,
+  Spinner,
+  getKeyValue,
+} from "@nextui-org/react";
+import useSWR from "swr";
+
+const fetcher = (...args) => fetch(...args).then((res) => res.json());
+
+export default function App() {
+  const [page, setPage] = React.useState(1);
+
+  const {data, isLoading} = useSWR(`https://swapi.py4e.com/api/people?page=${page}`, fetcher, {
+    keepPreviousData: true,
+  });
+
+  const rowsPerPage = 10;
+
+  const pages = React.useMemo(() => {
+    return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
+  }, [data?.count, rowsPerPage]);
+
+  const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle";
+
+  return (
+    <Table
+      aria-label="Example table with client async pagination"
+      bottomContent={
+        pages > 0 ? (
+          <div className="flex w-full justify-center">
+            <Pagination
+              isCompact
+              showControls
+              showShadow
+              color="primary"
+              page={page}
+              total={pages}
+              onChange={(page) => setPage(page)}
+            />
+          </div>
+        ) : null
+      }
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        items={data?.results ?? []}
+        loadingContent={<Spinner />}
+        loadingState={loadingState}
+      >
+        {(item) => (
+          <TableRow key={item?.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/async-pagination.ts b/apps/docs/content/components/table/async-pagination.ts
index f5c51a3c4f..f59ac27a4c 100644
--- a/apps/docs/content/components/table/async-pagination.ts
+++ b/apps/docs/content/components/table/async-pagination.ts
@@ -1,62 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
-import useSWR from "swr";
-
-const fetcher = (...args) => fetch(...args).then((res) => res.json());
-
-export default function App() {
-  const [page, setPage] = React.useState(1);
-
-  const {data, isLoading} = useSWR(\`https://swapi.py4e.com/api/people?page=\$\{page\}\`, fetcher, {
-    keepPreviousData: true,
-  });
-
-  const rowsPerPage = 10;
-
-  const pages = React.useMemo(() => {
-    return data?.count ? Math.ceil(data.count / rowsPerPage) : 0;
-  }, [data?.count, rowsPerPage]);
-
-  const loadingState = isLoading || data?.results.length === 0 ? "loading" : "idle";
-
-  return (
-    <Table
-      aria-label="Example table with client async pagination"
-      bottomContent={
-        pages > 0 ? (
-          <div className="flex w-full justify-center">
-            <Pagination
-              isCompact
-              showControls
-              showShadow
-              color="primary"
-              page={page}
-              total={pages}
-              onChange={(page) => setPage(page)}
-            />
-          </div>
-        ) : null
-      }
-    >
-      <TableHeader>
-        <TableColumn key="name">Name</TableColumn>
-        <TableColumn key="height">Height</TableColumn>
-        <TableColumn key="mass">Mass</TableColumn>
-        <TableColumn key="birth_year">Birth year</TableColumn>
-      </TableHeader>
-      <TableBody
-        items={data?.results ?? []}
-        loadingContent={<Spinner />}
-        loadingState={loadingState}
-      >
-        {(item) => (
-          <TableRow key={item?.name}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./async-pagination.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/controlled-selection.raw.jsx b/apps/docs/content/components/table/controlled-selection.raw.jsx
new file mode 100644
index 0000000000..3ee296f7b1
--- /dev/null
+++ b/apps/docs/content/components/table/controlled-selection.raw.jsx
@@ -0,0 +1,75 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+} from "@nextui-org/react";
+
+const rows = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+];
+
+const columns = [
+  {
+    key: "name",
+    label: "NAME",
+  },
+  {
+    key: "role",
+    label: "ROLE",
+  },
+  {
+    key: "status",
+    label: "STATUS",
+  },
+];
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"]));
+
+  return (
+    <Table
+      aria-label="Controlled table example with dynamic content"
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      onSelectionChange={setSelectedKeys}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/controlled-selection.ts b/apps/docs/content/components/table/controlled-selection.ts
index 0a54c2bd26..b141b81895 100644
--- a/apps/docs/content/components/table/controlled-selection.ts
+++ b/apps/docs/content/components/table/controlled-selection.ts
@@ -1,70 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react";
-
-const rows = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-];
-
-const columns = [
-  {
-    key: "name",
-    label: "NAME",
-  },
-  {
-    key: "role",
-    label: "ROLE",
-  },
-  {
-    key: "status",
-    label: "STATUS",
-  },
-];
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"]));
-
-  return (
-    <Table 
-      aria-label="Controlled table example with dynamic content"
-      selectionMode="multiple"
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <TableHeader columns={columns}>
-        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
-      </TableHeader>
-      <TableBody items={rows}>
-        {(item) => (
-          <TableRow key={item.key}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./controlled-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/custom-cells.raw.jsx b/apps/docs/content/components/table/custom-cells.raw.jsx
new file mode 100644
index 0000000000..e29158daeb
--- /dev/null
+++ b/apps/docs/content/components/table/custom-cells.raw.jsx
@@ -0,0 +1,271 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  User,
+  Chip,
+  Tooltip,
+} from "@nextui-org/react";
+
+export const columns = [
+  {name: "NAME", uid: "name"},
+  {name: "ROLE", uid: "role"},
+  {name: "STATUS", uid: "status"},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "Community Manager",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "Sales Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+];
+
+export const EyeIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12.9833 10C12.9833 11.65 11.65 12.9833 10 12.9833C8.35 12.9833 7.01666 11.65 7.01666 10C7.01666 8.35 8.35 7.01666 10 7.01666C11.65 7.01666 12.9833 8.35 12.9833 10Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M9.99999 16.8916C12.9417 16.8916 15.6833 15.1583 17.5917 12.1583C18.3417 10.9833 18.3417 9.00831 17.5917 7.83331C15.6833 4.83331 12.9417 3.09998 9.99999 3.09998C7.05833 3.09998 4.31666 4.83331 2.40833 7.83331C1.65833 9.00831 1.65833 10.9833 2.40833 12.1583C4.31666 15.1583 7.05833 16.8916 9.99999 16.8916Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const DeleteIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M8.60834 13.75H11.3833"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M7.91669 10.4167H12.0834"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const EditIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M2.5 18.3333H17.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+const statusColorMap = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+export default function App() {
+  const renderCell = React.useCallback((user, columnKey) => {
+    const cellValue = user[columnKey];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "lg", src: user.avatar}}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-sm capitalize">{cellValue}</p>
+            <p className="text-bold text-sm capitalize text-default-400">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex items-center gap-2">
+            <Tooltip content="Details">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <EyeIcon />
+              </span>
+            </Tooltip>
+            <Tooltip content="Edit user">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <EditIcon />
+              </span>
+            </Tooltip>
+            <Tooltip color="danger" content="Delete user">
+              <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                <DeleteIcon />
+              </span>
+            </Tooltip>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  return (
+    <Table aria-label="Example table with custom cells">
+      <TableHeader columns={columns}>
+        {(column) => (
+          <TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"}>
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody items={users}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/custom-cells.raw.tsx b/apps/docs/content/components/table/custom-cells.raw.tsx
new file mode 100644
index 0000000000..46ff88e48c
--- /dev/null
+++ b/apps/docs/content/components/table/custom-cells.raw.tsx
@@ -0,0 +1,278 @@
+import React, {SVGProps} from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  User,
+  Chip,
+  Tooltip,
+  ChipProps,
+} from "@nextui-org/react";
+
+export type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+export const columns = [
+  {name: "NAME", uid: "name"},
+  {name: "ROLE", uid: "role"},
+  {name: "STATUS", uid: "status"},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "Community Manager",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "Sales Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+];
+
+export const EyeIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M12.9833 10C12.9833 11.65 11.65 12.9833 10 12.9833C8.35 12.9833 7.01666 11.65 7.01666 10C7.01666 8.35 8.35 7.01666 10 7.01666C11.65 7.01666 12.9833 8.35 12.9833 10Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M9.99999 16.8916C12.9417 16.8916 15.6833 15.1583 17.5917 12.1583C18.3417 10.9833 18.3417 9.00831 17.5917 7.83331C15.6833 4.83331 12.9417 3.09998 9.99999 3.09998C7.05833 3.09998 4.31666 4.83331 2.40833 7.83331C1.65833 9.00831 1.65833 10.9833 2.40833 12.1583C4.31666 15.1583 7.05833 16.8916 9.99999 16.8916Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const DeleteIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M8.60834 13.75H11.3833"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+      <path
+        d="M7.91669 10.4167H12.0834"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const EditIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 20 20"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+      <path
+        d="M2.5 18.3333H17.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+const statusColorMap: Record<string, ChipProps["color"]> = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+type User = (typeof users)[0];
+
+export default function App() {
+  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
+    const cellValue = user[columnKey as keyof User];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "lg", src: user.avatar}}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-sm capitalize">{cellValue}</p>
+            <p className="text-bold text-sm capitalize text-default-400">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex items-center gap-2">
+            <Tooltip content="Details">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <EyeIcon />
+              </span>
+            </Tooltip>
+            <Tooltip content="Edit user">
+              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
+                <EditIcon />
+              </span>
+            </Tooltip>
+            <Tooltip color="danger" content="Delete user">
+              <span className="text-lg text-danger cursor-pointer active:opacity-50">
+                <DeleteIcon />
+              </span>
+            </Tooltip>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  return (
+    <Table aria-label="Example table with custom cells">
+      <TableHeader columns={columns}>
+        {(column) => (
+          <TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"}>
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody items={users}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/custom-cells.ts b/apps/docs/content/components/table/custom-cells.ts
index 92680efd5f..9b7f207298 100644
--- a/apps/docs/content/components/table/custom-cells.ts
+++ b/apps/docs/content/components/table/custom-cells.ts
@@ -1,366 +1,12 @@
-const data = `const columns = [
-  {name: "NAME", uid: "name"},
-  {name: "ROLE", uid: "role"},
-  {name: "STATUS", uid: "status"},
-  {name: "ACTIONS", uid: "actions"},
-];
-
-const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "Community Manager",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "Sales Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
-    email: "kristen.cooper@example.com",
-  },
-];
-
-export {columns, users};`;
-
-const EyeIcon = `export const EyeIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 20 20"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M12.9833 10C12.9833 11.65 11.65 12.9833 10 12.9833C8.35 12.9833 7.01666 11.65 7.01666 10C7.01666 8.35 8.35 7.01666 10 7.01666C11.65 7.01666 12.9833 8.35 12.9833 10Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-    <path
-      d="M9.99999 16.8916C12.9417 16.8916 15.6833 15.1583 17.5917 12.1583C18.3417 10.9833 18.3417 9.00831 17.5917 7.83331C15.6833 4.83331 12.9417 3.09998 9.99999 3.09998C7.05833 3.09998 4.31666 4.83331 2.40833 7.83331C1.65833 9.00831 1.65833 10.9833 2.40833 12.1583C4.31666 15.1583 7.05833 16.8916 9.99999 16.8916Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-  </svg>
-);`;
-
-const DeleteIcon = `export const DeleteIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 20 20"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-    <path
-      d="M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-    <path
-      d="M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-    <path
-      d="M8.60834 13.75H11.3833"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-    <path
-      d="M7.91669 10.4167H12.0834"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    />
-  </svg>
-);`;
-
-const EditIcon = `export const EditIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 20 20"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={1.5}
-    />
-    <path
-      d="M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={1.5}
-    />
-    <path
-      d="M2.5 18.3333H17.5"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={1.5}
-    />
-  </svg>
-);`;
-
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, getKeyValue} from "@nextui-org/react";
-import {EditIcon} from "./EditIcon";
-import {DeleteIcon} from "./DeleteIcon";
-import {EyeIcon} from "./EyeIcon";
-import {columns, users} from "./data";
-
-const statusColorMap = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-export default function App() {
-  const renderCell = React.useCallback((user, columnKey) => {
-    const cellValue = user[columnKey];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "lg", src: user.avatar}}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-sm capitalize">{cellValue}</p>
-            <p className="text-bold text-sm capitalize text-default-400">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex items-center gap-2">
-            <Tooltip content="Details">
-              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-                <EyeIcon />
-              </span>
-            </Tooltip>
-            <Tooltip content="Edit user">
-              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-                <EditIcon />
-              </span>
-            </Tooltip>
-            <Tooltip color="danger" content="Delete user">
-              <span className="text-lg text-danger cursor-pointer active:opacity-50">
-                <DeleteIcon />
-              </span>
-            </Tooltip>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-
-  return (
-  <Table aria-label="Example table with custom cells">
-      <TableHeader columns={columns}>
-        {(column) => (
-          <TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"}>
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody items={users}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
-
-const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, User, Chip, Tooltip, ChipProps, getKeyValue} from "@nextui-org/react";
-import {EditIcon} from "./EditIcon";
-import {DeleteIcon} from "./DeleteIcon";
-import {EyeIcon} from "./EyeIcon";
-import {columns, users} from "./data";
-
-const statusColorMap: Record<string, ChipProps["color"]>  = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-type User = typeof users[0];
-
-export default function App() {
-  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
-    const cellValue = user[columnKey as keyof User];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "lg", src: user.avatar}}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-sm capitalize">{cellValue}</p>
-            <p className="text-bold text-sm capitalize text-default-400">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex items-center gap-2">
-            <Tooltip content="Details">
-              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-                <EyeIcon />
-              </span>
-            </Tooltip>
-            <Tooltip content="Edit user">
-              <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
-                <EditIcon />
-              </span>
-            </Tooltip>
-            <Tooltip color="danger" content="Delete user">
-              <span className="text-lg text-danger cursor-pointer active:opacity-50">
-                <DeleteIcon />
-              </span>
-            </Tooltip>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-
-  return (
-  <Table aria-label="Example table with custom cells">
-      <TableHeader columns={columns}>
-        {(column) => (
-          <TableColumn key={column.uid} align={column.uid === "actions" ? "center" : "start"}>
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody items={users}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./custom-cells.raw.jsx?raw";
+import AppTs from "./custom-cells.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/EditIcon.jsx": EditIcon,
-  "/DeleteIcon.jsx": DeleteIcon,
-  "/EyeIcon.jsx": EyeIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/data.js": data,
-  "/EditIcon.jsx": EditIcon,
-  "/DeleteIcon.jsx": DeleteIcon,
-  "/EyeIcon.jsx": EyeIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx
new file mode 100644
index 0000000000..f00049bb6f
--- /dev/null
+++ b/apps/docs/content/components/table/custom-styles.raw.jsx
@@ -0,0 +1,662 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Chip,
+  User,
+  Pagination,
+} from "@nextui-org/react";
+
+export const columns = [
+  {name: "ID", uid: "id", sortable: true},
+  {name: "NAME", uid: "name", sortable: true},
+  {name: "AGE", uid: "age", sortable: true},
+  {name: "ROLE", uid: "role", sortable: true},
+  {name: "TEAM", uid: "team"},
+  {name: "EMAIL", uid: "email"},
+  {name: "STATUS", uid: "status", sortable: true},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const statusOptions = [
+  {name: "Active", uid: "active"},
+  {name: "Paused", uid: "paused"},
+  {name: "Vacation", uid: "vacation"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?img=8",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=10",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?img=15",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?img=20",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=33",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?img=29",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://i.pravatar.cc/150?img=50",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://i.pravatar.cc/150?img=45",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
+}
+
+export const PlusIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path d="M6 12h12" />
+        <path d="M12 18V6" />
+      </g>
+    </svg>
+  );
+};
+
+export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...otherProps}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+const statusColorMap = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
+
+export default function App() {
+  const [filterValue, setFilterValue] = React.useState("");
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
+  const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS));
+  const [statusFilter, setStatusFilter] = React.useState("all");
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState({
+    column: "age",
+    direction: "ascending",
+  });
+  const [page, setPage] = React.useState(1);
+
+  const pages = Math.ceil(users.length / rowsPerPage);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    if (visibleColumns === "all") return columns;
+
+    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredUsers = [...users];
+
+    if (hasSearchFilter) {
+      filteredUsers = filteredUsers.filter((user) =>
+        user.name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
+      filteredUsers = filteredUsers.filter((user) =>
+        Array.from(statusFilter).includes(user.status),
+      );
+    }
+
+    return filteredUsers;
+  }, [users, filterValue, statusFilter]);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    return [...items].sort((a, b) => {
+      const first = a[sortDescriptor.column];
+      const second = b[sortDescriptor.column];
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((user, columnKey) => {
+    const cellValue = user[columnKey];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "full", size: "sm", src: user.avatar}}
+            classNames={{
+              description: "text-default-500",
+            }}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+            <p className="text-bold text-tiny capitalize text-default-500">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip
+            className="capitalize border-none gap-1 text-default-600"
+            color={statusColorMap[user.status]}
+            size="sm"
+            variant="dot"
+          >
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown className="bg-background border-1 border-default-200">
+              <DropdownTrigger>
+                <Button isIconOnly radius="full" size="sm" variant="light">
+                  <VerticalDotsIcon className="text-default-400" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const onRowsPerPageChange = React.useCallback((e) => {
+    setRowsPerPage(Number(e.target.value));
+    setPage(1);
+  }, []);
+
+  const onSearchChange = React.useCallback((value) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between gap-3 items-end">
+          <Input
+            isClearable
+            classNames={{
+              base: "w-full sm:max-w-[44%]",
+              inputWrapper: "border-1",
+            }}
+            placeholder="Search by name..."
+            size="sm"
+            startContent={<SearchIcon className="text-default-300" />}
+            value={filterValue}
+            variant="bordered"
+            onClear={() => setFilterValue("")}
+            onValueChange={onSearchChange}
+          />
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Status
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={statusFilter}
+                selectionMode="multiple"
+                onSelectionChange={setStatusFilter}
+              >
+                {statusOptions.map((status) => (
+                  <DropdownItem key={status.uid} className="capitalize">
+                    {capitalize(status.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button className="bg-foreground text-background" endContent={<PlusIcon />} size="sm">
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">Total {users.length} users</span>
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    onSearchChange,
+    onRowsPerPageChange,
+    users.length,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <Pagination
+          showControls
+          classNames={{
+            cursor: "bg-foreground text-background",
+          }}
+          color="default"
+          isDisabled={hasSearchFilter}
+          page={page}
+          total={pages}
+          variant="light"
+          onChange={setPage}
+        />
+        <span className="text-small text-default-400">
+          {selectedKeys === "all"
+            ? "All items selected"
+            : `${selectedKeys.size} of ${items.length} selected`}
+        </span>
+      </div>
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  const classNames = React.useMemo(
+    () => ({
+      wrapper: ["max-h-[382px]", "max-w-3xl"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]/tr:first:before:rounded-none",
+        "group-data-[first=true]/tr:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]/tr:before:rounded-none",
+        // last
+        "group-data-[last=true]/tr:first:before:rounded-none",
+        "group-data-[last=true]/tr:last:before:rounded-none",
+      ],
+    }),
+    [],
+  );
+
+  return (
+    <Table
+      isCompact
+      removeWrapper
+      aria-label="Example table with custom cells, pagination and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      checkboxesProps={{
+        classNames: {
+          wrapper: "after:bg-foreground after:text-background text-background",
+        },
+      }}
+      classNames={classNames}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSelectionChange={setSelectedKeys}
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No users found"} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx
new file mode 100644
index 0000000000..4529846f56
--- /dev/null
+++ b/apps/docs/content/components/table/custom-styles.raw.tsx
@@ -0,0 +1,674 @@
+import React, {SVGProps} from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Chip,
+  User,
+  Pagination,
+  Selection,
+  ChipProps,
+  SortDescriptor,
+} from "@nextui-org/react";
+
+export type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+export const columns = [
+  {name: "ID", uid: "id", sortable: true},
+  {name: "NAME", uid: "name", sortable: true},
+  {name: "AGE", uid: "age", sortable: true},
+  {name: "ROLE", uid: "role", sortable: true},
+  {name: "TEAM", uid: "team"},
+  {name: "EMAIL", uid: "email"},
+  {name: "STATUS", uid: "status", sortable: true},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const statusOptions = [
+  {name: "Active", uid: "active"},
+  {name: "Paused", uid: "paused"},
+  {name: "Vacation", uid: "vacation"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "brian.kim@example.com",
+    status: "active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?img=8",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=10",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?img=15",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?img=20",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=33",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?img=29",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://i.pravatar.cc/150?img=50",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://i.pravatar.cc/150?img=45",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
+}
+
+export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path d="M6 12h12" />
+        <path d="M12 18V6" />
+      </g>
+    </svg>
+  );
+};
+
+export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SearchIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...otherProps}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+const statusColorMap: Record<string, ChipProps["color"]> = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
+
+type User = (typeof users)[0];
+
+export default function App() {
+  const [filterValue, setFilterValue] = React.useState("");
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]));
+  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(
+    new Set(INITIAL_VISIBLE_COLUMNS),
+  );
+  const [statusFilter, setStatusFilter] = React.useState<Selection>("all");
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
+    column: "age",
+    direction: "ascending",
+  });
+  const [page, setPage] = React.useState(1);
+
+  const pages = Math.ceil(users.length / rowsPerPage);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    if (visibleColumns === "all") return columns;
+
+    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredUsers = [...users];
+
+    if (hasSearchFilter) {
+      filteredUsers = filteredUsers.filter((user) =>
+        user.name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
+      filteredUsers = filteredUsers.filter((user) =>
+        Array.from(statusFilter).includes(user.status),
+      );
+    }
+
+    return filteredUsers;
+  }, [users, filterValue, statusFilter]);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    return [...items].sort((a: User, b: User) => {
+      const first = a[sortDescriptor.column as keyof User] as number;
+      const second = b[sortDescriptor.column as keyof User] as number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
+    const cellValue = user[columnKey as keyof User];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "full", size: "sm", src: user.avatar}}
+            classNames={{
+              description: "text-default-500",
+            }}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+            <p className="text-bold text-tiny capitalize text-default-500">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip
+            className="capitalize border-none gap-1 text-default-600"
+            color={statusColorMap[user.status]}
+            size="sm"
+            variant="dot"
+          >
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown className="bg-background border-1 border-default-200">
+              <DropdownTrigger>
+                <Button isIconOnly radius="full" size="sm" variant="light">
+                  <VerticalDotsIcon className="text-default-400" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    setRowsPerPage(Number(e.target.value));
+    setPage(1);
+  }, []);
+
+  const onSearchChange = React.useCallback((value?: string) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between gap-3 items-end">
+          <Input
+            isClearable
+            classNames={{
+              base: "w-full sm:max-w-[44%]",
+              inputWrapper: "border-1",
+            }}
+            placeholder="Search by name..."
+            size="sm"
+            startContent={<SearchIcon className="text-default-300" />}
+            value={filterValue}
+            variant="bordered"
+            onClear={() => setFilterValue("")}
+            onValueChange={onSearchChange}
+          />
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Status
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={statusFilter}
+                selectionMode="multiple"
+                onSelectionChange={setStatusFilter}
+              >
+                {statusOptions.map((status) => (
+                  <DropdownItem key={status.uid} className="capitalize">
+                    {capitalize(status.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button
+                  endContent={<ChevronDownIcon className="text-small" />}
+                  size="sm"
+                  variant="flat"
+                >
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button className="bg-foreground text-background" endContent={<PlusIcon />} size="sm">
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">Total {users.length} users</span>
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    onSearchChange,
+    onRowsPerPageChange,
+    users.length,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <Pagination
+          showControls
+          classNames={{
+            cursor: "bg-foreground text-background",
+          }}
+          color="default"
+          isDisabled={hasSearchFilter}
+          page={page}
+          total={pages}
+          variant="light"
+          onChange={setPage}
+        />
+        <span className="text-small text-default-400">
+          {selectedKeys === "all"
+            ? "All items selected"
+            : `${selectedKeys.size} of ${items.length} selected`}
+        </span>
+      </div>
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  const classNames = React.useMemo(
+    () => ({
+      wrapper: ["max-h-[382px]", "max-w-3xl"],
+      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
+      td: [
+        // changing the rows border radius
+        // first
+        "group-data-[first=true]/tr:first:before:rounded-none",
+        "group-data-[first=true]/tr:last:before:rounded-none",
+        // middle
+        "group-data-[middle=true]/tr:before:rounded-none",
+        // last
+        "group-data-[last=true]/tr:first:before:rounded-none",
+        "group-data-[last=true]/tr:last:before:rounded-none",
+      ],
+    }),
+    [],
+  );
+
+  return (
+    <Table
+      isCompact
+      removeWrapper
+      aria-label="Example table with custom cells, pagination and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      checkboxesProps={{
+        classNames: {
+          wrapper: "after:bg-foreground after:text-background text-background",
+        },
+      }}
+      classNames={classNames}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSelectionChange={setSelectedKeys}
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No users found"} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/custom-styles.ts b/apps/docs/content/components/table/custom-styles.ts
index 7e53d1ef39..29cf5fd0ee 100644
--- a/apps/docs/content/components/table/custom-styles.ts
+++ b/apps/docs/content/components/table/custom-styles.ts
@@ -1,1034 +1,8 @@
-const data = `const columns = [
-  {name: "ID", uid: "id", sortable: true},
-  {name: "NAME", uid: "name", sortable: true},
-  {name: "AGE", uid: "age", sortable: true},
-  {name: "ROLE", uid: "role", sortable: true},
-  {name: "TEAM", uid: "team"},
-  {name: "EMAIL", uid: "email"},
-  {name: "STATUS", uid: "status", sortable: true},
-  {name: "ACTIONS", uid: "actions"},
-];
-
-const statusOptions = [
-  {name: "Active", uid: "active"},
-  {name: "Paused", uid: "paused"},
-  {name: "Vacation", uid: "vacation"},
-];
-
-const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://i.pravatar.cc/150?img=4",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://i.pravatar.cc/150?img=5",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?img=8",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=10",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://i.pravatar.cc/150?img=12",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://i.pravatar.cc/150?img=16",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?img=15",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?img=20",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=33",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?img=29",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://i.pravatar.cc/150?img=50",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://i.pravatar.cc/150?img=45",
-    email: "mia.robinson@example.com",
-  },
-];
-
-export {columns, users, statusOptions};`;
-
-const utils = `export function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}`;
-
-const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    >
-      <path d="M6 12h12" />
-      <path d="M12 18V6" />
-    </g>
-  </svg>
-);`;
-
-const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...otherProps}
-  >
-    <path
-      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);`;
-
-const App = `import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Input,
-  Button,
-  DropdownTrigger,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Chip,
-  User,
-  Pagination,
-} from "@nextui-org/react";
-import {PlusIcon} from "./PlusIcon";
-import {VerticalDotsIcon} from "./VerticalDotsIcon";
-import {SearchIcon} from "./SearchIcon";
-import {ChevronDownIcon} from "./ChevronDownIcon";
-import {columns, users, statusOptions} from "./data";
-import {capitalize} from "./utils";
-
-const statusColorMap = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
-
-export default function App() {
-  const [filterValue, setFilterValue] = React.useState("");
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
-  const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS));
-  const [statusFilter, setStatusFilter] = React.useState("all");
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [sortDescriptor, setSortDescriptor] = React.useState({
-    column: "age",
-    direction: "ascending",
-  });
-  const [page, setPage] = React.useState(1);
-
-  const pages = Math.ceil(users.length / rowsPerPage);
-
-  const hasSearchFilter = Boolean(filterValue);
-
-  const headerColumns = React.useMemo(() => {
-    if (visibleColumns === "all") return columns;
-
-    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
-  }, [visibleColumns]);
-
-  const filteredItems = React.useMemo(() => {
-    let filteredUsers = [...users];
-
-    if (hasSearchFilter) {
-      filteredUsers = filteredUsers.filter((user) =>
-        user.name.toLowerCase().includes(filterValue.toLowerCase()),
-      );
-    }
-    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
-      filteredUsers = filteredUsers.filter((user) =>
-        Array.from(statusFilter).includes(user.status),
-      );
-    }
-
-    return filteredUsers;
-  }, [users, filterValue, statusFilter]);
-
-  const items = React.useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return filteredItems.slice(start, end);
-  }, [page, filteredItems, rowsPerPage]);
-
-  const sortedItems = React.useMemo(() => {
-    return [...items].sort((a, b) => {
-      const first = a[sortDescriptor.column];
-      const second = b[sortDescriptor.column];
-      const cmp = first < second ? -1 : first > second ? 1 : 0;
-
-      return sortDescriptor.direction === "descending" ? -cmp : cmp;
-    });
-  }, [sortDescriptor, items]);
-
-  const renderCell = React.useCallback((user, columnKey) => {
-    const cellValue = user[columnKey];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "full", size: "sm", src: user.avatar}}
-            classNames={{
-              description: "text-default-500",
-            }}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-small capitalize">{cellValue}</p>
-            <p className="text-bold text-tiny capitalize text-default-500">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip
-            className="capitalize border-none gap-1 text-default-600"
-            color={statusColorMap[user.status]}
-            size="sm"
-            variant="dot"
-          >
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-
-  const onRowsPerPageChange = React.useCallback((e) => {
-    setRowsPerPage(Number(e.target.value));
-    setPage(1);
-  }, []);
-
-
-  const onSearchChange = React.useCallback((value) => {
-    if (value) {
-      setFilterValue(value);
-      setPage(1);
-    } else {
-      setFilterValue("");
-    }
-  }, []);
-
-  const topContent = React.useMemo(() => {
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex justify-between gap-3 items-end">
-          <Input
-            isClearable
-            classNames={{
-              base: "w-full sm:max-w-[44%]",
-              inputWrapper: "border-1",
-            }}
-            placeholder="Search by name..."
-            size="sm"
-            startContent={<SearchIcon className="text-default-300" />}
-            value={filterValue}
-            variant="bordered"
-            onClear={() => setFilterValue("")}
-            onValueChange={onSearchChange}
-          />
-          <div className="flex gap-3">
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button
-                  endContent={<ChevronDownIcon className="text-small" />}
-                  size="sm"
-                  variant="flat"
-                >
-                  Status
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={statusFilter}
-                selectionMode="multiple"
-                onSelectionChange={setStatusFilter}
-              >
-                {statusOptions.map((status) => (
-                  <DropdownItem key={status.uid} className="capitalize">
-                    {capitalize(status.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button
-                  endContent={<ChevronDownIcon className="text-small" />}
-                  size="sm"
-                  variant="flat"
-                >
-                  Columns
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={visibleColumns}
-                selectionMode="multiple"
-                onSelectionChange={setVisibleColumns}
-              >
-                {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
-                    {capitalize(column.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Button
-              className="bg-foreground text-background"
-              endContent={<PlusIcon />}
-              size="sm"
-            >
-              Add New
-            </Button>
-          </div>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="text-default-400 text-small">Total {users.length} users</span>
-          <label className="flex items-center text-default-400 text-small">
-            Rows per page:
-            <select
-              className="bg-transparent outline-none text-default-400 text-small"
-              onChange={onRowsPerPageChange}
-            >
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-            </select>
-          </label>
-        </div>
-      </div>
-    );
-  }, [
-    filterValue,
-    statusFilter,
-    visibleColumns,
-    onSearchChange,
-    onRowsPerPageChange,
-    users.length,
-    hasSearchFilter,
-  ]);
-
-  const bottomContent = React.useMemo(() => {
-    return (
-      <div className="py-2 px-2 flex justify-between items-center">
-        <Pagination
-          showControls
-          classNames={{
-            cursor: "bg-foreground text-background",
-          }}
-          color="default"
-          isDisabled={hasSearchFilter}
-          page={page}
-          total={pages}
-          variant="light"
-          onChange={setPage}
-        />
-        <span className="text-small text-default-400">
-          {selectedKeys === "all"
-            ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
-        </span>
-      </div>
-    );
-  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
-
-  const classNames = React.useMemo(
-    () => ({
-      wrapper: ["max-h-[382px]", "max-w-3xl"],
-      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
-      td: [
-        // changing the rows border radius
-        // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
-        // middle
-        "group-data-[middle=true]:before:rounded-none",
-        // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
-      ],
-    }),
-    [],
-  );
-
-  return (
-    <Table
-      isCompact
-      removeWrapper
-      aria-label="Example table with custom cells, pagination and sorting"
-      bottomContent={bottomContent}
-      bottomContentPlacement="outside"
-      checkboxesProps={{
-        classNames: {
-          wrapper: "after:bg-foreground after:text-background text-background",
-        },
-      }}
-      classNames={classNames}
-      selectedKeys={selectedKeys}
-      selectionMode="multiple"
-      sortDescriptor={sortDescriptor}
-      topContent={topContent}
-      topContentPlacement="outside"
-      onSelectionChange={setSelectedKeys}
-      onSortChange={setSortDescriptor}
-    >
-      <TableHeader columns={headerColumns}>
-        {(column) => (
-          <TableColumn
-            key={column.uid}
-            align={column.uid === "actions" ? "center" : "start"}
-            allowsSorting={column.sortable}
-          >
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody emptyContent={"No users found"} items={sortedItems}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
-
-const AppTs = `import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Input,
-  Button,
-  DropdownTrigger,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Chip,
-  User,
-  Pagination,
-  Selection,
-  ChipProps,
-  SortDescriptor
-} from "@nextui-org/react";
-import {PlusIcon} from "./PlusIcon";
-import {VerticalDotsIcon} from "./VerticalDotsIcon";
-import {ChevronDownIcon} from "./ChevronDownIcon";
-import {SearchIcon} from "./SearchIcon";
-import {columns, users, statusOptions} from "./data";
-import {capitalize} from "./utils";
-
-const statusColorMap: Record<string, ChipProps["color"]> = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
-
-type User = typeof users[0];
-
-export default function App() {
-  const [filterValue, setFilterValue] = React.useState("");
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]));
-  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(new Set(INITIAL_VISIBLE_COLUMNS));
-  const [statusFilter, setStatusFilter] = React.useState<Selection>("all");
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
-    column: "age",
-    direction: "ascending",
-  });
-  const [page, setPage] = React.useState(1);
-
-  const pages = Math.ceil(users.length / rowsPerPage);
-
-  const hasSearchFilter = Boolean(filterValue);
-
-  const headerColumns = React.useMemo(() => {
-    if (visibleColumns === "all") return columns;
-
-    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
-  }, [visibleColumns]);
-
-  const filteredItems = React.useMemo(() => {
-    let filteredUsers = [...users];
-
-    if (hasSearchFilter) {
-      filteredUsers = filteredUsers.filter((user) =>
-        user.name.toLowerCase().includes(filterValue.toLowerCase()),
-      );
-    }
-    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
-      filteredUsers = filteredUsers.filter((user) =>
-        Array.from(statusFilter).includes(user.status),
-      );
-    }
-
-    return filteredUsers;
-  }, [users, filterValue, statusFilter]);
-
-  const items = React.useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return filteredItems.slice(start, end);
-  }, [page, filteredItems, rowsPerPage]);
-
-  const sortedItems = React.useMemo(() => {
-    return [...items].sort((a: User, b: User) => {
-      const first = a[sortDescriptor.column as keyof User] as number;
-      const second = b[sortDescriptor.column as keyof User] as number;
-      const cmp = first < second ? -1 : first > second ? 1 : 0;
-
-      return sortDescriptor.direction === "descending" ? -cmp : cmp;
-    });
-  }, [sortDescriptor, items]);
-
-  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
-    const cellValue = user[columnKey as keyof User];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "full", size: "sm", src: user.avatar}}
-            classNames={{
-              description: "text-default-500",
-            }}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-small capitalize">{cellValue}</p>
-            <p className="text-bold text-tiny capitalize text-default-500">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip
-            className="capitalize border-none gap-1 text-default-600"
-            color={statusColorMap[user.status]}
-            size="sm"
-            variant="dot"
-          >
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-  
-
-  const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    setRowsPerPage(Number(e.target.value));
-    setPage(1);
-  }, []);
-
-  const onSearchChange = React.useCallback((value?: string) => {
-    if (value) {
-      setFilterValue(value);
-      setPage(1);
-    } else {
-      setFilterValue("");
-    }
-  }, []);
-
-  const topContent = React.useMemo(() => {
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex justify-between gap-3 items-end">
-          <Input
-            isClearable
-            classNames={{
-              base: "w-full sm:max-w-[44%]",
-              inputWrapper: "border-1",
-            }}
-            placeholder="Search by name..."
-            size="sm"
-            startContent={<SearchIcon className="text-default-300" />}
-            value={filterValue}
-            variant="bordered"
-            onClear={() => setFilterValue("")}
-            onValueChange={onSearchChange}
-          />
-          <div className="flex gap-3">
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button
-                  endContent={<ChevronDownIcon className="text-small" />}
-                  size="sm"
-                  variant="flat"
-                >
-                  Status
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={statusFilter}
-                selectionMode="multiple"
-                onSelectionChange={setStatusFilter}
-              >
-                {statusOptions.map((status) => (
-                  <DropdownItem key={status.uid} className="capitalize">
-                    {capitalize(status.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button
-                  endContent={<ChevronDownIcon className="text-small" />}
-                  size="sm"
-                  variant="flat"
-                >
-                  Columns
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={visibleColumns}
-                selectionMode="multiple"
-                onSelectionChange={setVisibleColumns}
-              >
-                {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
-                    {capitalize(column.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Button
-              className="bg-foreground text-background"
-              endContent={<PlusIcon />}
-              size="sm"
-            >
-              Add New
-            </Button>
-          </div>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="text-default-400 text-small">Total {users.length} users</span>
-          <label className="flex items-center text-default-400 text-small">
-            Rows per page:
-            <select
-              className="bg-transparent outline-none text-default-400 text-small"
-              onChange={onRowsPerPageChange}
-            >
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-            </select>
-          </label>
-        </div>
-      </div>
-    );
-  }, [
-    filterValue,
-    statusFilter,
-    visibleColumns,
-    onSearchChange,
-    onRowsPerPageChange,
-    users.length,
-    hasSearchFilter,
-  ]);
-
-  const bottomContent = React.useMemo(() => {
-    return (
-      <div className="py-2 px-2 flex justify-between items-center">
-        <Pagination
-          showControls
-          classNames={{
-            cursor: "bg-foreground text-background",
-          }}
-          color="default"
-          isDisabled={hasSearchFilter}
-          page={page}
-          total={pages}
-          variant="light"
-          onChange={setPage}
-        />
-        <span className="text-small text-default-400">
-          {selectedKeys === "all"
-            ? "All items selected"
-            : \`\${selectedKeys.size} of \${items.length} selected\`}
-        </span>
-      </div>
-    );
-  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
-
-  const classNames = React.useMemo(
-    () => ({
-      wrapper: ["max-h-[382px]", "max-w-3xl"],
-      th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
-      td: [
-        // changing the rows border radius
-        // first
-        "group-data-[first=true]:first:before:rounded-none",
-        "group-data-[first=true]:last:before:rounded-none",
-        // middle
-        "group-data-[middle=true]:before:rounded-none",
-        // last
-        "group-data-[last=true]:first:before:rounded-none",
-        "group-data-[last=true]:last:before:rounded-none",
-      ],
-    }),
-    [],
-  );
-
-  return (
-    <Table
-      isCompact
-      removeWrapper
-      aria-label="Example table with custom cells, pagination and sorting"
-      bottomContent={bottomContent}
-      bottomContentPlacement="outside"
-      checkboxesProps={{
-        classNames: {
-          wrapper: "after:bg-foreground after:text-background text-background",
-        },
-      }}
-      classNames={classNames}
-      selectedKeys={selectedKeys}
-      selectionMode="multiple"
-      sortDescriptor={sortDescriptor}
-      topContent={topContent}
-      topContentPlacement="outside"
-      onSelectionChange={setSelectedKeys}
-      onSortChange={setSortDescriptor}
-    >
-      <TableHeader columns={headerColumns}>
-        {(column) => (
-          <TableColumn
-            key={column.uid}
-            align={column.uid === "actions" ? "center" : "start"}
-            allowsSorting={column.sortable}
-          >
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody emptyContent={"No users found"} items={sortedItems}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
+import AppTs from "./custom-styles.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/utils.js": utils,
-  "/PlusIcon.jsx": PlusIcon,
-  "/VerticalDotsIcon.jsx": VerticalDotsIcon,
-  "/SearchIcon.jsx": SearchIcon,
-  "/ChevronDownIcon.jsx": ChevronDownIcon,
 };
 
 const reactTs = {
diff --git a/apps/docs/content/components/table/disabled-rows.raw.jsx b/apps/docs/content/components/table/disabled-rows.raw.jsx
new file mode 100644
index 0000000000..2866f2b0a6
--- /dev/null
+++ b/apps/docs/content/components/table/disabled-rows.raw.jsx
@@ -0,0 +1,76 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+} from "@nextui-org/react";
+
+const rows = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+];
+
+const columns = [
+  {
+    key: "name",
+    label: "NAME",
+  },
+  {
+    key: "role",
+    label: "ROLE",
+  },
+  {
+    key: "status",
+    label: "STATUS",
+  },
+];
+
+export default function App() {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"]));
+
+  return (
+    <Table
+      aria-label="Controlled table example with dynamic content"
+      disabledKeys={["3", "4"]}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      onSelectionChange={setSelectedKeys}
+    >
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/disabled-rows.ts b/apps/docs/content/components/table/disabled-rows.ts
index bdb9ba21f6..c619fe06f6 100644
--- a/apps/docs/content/components/table/disabled-rows.ts
+++ b/apps/docs/content/components/table/disabled-rows.ts
@@ -1,71 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react";
-
-const rows = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-];
-
-const columns = [
-  {
-    key: "name",
-    label: "NAME",
-  },
-  {
-    key: "role",
-    label: "ROLE",
-  },
-  {
-    key: "status",
-    label: "STATUS",
-  },
-];
-
-export default function App() {
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["2"]));
-
-  return (
-    <Table 
-      aria-label="Controlled table example with dynamic content"
-      selectionMode="multiple"
-      disabledKeys={["3", "4"]}
-      selectedKeys={selectedKeys}
-      onSelectionChange={setSelectedKeys}
-    >
-      <TableHeader columns={columns}>
-        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
-      </TableHeader>
-      <TableBody items={rows}>
-        {(item) => (
-          <TableRow key={item.key}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./disabled-rows.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/disallow-empty-selection.raw.jsx b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx
new file mode 100644
index 0000000000..14a5db7045
--- /dev/null
+++ b/apps/docs/content/components/table/disallow-empty-selection.raw.jsx
@@ -0,0 +1,68 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+export default function App() {
+  const [selectedColor, setSelectedColor] = React.useState("default");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Table
+        disallowEmptySelection
+        aria-label="Example static collection table"
+        color={selectedColor}
+        defaultSelectedKeys={["2", "3"]}
+        selectionMode="multiple"
+      >
+        <TableHeader>
+          <TableColumn>NAME</TableColumn>
+          <TableColumn>ROLE</TableColumn>
+          <TableColumn>STATUS</TableColumn>
+        </TableHeader>
+        <TableBody>
+          <TableRow key="1">
+            <TableCell>Tony Reichert</TableCell>
+            <TableCell>CEO</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="2">
+            <TableCell>Zoey Lang</TableCell>
+            <TableCell>Technical Lead</TableCell>
+            <TableCell>Paused</TableCell>
+          </TableRow>
+          <TableRow key="3">
+            <TableCell>Jane Fisher</TableCell>
+            <TableCell>Senior Developer</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="4">
+            <TableCell>William Howard</TableCell>
+            <TableCell>Community Manager</TableCell>
+            <TableCell>Vacation</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <RadioGroup
+        label="Selection color"
+        orientation="horizontal"
+        value={selectedColor}
+        onValueChange={setSelectedColor}
+      >
+        {colors.map((color) => (
+          <Radio key={color} className="capitalize" color={color} value={color}>
+            {color}
+          </Radio>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/table/disallow-empty-selection.ts b/apps/docs/content/components/table/disallow-empty-selection.ts
index 474b257da0..a1abceee1f 100644
--- a/apps/docs/content/components/table/disallow-empty-selection.ts
+++ b/apps/docs/content/components/table/disallow-empty-selection.ts
@@ -1,67 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react";
-
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("default");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Table 
-        color={selectedColor}
-        disallowEmptySelection
-        selectionMode="multiple" 
-        defaultSelectedKeys={["2", "3"]} 
-        aria-label="Example static collection table"
-      >
-        <TableHeader>
-          <TableColumn>NAME</TableColumn>
-          <TableColumn>ROLE</TableColumn>
-          <TableColumn>STATUS</TableColumn>
-        </TableHeader>
-        <TableBody>
-          <TableRow key="1">
-            <TableCell>Tony Reichert</TableCell>
-            <TableCell>CEO</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="2">
-            <TableCell>Zoey Lang</TableCell>
-            <TableCell>Technical Lead</TableCell>
-            <TableCell>Paused</TableCell>
-          </TableRow>
-          <TableRow key="3">
-            <TableCell>Jane Fisher</TableCell>
-            <TableCell>Senior Developer</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="4">
-            <TableCell>William Howard</TableCell>
-            <TableCell>Community Manager</TableCell>
-            <TableCell>Vacation</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <RadioGroup 
-        label="Selection color"
-        orientation="horizontal"
-        value={selectedColor} 
-        onValueChange={setSelectedColor}
-      >
-        {colors.map((color) => (
-          <Radio
-            key={color}
-            color={color}  
-            value={color}
-            className="capitalize"
-          >
-            {color}
-          </Radio>  
-        ))}
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./disallow-empty-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/dynamic.raw.jsx b/apps/docs/content/components/table/dynamic.raw.jsx
new file mode 100644
index 0000000000..a6e733dd18
--- /dev/null
+++ b/apps/docs/content/components/table/dynamic.raw.jsx
@@ -0,0 +1,68 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+} from "@nextui-org/react";
+
+const rows = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+];
+
+const columns = [
+  {
+    key: "name",
+    label: "NAME",
+  },
+  {
+    key: "role",
+    label: "ROLE",
+  },
+  {
+    key: "status",
+    label: "STATUS",
+  },
+];
+
+export default function App() {
+  return (
+    <Table aria-label="Example table with dynamic content">
+      <TableHeader columns={columns}>
+        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <TableRow key={item.key}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/dynamic.ts b/apps/docs/content/components/table/dynamic.ts
index bf20c16d51..5d3c97bb9a 100644
--- a/apps/docs/content/components/table/dynamic.ts
+++ b/apps/docs/content/components/table/dynamic.ts
@@ -1,63 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue} from "@nextui-org/react";
-
-const rows = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-];
-
-const columns = [
-  {
-    key: "name",
-    label: "NAME",
-  },
-  {
-    key: "role",
-    label: "ROLE",
-  },
-  {
-    key: "status",
-    label: "STATUS",
-  },
-];
-
-export default function App() {
-  return (
-    <Table aria-label="Example table with dynamic content">
-      <TableHeader columns={columns}>
-        {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
-      </TableHeader>
-      <TableBody items={rows}>
-        {(item) => (
-          <TableRow key={item.key}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/empty.raw.jsx b/apps/docs/content/components/table/empty.raw.jsx
new file mode 100644
index 0000000000..2d27a10705
--- /dev/null
+++ b/apps/docs/content/components/table/empty.raw.jsx
@@ -0,0 +1,14 @@
+import {Table, TableHeader, TableColumn, TableBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table aria-label="Example empty table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/empty.ts b/apps/docs/content/components/table/empty.ts
index 1a6e0ced1e..962836358a 100644
--- a/apps/docs/content/components/table/empty.ts
+++ b/apps/docs/content/components/table/empty.ts
@@ -1,17 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Table aria-label="Example empty table">
-      <TableHeader>
-        <TableColumn>NAME</TableColumn>
-        <TableColumn>ROLE</TableColumn>
-        <TableColumn>STATUS</TableColumn>
-      </TableHeader>
-      <TableBody emptyContent={"No rows to display."}>{[]}</TableBody>
-    </Table>
-  );
-}`;
+import App from "./empty.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/infinite-pagination.raw.jsx b/apps/docs/content/components/table/infinite-pagination.raw.jsx
new file mode 100644
index 0000000000..2af4de3203
--- /dev/null
+++ b/apps/docs/content/components/table/infinite-pagination.raw.jsx
@@ -0,0 +1,76 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Spinner,
+  getKeyValue,
+} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {useAsyncList} from "@react-stately/data";
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [hasMore, setHasMore] = React.useState(false);
+
+  let list = useAsyncList({
+    async load({signal, cursor}) {
+      if (cursor) {
+        setIsLoading(false);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore});
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with infinite pagination"
+      baseRef={scrollerRef}
+      bottomContent={
+        hasMore ? (
+          <div className="flex w-full justify-center">
+            <Spinner ref={loaderRef} color="white" />
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[400px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner color="white" />}
+      >
+        {(item) => (
+          <TableRow key={item.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/infinite-pagination.raw.tsx b/apps/docs/content/components/table/infinite-pagination.raw.tsx
new file mode 100644
index 0000000000..4d69e33341
--- /dev/null
+++ b/apps/docs/content/components/table/infinite-pagination.raw.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Spinner,
+  getKeyValue,
+} from "@nextui-org/react";
+import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
+import {useAsyncList} from "@react-stately/data";
+
+interface SWCharacter {
+  name: string;
+  height: string;
+  mass: string;
+  birth_year: string;
+}
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [hasMore, setHasMore] = React.useState<boolean>(false);
+
+  let list = useAsyncList<SWCharacter>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        setIsLoading(false);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
+      let json = await res.json();
+
+      setHasMore(json.next !== null);
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const [loaderRef, scrollerRef] = useInfiniteScroll({
+    hasMore,
+    onLoadMore: list.loadMore,
+  });
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with infinite pagination"
+      baseRef={scrollerRef}
+      bottomContent={
+        hasMore ? (
+          <div className="flex w-full justify-center">
+            <Spinner ref={loaderRef} color="white" />
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[400px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner color="white" />}
+      >
+        {(item: SWCharacter) => (
+          <TableRow key={item.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/infinite-pagination.ts b/apps/docs/content/components/table/infinite-pagination.ts
index 145813869a..cdee063a64 100644
--- a/apps/docs/content/components/table/infinite-pagination.ts
+++ b/apps/docs/content/components/table/infinite-pagination.ts
@@ -1,154 +1,5 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
-import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
-import {useAsyncList} from "@react-stately/data";
-
-export default function App() {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [hasMore, setHasMore] = React.useState(false);
-
-  let list = useAsyncList({
-    async load({signal, cursor}) {
-
-      if (cursor) {
-        setIsLoading(false);
-      }
-
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const [loaderRef, scrollerRef] = useInfiniteScroll({hasMore, onLoadMore: list.loadMore});
-
-  return (
-    <Table
-      isHeaderSticky
-      aria-label="Example table with infinite pagination"
-      baseRef={scrollerRef}
-      bottomContent={
-        hasMore ? (
-          <div className="flex w-full justify-center">
-            <Spinner ref={loaderRef} color="white" />
-          </div>
-        ) : null
-      }
-      classNames={{
-        base: "max-h-[520px] overflow-scroll",
-        table: "min-h-[400px]",
-      }}
-    >
-      <TableHeader>
-        <TableColumn key="name">Name</TableColumn>
-        <TableColumn key="height">Height</TableColumn>
-        <TableColumn key="mass">Mass</TableColumn>
-        <TableColumn key="birth_year">Birth year</TableColumn>
-      </TableHeader>
-      <TableBody
-        isLoading={isLoading}
-        items={list.items}
-        loadingContent={<Spinner color="white" />}
-      >
-        {(item) => (
-          <TableRow key={item.name}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
-
-const AppTs = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, Spinner, getKeyValue} from "@nextui-org/react";
-import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
-import { useAsyncList } from "@react-stately/data";
-
-interface SWCharacter {
-  name: string;
-  height: string;
-  mass: string;
-  birth_year: string;
-}
-
-export default function App() {
-  const [isLoading, setIsLoading] = React.useState<boolean>(true);
-  const [hasMore, setHasMore] = React.useState<boolean>(false);
-
-  let list = useAsyncList<SWCharacter>({
-    async load({ signal, cursor }) {
-      if (cursor) {
-        setIsLoading(false);
-      }
-
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(
-        cursor || "https://swapi.py4e.com/api/people/?search=",
-        { signal }
-      );
-      let json = await res.json();
-
-      setHasMore(json.next !== null);
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const [loaderRef, scrollerRef] = useInfiniteScroll({
-    hasMore,
-    onLoadMore: list.loadMore,
-  });
-
-  return (
-    <Table
-      isHeaderSticky
-      aria-label="Example table with infinite pagination"
-      baseRef={scrollerRef}
-      bottomContent={
-        hasMore ? (
-          <div className="flex w-full justify-center">
-            <Spinner ref={loaderRef} color="white" />
-          </div>
-        ) : null
-      }
-      classNames={{
-        base: "max-h-[520px] overflow-scroll",
-        table: "min-h-[400px]",
-      }}
-    >
-      <TableHeader>
-        <TableColumn key="name">Name</TableColumn>
-        <TableColumn key="height">Height</TableColumn>
-        <TableColumn key="mass">Mass</TableColumn>
-        <TableColumn key="birth_year">Birth year</TableColumn>
-      </TableHeader>
-      <TableBody
-        isLoading={isLoading}
-        items={list.items}
-        loadingContent={<Spinner color="white" />}
-      >
-        {(item: SWCharacter) => (
-          <TableRow key={item.name}>
-            {(columnKey) => (
-              <TableCell>{getKeyValue(item, columnKey)}</TableCell>
-            )}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./infinite-pagination.raw.jsx?raw";
+import AppTs from "./infinite-pagination.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/load-more.raw.jsx b/apps/docs/content/components/table/load-more.raw.jsx
new file mode 100644
index 0000000000..a011985059
--- /dev/null
+++ b/apps/docs/content/components/table/load-more.raw.jsx
@@ -0,0 +1,80 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Spinner,
+  Button,
+} from "@nextui-org/react";
+import {useAsyncList} from "@react-stately/data";
+
+export default function App() {
+  const [page, setPage] = React.useState(1);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  let list = useAsyncList({
+    async load({signal, cursor}) {
+      if (cursor) {
+        setPage((prev) => prev + 1);
+      }
+
+      // If no cursor is available, then we're loading the first page.
+      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
+      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
+      let json = await res.json();
+
+      if (!cursor) {
+        setIsLoading(false);
+      }
+
+      return {
+        items: json.results,
+        cursor: json.next,
+      };
+    },
+  });
+
+  const hasMore = page < 9;
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with client side sorting"
+      bottomContent={
+        hasMore && !isLoading ? (
+          <div className="flex w-full justify-center">
+            <Button isDisabled={list.isLoading} variant="flat" onPress={list.loadMore}>
+              {list.isLoading && <Spinner color="white" size="sm" />}
+              Load More
+            </Button>
+          </div>
+        ) : null
+      }
+      classNames={{
+        base: "max-h-[520px] overflow-scroll",
+        table: "min-h-[420px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">Name</TableColumn>
+        <TableColumn key="height">Height</TableColumn>
+        <TableColumn key="mass">Mass</TableColumn>
+        <TableColumn key="birth_year">Birth year</TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner label="Loading..." />}
+      >
+        {(item) => (
+          <TableRow key={item.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/load-more.ts b/apps/docs/content/components/table/load-more.ts
index 70e8cd3825..872717cc04 100644
--- a/apps/docs/content/components/table/load-more.ts
+++ b/apps/docs/content/components/table/load-more.ts
@@ -1,73 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner, Button} from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-
-export default function App() {
-  const [page, setPage] = React.useState(1);
-  const [isLoading, setIsLoading] = React.useState(true);
-
-  let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        setPage((prev) => prev + 1);
-      }
-
-      // If no cursor is available, then we're loading the first page.
-      // Otherwise, the cursor is the next URL to load, as returned from the previous page.
-      const res = await fetch(cursor || "https://swapi.py4e.com/api/people/?search=", {signal});
-      let json = await res.json();
-
-      if (!cursor) {
-        setIsLoading(false);
-      }
-
-      return {
-        items: json.results,
-        cursor: json.next,
-      };
-    },
-  });
-
-  const hasMore = page < 9;
-
-  return (
-    <Table
-      isHeaderSticky
-      aria-label="Example table with client side sorting"
-      bottomContent={
-        hasMore && !isLoading ? (
-          <div className="flex w-full justify-center">
-            <Button isDisabled={list.isLoading} variant="flat" onPress={list.loadMore}>
-              {list.isLoading && <Spinner color="white" size="sm" />}
-              Load More
-            </Button>
-          </div>
-        ) : null
-      }
-      classNames={{
-        base: "max-h-[520px] overflow-scroll",
-        table: "min-h-[420px]",
-      }}
-    >
-      <TableHeader>
-        <TableColumn key="name">Name</TableColumn>
-        <TableColumn key="height">Height</TableColumn>
-        <TableColumn key="mass">Mass</TableColumn>
-        <TableColumn key="birth_year">Birth year</TableColumn>
-      </TableHeader>
-      <TableBody
-        isLoading={isLoading}
-        items={list.items}
-        loadingContent={<Spinner label="Loading..." />}
-      >
-        {(item) => (
-          <TableRow key={item.name}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./load-more.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/multiple-selection.raw.jsx b/apps/docs/content/components/table/multiple-selection.raw.jsx
new file mode 100644
index 0000000000..e6abd5b42e
--- /dev/null
+++ b/apps/docs/content/components/table/multiple-selection.raw.jsx
@@ -0,0 +1,67 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+export default function App() {
+  const [selectedColor, setSelectedColor] = React.useState("default");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Table
+        aria-label="Example static collection table"
+        color={selectedColor}
+        defaultSelectedKeys={["2", "3"]}
+        selectionMode="multiple"
+      >
+        <TableHeader>
+          <TableColumn>NAME</TableColumn>
+          <TableColumn>ROLE</TableColumn>
+          <TableColumn>STATUS</TableColumn>
+        </TableHeader>
+        <TableBody>
+          <TableRow key="1">
+            <TableCell>Tony Reichert</TableCell>
+            <TableCell>CEO</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="2">
+            <TableCell>Zoey Lang</TableCell>
+            <TableCell>Technical Lead</TableCell>
+            <TableCell>Paused</TableCell>
+          </TableRow>
+          <TableRow key="3">
+            <TableCell>Jane Fisher</TableCell>
+            <TableCell>Senior Developer</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="4">
+            <TableCell>William Howard</TableCell>
+            <TableCell>Community Manager</TableCell>
+            <TableCell>Vacation</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <RadioGroup
+        label="Selection color"
+        orientation="horizontal"
+        value={selectedColor}
+        onValueChange={setSelectedColor}
+      >
+        {colors.map((color) => (
+          <Radio key={color} className="capitalize" color={color} value={color}>
+            {color}
+          </Radio>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/table/multiple-selection.ts b/apps/docs/content/components/table/multiple-selection.ts
index e5be5d114a..f03bb84fb5 100644
--- a/apps/docs/content/components/table/multiple-selection.ts
+++ b/apps/docs/content/components/table/multiple-selection.ts
@@ -1,66 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react";
-
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("default");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Table 
-        color={selectedColor}
-        selectionMode="multiple" 
-        defaultSelectedKeys={["2", "3"]} 
-        aria-label="Example static collection table"
-      >
-        <TableHeader>
-          <TableColumn>NAME</TableColumn>
-          <TableColumn>ROLE</TableColumn>
-          <TableColumn>STATUS</TableColumn>
-        </TableHeader>
-        <TableBody>
-          <TableRow key="1">
-            <TableCell>Tony Reichert</TableCell>
-            <TableCell>CEO</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="2">
-            <TableCell>Zoey Lang</TableCell>
-            <TableCell>Technical Lead</TableCell>
-            <TableCell>Paused</TableCell>
-          </TableRow>
-          <TableRow key="3">
-            <TableCell>Jane Fisher</TableCell>
-            <TableCell>Senior Developer</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="4">
-            <TableCell>William Howard</TableCell>
-            <TableCell>Community Manager</TableCell>
-            <TableCell>Vacation</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <RadioGroup 
-        label="Selection color"
-        orientation="horizontal"
-        value={selectedColor} 
-        onValueChange={setSelectedColor}
-      >
-        {colors.map((color) => (
-          <Radio
-            key={color}
-            color={color}  
-            value={color}
-            className="capitalize"
-          >
-            {color}
-          </Radio>  
-        ))}
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./multiple-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/paginated.raw.jsx b/apps/docs/content/components/table/paginated.raw.jsx
new file mode 100644
index 0000000000..962c2dfdd1
--- /dev/null
+++ b/apps/docs/content/components/table/paginated.raw.jsx
@@ -0,0 +1,212 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Pagination,
+  getKeyValue,
+} from "@nextui-org/react";
+
+export const users = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+  {
+    key: "5",
+    name: "Emily Collins",
+    role: "Marketing Manager",
+    status: "Active",
+  },
+  {
+    key: "6",
+    name: "Brian Kim",
+    role: "Product Manager",
+    status: "Active",
+  },
+  {
+    key: "7",
+    name: "Laura Thompson",
+    role: "UX Designer",
+    status: "Active",
+  },
+  {
+    key: "8",
+    name: "Michael Stevens",
+    role: "Data Analyst",
+    status: "Paused",
+  },
+  {
+    key: "9",
+    name: "Sophia Nguyen",
+    role: "Quality Assurance",
+    status: "Active",
+  },
+  {
+    key: "10",
+    name: "James Wilson",
+    role: "Front-end Developer",
+    status: "Vacation",
+  },
+  {
+    key: "11",
+    name: "Ava Johnson",
+    role: "Back-end Developer",
+    status: "Active",
+  },
+  {
+    key: "12",
+    name: "Isabella Smith",
+    role: "Graphic Designer",
+    status: "Active",
+  },
+  {
+    key: "13",
+    name: "Oliver Brown",
+    role: "Content Writer",
+    status: "Paused",
+  },
+  {
+    key: "14",
+    name: "Lucas Jones",
+    role: "Project Manager",
+    status: "Active",
+  },
+  {
+    key: "15",
+    name: "Grace Davis",
+    role: "HR Manager",
+    status: "Active",
+  },
+  {
+    key: "16",
+    name: "Elijah Garcia",
+    role: "Network Administrator",
+    status: "Active",
+  },
+  {
+    key: "17",
+    name: "Emma Martinez",
+    role: "Accountant",
+    status: "Vacation",
+  },
+  {
+    key: "18",
+    name: "Benjamin Lee",
+    role: "Operations Manager",
+    status: "Active",
+  },
+  {
+    key: "19",
+    name: "Mia Hernandez",
+    role: "Sales Manager",
+    status: "Paused",
+  },
+  {
+    key: "20",
+    name: "Daniel Lewis",
+    role: "DevOps Engineer",
+    status: "Active",
+  },
+  {
+    key: "21",
+    name: "Amelia Clark",
+    role: "Social Media Specialist",
+    status: "Active",
+  },
+  {
+    key: "22",
+    name: "Jackson Walker",
+    role: "Customer Support",
+    status: "Active",
+  },
+  {
+    key: "23",
+    name: "Henry Hall",
+    role: "Security Analyst",
+    status: "Active",
+  },
+  {
+    key: "24",
+    name: "Charlotte Young",
+    role: "PR Specialist",
+    status: "Paused",
+  },
+  {
+    key: "25",
+    name: "Liam King",
+    role: "Mobile App Developer",
+    status: "Active",
+  },
+];
+
+export default function App() {
+  const [page, setPage] = React.useState(1);
+  const rowsPerPage = 4;
+
+  const pages = Math.ceil(users.length / rowsPerPage);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return users.slice(start, end);
+  }, [page, users]);
+
+  return (
+    <Table
+      aria-label="Example table with client side pagination"
+      bottomContent={
+        <div className="flex w-full justify-center">
+          <Pagination
+            isCompact
+            showControls
+            showShadow
+            color="secondary"
+            page={page}
+            total={pages}
+            onChange={(page) => setPage(page)}
+          />
+        </div>
+      }
+      classNames={{
+        wrapper: "min-h-[222px]",
+      }}
+    >
+      <TableHeader>
+        <TableColumn key="name">NAME</TableColumn>
+        <TableColumn key="role">ROLE</TableColumn>
+        <TableColumn key="status">STATUS</TableColumn>
+      </TableHeader>
+      <TableBody items={items}>
+        {(item) => (
+          <TableRow key={item.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/paginated.ts b/apps/docs/content/components/table/paginated.ts
index 75be89dc52..557add2fce 100644
--- a/apps/docs/content/components/table/paginated.ts
+++ b/apps/docs/content/components/table/paginated.ts
@@ -1,211 +1,7 @@
-const data = `export const users = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-  {
-    key: "5",
-    name: "Emily Collins",
-    role: "Marketing Manager",
-    status: "Active",
-  },
-  {
-    key: "6",
-    name: "Brian Kim",
-    role: "Product Manager",
-    status: "Active",
-  },
-  {
-    key: "7",
-    name: "Laura Thompson",
-    role: "UX Designer",
-    status: "Active",
-  },
-  {
-    key: "8",
-    name: "Michael Stevens",
-    role: "Data Analyst",
-    status: "Paused",
-  },
-  {
-    key: "9",
-    name: "Sophia Nguyen",
-    role: "Quality Assurance",
-    status: "Active",
-  },
-  {
-    key: "10",
-    name: "James Wilson",
-    role: "Front-end Developer",
-    status: "Vacation",
-  },
-  {
-    key: "11",
-    name: "Ava Johnson",
-    role: "Back-end Developer",
-    status: "Active",
-  },
-  {
-    key: "12",
-    name: "Isabella Smith",
-    role: "Graphic Designer",
-    status: "Active",
-  },
-  {
-    key: "13",
-    name: "Oliver Brown",
-    role: "Content Writer",
-    status: "Paused",
-  },
-  {
-    key: "14",
-    name: "Lucas Jones",
-    role: "Project Manager",
-    status: "Active",
-  },
-  {
-    key: "15",
-    name: "Grace Davis",
-    role: "HR Manager",
-    status: "Active",
-  },
-  {
-    key: "16",
-    name: "Elijah Garcia",
-    role: "Network Administrator",
-    status: "Active",
-  },
-  {
-    key: "17",
-    name: "Emma Martinez",
-    role: "Accountant",
-    status: "Vacation",
-  },
-  {
-    key: "18",
-    name: "Benjamin Lee",
-    role: "Operations Manager",
-    status: "Active",
-  },
-  {
-    key: "19",
-    name: "Mia Hernandez",
-    role: "Sales Manager",
-    status: "Paused",
-  },
-  {
-    key: "20",
-    name: "Daniel Lewis",
-    role: "DevOps Engineer",
-    status: "Active",
-  },
-  {
-    key: "21",
-    name: "Amelia Clark",
-    role: "Social Media Specialist",
-    status: "Active",
-  },
-  {
-    key: "22",
-    name: "Jackson Walker",
-    role: "Customer Support",
-    status: "Active",
-  },
-  {
-    key: "23",
-    name: "Henry Hall",
-    role: "Security Analyst",
-    status: "Active",
-  },
-  {
-    key: "24",
-    name: "Charlotte Young",
-    role: "PR Specialist",
-    status: "Paused",
-  },
-  {
-    key: "25",
-    name: "Liam King",
-    role: "Mobile App Developer",
-    status: "Active",
-  },
-];`;
-
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Pagination, getKeyValue} from "@nextui-org/react";
-import {users} from "./data";
-
-export default function App() {
-  const [page, setPage] = React.useState(1);
-  const rowsPerPage = 4;
-
-  const pages = Math.ceil(users.length / rowsPerPage);
-
-  const items = React.useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return users.slice(start, end);
-  }, [page, users]);
-
-  return (
-    <Table 
-      aria-label="Example table with client side pagination"
-      bottomContent={
-        <div className="flex w-full justify-center">
-          <Pagination
-            isCompact
-            showControls
-            showShadow
-            color="secondary"
-            page={page}
-            total={pages}
-            onChange={(page) => setPage(page)}
-          />
-        </div>
-      }
-      classNames={{
-        wrapper: "min-h-[222px]",
-      }}
-    >
-      <TableHeader>
-        <TableColumn key="name">NAME</TableColumn>
-        <TableColumn key="role">ROLE</TableColumn>
-        <TableColumn key="status">STATUS</TableColumn>
-      </TableHeader>
-      <TableBody items={items}>
-        {(item) => (
-          <TableRow key={item.name}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./paginated.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
 };
 
 export default {
diff --git a/apps/docs/content/components/table/row-actions.raw.jsx b/apps/docs/content/components/table/row-actions.raw.jsx
new file mode 100644
index 0000000000..1e6cf2dc5a
--- /dev/null
+++ b/apps/docs/content/components/table/row-actions.raw.jsx
@@ -0,0 +1,88 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Radio,
+  RadioGroup,
+} from "@nextui-org/react";
+
+const rows = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+];
+
+const columns = [
+  {
+    key: "name",
+    label: "NAME",
+  },
+  {
+    key: "role",
+    label: "ROLE",
+  },
+  {
+    key: "status",
+    label: "STATUS",
+  },
+];
+
+export default function App() {
+  const [selectionBehavior, setSelectionBehavior] = React.useState("toggle");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Table
+        aria-label="Rows actions table example with dynamic content"
+        selectionBehavior={selectionBehavior}
+        selectionMode="multiple"
+        onRowAction={(key) => alert(`Opening item ${key}...`)}
+      >
+        <TableHeader columns={columns}>
+          {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+        </TableHeader>
+        <TableBody items={rows}>
+          {(item) => (
+            <TableRow key={item.key}>
+              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <RadioGroup
+        label="Selection Behavior"
+        orientation="horizontal"
+        value={selectionBehavior}
+        onValueChange={setSelectionBehavior}
+      >
+        <Radio value="toggle">Toggle</Radio>
+        <Radio value="replace">Replace</Radio>
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/table/row-actions.ts b/apps/docs/content/components/table/row-actions.ts
index d9d0782566..06178c6b7f 100644
--- a/apps/docs/content/components/table/row-actions.ts
+++ b/apps/docs/content/components/table/row-actions.ts
@@ -1,81 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react";
-
-const rows = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-];
-
-const columns = [
-  {
-    key: "name",
-    label: "NAME",
-  },
-  {
-    key: "role",
-    label: "ROLE",
-  },
-  {
-    key: "status",
-    label: "STATUS",
-  },
-];
-
-export default function App() {
-  const [selectionBehavior, setSelectionBehavior] = React.useState("toggle");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Table 
-        aria-label="Rows actions table example with dynamic content"
-        selectionMode="multiple"
-        selectionBehavior={selectionBehavior}
-        onRowAction={(key) => alert(\`Opening item \${key}...\`)}
-      >
-        <TableHeader columns={columns}>
-          {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
-        </TableHeader>
-        <TableBody items={rows}>
-          {(item) => (
-            <TableRow key={item.key}>
-              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <RadioGroup 
-        label="Selection Behavior"
-        orientation="horizontal"
-        value={selectionBehavior}
-        onValueChange={setSelectionBehavior}
-      >
-        <Radio value="toggle">Toggle</Radio>
-        <Radio value="replace">Replace</Radio>
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./row-actions.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/selection-behavior.raw.jsx b/apps/docs/content/components/table/selection-behavior.raw.jsx
new file mode 100644
index 0000000000..d0fec4a868
--- /dev/null
+++ b/apps/docs/content/components/table/selection-behavior.raw.jsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Radio,
+  RadioGroup,
+} from "@nextui-org/react";
+
+const rows = [
+  {
+    key: "1",
+    name: "Tony Reichert",
+    role: "CEO",
+    status: "Active",
+  },
+  {
+    key: "2",
+    name: "Zoey Lang",
+    role: "Technical Lead",
+    status: "Paused",
+  },
+  {
+    key: "3",
+    name: "Jane Fisher",
+    role: "Senior Developer",
+    status: "Active",
+  },
+  {
+    key: "4",
+    name: "William Howard",
+    role: "Community Manager",
+    status: "Vacation",
+  },
+];
+
+const columns = [
+  {
+    key: "name",
+    label: "NAME",
+  },
+  {
+    key: "role",
+    label: "ROLE",
+  },
+  {
+    key: "status",
+    label: "STATUS",
+  },
+];
+
+export default function App() {
+  const [selectionBehavior, setSelectionBehavior] = React.useState("toggle");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Table
+        aria-label="Selection behavior table example with dynamic content"
+        selectionBehavior={selectionBehavior}
+        selectionMode="multiple"
+      >
+        <TableHeader columns={columns}>
+          {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
+        </TableHeader>
+        <TableBody items={rows}>
+          {(item) => (
+            <TableRow key={item.key}>
+              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <RadioGroup
+        label="Selection Behavior"
+        orientation="horizontal"
+        value={selectionBehavior}
+        onValueChange={setSelectionBehavior}
+      >
+        <Radio value="toggle">Toggle</Radio>
+        <Radio value="replace">Replace</Radio>
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/table/selection-behavior.ts b/apps/docs/content/components/table/selection-behavior.ts
index 566480015f..b36dec6d8b 100644
--- a/apps/docs/content/components/table/selection-behavior.ts
+++ b/apps/docs/content/components/table/selection-behavior.ts
@@ -1,80 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Radio, RadioGroup} from "@nextui-org/react";
-
-const rows = [
-  {
-    key: "1",
-    name: "Tony Reichert",
-    role: "CEO",
-    status: "Active",
-  },
-  {
-    key: "2",
-    name: "Zoey Lang",
-    role: "Technical Lead",
-    status: "Paused",
-  },
-  {
-    key: "3",
-    name: "Jane Fisher",
-    role: "Senior Developer",
-    status: "Active",
-  },
-  {
-    key: "4",
-    name: "William Howard",
-    role: "Community Manager",
-    status: "Vacation",
-  },
-];
-
-const columns = [
-  {
-    key: "name",
-    label: "NAME",
-  },
-  {
-    key: "role",
-    label: "ROLE",
-  },
-  {
-    key: "status",
-    label: "STATUS",
-  },
-];
-
-export default function App() {
-  const [selectionBehavior, setSelectionBehavior] = React.useState("toggle");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Table 
-        aria-label="Selection behavior table example with dynamic content"
-        selectionMode="multiple"
-        selectionBehavior={selectionBehavior}
-      >
-        <TableHeader columns={columns}>
-          {(column) => <TableColumn key={column.key}>{column.label}</TableColumn>}
-        </TableHeader>
-        <TableBody items={rows}>
-          {(item) => (
-            <TableRow key={item.key}>
-              {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <RadioGroup 
-        label="Selection Behavior"
-        orientation="horizontal"
-        value={selectionBehavior}
-        onValueChange={setSelectionBehavior}
-      >
-        <Radio value="toggle">Toggle</Radio>
-        <Radio value="replace">Replace</Radio>
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./selection-behavior.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/single-selection.raw.jsx b/apps/docs/content/components/table/single-selection.raw.jsx
new file mode 100644
index 0000000000..35122ba3f8
--- /dev/null
+++ b/apps/docs/content/components/table/single-selection.raw.jsx
@@ -0,0 +1,67 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  RadioGroup,
+  Radio,
+} from "@nextui-org/react";
+
+const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+export default function App() {
+  const [selectedColor, setSelectedColor] = React.useState("default");
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Table
+        aria-label="Example static collection table"
+        color={selectedColor}
+        defaultSelectedKeys={["2"]}
+        selectionMode="single"
+      >
+        <TableHeader>
+          <TableColumn>NAME</TableColumn>
+          <TableColumn>ROLE</TableColumn>
+          <TableColumn>STATUS</TableColumn>
+        </TableHeader>
+        <TableBody>
+          <TableRow key="1">
+            <TableCell>Tony Reichert</TableCell>
+            <TableCell>CEO</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="2">
+            <TableCell>Zoey Lang</TableCell>
+            <TableCell>Technical Lead</TableCell>
+            <TableCell>Paused</TableCell>
+          </TableRow>
+          <TableRow key="3">
+            <TableCell>Jane Fisher</TableCell>
+            <TableCell>Senior Developer</TableCell>
+            <TableCell>Active</TableCell>
+          </TableRow>
+          <TableRow key="4">
+            <TableCell>William Howard</TableCell>
+            <TableCell>Community Manager</TableCell>
+            <TableCell>Vacation</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <RadioGroup
+        label="Selection color"
+        orientation="horizontal"
+        value={selectedColor}
+        onValueChange={setSelectedColor}
+      >
+        {colors.map((color) => (
+          <Radio key={color} className="capitalize" color={color} value={color}>
+            {color}
+          </Radio>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/table/single-selection.ts b/apps/docs/content/components/table/single-selection.ts
index e187ab933c..65d8454ff8 100644
--- a/apps/docs/content/components/table/single-selection.ts
+++ b/apps/docs/content/components/table/single-selection.ts
@@ -1,66 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, RadioGroup, Radio} from "@nextui-org/react";
-
-const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
-
-export default function App() {
-  const [selectedColor, setSelectedColor] = React.useState("default");
-
-  return (
-    <div className="flex flex-col gap-3">
-      <Table 
-        color={selectedColor}
-        selectionMode="single" 
-        defaultSelectedKeys={["2"]} 
-        aria-label="Example static collection table"
-      >
-        <TableHeader>
-          <TableColumn>NAME</TableColumn>
-          <TableColumn>ROLE</TableColumn>
-          <TableColumn>STATUS</TableColumn>
-        </TableHeader>
-        <TableBody>
-          <TableRow key="1">
-            <TableCell>Tony Reichert</TableCell>
-            <TableCell>CEO</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="2">
-            <TableCell>Zoey Lang</TableCell>
-            <TableCell>Technical Lead</TableCell>
-            <TableCell>Paused</TableCell>
-          </TableRow>
-          <TableRow key="3">
-            <TableCell>Jane Fisher</TableCell>
-            <TableCell>Senior Developer</TableCell>
-            <TableCell>Active</TableCell>
-          </TableRow>
-          <TableRow key="4">
-            <TableCell>William Howard</TableCell>
-            <TableCell>Community Manager</TableCell>
-            <TableCell>Vacation</TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
-      <RadioGroup 
-        label="Selection color"
-        orientation="horizontal"
-        value={selectedColor} 
-        onValueChange={setSelectedColor}
-      >
-        {colors.map((color) => (
-          <Radio
-            key={color}
-            color={color}  
-            value={color}
-            className="capitalize"
-          >
-            {color}
-          </Radio>  
-        ))}
-      </RadioGroup>
-    </div>
-  );
-}`;
+import App from "./single-selection.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/sorting.raw.jsx b/apps/docs/content/components/table/sorting.raw.jsx
new file mode 100644
index 0000000000..ddc13bfbbb
--- /dev/null
+++ b/apps/docs/content/components/table/sorting.raw.jsx
@@ -0,0 +1,82 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  getKeyValue,
+  Spinner,
+} from "@nextui-org/react";
+import {useAsyncList} from "@react-stately/data";
+
+export default function App() {
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  let list = useAsyncList({
+    async load({signal}) {
+      let res = await fetch("https://swapi.py4e.com/api/people/?search", {
+        signal,
+      });
+      let json = await res.json();
+
+      setIsLoading(false);
+
+      return {
+        items: json.results,
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      return {
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column];
+          let second = b[sortDescriptor.column];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+
+          if (sortDescriptor.direction === "descending") {
+            cmp *= -1;
+          }
+
+          return cmp;
+        }),
+      };
+    },
+  });
+
+  return (
+    <Table
+      aria-label="Example table with client side sorting"
+      classNames={{
+        table: "min-h-[400px]",
+      }}
+      sortDescriptor={list.sortDescriptor}
+      onSortChange={list.sort}
+    >
+      <TableHeader>
+        <TableColumn key="name" allowsSorting>
+          Name
+        </TableColumn>
+        <TableColumn key="height" allowsSorting>
+          Height
+        </TableColumn>
+        <TableColumn key="mass" allowsSorting>
+          Mass
+        </TableColumn>
+        <TableColumn key="birth_year" allowsSorting>
+          Birth year
+        </TableColumn>
+      </TableHeader>
+      <TableBody
+        isLoading={isLoading}
+        items={list.items}
+        loadingContent={<Spinner label="Loading..." />}
+      >
+        {(item) => (
+          <TableRow key={item.name}>
+            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/sorting.ts b/apps/docs/content/components/table/sorting.ts
index be3f41afb6..231fa295c0 100644
--- a/apps/docs/content/components/table/sorting.ts
+++ b/apps/docs/content/components/table/sorting.ts
@@ -1,75 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, getKeyValue, Spinner} from "@nextui-org/react";
-import {useAsyncList} from "@react-stately/data";
-
-export default function App() {
-  const [isLoading, setIsLoading] = React.useState(true);
-
-  let list = useAsyncList({
-    async load({signal}) {
-      let res = await fetch('https://swapi.py4e.com/api/people/?search', {
-        signal,
-      });
-      let json = await res.json();
-      setIsLoading(false);
-
-      return {
-        items: json.results,
-      };
-    },
-    async sort({items, sortDescriptor}) {
-      return {
-        items: items.sort((a, b) => {
-          let first = a[sortDescriptor.column];
-          let second = b[sortDescriptor.column];
-          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
-
-          if (sortDescriptor.direction === "descending") {
-            cmp *= -1;
-          }
-
-          return cmp;
-        }),
-      };
-    },
-  });
-
-  return (
-    <Table
-      aria-label="Example table with client side sorting"
-      sortDescriptor={list.sortDescriptor}
-      onSortChange={list.sort}
-      classNames={{
-        table: "min-h-[400px]",
-      }}
-    >
-      <TableHeader>
-        <TableColumn key="name" allowsSorting>
-          Name
-        </TableColumn>
-        <TableColumn key="height" allowsSorting>
-          Height
-        </TableColumn>
-        <TableColumn key="mass" allowsSorting>
-          Mass
-        </TableColumn>
-        <TableColumn key="birth_year" allowsSorting>
-          Birth year
-        </TableColumn>
-      </TableHeader>
-      <TableBody 
-        items={list.items} 
-        isLoading={isLoading}
-        loadingContent={<Spinner label="Loading..." />}
-      >
-        {(item) => (
-          <TableRow key={item.name}>
-            {(columnKey) => <TableCell>{getKeyValue(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./sorting.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/striped.raw.jsx b/apps/docs/content/components/table/striped.raw.jsx
new file mode 100644
index 0000000000..a032ad7f63
--- /dev/null
+++ b/apps/docs/content/components/table/striped.raw.jsx
@@ -0,0 +1,35 @@
+import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table isStriped aria-label="Example static collection table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow key="1">
+          <TableCell>Tony Reichert</TableCell>
+          <TableCell>CEO</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="2">
+          <TableCell>Zoey Lang</TableCell>
+          <TableCell>Technical Lead</TableCell>
+          <TableCell>Paused</TableCell>
+        </TableRow>
+        <TableRow key="3">
+          <TableCell>Jane Fisher</TableCell>
+          <TableCell>Senior Developer</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="4">
+          <TableCell>William Howard</TableCell>
+          <TableCell>Community Manager</TableCell>
+          <TableCell>Vacation</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/striped.ts b/apps/docs/content/components/table/striped.ts
index 2d9f32ff59..efcbdde82e 100644
--- a/apps/docs/content/components/table/striped.ts
+++ b/apps/docs/content/components/table/striped.ts
@@ -1,38 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Table isStriped aria-label="Example static collection table">
-      <TableHeader>
-        <TableColumn>NAME</TableColumn>
-        <TableColumn>ROLE</TableColumn>
-        <TableColumn>STATUS</TableColumn>
-      </TableHeader>
-      <TableBody>
-        <TableRow key="1">
-          <TableCell>Tony Reichert</TableCell>
-          <TableCell>CEO</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="2">
-          <TableCell>Zoey Lang</TableCell>
-          <TableCell>Technical Lead</TableCell>
-          <TableCell>Paused</TableCell>
-        </TableRow>
-        <TableRow key="3">
-          <TableCell>Jane Fisher</TableCell>
-          <TableCell>Senior Developer</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="4">
-          <TableCell>William Howard</TableCell>
-          <TableCell>Community Manager</TableCell>
-          <TableCell>Vacation</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./striped.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/usage.raw.jsx b/apps/docs/content/components/table/usage.raw.jsx
new file mode 100644
index 0000000000..b6a8bf0c51
--- /dev/null
+++ b/apps/docs/content/components/table/usage.raw.jsx
@@ -0,0 +1,35 @@
+import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table aria-label="Example static collection table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow key="1">
+          <TableCell>Tony Reichert</TableCell>
+          <TableCell>CEO</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="2">
+          <TableCell>Zoey Lang</TableCell>
+          <TableCell>Technical Lead</TableCell>
+          <TableCell>Paused</TableCell>
+        </TableRow>
+        <TableRow key="3">
+          <TableCell>Jane Fisher</TableCell>
+          <TableCell>Senior Developer</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="4">
+          <TableCell>William Howard</TableCell>
+          <TableCell>Community Manager</TableCell>
+          <TableCell>Vacation</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/usage.ts b/apps/docs/content/components/table/usage.ts
index b6e06ec81f..1118304c37 100644
--- a/apps/docs/content/components/table/usage.ts
+++ b/apps/docs/content/components/table/usage.ts
@@ -1,38 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Table aria-label="Example static collection table">
-      <TableHeader>
-        <TableColumn>NAME</TableColumn>
-        <TableColumn>ROLE</TableColumn>
-        <TableColumn>STATUS</TableColumn>
-      </TableHeader>
-      <TableBody>
-        <TableRow key="1">
-          <TableCell>Tony Reichert</TableCell>
-          <TableCell>CEO</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="2">
-          <TableCell>Zoey Lang</TableCell>
-          <TableCell>Technical Lead</TableCell>
-          <TableCell>Paused</TableCell>
-        </TableRow>
-        <TableRow key="3">
-          <TableCell>Jane Fisher</TableCell>
-          <TableCell>Senior Developer</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="4">
-          <TableCell>William Howard</TableCell>
-          <TableCell>Community Manager</TableCell>
-          <TableCell>Vacation</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx
new file mode 100644
index 0000000000..b1bbeaf73c
--- /dev/null
+++ b/apps/docs/content/components/table/use-case.raw.jsx
@@ -0,0 +1,640 @@
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Chip,
+  User,
+  Pagination,
+} from "@nextui-org/react";
+
+export const columns = [
+  {name: "ID", uid: "id", sortable: true},
+  {name: "NAME", uid: "name", sortable: true},
+  {name: "AGE", uid: "age", sortable: true},
+  {name: "ROLE", uid: "role", sortable: true},
+  {name: "TEAM", uid: "team"},
+  {name: "EMAIL", uid: "email"},
+  {name: "STATUS", uid: "status", sortable: true},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const statusOptions = [
+  {name: "Active", uid: "active"},
+  {name: "Paused", uid: "paused"},
+  {name: "Vacation", uid: "vacation"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "brian.kim@example.com",
+    status: "Active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?img=8",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=10",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?img=15",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?img=20",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=33",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?img=29",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://i.pravatar.cc/150?img=50",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://i.pravatar.cc/150?img=45",
+    email: "mia.robinson@example.com",
+  },
+];
+
+export function capitalize(s) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
+}
+
+export const PlusIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path d="M6 12h12" />
+        <path d="M12 18V6" />
+      </g>
+    </svg>
+  );
+};
+
+export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SearchIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...otherProps}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+const statusColorMap = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
+
+export default function App() {
+  const [filterValue, setFilterValue] = React.useState("");
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
+  const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS));
+  const [statusFilter, setStatusFilter] = React.useState("all");
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState({
+    column: "age",
+    direction: "ascending",
+  });
+  const [page, setPage] = React.useState(1);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    if (visibleColumns === "all") return columns;
+
+    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredUsers = [...users];
+
+    if (hasSearchFilter) {
+      filteredUsers = filteredUsers.filter((user) =>
+        user.name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
+      filteredUsers = filteredUsers.filter((user) =>
+        Array.from(statusFilter).includes(user.status),
+      );
+    }
+
+    return filteredUsers;
+  }, [users, filterValue, statusFilter]);
+
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    return [...items].sort((a, b) => {
+      const first = a[sortDescriptor.column];
+      const second = b[sortDescriptor.column];
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((user, columnKey) => {
+    const cellValue = user[columnKey];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "lg", src: user.avatar}}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+            <p className="text-bold text-tiny capitalize text-default-400">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown>
+              <DropdownTrigger>
+                <Button isIconOnly size="sm" variant="light">
+                  <VerticalDotsIcon className="text-default-300" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const onNextPage = React.useCallback(() => {
+    if (page < pages) {
+      setPage(page + 1);
+    }
+  }, [page, pages]);
+
+  const onPreviousPage = React.useCallback(() => {
+    if (page > 1) {
+      setPage(page - 1);
+    }
+  }, [page]);
+
+  const onRowsPerPageChange = React.useCallback((e) => {
+    setRowsPerPage(Number(e.target.value));
+    setPage(1);
+  }, []);
+
+  const onSearchChange = React.useCallback((value) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const onClear = React.useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between gap-3 items-end">
+          <Input
+            isClearable
+            className="w-full sm:max-w-[44%]"
+            placeholder="Search by name..."
+            startContent={<SearchIcon />}
+            value={filterValue}
+            onClear={() => onClear()}
+            onValueChange={onSearchChange}
+          />
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
+                  Status
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={statusFilter}
+                selectionMode="multiple"
+                onSelectionChange={setStatusFilter}
+              >
+                {statusOptions.map((status) => (
+                  <DropdownItem key={status.uid} className="capitalize">
+                    {capitalize(status.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button color="primary" endContent={<PlusIcon />}>
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">Total {users.length} users</span>
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    onRowsPerPageChange,
+    users.length,
+    onSearchChange,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <span className="w-[30%] text-small text-default-400">
+          {selectedKeys === "all"
+            ? "All items selected"
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
+        </span>
+        <Pagination
+          isCompact
+          showControls
+          showShadow
+          color="primary"
+          page={page}
+          total={pages}
+          onChange={setPage}
+        />
+        <div className="hidden sm:flex w-[30%] justify-end gap-2">
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
+            Previous
+          </Button>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
+            Next
+          </Button>
+        </div>
+      </div>
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with custom cells, pagination and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      classNames={{
+        wrapper: "max-h-[382px]",
+      }}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSelectionChange={setSelectedKeys}
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No users found"} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/use-case.raw.tsx b/apps/docs/content/components/table/use-case.raw.tsx
new file mode 100644
index 0000000000..e5c0113e35
--- /dev/null
+++ b/apps/docs/content/components/table/use-case.raw.tsx
@@ -0,0 +1,653 @@
+import React, {SVGProps} from "react";
+import {
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  Input,
+  Button,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  Chip,
+  User,
+  Pagination,
+  Selection,
+  ChipProps,
+  SortDescriptor,
+} from "@nextui-org/react";
+
+export type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+export function capitalize(s: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
+}
+
+export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      >
+        <path d="M6 12h12" />
+        <path d="M12 18V6" />
+      </g>
+    </svg>
+  );
+};
+
+export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height={size || height}
+      role="presentation"
+      viewBox="0 0 24 24"
+      width={size || width}
+      {...props}
+    >
+      <path
+        d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const SearchIcon = (props: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M22 22L20 20"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...otherProps}
+    >
+      <path
+        d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={strokeWidth}
+      />
+    </svg>
+  );
+};
+
+export const columns = [
+  {name: "ID", uid: "id", sortable: true},
+  {name: "NAME", uid: "name", sortable: true},
+  {name: "AGE", uid: "age", sortable: true},
+  {name: "ROLE", uid: "role", sortable: true},
+  {name: "TEAM", uid: "team"},
+  {name: "EMAIL", uid: "email"},
+  {name: "STATUS", uid: "status", sortable: true},
+  {name: "ACTIONS", uid: "actions"},
+];
+
+export const statusOptions = [
+  {name: "Active", uid: "active"},
+  {name: "Paused", uid: "paused"},
+  {name: "Vacation", uid: "vacation"},
+];
+
+export const users = [
+  {
+    id: 1,
+    name: "Tony Reichert",
+    role: "CEO",
+    team: "Management",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "tony.reichert@example.com",
+  },
+  {
+    id: 2,
+    name: "Zoey Lang",
+    role: "Tech Lead",
+    team: "Development",
+    status: "paused",
+    age: "25",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    email: "zoey.lang@example.com",
+  },
+  {
+    id: 3,
+    name: "Jane Fisher",
+    role: "Sr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+    email: "jane.fisher@example.com",
+  },
+  {
+    id: 4,
+    name: "William Howard",
+    role: "C.M.",
+    team: "Marketing",
+    status: "vacation",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
+    email: "william.howard@example.com",
+  },
+  {
+    id: 5,
+    name: "Kristen Copper",
+    role: "S. Manager",
+    team: "Sales",
+    status: "active",
+    age: "24",
+    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
+    email: "kristen.cooper@example.com",
+  },
+  {
+    id: 6,
+    name: "Brian Kim",
+    role: "P. Manager",
+    team: "Management",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
+    email: "brian.kim@example.com",
+    status: "Active",
+  },
+  {
+    id: 7,
+    name: "Michael Hunt",
+    role: "Designer",
+    team: "Design",
+    status: "paused",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
+    email: "michael.hunt@example.com",
+  },
+  {
+    id: 8,
+    name: "Samantha Brooks",
+    role: "HR Manager",
+    team: "HR",
+    status: "active",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
+    email: "samantha.brooks@example.com",
+  },
+  {
+    id: 9,
+    name: "Frank Harrison",
+    role: "F. Manager",
+    team: "Finance",
+    status: "vacation",
+    age: "33",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "frank.harrison@example.com",
+  },
+  {
+    id: 10,
+    name: "Emma Adams",
+    role: "Ops Manager",
+    team: "Operations",
+    status: "active",
+    age: "35",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "emma.adams@example.com",
+  },
+  {
+    id: 11,
+    name: "Brandon Stevens",
+    role: "Jr. Dev",
+    team: "Development",
+    status: "active",
+    age: "22",
+    avatar: "https://i.pravatar.cc/150?img=8",
+    email: "brandon.stevens@example.com",
+  },
+  {
+    id: 12,
+    name: "Megan Richards",
+    role: "P. Manager",
+    team: "Product",
+    status: "paused",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=10",
+    email: "megan.richards@example.com",
+  },
+  {
+    id: 13,
+    name: "Oliver Scott",
+    role: "S. Manager",
+    team: "Security",
+    status: "active",
+    age: "37",
+    avatar: "https://i.pravatar.cc/150?img=12",
+    email: "oliver.scott@example.com",
+  },
+  {
+    id: 14,
+    name: "Grace Allen",
+    role: "M. Specialist",
+    team: "Marketing",
+    status: "active",
+    age: "30",
+    avatar: "https://i.pravatar.cc/150?img=16",
+    email: "grace.allen@example.com",
+  },
+  {
+    id: 15,
+    name: "Noah Carter",
+    role: "IT Specialist",
+    team: "I. Technology",
+    status: "paused",
+    age: "31",
+    avatar: "https://i.pravatar.cc/150?img=15",
+    email: "noah.carter@example.com",
+  },
+  {
+    id: 16,
+    name: "Ava Perez",
+    role: "Manager",
+    team: "Sales",
+    status: "active",
+    age: "29",
+    avatar: "https://i.pravatar.cc/150?img=20",
+    email: "ava.perez@example.com",
+  },
+  {
+    id: 17,
+    name: "Liam Johnson",
+    role: "Data Analyst",
+    team: "Analysis",
+    status: "active",
+    age: "28",
+    avatar: "https://i.pravatar.cc/150?img=33",
+    email: "liam.johnson@example.com",
+  },
+  {
+    id: 18,
+    name: "Sophia Taylor",
+    role: "QA Analyst",
+    team: "Testing",
+    status: "active",
+    age: "27",
+    avatar: "https://i.pravatar.cc/150?img=29",
+    email: "sophia.taylor@example.com",
+  },
+  {
+    id: 19,
+    name: "Lucas Harris",
+    role: "Administrator",
+    team: "Information Technology",
+    status: "paused",
+    age: "32",
+    avatar: "https://i.pravatar.cc/150?img=50",
+    email: "lucas.harris@example.com",
+  },
+  {
+    id: 20,
+    name: "Mia Robinson",
+    role: "Coordinator",
+    team: "Operations",
+    status: "active",
+    age: "26",
+    avatar: "https://i.pravatar.cc/150?img=45",
+    email: "mia.robinson@example.com",
+  },
+];
+
+const statusColorMap: Record<string, ChipProps["color"]> = {
+  active: "success",
+  paused: "danger",
+  vacation: "warning",
+};
+
+const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
+
+type User = (typeof users)[0];
+
+export default function App() {
+  const [filterValue, setFilterValue] = React.useState("");
+  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]));
+  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(
+    new Set(INITIAL_VISIBLE_COLUMNS),
+  );
+  const [statusFilter, setStatusFilter] = React.useState<Selection>("all");
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
+    column: "age",
+    direction: "ascending",
+  });
+
+  const [page, setPage] = React.useState(1);
+
+  const hasSearchFilter = Boolean(filterValue);
+
+  const headerColumns = React.useMemo(() => {
+    if (visibleColumns === "all") return columns;
+
+    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
+  }, [visibleColumns]);
+
+  const filteredItems = React.useMemo(() => {
+    let filteredUsers = [...users];
+
+    if (hasSearchFilter) {
+      filteredUsers = filteredUsers.filter((user) =>
+        user.name.toLowerCase().includes(filterValue.toLowerCase()),
+      );
+    }
+    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
+      filteredUsers = filteredUsers.filter((user) =>
+        Array.from(statusFilter).includes(user.status),
+      );
+    }
+
+    return filteredUsers;
+  }, [users, filterValue, statusFilter]);
+
+  const pages = Math.ceil(filteredItems.length / rowsPerPage);
+
+  const items = React.useMemo(() => {
+    const start = (page - 1) * rowsPerPage;
+    const end = start + rowsPerPage;
+
+    return filteredItems.slice(start, end);
+  }, [page, filteredItems, rowsPerPage]);
+
+  const sortedItems = React.useMemo(() => {
+    return [...items].sort((a: User, b: User) => {
+      const first = a[sortDescriptor.column as keyof User] as number;
+      const second = b[sortDescriptor.column as keyof User] as number;
+      const cmp = first < second ? -1 : first > second ? 1 : 0;
+
+      return sortDescriptor.direction === "descending" ? -cmp : cmp;
+    });
+  }, [sortDescriptor, items]);
+
+  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
+    const cellValue = user[columnKey as keyof User];
+
+    switch (columnKey) {
+      case "name":
+        return (
+          <User
+            avatarProps={{radius: "lg", src: user.avatar}}
+            description={user.email}
+            name={cellValue}
+          >
+            {user.email}
+          </User>
+        );
+      case "role":
+        return (
+          <div className="flex flex-col">
+            <p className="text-bold text-small capitalize">{cellValue}</p>
+            <p className="text-bold text-tiny capitalize text-default-400">{user.team}</p>
+          </div>
+        );
+      case "status":
+        return (
+          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
+            {cellValue}
+          </Chip>
+        );
+      case "actions":
+        return (
+          <div className="relative flex justify-end items-center gap-2">
+            <Dropdown>
+              <DropdownTrigger>
+                <Button isIconOnly size="sm" variant="light">
+                  <VerticalDotsIcon className="text-default-300" />
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu>
+                <DropdownItem>View</DropdownItem>
+                <DropdownItem>Edit</DropdownItem>
+                <DropdownItem>Delete</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+        );
+      default:
+        return cellValue;
+    }
+  }, []);
+
+  const onNextPage = React.useCallback(() => {
+    if (page < pages) {
+      setPage(page + 1);
+    }
+  }, [page, pages]);
+
+  const onPreviousPage = React.useCallback(() => {
+    if (page > 1) {
+      setPage(page - 1);
+    }
+  }, [page]);
+
+  const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    setRowsPerPage(Number(e.target.value));
+    setPage(1);
+  }, []);
+
+  const onSearchChange = React.useCallback((value?: string) => {
+    if (value) {
+      setFilterValue(value);
+      setPage(1);
+    } else {
+      setFilterValue("");
+    }
+  }, []);
+
+  const onClear = React.useCallback(() => {
+    setFilterValue("");
+    setPage(1);
+  }, []);
+
+  const topContent = React.useMemo(() => {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between gap-3 items-end">
+          <Input
+            isClearable
+            className="w-full sm:max-w-[44%]"
+            placeholder="Search by name..."
+            startContent={<SearchIcon />}
+            value={filterValue}
+            onClear={() => onClear()}
+            onValueChange={onSearchChange}
+          />
+          <div className="flex gap-3">
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
+                  Status
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={statusFilter}
+                selectionMode="multiple"
+                onSelectionChange={setStatusFilter}
+              >
+                {statusOptions.map((status) => (
+                  <DropdownItem key={status.uid} className="capitalize">
+                    {capitalize(status.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Dropdown>
+              <DropdownTrigger className="hidden sm:flex">
+                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
+                  Columns
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu
+                disallowEmptySelection
+                aria-label="Table Columns"
+                closeOnSelect={false}
+                selectedKeys={visibleColumns}
+                selectionMode="multiple"
+                onSelectionChange={setVisibleColumns}
+              >
+                {columns.map((column) => (
+                  <DropdownItem key={column.uid} className="capitalize">
+                    {capitalize(column.name)}
+                  </DropdownItem>
+                ))}
+              </DropdownMenu>
+            </Dropdown>
+            <Button color="primary" endContent={<PlusIcon />}>
+              Add New
+            </Button>
+          </div>
+        </div>
+        <div className="flex justify-between items-center">
+          <span className="text-default-400 text-small">Total {users.length} users</span>
+          <label className="flex items-center text-default-400 text-small">
+            Rows per page:
+            <select
+              className="bg-transparent outline-none text-default-400 text-small"
+              onChange={onRowsPerPageChange}
+            >
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }, [
+    filterValue,
+    statusFilter,
+    visibleColumns,
+    onSearchChange,
+    onRowsPerPageChange,
+    users.length,
+    hasSearchFilter,
+  ]);
+
+  const bottomContent = React.useMemo(() => {
+    return (
+      <div className="py-2 px-2 flex justify-between items-center">
+        <span className="w-[30%] text-small text-default-400">
+          {selectedKeys === "all"
+            ? "All items selected"
+            : `${selectedKeys.size} of ${filteredItems.length} selected`}
+        </span>
+        <Pagination
+          isCompact
+          showControls
+          showShadow
+          color="primary"
+          page={page}
+          total={pages}
+          onChange={setPage}
+        />
+        <div className="hidden sm:flex w-[30%] justify-end gap-2">
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
+            Previous
+          </Button>
+          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
+            Next
+          </Button>
+        </div>
+      </div>
+    );
+  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
+
+  return (
+    <Table
+      isHeaderSticky
+      aria-label="Example table with custom cells, pagination and sorting"
+      bottomContent={bottomContent}
+      bottomContentPlacement="outside"
+      classNames={{
+        wrapper: "max-h-[382px]",
+      }}
+      selectedKeys={selectedKeys}
+      selectionMode="multiple"
+      sortDescriptor={sortDescriptor}
+      topContent={topContent}
+      topContentPlacement="outside"
+      onSelectionChange={setSelectedKeys}
+      onSortChange={setSortDescriptor}
+    >
+      <TableHeader columns={headerColumns}>
+        {(column) => (
+          <TableColumn
+            key={column.uid}
+            align={column.uid === "actions" ? "center" : "start"}
+            allowsSorting={column.sortable}
+          >
+            {column.name}
+          </TableColumn>
+        )}
+      </TableHeader>
+      <TableBody emptyContent={"No users found"} items={sortedItems}>
+        {(item) => (
+          <TableRow key={item.id}>
+            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/use-case.ts b/apps/docs/content/components/table/use-case.ts
index 68c17c06e5..a03774d7c8 100644
--- a/apps/docs/content/components/table/use-case.ts
+++ b/apps/docs/content/components/table/use-case.ts
@@ -1,1324 +1,12 @@
-const data = `const columns = [
-  {name: "ID", uid: "id", sortable: true},
-  {name: "NAME", uid: "name", sortable: true},
-  {name: "AGE", uid: "age", sortable: true},
-  {name: "ROLE", uid: "role", sortable: true},
-  {name: "TEAM", uid: "team"},
-  {name: "EMAIL", uid: "email"},
-  {name: "STATUS", uid: "status", sortable: true},
-  {name: "ACTIONS", uid: "actions"},
-];
-
-const statusOptions = [
-  {name: "Active", uid: "active"},
-  {name: "Paused", uid: "paused"},
-  {name: "Vacation", uid: "vacation"},
-];
-
-const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "brian.kim@example.com",
-    status: "active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://i.pravatar.cc/150?img=4",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://i.pravatar.cc/150?img=5",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?img=8",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=10",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://i.pravatar.cc/150?img=12",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://i.pravatar.cc/150?img=16",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?img=15",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?img=20",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=33",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?img=29",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://i.pravatar.cc/150?img=50",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://i.pravatar.cc/150?img=45",
-    email: "mia.robinson@example.com",
-  },
-];
-
-export {columns, users, statusOptions};`;
-
-const dataTs = `const columns = [
-  {name: "ID", uid: "id", sortable: true},
-  {name: "NAME", uid: "name", sortable: true},
-  {name: "AGE", uid: "age", sortable: true},
-  {name: "ROLE", uid: "role", sortable: true},
-  {name: "TEAM", uid: "team"},
-  {name: "EMAIL", uid: "email"},
-  {name: "STATUS", uid: "status", sortable: true},
-  {name: "ACTIONS", uid: "actions"},
-];
-
-const statusOptions = [
-  {name: "Active", uid: "active"},
-  {name: "Paused", uid: "paused"},
-  {name: "Vacation", uid: "vacation"},
-];
-
-const users = [
-  {
-    id: 1,
-    name: "Tony Reichert",
-    role: "CEO",
-    team: "Management",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "tony.reichert@example.com",
-  },
-  {
-    id: 2,
-    name: "Zoey Lang",
-    role: "Tech Lead",
-    team: "Development",
-    status: "paused",
-    age: "25",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
-    email: "zoey.lang@example.com",
-  },
-  {
-    id: 3,
-    name: "Jane Fisher",
-    role: "Sr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?u=a04258114e29026702d",
-    email: "jane.fisher@example.com",
-  },
-  {
-    id: 4,
-    name: "William Howard",
-    role: "C.M.",
-    team: "Marketing",
-    status: "vacation",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?u=a048581f4e29026701d",
-    email: "william.howard@example.com",
-  },
-  {
-    id: 5,
-    name: "Kristen Copper",
-    role: "S. Manager",
-    team: "Sales",
-    status: "active",
-    age: "24",
-    avatar: "https://i.pravatar.cc/150?u=a092581d4ef9026700d",
-    email: "kristen.cooper@example.com",
-  },
-  {
-    id: 6,
-    name: "Brian Kim",
-    role: "P. Manager",
-    team: "Management",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29026024d",
-    email: "brian.kim@example.com",
-    status: "Active",
-  },
-  {
-    id: 7,
-    name: "Michael Hunt",
-    role: "Designer",
-    team: "Design",
-    status: "paused",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e29027007d",
-    email: "michael.hunt@example.com",
-  },
-  {
-    id: 8,
-    name: "Samantha Brooks",
-    role: "HR Manager",
-    team: "HR",
-    status: "active",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?u=a042581f4e27027008d",
-    email: "samantha.brooks@example.com",
-  },
-  {
-    id: 9,
-    name: "Frank Harrison",
-    role: "F. Manager",
-    team: "Finance",
-    status: "vacation",
-    age: "33",
-    avatar: "https://i.pravatar.cc/150?img=4",
-    email: "frank.harrison@example.com",
-  },
-  {
-    id: 10,
-    name: "Emma Adams",
-    role: "Ops Manager",
-    team: "Operations",
-    status: "active",
-    age: "35",
-    avatar: "https://i.pravatar.cc/150?img=5",
-    email: "emma.adams@example.com",
-  },
-  {
-    id: 11,
-    name: "Brandon Stevens",
-    role: "Jr. Dev",
-    team: "Development",
-    status: "active",
-    age: "22",
-    avatar: "https://i.pravatar.cc/150?img=8",
-    email: "brandon.stevens@example.com",
-  },
-  {
-    id: 12,
-    name: "Megan Richards",
-    role: "P. Manager",
-    team: "Product",
-    status: "paused",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=10",
-    email: "megan.richards@example.com",
-  },
-  {
-    id: 13,
-    name: "Oliver Scott",
-    role: "S. Manager",
-    team: "Security",
-    status: "active",
-    age: "37",
-    avatar: "https://i.pravatar.cc/150?img=12",
-    email: "oliver.scott@example.com",
-  },
-  {
-    id: 14,
-    name: "Grace Allen",
-    role: "M. Specialist",
-    team: "Marketing",
-    status: "active",
-    age: "30",
-    avatar: "https://i.pravatar.cc/150?img=16",
-    email: "grace.allen@example.com",
-  },
-  {
-    id: 15,
-    name: "Noah Carter",
-    role: "IT Specialist",
-    team: "I. Technology",
-    status: "paused",
-    age: "31",
-    avatar: "https://i.pravatar.cc/150?img=15",
-    email: "noah.carter@example.com",
-  },
-  {
-    id: 16,
-    name: "Ava Perez",
-    role: "Manager",
-    team: "Sales",
-    status: "active",
-    age: "29",
-    avatar: "https://i.pravatar.cc/150?img=20",
-    email: "ava.perez@example.com",
-  },
-  {
-    id: 17,
-    name: "Liam Johnson",
-    role: "Data Analyst",
-    team: "Analysis",
-    status: "active",
-    age: "28",
-    avatar: "https://i.pravatar.cc/150?img=33",
-    email: "liam.johnson@example.com",
-  },
-  {
-    id: 18,
-    name: "Sophia Taylor",
-    role: "QA Analyst",
-    team: "Testing",
-    status: "active",
-    age: "27",
-    avatar: "https://i.pravatar.cc/150?img=29",
-    email: "sophia.taylor@example.com",
-  },
-  {
-    id: 19,
-    name: "Lucas Harris",
-    role: "Administrator",
-    team: "Information Technology",
-    status: "paused",
-    age: "32",
-    avatar: "https://i.pravatar.cc/150?img=50",
-    email: "lucas.harris@example.com",
-  },
-  {
-    id: 20,
-    name: "Mia Robinson",
-    role: "Coordinator",
-    team: "Operations",
-    status: "active",
-    age: "26",
-    avatar: "https://i.pravatar.cc/150?img=45",
-    email: "mia.robinson@example.com",
-  },
-];
-
-export {columns, users, statusOptions};`;
-
-const types = `import {SVGProps} from "react";
-
-export type IconSvgProps = SVGProps<SVGSVGElement> & {
-  size?: number;
-};`;
-
-const utils = `export function capitalize(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}`;
-
-const PlusIcon = `export const PlusIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    >
-      <path d="M6 12h12" />
-      <path d="M12 18V6" />
-    </g>
-  </svg>
-);`;
-
-const VerticalDotsIcon = `export const VerticalDotsIcon = ({size = 24, width, height, ...props}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SearchIcon = `export const SearchIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const ChevronDownIcon = `export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...otherProps}
-  >
-    <path
-      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);`;
-
-const utilsTs = `export function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}`;
-
-const PlusIconTs = `import {IconSvgProps} from "./types";
-
-export const PlusIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <g
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-    >
-      <path d="M6 12h12" />
-      <path d="M12 18V6" />
-    </g>
-  </svg>
-);`;
-
-const VerticalDotsIconTs = `import {IconSvgProps} from "./types";
-
-export const VerticalDotsIcon = ({size = 24, width, height, ...props}: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height={size || height}
-    role="presentation"
-    viewBox="0 0 24 24"
-    width={size || width}
-    {...props}
-  >
-    <path
-      d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
-      fill="currentColor"
-    />
-  </svg>
-);`;
-
-const SearchIconTs = `import {IconSvgProps} from "./types";
-
-export const SearchIcon = (props: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <path
-      d="M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-    <path
-      d="M22 22L20 20"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-    />
-  </svg>
-);`;
-
-const ChevronDownIconTs = `import {IconSvgProps} from "./types";
-
-export const ChevronDownIcon = ({strokeWidth = 1.5, ...otherProps}: IconSvgProps) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...otherProps}
-  >
-    <path
-      d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeMiterlimit={10}
-      strokeWidth={strokeWidth}
-    />
-  </svg>
-);`;
-
-const App = `import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Input,
-  Button,
-  DropdownTrigger,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Chip,
-  User,
-  Pagination,
-} from "@nextui-org/react";
-import {PlusIcon} from "./PlusIcon";
-import {VerticalDotsIcon} from "./VerticalDotsIcon";
-import {SearchIcon} from "./SearchIcon";
-import {ChevronDownIcon} from "./ChevronDownIcon";
-import {columns, users, statusOptions} from "./data";
-import {capitalize} from "./utils";
-
-const statusColorMap = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
-
-export default function App() {
-  const [filterValue, setFilterValue] = React.useState("");
-  const [selectedKeys, setSelectedKeys] = React.useState(new Set([]));
-  const [visibleColumns, setVisibleColumns] = React.useState(new Set(INITIAL_VISIBLE_COLUMNS));
-  const [statusFilter, setStatusFilter] = React.useState("all");
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [sortDescriptor, setSortDescriptor] = React.useState({
-    column: "age",
-    direction: "ascending",
-  });
-  const [page, setPage] = React.useState(1);
-
-  const hasSearchFilter = Boolean(filterValue);
-
-  const headerColumns = React.useMemo(() => {
-    if (visibleColumns === "all") return columns;
-
-    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
-  }, [visibleColumns]);
-
-  const filteredItems = React.useMemo(() => {
-    let filteredUsers = [...users];
-
-    if (hasSearchFilter) {
-      filteredUsers = filteredUsers.filter((user) =>
-        user.name.toLowerCase().includes(filterValue.toLowerCase()),
-      );
-    }
-    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
-      filteredUsers = filteredUsers.filter((user) =>
-        Array.from(statusFilter).includes(user.status),
-      );
-    }
-
-    return filteredUsers;
-  }, [users, filterValue, statusFilter]);
-
-  const pages = Math.ceil(filteredItems.length / rowsPerPage);
-
-  const items = React.useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return filteredItems.slice(start, end);
-  }, [page, filteredItems, rowsPerPage]);
-
-  const sortedItems = React.useMemo(() => {
-    return [...items].sort((a, b) => {
-      const first = a[sortDescriptor.column];
-      const second = b[sortDescriptor.column];
-      const cmp = first < second ? -1 : first > second ? 1 : 0;
-
-      return sortDescriptor.direction === "descending" ? -cmp : cmp;
-    });
-  }, [sortDescriptor, items]);
-
-  const renderCell = React.useCallback((user, columnKey) => {
-    const cellValue = user[columnKey];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "lg", src: user.avatar}}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-small capitalize">{cellValue}</p>
-            <p className="text-bold text-tiny capitalize text-default-400">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-
-  const onNextPage = React.useCallback(() => {
-    if (page < pages) {
-      setPage(page + 1);
-    }
-  }, [page, pages]);
-
-  const onPreviousPage = React.useCallback(() => {
-    if (page > 1) {
-      setPage(page - 1);
-    }
-  }, [page]);
-
-  const onRowsPerPageChange = React.useCallback((e) => {
-    setRowsPerPage(Number(e.target.value));
-    setPage(1);
-  }, []);
-
-  const onSearchChange = React.useCallback((value) => {
-    if (value) {
-      setFilterValue(value);
-      setPage(1);
-    } else {
-      setFilterValue("");
-    }
-  }, []);
-
-  const onClear = React.useCallback(()=>{
-    setFilterValue("")
-    setPage(1)
-  },[])
-
-  const topContent = React.useMemo(() => {
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex justify-between gap-3 items-end">
-          <Input
-            isClearable
-            className="w-full sm:max-w-[44%]"
-            placeholder="Search by name..."
-            startContent={<SearchIcon />}
-            value={filterValue}
-            onClear={() => onClear()}
-            onValueChange={onSearchChange}
-          />
-          <div className="flex gap-3">
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
-                  Status
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={statusFilter}
-                selectionMode="multiple"
-                onSelectionChange={setStatusFilter}
-              >
-                {statusOptions.map((status) => (
-                  <DropdownItem key={status.uid} className="capitalize">
-                    {capitalize(status.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
-                  Columns
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={visibleColumns}
-                selectionMode="multiple"
-                onSelectionChange={setVisibleColumns}
-              >
-                {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
-                    {capitalize(column.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Button color="primary" endContent={<PlusIcon />}>
-              Add New
-            </Button>
-          </div>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="text-default-400 text-small">Total {users.length} users</span>
-          <label className="flex items-center text-default-400 text-small">
-            Rows per page:
-            <select
-              className="bg-transparent outline-none text-default-400 text-small"
-              onChange={onRowsPerPageChange}
-            >
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-            </select>
-          </label>
-        </div>
-      </div>
-    );
-  }, [
-    filterValue,
-    statusFilter,
-    visibleColumns,
-    onRowsPerPageChange,
-    users.length,
-    onSearchChange,
-    hasSearchFilter,
-  ]);
-
-  const bottomContent = React.useMemo(() => {
-    return (
-      <div className="py-2 px-2 flex justify-between items-center">
-        <span className="w-[30%] text-small text-default-400">
-          {selectedKeys === "all"
-            ? "All items selected"
-            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
-        </span>
-        <Pagination
-          isCompact
-          showControls
-          showShadow
-          color="primary"
-          page={page}
-          total={pages}
-          onChange={setPage}
-        />
-        <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
-            Previous
-          </Button>
-          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
-            Next
-          </Button>
-        </div>
-      </div>
-    );
-  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
-
-  return (
-    <Table
-      aria-label="Example table with custom cells, pagination and sorting"
-      isHeaderSticky
-      bottomContent={bottomContent}
-      bottomContentPlacement="outside"
-      classNames={{
-        wrapper: "max-h-[382px]",
-      }}
-      selectedKeys={selectedKeys}
-      selectionMode="multiple"
-      sortDescriptor={sortDescriptor}
-      topContent={topContent}
-      topContentPlacement="outside"
-      onSelectionChange={setSelectedKeys}
-      onSortChange={setSortDescriptor}
-    >
-      <TableHeader columns={headerColumns}>
-        {(column) => (
-          <TableColumn
-            key={column.uid}
-            align={column.uid === "actions" ? "center" : "start"}
-            allowsSorting={column.sortable}
-          >
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody emptyContent={"No users found"} items={sortedItems}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
-
-const AppTs = `import {
-  Table,
-  TableHeader,
-  TableColumn,
-  TableBody,
-  TableRow,
-  TableCell,
-  Input,
-  Button,
-  DropdownTrigger,
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  Chip,
-  User,
-  Pagination,
-  Selection,
-  ChipProps,
-  SortDescriptor
-} from "@nextui-org/react";
-import {PlusIcon} from "./PlusIcon";
-import {VerticalDotsIcon} from "./VerticalDotsIcon";
-import {ChevronDownIcon} from "./ChevronDownIcon";
-import {SearchIcon} from "./SearchIcon";
-import {columns, users, statusOptions} from "./data";
-import {capitalize} from "./utils";
-
-const statusColorMap: Record<string, ChipProps["color"]> = {
-  active: "success",
-  paused: "danger",
-  vacation: "warning",
-};
-
-const INITIAL_VISIBLE_COLUMNS = ["name", "role", "status", "actions"];
-
-type User = typeof users[0];
-
-export default function App() {
-  const [filterValue, setFilterValue] = React.useState("");
-  const [selectedKeys, setSelectedKeys] = React.useState<Selection>(new Set([]));
-  const [visibleColumns, setVisibleColumns] = React.useState<Selection>(new Set(INITIAL_VISIBLE_COLUMNS));
-  const [statusFilter, setStatusFilter] = React.useState<Selection>("all");
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const [sortDescriptor, setSortDescriptor] = React.useState<SortDescriptor>({
-    column: "age",
-    direction: "ascending",
-  });
-
-  const [page, setPage] = React.useState(1);
-
-  const hasSearchFilter = Boolean(filterValue);
-
-  const headerColumns = React.useMemo(() => {
-    if (visibleColumns === "all") return columns;
-
-    return columns.filter((column) => Array.from(visibleColumns).includes(column.uid));
-  }, [visibleColumns]);
-
-  const filteredItems = React.useMemo(() => {
-    let filteredUsers = [...users];
-
-    if (hasSearchFilter) {
-      filteredUsers = filteredUsers.filter((user) =>
-        user.name.toLowerCase().includes(filterValue.toLowerCase()),
-      );
-    }
-    if (statusFilter !== "all" && Array.from(statusFilter).length !== statusOptions.length) {
-      filteredUsers = filteredUsers.filter((user) =>
-        Array.from(statusFilter).includes(user.status),
-      );
-    }
-
-    return filteredUsers;
-  }, [users, filterValue, statusFilter]);
-
-  const pages = Math.ceil(filteredItems.length / rowsPerPage);
-
-  const items = React.useMemo(() => {
-    const start = (page - 1) * rowsPerPage;
-    const end = start + rowsPerPage;
-
-    return filteredItems.slice(start, end);
-  }, [page, filteredItems, rowsPerPage]);
-
-  const sortedItems = React.useMemo(() => {
-    return [...items].sort((a: User, b: User) => {
-      const first = a[sortDescriptor.column as keyof User] as number;
-      const second = b[sortDescriptor.column as keyof User] as number;
-      const cmp = first < second ? -1 : first > second ? 1 : 0;
-
-      return sortDescriptor.direction === "descending" ? -cmp : cmp;
-    });
-  }, [sortDescriptor, items]);
-
-  const renderCell = React.useCallback((user: User, columnKey: React.Key) => {
-    const cellValue = user[columnKey as keyof User];
-
-    switch (columnKey) {
-      case "name":
-        return (
-          <User
-            avatarProps={{radius: "lg", src: user.avatar}}
-            description={user.email}
-            name={cellValue}
-          >
-            {user.email}
-          </User>
-        );
-      case "role":
-        return (
-          <div className="flex flex-col">
-            <p className="text-bold text-small capitalize">{cellValue}</p>
-            <p className="text-bold text-tiny capitalize text-default-400">{user.team}</p>
-          </div>
-        );
-      case "status":
-        return (
-          <Chip className="capitalize" color={statusColorMap[user.status]} size="sm" variant="flat">
-            {cellValue}
-          </Chip>
-        );
-      case "actions":
-        return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem>View</DropdownItem>
-                <DropdownItem>Edit</DropdownItem>
-                <DropdownItem>Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
-        );
-      default:
-        return cellValue;
-    }
-  }, []);
-
-  const onNextPage = React.useCallback(() => {
-    if (page < pages) {
-      setPage(page + 1);
-    }
-  }, [page, pages]);
-
-  const onPreviousPage = React.useCallback(() => {
-    if (page > 1) {
-      setPage(page - 1);
-    }
-  }, [page]);
-
-  const onRowsPerPageChange = React.useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    setRowsPerPage(Number(e.target.value));
-    setPage(1);
-  }, []);
-
-  const onSearchChange = React.useCallback((value?: string) => {
-    if (value) {
-      setFilterValue(value);
-      setPage(1);
-    } else {
-      setFilterValue("");
-    }
-  }, []);
-
-  const onClear = React.useCallback(()=>{
-    setFilterValue("")
-    setPage(1)
-  },[])
-
-  const topContent = React.useMemo(() => {
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex justify-between gap-3 items-end">
-          <Input
-            isClearable
-            className="w-full sm:max-w-[44%]"
-            placeholder="Search by name..."
-            startContent={<SearchIcon />}
-            value={filterValue}
-            onClear={() => onClear()}
-            onValueChange={onSearchChange}
-          />
-          <div className="flex gap-3">
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
-                  Status
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={statusFilter}
-                selectionMode="multiple"
-                onSelectionChange={setStatusFilter}
-              >
-                {statusOptions.map((status) => (
-                  <DropdownItem key={status.uid} className="capitalize">
-                    {capitalize(status.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Dropdown>
-              <DropdownTrigger className="hidden sm:flex">
-                <Button endContent={<ChevronDownIcon className="text-small" />} variant="flat">
-                  Columns
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu
-                disallowEmptySelection
-                aria-label="Table Columns"
-                closeOnSelect={false}
-                selectedKeys={visibleColumns}
-                selectionMode="multiple"
-                onSelectionChange={setVisibleColumns}
-              >
-                {columns.map((column) => (
-                  <DropdownItem key={column.uid} className="capitalize">
-                    {capitalize(column.name)}
-                  </DropdownItem>
-                ))}
-              </DropdownMenu>
-            </Dropdown>
-            <Button color="primary" endContent={<PlusIcon />}>
-              Add New
-            </Button>
-          </div>
-        </div>
-        <div className="flex justify-between items-center">
-          <span className="text-default-400 text-small">Total {users.length} users</span>
-          <label className="flex items-center text-default-400 text-small">
-            Rows per page:
-            <select
-              className="bg-transparent outline-none text-default-400 text-small"
-              onChange={onRowsPerPageChange}
-            >
-              <option value="5">5</option>
-              <option value="10">10</option>
-              <option value="15">15</option>
-            </select>
-          </label>
-        </div>
-      </div>
-    );
-  }, [
-    filterValue,
-    statusFilter,
-    visibleColumns,
-    onSearchChange,
-    onRowsPerPageChange,
-    users.length,
-    hasSearchFilter,
-  ]);
-
-  const bottomContent = React.useMemo(() => {
-    return (
-      <div className="py-2 px-2 flex justify-between items-center">
-        <span className="w-[30%] text-small text-default-400">
-          {selectedKeys === "all"
-            ? "All items selected"
-            : \`\${selectedKeys.size} of \${filteredItems.length} selected\`}
-        </span>
-        <Pagination
-          isCompact
-          showControls
-          showShadow
-          color="primary"
-          page={page}
-          total={pages}
-          onChange={setPage}
-        />
-        <div className="hidden sm:flex w-[30%] justify-end gap-2">
-          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onPreviousPage}>
-            Previous
-          </Button>
-          <Button isDisabled={pages === 1} size="sm" variant="flat" onPress={onNextPage}>
-            Next
-          </Button>
-        </div>
-      </div>
-    );
-  }, [selectedKeys, items.length, page, pages, hasSearchFilter]);
-
-  return (
-    <Table
-      aria-label="Example table with custom cells, pagination and sorting"
-      isHeaderSticky
-      bottomContent={bottomContent}
-      bottomContentPlacement="outside"
-      classNames={{
-        wrapper: "max-h-[382px]",
-      }}
-      selectedKeys={selectedKeys}
-      selectionMode="multiple"
-      sortDescriptor={sortDescriptor}
-      topContent={topContent}
-      topContentPlacement="outside"
-      onSelectionChange={setSelectedKeys}
-      onSortChange={setSortDescriptor}
-    >
-      <TableHeader columns={headerColumns}>
-        {(column) => (
-          <TableColumn
-            key={column.uid}
-            align={column.uid === "actions" ? "center" : "start"}
-            allowsSorting={column.sortable}
-          >
-            {column.name}
-          </TableColumn>
-        )}
-      </TableHeader>
-      <TableBody emptyContent={"No users found"} items={sortedItems}>
-        {(item) => (
-          <TableRow key={item.id}>
-            {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./use-case.raw.jsx?raw";
+import AppTs from "./use-case.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/utils.js": utils,
-  "/PlusIcon.jsx": PlusIcon,
-  "/SearchIcon.jsx": SearchIcon,
-  "/ChevronDownIcon.jsx": ChevronDownIcon,
-  "/VerticalDotsIcon.jsx": VerticalDotsIcon,
 };
 
 const reactTs = {
   "/App.tsx": AppTs,
-  "/types.ts": types,
-  "/data.ts": dataTs,
-  "/utils.ts": utilsTs,
-  "/PlusIcon.tsx": PlusIconTs,
-  "/VerticalDotsIcon.tsx": VerticalDotsIconTs,
-  "/SearchIcon.tsx": SearchIconTs,
-  "/ChevronDownIcon.tsx": ChevronDownIconTs,
 };
 
 export default {
diff --git a/apps/docs/content/components/table/without-header.raw.jsx b/apps/docs/content/components/table/without-header.raw.jsx
new file mode 100644
index 0000000000..e5506cc19f
--- /dev/null
+++ b/apps/docs/content/components/table/without-header.raw.jsx
@@ -0,0 +1,35 @@
+import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table hideHeader aria-label="Example static collection table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow key="1">
+          <TableCell>Tony Reichert</TableCell>
+          <TableCell>CEO</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="2">
+          <TableCell>Zoey Lang</TableCell>
+          <TableCell>Technical Lead</TableCell>
+          <TableCell>Paused</TableCell>
+        </TableRow>
+        <TableRow key="3">
+          <TableCell>Jane Fisher</TableCell>
+          <TableCell>Senior Developer</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="4">
+          <TableCell>William Howard</TableCell>
+          <TableCell>Community Manager</TableCell>
+          <TableCell>Vacation</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/without-header.ts b/apps/docs/content/components/table/without-header.ts
index 18c4b55d98..90f0321bcc 100644
--- a/apps/docs/content/components/table/without-header.ts
+++ b/apps/docs/content/components/table/without-header.ts
@@ -1,38 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Table hideHeader aria-label="Example static collection table">
-      <TableHeader>
-        <TableColumn>NAME</TableColumn>
-        <TableColumn>ROLE</TableColumn>
-        <TableColumn>STATUS</TableColumn>
-      </TableHeader>
-      <TableBody>
-        <TableRow key="1">
-          <TableCell>Tony Reichert</TableCell>
-          <TableCell>CEO</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="2">
-          <TableCell>Zoey Lang</TableCell>
-          <TableCell>Technical Lead</TableCell>
-          <TableCell>Paused</TableCell>
-        </TableRow>
-        <TableRow key="3">
-          <TableCell>Jane Fisher</TableCell>
-          <TableCell>Senior Developer</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="4">
-          <TableCell>William Howard</TableCell>
-          <TableCell>Community Manager</TableCell>
-          <TableCell>Vacation</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./without-header.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/table/without-wrapper.raw.jsx b/apps/docs/content/components/table/without-wrapper.raw.jsx
new file mode 100644
index 0000000000..26d6e38715
--- /dev/null
+++ b/apps/docs/content/components/table/without-wrapper.raw.jsx
@@ -0,0 +1,35 @@
+import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Table removeWrapper aria-label="Example static collection table">
+      <TableHeader>
+        <TableColumn>NAME</TableColumn>
+        <TableColumn>ROLE</TableColumn>
+        <TableColumn>STATUS</TableColumn>
+      </TableHeader>
+      <TableBody>
+        <TableRow key="1">
+          <TableCell>Tony Reichert</TableCell>
+          <TableCell>CEO</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="2">
+          <TableCell>Zoey Lang</TableCell>
+          <TableCell>Technical Lead</TableCell>
+          <TableCell>Paused</TableCell>
+        </TableRow>
+        <TableRow key="3">
+          <TableCell>Jane Fisher</TableCell>
+          <TableCell>Senior Developer</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow key="4">
+          <TableCell>William Howard</TableCell>
+          <TableCell>Community Manager</TableCell>
+          <TableCell>Vacation</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/docs/content/components/table/without-wrapper.ts b/apps/docs/content/components/table/without-wrapper.ts
index 74e22f5a2a..326e580709 100644
--- a/apps/docs/content/components/table/without-wrapper.ts
+++ b/apps/docs/content/components/table/without-wrapper.ts
@@ -1,38 +1,4 @@
-const App = `import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Table removeWrapper aria-label="Example static collection table">
-      <TableHeader>
-        <TableColumn>NAME</TableColumn>
-        <TableColumn>ROLE</TableColumn>
-        <TableColumn>STATUS</TableColumn>
-      </TableHeader>
-      <TableBody>
-        <TableRow key="1">
-          <TableCell>Tony Reichert</TableCell>
-          <TableCell>CEO</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="2">
-          <TableCell>Zoey Lang</TableCell>
-          <TableCell>Technical Lead</TableCell>
-          <TableCell>Paused</TableCell>
-        </TableRow>
-        <TableRow key="3">
-          <TableCell>Jane Fisher</TableCell>
-          <TableCell>Senior Developer</TableCell>
-          <TableCell>Active</TableCell>
-        </TableRow>
-        <TableRow key="4">
-          <TableCell>William Howard</TableCell>
-          <TableCell>Community Manager</TableCell>
-          <TableCell>Vacation</TableCell>
-        </TableRow>
-      </TableBody>
-    </Table>
-  );
-}`;
+import App from "./without-wrapper.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/colors.raw.jsx b/apps/docs/content/components/tabs/colors.raw.jsx
new file mode 100644
index 0000000000..38163ff07a
--- /dev/null
+++ b/apps/docs/content/components/tabs/colors.raw.jsx
@@ -0,0 +1,17 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => (
+        <Tabs key={color} aria-label="Tabs colors" color={color} radius="full">
+          <Tab key="photos" title="Photos" />
+          <Tab key="music" title="Music" />
+          <Tab key="videos" title="Videos" />
+        </Tabs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/colors.ts b/apps/docs/content/components/tabs/colors.ts
index ff9140ba8b..d5bef810aa 100644
--- a/apps/docs/content/components/tabs/colors.ts
+++ b/apps/docs/content/components/tabs/colors.ts
@@ -1,27 +1,4 @@
-const App = `import {Tabs, Tab} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger"
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => (
-        <Tabs key={color} color={color} aria-label="Tabs colors" radius="full">
-          <Tab key="photos" title="Photos"/>
-          <Tab key="music" title="Music"/>
-          <Tab key="videos" title="Videos"/>
-        </Tabs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/controlled.raw.jsx b/apps/docs/content/components/tabs/controlled.raw.jsx
new file mode 100644
index 0000000000..9038268ef4
--- /dev/null
+++ b/apps/docs/content/components/tabs/controlled.raw.jsx
@@ -0,0 +1,38 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("photos");
+
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Options" selectedKey={selected} onSelectionChange={setSelected}>
+        <Tab key="photos" title="Photos">
+          <Card>
+            <CardBody>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="music" title="Music">
+          <Card>
+            <CardBody>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="videos" title="Videos">
+          <Card>
+            <CardBody>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/controlled.ts b/apps/docs/content/components/tabs/controlled.ts
index 54ae1ee402..2c3f0cacb4 100644
--- a/apps/docs/content/components/tabs/controlled.ts
+++ b/apps/docs/content/components/tabs/controlled.ts
@@ -1,40 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("photos");
-
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs 
-        aria-label="Options"         
-        selectedKey={selected}
-        onSelectionChange={setSelected}
-      >
-        <Tab key="photos" title="Photos">
-          <Card>
-            <CardBody>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="music" title="Music">
-          <Card>
-            <CardBody>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="videos" title="Videos">
-          <Card>
-            <CardBody>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </CardBody>
-          </Card>  
-        </Tab>
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/custom-styles.raw.jsx b/apps/docs/content/components/tabs/custom-styles.raw.jsx
new file mode 100644
index 0000000000..d245ce75df
--- /dev/null
+++ b/apps/docs/content/components/tabs/custom-styles.raw.jsx
@@ -0,0 +1,131 @@
+import {Tabs, Tab, Chip} from "@nextui-org/react";
+
+export const GalleryIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const MusicIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VideoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor" />
+      <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor" />
+      <path
+        d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z"
+        fill="currentColor"
+      />
+      <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs
+        aria-label="Options"
+        classNames={{
+          tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
+          cursor: "w-full bg-[#22d3ee]",
+          tab: "max-w-fit px-0 h-12",
+          tabContent: "group-data-[selected=true]:text-[#06b6d4]",
+        }}
+        color="primary"
+        variant="underlined"
+      >
+        <Tab
+          key="photos"
+          title={
+            <div className="flex items-center space-x-2">
+              <GalleryIcon />
+              <span>Photos</span>
+              <Chip size="sm" variant="faded">
+                9
+              </Chip>
+            </div>
+          }
+        />
+        <Tab
+          key="music"
+          title={
+            <div className="flex items-center space-x-2">
+              <MusicIcon />
+              <span>Music</span>
+              <Chip size="sm" variant="faded">
+                3
+              </Chip>
+            </div>
+          }
+        />
+        <Tab
+          key="videos"
+          title={
+            <div className="flex items-center space-x-2">
+              <VideoIcon />
+              <span>Videos</span>
+              <Chip size="sm" variant="faded">
+                1
+              </Chip>
+            </div>
+          }
+        />
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/custom-styles.ts b/apps/docs/content/components/tabs/custom-styles.ts
index ff197991d6..da3ea9093a 100644
--- a/apps/docs/content/components/tabs/custom-styles.ts
+++ b/apps/docs/content/components/tabs/custom-styles.ts
@@ -1,113 +1,7 @@
-const GalleryIcon = `export const GalleryIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z" fill="currentColor"/>
-    <path d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const MusicIcon = `export const MusicIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const VideoIcon = `export const VideoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor"/>
-    <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor"/>
-    <path d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z" fill="currentColor"/>
-    <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Tabs, Tab, Chip} from "@nextui-org/react";
-import {GalleryIcon} from "./GalleryIcon";
-import {MusicIcon} from "./MusicIcon";
-import {VideoIcon} from "./VideoIcon";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs 
-        aria-label="Options" 
-        color="primary" 
-        variant="underlined"
-        classNames={{
-          tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
-          cursor: "w-full bg-[#22d3ee]",
-          tab: "max-w-fit px-0 h-12",
-          tabContent: "group-data-[selected=true]:text-[#06b6d4]"
-        }}
-      >
-        <Tab
-          key="photos"
-          title={
-            <div className="flex items-center space-x-2">
-              <GalleryIcon/>
-              <span>Photos</span>
-              <Chip size="sm" variant="faded">9</Chip>
-            </div>
-          }
-        />
-        <Tab
-          key="music"
-          title={
-            <div className="flex items-center space-x-2">
-              <MusicIcon/>
-              <span>Music</span>
-              <Chip size="sm" variant="faded">3</Chip>
-            </div>
-          }
-        />
-        <Tab
-          key="videos"
-          title={
-            <div className="flex items-center space-x-2">
-              <VideoIcon/>
-              <span>Videos</span>
-              <Chip size="sm" variant="faded">1</Chip>
-            </div>
-          }
-        />
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/GalleryIcon.jsx": GalleryIcon,
-  "/MusicIcon.jsx": MusicIcon,
-  "/VideoIcon.jsx": VideoIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/tabs/disabled-item.raw.jsx b/apps/docs/content/components/tabs/disabled-item.raw.jsx
new file mode 100644
index 0000000000..36b3b20580
--- /dev/null
+++ b/apps/docs/content/components/tabs/disabled-item.raw.jsx
@@ -0,0 +1,36 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Disabled Options" disabledKeys={["music"]}>
+        <Tab key="photos" title="Photos">
+          <Card>
+            <CardBody>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="music" title="Music">
+          <Card>
+            <CardBody>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="videos" title="Videos">
+          <Card>
+            <CardBody>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/disabled-item.ts b/apps/docs/content/components/tabs/disabled-item.ts
index 9106c67548..90d0beb6b7 100644
--- a/apps/docs/content/components/tabs/disabled-item.ts
+++ b/apps/docs/content/components/tabs/disabled-item.ts
@@ -1,34 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs disabledKeys={["music"]} aria-label="Disabled Options">
-        <Tab key="photos" title="Photos">
-          <Card>
-            <CardBody>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="music" title="Music">
-          <Card>
-            <CardBody>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="videos" title="Videos">
-          <Card>
-            <CardBody>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </CardBody>
-          </Card>  
-        </Tab>
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./disabled-item.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/disabled.raw.jsx b/apps/docs/content/components/tabs/disabled.raw.jsx
new file mode 100644
index 0000000000..d37812b165
--- /dev/null
+++ b/apps/docs/content/components/tabs/disabled.raw.jsx
@@ -0,0 +1,36 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs isDisabled aria-label="Options">
+        <Tab key="photos" title="Photos">
+          <Card>
+            <CardBody>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="music" title="Music">
+          <Card>
+            <CardBody>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="videos" title="Videos">
+          <Card>
+            <CardBody>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/disabled.ts b/apps/docs/content/components/tabs/disabled.ts
index 4e5449d763..1a215cc91f 100644
--- a/apps/docs/content/components/tabs/disabled.ts
+++ b/apps/docs/content/components/tabs/disabled.ts
@@ -1,34 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs isDisabled aria-label="Options">
-        <Tab key="photos" title="Photos">
-          <Card>
-            <CardBody>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="music" title="Music">
-          <Card>
-            <CardBody>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="videos" title="Videos">
-          <Card>
-            <CardBody>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </CardBody>
-          </Card>  
-        </Tab>
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/dynamic.raw.jsx b/apps/docs/content/components/tabs/dynamic.raw.jsx
new file mode 100644
index 0000000000..53570bebfe
--- /dev/null
+++ b/apps/docs/content/components/tabs/dynamic.raw.jsx
@@ -0,0 +1,38 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  let tabs = [
+    {
+      id: "photos",
+      label: "Photos",
+      content:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+    },
+    {
+      id: "music",
+      label: "Music",
+      content:
+        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+    },
+    {
+      id: "videos",
+      label: "Videos",
+      content:
+        "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    },
+  ];
+
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Dynamic tabs" items={tabs}>
+        {(item) => (
+          <Tab key={item.id} title={item.label}>
+            <Card>
+              <CardBody>{item.content}</CardBody>
+            </Card>
+          </Tab>
+        )}
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/dynamic.ts b/apps/docs/content/components/tabs/dynamic.ts
index 3e13d8eab0..5d3c97bb9a 100644
--- a/apps/docs/content/components/tabs/dynamic.ts
+++ b/apps/docs/content/components/tabs/dynamic.ts
@@ -1,40 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  let tabs = [
-    {
-      id: "photos",
-      label: "Photos",
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-    },
-    {
-      id: "music",
-      label: "Music",
-      content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
-    },
-    {
-      id: "videos",
-      label: "Videos",
-      content: "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    }
-  ];
-
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs aria-label="Dynamic tabs" items={tabs}>
-        {(item) => (
-          <Tab key={item.id} title={item.label}>
-            <Card>
-              <CardBody>
-                {item.content}
-              </CardBody>
-            </Card>  
-          </Tab>
-        )}
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./dynamic.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/form.raw.jsx b/apps/docs/content/components/tabs/form.raw.jsx
new file mode 100644
index 0000000000..61422dd9fa
--- /dev/null
+++ b/apps/docs/content/components/tabs/form.raw.jsx
@@ -0,0 +1,67 @@
+import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState("login");
+
+  return (
+    <div className="flex flex-col w-full">
+      <Card className="max-w-full w-[340px] h-[400px]">
+        <CardBody className="overflow-hidden">
+          <Tabs
+            fullWidth
+            aria-label="Tabs form"
+            selectedKey={selected}
+            size="md"
+            onSelectionChange={setSelected}
+          >
+            <Tab key="login" title="Login">
+              <form className="flex flex-col gap-4">
+                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
+                <Input
+                  isRequired
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                />
+                <p className="text-center text-small">
+                  Need to create an account?{" "}
+                  <Link size="sm" onPress={() => setSelected("sign-up")}>
+                    Sign up
+                  </Link>
+                </p>
+                <div className="flex gap-2 justify-end">
+                  <Button fullWidth color="primary">
+                    Login
+                  </Button>
+                </div>
+              </form>
+            </Tab>
+            <Tab key="sign-up" title="Sign up">
+              <form className="flex flex-col gap-4 h-[300px]">
+                <Input isRequired label="Name" placeholder="Enter your name" type="password" />
+                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
+                <Input
+                  isRequired
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                />
+                <p className="text-center text-small">
+                  Already have an account?{" "}
+                  <Link size="sm" onPress={() => setSelected("login")}>
+                    Login
+                  </Link>
+                </p>
+                <div className="flex gap-2 justify-end">
+                  <Button fullWidth color="primary">
+                    Sign up
+                  </Button>
+                </div>
+              </form>
+            </Tab>
+          </Tabs>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/form.raw.tsx b/apps/docs/content/components/tabs/form.raw.tsx
new file mode 100644
index 0000000000..1e3e7f4c79
--- /dev/null
+++ b/apps/docs/content/components/tabs/form.raw.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import {Tabs, Tab, Input, Link, Button, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  const [selected, setSelected] = React.useState<React.Key>("login");
+
+  return (
+    <div className="flex flex-col w-full">
+      <Card className="max-w-full w-[340px] h-[400px]">
+        <CardBody className="overflow-hidden">
+          <Tabs
+            fullWidth
+            aria-label="Tabs form"
+            selectedKey={selected}
+            size="md"
+            onSelectionChange={setSelected}
+          >
+            <Tab key="login" title="Login">
+              <form className="flex flex-col gap-4">
+                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
+                <Input
+                  isRequired
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                />
+                <p className="text-center text-small">
+                  Need to create an account?{" "}
+                  <Link size="sm" onPress={() => setSelected("sign-up")}>
+                    Sign up
+                  </Link>
+                </p>
+                <div className="flex gap-2 justify-end">
+                  <Button fullWidth color="primary">
+                    Login
+                  </Button>
+                </div>
+              </form>
+            </Tab>
+            <Tab key="sign-up" title="Sign up">
+              <form className="flex flex-col gap-4 h-[300px]">
+                <Input isRequired label="Name" placeholder="Enter your name" type="password" />
+                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
+                <Input
+                  isRequired
+                  label="Password"
+                  placeholder="Enter your password"
+                  type="password"
+                />
+                <p className="text-center text-small">
+                  Already have an account?{" "}
+                  <Link size="sm" onPress={() => setSelected("login")}>
+                    Login
+                  </Link>
+                </p>
+                <div className="flex gap-2 justify-end">
+                  <Button fullWidth color="primary">
+                    Sign up
+                  </Button>
+                </div>
+              </form>
+            </Tab>
+          </Tabs>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/form.ts b/apps/docs/content/components/tabs/form.ts
index 679964350b..2f8c0d8490 100644
--- a/apps/docs/content/components/tabs/form.ts
+++ b/apps/docs/content/components/tabs/form.ts
@@ -1,138 +1,5 @@
-const App = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState("login");
-
-  return (
-    <div className="flex flex-col w-full">
-      <Card className="max-w-full w-[340px] h-[400px]">
-        <CardBody className="overflow-hidden">
-          <Tabs
-            fullWidth
-            size="md"
-            aria-label="Tabs form"
-            selectedKey={selected}
-            onSelectionChange={setSelected}
-          >
-            <Tab key="login" title="Login">
-              <form className="flex flex-col gap-4">
-                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
-                <Input
-                  isRequired
-                  label="Password"
-                  placeholder="Enter your password"
-                  type="password"
-                />
-                <p className="text-center text-small">
-                  Need to create an account?{" "}
-                  <Link size="sm" onPress={() => setSelected("sign-up")}>
-                    Sign up
-                  </Link>
-                </p>
-                <div className="flex gap-2 justify-end">
-                  <Button fullWidth color="primary">
-                    Login
-                  </Button>
-                </div>
-              </form>
-            </Tab>
-            <Tab key="sign-up" title="Sign up">
-              <form className="flex flex-col gap-4 h-[300px]">
-                <Input isRequired label="Name" placeholder="Enter your name" type="password" />
-                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
-                <Input
-                  isRequired
-                  label="Password"
-                  placeholder="Enter your password"
-                  type="password"
-                />
-                <p className="text-center text-small">
-                  Already have an account?{" "}
-                  <Link size="sm" onPress={() => setSelected("login")}>
-                    Login
-                  </Link>
-                </p>
-                <div className="flex gap-2 justify-end">
-                  <Button fullWidth color="primary">
-                    Sign up
-                  </Button>
-                </div>
-              </form>
-            </Tab>
-          </Tabs>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}`;
-
-const AppTs = `import {Tabs, Tab, Input, Link, Button, Card, CardBody, CardHeader} from "@nextui-org/react";
-
-export default function App() {
-  const [selected, setSelected] = React.useState<React.Key>("login");
-
-  return (
-    <div className="flex flex-col w-full">
-      <Card className="max-w-full w-[340px] h-[400px]">
-        <CardBody className="overflow-hidden">
-          <Tabs
-            fullWidth
-            size="md"
-            aria-label="Tabs form"
-            selectedKey={selected}
-            onSelectionChange={setSelected}
-          >
-            <Tab key="login" title="Login">
-              <form className="flex flex-col gap-4">
-                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
-                <Input
-                  isRequired
-                  label="Password"
-                  placeholder="Enter your password"
-                  type="password"
-                />
-                <p className="text-center text-small">
-                  Need to create an account?{" "}
-                  <Link size="sm" onPress={() => setSelected("sign-up")}>
-                    Sign up
-                  </Link>
-                </p>
-                <div className="flex gap-2 justify-end">
-                  <Button fullWidth color="primary">
-                    Login
-                  </Button>
-                </div>
-              </form>
-            </Tab>
-            <Tab key="sign-up" title="Sign up">
-              <form className="flex flex-col gap-4 h-[300px]">
-                <Input isRequired label="Name" placeholder="Enter your name" type="password" />
-                <Input isRequired label="Email" placeholder="Enter your email" type="email" />
-                <Input
-                  isRequired
-                  label="Password"
-                  placeholder="Enter your password"
-                  type="password"
-                />
-                <p className="text-center text-small">
-                  Already have an account?{" "}
-                  <Link size="sm" onPress={() => setSelected("login")}>
-                    Login
-                  </Link>
-                </p>
-                <div className="flex gap-2 justify-end">
-                  <Button fullWidth color="primary">
-                    Sign up
-                  </Button>
-                </div>
-              </form>
-            </Tab>
-          </Tabs>
-        </CardBody>
-      </Card>
-    </div>
-  );
-}`;
+import App from "./form.raw.jsx?raw";
+import AppTs from "./form.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/icons.raw.jsx b/apps/docs/content/components/tabs/icons.raw.jsx
new file mode 100644
index 0000000000..17bca089e6
--- /dev/null
+++ b/apps/docs/content/components/tabs/icons.raw.jsx
@@ -0,0 +1,112 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export const GalleryIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const MusicIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path
+        d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export const VideoIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="24"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="24"
+      {...props}
+    >
+      <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor" />
+      <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor" />
+      <path
+        d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z"
+        fill="currentColor"
+      />
+      <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Options" color="primary" variant="bordered">
+        <Tab
+          key="photos"
+          title={
+            <div className="flex items-center space-x-2">
+              <GalleryIcon />
+              <span>Photos</span>
+            </div>
+          }
+        />
+        <Tab
+          key="music"
+          title={
+            <div className="flex items-center space-x-2">
+              <MusicIcon />
+              <span>Music</span>
+            </div>
+          }
+        />
+        <Tab
+          key="videos"
+          title={
+            <div className="flex items-center space-x-2">
+              <VideoIcon />
+              <span>Videos</span>
+            </div>
+          }
+        />
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/icons.ts b/apps/docs/content/components/tabs/icons.ts
index b272ee4257..22a410c88f 100644
--- a/apps/docs/content/components/tabs/icons.ts
+++ b/apps/docs/content/components/tabs/icons.ts
@@ -1,100 +1,7 @@
-const GalleryIcon = `export const GalleryIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M2.58078 19.0112L2.56078 19.0312C2.29078 18.4413 2.12078 17.7713 2.05078 17.0312C2.12078 17.7613 2.31078 18.4212 2.58078 19.0112Z" fill="currentColor"/>
-    <path d="M9.00109 10.3811C10.3155 10.3811 11.3811 9.31553 11.3811 8.00109C11.3811 6.68666 10.3155 5.62109 9.00109 5.62109C7.68666 5.62109 6.62109 6.68666 6.62109 8.00109C6.62109 9.31553 7.68666 10.3811 9.00109 10.3811Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.19C2 17.28 2.19 18.23 2.56 19.03C3.42 20.93 5.26 22 7.81 22H16.19C19.83 22 22 19.83 22 16.19V13.9V7.81C22 4.17 19.83 2 16.19 2ZM20.37 12.5C19.59 11.83 18.33 11.83 17.55 12.5L13.39 16.07C12.61 16.74 11.35 16.74 10.57 16.07L10.23 15.79C9.52 15.17 8.39 15.11 7.59 15.65L3.85 18.16C3.63 17.6 3.5 16.95 3.5 16.19V7.81C3.5 4.99 4.99 3.5 7.81 3.5H16.19C19.01 3.5 20.5 4.99 20.5 7.81V12.61L20.37 12.5Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const MusicIcon = `export const MusicIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M9.66984 13.9219C8.92984 13.9219 8.33984 14.5219 8.33984 15.2619C8.33984 16.0019 8.93984 16.5919 9.66984 16.5919C10.4098 16.5919 11.0098 15.9919 11.0098 15.2619C11.0098 14.5219 10.4098 13.9219 9.66984 13.9219Z" fill="currentColor"/>
-    <path d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17.12 9.8C17.12 10.41 16.86 10.95 16.42 11.27C16.14 11.47 15.8 11.58 15.44 11.58C15.23 11.58 15.02 11.54 14.8 11.47L12.51 10.71C12.5 10.71 12.48 10.7 12.47 10.69V15.25C12.47 16.79 11.21 18.05 9.67 18.05C8.13 18.05 6.87 16.79 6.87 15.25C6.87 13.71 8.13 12.45 9.67 12.45C10.16 12.45 10.61 12.59 11.01 12.8V8.63V8.02C11.01 7.41 11.27 6.87 11.71 6.55C12.16 6.23 12.75 6.15 13.33 6.35L15.62 7.11C16.48 7.4 17.13 8.3 17.13 9.2V9.8H17.12Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const VideoIcon = `export const VideoIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    focusable="false"
-    height="24"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="24"
-    fill="none"
-    {...props}
-  >
-    <path d="M14.7295 2H9.26953V6.36H14.7295V2Z" fill="currentColor"/>
-    <path d="M16.2305 2V6.36H21.8705C21.3605 3.61 19.3305 2.01 16.2305 2Z" fill="currentColor"/>
-    <path d="M2 7.85938V16.1894C2 19.8294 4.17 21.9994 7.81 21.9994H16.19C19.83 21.9994 22 19.8294 22 16.1894V7.85938H2ZM14.44 16.1794L12.36 17.3794C11.92 17.6294 11.49 17.7594 11.09 17.7594C10.79 17.7594 10.52 17.6894 10.27 17.5494C9.69 17.2194 9.37 16.5394 9.37 15.6594V13.2594C9.37 12.3794 9.69 11.6994 10.27 11.3694C10.85 11.0294 11.59 11.0894 12.36 11.5394L14.44 12.7394C15.21 13.1794 15.63 13.7994 15.63 14.4694C15.63 15.1394 15.2 15.7294 14.44 16.1794Z" fill="currentColor"/>
-    <path d="M7.76891 2C4.66891 2.01 2.63891 3.61 2.12891 6.36H7.76891V2Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Tabs, Tab} from "@nextui-org/react";
-import {GalleryIcon} from "./GalleryIcon";
-import {MusicIcon} from "./MusicIcon";
-import {VideoIcon} from "./VideoIcon";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs aria-label="Options" color="primary" variant="bordered">
-        <Tab
-          key="photos"
-          title={
-            <div className="flex items-center space-x-2">
-              <GalleryIcon/>
-              <span>Photos</span>
-            </div>
-          }
-        />
-        <Tab
-          key="music"
-          title={
-            <div className="flex items-center space-x-2">
-              <MusicIcon/>
-              <span>Music</span>
-            </div>
-          }
-        />
-        <Tab
-          key="videos"
-          title={
-            <div className="flex items-center space-x-2">
-              <VideoIcon/>
-              <span>Videos</span>
-            </div>
-          }
-        />
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/GalleryIcon.jsx": GalleryIcon,
-  "/MusicIcon.jsx": MusicIcon,
-  "/VideoIcon.jsx": VideoIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/tabs/placement.raw.jsx b/apps/docs/content/components/tabs/placement.raw.jsx
new file mode 100644
index 0000000000..2fdc1e7578
--- /dev/null
+++ b/apps/docs/content/components/tabs/placement.raw.jsx
@@ -0,0 +1,51 @@
+import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react";
+
+export default function App() {
+  const [placement, setPlacement] = React.useState("top");
+
+  return (
+    <div className="flex flex-col px-4">
+      <RadioGroup
+        className="mb-4"
+        label="Placement"
+        value={placement}
+        onValueChange={(value) => setPlacement(value)}
+      >
+        <Radio value="top">top</Radio>
+        <Radio value="bottom">bottom</Radio>
+        <Radio value="start">start</Radio>
+        <Radio value="end">end</Radio>
+      </RadioGroup>
+      <div className="flex w-full flex-col">
+        <Tabs aria-label="Options" placement={placement}>
+          <Tab key="photos" title="Photos">
+            <Card>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Tab>
+          <Tab key="music" title="Music">
+            <Card>
+              <CardBody>
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+                esse cillum dolore eu fugiat nulla pariatur.
+              </CardBody>
+            </Card>
+          </Tab>
+          <Tab key="videos" title="Videos">
+            <Card>
+              <CardBody>
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+                mollit anim id est laborum.
+              </CardBody>
+            </Card>
+          </Tab>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/placement.ts b/apps/docs/content/components/tabs/placement.ts
index 558a4bbdb5..eee2244366 100644
--- a/apps/docs/content/components/tabs/placement.ts
+++ b/apps/docs/content/components/tabs/placement.ts
@@ -1,48 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, RadioGroup, Radio} from "@nextui-org/react";
-
-export default function App() {
-  const [placement, setPlacement] = React.useState("top");
-  return (
-    <div className="flex flex-col px-4">
-      <RadioGroup
-        className="mb-4"
-        label="Placement"
-        value={placement}
-        onValueChange={(value) => setPlacement(value)}
-      >
-        <Radio value="top">top</Radio>
-        <Radio value="bottom">bottom</Radio>
-        <Radio value="start">start</Radio>
-        <Radio value="end">end</Radio>
-      </RadioGroup>
-      <div className="flex w-full flex-col">
-        <Tabs aria-label="Options" placement={placement}>
-          <Tab key="photos" title="Photos">
-            <Card>
-              <CardBody>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-              </CardBody>
-            </Card>  
-          </Tab>
-          <Tab key="music" title="Music">
-            <Card>
-              <CardBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-              </CardBody>
-            </Card>  
-          </Tab>
-          <Tab key="videos" title="Videos">
-            <Card>
-              <CardBody>
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </CardBody>
-            </Card>  
-          </Tab>
-        </Tabs>
-      </div>
-    </div>
-  );
-}`;
+import App from "./placement.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/radius.raw.jsx b/apps/docs/content/components/tabs/radius.raw.jsx
new file mode 100644
index 0000000000..0959a31088
--- /dev/null
+++ b/apps/docs/content/components/tabs/radius.raw.jsx
@@ -0,0 +1,17 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export default function App() {
+  const radiusList = ["full", "lg", "md", "sm", "none"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {radiusList.map((radius) => (
+        <Tabs key={radius} aria-label="Tabs radius" radius={radius}>
+          <Tab key="photos" title="Photos" />
+          <Tab key="music" title="Music" />
+          <Tab key="videos" title="Videos" />
+        </Tabs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/radius.ts b/apps/docs/content/components/tabs/radius.ts
index 75c39db1d7..7b78db1ce0 100644
--- a/apps/docs/content/components/tabs/radius.ts
+++ b/apps/docs/content/components/tabs/radius.ts
@@ -1,26 +1,4 @@
-const App = `import {Tabs, Tab} from "@nextui-org/react"; 
-
-export default function App() {
-  const radiusList = [
-    "full",
-    "lg",
-    "md",
-    "sm",
-    "none",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {radiusList.map((radius) => (
-        <Tabs key={radius} radius={radius} aria-label="Tabs radius">
-          <Tab key="photos" title="Photos"/>
-          <Tab key="music" title="Music"/>
-          <Tab key="videos" title="Videos"/>
-        </Tabs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/sizes.raw.jsx b/apps/docs/content/components/tabs/sizes.raw.jsx
new file mode 100644
index 0000000000..589d1a18a8
--- /dev/null
+++ b/apps/docs/content/components/tabs/sizes.raw.jsx
@@ -0,0 +1,17 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export default function App() {
+  const sizes = ["sm", "md", "lg"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {sizes.map((size) => (
+        <Tabs key={size} aria-label="Tabs sizes" size={size}>
+          <Tab key="photos" title="Photos" />
+          <Tab key="music" title="Music" />
+          <Tab key="videos" title="Videos" />
+        </Tabs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/sizes.ts b/apps/docs/content/components/tabs/sizes.ts
index 9e20158653..85a2f5b30b 100644
--- a/apps/docs/content/components/tabs/sizes.ts
+++ b/apps/docs/content/components/tabs/sizes.ts
@@ -1,24 +1,4 @@
-const App = `import {Tabs, Tab} from "@nextui-org/react";
-
-export default function App() {
-  const sizes = [
-    "sm",
-    "md",
-    "lg",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {sizes.map((size) => (
-        <Tabs key={size} size={size} aria-label="Tabs sizes">
-          <Tab key="photos" title="Photos"/>
-          <Tab key="music" title="Music"/>
-          <Tab key="videos" title="Videos"/>
-        </Tabs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/usage.raw.jsx b/apps/docs/content/components/tabs/usage.raw.jsx
new file mode 100644
index 0000000000..54c7a54cce
--- /dev/null
+++ b/apps/docs/content/components/tabs/usage.raw.jsx
@@ -0,0 +1,36 @@
+import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-col">
+      <Tabs aria-label="Options">
+        <Tab key="photos" title="Photos">
+          <Card>
+            <CardBody>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="music" title="Music">
+          <Card>
+            <CardBody>
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+              cillum dolore eu fugiat nulla pariatur.
+            </CardBody>
+          </Card>
+        </Tab>
+        <Tab key="videos" title="Videos">
+          <Card>
+            <CardBody>
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/usage.ts b/apps/docs/content/components/tabs/usage.ts
index 552e09828a..1118304c37 100644
--- a/apps/docs/content/components/tabs/usage.ts
+++ b/apps/docs/content/components/tabs/usage.ts
@@ -1,34 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-col">
-      <Tabs aria-label="Options">
-        <Tab key="photos" title="Photos">
-          <Card>
-            <CardBody>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="music" title="Music">
-          <Card>
-            <CardBody>
-              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-            </CardBody>
-          </Card>  
-        </Tab>
-        <Tab key="videos" title="Videos">
-          <Card>
-            <CardBody>
-              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </CardBody>
-          </Card>  
-        </Tab>
-      </Tabs>
-    </div>  
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/variants.raw.jsx b/apps/docs/content/components/tabs/variants.raw.jsx
new file mode 100644
index 0000000000..d63d01a387
--- /dev/null
+++ b/apps/docs/content/components/tabs/variants.raw.jsx
@@ -0,0 +1,17 @@
+import {Tabs, Tab} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["solid", "underlined", "bordered", "light"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {variants.map((variant) => (
+        <Tabs key={variant} aria-label="Tabs variants" variant={variant}>
+          <Tab key="photos" title="Photos" />
+          <Tab key="music" title="Music" />
+          <Tab key="videos" title="Videos" />
+        </Tabs>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/variants.ts b/apps/docs/content/components/tabs/variants.ts
index 53c80deb2b..ddea95fb2e 100644
--- a/apps/docs/content/components/tabs/variants.ts
+++ b/apps/docs/content/components/tabs/variants.ts
@@ -1,25 +1,4 @@
-const App = `import {Tabs, Tab} from "@nextui-org/react"; 
-
-export default function App() {
-  const variants = [
-    "solid",
-    "underlined",
-    "bordered",
-    "light",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {variants.map((variant) => (
-        <Tabs key={variant} variant={variant} aria-label="Tabs variants">
-          <Tab key="photos" title="Photos"/>
-          <Tab key="music" title="Music"/>
-          <Tab key="videos" title="Videos"/>
-        </Tabs>
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tabs/vertical.raw.jsx b/apps/docs/content/components/tabs/vertical.raw.jsx
new file mode 100644
index 0000000000..b1229a8965
--- /dev/null
+++ b/apps/docs/content/components/tabs/vertical.raw.jsx
@@ -0,0 +1,43 @@
+import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react";
+
+export default function App() {
+  const [isVertical, setIsVertical] = React.useState(true);
+
+  return (
+    <div className="flex flex-col px-4">
+      <Switch className="mb-4" isSelected={isVertical} onValueChange={setIsVertical}>
+        Vertical
+      </Switch>
+      <div className="flex w-full flex-col">
+        <Tabs aria-label="Options" isVertical={isVertical}>
+          <Tab key="photos" title="Photos">
+            <Card>
+              <CardBody>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+              </CardBody>
+            </Card>
+          </Tab>
+          <Tab key="music" title="Music">
+            <Card>
+              <CardBody>
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
+                esse cillum dolore eu fugiat nulla pariatur.
+              </CardBody>
+            </Card>
+          </Tab>
+          <Tab key="videos" title="Videos">
+            <Card>
+              <CardBody>
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+                mollit anim id est laborum.
+              </CardBody>
+            </Card>
+          </Tab>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tabs/vertical.ts b/apps/docs/content/components/tabs/vertical.ts
index 7487c22bb1..697ac10343 100644
--- a/apps/docs/content/components/tabs/vertical.ts
+++ b/apps/docs/content/components/tabs/vertical.ts
@@ -1,40 +1,4 @@
-const App = `import {Tabs, Tab, Card, CardBody, Switch} from "@nextui-org/react";
-
-export default function App() {
-  const [isVertical, setIsVertical] = React.useState(true);
-  return (
-    <div className="flex flex-col px-4">
-      <Switch className="mb-4" isSelected={isVertical} onValueChange={setIsVertical}>
-        Vertical
-      </Switch>
-      <div className="flex w-full flex-col">
-        <Tabs aria-label="Options" isVertical={isVertical}>
-          <Tab key="photos" title="Photos">
-            <Card>
-              <CardBody>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-              </CardBody>
-            </Card>  
-          </Tab>
-          <Tab key="music" title="Music">
-            <Card>
-              <CardBody>
-                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-              </CardBody>
-            </Card>  
-          </Tab>
-          <Tab key="videos" title="Videos">
-            <Card>
-              <CardBody>
-                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </CardBody>
-            </Card>  
-          </Tab>
-        </Tabs>
-      </div>
-    </div>
-  );
-}`;
+import App from "./vertical.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/autosize.raw.jsx b/apps/docs/content/components/textarea/autosize.raw.jsx
new file mode 100644
index 0000000000..0addb39d70
--- /dev/null
+++ b/apps/docs/content/components/textarea/autosize.raw.jsx
@@ -0,0 +1,11 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+      <Textarea label="Description" placeholder="Enter your description (Default autosize)" />
+      <Textarea label="Description" minRows={2} placeholder="Enter your description (Min rows 2)" />
+      <Textarea label="Description" maxRows={3} placeholder="Enter your description (Max rows 3)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/autosize.ts b/apps/docs/content/components/textarea/autosize.ts
index 55cb2402bd..b82782913b 100644
--- a/apps/docs/content/components/textarea/autosize.ts
+++ b/apps/docs/content/components/textarea/autosize.ts
@@ -1,25 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description (Default autosize)"
-      />
-      <Textarea
-        minRows={2}
-        label="Description"
-        placeholder="Enter your description (Min rows 2)"
-      />
-      <Textarea
-        maxRows={3}
-        label="Description"
-        placeholder="Enter your description (Max rows 3)"
-      />
-    </div>
-  );
-}`;
+import App from "./autosize.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/clear-button.raw.jsx b/apps/docs/content/components/textarea/clear-button.raw.jsx
new file mode 100644
index 0000000000..6b496d70ec
--- /dev/null
+++ b/apps/docs/content/components/textarea/clear-button.raw.jsx
@@ -0,0 +1,16 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isClearable
+      className="max-w-xs"
+      defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+      label="Description"
+      placeholder="Description"
+      variant="bordered"
+      // eslint-disable-next-line no-console
+      onClear={() => console.log("textarea cleared")}
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/clear-button.ts b/apps/docs/content/components/textarea/clear-button.ts
new file mode 100644
index 0000000000..f84fe2f74e
--- /dev/null
+++ b/apps/docs/content/components/textarea/clear-button.ts
@@ -0,0 +1,9 @@
+import App from "./clear-button.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/textarea/controlled.raw.jsx b/apps/docs/content/components/textarea/controlled.raw.jsx
new file mode 100644
index 0000000000..13dba52da4
--- /dev/null
+++ b/apps/docs/content/components/textarea/controlled.raw.jsx
@@ -0,0 +1,19 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="w-full flex flex-col gap-2 max-w-[240px]">
+      <Textarea
+        label="Description"
+        labelPlacement="outside"
+        placeholder="Enter your description"
+        value={value}
+        variant="underlined"
+        onValueChange={setValue}
+      />
+      <p className="text-default-500 text-small">Textarea value: {value}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/controlled.ts b/apps/docs/content/components/textarea/controlled.ts
index de68816041..2c3f0cacb4 100644
--- a/apps/docs/content/components/textarea/controlled.ts
+++ b/apps/docs/content/components/textarea/controlled.ts
@@ -1,22 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  const [value, setValue] = React.useState("");
-
-  return (
-    <div className="w-full flex flex-col gap-2 max-w-[240px]">
-      <Textarea
-        variant="underlined"
-        label="Description"
-        labelPlacement="outside"
-        placeholder="Enter your description"
-        value={value}
-        onValueChange={setValue}
-      />
-      <p className="text-default-500 text-small">Textarea value: {value}</p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/description.raw.jsx b/apps/docs/content/components/textarea/description.raw.jsx
new file mode 100644
index 0000000000..5db51b7747
--- /dev/null
+++ b/apps/docs/content/components/textarea/description.raw.jsx
@@ -0,0 +1,13 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      className="max-w-xs"
+      description="Enter a concise description of your project."
+      label="Description"
+      placeholder="Enter your description"
+      variant="faded"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/description.ts b/apps/docs/content/components/textarea/description.ts
index 2b37dda9e5..aeb6340b6b 100644
--- a/apps/docs/content/components/textarea/description.ts
+++ b/apps/docs/content/components/textarea/description.ts
@@ -1,16 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      variant="faded"
-      label="Description"
-      placeholder="Enter your description"
-      description="Enter a concise description of your project."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/disable-autosize.raw.jsx b/apps/docs/content/components/textarea/disable-autosize.raw.jsx
new file mode 100644
index 0000000000..78ddc14711
--- /dev/null
+++ b/apps/docs/content/components/textarea/disable-autosize.raw.jsx
@@ -0,0 +1,17 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      disableAnimation
+      disableAutosize
+      classNames={{
+        base: "max-w-xs",
+        input: "resize-y min-h-[40px]",
+      }}
+      label="Description"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/disable-autosize.ts b/apps/docs/content/components/textarea/disable-autosize.ts
index df63cc1165..5e50200f22 100644
--- a/apps/docs/content/components/textarea/disable-autosize.ts
+++ b/apps/docs/content/components/textarea/disable-autosize.ts
@@ -1,20 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      label="Description"
-      variant="bordered"
-      placeholder="Enter your description"
-      disableAnimation
-      disableAutosize
-      classNames={{
-        base: "max-w-xs",
-        input: "resize-y min-h-[40px]",
-      }}
-    />
-  );
-}`;
+import App from "./disable-autosize.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/disabled.raw.jsx b/apps/docs/content/components/textarea/disabled.raw.jsx
new file mode 100644
index 0000000000..832a627c1e
--- /dev/null
+++ b/apps/docs/content/components/textarea/disabled.raw.jsx
@@ -0,0 +1,14 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isDisabled
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/disabled.ts b/apps/docs/content/components/textarea/disabled.ts
index 182b7b5ef0..1a215cc91f 100644
--- a/apps/docs/content/components/textarea/disabled.ts
+++ b/apps/docs/content/components/textarea/disabled.ts
@@ -1,17 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isDisabled
-      label="Description"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/error-message.raw.jsx b/apps/docs/content/components/textarea/error-message.raw.jsx
new file mode 100644
index 0000000000..3a1c8f29bd
--- /dev/null
+++ b/apps/docs/content/components/textarea/error-message.raw.jsx
@@ -0,0 +1,15 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library with..."
+      errorMessage="The description should be at least 255 characters long."
+      isInvalid={true}
+      label="Description"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/error-message.ts b/apps/docs/content/components/textarea/error-message.ts
index 8a32c04ab9..fb8101b132 100644
--- a/apps/docs/content/components/textarea/error-message.ts
+++ b/apps/docs/content/components/textarea/error-message.ts
@@ -1,18 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isInvalid={true}
-      variant="bordered"
-      label="Description"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library with..."
-      errorMessage="The description should be at least 255 characters long."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/index.ts b/apps/docs/content/components/textarea/index.ts
index e08dc493a9..eb5d74cd19 100644
--- a/apps/docs/content/components/textarea/index.ts
+++ b/apps/docs/content/components/textarea/index.ts
@@ -8,6 +8,7 @@ import errorMessage from "./error-message";
 import description from "./description";
 import controlled from "./controlled";
 import disableAutosize from "./disable-autosize";
+import clearButton from "./clear-button";
 
 export const textareaContent = {
   usage,
@@ -20,4 +21,5 @@ export const textareaContent = {
   description,
   controlled,
   disableAutosize,
+  clearButton,
 };
diff --git a/apps/docs/content/components/textarea/readonly.raw.jsx b/apps/docs/content/components/textarea/readonly.raw.jsx
new file mode 100644
index 0000000000..eb2e4d947e
--- /dev/null
+++ b/apps/docs/content/components/textarea/readonly.raw.jsx
@@ -0,0 +1,15 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isReadOnly
+      className="max-w-xs"
+      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+      variant="bordered"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/readonly.ts b/apps/docs/content/components/textarea/readonly.ts
index 1d66b78874..fabd05ba36 100644
--- a/apps/docs/content/components/textarea/readonly.ts
+++ b/apps/docs/content/components/textarea/readonly.ts
@@ -1,18 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isReadOnly
-      label="Description"
-      variant="bordered"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      defaultValue="NextUI is a React UI library that provides a set of accessible, reusable, and beautiful components."
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./readonly.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/required.raw.jsx b/apps/docs/content/components/textarea/required.raw.jsx
new file mode 100644
index 0000000000..f07a31d38b
--- /dev/null
+++ b/apps/docs/content/components/textarea/required.raw.jsx
@@ -0,0 +1,13 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Textarea
+      isRequired
+      className="max-w-xs"
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter your description"
+    />
+  );
+}
diff --git a/apps/docs/content/components/textarea/required.ts b/apps/docs/content/components/textarea/required.ts
index 01126e7fef..b50b781e6f 100644
--- a/apps/docs/content/components/textarea/required.ts
+++ b/apps/docs/content/components/textarea/required.ts
@@ -1,16 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      isRequired
-      label="Description"
-      labelPlacement="outside"
-      placeholder="Enter your description"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/usage.raw.jsx b/apps/docs/content/components/textarea/usage.raw.jsx
new file mode 100644
index 0000000000..bb911f295b
--- /dev/null
+++ b/apps/docs/content/components/textarea/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  return <Textarea className="max-w-xs" label="Description" placeholder="Enter your description" />;
+}
diff --git a/apps/docs/content/components/textarea/usage.ts b/apps/docs/content/components/textarea/usage.ts
index 53720f0660..1118304c37 100644
--- a/apps/docs/content/components/textarea/usage.ts
+++ b/apps/docs/content/components/textarea/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Textarea
-      label="Description"
-      placeholder="Enter your description"
-      className="max-w-xs"
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/textarea/variants.raw.jsx b/apps/docs/content/components/textarea/variants.raw.jsx
new file mode 100644
index 0000000000..4128e5976a
--- /dev/null
+++ b/apps/docs/content/components/textarea/variants.raw.jsx
@@ -0,0 +1,20 @@
+import {Textarea} from "@nextui-org/react";
+
+export default function App() {
+  const variants = ["flat", "faded", "bordered", "underlined"];
+
+  return (
+    <div className="w-full grid grid-cols-12 gap-4">
+      {variants.map((variant) => (
+        <Textarea
+          key={variant}
+          className="col-span-12 md:col-span-6 mb-6 md:mb-0"
+          label="Description"
+          labelPlacement="outside"
+          placeholder="Enter your description"
+          variant={variant}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/textarea/variants.ts b/apps/docs/content/components/textarea/variants.ts
index d20e30b3fa..ddea95fb2e 100644
--- a/apps/docs/content/components/textarea/variants.ts
+++ b/apps/docs/content/components/textarea/variants.ts
@@ -1,23 +1,4 @@
-const App = `import {Textarea} from "@nextui-org/react";
-
-export default function App() {
-  const variants = ["flat", "faded", "bordered", "underlined"];
-
-  return (
-    <div className="w-full grid grid-cols-12 gap-4">
-      {variants.map((variant) => (
-        <Textarea
-          key={variant}
-          variant={variant}
-          label="Description"
-          labelPlacement="outside"
-          placeholder="Enter your description"
-          className="col-span-12 md:col-span-6 mb-6 md:mb-0"
-        />
-      ))}
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/controlled.raw.jsx b/apps/docs/content/components/time-input/controlled.raw.jsx
new file mode 100644
index 0000000000..a69bf472e2
--- /dev/null
+++ b/apps/docs/content/components/time-input/controlled.raw.jsx
@@ -0,0 +1,26 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/controlled.raw.tsx b/apps/docs/content/components/time-input/controlled.raw.tsx
new file mode 100644
index 0000000000..ebdaebaf7e
--- /dev/null
+++ b/apps/docs/content/components/time-input/controlled.raw.tsx
@@ -0,0 +1,31 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
+import {useDateFormatter} from "@react-aria/i18n";
+
+export default function App() {
+  let [value, setValue] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2024-04-08T18:45:22Z"),
+  );
+
+  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
+
+  return (
+    <div className="w-full flex flex-row gap-2">
+      <div className="w-full flex flex-col gap-y-2">
+        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
+        <p className="text-default-500 text-sm">
+          {value instanceof ZonedDateTime
+            ? (value.toDate && formatter.format(value.toDate())) ||
+              (value && value.toString()) ||
+              "--"
+            : ""}
+        </p>
+      </div>
+
+      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/controlled.ts b/apps/docs/content/components/time-input/controlled.ts
index edde086089..1f1a363363 100644
--- a/apps/docs/content/components/time-input/controlled.ts
+++ b/apps/docs/content/components/time-input/controlled.ts
@@ -1,63 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {parseAbsoluteToLocal, Time, ZonedDateTime} from "@internationalized/date";
-import {useDateFormatter} from "@react-aria/i18n";
-
-export default function App() {
-  let [value, setValue] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2024-04-08T18:45:22Z"));
-
-  let formatter = useDateFormatter({dateStyle: "short", timeStyle: "long"});
-
-  return (
-    <div className="w-full flex flex-row gap-2">
-      <div className="w-full flex flex-col gap-y-2">
-        <TimeInput label="Time (controlled)" value={value} onChange={setValue} />
-        <p className="text-default-500 text-sm">
-          {value instanceof ZonedDateTime
-            ? (value.toDate && formatter.format(value.toDate())) ||
-              (value && value.toString()) ||
-              "--"
-            : ""}
-        </p>
-      </div>
-
-      <TimeInput defaultValue={new Time(11, 45)} label="Time (uncontrolled)" />
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
+import AppTs from "./controlled.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/time-input/disabled.raw.jsx b/apps/docs/content/components/time-input/disabled.raw.jsx
new file mode 100644
index 0000000000..bc9f9a1af5
--- /dev/null
+++ b/apps/docs/content/components/time-input/disabled.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput isDisabled defaultValue={new Time(11, 45)} label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/disabled.ts b/apps/docs/content/components/time-input/disabled.ts
index c9b3cccae9..1a215cc91f 100644
--- a/apps/docs/content/components/time-input/disabled.ts
+++ b/apps/docs/content/components/time-input/disabled.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isDisabled 
-      label="Event Time" 
-      defaultValue={new Time(11, 45)} 
-    />
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/end-content.raw.jsx b/apps/docs/content/components/time-input/end-content.raw.jsx
new file mode 100644
index 0000000000..fca3665b63
--- /dev/null
+++ b/apps/docs/content/components/time-input/end-content.raw.jsx
@@ -0,0 +1,35 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export const ClockCircleLinearIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={new Time(11, 45)}
+      endContent={
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      }
+      label="Event Time"
+      labelPlacement="outside"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/end-content.ts b/apps/docs/content/components/time-input/end-content.ts
index a97f942a07..d9a1087e2b 100644
--- a/apps/docs/content/components/time-input/end-content.ts
+++ b/apps/docs/content/components/time-input/end-content.ts
@@ -1,41 +1,7 @@
-const ClockCircleLinearIcon = `export const ClockCircleLinearIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {TimeInput} from "@nextui-org/react";
-import {ClockCircleLinearIcon} from './ClockCircleLinearIcon';
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time" 
-      labelPlacement="outside" 
-      defaultValue={new Time(11, 45)} 
-      endContent={(
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-      )}
-    />
-  );
-}`;
+import App from "./end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ClockCircleLinearIcon.jsx": ClockCircleLinearIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/time-input/error-message-function.raw.jsx b/apps/docs/content/components/time-input/error-message-function.raw.jsx
new file mode 100644
index 0000000000..4c707d11f9
--- /dev/null
+++ b/apps/docs/content/components/time-input/error-message-function.raw.jsx
@@ -0,0 +1,15 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput
+      isInvalid
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter a valid time";
+        }
+      }}
+      label="Event Time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/error-message-function.ts b/apps/docs/content/components/time-input/error-message-function.ts
index b8111e5265..1af0006141 100644
--- a/apps/docs/content/components/time-input/error-message-function.ts
+++ b/apps/docs/content/components/time-input/error-message-function.ts
@@ -1,18 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage={(value) => {
-        if (value.isInvalid) {
-          return "Please enter a valid time";
-        }
-      }}
-    />
-  );
-}`;
+import App from "./error-message-function.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/error-message.raw.jsx b/apps/docs/content/components/time-input/error-message.raw.jsx
new file mode 100644
index 0000000000..e9637a0a04
--- /dev/null
+++ b/apps/docs/content/components/time-input/error-message.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput isInvalid errorMessage="Please enter a valid time" label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/error-message.ts b/apps/docs/content/components/time-input/error-message.ts
index 8d60a11647..fb8101b132 100644
--- a/apps/docs/content/components/time-input/error-message.ts
+++ b/apps/docs/content/components/time-input/error-message.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      isInvalid
-      errorMessage="Please enter a valid time"
-    />
-  );
-}`;
+import App from "./error-message.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/granularity.raw.jsx b/apps/docs/content/components/time-input/granularity.raw.jsx
new file mode 100644
index 0000000000..e1fa5ec73f
--- /dev/null
+++ b/apps/docs/content/components/time-input/granularity.raw.jsx
@@ -0,0 +1,14 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/granularity.raw.tsx b/apps/docs/content/components/time-input/granularity.raw.tsx
new file mode 100644
index 0000000000..963745608a
--- /dev/null
+++ b/apps/docs/content/components/time-input/granularity.raw.tsx
@@ -0,0 +1,19 @@
+import type {TimeInputValue} from "@nextui-org/react";
+
+import React from "react";
+import {TimeInput} from "@nextui-org/react";
+import {parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  let [date, setDate] = React.useState<TimeInputValue>(
+    parseAbsoluteToLocal("2021-04-07T18:45:22Z"),
+  );
+
+  return (
+    <div className="w-full max-w-xl flex flex-col items-start gap-4">
+      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
+      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
+      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/granularity.ts b/apps/docs/content/components/time-input/granularity.ts
index e7d333d1bb..6196832da6 100644
--- a/apps/docs/content/components/time-input/granularity.ts
+++ b/apps/docs/content/components/time-input/granularity.ts
@@ -1,39 +1,15 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </div>
-  );
-}`;
-
-const AppTs = `import {TimeInput} from "@nextui-org/react";
-import type {TimeValue} from "@react-types/datepicker";
-import {Time, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  let [date, setDate] = React.useState<TimeInputValue>(parseAbsoluteToLocal("2021-04-07T18:45:22Z"));
-
-  return (
-    <div className="w-full max-w-xl flex flex-col items-start gap-4">
-      <TimeInput granularity="hour" label="Hour" value={date} onChange={setDate} />
-      <TimeInput granularity="minute" label="Minute" value={date} onChange={setDate} />
-      <TimeInput granularity="second" label="Second" value={date} onChange={setDate} />
-    </div>
-  );
-}`;
+import App from "./granularity.raw.jsx?raw";
+import AppTs from "./granularity.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
+};
+
+const reactTs = {
   "/App.tsx": AppTs,
 };
 
 export default {
   ...react,
+  ...reactTs,
 };
diff --git a/apps/docs/content/components/time-input/hide-timezone.raw.jsx b/apps/docs/content/components/time-input/hide-timezone.raw.jsx
new file mode 100644
index 0000000000..3539b9d74e
--- /dev/null
+++ b/apps/docs/content/components/time-input/hide-timezone.raw.jsx
@@ -0,0 +1,12 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <TimeInput
+      hideTimeZone
+      defaultValue={parseZonedDateTime("2022-11-07T10:45[America/Los_Angeles]")}
+      label="Meeting time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/hide-timezone.ts b/apps/docs/content/components/time-input/hide-timezone.ts
index 3f40c75747..225f731355 100644
--- a/apps/docs/content/components/time-input/hide-timezone.ts
+++ b/apps/docs/content/components/time-input/hide-timezone.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      hideTimeZone 
-      defaultValue={parseZonedDateTime("2022-11-07T10:45[America/Los_Angeles]")} 
-    />
-  );
-}`;
+import App from "./hide-timezone.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/hour-cycle.raw.jsx b/apps/docs/content/components/time-input/hour-cycle.raw.jsx
new file mode 100644
index 0000000000..16d4bb4ca0
--- /dev/null
+++ b/apps/docs/content/components/time-input/hour-cycle.raw.jsx
@@ -0,0 +1,13 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+      granularity="minute"
+      hourCycle={24}
+      label="Meeting time"
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/hour-cycle.ts b/apps/docs/content/components/time-input/hour-cycle.ts
index 2eb449f7cc..67ba87ab26 100644
--- a/apps/docs/content/components/time-input/hour-cycle.ts
+++ b/apps/docs/content/components/time-input/hour-cycle.ts
@@ -1,16 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      hourCycle={24}
-      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      granularity="minute" 
-    />
-  );
-}`;
+import App from "./hour-cycle.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/label-placement.raw.jsx b/apps/docs/content/components/time-input/label-placement.raw.jsx
new file mode 100644
index 0000000000..3df0a5f3c7
--- /dev/null
+++ b/apps/docs/content/components/time-input/label-placement.raw.jsx
@@ -0,0 +1,27 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-end gap-4">
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="inside"
+        label="Event Time"
+        labelPlacement="inside"
+      />
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="outside"
+        label="Event Time"
+        labelPlacement="outside"
+      />
+      <TimeInput
+        defaultValue={new Time(11, 45)}
+        description="outside-left"
+        label="Event Time"
+        labelPlacement="outside-left"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/label-placement.ts b/apps/docs/content/components/time-input/label-placement.ts
index d76a98f8e9..ef98ce0f52 100644
--- a/apps/docs/content/components/time-input/label-placement.ts
+++ b/apps/docs/content/components/time-input/label-placement.ts
@@ -1,30 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-end gap-4">
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="inside" 
-        defaultValue={new Time(11, 45)} 
-        description="inside" 
-      />
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="outside" 
-        defaultValue={new Time(11, 45)} 
-        description="outside" 
-      />
-      <TimeInput 
-        label="Event Time" 
-        labelPlacement="outside-left" 
-        defaultValue={new Time(11, 45)} 
-        description="outside-left" 
-      />
-    </div>
-  );
-}`;
+import App from "./label-placement.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/max-time-value.raw.jsx b/apps/docs/content/components/time-input/max-time-value.raw.jsx
new file mode 100644
index 0000000000..044979b4a1
--- /dev/null
+++ b/apps/docs/content/components/time-input/max-time-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(18)} maxValue={new Time(17)} />;
+}
diff --git a/apps/docs/content/components/time-input/max-time-value.ts b/apps/docs/content/components/time-input/max-time-value.ts
index 711a1d7268..cdef4055ac 100644
--- a/apps/docs/content/components/time-input/max-time-value.ts
+++ b/apps/docs/content/components/time-input/max-time-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      defaultValue={new Time(18)}
-      maxValue={new Time(17)}
-    />
-  );
-}`;
+import App from "./max-time-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/min-time-value.raw.jsx b/apps/docs/content/components/time-input/min-time-value.raw.jsx
new file mode 100644
index 0000000000..e60b5e8366
--- /dev/null
+++ b/apps/docs/content/components/time-input/min-time-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(8)} minValue={new Time(9)} />;
+}
diff --git a/apps/docs/content/components/time-input/min-time-value.ts b/apps/docs/content/components/time-input/min-time-value.ts
index be780a3fbf..1671f69992 100644
--- a/apps/docs/content/components/time-input/min-time-value.ts
+++ b/apps/docs/content/components/time-input/min-time-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      defaultValue={new Time(8)}
-      minValue={new Time(9)}
-    />
-  );
-}`;
+import App from "./min-time-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/placeholder-value.raw.jsx b/apps/docs/content/components/time-input/placeholder-value.raw.jsx
new file mode 100644
index 0000000000..49f5a6e491
--- /dev/null
+++ b/apps/docs/content/components/time-input/placeholder-value.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput label="Meeting time" placeholderValue={new Time(9)} />;
+}
diff --git a/apps/docs/content/components/time-input/placeholder-value.ts b/apps/docs/content/components/time-input/placeholder-value.ts
index 7f329f9470..d9398c975b 100644
--- a/apps/docs/content/components/time-input/placeholder-value.ts
+++ b/apps/docs/content/components/time-input/placeholder-value.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Meeting time"
-      placeholderValue={new Time(9)}
-    />
-  );
-}`;
+import App from "./placeholder-value.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/read-only.raw.jsx b/apps/docs/content/components/time-input/read-only.raw.jsx
new file mode 100644
index 0000000000..d07fef7d71
--- /dev/null
+++ b/apps/docs/content/components/time-input/read-only.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput isReadOnly defaultValue={new Time(11, 45)} label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/read-only.ts b/apps/docs/content/components/time-input/read-only.ts
index 15d54d38fb..caf4be10cf 100644
--- a/apps/docs/content/components/time-input/read-only.ts
+++ b/apps/docs/content/components/time-input/read-only.ts
@@ -1,15 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isReadOnly 
-      label="Event Time" 
-      defaultValue={new Time(11, 45)} 
-    />
-  );
-}`;
+import App from "./read-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/required.raw.jsx b/apps/docs/content/components/time-input/required.raw.jsx
new file mode 100644
index 0000000000..b98dedca29
--- /dev/null
+++ b/apps/docs/content/components/time-input/required.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput isRequired label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/required.ts b/apps/docs/content/components/time-input/required.ts
index 33a1e7e0ac..b50b781e6f 100644
--- a/apps/docs/content/components/time-input/required.ts
+++ b/apps/docs/content/components/time-input/required.ts
@@ -1,13 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      isRequired 
-      label="Event Time" 
-    />
-  );
-}`;
+import App from "./required.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/start-content.raw.jsx b/apps/docs/content/components/time-input/start-content.raw.jsx
new file mode 100644
index 0000000000..6f5dcd18cb
--- /dev/null
+++ b/apps/docs/content/components/time-input/start-content.raw.jsx
@@ -0,0 +1,35 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export const ClockCircleLinearIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <TimeInput
+      defaultValue={new Time(11, 45)}
+      label="Event Time"
+      labelPlacement="outside"
+      startContent={
+        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
+      }
+    />
+  );
+}
diff --git a/apps/docs/content/components/time-input/start-content.ts b/apps/docs/content/components/time-input/start-content.ts
index bf5c488177..59191d72a7 100644
--- a/apps/docs/content/components/time-input/start-content.ts
+++ b/apps/docs/content/components/time-input/start-content.ts
@@ -1,41 +1,7 @@
-const ClockCircleLinearIcon = `export const ClockCircleLinearIcon = (props) => (
-  <svg
-    aria-hidden="true"
-    fill="none"
-    focusable="false"
-    height="1em"
-    role="presentation"
-    viewBox="0 0 24 24"
-    width="1em"
-    {...props}
-  >
-    <g fill="none" stroke="currentColor" strokeWidth="1.5">
-      <circle cx="12" cy="12" r="10" />
-      <path d="M12 8v4l2.5 2.5" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-  </svg>
-);`;
-
-const App = `import {TimeInput} from "@nextui-org/react";
-import {ClockCircleLinearIcon} from './ClockCircleLinearIcon';
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time" 
-      labelPlacement="outside" 
-      defaultValue={new Time(11, 45)} 
-      startContent={(
-        <ClockCircleLinearIcon className="text-xl text-default-400 pointer-events-none flex-shrink-0" />
-      )}
-    />
-  );
-}`;
+import App from "./start-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ClockCircleLinearIcon.jsx": ClockCircleLinearIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/time-input/timezones.raw.jsx b/apps/docs/content/components/time-input/timezones.raw.jsx
new file mode 100644
index 0000000000..17b22a81be
--- /dev/null
+++ b/apps/docs/content/components/time-input/timezones.raw.jsx
@@ -0,0 +1,17 @@
+import {TimeInput} from "@nextui-org/react";
+import {parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="w-full max-w-xl flex flex-col items-end gap-4">
+      <TimeInput
+        defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
+        labelPlacement="outside"
+      />
+      <TimeInput
+        defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
+        labelPlacement="outside"
+      />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/timezones.ts b/apps/docs/content/components/time-input/timezones.ts
index 7faa8d00c7..d13be3f87a 100644
--- a/apps/docs/content/components/time-input/timezones.ts
+++ b/apps/docs/content/components/time-input/timezones.ts
@@ -1,20 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time, parseZonedDateTime, parseAbsoluteToLocal} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="w-full max-w-xl flex flex-col items-end gap-4">
-    <TimeInput
-      defaultValue={parseZonedDateTime("2022-11-07T00:45[America/Los_Angeles]")}
-      labelPlacement="outside"
-    />
-    <TimeInput
-      defaultValue={parseAbsoluteToLocal("2021-11-07T07:45:00Z")}
-      labelPlacement="outside"
-    />
-  </div>
-  );
-}`;
+import App from "./timezones.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/usage.raw.jsx b/apps/docs/content/components/time-input/usage.raw.jsx
new file mode 100644
index 0000000000..62d5a1d9bc
--- /dev/null
+++ b/apps/docs/content/components/time-input/usage.raw.jsx
@@ -0,0 +1,11 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <TimeInput label="Event Time" />
+      <TimeInput defaultValue={new Time(11, 45)} label="Event Time" />
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/time-input/usage.ts b/apps/docs/content/components/time-input/usage.ts
index 4953e39fde..1118304c37 100644
--- a/apps/docs/content/components/time-input/usage.ts
+++ b/apps/docs/content/components/time-input/usage.ts
@@ -1,14 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <TimeInput label="Event Time" />
-      <TimeInput label="Event Time" defaultValue={new Time(11, 45)} />
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/with-description.raw.jsx b/apps/docs/content/components/time-input/with-description.raw.jsx
new file mode 100644
index 0000000000..7c086bdda5
--- /dev/null
+++ b/apps/docs/content/components/time-input/with-description.raw.jsx
@@ -0,0 +1,5 @@
+import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return <TimeInput description="Please enter your meeting time" label="Event Time" />;
+}
diff --git a/apps/docs/content/components/time-input/with-description.ts b/apps/docs/content/components/time-input/with-description.ts
index faf8b757aa..d42b2150ff 100644
--- a/apps/docs/content/components/time-input/with-description.ts
+++ b/apps/docs/content/components/time-input/with-description.ts
@@ -1,13 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <TimeInput 
-      label="Event Time"
-      description="Please enter your meeting time" 
-    />
-  );
-}`;
+import App from "./with-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/time-input/without-label.raw.jsx b/apps/docs/content/components/time-input/without-label.raw.jsx
new file mode 100644
index 0000000000..94f1a44d9e
--- /dev/null
+++ b/apps/docs/content/components/time-input/without-label.raw.jsx
@@ -0,0 +1,6 @@
+import {TimeInput} from "@nextui-org/react";
+import {Time} from "@internationalized/date";
+
+export default function App() {
+  return <TimeInput defaultValue={new Time(11, 45)} label={null} />;
+}
diff --git a/apps/docs/content/components/time-input/without-label.ts b/apps/docs/content/components/time-input/without-label.ts
index 88f073e25e..f6109b3984 100644
--- a/apps/docs/content/components/time-input/without-label.ts
+++ b/apps/docs/content/components/time-input/without-label.ts
@@ -1,11 +1,4 @@
-const App = `import {TimeInput} from "@nextui-org/react";
-import {Time} from "@internationalized/date";
-
-export default function App() {
-  return (
-    <TimeInput label={null} defaultValue={new Time(11, 45)} />
-  );
-}`;
+import App from "./without-label.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/arrow.raw.jsx b/apps/docs/content/components/tooltip/arrow.raw.jsx
new file mode 100644
index 0000000000..f1b195d705
--- /dev/null
+++ b/apps/docs/content/components/tooltip/arrow.raw.jsx
@@ -0,0 +1,9 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip content="I am a tooltip" showArrow={true}>
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/arrow.ts b/apps/docs/content/components/tooltip/arrow.ts
index d7afa75e90..d04dbb0e9d 100644
--- a/apps/docs/content/components/tooltip/arrow.ts
+++ b/apps/docs/content/components/tooltip/arrow.ts
@@ -1,12 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip showArrow={true} content="I am a tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./arrow.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/colors.raw.jsx b/apps/docs/content/components/tooltip/colors.raw.jsx
new file mode 100644
index 0000000000..37cbf76f7c
--- /dev/null
+++ b/apps/docs/content/components/tooltip/colors.raw.jsx
@@ -0,0 +1,19 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger", "foreground"];
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {colors.map((color) => {
+        return (
+          <Tooltip key={color} className="capitalize" color={color} content={color}>
+            <Button className="capitalize" color={color} variant="flat">
+              {color}
+            </Button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/colors.ts b/apps/docs/content/components/tooltip/colors.ts
index bbdb3a5d4a..d5bef810aa 100644
--- a/apps/docs/content/components/tooltip/colors.ts
+++ b/apps/docs/content/components/tooltip/colors.ts
@@ -1,30 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const colors = [
-    "default",
-    "primary",
-    "secondary",
-    "success",
-    "warning",
-    "danger",
-    "foreground",
-  ];
-
-  return (
-    <div className="flex flex-wrap gap-4">
-      {colors.map((color) => {
-        return (
-          <Tooltip key={color} color={color} content={color} className="capitalize">
-            <Button variant="flat" color={color} className="capitalize">
-              {color}
-            </Button>
-          </Tooltip>
-        )
-      })}
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/controlled.raw.jsx b/apps/docs/content/components/tooltip/controlled.raw.jsx
new file mode 100644
index 0000000000..ea799c2c5e
--- /dev/null
+++ b/apps/docs/content/components/tooltip/controlled.raw.jsx
@@ -0,0 +1,14 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Tooltip content="I am a tooltip" isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+        <Button>Hover me</Button>
+      </Tooltip>
+      <p className="text-small text-default-500">Open: {isOpen ? "true" : "false"}</p>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/controlled.ts b/apps/docs/content/components/tooltip/controlled.ts
index 4895d8a455..2c3f0cacb4 100644
--- a/apps/docs/content/components/tooltip/controlled.ts
+++ b/apps/docs/content/components/tooltip/controlled.ts
@@ -1,23 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  return (
-    <div className="flex flex-col gap-2">
-      <Tooltip
-        isOpen={isOpen}
-        onOpenChange={(open) => setIsOpen(open)}
-        content="I am a tooltip"
-      >
-        <Button>Hover me</Button>
-      </Tooltip>
-      <p className="text-small text-default-500">
-        Open: {isOpen ? "true" : "false"}
-      </p>
-    </div>
-  );
-}`;
+import App from "./controlled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-content.raw.jsx b/apps/docs/content/components/tooltip/custom-content.raw.jsx
new file mode 100644
index 0000000000..0108f8e58f
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-content.raw.jsx
@@ -0,0 +1,16 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      content={
+        <div className="px-1 py-2">
+          <div className="text-small font-bold">Custom Content</div>
+          <div className="text-tiny">This is a custom tooltip content</div>
+        </div>
+      }
+    >
+      <Button variant="bordered">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-content.ts b/apps/docs/content/components/tooltip/custom-content.ts
index a8f62d64c0..6860587a71 100644
--- a/apps/docs/content/components/tooltip/custom-content.ts
+++ b/apps/docs/content/components/tooltip/custom-content.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip
-      content={
-        <div className="px-1 py-2">
-          <div className="text-small font-bold">Custom Content</div>
-          <div className="text-tiny">This is a custom tooltip content</div>
-        </div>
-      }
-    >
-      <Button variant="bordered">
-        Hover me
-      </Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-motion.raw.jsx b/apps/docs/content/components/tooltip/custom-motion.raw.jsx
new file mode 100644
index 0000000000..475cff9379
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-motion.raw.jsx
@@ -0,0 +1,31 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      closeDelay={0}
+      content="I am a tooltip"
+      delay={0}
+      motionProps={{
+        variants: {
+          exit: {
+            opacity: 0,
+            transition: {
+              duration: 0.1,
+              ease: "easeIn",
+            },
+          },
+          enter: {
+            opacity: 1,
+            transition: {
+              duration: 0.15,
+              ease: "easeOut",
+            },
+          },
+        },
+      }}
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-motion.ts b/apps/docs/content/components/tooltip/custom-motion.ts
index dd7ec56f39..389f462ddd 100644
--- a/apps/docs/content/components/tooltip/custom-motion.ts
+++ b/apps/docs/content/components/tooltip/custom-motion.ts
@@ -1,34 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      content="I am a tooltip"
-      delay={0}
-      closeDelay={0}
-      motionProps={{
-        variants: {
-          exit: {
-            opacity: 0,
-            transition: {
-              duration: 0.1,
-              ease: "easeIn",
-            }
-          },
-          enter: {
-            opacity: 1,
-            transition: {
-              duration: 0.15,
-              ease: "easeOut",
-            }
-          },
-        },
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-motion.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/custom-styles.raw.jsx b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
new file mode 100644
index 0000000000..96dbff1c1b
--- /dev/null
+++ b/apps/docs/content/components/tooltip/custom-styles.raw.jsx
@@ -0,0 +1,20 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip
+      showArrow
+      classNames={{
+        base: [
+          // arrow color
+          "before:bg-neutral-400 dark:before:bg-white",
+        ],
+        content: ["py-2 px-4 shadow-xl", "text-black bg-gradient-to-br from-white to-neutral-400"],
+      }}
+      content="I am a tooltip"
+      placement="right"
+    >
+      <Button variant="flat">Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/custom-styles.ts b/apps/docs/content/components/tooltip/custom-styles.ts
index d72ba52213..da3ea9093a 100644
--- a/apps/docs/content/components/tooltip/custom-styles.ts
+++ b/apps/docs/content/components/tooltip/custom-styles.ts
@@ -1,26 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip 
-      showArrow
-      placement="right"
-      content="I am a tooltip"
-      classNames={{
-        base: [
-          // arrow color
-          "before:bg-neutral-400 dark:before:bg-white",
-        ],
-        content: [
-          "py-2 px-4 shadow-xl",
-          "text-black bg-gradient-to-br from-white to-neutral-400",
-        ],
-      }}
-    >
-      <Button variant="flat">Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/delay-multiple.raw.jsx b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx
new file mode 100644
index 0000000000..c9acae2b11
--- /dev/null
+++ b/apps/docs/content/components/tooltip/delay-multiple.raw.jsx
@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
+        <Button color="primary" variant="flat">
+          Hover me (delay 1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip color="primary" content="Tooltip 2">
+        <Button color="primary" variant="flat">
+          Then hover me
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/delay-multiple.ts b/apps/docs/content/components/tooltip/delay-multiple.ts
index 71336f2312..c9f4aabd4d 100644
--- a/apps/docs/content/components/tooltip/delay-multiple.ts
+++ b/apps/docs/content/components/tooltip/delay-multiple.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="primary" content="Tooltip 1" delay={1000}>
-        <Button color="primary" variant="flat">
-          Hover me (delay 1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="primary" content="Tooltip 2">
-        <Button color="primary" variant="flat">
-          Then hover me
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay-multiple.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/delay.raw.jsx b/apps/docs/content/components/tooltip/delay.raw.jsx
new file mode 100644
index 0000000000..86a3124e73
--- /dev/null
+++ b/apps/docs/content/components/tooltip/delay.raw.jsx
@@ -0,0 +1,18 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
+        <Button color="warning" variant="flat">
+          Delay Open (1000ms)
+        </Button>
+      </Tooltip>
+      <Tooltip closeDelay={2000} color="warning" content="Tooltip 2">
+        <Button color="warning" variant="flat">
+          Delay Close (2000ms)
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/delay.ts b/apps/docs/content/components/tooltip/delay.ts
index 2dec1051a3..29e870bcca 100644
--- a/apps/docs/content/components/tooltip/delay.ts
+++ b/apps/docs/content/components/tooltip/delay.ts
@@ -1,21 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip color="warning" content="Tooltip 1" delay={1000}>
-        <Button color="warning" variant="flat">
-          Delay Open (1000ms)
-        </Button>
-      </Tooltip>
-      <Tooltip color="warning" closeDelay={2000} content="Tooltip 2">
-        <Button color="warning" variant="flat">
-          Delay Close (2000ms)
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./delay.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/offset.raw.jsx b/apps/docs/content/components/tooltip/offset.raw.jsx
new file mode 100644
index 0000000000..96e38fa36a
--- /dev/null
+++ b/apps/docs/content/components/tooltip/offset.raw.jsx
@@ -0,0 +1,23 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-2">
+      <Tooltip color="success" content="Tooltip 1">
+        <Button color="success" variant="faded">
+          Default offset (7)
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 2" offset={15}>
+        <Button color="success" variant="faded">
+          15 offset
+        </Button>
+      </Tooltip>
+      <Tooltip color="success" content="Tooltip 3" offset={-7}>
+        <Button color="success" variant="faded">
+          -7 offset
+        </Button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/offset.ts b/apps/docs/content/components/tooltip/offset.ts
index d3669f7017..2fb601047c 100644
--- a/apps/docs/content/components/tooltip/offset.ts
+++ b/apps/docs/content/components/tooltip/offset.ts
@@ -1,26 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-2">
-      <Tooltip content="Tooltip 1" color="success">
-        <Button color="success" variant="faded">
-          Default offset (7)
-        </Button>
-      </Tooltip>
-      <Tooltip content="Tooltip 2" color="success" offset={15}>
-        <Button color="success" variant="faded">
-          15 offset
-        </Button>
-      </Tooltip>
-      <Tooltip content="Tooltip 3" color="success" offset={-7}>
-        <Button color="success" variant="faded">
-          -7 offset
-        </Button>
-      </Tooltip>
-    </div>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/placements.raw.jsx b/apps/docs/content/components/tooltip/placements.raw.jsx
new file mode 100644
index 0000000000..edfebd1494
--- /dev/null
+++ b/apps/docs/content/components/tooltip/placements.raw.jsx
@@ -0,0 +1,30 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  const placements = [
+    "top-start",
+    "top",
+    "top-end",
+    "bottom-start",
+    "bottom",
+    "bottom-end",
+    "left-start",
+    "left",
+    "left-end",
+    "right-start",
+    "right",
+    "right-end",
+  ];
+
+  return (
+    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
+      {placements.map((placement) => (
+        <Tooltip key={placement} color="secondary" content={placement} placement={placement}>
+          <Button className="capitalize" color="secondary" variant="flat">
+            {placement}
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/placements.ts b/apps/docs/content/components/tooltip/placements.ts
index cf304818c2..dc67908b7e 100644
--- a/apps/docs/content/components/tooltip/placements.ts
+++ b/apps/docs/content/components/tooltip/placements.ts
@@ -1,38 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  const placements = [
-    "top-start",
-    "top",
-    "top-end",
-    "bottom-start",
-    "bottom",
-    "bottom-end",
-    "left-start",
-    "left",
-    "left-end",
-    "right-start",
-    "right",
-    "right-end",
-  ];
-
-  return (
-    <div className="flex flex-wrap md:inline-grid md:grid-cols-3 gap-4">
-      {placements.map((placement) => (
-        <Tooltip
-          key={placement}
-          placement={placement}
-          content={placement}
-          color="secondary"
-        >
-          <Button variant="flat" color="secondary" className="capitalize">
-            {placement}
-          </Button>
-        </Tooltip>
-      ))}
-    </div>
-  );
-}`;
+import App from "./placements.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/tooltip/usage.raw.jsx b/apps/docs/content/components/tooltip/usage.raw.jsx
new file mode 100644
index 0000000000..eeb11415d2
--- /dev/null
+++ b/apps/docs/content/components/tooltip/usage.raw.jsx
@@ -0,0 +1,9 @@
+import {Tooltip, Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Tooltip content="I am a tooltip">
+      <Button>Hover me</Button>
+    </Tooltip>
+  );
+}
diff --git a/apps/docs/content/components/tooltip/usage.ts b/apps/docs/content/components/tooltip/usage.ts
index e438e386b9..1118304c37 100644
--- a/apps/docs/content/components/tooltip/usage.ts
+++ b/apps/docs/content/components/tooltip/usage.ts
@@ -1,12 +1,4 @@
-const App = `import {Tooltip, Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Tooltip content="I am a tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/user/link-description.raw.jsx b/apps/docs/content/components/user/link-description.raw.jsx
new file mode 100644
index 0000000000..b0a3d2534f
--- /dev/null
+++ b/apps/docs/content/components/user/link-description.raw.jsx
@@ -0,0 +1,17 @@
+import {User, Link} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <User
+      avatarProps={{
+        src: "https://avatars.githubusercontent.com/u/30373425?v=4",
+      }}
+      description={
+        <Link isExternal href="https://x.com/jrgarciadev" size="sm">
+          @jrgarciadev
+        </Link>
+      }
+      name="Junior Garcia"
+    />
+  );
+}
diff --git a/apps/docs/content/components/user/link-description.ts b/apps/docs/content/components/user/link-description.ts
index 7eb0cd1ce9..5122872e10 100644
--- a/apps/docs/content/components/user/link-description.ts
+++ b/apps/docs/content/components/user/link-description.ts
@@ -1,20 +1,4 @@
-const App = `import {User, Link} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <User   
-      name="Junior Garcia"
-      description={(
-        <Link href="https://twitter.com/jrgarciadev" size="sm" isExternal>
-          @jrgarciadev
-        </Link>
-      )}
-      avatarProps={{
-        src: "https://avatars.githubusercontent.com/u/30373425?v=4"
-      }}
-    />
-  );
-}`;
+import App from "./link-description.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/user/usage.raw.jsx b/apps/docs/content/components/user/usage.raw.jsx
new file mode 100644
index 0000000000..ef7f9a95e0
--- /dev/null
+++ b/apps/docs/content/components/user/usage.raw.jsx
@@ -0,0 +1,13 @@
+import {User} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <User
+      avatarProps={{
+        src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
+      }}
+      description="Product Designer"
+      name="Jane Doe"
+    />
+  );
+}
diff --git a/apps/docs/content/components/user/usage.ts b/apps/docs/content/components/user/usage.ts
index 66678b78fc..1118304c37 100644
--- a/apps/docs/content/components/user/usage.ts
+++ b/apps/docs/content/components/user/usage.ts
@@ -1,16 +1,4 @@
-const App = `import {User} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <User   
-      name="Jane Doe"
-      description="Product Designer"
-      avatarProps={{
-        src: "https://i.pravatar.cc/150?u=a04258114e29026702d"
-      }}
-    />
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/docs/api-references/cli-api.mdx b/apps/docs/content/docs/api-references/cli-api.mdx
index fb7a443ba0..b42334e461 100644
--- a/apps/docs/content/docs/api-references/cli-api.mdx
+++ b/apps/docs/content/docs/api-references/cli-api.mdx
@@ -27,36 +27,41 @@ A command line tool for seamless integration with NextUI
 Usage: nextui [command]
 
 Options:
-  -v, --version  Show the version number
-  --no-cache     Disable cache, by default data will be cached for 30m after the first request
-  -h, --help     Display help for commands
+  -v, --version                      Output the current version
+  --no-cache                         Disable cache, by default data will be cached for 30m after the first request
+  -d, --debug                        Debug mode will not install dependencies
+  -h --help                          Display help information for commands
 
 Commands:
-  init [options] [projectName]       Start a new NextUI project
-  add [options] [components...]      Add NextUI components to your project
-  upgrade [options] [components...]  Update NextUI components to the latest versions
-  remove [options] [components...]   Remove NextUI components from your project
-  list [options]                     Show details of installed components
-  env [options]                      Display debug information about the local environment
-  doctor [options]                   Diagnose problems in your project
-  help [command]                     Get help on a specific command
+  init [options] [projectName]       Initializes a new project
+  add [options] [components...]      Adds components to your project
+  upgrade [options] [components...]  Upgrades project components to the latest versions
+  remove [options] [components...]   Removes components from the project
+  list [options]                     Lists all components, showing status, descriptions, and versions
+  env [options]                      Displays debugging information for the local environment
+  doctor [options]                   Checks for issues in the project
+  help [command]                     Display help for command
 ```
 
-## init
+## Commands
 
-To start a new project, use the init command:
+### Init
+
+Initialize a new NextUI project with official templates.
 
 ```codeBlock bash
 nextui init [projectName] [options]
 ```
-### Options
 
-- `-t --template [string]` The template to use for the new project e.g. app, pages
+#### Init Options
+
+- `-t --template [string]` The template to use for the new project e.g. app, pages, vite
 - `-p --package [string]` The package manager to use for the new project (default: `npm`)
 
-### Example
+##### Example
 
 ```codeBlock bash
+# Initialize a new NextUI project with the app template, named my-nextui-app
 nextui init my-nextui-app -t app
 ```
 
@@ -93,28 +98,31 @@ NextUI CLI v0.2.1
 └  🚀 Get started with npm run dev
 ```
 
-## add
+### Add
+
+Add NextUI components to your project.
+
+#### Features
 
 > 1. Auto add the missing required `dependencies` to your project
 > 2. Auto add the required `tailwindcss.config.js` configuration to your project
 > 3. Detect whether using pnpm, if so, add the required configuration to your `.npmrc` file
 
-To add components to your project, use the add command:
-
 ```codeBlock bash
 nextui add [components...] [options]
 ```
 
-### Options
+#### Add Options
 
 - `-a --all` [boolean] Add all the NextUI components (default: `false`)
 - `-p --packagePath` [string] The path to the package.json file
 - `-tw --tailwindPath` [string] The path to the tailwind.config file file
 - `-app --appPath` [string] The path to the App.tsx file
-- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: false)
+- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: `false`)
 - `--addApp` [boolean] Add App.tsx file content which required provider (default: `false`)
+- `-b --beta` [boolean] Add beta components (default: `false`)
 
-### Example
+##### Example
 
 Without setting a specific component, the `add` command will show a list of available components.
 
@@ -127,31 +135,36 @@ Output:
 ```codeBlock bash
 NextUI CLI v0.2.1
 
-? Which components would you like to add? › - Space to select. Return to submit 
+? Which components would you like to add? › - Space to select. Return to submit
+Instructions:
+    ↑/↓: Highlight option
+    ←/→/[space]: Toggle selection
+    [a,b,c]/delete: Filter choices
+    enter/return: Complete answer
 
 Filtered results for: Enter something to filter
 
-◯   accordion
-◯   autocomplete
-◯   avatar
-◯   badge
-◯   breadcrumbs
-◯   button
-◯   calendar
-◯   card
-◯   checkbox
-◯ ↓ chip
+◉  accordion
+◯  autocomplete
+◯  avatar
+◯  badge
+◯  breadcrumbs
+◯  button
+◯  card
+◯  checkbox
+◯  chip
+◯  code
 ```
 
 If you want to add a specific component, you can specify the component name.
 
 ```codeBlock bash
-nextui add button input
+nextui add button
 ```
 
 Output:
 
-```bash
+```codeBlock bash
 NextUI CLI v0.2.1
 
 Adding the required dependencies: @nextui-org/button
@@ -171,7 +184,7 @@ Tailwind CSS settings have been updated in: /project-path/tailwind.config.js
 ✅ Components added successfully
 ```
 
-## upgrade
+### Upgrade
 
 Upgrade the NextUI components to the latest version.
 
@@ -179,13 +192,17 @@ Upgrade the NextUI components to the latest version.
 nextui upgrade [components...] [options]
 ```
 
-### Options
+#### Upgrade Options
+
+- `-p --packagePath` [string] The path to the package.json file
+- `-a --all` [boolean] Upgrade all the NextUI components (default: `false`)
+- `-w --write` [boolean] Write the upgrade version to package.json file (default: `false`)
+- `-b --beta` [boolean] Upgrade beta components (default: `false`)
+- `-h --help` Display help for command
 
-- `-p --packagePath` [string] The path to the package.json file.
-- `-a --all` [boolean] Upgrade all the NextUI components (default: `false`).
-- `-h, --help` Display help for commands.
+##### Example
 
-### Example
+Upgrade the **Button** component to the latest version.
 
 ```codeBlock bash
 nextui upgrade button
@@ -193,51 +210,59 @@ nextui upgrade button
 
 Output:
 
-```bash
+```codeBlock bash
 NextUI CLI v0.2.1
 
 ╭───────────────────────── Component ─────────────────────────╮
 │  @nextui-org/button              ^2.0.11  ->  ^2.0.31       │
 ╰─────────────────────────────────────────────────────────────╯
 
-Required min version: @nextui-org/theme>=2.1.0, tailwindcss>=3.4.0
+Required min version: @nextui-org/theme>=2.1.0, tailwindcss>=3.4.0, react>=18.3.1, react-dom>=18.3.1
 ╭───────────────────── PeerDependencies ─────────────────────╮
 │  @nextui-org/theme               2.0.1    ->  2.1.0        │
 │  tailwindcss                     ^3.2.3   ->  ^3.4.0       │
+│  react                           Missing  ->  18.3.1       │
+│  react-dom                       Missing  ->  18.3.1       │
 ╰────────────────────────────────────────────────────────────╯
-2 minor, 1 patch
+2 major, 2 minor, 1 patch
 
 ? Would you like to proceed with the upgrade? › - Use arrow-keys. Return to submit.
 ❯   Yes
     No
 
-pnpm add @nextui-org/button@2.0.31 @nextui-org/theme@2.1.0 tailwindcss@3.4.0
-Already up to date
-Progress: resolved 474, reused 465, downloaded 0, added 0, done
-Done in 2.9s
+pnpm add @nextui-org/button@2.0.31 @nextui-org/theme@2.1.0 tailwindcss@3.4.0 react@18.3.1 react-dom@18.3.1
+
+dependencies:
+- @nextui-org/theme 2.0.1
++ @nextui-org/theme 2.1.0 (2.2.3 is available)
++ react 18.3.1
++ react-dom 18.3.1
+
+Done in 1.8s
 
 ✅ Upgrade complete. All components are up to date.
 ```
 
-## remove
+### Remove
 
 Remove NextUI components from your project.
 
-> **Note**: If there are no NextUI components after removing, the required content will also be removed._createMdxContent
-  
-  ```codeBlock bash
-  nextui remove [components...] [options]
-  ```
+> **Note**: If there are no NextUI components after removing, the required content will also be removed
+
+```codeBlock bash
+nextui remove [components...] [options]
+```
 
-### Options
+#### Remove Options
 
-- `-p --packagePath` [string] The path to the package.json file.
-- `-a --all` [boolean] Remove all the NextUI components (default: `false`).
-- `-tw --tailwindPath` [string] The path to the tailwind.config file file.
-- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: false).
+- `-p --packagePath` [string] The path to the package.json file
+- `-a --all` [boolean] Remove all the NextUI components (default: `false`)
+- `-tw --tailwindPath` [string] The path to the tailwind.config file file
+- `--prettier` [boolean] Add prettier format in the add content which required installed prettier - (default: `false`)
 
+##### Example
 
-### Example
+Remove the **Button** component from your project.
 
 ```codeBlock bash
 nextui remove button
@@ -245,7 +270,7 @@ nextui remove button
 
 Output:
 
-```bash
+```codeBlock bash
 NextUI CLI v0.2.1
 
 ❗️ Components slated for removal:
@@ -272,20 +297,20 @@ Remove the removed components tailwind content in file:/project-path/tailwind.co
 ✅ Successfully removed the specified NextUI components: @nextui-org/button
 ```
 
-## list
+### List
 
-Show details of installed components.
+List all the current installed components.
 
 ```codeBlock bash
 nextui list [options]
 ```
 
-### Options
+#### List Options
 
 - `-p --packagePath` [string] The path to the package.json file
 - `-r --remote` List all components available remotely
 
-### Example
+##### Example
 
 ```codeBlock bash
 nextui list
@@ -301,16 +326,22 @@ Current installed components:
 ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
 │   Package                    │   Version              │   Status    │   Docs                                              │
 │───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
-│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.org/docs/components/autocomplete   │
+│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   stable    │   https://nextui.org/docs/components/autocomplete   │
 │   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.org/docs/components/badge          │
 │   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.org/docs/components/button         │
 │   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.org/docs/components/chip           │
 ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
 ```
 
-## doctor
+### Doctor
 
-Diagnose problems in your project.
+Check whether exist problem in your project by using the `doctor` command.
+
+```codeBlock bash
+nextui doctor [options]
+```
+
+### Features
 
 > 1. Check whether have `redundant dependencies` in the project
 > 2. Check whether the NextUI components `required dependencies are installed` in the project
@@ -318,11 +349,7 @@ Diagnose problems in your project.
 > 4. Check `.npmrc` is correct when using `pnpm`
 > 5. Check `peerDependencies with required version` are installed in the project
 
-```codeBlock bash
-nextui doctor [options]
-```
-
-### Options
+#### Doctor Options
 
 - `-p` `--packagePath` [string] The path to the package.json file
 - `-tw` `--tailwindPath` [string] The path to the tailwind.config file file
@@ -331,8 +358,7 @@ nextui doctor [options]
 - `-ct` `--checkTailwind` [boolean] Open check tailwind.config file (default: `true`)
 - `-cp` `--checkPnpm` [boolean] Open check Pnpm (default: `true`)
 
-
-### Example
+#### Example
 
 ```codeBlock bash
 nextui doctor
@@ -340,7 +366,6 @@ nextui doctor
 
 Output:
 
-
 If there is a problem in your project, the `doctor` command will display the problem information.
 
 ```codeBlock bash
@@ -361,7 +386,7 @@ NextUI CLI v0.2.1
 ✅ Your project has no detected issues.
 ```
 
-## env
+### Env
 
 Display debug information about the local environment.
 
@@ -369,11 +394,13 @@ Display debug information about the local environment.
 nextui env [options]
 ```
 
-### Options
+#### Env Options
+
 - `-p --packagePath` [string] The path to the package.json file
 
+#### Example
 
-### Example
+Display the local environment Information by using the `env` command.
 
 ```codeBlock bash
 nextui env
@@ -382,14 +409,14 @@ nextui env
 Output:
 
 ```codeBlock bash
-NextUI CLI 0.2.1
+NextUI CLI v0.2.1
 
 Current installed components:
 
 ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
 │   Package                    │   Version              │   Status    │   Docs                                              │
 │───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────│
-│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   newPost   │   https://nextui.org/docs/components/autocomplete   │
+│   @nextui-org/autocomplete   │   2.0.10 🚀latest      │   stable    │   https://nextui.org/docs/components/autocomplete   │
 │   @nextui-org/badge          │   2.0.24 🚀latest      │   stable    │   https://nextui.org/docs/components/badge          │
 │   @nextui-org/button         │   2.0.27 🚀latest      │   stable    │   https://nextui.org/docs/components/button         │
 │   @nextui-org/chip           │   2.0.25 🚀latest      │   stable    │   https://nextui.org/docs/components/chip           │
@@ -401,4 +428,4 @@ Environment Info:
     CPU: arm64
   Binaries:
     Node: v18.18.2
-```    
\ No newline at end of file
+```
diff --git a/apps/docs/content/docs/api-references/nextui-provider.mdx b/apps/docs/content/docs/api-references/nextui-provider.mdx
index dcc6abb52f..c64fd50061 100644
--- a/apps/docs/content/docs/api-references/nextui-provider.mdx
+++ b/apps/docs/content/docs/api-references/nextui-provider.mdx
@@ -40,7 +40,18 @@ function App() {
 `navigate`
 
 - **Description**: Provides a client side router to all nested components such as Link, Menu, Tabs, Table, etc.
-- **Type**: `((path: string) => void) | undefined`
+- **Type**: `((path: Href, routerOptions?: RouterOptions) => void) | undefined`
+
+[See Router Guide](/docs/guide/routing)
+
+<Spacer y={2}/>
+
+`useHref`
+
+- **Description**: Convert an `href` provided to a link component to a native `href`. For example, a router might accept hrefs relative to a base path, or offer additional custom ways of specifying link destinations. The original href specified on the link is passed to the navigate function of the RouterProvider, and useHref is used to generate the full native href to put on the actual DOM element.
+- **Type**: `((href: Href) => string) | undefined`
+
+[See Router Guide](/docs/guide/routing)
 
 <Spacer y={2}/>
 
@@ -116,12 +127,12 @@ interface AppProviderProps {
     import {GregorianCalendar} from '@internationalized/date';
 
     function createCalendar(identifier) {
-    switch (identifier) {
-      case 'gregory':
-        return new GregorianCalendar();
-      default:
-        throw new Error(`Unsupported calendar ${identifier}`);
-    }
+      switch (identifier) {
+        case 'gregory':
+          return new GregorianCalendar();
+        default:
+          throw new Error(`Unsupported calendar ${identifier}`);
+      }
     }
     ```
 
@@ -167,6 +178,16 @@ or mark the field as required or invalid via ARIA.
 - **Type**: `native | aria`
 - **Default**: `aria`
 
+`reducedMotion`
+
+- **Description**: Controls the motion preferences for the entire application, allowing developers to respect user settings for reduced motion. 
+The available options are:
+  - `"user"`: Adapts to the user's device settings for reduced motion.
+  - `"always"`: Disables all animations.
+  - `"never"`: Keeps all animations active.
+- **Type**: `"user" | "always" | "never"`
+- **Default**: `"never"`
+
 ---
 
 ## Types
diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
index a607ceece0..48532229c0 100644
--- a/apps/docs/content/docs/components/accordion.mdx
+++ b/apps/docs/content/docs/components/accordion.mdx
@@ -189,69 +189,301 @@ Here's an example of how to customize the accordion styles:
 
 ### Accordion Props
 
-| Attribute                 | Type                                            | Description                                                                                             | Default  |
-| ------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------- |
-| children                  | `ReactNode` \| `ReactNode[]`                    | The contents of the collection. Usually the array of `AccordionItem`                                    |          |
-| variant                   | `light` \| `shadow` \| `bordered` \| `splitted` | The accordion appearance style.                                                                         | `light`  |
-| selectionMode             | `none` \| `single` \| `multiple`                | The type of selection that is allowed in the collection.                                                |          |
-| selectionBehavior         | `toggle` \| `replace`                           | The accordion selection behavior.                                                                       | `toggle` |
-| isCompact                 | `boolean`                                       | Whether all Accordion items should be smaller.                                                          | `false`  |
-| isDisabled                | `boolean`                                       | Whether the Accordion items are disabled.                                                               |          |
-| showDivider               | `boolean`                                       | Whether to display a divider at the bottom of the each accordion item.                                  | `true`   |
-| dividerProps              | [DividerProps](/docs/components/divider)        | The divider component props.                                                                            | -        |
-| hideIndicator             | `boolean`                                       | Whether the Accordion items indicator is hidden.                                                        |          |
-| disableAnimation          | `boolean`                                       | Whether the Accordion items open/close animation is disabled.                                           |          |
-| disableIndicatorAnimation | `boolean`                                       | Whether the Accordion items indicator animation is disabled.                                            |          |
-| disallowEmptySelection    | `boolean`                                       | Whether the collection allows empty selection.                                                          |          |
-| keepContentMounted        | `boolean`                                       | Whether the Accordion items content should be always mounted.                                           | `false`  |
-| fullWidth                 | `boolean`                                       | Whether the accordion should take up the full width of its parent container.                            | `true`   |
-| motionProps               | `MotionProps`                                   | The motion properties of the Accordion.                                                                 |          |
-| disabledKeys              | `React.Key[]`                                   | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |          |
-| itemClasses               | [Classnames](#accordion-item-classnames)        | The accordion items classNames.                                                                         |          |
-| selectedKeys              | `all` \| `React.Key[]`                          | The currently selected keys in the collection (controlled).                                             |          |
-| defaultSelectedKeys       | `all` \| `React.Key[]`                          | The initial selected keys in the collection (uncontrolled).                                             |          |
-| disabledKeys              | `React.Key[]`                                   | The currently disabled keys in the collection (controlled).                                             |          |
+<APITable 
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The contents of the collection. Usually the array of AccordionItem",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "light | shadow | bordered | splitted",
+      description: "The accordion appearance style.",
+      default: "light"
+    },
+    {
+      attribute: "selectionMode", 
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectionBehavior",
+      type: "toggle | replace",
+      description: "The accordion selection behavior.",
+      default: "toggle"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether all Accordion items should be smaller.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "Whether the Accordion items are disabled.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to display a divider at the bottom of the each accordion item.",
+      default: "true"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "hideIndicator",
+      type: "boolean",
+      description: "Whether the Accordion items indicator is hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Accordion items open/close animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableIndicatorAnimation",
+      type: "boolean",
+      description: "Whether the Accordion items indicator animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "keepContentMounted",
+      type: "boolean",
+      description: "Whether the Accordion items content should be always mounted.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the accordion should take up the full width of its parent container.",
+      default: "true"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion properties of the Accordion.",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "AccordionItemClassnames",
+      description: "The accordion items classNames.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | React.Key[]",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | React.Key[]",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Events
 
-| Attribute         | Type                                     | Description                                        |
-| ----------------- | ---------------------------------------- | -------------------------------------------------- |
-| onSelectionChange | `(keys: "all" ｜ Set<React.Key>) => any` | Handler that is called when the selection changes. |
+<APITable
+  data={[
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key>) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Item Props
 
-| Attribute                 | Type                                              | Description                                                                                                                  | Default |
-|---------------------------|---------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|---------|
-| children                  | `ReactNode` \| `string`                           | The content of the component.                                                                                                |         |
-| title                     | `ReactNode` \| `string`                           | The accordion item title.                                                                                                    |         |
-| subtitle                  | `ReactNode` \| `string`                           | The accordion item subtitle.                                                                                                 |         |
-| indicator                 | [IndicatorProps](#accordion-item-indicator-props) | The accordion item `expanded` indicator, usually an arrow icon.                                                              |         |
-| startContent              | `ReactNode`                                       | The accordion item start content, usually an icon or avatar.                                                                 |         |
-| motionProps               | [MotionProps](#motion-props)                      | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                        |         |
-| isCompact                 | `boolean`                                         | Whether the AccordionItem is compact.                                                                                        | `false` |
-| isDisabled                | `boolean`                                         | The current disabled status.                                                                                                 | `false` |
-| keepContentMounted        | `boolean`                                         | Whether the AccordionItem content is kept mounted when closed.                                                               | `false` |
-| hideIndicator             | `boolean`                                         | Whether the AccordionItem indicator is hidden.                                                                               | `false` |
-| disableAnimation          | `boolean`                                         | Whether the AccordionItem animation is disabled.                                                                             | `false` |
-| disableIndicatorAnimation | `boolean`                                         | Whether the AccordionItem indicator animation is disabled.                                                                   | `false` |
-| HeadingComponent          | `React.ElementType`                               | Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically. | `h2`    |
-| classNames                | [Classnames](#accordion-item-classnames)          | Allows to set custom class names for the accordion item slots.                                                               | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | string",
+      description: "The content of the component.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "ReactNode | string",
+      description: "The accordion item title.",
+      default: "-"
+    },
+    {
+      attribute: "subtitle",
+      type: "ReactNode | string",
+      description: "The accordion item subtitle.",
+      default: "-"
+    },
+    {
+      attribute: "indicator",
+      type: "IndicatorProps",
+      description: "The accordion item expanded indicator, usually an arrow icon.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The accordion item start content, usually an icon or avatar.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether the AccordionItem is compact.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "The current disabled status.",
+      default: "false"
+    },
+    {
+      attribute: "keepContentMounted",
+      type: "boolean",
+      description: "Whether the AccordionItem content is kept mounted when closed.",
+      default: "false"
+    },
+    {
+      attribute: "hideIndicator",
+      type: "boolean",
+      description: "Whether the AccordionItem indicator is hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the AccordionItem animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableIndicatorAnimation",
+      type: "boolean",
+      description: "Whether the AccordionItem indicator animation is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "HeadingComponent",
+      type: "React.ElementType",
+      description: "Customizable heading tag for Web accessibility. Use headings to describe content and use them consistently and semantically.",
+      default: "h2"
+    },
+    {
+      attribute: "classNames",
+      type: "AccordionItemClassnames",
+      description: "Allows to set custom class names for the accordion item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Accordion Item Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onFocus       | `(e: FocusEvent) => void`      | Handler that is called when the element receives focus.                                                         |
-| onBlur        | `(e: FocusEvent) => void`      | Handler that is called when the element loses focus.                                                            |
-| onFocusChange | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes.                                                 |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler that is called when a key is pressed.                                                                   |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler that is called when a key is released.                                                                  |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/alert.mdx b/apps/docs/content/docs/components/alert.mdx
new file mode 100644
index 0000000000..49000c2744
--- /dev/null
+++ b/apps/docs/content/docs/components/alert.mdx
@@ -0,0 +1,237 @@
+---
+title: "Alert"
+description: "Alerts are temporary notifications that provide concise feedback about an action or event."
+---
+
+import {alertContent} from "@/content/components/alert";
+
+# Alert
+
+Alerts are temporary notifications that provide concise feedback about an action or event.
+
+<ComponentLinks component="alert" />
+
+---
+
+<CarbonAd />
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add alert",
+    npm: "npm install @nextui-org/alert",
+    yarn: "yarn add @nextui-org/alert",
+    pnpm: "pnpm add @nextui-org/alert",
+    bun: "bun add @nextui-org/alert",
+  }}
+/>
+
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {Alert} from "@nextui-org/react";',
+    individual: 'import {Alert} from "@nextui-org/alert";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={alertContent.usage} />
+
+### Colors
+
+Alert comes with 6 color variants to convey different meanings.
+
+<CodeDemo title="Colors" files={alertContent.colors} />
+
+### Variants
+
+<CodeDemo title="Variants" files={alertContent.variants} />
+
+### Radius
+
+<CodeDemo title="Radius" files={alertContent.radius} />
+
+### Custom Icon
+
+By default, Alert displays an appropriate icon based on the `color` prop. You can override this by providing a custom icon using the `icon` prop.
+
+<CodeDemo title="Custom Icon" files={alertContent.withIcon} />
+
+### Without Icon
+
+You can hide the icon by setting the `hideIcon` prop to `true`.
+
+<CodeDemo title="Without Icon" files={alertContent.withoutIcon} />
+
+### Without Icon Wrapper
+
+You can hide the icon wrapper by setting the `hideIconWrapper` prop to `true`.
+
+<CodeDemo title="Without Icon Wrapper" files={alertContent.withoutIconWrapper} />
+
+### With Action
+
+Alert supports an `endContent` prop for additional actions.
+
+<CodeDemo title="With Action" files={alertContent.withAction} />
+
+### Controlled Visibility
+
+You can control the alert visibility using the `isVisible` and `onVisibleChange` props.
+
+<CodeDemo title="Controlled" files={alertContent.controlled} />
+
+### Custom Styles
+
+You can customize the alert by passing custom Tailwind CSS classes to the component slots.
+
+<CodeDemo title="Custom Styles" files={alertContent.customStyles} />
+
+### Custom Implementation
+
+You can use the `useAlert` hook to create your own alert component.
+
+<CodeDemo showPreview={false} title="Custom Implementation" files={alertContent.customImpl} />
+
+<Spacer y={4} />
+
+## Data Attributes
+
+Alert has the following attributes on the `base` element:
+
+- **data-visible**: When the alert is visible
+- **data-closeable**: When the alert can be closed
+- **data-has-title**: When the alert has a title
+- **data-has-description**: When the alert has a description
+
+<Spacer y={4} />
+
+### Slots
+
+Alert has the following slots:
+
+- `base`: The main alert container element
+- `title`: The title element
+- `description`: The description element
+- `mainWrapper`: The wrapper for the title and description content
+- `closeButton`: The close button element
+- `iconWrapper`: The wrapper for the alert icon
+- `alertIcon`: The alert icon element
+
+## Accessibility
+
+- Alert has role of `alert`
+- Close button has aria-label="Close" by default
+- When closed, alert is removed from the DOM
+
+<Spacer y={4} />
+
+## API
+
+### Alert Props
+
+<APITable
+  data={[
+    {
+      attribute: "title",
+      type: "string",
+      description: "The alert title",
+      default: "-"
+    },
+    {
+      attribute: "icon", 
+      type: "ReactNode",
+      description: "The alert icon - overrides the default icon",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode", 
+      description: "The alert description",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The alert color theme",
+      default: "default"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | flat | faded",
+      description: "The alert variant",
+      default: "flat"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The alert border radius",
+      default: "md"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The alert start content",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The alert end content", 
+      default: "-"
+    },
+    {
+      attribute: "isVisible",
+      type: "boolean",
+      description: "Whether the alert is visible",
+      default: "-"
+    },
+    {
+      attribute: "isClosable",
+      type: "boolean",
+      description: "Whether the alert can be closed",
+      default: "false"
+    },
+    {
+      attribute: "hideIcon",
+      type: "boolean",
+      description: "Whether the icon is hidden",
+      default: "false"
+    },
+    {
+      attribute: "hideIconWrapper",
+      type: "boolean",
+      description: "Whether the icon wrapper is hidden",
+      default: "false"
+    },
+    {
+      attribute: "closeButtonProps",
+      type: "ButtonProps",
+      description: "Props for the close button",
+      default: "-"
+    }
+  ]}
+/>
+
+### Alert Events
+
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler called when the close button is clicked",
+      default: "-"
+    },
+    {
+      attribute: "onVisibleChange",
+      type: "(isVisible: boolean) => void",
+      description: "Handler called when the alert visibility changes",
+      default: "-"
+    }
+  ]}
+/>
\ No newline at end of file
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index b826b21556..ef2cbbf8a0 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -13,7 +13,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
 
 ---
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Installation
 
@@ -24,11 +24,10 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
     npm: "npm install @nextui-org/autocomplete",
     yarn: "yarn add @nextui-org/autocomplete",
     pnpm: "pnpm add @nextui-org/autocomplete",
-    bun: "bun add @nextui-org/autocomplete"
+    bun: "bun add @nextui-org/autocomplete",
   }}
 />
 
-
 ## Import
 
 NextUI exports 3 autocomplete-related components:
@@ -63,43 +62,43 @@ Autocomplete follows the [Collection Components API](https://react-spectrum.adob
 - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time.
 - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time.
 
-<CodeDemo title="Dynamic items" highlightedLines="8" files={autocompleteContent.dynamic} />
+<CodeDemo title="Dynamic items" files={autocompleteContent.dynamic} />
 
 ### Disabled
 
-<CodeDemo title="Disabled" highlightedLines="8" files={autocompleteContent.disabled} />
+<CodeDemo title="Disabled" files={autocompleteContent.disabled} />
 
 ### Disabled Items
 
 You can disable specific items by using the `disabledKeys` property.
 
-<CodeDemo title="Disabled Items" highlightedLines="11" files={autocompleteContent.disabledItems} />
+<CodeDemo title="Disabled Items" files={autocompleteContent.disabledItems} />
 
 ### Required
 
 If you pass the `isRequired` property to the autocomplete, it will have a `danger` asterisk at
 the end of the label and the autocomplete will be required.
 
-<CodeDemo title="Required" highlightedLines="8" files={autocompleteContent.required} />
+<CodeDemo title="Required" files={autocompleteContent.required} />
 
 ### Read Only
 
-If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display 
+If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display
 all available options, but users won't be able to select any of the listed options.
 
-<CodeDemo title="Read Only" highlightedLines="8" files={autocompleteContent.readOnly} />
+<CodeDemo title="Read Only" files={autocompleteContent.readOnly} />
 
 ### Sizes
 
-<CodeDemo title="Sizes" highlightedLines="13,21" files={autocompleteContent.sizes} />
+<CodeDemo title="Sizes" files={autocompleteContent.sizes} />
 
 ### Colors
 
-<CodeDemo title="Colors" highlightedLines="20" files={autocompleteContent.colors} />
+<CodeDemo title="Colors" files={autocompleteContent.colors} />
 
 ### Variants
 
-<CodeDemo title="Variants" highlightedLines="13,21" files={autocompleteContent.variants} />
+<CodeDemo title="Variants" files={autocompleteContent.variants} />
 
 ### Label Placements
 
@@ -107,7 +106,6 @@ You can change the position of the label by setting the `labelPlacement` propert
 
 <CodeDemo
   title="Label Placements"
-  highlightedLines="20,34"
   files={autocompleteContent.labelPlacements}
 />
 
@@ -118,7 +116,7 @@ You can change the position of the label by setting the `labelPlacement` propert
 You can use the `startContent` and `endContent` properties to add content to the start and end of
 the autocomplete.
 
-<CodeDemo title="Start Content" highlightedLines="13" files={autocompleteContent.startContent} />
+<CodeDemo title="Start Content" files={autocompleteContent.startContent} />
 
 ### Item Start & End Content
 
@@ -134,7 +132,7 @@ By default, `Autocomplete` doesn't allow users to specify a value that doesn't e
 revert the input value to the current selected value on blur. By specifying `allowsCustomValue`, this behavior is
 suppressed and the user is free to enter any value within the field.
 
-<CodeDemo title="Custom Value" highlightedLines="8" files={autocompleteContent.customValue} />
+<CodeDemo title="Custom Value" files={autocompleteContent.customValue} />
 
 ### Custom Selector Icon
 
@@ -143,7 +141,6 @@ customize this icon by passing a custom one to the `selectorIcon` property.
 
 <CodeDemo
   title="Custom Selector Icon"
-  highlightedLines="15"
   files={autocompleteContent.customSelectorIcon}
 />
 
@@ -156,7 +153,6 @@ You can disable this shadow by passing using the `scrollShadowProps` property.
 
 <CodeDemo
   title="Without Scroll Shadow"
-  highlightedLines="13-15"
   files={autocompleteContent.withoutScrollShadow}
 />
 
@@ -166,7 +162,7 @@ You can disable this shadow by passing using the `scrollShadowProps` property.
 
 You can add a description to the autocomplete by passing the `description` property.
 
-<CodeDemo title="With Description" highlightedLines="10" files={autocompleteContent.description} />
+<CodeDemo title="With Description" files={autocompleteContent.description} />
 
 ### With Error Message
 
@@ -174,7 +170,6 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo
   title="With Error Message"
-  highlightedLines="16-18"
   files={autocompleteContent.errorMessage}
 />
 
@@ -188,7 +183,7 @@ whether through typing or option selection.
 The example below uses `onSelectionChange` and `onInputChange` to update the selection and input value stored in
 React state.
 
-<CodeDemo title="Events" highlightedLines="25-26" files={autocompleteContent.events} />
+<CodeDemo title="Events" files={autocompleteContent.events} />
 
 ### Controlled
 
@@ -196,7 +191,6 @@ You can use the `selectedKey` and `onSelectionChange` properties to control the
 
 <CodeDemo
   title="Controlled with onSelectionChange"
-  highlightedLines="15-16"
   files={autocompleteContent.controlled}
 />
 
@@ -227,7 +221,6 @@ import {useFilter} from "@react-aria/i18n";
   title="Fully Controlled"
   showPreview={false}
   showOpenInCodeSandbox={false}
-  highlightedLines="63-64,67,69-71"
   files={autocompleteContent.fullyControlled}
 />
 
@@ -243,7 +236,10 @@ You can customize the autocomplete items by modifying the `AutocompleteItem` chi
 
 By default, a message `No results found.` will be shown if there is no result matching a query with your filter. You can customize the empty content message by modifying the `emptyContent` in `listboxProps`.
 
-<CodeDemo title="Custom Empty Content Message" files={autocompleteContent.customEmptyContentMessage} />
+<CodeDemo
+  title="Custom Empty Content Message"
+  files={autocompleteContent.customEmptyContentMessage}
+/>
 
 ### Custom Filtering
 
@@ -255,7 +251,6 @@ The following example uses the `defaultFilter` prop to filter the list of option
 
 <CodeDemo
   title="Fully Controlled"
-  highlightedLines="22"
   files={autocompleteContent.customFiltering}
 />
 
@@ -283,7 +278,6 @@ import {useAsyncList} from "@react-stately/data";
   title="Asynchronous Filtering"
   showPreview={false}
   showOpenInCodeSandbox={false}
-  highlightedLines="27-29,33"
   files={autocompleteContent.asyncFiltering}
 />
 
@@ -312,10 +306,39 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
   showOpenInCodeSandbox={false}
   typescriptStrict={true}
   title="Asynchronous Loading"
-  highlightedLines="21-22,25,27"
   files={autocompleteContent.asyncLoadingItems}
 />
 
+### Virtualization
+
+Autocomplete supports virtualization, in the example below we are using the `isVirtualized` prop to enable virtualization.
+
+<CodeDemo
+  title="Virtualization"
+  highlightedLines="41"
+  files={autocompleteContent.virtualization}
+/>
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+
+#### Ten Thousand Items
+
+Virtualization with 10,000 items.
+
+<CodeDemo title="Ten Thousand Items" files={autocompleteContent.virtualizationTenThousand} />
+
+#### Max Listbox Height
+
+The `maxListboxHeight` prop is used to set the maximum height of the listbox. This is required when using virtualization. By default, it's set to `256`.
+
+<CodeDemo title="Max Listbox Height" files={autocompleteContent.virtualizationMaxListboxHeight} />
+
+#### Custom Item Height
+
+The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`.
+
+<CodeDemo title="Custom Item Height" files={autocompleteContent.virtualizationCustomItemHeight} />
+
 ### With Sections
 
 You can use the `AutocompleteSection` component to group autocomplete items.
@@ -412,71 +435,383 @@ properties to customize the popover, listbox and input components.
 
 ### Autocomplete Props
 
-| Attribute                   | Type                                                                                                                                  | Description                                                                                                                                                   | Default                  |
-| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
-| children\*                  | `ReactNode[]`                                                                                                                         | The children to render. Usually a list of `AutocompleteItem` and `AutocompleteSection` elements.                                                              | -                        |
-| label                       | `ReactNode`                                                                                                                           | The content to display as the label.                                                                                                                          | -                        |
-| name                        | `string`                                                                                                                              | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). | -                        |
-| variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                       | The variant of the Autocomplete.                                                                                                                              | `flat`                   |
-| color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                           | The color of the Autocomplete.                                                                                                                                | `default`                |
-| size                        | `sm` \| `md` \| `lg`                                                                                                                  | The size of the Autocomplete.                                                                                                                                 | `md`                     |
-| radius                      | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                              | The radius of the Autocomplete.                                                                                                                               | -                        |
-| items                       | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                | The list of Autocomplete items. (controlled)                                                                                                                  | -                        |
-| defaultItems                | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                | The list of Autocomplete items (uncontrolled).                                                                                                                | -                        |
-| inputValue                  | `string`                                                                                                                              | The value of the Autocomplete input (controlled).                                                                                                             | -                        |
-| defaultInputValue           | `string`                                                                                                                              | The value of the Autocomplete input (uncontrolled).                                                                                                           | -                        |
-| allowsCustomValue           | `boolean`                                                                                                                             | Whether the Autocomplete allows a non-item matching input value to be set.                                                                                    | `false`                  |
-| allowsEmptyCollection       | `boolean`                                                                                                                             | Whether the autocomplete allows the menu to be open when the collection is empty.                                                                             | `true`                   |
-| shouldCloseOnBlur           | `boolean`                                                                                                                             | Whether the Autocomplete should close when the input is blurred.                                                                                              | `true`                   |
-| placeholder                 | `string`                                                                                                                              | Temporary text that occupies the text input when it is empty.                                                                                                 | -                        |
-| description                 | `ReactNode`                                                                                                                           | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                | -                        |
-| menuTrigger                 | `focus` \| `input` \| `manual`                                                                                                        | The action that causes the menu to open.                                                                                                                      | `focus`                  |
-| labelPlacement              | `inside` \| `outside` \| `outside-left`                                                                                               | The position of the label.                                                                                                                                    | `inside`                 |
-| selectedKey                 | `React.Key`                                                                                                                           | The currently selected key in the collection (controlled).                                                                                                    | -                        |
-| defaultSelectedKey          | `React.Key`                                                                                                                           | The initial selected key in the collection (uncontrolled).                                                                                                    | -                        |
-| disabledKeys                | `all` \| `React.Key[]`                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                       | -                        |
-| errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                 | An error message to display below the field.                                                                                                                  | -                        |
-| validate                    | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                              | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -                        |
-| validationBehavior          | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                   |
-| startContent                | `ReactNode`                                                                                                                           | Element to be rendered in the left side of the Autocomplete.                                                                                                  | -                        |
-| endContent                  | `ReactNode`                                                                                                                           | Element to be rendered in the right side of the Autocomplete.                                                                                                 | -                        |
-| autoFocus                   | `boolean`                                                                                                                             | Whether the Autocomplete should be focused on render.                                                                                                         | `false`                  |
-| defaultFilter               | `(textValue: string, inputValue: string) => boolean`                                                                                  | The filter function used to determine if a option should be included in the Autocomplete list.                                                                | -                        |
-| filterOptions               | [Intl.CollatorOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator/Collator)            | The options used to create the collator used for filtering.                                                                                                   | `{ sensitivity: 'base'}` |
-| isReadOnly                  | `boolean`                                                                                                                             | Whether the Autocomplete is read only.                                                                                                                        | `false`                  |
-| isRequired                  | `boolean`                                                                                                                             | Whether the Autocomplete is required.                                                                                                                         | `false`                  |
-| isInvalid                   | `boolean`                                                                                                                             | Whether the Autocomplete is invalid.                                                                                                                          | `false`                  |
-| isDisabled                  | `boolean`                                                                                                                             | Whether the Autocomplete is disabled.                                                                                                                         | `false`                  |
-| fullWidth                   | `boolean`                                                                                                                             | Whether the input should take up the width of its parent.                                                                                                     | `true`                   |
-| selectorIcon                | `ReactNode`                                                                                                                           | The icon that represents the autocomplete open state. Usually a chevron icon.                                                                                 | -                        |
-| clearIcon                   | `ReactNode`                                                                                                                           | The icon to be used in the clear button. Usually a cross icon.                                                                                                | -                        |
-| showScrollIndicators        | `boolean`                                                                                                                             | Whether the scroll indicators should be shown when the listbox is scrollable.                                                                                 | `true`                   |
-| scrollRef                   | `React.RefObject<HTMLElement>`                                                                                                        | A ref to the scrollable element.                                                                                                                              | -                        |
-| inputProps                  | [InputProps](/docs/components/input#api)                                                                                              | Props to be passed to the Input component.                                                                                                                    | -                        |
-| popoverProps                | [PopoverProps](/docs/components/popover#api)                                                                                          | Props to be passed to the Popover component.                                                                                                                  | -                        |
-| listboxProps                | [ListboxProps](/docs/components/listbox#api)                                                                                          | Props to be passed to the Listbox component.                                                                                                                  | -                        |
-| scrollShadowProps           | [ScrollShadowProps](/docs/components/scroll-shadow#api)                                                                               | Props to be passed to the ScrollShadow component.                                                                                                             | -                        |
-| selectorButtonProps         | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the selector button.                                                                                                                    | -                        |
-| clearButtonProps            | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the clear button.                                                                                                                       | -                        |
-| isClearable                 | `boolean`                                                                                                                             | Whether the clear button should be shown.                                                                                                                     | `true`                   |
-| disableClearable            | `boolean`                                                                                                                             | Whether the clear button should be hidden. (**Deprecated**) Use `isClearable` instead.                                                                        | `false`                  |
-| disableAnimation            | `boolean`                                                                                                                             | Whether the Autocomplete should be animated.                                                                                                                  | `true`                   |
-| disableSelectorIconRotation | `boolean`                                                                                                                             | Whether the select should disable the rotation of the selector icon.                                                                                          | `false`                  |
-| classNames                  | `Record<"base"｜ "listboxWrapper"｜ "listbox"｜ "popoverContent" ｜ "endContentWrapper"｜ "clearButton" ｜ "selectorButton", string>` | Allows to set custom class names for the Autocomplete slots.                                                                                                  | -                        |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of AutocompleteItem and AutocompleteSection elements.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the Autocomplete.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the Autocomplete.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the Autocomplete.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "The list of Autocomplete items. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "defaultItems",
+      type: "Iterable<T>",
+      description: "The list of Autocomplete items (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "inputValue",
+      type: "string",
+      description: "The value of the Autocomplete input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultInputValue",
+      type: "string",
+      description: "The value of the Autocomplete input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "allowsCustomValue",
+      type: "boolean",
+      description: "Whether the Autocomplete allows a non-item matching input value to be set.",
+      default: "false"
+    },
+    {
+      attribute: "allowsEmptyCollection",
+      type: "boolean",
+      description: "Whether the autocomplete allows the menu to be open when the collection is empty.",
+      default: "true"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the Autocomplete should close when the input is blurred.",
+      default: "true"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "Temporary text that occupies the text input when it is empty.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "menuTrigger",
+      type: "focus | input | manual",
+      description: "The action that causes the menu to open.",
+      default: "focus"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "selectedKey",
+      type: "React.Key",
+      description: "The currently selected key in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKey",
+      type: "React.Key",
+      description: "The initial selected key in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "all | React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message to display below the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: { inputValue: string, selectedKey: React.Key }) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), and return error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "endContent", 
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the Autocomplete.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the Autocomplete should be focused on render.",
+      default: "false"
+    },
+    {
+      attribute: "defaultFilter",
+      type: "(textValue: string, inputValue: string) => boolean",
+      description: "The filter function used to determine if a option should be included in the Autocomplete list.",
+      default: "-"
+    },
+    {
+      attribute: "filterOptions",
+      type: "Intl.CollatorOptions",
+      description: "The options used to create the collator used for filtering.",
+      default: "{ sensitivity: 'base'}"
+    },
+    {
+      attribute: "maxListboxHeight",
+      type: "number",
+      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256"
+    },
+    {
+      attribute: "itemHeight",
+      type: "number", 
+      description: "The fixed height of each item in pixels. Required when using virtualization.",
+      default: "32"
+    },
+    {
+      attribute: "isVirtualized",
+      type: "boolean",
+      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the Autocomplete is read only.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether the Autocomplete is required.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the Autocomplete is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the Autocomplete is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the input should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon that represents the autocomplete open state. Usually a chevron icon.",
+      default: "-"
+    },
+    {
+      attribute: "clearIcon",
+      type: "ReactNode",
+      description: "The icon to be used in the clear button. Usually a cross icon.",
+      default: "-"
+    },
+    {
+      attribute: "showScrollIndicators",
+      type: "boolean",
+      description: "Whether the scroll indicators should be shown when the listbox is scrollable.",
+      default: "true"
+    },
+    {
+      attribute: "scrollRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the scrollable element.",
+      default: "-"
+    },
+    {
+      attribute: "inputProps",
+      type: "InputProps",
+      description: "Props to be passed to the Input component.",
+      default: "-"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the Popover component.",
+      default: "-"
+    },
+    {
+      attribute: "listboxProps",
+      type: "ListboxProps",
+      description: "Props to be passed to the Listbox component.",
+      default: "-"
+    },
+    {
+      attribute: "scrollShadowProps",
+      type: "ScrollShadowProps",
+      description: "Props to be passed to the ScrollShadow component.",
+      default: "-"
+    },
+    {
+      attribute: "selectorButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the selector button.",
+      default: "-"
+    },
+    {
+      attribute: "clearButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the clear button.",
+      default: "-"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the clear button should be shown.",
+      default: "true"
+    },
+    {
+      attribute: "disableClearable",
+      type: "boolean",
+      description: "Whether the clear button should be hidden. (Deprecated) Use isClearable instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Autocomplete should be animated.",
+      default: "true"
+    },
+    {
+      attribute: "disableSelectorIconRotation",
+      type: "boolean",
+      description: "Whether the select should disable the rotation of the selector icon.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'listboxWrapper' | 'listbox' | 'popoverContent' | 'endContentWrapper' | 'clearButton' | 'selectorButton', string>>",
+      description: "Allows to set custom class names for the Autocomplete slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Autocomplete Events
 
-| Attribute         | Type                                                         | Description                                                                                                                                   |
-| ----------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange      | `(isOpen: boolean, menuTrigger?: MenuTriggerAction) => void` | Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. |
-| onInputChange     | `(value: string) => void`                                    | Handler that is called when the Autocomplete input value changes.                                                                             |
-| onSelectionChange | `(key: React.Key) => void`                                   | Handler that is called when the Autocomplete selection changes.                                                                               |
-| onFocus           | `(e:  FocusEvent<HTMLInputElement>) => void`                 | Handler that is called when the Autocomplete input is focused.                                                                                |
-| onBlur            | `(e:  FocusEvent<HTMLInputElement>) => void`                 | Handler that is called when the Autocomplete input is blurred.                                                                                |
-| onFocusChange     | `(isFocused: boolean) => void`                               | Handler that is called when the Autocomplete input focus changes.                                                                             |
-| onKeyDown         | `(e: KeyboardEvent) => void`                                 | Handler that is called when a key is pressed.                                                                                                 |
-| onKeyUp           | `(e: KeyboardEvent) => void`                                 | Handler that is called when a key is released.                                                                                                |
-| onClose           | `() => void`                                                 | Handler that is called when the Autocomplete's Popover is closed.                                                                             |
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean, menuTrigger?: MenuTriggerAction) => void",
+      description: "Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu.",
+      default: "-"
+    },
+    {
+      attribute: "onInputChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the Autocomplete input value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when the Autocomplete selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the Autocomplete input is focused.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the Autocomplete input is blurred.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the Autocomplete input focus changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the Autocomplete's Popover is closed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
index a8603a96e6..76e6a01d4f 100644
--- a/apps/docs/content/docs/components/avatar.mdx
+++ b/apps/docs/content/docs/components/avatar.mdx
@@ -170,34 +170,158 @@ You can customize any part of the avatar by using the `classNames` prop, each `s
 
 ### Avatar Props
 
-| Attribute    | Type                                                                        | Description                                                                  | Default   |
-| ------------ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------- |
-| src          | `string`                                                                    | The source URL of the image to be displayed.                                 | -         |
-| color        | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | Sets the avatar background color.                                            | `default` |
-| radius       | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | Sets the avatar border radius.                                               | `full`    |
-| size         | `sm` \| `md` \| `lg`                                                        | Sets the avatar size.                                                        | `md`      |
-| name         | `string`                                                                    | Displays the initials if the image is not provided or fails to load.         | -         |
-| icon         | `ReactNode`                                                                 | Displays a custom icon inside the avatar.                                    | -         |
-| fallback     | `ReactNode`                                                                 | A custom fallback component to display when the image fails to load.         | -         |
-| isBordered   | `boolean`                                                                   | If `true`, adds a border around the avatar.                                  | `false`   |
-| isDisabled   | `boolean`                                                                   | If `true`, disables the avatar and applies a disabled styling.               | `false`   |
-| isFocusable  | `boolean`                                                                   | If `true`, makes the avatar focusable for keyboard navigation.               | `false`   |
-| showFallback | `boolean`                                                                   | If `true`, shows the fallback icon or initials when the image fails to load. | `false`   |
-| ImgComponent | `React.ElementType`                                                         | The component to be used as the image element.                               | `img`     |
-| imgProps     | `ImgComponentProps`                                                         | Props to be passed to the image element.                                     | -         |
-| classNames   | `Record<"base"｜ "img"｜ "fallback"｜ "name"｜ "icon", string>`             | Allows to set custom class names for the avatar slots.                       | -         |
+<APITable
+  data={[
+    {
+      attribute: "src",
+      type: "string", 
+      description: "The source URL of the image to be displayed.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "Sets the avatar background color.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "Sets the avatar border radius.",
+      default: "full"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "Sets the avatar size.",
+      default: "md"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "Displays the initials if the image is not provided or fails to load.",
+      default: "-"
+    },
+    {
+      attribute: "icon",
+      type: "ReactNode",
+      description: "Displays a custom icon inside the avatar.",
+      default: "-"
+    },
+    {
+      attribute: "fallback",
+      type: "ReactNode",
+      description: "A custom fallback component to display when the image fails to load.",
+      default: "-"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "If true, adds a border around the avatar.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "If true, disables the avatar and applies a disabled styling.",
+      default: "false"
+    },
+    {
+      attribute: "isFocusable",
+      type: "boolean",
+      description: "If true, makes the avatar focusable for keyboard navigation.",
+      default: "false"
+    },
+    {
+      attribute: "showFallback",
+      type: "boolean",
+      description: "If true, shows the fallback icon or initials when the image fails to load.",
+      default: "false"
+    },
+    {
+      attribute: "ImgComponent",
+      type: "React.ElementType",
+      description: "The component to be used as the image element.",
+      default: "img"
+    },
+    {
+      attribute: "imgProps",
+      type: "ImgComponentProps",
+      description: "Props to be passed to the image element.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"img\" | \"fallback\" | \"name\" | \"icon\", string>>",
+      description: "Allows to set custom class names for the avatar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Avatar Group Props
 
-| Attribute   | Type                               | Description                                         | Default |
-| ----------- | ---------------------------------- | --------------------------------------------------- | ------- |
-| max         | `number`                           | The maximum number of visible avatars               | `5`     |
-| total       | `number`                           | Control the number of avatar not visible            | -       |
-| size        | `AvatarProps['size']`              | Size of the avatars                                 | -       |
-| color       | `AvatarProps['color']`             | Color of the avatars                                | -       |
-| radius      | `AvatarProps['radius']`            | Radius of the avatars                               | -       |
-| isGrid      | `boolean`                          | Whether the avatars should be displayed in a grid   | `false` |
-| isDisabled  | `boolean`                          | Whether the avatars are disabled                    | -       |
-| isBordered  | `boolean`                          | Whether the avatars have a border                   | -       |
-| renderCount | `(count: number) => ReactNode`     | This allows you to render a custom count component. | -       |
-| classNames  | `Record<"base"｜ "count", string>` | Allows to set custom class names for the avatar group slots. | -  |
+<APITable
+  data={[
+    {
+      attribute: "max",
+      type: "number",
+      description: "The maximum number of visible avatars",
+      default: "5"
+    },
+    {
+      attribute: "total",
+      type: "number", 
+      description: "Control the number of avatar not visible",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "AvatarProps['size']",
+      description: "Size of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "AvatarProps['color']",
+      description: "Color of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "radius",
+      type: "AvatarProps['radius']",
+      description: "Radius of the avatars",
+      default: "-"
+    },
+    {
+      attribute: "isGrid",
+      type: "boolean",
+      description: "Whether the avatars should be displayed in a grid",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the avatars are disabled",
+      default: "-"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "Whether the avatars have a border",
+      default: "-"
+    },
+    {
+      attribute: "renderCount",
+      type: "(count: number) => ReactNode",
+      description: "This allows you to render a custom count component.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"count\", string>>",
+      description: "Allows to set custom class names for the avatar group slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/badge.mdx b/apps/docs/content/docs/components/badge.mdx
index 3a57b4155e..4d372ade3f 100644
--- a/apps/docs/content/docs/components/badge.mdx
+++ b/apps/docs/content/docs/components/badge.mdx
@@ -103,19 +103,91 @@ The Badge component has two slots:
 
 ### Badge Props
 
-| Attribute        | Type                                                                        | Description                                                                              | Default     |
-| ---------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------- |
-| children \*      | `ReactNode`                                                                 | The wrapped component.                                                                   | -           |
-| content          | `string` \| `number` \| `ReactNode`                                         | The content of the badge. The badge will be rendered relative to its children.           | -           |
-| variant          | `solid` \| `flat` \| `faded` \| `shadow`                                    | The variant style of the badge.                                                          | `solid`     |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the badge.                                                                  | `default`   |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the badge.                                                                   | `md`        |
-| shape            | `circle` \| `rectangle`                                                     | The shape of the badge.                                                                  | `rectangle` |
-| placement        | `top-right` \| `top-left` \| `bottom-right` \| `bottom-left`                | The placement of the badge.                                                              | `top-right` |
-| showOutline      | `boolean`                                                                   | If `true`, the badge will have an outline.                                               | `true`      |
-| disableOutline   | `boolean`                                                                   | If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead. | `false`     |
-| disableAnimation | `boolean`                                                                   | If `true`, the badge will not have an animation.                                         | `false`     |
-| isInvisible      | `boolean`                                                                   | If `true`, the badge will be invisible.                                                  | `false`     |
-| isOneChar        | `boolean`                                                                   | If `true`, the badge will have the same width and height.                                | `false`     |
-| isDot            | `boolean`                                                                   | If `true`, the badge will have smaller dimensions.                                       | `false`     |
-| classNames       | `Record<"base"｜"badge", string>`                                           | Allows to set custom class names for the badge slots.                                    | -           |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The wrapped component.",
+      default: "-"
+    },
+    {
+      attribute: "content", 
+      type: "string | number | ReactNode",
+      description: "The content of the badge. The badge will be rendered relative to its children.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | flat | faded | shadow",
+      description: "The variant style of the badge.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the badge.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the badge.",
+      default: "md"
+    },
+    {
+      attribute: "shape",
+      type: "circle | rectangle",
+      description: "The shape of the badge.",
+      default: "rectangle"
+    },
+    {
+      attribute: "placement",
+      type: "top-right | top-left | bottom-right | bottom-left",
+      description: "The placement of the badge.",
+      default: "top-right"
+    },
+    {
+      attribute: "showOutline",
+      type: "boolean",
+      description: "If `true`, the badge will have an outline.",
+      default: "true"
+    },
+    {
+      attribute: "disableOutline",
+      type: "boolean", 
+      description: "If `true`, the badge will not have an outline. **Deprecated** use `showOutline` instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "If `true`, the badge will not have an animation.",
+      default: "false"
+    },
+    {
+      attribute: "isInvisible",
+      type: "boolean",
+      description: "If `true`, the badge will be invisible.",
+      default: "false"
+    },
+    {
+      attribute: "isOneChar",
+      type: "boolean",
+      description: "If `true`, the badge will have the same width and height.",
+      default: "false"
+    },
+    {
+      attribute: "isDot",
+      type: "boolean",
+      description: "If `true`, the badge will have smaller dimensions.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜\"badge\", string>>",
+      description: "Allows to set custom class names for the badge slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx
index 05a461302c..311d6111db 100644
--- a/apps/docs/content/docs/components/breadcrumbs.mdx
+++ b/apps/docs/content/docs/components/breadcrumbs.mdx
@@ -211,65 +211,235 @@ You can customize the `Breadcrumbs` style by using the `classNames` prop and its
 
 ### Breadcrumbs Props
 
-| Attribute           | Type                                                                           | Description                                                                     | Default      |
-| ------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- | ------------ |
-| children\*          | `ReactNode`                                                                    | The contents of the Breadcrumbs. Usually a list of `BreadcrumbItem` components. | -            |
-| variant             | `solid` \| `bordered` \| `light`                                               | The Breadcrumbs list appearance style.                                          | `solid`      |
-| color               | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The Breadcrumbs' items color theme.                                             | `foreground` |
-| size                | `sm` \| `md` \| `lg`                                                           | The Breadcrumbs' items size.                                                    | `md`         |
-| radius              | `none` \| `sm` \| `md` \| `lg` \| `full`                                       | The Breadcrumbs list border radius.                                             | -            |
-| underline           | `none` \| `active` \| `hover` \| `focus` \| `always`                           | The Breadcrumbs' items underline style.                                         | `none`       |
-| separator           | `ReactNode`                                                                    | The custom separator between Breadcrumbs. It is a chevron by default.           | -            |
-| maxItems            | `number`                                                                       | The maximum number of breadcrumbs to display.                                   | -            |
-| itemsBeforeCollapse | `number`                                                                       | The number of items to show before the ellipsis.                                | -            |
-| itemsAfterCollapse  | `number`                                                                       | The number of items to show after the ellipsis.                                 | -            |
-| hideSeparator       | `boolean`                                                                      | Whether to hide the separator between breadcrumbs.                              | `false`      |
-| isDisabled          | `boolean`                                                                      | Whether the Breadcrumbs are disabled except the last item.                      | `false`      |
-| disableAnimation    | `boolean`                                                                      | Whether the Breadcrumbs should display animations.                              | `false`      |
-| itemClasses         | `Record<"base"｜ "item"｜ "separator", string>`                                | Allows to set custom class names for the breadcrumbs item slots.                | -            |
-| classNames          | `Record<"base"｜ "list"｜ "ellipsis"｜ "separator", string>`                   | Allows to set custom class names for the breadcrumbs slots.                     | -            |
-
-### Breadcrumbs Functions
-
-| Attribute      | Type                                                | Description                                                |
-| -------------- | --------------------------------------------------- | ---------------------------------------------------------- |
-| renderEllipsis | [RenderEllipsisFunction](#render-ellipsis-function) | Handler called when the press is released over the target. |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the Breadcrumbs. Usually a list of `BreadcrumbItem` components.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light",
+      description: "The Breadcrumbs list appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The Breadcrumbs' items color theme.",
+      default: "foreground"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The Breadcrumbs' items size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The Breadcrumbs list border radius.",
+      default: "-"
+    },
+    {
+      attribute: "underline",
+      type: "none | active | hover | focus | always",
+      description: "The Breadcrumbs' items underline style.",
+      default: "none"
+    },
+    {
+      attribute: "separator",
+      type: "ReactNode",
+      description: "The custom separator between Breadcrumbs. It is a chevron by default.",
+      default: "-"
+    },
+    {
+      attribute: "maxItems",
+      type: "number",
+      description: "The maximum number of breadcrumbs to display.",
+      default: "-"
+    },
+    {
+      attribute: "itemsBeforeCollapse",
+      type: "number",
+      description: "The number of items to show before the ellipsis.",
+      default: "-"
+    },
+    {
+      attribute: "itemsAfterCollapse",
+      type: "number",
+      description: "The number of items to show after the ellipsis.",
+      default: "-"
+    },
+    {
+      attribute: "hideSeparator",
+      type: "boolean",
+      description: "Whether to hide the separator between breadcrumbs.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the Breadcrumbs are disabled except the last item.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the Breadcrumbs should display animations.",
+      default: "false"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Partial<Record<\"base\" | \"item\" | \"separator\", string>>",
+      description: "Allows to set custom class names for the breadcrumbs item slots.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"list\" | \"ellipsis\" | \"separator\", string>>",
+      description: "Allows to set custom class names for the breadcrumbs slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Breadcrumbs Events
 
-| Attribute | Type                       | Description                                                                  |
-| --------- | -------------------------- | ---------------------------------------------------------------------------- |
-| onAction  | `(key: React.Key) => void` | Handler called when any breadcrumb item is pressed. It returns the item key. |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler called when any breadcrumb item is pressed. It returns the item key.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### BreadcrumbItem Props
 
-| Attribute        | Type                                                                           | Description                                               | Default      |
-| ---------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------ |
-| children\*       | `ReactNode`                                                                    | The contents of the item. Usually the link label or icon. | -            |
-| color            | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The item color theme.                                     | `foreground` |
-| size             | `sm` \| `md` \| `lg`                                                           | The item size.                                            | `md`         |
-| underline        | `none` \| `active` \| `hover` \| `focus` \| `always`                           | The item underline style.                                 | `none`       |
-| startContent     | `ReactNode`                                                                    | The item start content.                                   | -            |
-| endContent       | `ReactNode`                                                                    | The item end content.                                     | -            |
-| separator        | `ReactNode`                                                                    | The item custom separator. It is a chevron by default.    | -            |
-| isCurrent        | `boolean`                                                                      | Whether the item is the current/active one.               | `false`      |
-| isLast           | `boolean`                                                                      | Whether the item is the last one.                         | `false`      |
-| hideSeparator    | `boolean`                                                                      | Whether to hide the item separator.                       | `false`      |
-| isDisabled       | `boolean`                                                                      | Whether the item is disabled.                             | `false`      |
-| disableAnimation | `boolean`                                                                      | Whether the item should display animations.               | `false`      |
-| classNames       | `Record<"base"｜ "item"｜ "separator", string>`                                | Allows to set custom class names for the item slots.      | -            |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the item. Usually the link label or icon.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The item color theme.",
+      default: "foreground"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The item size.",
+      default: "md"
+    },
+    {
+      attribute: "underline",
+      type: "none | active | hover | focus | always",
+      description: "The item underline style.",
+      default: "none"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The item start content.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The item end content.",
+      default: "-"
+    },
+    {
+      attribute: "separator",
+      type: "ReactNode",
+      description: "The item custom separator. It is a chevron by default.",
+      default: "-"
+    },
+    {
+      attribute: "isCurrent",
+      type: "boolean",
+      description: "Whether the item is the current/active one.",
+      default: "false"
+    },
+    {
+      attribute: "isLast",
+      type: "boolean",
+      description: "Whether the item is the last one.",
+      default: "false"
+    },
+    {
+      attribute: "hideSeparator",
+      type: "boolean",
+      description: "Whether to hide the item separator.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the item is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the item should display animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"item\" | \"separator\", string>>",
+      description: "Allows to set custom class names for the item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### BreadcrumbItem Events
 
-| Attribute    | Type                         | Description                                                                                                 |
-| ------------ | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| onPress      | `(e: PressEvent) => void`    | Handler called when the press is released over the target.                                                  |
-| onPressStart | `(e: PressEvent) => void`    | Handler called when a press interaction starts.                                                             |
-| onPressEnd   | `(e: PressEvent) => void`    | Handler called when a press interaction ends, either over the target or when the pointer leaves the target. |
-| onKeyDown    | `(e: KeyboardEvent) => void` | Handler called when a key is pressed.                                                                       |
-| onKeyUp      | `(e: KeyboardEvent) => void` | Handler called when a key is released.                                                                      |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index 5fabb5da40..61a2989ffb 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -13,7 +13,7 @@ Buttons allow users to perform actions and choose with a single tap.
 
 ---
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Installation
 
@@ -24,7 +24,7 @@ Buttons allow users to perform actions and choose with a single tap.
     npm: "npm install @nextui-org/button",
     yarn: "yarn add @nextui-org/button",
     pnpm: "pnpm add @nextui-org/button",
-    bun: "bun add @nextui-org/button"
+    bun: "bun add @nextui-org/button",
   }}
 />
 
@@ -101,7 +101,12 @@ You can customize the `Button` component by passing custom Tailwind CSS classes
 
 You can also use the `useButton` hook to create your own button component.
 
-<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom Implementation" files={buttonContent.customImpl} />
+<CodeDemo
+  showPreview={false}
+  showOpenInCodeSandbox={false}
+  title="Custom Implementation"
+  files={buttonContent.customImpl}
+/>
 
 ## Button Group
 
@@ -158,45 +163,201 @@ building buttons that work well across devices and interaction methods.
 
 ### Button Props
 
-| Attribute        | Type                                                                         | Description                                                  | Default   |
-| ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------ | --------- |
-| children         | `ReactNode`                                                                  | The content to display in the button.                        | -         |
-| variant          | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The button appearance style.                                 | `solid`   |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The button color theme.                                      | `default` |
-| size             | `sm` \| `md` \| `lg`                                                         | The button size.                                             | `md`      |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The button border radius.                                    | -         |
-| startContent     | `ReactNode`                                                                  | The button start content.                                    | -         |
-| endContent       | `ReactNode`                                                                  | The button end content.                                      | -         |
-| spinner          | `ReactNode`                                                                  | Spinner to display when loading.                             | -         |
-| spinnerPlacement | `start` \| `end`                                                             | The spinner placement.                                       | `start`   |
-| fullWidth        | `boolean`                                                                    | Whether the button should take the full width of its parent. | `false`   |
-| isIconOnly       | `boolean`                                                                    | Whether the button should have the same width and height.    | `false`   |
-| isDisabled       | `boolean`                                                                    | Whether the button is disabled.                              | `false`   |
-| isLoading        | `boolean`                                                                    | Whether the button is loading.                               | `false`   |
-| disableRipple    | `boolean`                                                                    | Whether the button should display a ripple effect on press.  | `false`   |
-| disableAnimation | `boolean`                                                                    | Whether the button should display animations.                | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content to display in the button.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: 'solid | bordered | light | flat | faded | shadow | ghost',
+      description: "The button appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The button color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The button size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The button border radius.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The button start content.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The button end content.",
+      default: "-"
+    },
+    {
+      attribute: "spinner",
+      type: "ReactNode",
+      description: "Spinner to display when loading.",
+      default: "-"
+    },
+    {
+      attribute: "spinnerPlacement",
+      type: "start | end",
+      description: "The spinner placement.",
+      default: "start"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the button should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "isIconOnly",
+      type: "boolean",
+      description: "Whether the button should have the same width and height.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the button is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isLoading",
+      type: "boolean",
+      description: "Whether the button is loading.",
+      default: "false"
+    },
+    {
+      attribute: "disableRipple",
+      type: "boolean",
+      description: "Whether the button should display a ripple effect on press.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the button should display animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Button Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Button Group Props
 
-| Attribute  | Type                                                                         | Description                                     | Default   |
-| ---------- | ---------------------------------------------------------------------------- | ----------------------------------------------- | --------- |
-| children   | `ReactNode` \| `ReactNode[]`                                                 | The buttons to display.                         | -         |
-| variant    | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `ghost` | The buttons appearance style.                   | `solid`   |
-| color      | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The buttons color theme.                        | `default` |
-| size       | `sm` \| `md` \| `lg`                                                         | The buttons size.                               | `md`      |
-| radius     | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The buttons border radius.                      | `xl`      |
-| fullWidth  | `boolean`                                                                    | Whether the buttons should take the full width. | `false`   |
-| isDisabled | `boolean`                                                                    | Whether the buttons are disabled.               | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The buttons to display.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow | ghost",
+      description: "The buttons appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The buttons color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The buttons size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The buttons border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the buttons should take the full width.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the buttons are disabled.",
+      default: "false"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx
index 44b416a83d..dd7513bf8f 100644
--- a/apps/docs/content/docs/components/calendar.mdx
+++ b/apps/docs/content/docs/components/calendar.mdx
@@ -101,7 +101,7 @@ This example validates that the selected date is a weekday and not a weekend acc
 
 ### With Month And Year Picker
 
-Calendar supports month and year picker for rapid selection.
+Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
 
 <CodeDemo title="With Month And Year Picker" files={calendarContent.withMonthAndYearPicker} />
 
@@ -199,44 +199,203 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 ### Calendar Props
 
-| Attribute               | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default             |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| value                   | `DateValue \| null`                                                                                                                                                                                                                                                                                                                                                                           | The current value (controlled).                                                                                                                                                           | -                   |
-| defaultValue            | `DateValue \| null`                                                                                                                                                                                                                                                                                                                                                                           | The default value (uncontrolled).                                                                                                                                                         | -                   |
-| minValue                | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                   |
-| maxValue                | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                   |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`           |
-| visibleMonths           | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop                                    | `1`                 |
-| focusedValue            | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                   |
-| defaultFocusedValue     | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                   |
-| calendarWidth           | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`               |
-| pageBehavior            | `single` \| `visible`                                                                                                                                                                                                                                                                                                                                                                         | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`           |
-| weekdayStyle            | `narrow` \|`short` \| `long` \| `undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`            |
-| showMonthAndYearPickers | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the label should be crossed out.                                                                                                                                                  | `false`             |
-| isDisabled              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`             |
-| isReadOnly              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`             |
-| isInvalid               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                   |
-| autoFocus               | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`             |
-| showHelper              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`             |
-| showShadow              | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected date.                                                                                                                                          | `false`             |
-| isHeaderExpanded        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header is expanded. This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                                   | `false`             |
-| isHeaderDefaultExpanded | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar header should be expanded by default.This is only available if the `showMonthAndYearPickers` prop is set to `true`.                                                  | `false`             |
-| topContent              | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                   |
-| bottomContent           | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                   |
-| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                   |
-| createCalendar          | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars` |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                   |
-| hideDisabledDates       | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`             |
-| disableAnimation        | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`             |
-| classNames              | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>`  | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                   |
+<APITable 
+  data={[
+    {
+      attribute: "value",
+      type: "DateValue | null",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue", 
+      type: "DateValue | null",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "DateValue", 
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.",
+      default: "1"
+    },
+    {
+      attribute: "focusedValue",
+      type: "DateValue",
+      description: "Controls the currently focused date within the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "defaultFocusedValue",
+      type: "DateValue",
+      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      default: "-"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number | string",
+      description: "The width to be applied to the calendar component. This value is multiplied by the visibleMonths number to determine the total width of the calendar.",
+      default: "256"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "single | visible",
+      description: "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
+      default: "visible"
+    },
+    {
+      attribute: "weekdayStyle",
+      type: "narrow | short | long | undefined",
+      description: "The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.",
+      default: "narrow"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether the label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean", 
+      description: "Whether the calendar is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the calendar value is immutable.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the current selection is invalid according to application logic.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether to automatically focus the calendar when it mounts.",
+      default: "false"
+    },
+    {
+      attribute: "showHelper",
+      type: "boolean",
+      description: "Whether to show the description or error message.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean", 
+      description: "Whether to show the shadow in the selected date.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderExpanded",
+      type: "boolean",
+      description: "Whether the calendar header is expanded. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderDefaultExpanded",
+      type: "boolean",
+      description: "Whether the calendar header should be expanded by default. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the top of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the bottom of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "createCalendar",
+      type: "(calendar: SupportedCalendars) => Calendar | null",
+      description: "This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components.",
+      default: "all calendars"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "hideDisabledDates",
+      type: "boolean",
+      description: "Whether to hide the disabled or invalid dates.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the calendar.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'prevButton' | 'nextButton' | 'headerWrapper' | 'header' | 'title' | 'content' | 'gridWrapper' | 'grid' | 'gridHeader' | 'gridHeaderRow' | 'gridHeaderCell' | 'gridBody' | 'gridBodyRow' | 'cell' | 'cellButton' | 'pickerWrapper' | 'pickerMonthList' | 'pickerYearList' | 'pickerHighlight' | 'pickerItem' | 'helperWrapper' | 'errorMessage', string>>",
+      description: "Allows to set custom class names for the calendar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Calendar Events
 
-| Attribute              | Type                               | Description                                                                                                                              |
-| ---------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange               | `(value: MappedDateValue) => void` | Handler that is called when the value changes.                                                                                           |
-| onFocusChange          | `(date: CalendarDate) => void`     | Handler that is called when the focused date changes.                                                                                    |
-| onHeaderExpandedChange | `(isExpanded: boolean) => void`    | The event handler for the calendar header expanded state. This is only available if the `showMonthAndYearPickers` prop is set to `true`. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: MappedDateValue) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(date: CalendarDate) => void",
+      description: "Handler that is called when the focused date changes.",
+      default: "-"
+    },
+    {
+      attribute: "onHeaderExpandedChange",
+      type: "(isExpanded: boolean) => void", 
+      description: "The event handler for the calendar header expanded state. This is only available if the showMonthAndYearPickers prop is set to true.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
index 160d766293..b66488ded8 100644
--- a/apps/docs/content/docs/components/card.mdx
+++ b/apps/docs/content/docs/components/card.mdx
@@ -73,7 +73,9 @@ You can use other NextUI components inside the card to compose a more complex ca
 
 ### Blurred Card
 
-You can pass the `isBlurred` prop to the card to blur the card.
+You can pass the `isBlurred` prop to the card to blur the card. Card gets blurred properties based on its ancestor element.
+
+> **Note**: To achieve the blur effect as seen in the preview, you need to provide a suitable background (e.g., `bg-gradient-to-tr from-[#FFB457] to-[#FF705B]`) to an ancestor element of the Card component allowing the Card's blur effect to be visible.
 
 <CodeDemo isGradientBox title="Blurred Card" files={cardContent.blurred} />
 
@@ -127,28 +129,122 @@ You can use `Image` component as the cover of the card by taking it out of the `
 
 ### Card Props
 
-| Attribute                 | Type                                                    | Description                                                                   | Default |
-| ------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------- | ------- |
-| children                  | `ReactNode` \| `ReactNode[]`                            | Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.            | -       |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                          | The card shadow.                                                              | `md`    |
-| radius                    | `none` \| `sm` \| `md` \| `lg`                          | The card border radius.                                                       | `lg`    |
-| fullWidth                 | `boolean`                                               | Whether the card should take the full width of its parent.                    | `false` |
-| isHoverable               | `boolean`                                               | Whether the card should change the background on hover.                       | `false` |
-| isPressable               | `boolean`                                               | Whether the card should allow to be pressed.                                  | `false` |
-| isBlurred                 | `boolean`                                               | Whether the card background should be blurred.                                | `false` |
-| isFooterBlurred           | `boolean`                                               | Whether the card footer background should be blurred.                         | `false` |
-| isDisabled                | `boolean`                                               | Whether the card should be disabled. The press events will be ignored.        | `false` |
-| disableAnimation          | `boolean`                                               | Whether to disable the animation.                                             | `false` |
-| disableRipple             | `boolean`                                               | Whether to disable ripple effect. Only when `isPressable` is true.            | `false` |
-| allowTextSelectionOnPress | `boolean`                                               | Whether to allow text selection on pressing. Only when `isPressable` is true. | `false` |
-| classNames                | `Record<"base"｜ "header"｜ "body"｜ "footer", string>` | Allows to set custom class names for the card slots.                          | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "Usually the Card parts, `CardHeader`, `CardBody` and `CardFooter`.",
+      default: "-"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The card shadow.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The card border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the card should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "isHoverable",
+      type: "boolean",
+      description: "Whether the card should change the background on hover.",
+      default: "false"
+    },
+    {
+      attribute: "isPressable",
+      type: "boolean",
+      description: "Whether the card should allow to be pressed.",
+      default: "false"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the card background should be blurred.",
+      default: "false"
+    },
+    {
+      attribute: "isFooterBlurred",
+      type: "boolean",
+      description: "Whether the card footer background should be blurred.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the card should be disabled. The press events will be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "disableRipple",
+      type: "boolean",
+      description: "Whether to disable ripple effect. Only when `isPressable` is true.",
+      default: "false"
+    },
+    {
+      attribute: "allowTextSelectionOnPress",
+      type: "boolean",
+      description: "Whether to allow text selection on pressing. Only when `isPressable` is true.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'header' | 'body' | 'footer', string>>",
+      description: "Allows to set custom class names for the card slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Card Events
 
-| Attribute     | Type                           | Description                                                                                                             |
-| ------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
-| onPress       | `(e: PressEvent) => void`      | Handler that is called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler that is called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler that is called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler that is called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
index e1ad2283df..49c7b1f3eb 100644
--- a/apps/docs/content/docs/components/checkbox-group.mdx
+++ b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -93,32 +93,146 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Group Props
 
-| Attribute          | Type                                                                        | Description                                                                                                                                                   | Default    |
-| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children           | `ReactNode[]` \| `ReactNode[]`                                              | The checkboxes items.                                                                                                                                         | -          |
-| orientation        | `vertical` \| `horizontal`                                                  | The axis the checkbox group items should align with.                                                                                                          | `vertical` |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkboxes.                                                                                                                                  | `primary`  |
-| size               | `xs` \| `sm` \| `md` \| `lg` \| `xl`                                        | The size of the checkboxes.                                                                                                                                   | `md`       |
-| radius             | `none` \| `base` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `full`          | The radius of the checkboxes.                                                                                                                                 | `md`       |
-| name               | `string`                                                                    | The name of the CheckboxGroup, used when submitting an HTML form.                                                                                             | -          |
-| label              | `string`                                                                    | The label of the CheckboxGroup.                                                                                                                               | -          |
-| value              | `string[]`                                                                  | The current selected values. (controlled).                                                                                                                    | -          |
-| lineThrough        | `boolean`                                                                   | Whether the checkboxes label should be crossed out.                                                                                                           | `false`    |
-| defaultValue       | `string[]`                                                                  | The default selected values. (uncontrolled).                                                                                                                  | -          |
-| isInvalid          | `boolean`                                                                   | Whether the checkbox group is invalid.                                                                                                                        | `false`    |
-| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                        | -          |
-| description        | `ReactNode`                                                                 | The checkbox group description.                                                                                                                               | -          |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                                                             | -          |
-| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
-| validationBehavior | `native` \| `aria`                                                          | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
-| isDisabled         | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                                                       | `false`    |
-| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                     | `false`    |
-| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                           | -          |
-| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                     | `false`    |
-| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the checkbox group slots.                                                                                                | -          |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode[] | ReactNode[]",
+      description: "The checkboxes items.",
+      default: "-"
+    },
+    {
+      attribute: "orientation",
+      type: "vertical | horizontal",
+      description: "The axis the checkbox group items should align with.",
+      default: "vertical"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the checkboxes.",
+      default: "primary"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl",
+      description: "The size of the checkboxes.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | base | xs | sm | md | lg | xl | full",
+      description: "The radius of the checkboxes.",
+      default: "md"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the CheckboxGroup, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "string",
+      description: "The label of the CheckboxGroup.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string[]",
+      description: "The current selected values. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "lineThrough",
+      type: "boolean",
+      description: "Whether the checkboxes label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string[]",
+      description: "The default selected values. (uncontrolled)",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the checkbox group is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the inputs should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "The checkbox group description.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "The checkbox group error message.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string[]) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if validationBehavior is set to native. For real-time validation, use the isInvalid prop.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the checkbox group is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"label\", string>>",
+      description: "Allows to set custom class names for the checkbox group slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Checkbox Group Events
 
-| Attribute | Type                        | Description                                    |
-| --------- | --------------------------- | ---------------------------------------------- |
-| onChange  | `(value: string[]) => void` | Handler that is called when the value changes. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: string[]) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
index 567d776ea7..645970d3a6 100644
--- a/apps/docs/content/docs/components/checkbox.mdx
+++ b/apps/docs/content/docs/components/checkbox.mdx
@@ -146,33 +146,137 @@ In case you need to customize the checkbox even further, you can use the `useChe
 
 ### Checkbox Props
 
-| Attribute        | Type                                                                        | Description                                                                                                           | Default   |
-| ---------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                 | The label of the checkbox.                                                                                            | -         |
-| icon             | [CheckboxIconProps](#checkbox-icon-props)                                   | The icon to be displayed when the checkbox is checked.                                                                | -         |
-| value            | `string`                                                                    | The value of the checkbox element, used when submitting an HTML form.                                                    |           |
-| name             | `string`                                                                    | The name of the checkbox element, used when submitting an HTML form.                                                     |           |
-| size             | `sm` \| `md` \| `lg`                                                        | The size of the checkbox.                                                                                             | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the checkbox.                                                                                            | `primary` |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The radius of the checkbox.                                                                                           | -         |
-| lineThrough      | `boolean`                                                                   | Whether the label should be crossed out.                                                                              | `false`   |
-| isSelected       | `boolean`                                                                   | Whether the element should be selected (controlled).                                                                  |           |
-| defaultSelected  | `boolean`                                                                   | Whether the element should be selected (uncontrolled).                                                                |           |
-| isRequired       | `boolean`                                                                   | Whether user checkbox is required on the checkbox before form submission.                                                   | `false`   |
-| isReadOnly       | `boolean`                                                                   | Whether the checkbox can be selected but not changed by the user.                                                        |           |
-| isDisabled       | `boolean`                                                                   | Whether the checkbox is disabled.                                                                                     | `false`   |
-| isIndeterminate  | `boolean`                                                                   | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction. |           |
-| isInvalid        | `boolean`                                                                   | Whether the checkbox is invalid.                                                                                         | `false`   |
-| validationState  | `valid` \| `invalid`                                                        | Whether the checkbox should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -         |
-| disableAnimation | `boolean`                                                                   | Whether the animation should be disabled.                                                                             | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "icon"｜ "label", string>`                     | Allows to set custom class names for the checkbox slots.                                                              | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the checkbox.",
+      default: "-"
+    },
+    {
+      attribute: "icon",
+      type: "CheckboxIconProps",
+      description: "The icon to be displayed when the checkbox is checked.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The value of the checkbox element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the checkbox element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the checkbox.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the checkbox.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the checkbox.",
+      default: "-"
+    },
+    {
+      attribute: "lineThrough",
+      type: "boolean",
+      description: "Whether the label should be crossed out.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkbox is required on the checkbox before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkbox can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the checkbox is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the checkbox is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the checkbox should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜ \"wrapper\"｜ \"icon\"｜ \"label\", string>>",
+      description: "Allows to set custom class names for the checkbox slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Checkbox Events
 
-| Attribute     | Type                                  | Description                                                                                                                                              |
-| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing event.target.checked (boolean).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(isSelected: boolean) => void",
+      description: "Handler that is called when the element's selection state changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/chip.mdx b/apps/docs/content/docs/components/chip.mdx
index 0b68899d05..995c8e7fdb 100644
--- a/apps/docs/content/docs/components/chip.mdx
+++ b/apps/docs/content/docs/components/chip.mdx
@@ -99,21 +99,80 @@ You can customize the `Chip` component by passing custom Tailwind CSS classes to
 
 ### Chip Props
 
-| Attribute    | Type                                                                         | Description                                                                                                                  | Default   |
-| ------------ | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children     | `ReactNode`                                                                  | The content of the chip.                                                                                                     | -         |
-| variant      | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `dot`   | The chip appearance style.                                                                                                   | `solid`   |
-| color        | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`  | The color of the chip.                                                                                                       | `default` |
-| size         | `sm` \| `md` \| `lg`                                                         | The size of the chip.                                                                                                        | `md`      |
-| radius       | `none` \| `sm` \| `md` \| `lg` \| `full`                                     | The radius of the chip.                                                                                                      | `full`    |
-| avatar       | `ReactNode`                                                                  | Avatar to be rendered in the left side of the chip.                                                                          | -         |
-| startContent | `ReactNode`                                                                  | Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop.                                  | -         |
-| endContent   | `ReactNode`                                                                  | Element to be rendered in the right side of the chip. This prop overrides the default close button when `onClose` is passed. | -         |
-| isDisabled   | `boolean`                                                                    | Whether the chip is disabled.                                                                                                | `false`   |
-| classNames   | `Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string>`      | Allows to set custom class names for the chip slots.                                                                         | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the chip.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow | dot",
+      description: "The chip appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the chip.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the chip.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the chip.",
+      default: "full"
+    },
+    {
+      attribute: "avatar",
+      type: "ReactNode",
+      description: "Avatar to be rendered in the left side of the chip.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the chip. This prop overrides the avatar prop.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the chip. This prop overrides the default close button when onClose is passed.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the chip is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: 'Partial<Record<"base" | "content" | "dot" | "avatar" | "closeButton", string>>',
+      description: "Allows to set custom class names for the chip slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Chip Events
 
-| Attribute | Type                      | Description                                                                                                                        |
-| --------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| onClose   | `(e: PressEvent) => void` | Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent). |
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "(e: PressEvent) => void",
+      description: "Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent).",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
index 611808fc84..5cd363ba83 100644
--- a/apps/docs/content/docs/components/circular-progress.mdx
+++ b/apps/docs/content/docs/components/circular-progress.mdx
@@ -119,19 +119,91 @@ You can customize the `CircularProgress` component by passing custom Tailwind CS
 
 ### Circular Progress Props
 
-| Attribute        | Type                                                                                                                    | Description                                                       | Default              |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------------------- |
-| label            | `ReactNode`                                                                                                             | The content to display as the label.                              | -                    |
-| size             | `sm` \| `md` \| `lg`                                                                                                    | The size of the indicator.                                        | `md`                 |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                             | The color of the indicator.                                       | `primary`            |
-| value            | `number`                                                                                                                | The current value (controlled).                                   | -                    |
-| valueLabel       | `ReactNode`                                                                                                             | The content to display as the value's label (e.g. 1 of 4).        | -                    |
-| minValue         | `number`                                                                                                                | The smallest value allowed for the input.                         | `0`                  |
-| maxValue         | `number`                                                                                                                | The largest value allowed for the input.                          | `100`                |
-| formatOptions    | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) | The options to format the value.                                  | `{style: 'percent'}` |
-| isIndeterminate  | `boolean`                                                                                                               | Whether the progress is indeterminate.                            | `true`               |
-| showValueLabel   | `boolean`                                                                                                               | Whether to show the value label.                                  | `true`               |
-| strokeWidth      | `number`                                                                                                                | The width of the progress stroke.                                 | `2`                  |
-| isDisabled       | `boolean`                                                                                                               | Whether the progress is disabled.                                 | `false`              |
-| disableAnimation | `boolean`                                                                                                               | Whether to disable the animation.                                 | `false`              |
-| classNames       | `Record<"base"｜"svgWrapper"｜"svg"｜"track"｜"indicator"｜"value"｜"label", string>`                                   | Allows to set custom class names for the circular progress slots. | -                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the indicator.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the indicator.",
+      default: "primary"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "valueLabel",
+      type: "ReactNode",
+      description: "The content to display as the value's label (e.g. 1 of 4).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The smallest value allowed for the input.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The largest value allowed for the input.",
+      default: "100"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "{style: 'percent'}"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Whether the progress is indeterminate.",
+      default: "true"
+    },
+    {
+      attribute: "showValueLabel",
+      type: "boolean",
+      description: "Whether to show the value label.",
+      default: "true"
+    },
+    {
+      attribute: "strokeWidth",
+      type: "number",
+      description: "The width of the progress stroke.",
+      default: "2"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the progress is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base'｜'svgWrapper'｜'svg'｜'track'｜'indicator'｜'value'｜'label', string>>",
+      description: "Allows to set custom class names for the circular progress slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
index 3b723f99af..2678be19f5 100644
--- a/apps/docs/content/docs/components/code.mdx
+++ b/apps/docs/content/docs/components/code.mdx
@@ -56,9 +56,31 @@ Code is a component used to display inline code.
 
 ### Code Props
 
-| Attribute | Type                                                                        | Description              | Default   |
-| --------- | --------------------------------------------------------------------------- | ------------------------ | --------- |
-| children  | `ReactNode`                                                                 | The content of the code. | -         |
-| size      | `sm` \| `md` \| `lg`                                                        | The size of the code.    | `sm`      |
-| color     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the code.   | `default` |
-| radius    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The radius of the code.  | `sm`      |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the code.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the code.",
+      default: "sm"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the code.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the code.",
+      default: "sm"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
index 473bf7a257..c2616b2e54 100644
--- a/apps/docs/content/docs/components/date-input.mdx
+++ b/apps/docs/content/docs/components/date-input.mdx
@@ -104,9 +104,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -129,9 +129,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -153,9 +153,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -177,9 +177,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -200,9 +200,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -223,9 +223,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -288,48 +288,176 @@ import {parseZonedDateTime} from "@internationalized/date";
 
 ### DateInput Props
 
-| Attribute               | Type                                                                                                                              | Description                                                                                                                                                   | Default   |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| label                   | `ReactNode`                                                                                                                       | The content to display as the label.                                                                                                                          | -         |
-| value                   | `DateValue`                                                                                                                       | The current value of the date input (controlled).                                                                                                             | -         |
-| defaultValue            | `DateValue`                                                                                                                       | The default value of the date input (uncontrolled).                                                                                                           | -         |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                   | The variant of the date input.                                                                                                                                | `flat`    |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                       | The color of the date input.                                                                                                                                  | `default` |
-| size                    | `sm` \| `md` \| `lg`                                                                                                              | The size of the date input.                                                                                                                                   | `md`      |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                          | The radius of the date input.                                                                                                                                 | -         |
-| placeholderValue        | `DateValue`                                                                                                                       | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight.                          | -         |
-| minValue                | `DateValue`                                                                                                                       | The minimum allowed date that a user may select.                                                                                                              | -         |
-| maxValue                | `DateValue`                                                                                                                       | The maximum allowed date that a user may select.                                                                                                              | -         |
-| locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                                                        | -         |
-| description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                                           | -         |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                                          | -         |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior      | `native` \| `aria`                                                                                                                | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
-| startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                                                    | -         |
-| endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                                                   | -         |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                           | The position of the label.                                                                                                                                    | `inside`  |
-| isRequired              | `boolean`                                                                                                                         | Whether user input is required on the input before form submission.                                                                                           | `false`   |
-| isReadOnly              | `boolean`                                                                                                                         | Whether the input can be selected but not changed by the user.                                                                                                | -         |
-| isDisabled              | `boolean`                                                                                                                         | Whether the input is disabled.                                                                                                                                | `false`   |
-| isInvalid               | `boolean`                                                                                                                         | Whether the input value is invalid.                                                                                                                           | `false`   |
-| inputRef                | `ReactRef<HTMLInputElement \| null>`                                                                                              | A ref for the hidden input element for HTML form submission.                                                                                                  | -         |
-| createCalendar          | `(name: string) => Calendar`                                                                                                      | A function that creates a Calendar object for a given calendar identifier.                                                                                    | -         |
-| isDateUnavailable       | `(date: DateValue) => boolean`                                                                                                    | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      | -         |
-| autoFocus               | `boolean`                                                                                                                         | Whether the element should receive focus on render.                                                                                                           | `false`   |
-| hourCycle               | `12` \| `24`                                                                                                                      | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -         |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                           | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -         |
-| hideTimeZone            | `boolean`                                                                                                                         | Whether to hide the time zone abbreviation.                                                                                                                   | `false`   |
-| shouldForceLeadingZeros | `boolean`                                                                                                                         | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`    |
-| disableAnimation        | `boolean`                                                                                                                         | Whether to disable animations.                                                                                                                                | `false`   |
-| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`   | Allows to set custom class names for the date input slots.                                                                                                    | -         |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "DateValue",
+      description: "The current value of the date input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "DateValue",
+      description: "The default value of the date input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "DateValue",
+      description: "A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults current date at midnight.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "DateValue",
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "locale",
+      type: "string",
+      description: "The locale to display and edit the value according to.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date input. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input value is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### DateInput Events
 
-| Attribute     | Type                                                                   | Description                                                     |     |
-| ------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------- | --- |
-| onChange      | `((value: ZonedDateTime \| CalendarDate \| CalendarDateTime) => void)` | Handler that is called when the date-input's value changes.     | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                            | Handler that is called when the element receives focus.         | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                            | Handler that is called when the element loses focus.            | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                         | Handler that is called when the element's focus status changes. | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                           | Handler that is called when a key is pressed.                   | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                           | Handler that is called when a key is released.                  | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: ZonedDateTime | CalendarDate | CalendarDateTime) => void",
+      description: "Handler that is called when the date-input's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
index 7e11ee64cf..d7d85b46bd 100644
--- a/apps/docs/content/docs/components/date-picker.mdx
+++ b/apps/docs/content/docs/components/date-picker.mdx
@@ -83,6 +83,8 @@ You can also pass an error message as a function. This allows for dynamic error
 
 ### With Month and Year Pickers
 
+You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.
+
 <CodeDemo title="With Month and Year Pickers" files={datePickerContent.withMonthAndYearPickers} />
 
 ### With Time Fields
@@ -93,7 +95,13 @@ You can also pass an error message as a function. This allows for dynamic error
 
 You can use the `selector` to add content to the start and end of the date-picker.
 
-<CodeDemo title="Start and End Content" files={datePickerContent.selectorIcon} />
+<CodeDemo title="Selector Icon" files={datePickerContent.selectorIcon} />
+
+### Selector Button Placement
+
+You can change the position of the selector button by setting the `selectorButtonPlacement` property to `start` or `end`.
+
+<CodeDemo title="Selector Button Placement" files={datePickerContent.selectorButtonPlacement} />
 
 ### Controlled
 
@@ -111,9 +119,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -136,9 +144,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -160,9 +168,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -184,9 +192,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -206,9 +214,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -238,9 +246,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -305,56 +313,224 @@ import {I18nProvider} from "@react-aria/i18n";
 
 ### DatePicker Props
 
-| Attribute               | Type                                                                                                                                                     | Description                                                                                                                                                   | Default                                                              |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------       | -------------------------------------------------------------------- |
-| label                   | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                          | -                                                                    |
-| value                   | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The current value of the date-picker (controlled).                                                                                                            | -                                                                    |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                | `flat`                                                               |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                                  | `default`                                                            |
-| size                    | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                                   | `md`                                                                 |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                                 | -                                                                    |
-| defaultValue            | `string` \| undefined                                                                                                                                    | The default value of the date-picker (uncontrolled).                                                                                                          | -                                                                    |
-| placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                           | -                                                                    |
-| description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                          | -                                                                    |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                          | -                                                                    |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
-| validationBehavior      | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                                                               |
-| startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                                   | -                                                                    |
-| endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                                  | -                                                                    |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                                    | `inside`                                                             |
-| isRequired              | `boolean`                                                                                                                                                | Whether user input is required on the date-picker before form submission.                                                                                     | `false`                                                              |
-| isReadOnly              | `boolean`                                                                                                                                                | Whether the date-picker can be selected but not changed by the user.                                                                                          |                                                                      |
-| isDisabled              | `boolean`                                                                                                                                                | Whether the date-picker is disabled.                                                                                                                          | `false`                                                              |
-| isInvalid               | `boolean`                                                                                                                                                | Whether the date-picker is invalid.                                                                                                                           | `false`                                                              |
-| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.       | `1`                                                                  |
-| selectorIcon            | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                          |                                                                      |
-| pageBehavior            | `PageBehavior` \| `undefined`                                                                                                                            | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.           | `visible`                                                            |
-| visibleMonths           | `number` \| `undefined`                                                                                                                                  | The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the `showMonthAndYearPickers` prop.       | `1`                                                                  |
-| calendarWidth           | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                            | `256`                                                                |
-| CalendarTopContent      | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                         |                                                                      |
-| isDateUnavailable       | `((date: DateValue) => boolean)` \| `undefined`                                                                                                          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                      |
-| autoFocus               | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                           | `false`                                                              |
-| hourCycle               | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                 | -                                                                    |
-| granularity             | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                 | -                                                                    |
-| hideTimeZone            | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                                   | `false`                                                              |
-| shouldForceLeadingZeros | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                      | `true`                                                               |
-| CalendarBottomContent   | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                      |                                                                      |
-| showMonthAndYearPickers | `boolean` \| `undefined`                                                                                                                                 | Whether the calendar should show month and year pickers.                                                                                                      | false                                                                |
-| popoverProps            | `PopoverProps` \| `undefined`                                                                                                                            | Props to be passed to the popover component.                                                                                                                  | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
-| selectorButtonProps     | `ButtonProps` \| `undefined`                                                                                                                             | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| calendarProps           | `CalendarProps` \| `undefined`                                                                                                                           | Props to be passed to the selector button component.                                                                                                          | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
-| classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
-| dateInputClassNames     | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`                          | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots).                                                               | -                                                                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The current value of the date-picker (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the date-picker (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The placeholder of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date-picker. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: MappedDateValue<DateValue>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the date-picker.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the date-picker before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the date-picker can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the date-picker is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the date-picker is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported.",
+      default: "1"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon to toggle the date picker popover. Usually a calendar icon.",
+      default: "-"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "PageBehavior",
+      description: "Controls the behavior of paging.",
+      default: "visible"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number",
+      description: "The width to be applied to the calendar component.",
+      default: "256"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "day | hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the date picker.",
+      default: "-"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the month, day, and hour fields.",
+      default: "true"
+    }
+  ]}
+/>
 
 ### DatePicker Events
 
-| Attribute     | Type                                                                                 | Description                                                     |     |
-| ------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------- | --- |
-| onChange      | `((value: ZonedDateTime  \| CalendarDate \| CalendarDateTime) => void)` \| undefined | Handler that is called when the date-picker's value changes.    | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                                          | Handler that is called when the element receives focus.         | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                                          | Handler that is called when the element loses focus.            | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                                       | Handler that is called when the element's focus status changes. | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                                         | Handler that is called when a key is pressed.                   | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                                         | Handler that is called when a key is released.                  | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: ZonedDateTime | CalendarDate | CalendarDateTime) => void",
+      description: "Handler that is called when the date-picker's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx
index a0cdd14ee9..8dbaddd5cd 100644
--- a/apps/docs/content/docs/components/date-range-picker.mdx
+++ b/apps/docs/content/docs/components/date-range-picker.mdx
@@ -96,6 +96,12 @@ You can also pass an error message as a function. This allows for dynamic error
 
 <CodeDemo title="With Error Message Function" files={dateRangePickerContent.errorMessageFunction} />
 
+### With Month and Year Pickers
+
+You can show month and year pickers in the calendar popover by setting the `showMonthAndYearPickers` property to `true`. However, passing a number greater than 1 to the `visibleMonths` prop will disable this feature.
+
+<CodeDemo title="With Month and Year Pickers" files={dateRangePickerContent.withMonthAndYearPickers} />
+
 ### With Time Fields
 
 DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value.
@@ -106,7 +112,13 @@ DateRangePicker automatically includes time fields when a `CalendarDateTime` or
 
 You can use the `selector` to add content to the start and end of the date-range-picker.
 
-<CodeDemo title="Start and End Content" files={dateRangePickerContent.selectorIcon} />
+<CodeDemo title="Selector Icon" files={dateRangePickerContent.selectorIcon} />
+
+### Selector Button Placement
+
+You can change the position of the selector button by setting the `selectorButtonPlacement` property to `start` or `end`.
+
+<CodeDemo title="Selector Button Placement" files={dateRangePickerContent.selectorButtonPlacement} />
 
 ### Controlled
 
@@ -124,9 +136,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -149,9 +161,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -173,9 +185,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date",
-    yarn: "yarn add @internationalized/date",
-    pnpm: "pnpm add @internationalized/date",
+    npm: "npm install @internationalized/date@3.5.5",
+    yarn: "yarn add @internationalized/date@3.5.5",
+    pnpm: "pnpm add @internationalized/date@3.5.5",
   }}
 />
 
@@ -197,9 +209,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -219,9 +231,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -244,9 +256,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -264,9 +276,9 @@ in multiple formats into `ZonedDateTime` objects.
 
 <PackageManagers
   commands={{
-    npm: "npm install @internationalized/date @react-aria/i18n",
-    yarn: "yarn add @internationalized/date @react-aria/i18n",
-    pnpm: "pnpm add @internationalized/date @react-aria/i18n",
+    npm: "npm install @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    yarn: "yarn add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
+    pnpm: "pnpm add @internationalized/date@3.5.5 @react-aria/i18n@3.12.2",
   }}
 />
 
@@ -348,61 +360,326 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
 
 ### DateRangePicker Props
 
-| Attribute                 | Type                                                                                                                                                     | Description                                                                                                                                                             | Default                                                              |
-|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
-| label                     | `ReactNode`                                                                                                                                              | The content to display as the label.                                                                                                                                    | -                                                                    |
-| value                     | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The current value of the date-range-picker (controlled).                                                                                                                | -                                                                    |
-| variant                   | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                          | The variant of the date input.                                                                                                                                          | `flat`                                                               |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                              | The color of the date input.                                                                                                                                            | `default`                                                            |
-| size                      | `sm` \| `md` \| `lg`                                                                                                                                     | The size of the date input.                                                                                                                                             | `md`                                                                 |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                 | The radius of the date input.                                                                                                                                           | -                                                                    |
-| minValue                  | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The minimum value of the date-range-picker.                                                                                                                             | -                                                                    |
-| maxValue                  | `RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>` \| `undefined` \| `null`                                                                 | The maximum value of the date-range-picker.                                                                                                                             | -                                                                    |
-| defaultValue              | `string` \| undefined                                                                                                                                    | The default value of the date-range-picker (uncontrolled).                                                                                                              | -                                                                    |
-| placeholderValue          | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-range-picker.                                                                                                                               | -                                                                    |
-| description               | `ReactNode`                                                                                                                                              | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.                                                              | -                                                                    |
-| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                                    | -                                                                    |
-| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
-| validationBehavior        | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.          | `aria`                                                               |
-| startContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-range-picker.                                                                                                       | -                                                                    |
-| endContent                | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-range-picker.                                                                                                      | -                                                                    |
-| startName                 | `string`                                                                                                                                                 | The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) | -                                                                    |
-| endName                   | `string`                                                                                                                                                 | The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname)   | -                                                                    |
-| labelPlacement            | `inside` \| `outside` \| `outside-left`                                                                                                                  | The position of the label.                                                                                                                                              | `inside`                                                             |
-| isOpen                    | `boolean`                                                                                                                                                | Whether the date picker popover is open.                                                                                                                                | -                                                                    |
-| defaultOpen               | `boolean`                                                                                                                                                | Whether the date picker popover is open by default.                                                                                                                     | `false`                                                              |
-| isRequired                | `boolean`                                                                                                                                                | Whether user input is required on the date-range-picker before form submission.                                                                                         | `false`                                                              |
-| isReadOnly                | `boolean`                                                                                                                                                | Whether the date-range-picker can be selected but not changed by the user.                                                                                              |                                                                      |
-| isDisabled                | `boolean`                                                                                                                                                | Whether the date-range-picker is disabled.                                                                                                                              | `false`                                                              |
-| isInvalid                 | `boolean`                                                                                                                                                | Whether the date-range-picker is invalid.                                                                                                                               | `false`                                                              |
-| selectorIcon              | `ReactNode`                                                                                                                                              | The icon to toggle the date picker popover. Usually a calendar icon.                                                                                                    |                                                                      |
-| pageBehavior              | `single` \| `visible`                                                                                                                                    | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                     | `visible`                                                            |
-| visibleMonths             | `number`                                                                                                                                                 | The number of months to display at once. Up to 3 months are supported.                                                                                                  | `1`                                                                  |
-| autoFocus                 | `boolean`                                                                                                                                                | Whether the element should receive focus on render.                                                                                                                     | `false`                                                              |
-| hourCycle                 | `12` \| `24`                                                                                                                                             | Whether to display the time in 12 or 24 hour format. This is determined by the user's locale.                                                                           | -                                                                    |
-| granularity               | `day` \| `hour` \| `minute` \| `second`                                                                                                                  | Determines the smallest unit that is displayed in the date picker. Typically "day" for dates.                                                                           | -                                                                    |
-| hideTimeZone              | `boolean`                                                                                                                                                | Whether to hide the time zone abbreviation.                                                                                                                             | `false`                                                              |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                            | false                                                                |
-| shouldForceLeadingZeros   | `boolean`                                                                                                                                                | Whether to always show leading zeros in the month, day, and hour fields.                                                                                                | `true`                                                               |
-| calendarWidth             | `number`                                                                                                                                                 | The width to be applied to the calendar component.                                                                                                                      | `256`                                                                |
-| CalendarTopContent        | `ReactNode`                                                                                                                                              | Top content to be rendered in the calendar component.                                                                                                                   |                                                                      |
-| CalendarBottomContent     | `ReactNode`                                                                                                                                              | Bottom content to be rendered in the calendar component.                                                                                                                |                                                                      |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                | enables a range to be selected even if there are unavailable dates in the middle                                                                                        | false                                                                |
-| popoverProps              | `PopoverProps`                                                                                                                                           | Props to be passed to the popover component.                                                                                                                            | `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`     |
-| selectorButtonProps       | `ButtonProps`                                                                                                                                            | Props to be passed to the selector button component.                                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| calendarProps             | `CalendarProps`                                                                                                                                          | Props to be passed to the selector button component.                                                                                                                    | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| timeInputProps            | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                                         | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
-| disableAnimation          | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                           | `false`                                                              |
-| classNames                | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-range-picker slots.                                                                                                       | -                                                                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The current value of the date-range-picker (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the date input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the date input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the date input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the date input.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The minimum value of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime> | undefined | null",
+      description: "The maximum value of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the date-range-picker (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "ZonedDateTime | CalendarDate | CalendarDateTime | undefined | null",
+      description: "The placeholder of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the date input.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the date-range-picker.",
+      default: "-"
+    },
+    {
+      attribute: "startName",
+      type: "string",
+      description: "The name of the start date input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "endName",
+      type: "string",
+      description: "The name of the end date input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the date picker popover is open.",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the date picker popover is open by default.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the date-range-picker before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the date-range-picker can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the date-range-picker is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the date-range-picker is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "The icon to toggle the date picker popover. Usually a calendar icon.",
+      default: "-"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "single | visible",
+      description: "Controls the behavior of paging.",
+      default: "visible"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported.",
+      default: "1"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "false"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "day | hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the date picker.",
+      default: "-"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "false"
+    },
+    {
+      attribute: "allowsNonContiguousRanges",
+      type: "boolean",
+      description: "When combined with isDateUnavailable, determines whether non-contiguous ranges may be selected.",
+      default: "false"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the month, day, and hour fields.",
+      default: "true"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number",
+      description: "The width to be applied to the calendar component.",
+      default: "256"
+    },
+    {
+      attribute: "CalendarTopContent",
+      type: "ReactNode",
+      description: "Top content to be rendered in the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "CalendarBottomContent",
+      type: "ReactNode",
+      description: "Bottom content to be rendered in the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether the calendar should show month and year pickers.",
+      default: "false"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the popover component.",
+      default: "{ placement: \"bottom\", triggerScaleOnOpen: false, offset: 13 }"
+    },
+    {
+      attribute: "selectorButtonProps",
+      type: "ButtonProps",
+      description: "Props to be passed to the selector button component.",
+      default: "{ size: \"sm\", variant: \"light\", radius: \"full\", isIconOnly: true }"
+    },
+    {
+      attribute: "selectorButtonPlacement",
+      type: "start | end",
+      description: "The position of the selector button.",
+      default: "end"
+    },
+    {
+      attribute: "calendarProps",
+      type: "CalendarProps",
+      description: "Props to be passed to the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "timeInputProps",
+      type: "TimeInputProps",
+      description: "Props to be passed to the time input component.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable all animations in the date picker.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"selectorButton\" | \"selectorIcon\" | \"popoverContent\" | \"calendar\" | \"calendarContent\" | \"timeInputLabel\" | \"timeInput\", string>>",
+      description: "Allows to set custom class names for the date-range-picker slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DateRangePicker Events
 
-| Attribute     | Type                                                                                            | Description                                                              |     |
-| ------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --- |
-| onChange      | `((value: RangeValue<CalendarDate \| CalendarDateTime \| ZonedDateTime>) => void)` \| undefined | Handler that is called when the date-range-picker's value changes.       | -   |
-| onOpenChange  | `(isOpen: boolean) => void`                                                                     | Handler that is called when the date picker popover is opened or closed. | -   |
-| onFocus       | `(e: FocusEvent<HTMLInputElement>) => void`                                                     | Handler that is called when the element receives focus.                  | -   |
-| onBlur        | `(e: FocusEvent<HTMLInputElement>) => void`                                                     | Handler that is called when the element loses focus.                     | -   |
-| onFocusChange | `(isFocused: boolean) => void`                                                                  | Handler that is called when the element's focus status changes.          | -   |
-| onKeyDown     | `(e: KeyboardEvent) => void`                                                                    | Handler that is called when a key is pressed.                            | -   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                                                                    | Handler that is called when a key is released.                           | -   |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: RangeValue<CalendarDate | CalendarDateTime | ZonedDateTime>) => void",
+      description: "Handler that is called when the date-range-picker's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the date picker popover is opened or closed.",
+      default: "-"
+    },
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element receives focus.",
+      default: "-"
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<HTMLInputElement>) => void",
+      description: "Handler that is called when the element loses focus.",
+      default: "-"
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/divider.mdx b/apps/docs/content/docs/components/divider.mdx
index ad5d81c36d..74bc965c52 100644
--- a/apps/docs/content/docs/components/divider.mdx
+++ b/apps/docs/content/docs/components/divider.mdx
@@ -65,6 +65,13 @@ Divider is a component that separates content in a page.
 
 ### Divider Props
 
-| Attribute   | Type                       | Description                     | Default      |
-| ----------- | -------------------------- | ------------------------------- | ------------ |
-| orientation | `horizontal` \| `vertical` | The orientation of the divider. | `horizontal` |
+<APITable
+  data={[
+    {
+      attribute: "orientation",
+      type: "`horizontal` | `vertical`",
+      description: "The orientation of the divider.",
+      default: "`horizontal`"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/drawer.mdx b/apps/docs/content/docs/components/drawer.mdx
new file mode 100644
index 0000000000..0772b43894
--- /dev/null
+++ b/apps/docs/content/docs/components/drawer.mdx
@@ -0,0 +1,284 @@
+---
+title: "Drawer"
+description: "Display a panel that slides in from the edge of the screen, containing supplementary content."
+---
+
+import {drawerContent} from "@/content/components/drawer";
+
+# Drawer
+
+Displays a panel that slides in from the edge of the screen, containing supplementary content.
+
+<ComponentLinks component="drawer" reactAriaHook="useModal" />
+
+---
+
+<CarbonAd/>
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add drawer",
+    npm: "npm install @nextui-org/drawer",
+    yarn: "yarn add @nextui-org/drawer",
+    pnpm: "pnpm add @nextui-org/drawer",
+    bun: "bun add @nextui-org/drawer"
+  }}
+/>
+
+## Import
+
+NextUI exports 5 drawer-related components:
+
+- **Drawer**: The main component to display a drawer.
+- **DrawerContent**: The wrapper of the other drawer components.
+- **DrawerHeader**: The header of the drawer.
+- **DrawerBody**: The body of the drawer.
+- **DrawerFooter**: The footer of the drawer.
+
+<ImportTabs
+  commands={{
+    main: `import {
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerBody,
+    DrawerFooter
+} from "@nextui-org/react";`,
+    individual:
+      `import {
+    Drawer,
+    DrawerContent,
+    DrawerHeader,
+    DrawerBody,
+    DrawerFooter
+} from "@nextui-org/drawer";`,
+  }}
+/>
+
+## Usage
+
+When the drawer opens:
+
+- Focus is bounded within the drawer and set to the first tabbable element.
+- Content behind a drawer is inert, meaning that users cannot interact with it.
+
+<CodeDemo title="Usage" files={drawerContent.usage} />
+
+### Sizes
+
+<CodeDemo title="Sizes" files={drawerContent.sizes} />
+
+### Non-dismissible
+
+By default, the drawer can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.
+You can disable this behavior by setting the following properties:
+
+- Set the `isDismissable` property to `false` to prevent the drawer from closing when clicking on the overlay.
+- Set the `isKeyboardDismissDisabled` property to `true` to prevent the drawer from closing when pressing the Esc key.
+
+<CodeDemo title="Non-dissmissible" files={drawerContent.nonDismissable} />
+
+### Drawer placement
+
+The drawer can be placed on any edge of the screen using the `placement` prop:
+- `left` (default)
+- `right`
+- `top`
+- `bottom`
+
+<CodeDemo title="Placement" files={drawerContent.placement} />
+
+### With Form
+
+The `Drawer` handles the focus within the drawer content. It means that you can use the drawer with
+form elements without any problem. The focus returns to the trigger when the drawer closes.
+
+<CodeDemo title="With Form" files={drawerContent.form} />
+
+> **Note**: You can add the `autoFocus` prop to the first `Input` component to focus it when the drawer opens.
+
+### Backdrop
+
+The `Drawer` component has a `backdrop` prop to show a backdrop behind the drawer. The backdrop can be
+either `transparent`, `opaque` or `blur`. The default value is `opaque`.
+
+<CodeDemo title="Backdrop" files={drawerContent.backdrop} />
+
+### Custom Motion
+
+Drawer offers a `motionProps` property to customize the `enter` / `exit` animation.
+
+<CodeDemo title="Custom Motion" files={drawerContent.customMotion} />
+
+> Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
+
+### Custom Styles
+
+<CodeDemo title="Custom Styles" files={drawerContent.customStyles} />
+
+<b>Credits</b>
+
+The Drawer component design is inspired by [Luma](https://x.com/LumaHQ).
+
+
+## Slots
+
+- **wrapper**: The wrapper slot of the drawer. It wraps the `base` and the `backdrop` slots.
+- **base**: The main slot of the drawer content.
+- **backdrop**: The backdrop slot, it is displayed behind the drawer.
+- **header**: The header of the drawer, it is displayed at the top of the drawer.
+- **body**: The body of the drawer, it is displayed in the middle of the drawer.
+- **footer**: The footer of the drawer, it is displayed at the bottom of the drawer.
+- **closeButton**: The close button of the drawer.
+
+## Data Attributes
+
+`Drawer` has the following attributes on the `base` element:
+
+- **data-open**:
+  When the drawer is open. Based on drawer state.
+- **data-dismissable**:
+  When the drawer is dismissable. Based on `isDismissable` prop.
+
+<Spacer y={4} />
+
+## Accessibility
+
+- Content outside the drawer is hidden from assistive technologies while it is open.
+- The drawer optionally closes when interacting outside, or pressing the <Kbd>Esc</Kbd> key.
+- Focus is moved into the drawer on mount, and restored to the trigger element on unmount.
+- While open, focus is contained within the drawer, preventing the user from tabbing outside.
+- Scrolling the page behind the drawer is prevented while it is open, including in mobile browsers.
+
+<Spacer y={4} />
+
+## API
+
+### Drawer Props
+
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the drawer. It's usually the DrawerContent.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | full",
+      description: "The drawer size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The drawer border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "placement",
+      type: "left | right | top | bottom",
+      description: "The drawer position.",
+      default: "right"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the drawer is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the drawer is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether the drawer can be closed by clicking on the overlay or pressing the Esc key.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the Esc key to close the drawer should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the drawer should block the scroll of the page on open.",
+      default: "true"
+    },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Whether to hide the drawer close button.",
+      default: "false"
+    },
+    {
+      attribute: "closeButton",
+      type: "ReactNode",
+      description: "Custom close button to display on top right corner.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the drawer should not have animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'wrapper' | 'base' | 'backdrop' | 'header' | 'body' | 'footer' | 'closeButton', string>>",
+      description: "Allows to set custom class names for the drawer slots.",
+      default: "-"
+    }
+  ]}
+/>
+
+### Drawer Events
+
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the drawer's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the drawer is closed.",
+      default: "-"
+    }
+  ]}
+/>
+
+<Spacer y={4} />
+
+### Drawer types
+
+#### Motion Props
+
+```ts
+export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
+```
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index 24e48716d0..2c49e73405 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -42,18 +42,18 @@ NextUI exports 5 dropdown-related components:
 <ImportTabs
   commands={{
     main: `import {
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownSection,
-  DropdownItem
+    Dropdown,
+    DropdownTrigger,
+    DropdownMenu,
+    DropdownSection,
+    DropdownItem
 } from "@nextui-org/react";`,
     individual: `import {
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownSection,
-  DropdownItem
+    Dropdown,
+    DropdownTrigger,
+    DropdownMenu,
+    DropdownSection,
+    DropdownItem
 } from "@nextui-org/dropdown";`,
   }}
 />
@@ -75,7 +75,7 @@ Dropdown follows the [Collection Components API](https://react-spectrum.adobe.co
 
 Dropdown items can be disabled using the `disabledKeys` prop to the `DropdownMenu` component.
 
-<CodeDemo title="Disabled Keys" highlightedLines="17" files={dropdownContent.disabledKeys} />
+<CodeDemo title="Disabled Keys" files={dropdownContent.disabledKeys} />
 
 > **Note**: It's important to have a unique key for each item, otherwise the disabled keys will not work.
 
@@ -83,13 +83,13 @@ Dropdown items can be disabled using the `disabledKeys` prop to the `DropdownMen
 
 You can use the `onAction` prop to get the key of the selected item.
 
-<CodeDemo title="Action event" highlightedLines="15" files={dropdownContent.action} />
+<CodeDemo title="Action event" files={dropdownContent.action} />
 
 ### Variants
 
 You can use the `variant` in the `DropdownMenu` component to change the `hover` style of the dropdown items.
 
-<CodeDemo title="Variants" highlightedLines="21-22" files={dropdownContent.variants} />
+<CodeDemo title="Variants" files={dropdownContent.variants} />
 
 ### Single Selection
 
@@ -115,7 +115,7 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
 
 You can use the `shortcut` prop to add a shortcut to the dropdown item.
 
-<CodeDemo title="With Shortcut" highlightedLines="14-19" files={dropdownContent.shortcut} />
+<CodeDemo title="With Shortcut" files={dropdownContent.shortcut} />
 
 > **Note**: Dropdown does not handle the shortcut event, you need to handle it yourself.
 
@@ -123,7 +123,7 @@ You can use the `shortcut` prop to add a shortcut to the dropdown item.
 
 It is possible to add icons to the dropdown items using the `startContent` / `endContent` props.
 
-<CodeDemo title="With Icons" highlightedLines="23,30,37,47" files={dropdownContent.icons} />
+<CodeDemo title="With Icons" files={dropdownContent.icons} />
 
 > **Note**: If you use `currentColor` as the icon color, the icon will have the same color as the item text.
 
@@ -133,7 +133,6 @@ You can use the `description` prop to add a description to the dropdown item.
 
 <CodeDemo
   title="With Description"
-  highlightedLines="23,31,39,50"
   files={dropdownContent.description}
 />
 
@@ -141,7 +140,7 @@ You can use the `description` prop to add a description to the dropdown item.
 
 You can use the `DropdownSection` component to group dropdown items.
 
-<CodeDemo title="With Sections" highlightedLines="20,46" files={dropdownContent.sections} />
+<CodeDemo title="With Sections" files={dropdownContent.sections} />
 
 > **Note**: Sections without a `title` must provide an `aria-label` for accessibility.
 
@@ -149,14 +148,14 @@ You can use the `DropdownSection` component to group dropdown items.
 
 You can use any component as a trigger for the dropdown menu, just wrap it in the `DropdownTrigger` component.
 
-<CodeDemo title="Custom Trigger" highlightedLines="17-18" files={dropdownContent.customTrigger} />
+<CodeDemo title="Custom Trigger" files={dropdownContent.customTrigger} />
 
 ### Changing the backdrop
 
 As we mentioned earlier, the `Dropdown` component is an extension of the [Popover](/docs/components/popover) component,
 so it accepts all the props of the Popover component, including the `backdrop` prop.
 
-<CodeDemo title="Changing the backdrop" highlightedLines="17" files={dropdownContent.backdrop} />
+<CodeDemo title="Changing the backdrop" files={dropdownContent.backdrop} />
 
 ### Routing
 
@@ -218,7 +217,6 @@ slots to customize the dropdown.
 
 <CodeDemo
   title="Custom Popover Styles"
-  highlightedLines="14-15"
   files={dropdownContent.customPopoverStyles}
 />
 
@@ -283,127 +281,503 @@ you to customize each item individually.
 
 ### Dropdown Props
 
-| Attribute         | Type                                     | Description                                                                                           | Default |
-| ----------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------- |
-| children\*        | `ReactNode[]`                            | The children to render. Usually a `DropdownTrigger` and `DropdownMenu` elements.                      | -       |
-| type              | `menu` \| `listbox`                      | Type of overlay that is opened by the dropdown trigger.                                               | `menu`  |
-| trigger           | `press` \| `longPress`                   | How the dropdown menu is triggered.                                                                   | `press` |
-| isDisabled        | `boolean`                                | Whether the dropdown trigger is disabled.                                                             | `false` |
-| closeOnSelect     | `boolean`                                | Whether the dropdown menu should be closed when an item is selected.                                  | `true`  |
-| shouldBlockScroll | `boolean`                                | Whether the dropdown menu should block scrolling outside the menu.                                    | `true`  |
-| PopoverProps      | [PopoverProps](/docs/components/popover) | Since the dropdown is an extension of the popover, it accepts all the props of the popover component. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a DropdownTrigger and DropdownMenu elements.",
+      default: "-"
+    },
+    {
+      attribute: "type",
+      type: "menu | listbox",
+      description: "Type of overlay that is opened by the dropdown trigger.",
+      default: "menu"
+    },
+    {
+      attribute: "trigger",
+      type: "press | longPress",
+      description: "How the dropdown menu is triggered.",
+      default: "press"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the dropdown trigger is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when an item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the dropdown menu should block scrolling outside the menu.",
+      default: "true"
+    },
+    {
+      attribute: "PopoverProps",
+      type: "PopoverProps",
+      description: "Since the dropdown is an extension of the popover, it accepts all the props of the popover component.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Dropdown Events
 
-| Attribute                    | Type                        | Description                                                                                                             |
-| ---------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the dropdown's open state changes.                                                          |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the dropdown ref, return `true` if `onClose` should be called. |
-| onClose                      | `() => void`                | Handler that is called when the dropdown should close.                                                                  |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the dropdown's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the dropdown ref, return true if onClose should be called.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the dropdown should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownTrigger Props
 
-| Attribute | Type        | Description                                                                                                                                                                   | Default |
-| --------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children  | `ReactNode` | The dropdown trigger component, ensure the `children` passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The dropdown trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownMenu Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                             |             |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ----------- |
-| children\*             | `ReactNode` \| `((item: T) => ReactElement)`                                                           | The contents of the collection. It's usually the `DropdownItem` or `DropdownSection`. (static)          | -           |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                               | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow`                                      | The dropdown items appearance style.                                                                    | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The dropdown items color theme.                                                                         | `default`   |
-| selectionMode          | `none` \| `single` \| `multiple`                                                                       | The type of selection that is allowed in the collection.                                                | -           |
-| selectedKeys           | `all` \| `Iterable<React.Key>`                                                                                          | The currently selected keys in the collection (controlled).                                             | -           |
-| disabledKeys           | `Iterable<React.Key>`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. | -           |
-| defaultSelectedKeys    | `all` \| `Iterable<React.Key>`                                                                                 | The initial selected keys in the collection (uncontrolled).                                             | -           |
-| disallowEmptySelection | `boolean`                                                                                              | Whether the collection allows empty selection.                                                          | `false`     |
-| autoFocus              | `boolean` \| `first` \| `last`                                                                         | Where the focus should be set.                                                                          | `false`     |
-| topContent             | `ReactNode`                                                                                            | The content to display above the listbox items.                                                         | -           |
-| bottomContent          | `ReactNode`                                                                                            | The content to display below the listbox items.                                                         | -           |
-| emptyContent           | `ReactNode`                                                                                            | The content to display when the collection is empty.                                                    | `No items.` |
-| hideEmptyContent       | `boolean`                                                                                              | Whether to not display the empty content when the collection is empty.                                  | `false`     |
-| hideSelectedIcon       | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                             | `false`     |
-| shouldFocusWrap        | `boolean`                                                                                              | Whether keyboard navigation is circular.                                                                | `false`     |
-| closeOnSelect          | `boolean`                                                                                              | Whether the dropdown menu should be closed when an item is selected.                                    | `true`      |
-| disableAnimation       | `boolean`                                                                                              | Whether to disable the animation of the dropdown items.                                                 | `false`     |
-| classNames             | `Record<"base"｜ "list"｜ "emptyContent", string>`                                                     | Allows to set custom class names for the dropdown menu slots.                                           | -           |
-| itemClasses            | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the dropdown item slots.                                           | -           |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode | ((item: T) => ReactElement)",
+      description: "The contents of the collection. It's usually the DropdownItem or DropdownSection. (static)",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow",
+      description: "The dropdown items appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The dropdown items color theme.",
+      default: "default"
+    },
+    {
+      attribute: "selectionMode",
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Iterable<React.Key>",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean | first | last",
+      description: "Where the focus should be set.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "The content to display above the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "The content to display below the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "The content to display when the collection is empty.",
+      default: "No items."
+    },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether to not display the empty content when the collection is empty.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFocusWrap",
+      type: "boolean",
+      description: "Whether keyboard navigation is circular.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when an item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the dropdown items.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base'｜'list'｜'emptyContent', string>>",
+      description: "Allows to set custom class names for the dropdown menu slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Partial<Record<'base'｜'wrapper'｜'title'｜'description'｜'shortcut'｜'selectedIcon', string>>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownMenu Events
 
-| Attribute         | Type                          | Description                                                                |
-| ----------------- | ----------------------------- | -------------------------------------------------------------------------- |
-| onAction          | `(key: React.Key) => void`    | Handler that is called when an item is selected.                           |
-| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void` | Handler that is called when the selection changes.                         |
-| onClose           | `() => void`                  | Handler that is called when the menu should close after selecting an item. |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when an item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the menu should close after selecting an item.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownSection Props
 
-| Attribute        | Type                                                                                                   | Description                                                                                 | Default |
-| ---------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                            | The contents of the dropdown section. Usually a list of `DropdownItem` components. (static) | -       |
-| title            | `string`                                                                                               | The title of the dropdown section.                                                          | -       |
-| items            | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                   | -       |
-| hideSelectedIcon | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                 | `false` |
-| showDivider      | `boolean`                                                                                              | Whether to show the divider between the groups.                                             | `false` |
-| dividerProps     | [DividerProps](/docs/components/divider)                                                               | The divider component props.                                                                | -       |
-| classNames       | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>`                                             | Allows to set custom class names for the dropdown section slots.                            | -       |
-| itemClasses      | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the dropdown item slots.                               | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the dropdown section. Usually a list of DropdownItem components. (static)",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string",
+      description: "The title of the dropdown section.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show the divider between the groups.",
+      default: "false"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base'｜'heading'｜'group'｜'divider', string>>",
+      description: "Allows to set custom class names for the dropdown section slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Record<'base'｜'wrapper'｜'title'｜'description'｜'shortcut'｜'selectedIcon', string>>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownItem Props
 
-| Attribute        | Type                                                                                          | Description                                                                                                                                                                      | Default |
-| ---------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                   | The contents of the dropdown item.                                                                                                                                               | -       |
-| key              | `React.Key`                                                                                   | The unique key for the dropdown item.                                                                                                                                            | -       |
-| title            | `string` \| `ReactNode`                                                                       | The title of the dropdown item.                                                                                                                                                  | -       |
-| textValue        | `string`                                                                                      | A string representation of the item's contents, used for features like typeahead.                                                                                                | -       |
-| description      | `string` \| `ReactNode`                                                                       | The description of the dropdown item.                                                                                                                                            | -       |
-| shortcut         | `string` \| `ReactNode`                                                                       | The dropdown item keyboard shortcut.                                                                                                                                             | -       |
-| startContent     | `ReactNode`                                                                                   | The start content of the dropdown item.                                                                                                                                          | -       |
-| endContent       | `ReactNode`                                                                                   | The end content of the dropdown item. This is positioned after the shortcut and the selected icon.                                                                               | -       |
-| selectedIcon     | [SelectedIconProps](#dropdown-item-selected-icon-props)                                       | Custom icon to render when the item is selected.                                                                                                                                 | -       |
-| showDivider      | `boolean`                                                                                     | Whether to show a divider below the item.                                                                                                                                        | `false` |
-| href             | `string`                                                                                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target           | `HTMLAttributeAnchorTarget`                                                                   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel              | `string`                                                                                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download         | `boolean` \| `string`                                                                         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping             | `string`                                                                                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy   | `HTMLAttributeReferrerPolicy`                                                                 | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| isDisabled       | `boolean`                                                                                     | Whether the dropdown item should be disabled. (**Deprecated**) pass **disabledKeys** to `DropdownMenu` instead.                                                                  | `false` |
-| isSelected       | `boolean`                                                                                     | Whether the dropdown item should be selected. (**Deprecated**) pass **selectedKeys** to `DropdownMenu` instead.                                                                  | `false` |
-| isReadOnly       | `boolean`                                                                                     | Whether the dropdown item press events should be ignored.                                                                                                                        | `false` |
-| hideSelectedIcon | `boolean`                                                                                     | Whether to hide the check icon when the item is selected.                                                                                                                        | `false` |
-| closeOnSelect    | `boolean`                                                                                     | Whether the dropdown menu should be closed when the item is selected.                                                                                                            | `true`  |
-| classNames       | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the dropdown item slots.                                                                                                                    | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "key",
+      type: "React.Key",
+      description: "The unique key for the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string | ReactNode",
+      description: "The title of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the item's contents, used for features like typeahead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "string | ReactNode",
+      description: "The description of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "shortcut",
+      type: "string | ReactNode",
+      description: "The dropdown item keyboard shortcut.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The start content of the dropdown item.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The end content of the dropdown item. This is positioned after the shortcut and the selected icon.",
+      default: "-"
+    },
+    {
+      attribute: "selectedIcon",
+      type: "SelectedIconProps",
+      description: "Custom icon to render when the item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show a divider below the item.",
+      default: "false"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the dropdown item should be disabled. (Deprecated) pass disabledKeys to DropdownMenu instead.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the dropdown item should be selected. (Deprecated) pass selectedKeys to DropdownMenu instead.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the dropdown item press events should be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the item is selected.",
+      default: "false"
+    },
+    {
+      attribute: "closeOnSelect",
+      type: "boolean",
+      description: "Whether the dropdown menu should be closed when the item is selected.",
+      default: "true"
+    },
+    {
+      attribute: "classNames",
+      type: "Record<'base'｜'wrapper'｜'title'｜'description'｜'shortcut'｜'selectedIcon', string>>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### DropdownItem Events
 
-| Attribute     | Type                           | Description                                                                                                                  |
-| ------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| onAction      | `() => void`                   | Handler that is called when the dropdown item is selected. (**Deprecated**) pass to `DropdownMenu` instead.                  |
-| onClose       | `() => void`                   | Handler that is called when the dropdown item should close after selecting. (**Deprecated**) pass to `DropdownMenu` instead. |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                                   |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                              |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.                  |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                                 |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not.              |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                                        |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                                       |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                              |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "() => void",
+      description: "Handler that is called when the dropdown item is selected. (Deprecated) pass to DropdownMenu instead.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the dropdown item should close after selecting. (Deprecated) pass to DropdownMenu instead.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (**Deprecated**) use **onPress** instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/form.mdx b/apps/docs/content/docs/components/form.mdx
new file mode 100644
index 0000000000..02cb50700a
--- /dev/null
+++ b/apps/docs/content/docs/components/form.mdx
@@ -0,0 +1,183 @@
+---
+title: "Form"
+description: "A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors."
+---
+
+import {formContent} from "@/content/components/form";
+
+# Form
+
+A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.
+
+<ComponentLinks component="form" />
+
+---
+
+<CarbonAd />
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add form",
+    npm: "npm install @nextui-org/form",
+    yarn: "yarn add @nextui-org/form",
+    pnpm: "pnpm add @nextui-org/form",
+    bun: "bun add @nextui-org/form",
+  }}
+/>
+
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {Form} from "@nextui-org/react";',
+    individual: 'import {Form} from "@nextui-org/form";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={formContent.usage} />
+
+## Anatomy
+
+A `Form` is a container for input elements and submit/reset buttons, with support for validation messages. When labeled with `aria-label` or `aria-labelledby`, it becomes a navigable [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html) for assistive technology.
+
+```tsx
+import {Form, Button} from '@nextui-org/react';
+
+<Form>
+  {/* ... */}
+  <Button type="submit" />
+  <Button type="reset" />
+</Form>
+```
+
+## Events
+
+The `onSubmit` event will be triggered when a user submits the form with the `Enter` key or by pressing a submit button. The onReset event will be triggered when a user presses a reset button.
+
+<CodeDemo title="Events" files={formContent.events} highlightedLines={[39, 41, 42, 44]} />
+
+## Validation
+
+`Form` supports native HTML constraint validation with customizable UI, custom validation functions, and server-side validation. Server-side validation errors can be provided via the `validationErrors` prop as an object mapping field names to error messages, which are cleared when the user modifies the field.
+
+<CodeDemo title="Validation" files={formContent.serverValidation} />
+
+See the [Forms](/docs/guides/forms) guide to learn more about form validation, including client-side validation, and integration with other frameworks and libraries.
+
+
+### Validation Behavior
+
+`Form` validation uses ARIA attributes by default, but can be switched to native HTML validation by setting `validationBehavior="native"`. ARIA validation shows realtime errors without blocking submission. This can be set at the form or field level.
+
+
+```tsx
+<Form validationBehavior="native">
+  <Input
+    isRequired
+    name="username"
+    label="Username"
+    labelPlacement="outside"
+    placeholder="Enter your username"
+    validate={(value) => {
+      if (value.length < 3) {
+        return "Username must be at least 3 characters long";
+      }
+
+      return value === "admin" ? "Nice try!" : null;
+    }}
+  />
+  <Button type="submit">Submit</Button>
+</Form>
+```
+
+<CodeDemo title="Validation Behavior" files={formContent.customValidation} />
+
+## Accessibility
+
+- Built with a native HTML `<form>` element, with support for ARIA labelling to create a [form landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/form.html).
+- Full support for browser features like form autofill.
+- Support for native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and server-side validation errors.
+
+
+<Spacer y={4} />
+
+## API
+
+### Form Props
+
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The wrapped component.",
+      default: "-",
+    },
+    {
+      attribute: "validationBehavior",
+      type: "'native' | 'aria'",
+      description:
+        "Whether to use native HTML form validation to prevent form submission when a field value is missing or invalid, or mark fields as required or invalid via ARIA.",
+      default: "aria",
+    },
+    {
+      attribute: "validationErrors",
+      type: "Record<string, string | string[]>",
+      description: "Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors.",
+      default: "-",
+    },
+    {
+      attribute: "action",
+      type: "string | FormHTMLAttributes<HTMLFormElement>['action']",
+      description: "Where to send the form-data when the form is submitted. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "encType",
+      type: "'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'",
+      description: "The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "method",
+      type: "'get' | 'post' | 'dialog'",
+      description: "The HTTP method to submit the form with. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "target",
+      type: "'_blank' | '_self' | '_parent' | '_top'",
+      description: "The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "autoComplete",
+      type: "'off' | 'on'",
+      description: "Indicates whether input elements can by default have their values automatically completed by the browser. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "autoCapitalize",
+      type: "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'",
+      description: "Controls whether inputted text is automatically capitalized and, if so, in what manner. See MDN.",
+      default: "-",
+    },
+    {
+      attribute: "className",
+      type: "string",
+      description: "The CSS className for the element.",
+      default: "-",
+    },
+    {
+      attribute: "style",
+      type: "CSSProperties",
+      description: "The inline style for the element.",
+      default: "-",
+    },
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index ab1ce41953..7abed046c3 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -91,31 +91,122 @@ you can use it with NextUI `Image` component as well.
 - **zoomedWrapper**: The wrapper slot for the zoomed image it avoids the image content to overflow the parent container.
 - **blurredImg**: The wrapper slot for the duplicated blurred image.
 
+<Spacer y={4} />
+
 ## API
 
 ### Image Props
 
-| Attribute       | Type                                                                 | Description                                                                                                                                                                                                 | Default |
-| --------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| src             | `string`                                                             | The image source.                                                                                                                                                                                           | -       |
-| srcSet          | `string`                                                             | The image srcSet.                                                                                                                                                                                           | -       |
-| sizes           | `string`                                                             | The image sizes.                                                                                                                                                                                            | -       |
-| alt             | `string`                                                             | The image alt.                                                                                                                                                                                              | -       |
-| width           | `number`                                                             | The image width.                                                                                                                                                                                            | -       |
-| height          | `number`                                                             | The image height.                                                                                                                                                                                           | -       |
-| radius          | `none` \| `sm` \| `md` \| `lg` \| `full`                             | The image border radius.                                                                                                                                                                                    | `xl`    |
-| shadow          | `none` \| `sm` \| `md` \| `lg`                                       | The image shadow.                                                                                                                                                                                           | `none`  |
-| loading         | `eager` \| `lazy`                                                    | A loading strategy to use for the image.                                                                                                                                                                    | -       |
-| fallbackSrc     | `string`                                                             | The fallback image source.                                                                                                                                                                                  | -       |
-| isBlurred       | `boolean`                                                            | Whether the image should have a duplicated blurred image at the background.                                                                                                                                 | `false` |
-| isZoomed        | `boolean`                                                            | Whether the image should be zoomed when hovered.                                                                                                                                                            | `false` |
-| removeWrapper   | `boolean`                                                            | Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element. If you set this prop as `true` neither the skeleton nor the zoom effect will work. | `false` |
-| disableSkeleton | `boolean`                                                            | Whether the image should disable the skeleton animation while loading.                                                                                                                                      | `false` |
-| classNames      | `Record<"img"｜ "wrapper"｜ "zoomedWrapper"｜ "blurredImg", string>` | Allows to set custom class names for the image slots.                                                                                                                                                       | -       |
+<APITable
+  data={[
+    {
+      attribute: "src",
+      type: "string",
+      description: "The image source.",
+      default: "-"
+    },
+    {
+      attribute: "srcSet",
+      type: "string",
+      description: "The image srcSet.",
+      default: "-"
+    },
+    {
+      attribute: "sizes",
+      type: "string",
+      description: "The image sizes.",
+      default: "-"
+    },
+    {
+      attribute: "alt",
+      type: "string",
+      description: "The image alt.",
+      default: "-"
+    },
+    {
+      attribute: "width",
+      type: "number",
+      description: "The image width.",
+      default: "-"
+    },
+    {
+      attribute: "height",
+      type: "number",
+      description: "The image height.",
+      default: "-"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The image border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The image shadow.",
+      default: "none"
+    },
+    {
+      attribute: "loading",
+      type: "eager | lazy",
+      description: "A loading strategy to use for the image.",
+      default: "-"
+    },
+    {
+      attribute: "fallbackSrc",
+      type: "string",
+      description: "The fallback image source.",
+      default: "-"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the image should have a duplicated blurred image at the background.",
+      default: "false"
+    },
+    {
+      attribute: "isZoomed",
+      type: "boolean",
+      description: "Whether the image should be zoomed when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "removeWrapper",
+      type: "boolean",
+      description: "Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element. If you set this prop as `true` neither the skeleton nor the zoom effect will work.",
+      default: "false"
+    },
+    {
+      attribute: "disableSkeleton",
+      type: "boolean",
+      description: "Whether the image should disable the skeleton animation while loading.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: 'Partial<Record<"img" | "wrapper" | "zoomedWrapper" | "blurredImg", string>>',
+      description: "Allows to set custom class names for the image slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Image Events
 
-| Attribute | Type                                  | Description                                          |
-| --------- | ------------------------------------- | ---------------------------------------------------- |
-| onLoad    | `ReactEventHandler<HTMLImageElement>` | Handler that is called when the image load.          |
-| onError   | `() => void`                          | Handler that is called when the image fails to load. |
+<APITable
+  data={[
+    {
+      attribute: "onLoad",
+      type: "ReactEventHandler<HTMLImageElement>",
+      description: "Handler that is called when the image load.",
+      default: "-"
+    },
+    {
+      attribute: "onError",
+      type: "() => void",
+      description: "Handler that is called when the image fails to load.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/input-otp.mdx b/apps/docs/content/docs/components/input-otp.mdx
new file mode 100644
index 0000000000..38e03653b1
--- /dev/null
+++ b/apps/docs/content/docs/components/input-otp.mdx
@@ -0,0 +1,362 @@
+---
+title: "Input OTP"
+description: "InputOtp is a component that allows users to enter OTP."
+---
+
+import {inputOtpContent} from "@/content/components/input-otp";
+
+# Input OTP
+
+The InputOtp component enables users to enter one-time passwords (OTP). It is built on top of the [input-otp](https://github.com/guilhermerodz/input-otp) library by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+<ComponentLinks component="input-otp" />
+
+---
+
+<CarbonAd />
+
+## Installation
+
+<PackageManagers
+  showGlobalInstallWarning
+  commands={{
+    cli: "npx nextui-cli@latest add input-otp",
+    npm: "npm install @nextui-org/input-otp",
+    yarn: "yarn add @nextui-org/input-otp",
+    pnpm: "pnpm add @nextui-org/input-otp",
+    bun: "bun add @nextui-org/input-otp",
+  }}
+/>
+
+## Import
+
+<ImportTabs
+  commands={{
+    main: 'import {InputOtp} from "@nextui-org/react";',
+    individual: 'import {InputOtp} from "@nextui-org/input-otp";',
+  }}
+/>
+
+## Usage
+
+<CodeDemo title="Usage" files={inputOtpContent.usage} />
+
+## Disabled
+
+The `isDisabled` prop disables user interaction with the `InputOtp` component.
+
+<CodeDemo title="Disabled" files={inputOtpContent.disabled} />
+
+## Read Only
+
+The `isReadOnly` prop makes the `InputOtp` component read-only while maintaining its visual appearance.
+
+<CodeDemo title="Read Only" files={inputOtpContent.readonly} />
+
+## Required
+
+The `isRequired` prop marks the `InputOtp` as a required field.
+
+<CodeDemo title="Required" files={inputOtpContent.required} />
+
+## Sizes
+
+The size of the `InputOtp` can be customized using the `size` prop. The default value is `md`.
+
+<CodeDemo title="Sizes" files={inputOtpContent.sizes} />
+
+## Colors
+
+Color of the `InputOtp` can be changed by `color` property.
+
+<CodeDemo title="Colors" files={inputOtpContent.colors} />
+
+## Variants
+
+Styling/Variant of the `InputOtp` can be changed by `variant` property. By default, `variant` property is set to `flat`.
+
+<CodeDemo title="Variants" files={inputOtpContent.variants} />
+
+## Radius
+
+Radius of the `InputOtp` can be changed by `radius` property. By default, `radius` property is set to `md`.
+
+<CodeDemo title="Radius" files={inputOtpContent.radius} />
+
+## Password
+
+`InputOtp` can be used as password/secured-pin input by setting `type` as `password`.
+
+<CodeDemo title="Password" files={inputOtpContent.password} />
+
+## Description
+
+Description of the `InputOtp` can be set by `description` property.
+
+<CodeDemo title="Description" files={inputOtpContent.description} />
+
+## Error Message
+
+Custom error message of the `InputOtp` can be set by `errorMessage` property.
+
+<CodeDemo title="Error Message" files={inputOtpContent.errorMessage} />
+
+## Allowed Keys
+
+- The `InputOtp` component only accepts specified input keys. Any other input is ignored.
+- You can customize the allowed keys using the `allowedKeys` prop, which accepts a regex pattern.
+- By default, `allowedKeys` is set to `^[0-9]*$` (only numerical digits).
+
+<CodeDemo title="Allowed Keys" files={inputOtpContent.allowedKeys} />
+
+## Controlled
+
+<CodeDemo title="Controlled" files={inputOtpContent.controlled} />
+
+## React Hook Form
+
+You can use `InputOtp` with React Hook Form for form validation and submission handling.
+
+<CodeDemo title="React Hook Form" files={inputOtpContent.form} />
+
+## Different Lengths & Validation
+
+The `InputOtp` component supports different lengths through the `length` property. You can set the number of input segments by passing a number value to the `length` prop. Common use cases include 4-digit PINs and 6-digit authentication codes.
+
+<CodeDemo title="Lengths" files={inputOtpContent.lengths} />
+
+## Custom Styles
+
+You can customize the styles of the `InputOtp` component using the `classNames` prop.
+
+<CodeDemo title="Custom Styles" files={inputOtpContent.customStyles} />
+
+## Slots
+
+- **base**: InputOtp wrapper, it handles alignment, placement, and general appearance.
+- **wrapper**: Wraps the underlying input-otp component. Sent as `containerClassName` prop to underlying input-otp component.
+- **input**: The input element.
+- **segmentWrapper**: Wraps all the segment elements.
+- **segment**: The segment element.
+- **caret**: The caret represents the typing indicator of the input-otp component.
+- **passwordChar**: The passwordChar represents the text styling when input-type is password.
+- **helperWrapper**: Wraps the `description` and the `errorMessage`.
+- **description**: The description of the input-otp.
+- **errorMessage**: The error message of the input-otp.
+
+<Spacer y={4} />
+
+## Data Attributes
+
+`InputOtp` has the following attributes on the `base` element:
+
+- **data-invalid**:
+  When the input-otp is invalid. Based on `isInvalid` prop.
+- **data-required**:
+  When the input-otp is required. Based on `isRequired` prop.
+- **data-readonly**:
+  When the input-otp is readonly. Based on `isReadOnly` prop.
+- **data-filled**:
+  When the input-otp is completely filled.
+- **data-disabled**:
+  When the input-otp is disabled. Based on `isDisabled` prop.
+
+`InputOtp` also has the following attributes on the `segment` element:
+
+- **data-active**:
+  When the segment is active.
+- **data-focus**:
+  When the segment is focused.
+- **data-focus-visible**:
+  When the segment is focused visible.
+- **data-has-value**:
+  When the segment has value.
+
+<Spacer y={4} />
+
+## Accessibility
+
+- Built on top of [input-otp](https://github.com/guilhermerodz/input-otp).
+- Required and invalid states exposed to assistive technology via ARIA.
+- Support for description and error message help text linked to the input-otp via ARIA.
+- Keyboard navigation:
+  - Tab: Moves focus between input segments
+  - Arrow keys: Navigate between segments
+  - Backspace: Clears current segment and moves focus to previous segment
+- ARIA attributes:
+  - `aria-invalid`: Indicates validation state
+  - `aria-required`: Indicates if the input is required
+
+<Spacer y={4} />
+
+## API
+
+### InputOtp Props
+
+<APITable
+  data={[
+    {
+      attribute: "length",
+      type: "number",
+      description: "The length of the input-otp.",
+      default: "4"
+    },
+    {
+      attribute: "allowedKeys",
+      type: "regEx string",
+      description: "The allowed keys for the input-otp.",
+      default: "^[0-9]*$"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the input-otp.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the input-otp.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the input-otp.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the input-otp.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the input-otp (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the input-otp (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "Provides additional information or hints about the input requirements.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the input-otp. It is only shown when isInvalid is set to true",
+      default: "-"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "When true, the InputOtp expands to fill its parent container width.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Marks the input as required for form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "When true, allows selection but prevents user modification.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input-otp is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input-otp is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "baseRef",
+      type: "RefObject<HTMLDivElement>",
+      description: "The ref to the base element.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the input-otp should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'inputWrapper' | 'input' | 'segmentWrapper' | 'segment' | 'caret' | 'passwordChar' | 'helperWrapper' | 'description' | 'errorMessage', string>>",
+      description: "Allows to set custom class names for the Input slots.",
+      default: "-"
+    },
+    {
+      attribute: "textAlign",
+      type: "left | center | right",
+      description: "The text alignment of the input segments",
+      default: "center"
+    },
+    {
+      attribute: "pushPasswordManagerStrategy",
+      type: "'none' | 'hidden' | 'input'",
+      description: "Strategy for password manager support",
+      default: "-"
+    },
+    {
+      attribute: "pasteTransformer",
+      type: "(text: string) => string",
+      description: "A function to transform pasted text before it's inserted into the input.",
+      default: "-"
+    },
+    {
+      attribute: "containerClassName",
+      type: "string",
+      description: "Class name for the input container",
+      default: "-"
+    },
+    {
+      attribute: "noScriptCSSFallback",
+      type: "string",
+      description: "CSS fallback for when JavaScript is disabled",
+      default: "-"
+    }
+  ]}
+/>
+
+### InputOtp Events
+
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onComplete",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value is completely filled.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index 9ff7d55a89..a2451d3010 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -194,39 +194,182 @@ In case you need to customize the input even further, you can use the `useInput`
 
 ### Input Props
 
-| Attribute          | Type                                                                                                                                                                   | Description                                                                                                                                                   | Default   |
-| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                                                                            | The content of the input.                                                                                                                                     | -         |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                        | The variant of the input.                                                                                                                                     | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                            | The color of the input.                                                                                                                                       | `default` |
-| size               | `sm` \| `md` \| `lg`                                                                                                                                                   | The size of the input.                                                                                                                                        | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                               | The radius of the input.                                                                                                                                      | -         |
-| label              | `ReactNode`                                                                                                                                                            | The content to display as the label.                                                                                                                          | -         |
-| value              | `string`                                                                                                                                                               | The current value of the input (controlled).                                                                                                                  | -         |
-| defaultValue       | `string`                                                                                                                                                               | The default value of the input (uncontrolled).                                                                                                                | -         |
-| placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
-| description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior | `native` \| `aria`                                                                                                                                                     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
-| startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
-| endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                                                                                | The position of the label.                                                                                                                                    | `inside`  |
-| fullWidth          | `boolean`                                                                                                                                                              | Whether the input should take up the width of its parent.                                                                                                     | `true`    |
-| isClearable        | `boolean`                                                                                                                                                              | Whether the input should have a clear button.                                                                                                                 | `false`   |
-| isRequired         | `boolean`                                                                                                                                                              | Whether user input is required on the input before form submission.                                                                                           | `false`   |
-| isReadOnly         | `boolean`                                                                                                                                                              | Whether the input can be selected but not changed by the user.                                                                                                |           |
-| isDisabled         | `boolean`                                                                                                                                                              | Whether the input is disabled.                                                                                                                                | `false`   |
-| isInvalid          | `boolean`                                                                                                                                                              | Whether the input is invalid.                                                                                                                                 | `false`   |
-| baseRef            | `RefObject<HTMLDivElement>`                                                                                                                                            | The ref to the base element.                                                                                                                                  | -         |
-| validationState    | `valid` \| `invalid`                                                                                                                                                   | Whether the input should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                         | -         |
-| disableAnimation   | `boolean`                                                                                                                                                              | Whether the input should be animated.                                                                                                                         | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "mainWrapper" ｜ "input" ｜ "clearButton" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>`    | Allows to set custom class names for the Input slots.                                                                                                         | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the input.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the input.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the input (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the input (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the input.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the input. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the input. It is only shown when isInvalid is set to true",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the input should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the input should have a clear button.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the input is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the input is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "baseRef",
+      type: "RefObject<HTMLDivElement>",
+      description: "The ref to the base element.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the input should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'label' | 'inputWrapper' | 'innerWrapper' | 'mainWrapper' | 'input' | 'clearButton' | 'helperWrapper' | 'description' | 'errorMessage', string>>",
+      description: "Allows to set custom class names for the Input slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Input Events
 
-| Attribute     | Type                                  | Description                                                                                                                         |
-| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange | `(value: string) => void`             | Handler that is called when the element's value changes.                                                                            |
-| onClear       | `() => void`                          | Handler that is called when the clear button is clicked.                                                                            |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClear",
+      type: "() => void",
+      description: "Handler that is called when the clear button is clicked.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/kbd.mdx b/apps/docs/content/docs/components/kbd.mdx
index 506b17bee3..d7c9f826e6 100644
--- a/apps/docs/content/docs/components/kbd.mdx
+++ b/apps/docs/content/docs/components/kbd.mdx
@@ -65,11 +65,28 @@ Keyboard key is a component to display which key or combination of keys performs
 
 ### Keyboard Key Props
 
-| Attribute  | Type                                                   | Description                                              | Default |
-| ---------- | ------------------------------------------------------ | -------------------------------------------------------- | ------- |
-| children   | `ReactNode`                                            | The content of the keyboard key.                         | -       |
-| keys       | [KbdKey](#keyboard-keys) \| [KbdKey[]](#keyboard-keys) | The keys of the keyboard key.                            | -       |
-| classNames | `Record<"base"｜"abbr"｜"content",string>`          | Allows to set custom class names for the checkbox slots. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content to display in the keyboard key.",
+      default: "-"
+    },
+    {
+      attribute: "keys",
+      type: "KbdKey | KbdKey[]",
+      description: "The keys of the keyboard key.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: 'Partial<Record<"base" | "abbr" | "content", string>>',
+      description: "Allows to set custom class names for the keyboard key slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Keyboard Keys
 
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index d90b84a4f9..1a5896223d 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -132,33 +132,152 @@ In case you need to customize the link even further, you can use the `useLink` h
 
 ### Link Props
 
-| Attribute        | Type                                                                           | Description                                                                                                                                                                      | Default   |
-| ---------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| size             | `sm` \| `md` \| `lg`                                                           | The size of the link.                                                                                                                                                            | `md`      |
-| color            | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the link.                                                                                                                                                           | `primary` |
-| underline        | `none` \| `hover` \| `always` \| `active` \| `focus`                           | The underline of the link.                                                                                                                                                       | `none`    |
-| href             | `string`                                                                       | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -         |
-| target           | `HTMLAttributeAnchorTarget`                                                    | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -         |
-| rel              | `string`                                                                       | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -         |
-| download         | `boolean` \| `string`                                                          | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -         |
-| ping             | `string`                                                                       | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -         |
-| referrerPolicy   | `HTMLAttributeReferrerPolicy`                                                  | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -         |
-| isExternal       | `boolean`                                                                      | Whether the link should open in a new tab.                                                                                                                                       | `false`   |
-| showAnchorIcon   | `boolean`                                                                      | Whether to show the anchor icon.                                                                                                                                                 | `false`   |
-| anchorIcon       | `ReactNode`                                                                    | The anchor icon.                                                                                                                                                                 | -         |
-| isBlock          | `boolean`                                                                      | Whether the link should be rendered as block with a hover effect.                                                                                                                | `false`   |
-| isDisabled       | `boolean`                                                                      | Whether the link is disabled.                                                                                                                                                    | `false`   |
-| disableAnimation | `boolean`                                                                      | Whether to disable link and block animations.                                                                                                                                    | `false`   |
+<APITable
+  data={[
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the link.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The color of the link.",
+      default: "primary"
+    },
+    {
+      attribute: "underline",
+      type: "none | hover | always | active | focus",
+      description: "The underline style of the link.",
+      default: "none"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).",
+      default: "-"
+    },
+    {
+      attribute: "isExternal",
+      type: "boolean",
+      description: "Whether the link should open in a new tab.",
+      default: "false"
+    },
+    {
+      attribute: "showAnchorIcon",
+      type: "boolean",
+      description: "Whether to show the anchor icon.",
+      default: "false"
+    },
+    {
+      attribute: "anchorIcon",
+      type: "ReactNode",
+      description: "The anchor icon.",
+      default: "-"
+    },
+    {
+      attribute: "isBlock",
+      type: "boolean",
+      description: "Whether the link should be rendered as block with a hover effect.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the link is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable link and block animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Link Events
 
-| Attribute     | Type                           | Description                                                                                                     | Default |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- | ------- |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      | -       |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 | -       |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     | -       |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    | -       |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. | -       |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           | -       |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          | -       |
-| onClick       | `MouseEventHandler`            | The native link click event handler (**Deprecated**) use **onPress** instead.                                   | -       |
+<APITable
+  data={[
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native link click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx
index e2ce6fa455..e6328a7e42 100644
--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@@ -39,14 +39,14 @@ NextUI exports 3 listbox-related components:
 <ImportTabs
   commands={{
     main: `import {
-  Listbox,
-  ListboxSection,
-  ListboxItem
+    Listbox,
+    ListboxSection,
+    ListboxItem
 } from "@nextui-org/react";`,
     individual: `import {
-  Listbox,
-  ListboxSection,
-  ListboxItem
+    Listbox,
+    ListboxSection,
+    ListboxItem
 } from "@nextui-org/listbox";`,
   }}
 />
@@ -68,7 +68,7 @@ Listbox follows the [Collection Components API](https://react-spectrum.adobe.com
 
 Listbox items can be disabled using the `disabledKeys` prop to the `Listbox` component.
 
-<CodeDemo title="Disabled Keys" highlightedLines="10" files={listboxContent.disabledKeys} />
+<CodeDemo title="Disabled Keys" files={listboxContent.disabledKeys} />
 
 > **Note**: It's important to have a unique key for each item, otherwise the disabled keys will not work.
 
@@ -76,7 +76,7 @@ Listbox items can be disabled using the `disabledKeys` prop to the `Listbox` com
 
 You can use the `variant` in the `Listbox` component to change the `hover` style of the listbox items.
 
-<CodeDemo title="Variants" highlightedLines="18" files={listboxContent.variants} />
+<CodeDemo title="Variants" files={listboxContent.variants} />
 
 ### Single Selection
 
@@ -84,7 +84,6 @@ You can set the `selectionMode` property as `single` to allow the user to select
 
 <CodeDemo
   title="Single Selection"
-  highlightedLines="20-22"
   files={listboxContent.singleSelection}
 />
 
@@ -94,7 +93,6 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
 
 <CodeDemo
   title="Multiple Selection"
-  highlightedLines="20-22"
   files={listboxContent.multipleSelection}
 />
 
@@ -104,7 +102,7 @@ You can set the `selectionMode` property as `multiple` to allow the user to sele
 
 It is possible to add icons to the listbox items using the `startContent` / `endContent` props.
 
-<CodeDemo title="With Icons" highlightedLines="23,30,38" files={listboxContent.icons} />
+<CodeDemo title="With Icons" files={listboxContent.icons} />
 
 > **Note**: If you use `currentColor` as the icon color, the icon will have the same color as the item text.
 
@@ -114,7 +112,6 @@ You can use the `description` prop to add a description to the listbox item.
 
 <CodeDemo
   title="With Description"
-  highlightedLines="17,24,32,41"
   files={listboxContent.description}
 />
 
@@ -128,7 +125,7 @@ You can use the `topContent` and `bottomContent` props to add content above and
 
 You can use the `ListboxSection` component to group listbox items.
 
-<CodeDemo title="With Sections" highlightedLines="15,38" files={listboxContent.sections} />
+<CodeDemo title="With Sections" files={listboxContent.sections} />
 
 > **Note**: Sections without a `title` must provide an `aria-label` for accessibility.
 
@@ -154,6 +151,22 @@ function App() {
 }
 ```
 
+### Virtualization
+
+Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
+
+<CodeDemo
+  title="Virtualization"
+  files={listboxContent.virtualization}
+/>
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+#### Ten Thousand Items
+
+Here's an example of using virtualization with 10,000 items.
+
+<CodeDemo title="Ten Thousand Items" files={listboxContent.virtualizationTenThousand} />
+
 ## Slots
 
 Listbox has 3 components with slots the base one `Listbox`, `ListboxItem` and `ListboxSection` components.
@@ -240,93 +253,416 @@ You can customize the `Listbox` items style by using the `itemClasses` prop and
 
 ### Listbox Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                              | Default     |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ----------- |
-| children\*             | `ReactNode[]`                                                                                          | The children to render. Usually a list of `ListboxItem` or `ListboxSection`                              | -           |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                                | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow`                                      | The listbox items appearance style.                                                                      | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The listbox items color theme.                                                                           | `default`   |
-| selectionMode          | `none` \| `single` \| `multiple`                                                                       | The type of selection that is allowed in the collection.                                                 | -           |
-| selectedKeys           | `React.Key[]`                                                                                          | The currently selected keys in the collection (controlled).                                              | -           |
-| disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.  | -           |
-| defaultSelectedKeys    | `all` \| `React.Key[]`                                                                                 | The initial selected keys in the collection (uncontrolled).                                              | -           |
-| disallowEmptySelection | `boolean`                                                                                              | Whether the collection allows empty selection.                                                           | `false`     |
-| shouldHighlightOnFocus | `boolean`                                                                                              | Whether the focused item should be highlighted. It applies the same styles to the items as when hovered. | `false`     |
-| autoFocus              | `boolean` \| `first` \| `last`                                                                         | Where the focus should be set.                                                                           | `false`     |
-| topContent             | `ReactNode`                                                                                            | The content to display above the listbox items.                                                          | -           |
-| bottomContent          | `ReactNode`                                                                                            | The content to display below the listbox items.                                                          | -           |
-| emptyContent           | `ReactNode`                                                                                            | The content to display when the collection is empty.                                                     | `No items.` |
-| shouldFocusWrap        | `boolean`                                                                                              | Whether keyboard navigation is circular.                                                                 | `false`     |
-| hideEmptyContent       | `boolean`                                                                                              | Whether to not display the empty content when the collection is empty.                                   | `false`     |
-| hideSelectedIcon       | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                                              | `false`     |
-| disableAnimation       | `boolean`                                                                                              | Whether to disable the animation of the listbox items.                                                   | `false`     |
-| classNames             | `Record<"base"｜ "list"｜ "emptyContent", string>`                                                     | Allows to set custom class names for the listbox slots.                                                  | -           |
-| itemClasses            | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "selectedIcon", string>`                        | Allows to set custom class names for the listbox item slots.                                             | -           |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of ListboxItem or ListboxSection",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | flat | faded | shadow",
+      description: "The listbox items appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The listbox items color theme.",
+      default: "default"
+    },
+    {
+      attribute: "selectionMode",
+      type: "none | single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "React.Key[]",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | React.Key[]",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "shouldHighlightOnFocus",
+      type: "boolean",
+      description: "Whether the focused item should be highlighted. It applies the same styles to the items as when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean | first | last",
+      description: "Where the focus should be set.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "The content to display above the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "The content to display below the listbox items.",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "The content to display when the collection is empty.",
+      default: "No items."
+    },
+    {
+      attribute: "shouldFocusWrap",
+      type: "boolean",
+      description: "Whether keyboard navigation is circular.",
+      default: "false"
+    },   
+    {
+      attribute: "isVirtualized",
+      type: "boolean",
+      description: "Whether to enable virtualization.",
+      default: "false"
+    },
+    {
+      attribute: "virtualization",
+      type: "Record<\"maxListboxHeight\" & \"itemHeight\", number>",
+      description: "Configuration for virtualization, optimizing rendering for large datasets. Required if isVirtualized is set to true.",
+      default: "-",
+    },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether to not display the empty content when the collection is empty.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the listbox items.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"list\" | \"emptyContent\", string>>",
+      description: "Allows to set custom class names for the listbox slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"selectedIcon\", string>>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Listbox Events
 
-| Attribute         | Type                          | Description                                        |
-| ----------------- | ----------------------------- | -------------------------------------------------- |
-| onAction          | `(key: React.Key) => void`    | Handler that is called when an item is selected.   |
-| onSelectionChange | `(keys: React.Key[]) => void` | Handler that is called when the selection changes. |
-
----
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when an item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: React.Key[]) => void",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxSection Props
 
-| Attribute        | Type                                                                                                   | Description                                                                               | Default |
-| ---------------- | ------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | ------- |
-| children\*       | `ReactNode`                                                                                            | The contents of the listbox section. Usually a list of `ListboxItem` components. (static) | -       |
-| title            | `string`                                                                                               | The title of the listbox section.                                                         | -       |
-| items            | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | Item objects in the collection. (dynamic)                                                 | -       |
-| hideSelectedIcon | `boolean`                                                                                              | Whether to hide the check icon when the items are selected.                               | `false` |
-| showDivider      | `boolean`                                                                                              | Whether to show the divider between the groups.                                           | `false` |
-| dividerProps     | [DividerProps](/docs/components/divider)                                                               | The divider component props.                                                              | -       |
-| classNames       | `Record<"base"｜ "heading"｜ "group"｜ "divider", string>`                                             | Allows to set custom class names for the listbox section slots.                           | -       |
-| itemClasses      | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>`          | Allows to set custom class names for the listbox item slots.                              | -       |
-
----
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the listbox section. Usually a list of ListboxItem components. (static)",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string",
+      description: "The title of the listbox section.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the collection. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the items are selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show the divider between the groups.",
+      default: "false"
+    },
+    {
+      attribute: "dividerProps",
+      type: "DividerProps",
+      description: "The divider component props.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"heading\" | \"group\" | \"divider\", string>>",
+      description: "Allows to set custom class names for the listbox section slots.",
+      default: "-"
+    },
+    {
+      attribute: "itemClasses",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"shortcut\" | \"selectedIcon\", string>>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxItem Props
 
-| Attribute              | Type                                                                                          | Description                                                                                                                                                                      | Default |
-| ---------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\*             | `ReactNode`                                                                                   | The contents of the listbox item.                                                                                                                                                | -       |
-| key                    | `React.Key`                                                                                   | The unique key for the listbox item.                                                                                                                                             | -       |
-| title                  | `string` \| `ReactNode`                                                                       | The title of the listbox item.                                                                                                                                                   | -       |
-| textValue              | `string`                                                                                      | A string representation of the item's contents, used for features like typeahead.                                                                                                | -       |
-| description            | `string` \| `ReactNode`                                                                       | The description of the listbox item.                                                                                                                                             | -       |
-| shortcut               | `string` \| `ReactNode`                                                                       | The listbox item keyboard shortcut.                                                                                                                                              | -       |
-| startContent           | `ReactNode`                                                                                   | The start content of the listbox item.                                                                                                                                           | -       |
-| endContent             | `ReactNode`                                                                                   | The end content of the listbox item. This is positioned after the shortcut and the selected icon.                                                                                | -       |
-| selectedIcon           | [SelectedIconProps](#listbox-item-selected-icon-props)                                        | Custom icon to render when the item is selected.                                                                                                                                 | -       |
-| href                   | `string`                                                                                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target                 | `HTMLAttributeAnchorTarget`                                                                   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel                    | `string`                                                                                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download               | `boolean` \| `string`                                                                         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping                   | `string`                                                                                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy         | `HTMLAttributeReferrerPolicy`                                                                 | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| shouldHighlightOnFocus | `boolean`                                                                                     | Whether the focused item should be highlighted. It applies the same styles to the item as when hovered.                                                                          | `false` |
-| hideSelectedIcon       | `boolean`                                                                                     | Whether to hide the check icon when the item is selected.                                                                                                                        | `false` |
-| showDivider            | `boolean`                                                                                     | Whether to show a divider below the item.                                                                                                                                        | `false` |
-| isDisabled             | `boolean`                                                                                     | Whether the listbox item should be disabled. (**Deprecated**) pass **disabledKeys** to `Listbox` instead.                                                                        | `false` |
-| isSelected             | `boolean`                                                                                     | Whether the listbox item should be selected. (**Deprecated**) pass **selectedKeys** to `Listbox` instead.                                                                        | `false` |
-| isReadOnly             | `boolean`                                                                                     | Whether the listbox item press events should be ignored.                                                                                                                         | `false` |
-| classNames             | `Record<"base"｜ "wrapper"｜ "title"｜ "description"｜ "shortcut" ｜ "selectedIcon", string>` | Allows to set custom class names for the listbox item slots.                                                                                                                     | -       |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "key",
+      type: "React.Key",
+      description: "The unique key for the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "string | ReactNode",
+      description: "The title of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the item's contents, used for features like typeahead.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "string | ReactNode",
+      description: "The description of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "shortcut",
+      type: "string | ReactNode",
+      description: "The listbox item keyboard shortcut.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The start content of the listbox item.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The end content of the listbox item. This is positioned after the shortcut and the selected icon.",
+      default: "-"
+    },
+    {
+      attribute: "selectedIcon",
+      type: "ListboxItemSelectedIconProps",
+      description: "Custom icon to render when the item is selected.",
+      default: "-"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "shouldHighlightOnFocus",
+      type: "boolean",
+      description: "Whether the focused item should be highlighted. It applies the same styles to the item as when hovered.",
+      default: "false"
+    },
+    {
+      attribute: "hideSelectedIcon",
+      type: "boolean",
+      description: "Whether to hide the check icon when the item is selected.",
+      default: "false"
+    },
+    {
+      attribute: "showDivider",
+      type: "boolean",
+      description: "Whether to show a divider below the item.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the listbox item should be disabled. (Deprecated) pass disabledKeys to Listbox instead.",
+      default: "false"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the listbox item should be selected. (Deprecated) pass selectedKeys to Listbox instead.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the listbox item press events should be ignored.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"title\" | \"description\" | \"shortcut\" | \"selectedIcon\", string>>",
+      description: "Allows to set custom class names for the listbox item slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### ListboxItem Events
 
-| Attribute     | Type                           | Description                                                                                                     |
-| ------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| onAction      | `() => void`                   | Handler that is called when the listbox item is selected. (**Deprecated**) pass to `Listbox` instead.           |
-| onPress       | `(e: PressEvent) => void`      | Handler called when the press is released over the target.                                                      |
-| onPressStart  | `(e: PressEvent) => void`      | Handler called when a press interaction starts.                                                                 |
-| onPressEnd    | `(e: PressEvent) => void`      | Handler called when a press interaction ends, either over the target or when the pointer leaves the target.     |
-| onPressChange | `(isPressed: boolean) => void` | Handler called when the press state changes.                                                                    |
-| onPressUp     | `(e: PressEvent) => void`      | Handler called when a press is released over the target, regardless of whether it started on the target or not. |
-| onKeyDown     | `(e: KeyboardEvent) => void`   | Handler called when a key is pressed.                                                                           |
-| onKeyUp       | `(e: KeyboardEvent) => void`   | Handler called when a key is released.                                                                          |
-| onClick       | `MouseEventHandler`            | The native button click event handler (**Deprecated**) use **onPress** instead.                                 |
+<APITable
+  data={[
+    {
+      attribute: "onAction",
+      type: "() => void",
+      description: "Handler that is called when the listbox item is selected. (Deprecated) pass to Listbox instead.",
+      default: "-"
+    },
+    {
+      attribute: "onPress",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when the press is released over the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressStart",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction starts.",
+      default: "-"
+    },
+    {
+      attribute: "onPressEnd",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press interaction ends, either over the target or when the pointer leaves the target.",
+      default: "-"
+    },
+    {
+      attribute: "onPressChange",
+      type: "(isPressed: boolean) => void",
+      description: "Handler called when the press state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onPressUp",
+      type: "(e: PressEvent) => void",
+      description: "Handler called when a press is released over the target, regardless of whether it started on the target or not.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is pressed.",
+      default: "-"
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler called when a key is released.",
+      default: "-"
+    },
+    {
+      attribute: "onClick",
+      type: "MouseEventHandler",
+      description: "The native button click event handler (Deprecated) use onPress instead.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx
index f07789f5c7..3729e15df7 100644
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@@ -42,19 +42,19 @@ NextUI exports 5 modal-related components:
 <ImportTabs
   commands={{
     main: `import {
-  Modal, 
-  ModalContent, 
-  ModalHeader, 
-  ModalBody, 
-  ModalFooter
+    Modal,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalFooter
 } from "@nextui-org/react";`,
     individual:
       `import {
-  Modal, 
-  ModalContent, 
-  ModalHeader, 
-  ModalBody, 
-  ModalFooter
+    Modal,
+    ModalContent,
+    ModalHeader,
+    ModalBody,
+    ModalFooter
 } from "@nextui-org/modal";`,
   }}
 />
@@ -72,9 +72,9 @@ When the modal opens:
 
 <CodeDemo title="Sizes" files={modalContent.sizes} />
 
-### Non-dissmissable
+### Non-dismissible
 
-By default, the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key. 
+By default, the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.
 You can disable this behavior by setting the following properties:
 
 - Set the `isDismissable` property to `false` to prevent the modal from closing when clicking on the overlay.
@@ -138,6 +138,18 @@ Modal offers a `motionProps` property to customize the `enter` / `exit` animatio
 
 > Learn more about Framer motion variants [here](https://www.framer.com/motion/animation/#variants).
 
+### Draggable
+
+Try to drag the header part.
+
+<CodeDemo title="Draggable" files={modalContent.draggable} />
+
+### Draggable Overflow
+
+Set overflow to true can drag overflow the viewport.
+
+<CodeDemo title="Draggable Overflow" files={modalContent.draggableOverflow} />
+
 ## Slots
 
 - **wrapper**: The wrapper slot of the modal. It wraps the `base` and the `backdrop` slots.
@@ -181,33 +193,137 @@ You can customize the `Modal` component by passing custom Tailwind CSS classes t
 
 ### Modal Props
 
-| Attribute                 | Type                                                                                                | Description                                                                                           | Default         |
-| ------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------- |
-| children\*                | `ReactNode`                                                                                         | The content of the modal. It's usually the `ModalContent`.                                            | -               |
-| size                      | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `4xl` \| `5xl` \| `full`                  | The modal size. This changes the modal `max-width` and `height` (full).                               | `md`            |
-| radius                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The modal border radius.                                                                              | `lg`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                                                      | The modal shadow.                                                                                     | `lg`            |
-| backdrop                  | `transparent` \| `opaque` \| `blur`                                                                 | The modal backdrop type.                                                                              | `opaque`        |
-| scrollBehavior            | `normal` \| `inside` \| `outside`                                                                   | The modal scroll behavior.                                                                            | `normal`        |
-| placement                 | `auto` \| `top` \| `center` \| `bottom`                                                             | The modal position.                                                                                   | `auto`          |
-| isOpen                    | `boolean`                                                                                           | Whether the modal is open by default (controlled).                                                    | -               |
-| defaultOpen               | `boolean`                                                                                           | Whether the modal is open by default (uncontrolled).                                                  | -               |
-| isDismissable             | `boolean`                                                                                           | Whether the modal can be closed by clicking on the overlay or pressing the <Kbd>Esc</Kbd> key.        | `true`          |
-| isKeyboardDismissDisabled | `boolean`                                                                                           | Whether pressing the <Kbd>Esc</Kbd> key to close the modal should be disabled.                        | `false`         |
-| shouldBlockScroll         | `boolean`                                                                                           | Whether the modal should block the scroll of the page on open.                                        | `true`          |
-| hideCloseButton           | `boolean`                                                                                           | Whether to hide the modal close button.                                                               | `false`         |
-| closeButton               | `ReactNode`                                                                                         | Custom close button to display on top right corner.                                                   | -               |
-| motionProps               | [MotionProps](#motion-props)                                                                        | The props to modify the framer motion animation. Use the `variants` API to create your own animation. |                 |
-| portalContainer           | `HTMLElement`                                                                                       | The container element in which the overlay portal will be placed.                                     | `document.body` |
-| disableAnimation          | `boolean`                                                                                           | Whether the modal should not have animations.                                                         | `false`         |
-| classNames                | `Record<"wrapper"｜ "base"｜ "backdrop"｜ "header" ｜ "body" ｜ "footer" ｜ "closeButton", string>` | Allows to set custom class names for the modal slots.                                                 | -               |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The content of the modal. It's usually the `ModalContent`.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "xs | sm | md | lg | xl | 2xl | 3xl | 4xl | 5xl | full",
+      description: "The modal size. This changes the modal `max-width` and `height` (full).",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The modal border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The modal shadow.",
+      default: "lg"
+    },
+    {
+      attribute: "backdrop",
+      type: "transparent | opaque | blur",
+      description: "The modal backdrop type.",
+      default: "opaque"
+    },
+    {
+      attribute: "scrollBehavior",
+      type: "normal | inside | outside",
+      description: "The modal scroll behavior.",
+      default: "normal"
+    },
+    {
+      attribute: "placement",
+      type: "auto | top | center | bottom",
+      description: "The modal position.",
+      default: "auto"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the modal is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the modal is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether the modal can be closed by clicking on the overlay or pressing the Esc key.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the Esc key to close the modal should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the modal should block the scroll of the page on open.",
+      default: "true"
+    },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Whether to hide the modal close button.",
+      default: "false"
+    },
+    {
+      attribute: "closeButton",
+      type: "ReactNode",
+      description: "Custom close button to display on top right corner.",
+      default: "-"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the `variants` API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the modal should not have animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'wrapper' | 'base' | 'backdrop' | 'header' | 'body' | 'footer' | 'closeButton', string>>",
+      description: "Allows to set custom class names for the modal slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Modal Events
 
-| Attribute    | Type                        | Description                                                 |
-| ------------ | --------------------------- | ----------------------------------------------------------- |
-| onOpenChange | `(isOpen: boolean) => void` | Handler that is called when the modal's open state changes. |
-| onClose      | `() => void`                | Handler that is called when the modal is closed.            |
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the modal's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the modal is closed.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={4} />
 
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index d267c48d26..f0ba7cbcb7 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -44,22 +44,22 @@ NextUI exports 7 navbar-related components:
 <ImportTabs
   commands={{
     main: `import {
-  Navbar, 
-  NavbarBrand, 
-  NavbarContent, 
-  NavbarItem, 
-  NavbarMenuToggle,
-  NavbarMenu,
-  NavbarMenuItem
+    Navbar, 
+    NavbarBrand, 
+    NavbarContent, 
+    NavbarItem, 
+    NavbarMenuToggle,
+    NavbarMenu,
+    NavbarMenuItem
 } from "@nextui-org/react";`,
     individual: `import {
-  Navbar, 
-  NavbarBrand, 
-  NavbarContent, 
-  NavbarItem, 
-  NavbarMenuToggle,
-  NavbarMenu,
-  NavbarMenuItem
+    Navbar, 
+    NavbarBrand, 
+    NavbarContent, 
+    NavbarItem, 
+    NavbarMenuToggle,
+    NavbarMenu,
+    NavbarMenuItem
 } from "@nextui-org/navbar";`,
   }}
 />
@@ -117,7 +117,6 @@ If you want to remove the `open` / `close` animation, you can pass the `disableA
   asIframe
   title="With Menu"
   iframeInitialWidth={420}
-  highlightedLines="24"
   previewHeight="600px"
   iframeSrc="/examples/navbar/disable-menu-animation"
   files={navbarContent.disableMenuAnimation}
@@ -132,7 +131,6 @@ You can use the `isMenuOpen` and `onMenuOpenChange` props to control the navbar
   title="Controlled Menu"
   iframeInitialWidth={420}
   previewHeight="600px"
-  highlightedLines="5,23-24"
   iframeSrc="/examples/navbar/controlled-menu"
   files={navbarContent.controlledMenu}
 />
@@ -206,7 +204,6 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can
   title="Customizing the active item"
   previewHeight="420px"
   iframeSrc="/examples/navbar/custom-active-item"
-  highlightedLines="9-20"
   files={navbarContent.customActiveItem}
 />
 
@@ -263,79 +260,241 @@ When the `NavbarItem` is active, it will have a `data-active` attribute. You can
 
 ### Navbar Props
 
-| Attribute            | Type                                                                                                                | Description                                                                                                                                         | Default       |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| children\*           | `ReactNode[]`                                                                                                       | The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem`                                             | -             |
-| height               | `string` \| `number`                                                                                                | The height of the navbar.                                                                                                                           | `4rem` (64px) |
-| position             | `static` \| `sticky`                                                                                                | The position of the navbar.                                                                                                                         | `sticky`      |
-| maxWidth             | `sm` \| `md` \| `lg` \| `xl` \| `2xl` \| `full`                                                                     | The max width of the navbar wrapper.                                                                                                                | `lg`          |
-| parentRef            | `React.RefObject<HTMLElement>`                                                                                      | The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not. | `window`      |
-| isBordered           | `boolean`                                                                                                           | Whether the navbar should have a bottom border or not.                                                                                              | `false`       |
-| isBlurred            | `boolean`                                                                                                           | Whether the navbar should have a blur effect or not.                                                                                                | `true`        |
-| isMenuOpen           | `boolean`                                                                                                           | Indicates if the navbar menu is open. (controlled)                                                                                                  | `false`       |
-| isMenuDefaultOpen    | `boolean`                                                                                                           | Indicates if the navbar menu is open by default. (uncontrolled)                                                                                     | `false`       |
-| shouldHideOnScroll   | `boolean`                                                                                                           | Indicates if the navbar should hide on scroll.                                                                                                      | `false`       |
-| motionProps          | [MotionProps](#motion-props)                                                                                        | The motion props to control the `visible` / `hidden` animation. This motion is only available if the `shouldHideOnScroll` prop is set to `true`.   | -             |
-| disableScrollHandler | `boolean`                                                                                                           | Whether the navbar parent scroll event should be listened to or not.                                                                                | `false`       |
-| disableAnimation     | `boolean`                                                                                                           | Whether the navbar menu animation should be disabled or not.                                                                                        | `false`       |
-| classNames           | `Record<"base"｜ "wrapper"｜ "brand"｜ "content"｜ "item"｜ "toggle"｜ "toggleIcon"｜ "menu"｜ "menuItem", string>` | Allows to set custom class names for the navbar slots.                                                                                              | -             |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
+      default: "-"
+    },
+    {
+      attribute: "height",
+      type: "string | number",
+      description: "The height of the navbar.",
+      default: "4rem (64px)"
+    },
+    {
+      attribute: "position",
+      type: "static | sticky",
+      description: "The position of the navbar.",
+      default: "sticky"
+    },
+    {
+      attribute: "maxWidth",
+      type: "sm | md | lg | xl | 2xl | full",
+      description: "The max width of the navbar wrapper.",
+      default: "lg"
+    },
+    {
+      attribute: "parentRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "The parent element where the navbar is placed within. This is used to determine the scroll position and whether the navbar should be hidden or not.",
+      default: "window"
+    },
+    {
+      attribute: "isBordered",
+      type: "boolean",
+      description: "Whether the navbar should have a bottom border or not.",
+      default: "false"
+    },
+    {
+      attribute: "isBlurred",
+      type: "boolean",
+      description: "Whether the navbar should have a blur effect or not.",
+      default: "true"
+    },
+    {
+      attribute: "isMenuOpen",
+      type: "boolean",
+      description: "Indicates if the navbar menu is open. (controlled)",
+      default: "false"
+    },
+    {
+      attribute: "isMenuDefaultOpen",
+      type: "boolean",
+      description: "Indicates if the navbar menu is open by default. (uncontrolled)",
+      default: "false"
+    },
+    {
+      attribute: "shouldHideOnScroll",
+      type: "boolean",
+      description: "Indicates if the navbar should hide on scroll.",
+      default: "false"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion props to control the visible / hidden animation. This motion is only available if the shouldHideOnScroll prop is set to true.",
+      default: "-"
+    },
+    {
+      attribute: "disableScrollHandler",
+      type: "boolean",
+      description: "Whether the navbar parent scroll event should be listened to or not.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the navbar menu animation should be disabled or not.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'wrapper' | 'brand' | 'content' | 'item' | 'toggle' | 'toggleIcon' | 'menu' | 'menuItem', string>>",
+      description: "Allows to set custom class names for the navbar slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Navbar Events
 
-| Attribute              | Type                         | Description                                                                                                                                                                            |
-| ---------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onMenuOpenChange       | `(isOpen: boolean) => void`  | Handler that is called when the navbar menu open state changes.                                                                                                                        |
-| onScrollPositionChange | `(position: number) => void` | Handler that is called when the navbar parent element is scrolled. This event is only dispatched if `disableScrollHandler` is set to `false` or `shouldHideOnScroll` is set to `true`. |
+<APITable
+  data={[
+    {
+      attribute: "onMenuOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the navbar menu open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "onScrollPositionChange",
+      type: "(position: number) => void",
+      description: "Handler that is called when the navbar parent element is scrolled. This event is only dispatched if disableScrollHandler is set to false or shouldHideOnScroll is set to true.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarContent Props
 
-| Attribute  | Type                         | Description                                                                                             | Default |
-| ---------- | ---------------------------- | ------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode[]`                | The children to render. Usually navbar elements such as `NavbarBrand`, `NavbarContent` and `NavbarItem` | -       |
-| justify    | `start` \| `center` \| `end` | The justify content of the navbar content. It takes into account the correct space distribution.        | `start` |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually navbar elements such as NavbarBrand, NavbarContent and NavbarItem",
+      default: "-"
+    },
+    {
+      attribute: "justify",
+      type: "start | center | end",
+      description: "The justify content of the navbar content. It takes into account the correct space distribution.",
+      default: "start"
+    }
+  ]}
+/>
 
 ### NavbarItem Props
 
-| Attribute | Type        | Description                                | Default |
-| --------- | ----------- | ------------------------------------------ | ------- |
-| children  | `ReactNode` | The children to render as the navbar item. | -       |
-| isActive  | `boolean`   | Whether the navbar item is active or not.  | `false` |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The children to render as the navbar item.",
+      default: "-"
+    },
+    {
+      attribute: "isActive",
+      type: "boolean",
+      description: "Whether the navbar item is active or not.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### NavbarMenuToggle Props
 
-| Attribute       | Type                                                                  | Description                                                           | Default                        |
-| --------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | ------------------------------ |
-| icon            | `ReactNode` \| `(isOpen: boolean \| undefined) => ReactNode \| null;` | The icon to render as the navbar menu toggle.                         | -                              |
-| isSelected      | `boolean`                                                             | Whether the navbar menu toggle is selected. (controlled)              | `false`                        |
-| defaultSelected | `boolean`                                                             | Whether the navbar menu toggle is selected by default. (uncontrolled) | `false`                        |
-| srOnlyText      | `string`                                                              | The text to be used by screen readers.                                | `open`/`close` navigation menu |
+<APITable
+  data={[
+    {
+      attribute: "icon",
+      type: "ReactNode | ((isOpen: boolean | undefined) => ReactNode | null)",
+      description: "The icon to render as the navbar menu toggle.",
+      default: "-"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the navbar menu toggle is selected. (controlled)",
+      default: "false"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the navbar menu toggle is selected by default. (uncontrolled)",
+      default: "false"
+    },
+    {
+      attribute: "srOnlyText",
+      type: "string",
+      description: "The text to be used by screen readers.",
+      default: "open/close navigation menu"
+    }
+  ]}
+/>
 
 ### NavbarMenuToggle Events
 
-| Attribute | Type                        | Description                                                    |
-| --------- | --------------------------- | -------------------------------------------------------------- |
-| onChange  | `(isOpen: boolean) => void` | Handler that is called when the navbar menu toggle is pressed. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the navbar menu toggle is pressed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarMenu Props
 
-| Attribute       | Type                         | Description                                                                                                                                  | Default         |
-| --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| children\*      | `ReactNode[]`                | The children to render as the navbar menu. Usually a list of `NavbarMenuItem` components.                                                    | -               |
-| portalContainer | `HTMLElement`                | The container element in which the navbar menu overlay portal will be placed.                                                                | `document.body` |
-| motionProps     | [MotionProps](#motion-props) | The motion props to control the `open` / `close` animation. This motion is only available if the `disableAnimation` prop is set to `false`. | -               |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render as the navbar menu. Usually a list of NavbarMenuItem components.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the navbar menu overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The motion props to control the open / close animation. This motion is only available if the disableAnimation prop is set to false.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### NavbarMenuItem Props
 
-| Attribute | Type        | Description                              | Default |
-| --------- | ----------- | ---------------------------------------- | ------- |
-| children  | `ReactNode` | The children to render as the menu item. | -       |
-| isActive  | `boolean`   | Whether the menu item is active or not.  | `false` |
-
-> **Note**: The rest of the navbar components such as `NavbarMenuItem` and `NavbarBrand` have the same props as the `li` element.
-
-### Navbar types
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The children to render as the menu item.",
+      default: "-"
+    },
+    {
+      attribute: "isActive",
+      type: "boolean",
+      description: "Whether the menu item is active or not.",
+      default: "false"
+    }
+  ]}
+/>
 
-#### Motion Props
+### Types
 
 ```ts
 export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx
index 4997f4aba2..01d50ef228 100644
--- a/apps/docs/content/docs/components/pagination.mdx
+++ b/apps/docs/content/docs/components/pagination.mdx
@@ -176,34 +176,143 @@ your own implementation.
 
 ### Pagination Props
 
-| Attribute              | Type                                                                                                                          | Description                                                              | Default   |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | --------- |
-| variant                | `flat` \| `bordered` \| `light` \| `faded`                                                                                    | The pagination variant.                                                  | `flat`    |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                   | The pagination color theme.                                              | `default` |
-| size                   | `sm` \| `md` \| `lg`                                                                                                          | The pagination size.                                                     | `md`      |
-| radius                 | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                      | The pagination border radius.                                            | `xl`      |
-| total                  | `number`                                                                                                                      | The total number of pages.                                               | `1`       |
-| dotsJump               | `number`                                                                                                                     | The number of pages that are added or subtracted on the '...' button.    | `5`       |
-| initialPage            | `number`                                                                                                                      | The initial page. (uncontrolled)                                         | `1`       |
-| page                   | `number`                                                                                                                      | The current page. (controlled)                                           | -         |
-| siblings               | `number`                                                                                                                      | The number of pages to show before and after the current page.           | `1`       |
-| boundaries             | `number`                                                                                                                      | The number of pages to show at the beginning and end of the pagination.  | `1`       |
-| loop                   | `boolean`                                                                                                                     | Whether the pagination should be looped.                                 | `false`   |
-| isCompact              | `boolean`                                                                                                                     | Whether the pagination should have a compact style.                      | `false`   |
-| isDisabled             | `boolean`                                                                                                                     | Whether the pagination is disabled.                                      | `false`   |
-| showShadow             | `boolean`                                                                                                                     | Whether the pagination cursor should have a shadow.                      | `false`   |
-| showControls           | `boolean`                                                                                                                     | Whether the pagination should have controls.                             | `false`   |
-| disableCursorAnimation | `boolean`                                                                                                                     | Whether the pagination cursor should be hidden.                          | `false`   |
-| renderItem             | [PaginationItemProps](#pagination-item-props)                                                                                 | The pagination item render function.                                     | -         |
-| getItemAriaLabel       | `(page: string) => string`                                                                                                    | A function that allows you to customize the pagination items aria-label. | -         |
-| disableAnimation       | `boolean`                                                                                                                     | Whether the pagination cursor should be animated.                        | `false`   |
-| classNames             | `Record<"base"｜ "wrapper" ｜ "prev"｜ "next" ｜ "item" ｜ "cursor" ｜ "forwardIcon" ｜ "ellipsis" ｜ "chevronNext", string>` | Allows to set custom class names for the pagination slots.               | -         |
+<APITable
+  data={[
+    {
+      attribute: "variant",
+      type: "flat | bordered | light | faded",
+      description: "The pagination variant.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The pagination color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The pagination size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The pagination border radius.",
+      default: "xl"
+    },
+    {
+      attribute: "total",
+      type: "number",
+      description: "The total number of pages.",
+      default: "1"
+    },
+    {
+      attribute: "dotsJump",
+      type: "number",
+      description: "The number of pages that are added or subtracted on the '...' button.",
+      default: "5"
+    },
+    {
+      attribute: "initialPage",
+      type: "number",
+      description: "The initial page. (uncontrolled)",
+      default: "1"
+    },
+    {
+      attribute: "page",
+      type: "number",
+      description: "The current page. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "siblings",
+      type: "number",
+      description: "The number of pages to show before and after the current page.",
+      default: "1"
+    },
+    {
+      attribute: "boundaries",
+      type: "number",
+      description: "The number of pages to show at the beginning and end of the pagination.",
+      default: "1"
+    },
+    {
+      attribute: "loop",
+      type: "boolean",
+      description: "Whether the pagination should be looped.",
+      default: "false"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean",
+      description: "Whether the pagination should have a compact style.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the pagination is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean",
+      description: "Whether the pagination cursor should have a shadow.",
+      default: "false"
+    },
+    {
+      attribute: "showControls",
+      type: "boolean",
+      description: "Whether the pagination should have controls.",
+      default: "false"
+    },
+    {
+      attribute: "disableCursorAnimation",
+      type: "boolean",
+      description: "Whether the pagination cursor should be hidden.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the pagination cursor should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "renderItem",
+      type: "PaginationItemProps",
+      description: "The pagination item render function.",
+      default: "-"
+    },
+    {
+      attribute: "getItemAriaLabel",
+      type: "(page: string) => string",
+      description: "A function that allows you to customize the pagination items aria-label.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'wrapper' | 'prev' | 'next' | 'item' | 'cursor' | 'forwardIcon' | 'ellipsis' | 'chevronNext', string>>",
+      description: "Allows to set custom class names for the pagination slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Pagination Events
 
-| Attribute | Type                     | Description                                                     |
-| --------- | ------------------------ | --------------------------------------------------------------- |
-| onChange  | `(page: number) => void` | Handler that is called when the pagination active page changes. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(page: number) => void",
+      description: "Handler that is called when the pagination active page changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
index 7f5ddb3a94..de4642d2f8 100644
--- a/apps/docs/content/docs/components/popover.mdx
+++ b/apps/docs/content/docs/components/popover.mdx
@@ -148,63 +148,211 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
 
 ### Popover Props
 
-| Attribute                 | Type                                                                        | Description                                                                                                                                                  | Default         |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- |
-| children\*                | `ReactNode[]`                                                               | The content of the popover. It's usually the `PopoverTrigger` and `PopoverContent`.                                                                          | -               |
-| size                      | `sm` \| `md` \| `lg`                                                        | The popover content font size.                                                                                                                               | `md`            |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The popover color theme.                                                                                                                                     | `default`       |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The popover border radius.                                                                                                                                   | `lg`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                              | The popover shadow.                                                                                                                                          | `lg`            |
-| backdrop                  | `transparent` \| `opaque` \| `blur`                                         | The popover backdrop type.                                                                                                                                   | `transparent`   |
-| placement                 | [PopoverPlacement](#popover-placement)                                      | The placement of the popover relative to its trigger reference.                                                                                              | `bottom`        |
-| state                     | `OverlayTriggerState`                                                       | The controlled state of the popover. See [Overlay States](https://react-spectrum.adobe.com/react-stately/useOverlayTriggerState.html#useoverlaytriggerstate) | -               |
-| isOpen                    | `boolean`                                                                   | Whether the popover is open by default (controlled).                                                                                                         | -               |
-| defaultOpen               | `boolean`                                                                   | Whether the popover is open by default (uncontrolled).                                                                                                       | -               |
-| offset(px)                | `number`                                                                    | The distance or margin between the reference and popper. It is used internally to create an offset modifier.                                                 | `7`             |
-| containerPadding(px)      | `number`                                                                    | The placement padding that should be applied between the element and its surrounding container.                                                              | `12`            |
-| crossOffset(px)           | `number`                                                                    | The additional offset applied along the cross axis between the element and its anchor element.                                                               | `0`             |
-| triggerType               | `dialog` \| `menu` \| `listbox` \| `tree` \| `grid`;                        | Type of popover that is opened by the trigger.                                                                                                               | `dialog`        |
-| showArrow                 | `boolean`                                                                   | Whether the popover should have an arrow.                                                                                                                    | `false`         |
-| shouldFlip                | `boolean`                                                                   | Whether the popover should change its placement and flip when it's about to overflow its boundary area.                                                      | `true`          |
-| triggerScaleOnOpen        | `boolean`                                                                   | Whether the trigger should scale down when the popover is open.                                                                                              | `true`          |
-| shouldBlockScroll         | `boolean`                                                                   | Whether to block scrolling outside the popover.                                                                                                              | `false`         |
-| isKeyboardDismissDisabled | `boolean`                                                                   | Whether pressing the escape key to close the popover should be disabled.                                                                                     | `false`         |
-| shouldCloseOnBlur         | `boolean`                                                                   | Whether the popover should close when focus is lost or moves outside it.                                                                                     | `false`         |
-| motionProps               | [MotionProps](#motion-props)                                                | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                                                        |                 |
-| portalContainer           | `HTMLElement`                                                               | The container element in which the overlay portal will be placed.                                                                                            | `document.body` |
-| updatePositionDeps        | `any[]`                                                                     | The dependencies to force the popover position update.                                                                                                       | `[]`            |
-| triggerRef                | `RefObject<HTMLElement>`                                                    | The ref for the element which the popover positions itself with respect to.                                                                                  | -               |
-| scrollRef                 | `RefObject<HTMLElement>`                                                    | A ref for the scrollable region within the popover.                                                                                                          | `overlayRef`    |
-| disableAnimation          | `boolean`                                                                   | Whether the popover is animated.                                                                                                                             | `false`         |
-| classNames                | `Record<"base"｜ "trigger"｜ "backdrop"｜ "content", string>`               | Allows to set custom class names for the popover slots.                                                                                                      | -               |
-
-<Spacer y={1} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The content of the popover. It's usually the PopoverTrigger and PopoverContent.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The popover content font size.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The popover color theme.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The popover border radius.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The popover shadow.",
+      default: "lg"
+    },
+    {
+      attribute: "backdrop",
+      type: "transparent | opaque | blur",
+      description: "The popover backdrop type.",
+      default: "transparent"
+    },
+    {
+      attribute: "placement",
+      type: "PopoverPlacement",
+      description: "The placement of the popover relative to its trigger reference.",
+      default: "bottom"
+    },
+    {
+      attribute: "state",
+      type: "OverlayTriggerState",
+      description: "The controlled state of the popover.",
+      default: "-"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the popover is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the popover is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "offset",
+      type: "number",
+      description: "The distance or margin between the reference and popper.",
+      default: "7"
+    },
+    {
+      attribute: "containerPadding",
+      type: "number",
+      description: "The placement padding between the element and its surrounding container.",
+      default: "12"
+    },
+    {
+      attribute: "crossOffset",
+      type: "number",
+      description: "The additional offset applied along the cross axis between the element and its anchor element.",
+      default: "0"
+    },
+    {
+      attribute: "triggerType",
+      type: "dialog | menu | listbox | tree | grid",
+      description: "Type of popover that is opened by the trigger.",
+      default: "dialog"
+    },
+    {
+      attribute: "showArrow",
+      type: "boolean",
+      description: "Whether the popover should have an arrow.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFlip",
+      type: "boolean",
+      description: "Whether the popover should change its placement and flip when it's about to overflow.",
+      default: "true"
+    },
+    {
+      attribute: "triggerScaleOnOpen",
+      type: "boolean",
+      description: "Whether the trigger should scale down when the popover is open.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether the popover should block the scroll outside the popover.",
+      default: "true"
+    },
+    {
+      attribute: "shouldCloseOnScroll",
+      type: "boolean",
+      description: "Whether the popover should close on scroll.",
+      default: "false"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the escape key to close the popover should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the popover should close when focus is lost or moves outside it.",
+      default: "false"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the popover is animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'trigger' | 'backdrop' | 'content', string>>",
+      description: "Allows to set custom class names for the popover slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Popover Events
 
-| Attribute                    | Type                        | Description                                                                                                                                                                                                                                                                                               |
-| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the popover's open state changes.                                                                                                                                                                                                                                             |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the overlay ref. |
-| onClose                      | `() => void`                | Handler that is called when the popover should close.                                                                                                                                                                                                                                                     |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the popover's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the popover ref, return true if onClose should be called.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the popover should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### PopoverTrigger Props
 
-| Attribute  | Type        | Description                                                                                                                                                                | Default |
-| ---------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode` | The popover trigger component, ensure the children passed is focusable. Users can tab to it using their keyboard, and it can take a ref. It is critical for accessibility. | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The popover trigger component, ensure the children passed is focusable.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### PopoverContent Props
 
-| Attribute | Type        | Description                                                | Default |
-| --------- | ----------- | ---------------------------------------------------------- | ------- |
-| children  | `ReactNode` | The content that is displayed when the trigger is pressed. | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content that is displayed when the trigger is pressed.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Popover types
 
diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx
index 04f4a2b19a..3a8a5a75a0 100644
--- a/apps/docs/content/docs/components/progress.mdx
+++ b/apps/docs/content/docs/components/progress.mdx
@@ -122,20 +122,97 @@ You can customize the `Progress` component by passing custom Tailwind CSS classe
 
 ### Progress Props
 
-| Attribute        | Type                                                                                                                    | Description                                                | Default              |
-| ---------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------------------- |
-| label            | `ReactNode`                                                                                                             | The content to display as the label.                       | -                    |
-| size             | `sm` \| `md` \| `lg`                                                                                                    | The size of the indicator.                                 | `md`                 |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                             | The color of the indicator.                                | `primary`            |
-| radius           | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                | The progress border radius.                                | `full`               |
-| value            | `number`                                                                                                                | The current value (controlled).                            | -                    |
-| valueLabel       | `ReactNode`                                                                                                             | The content to display as the value's label (e.g. 1 of 4). | -                    |
-| minValue         | `number`                                                                                                                | The smallest value allowed for the input.                  | `0`                  |
-| maxValue         | `number`                                                                                                                | The largest value allowed for the input.                   | `100`                |
-| formatOptions    | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) | The options to format the value.                           | `{style: 'percent'}` |
-| isIndeterminate  | `boolean`                                                                                                               | Whether the progress is indeterminate.                     | `false`              |
-| isStriped        | `boolean`                                                                                                               | Whether the progress is striped.                           | `false`              |
-| showValueLabel   | `boolean`                                                                                                               | Whether to show the value label.                           | `true`               |
-| isDisabled       | `boolean`                                                                                                               | Whether the progress is disabled.                          | `false`              |
-| disableAnimation | `boolean`                                                                                                               | Whether to disable the animation.                          | `false`              |
-| classNames       | `Record<"base"｜"labelWrapper"｜"label"｜"track"｜"value"｜"track"｜"indicator", string>`                               | Allows to set custom class names for the progress slots.   | -                    |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the indicator.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the indicator.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The progress border radius.",
+      default: "full"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "valueLabel",
+      type: "ReactNode",
+      description: "The content to display as the value's label (e.g. 1 of 4).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The smallest value allowed for the input.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The largest value allowed for the input.",
+      default: "100"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "{style: 'percent'}"
+    },
+    {
+      attribute: "isIndeterminate",
+      type: "boolean",
+      description: "Whether the progress is indeterminate.",
+      default: "false"
+    },
+    {
+      attribute: "isStriped",
+      type: "boolean",
+      description: "Whether the progress is striped.",
+      default: "false"
+    },
+    {
+      attribute: "showValueLabel",
+      type: "boolean",
+      description: "Whether to show the value label.",
+      default: "true"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the progress is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'labelWrapper' | 'label' | 'track' | 'value' | 'indicator', string>>",
+      description: "Allows to set custom class names for the progress slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index 33ee12628c..4a2ae2545a 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -147,47 +147,213 @@ In case you need to customize the radio group even further, you can use the `use
 
 ### RadioGroup Props
 
-| Attribute          | Type                                                                        | Description                                                                                                                                                                                                             | Default    |
-| ------------------ | --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
-| children           | `ReactNode` \| `ReactNode[]`                                                | The list of radio elements.                                                                                                                                                                                             | -          |
-| label              | `ReactNode`                                                                 | The label of the radio group.                                                                                                                                                                                           | -          |
-| size               | `sm` \| `md` \| `lg`                                                        | The size of the radios.                                                                                                                                                                                                 | `md`       |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the radios.                                                                                                                                                                                                | `primary`  |
-| orientation        | `horizontal` \| `vertical`                                                  | The orientation of the radio group.                                                                                                                                                                                     | `vertical` |
-| name               | `string`                                                                    | The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).                                                       | -          |
-| value              | `string[]`                                                                  | The current selected value. (controlled).                                                                                                                                                                               | -          |
-| defaultValue       | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                                                                             | -          |
-| description        | `ReactNode`                                                                 | Radio group description .                                                                                                                                                                                               | -          |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                                                                              | -          |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
-| validationBehavior | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
-| isDisabled         | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                                                                                    | `false`    |
-| isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                                                                               | `false`    |
-| isReadOnly         | `boolean`                                                                   | Whether the checkboxes can be selected but not changed by the user.                                                                                                                                                     | -          |
-| isInvalid          | `boolean`                                                                   | Whether the radio group is invalid.                                                                                                                                                                                     | `false`    |
-| validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                  | `false`    |
-| disableAnimation   | `boolean`                                                                   | Whether the animation should be disabled.                                                                                                                                                                               | `false`    |
-| classNames         | `Record<"base"｜ "wrapper"｜ "label", string>`                              | Allows to set custom class names for the radio group slots.                                                                                                                                                             | -          |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]", 
+      description: "The list of radio elements.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The label of the radio group.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the radios.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the radios.",
+      default: "primary"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The orientation of the radio group.",
+      default: "vertical"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the RadioGroup, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name_and_radio_buttons).",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string[]",
+      description: "The current selected value. (controlled)",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string[]", 
+      description: "The default selected value. (uncontrolled)",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "Radio group description.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "Radio group error message.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the radio group is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean", 
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the radio group is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the inputs should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"label\", string>>",
+      description: "Allows to set custom class names for the radio group slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### RadioGroup Events
 
-| Attribute     | Type                                  | Description                                                                                                                         |
-| ------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange | `((value: string) => void)`           | Handler that is called when the value changes.                                                                                      |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "((value: string) => void)",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Radio Props
 
-| Attribute        | Type                                                                                           | Description                                                                                    | Default   |
-| ---------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                                    | The label of the radio.                                                                        | -         |
-| label            | `ReactNode`                                                                                    | The label of the radio.                                                                        | -         |
-| size             | `sm` \| `md` \| `lg`                                                                           | The size of the radio.                                                                         | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                    | The color of the radio.                                                                        | `primary` |
-| description      | `ReactNode`                                                                                    | A description for the field. Provides a hint such as specific requirements for what to choose. | -         |
-| isDisabled       | `boolean`                                                                                      | Whether the radio is disabled.                                                                 | `false`   |
-| isRequired       | `boolean`                                                                                      | Whether user checkboxes are required on the input before form submission.                      | `false`   |
-| isReadOnly       | `boolean`                                                                                      | Whether the checkboxes can be selected but not changed by the user.                            | -         |
-| isInvalid        | `boolean`                                                                                      | Whether the radio is invalid. This is based on the radio group `validationState` prop.        | `false`   |
-| disableAnimation | `boolean`                                                                                      | Whether the animation should be disabled.                                                      | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "labelWrapper" ｜ "label" ｜ "control" ｜ "description", string>` | Allows to set custom class names for the radio slots.                                          | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the radio.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The label of the radio.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the radio.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the radio.",
+      default: "primary"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the radio is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user checkboxes are required on the input before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the checkboxes can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the radio is invalid. This is based on the radio group validationState prop.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"labelWrapper\" | \"label\" | \"control\" | \"description\", string>>",
+      description: "Allows to set custom class names for the radio slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx
index 170ca67651..1028e80249 100644
--- a/apps/docs/content/docs/components/range-calendar.mdx
+++ b/apps/docs/content/docs/components/range-calendar.mdx
@@ -107,6 +107,12 @@ This example validates that the selected date is a weekday and not a weekend acc
 
 <CodeDemo title="Invalid Date" files={rangeCalendarContent.invalidDate} />
 
+### With Month And Year Picker
+
+Calendar supports month and year picker for rapid selection. You can enable this feature by setting `showMonthAndYearPickers` to `true`. However, if `visibleMonths` is set to a number greater than 1, this feature will be disabled.
+
+<CodeDemo title="With Month And Year Picker" files={rangeCalendarContent.withMonthAndYearPicker} />
+
 ### International Calendars
 
 Calendar supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the [Unicode calendar locale extension](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/calendar#adding_a_calendar_in_the_locale_string), passed to the `Provider` component.
@@ -201,42 +207,191 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 
 ### RangeCalendar Props
 
-| Attribute                 | Type                                                                                                                                                                                                                                                                                                                                                                                          | Description                                                                                                                                                                               | Default                           |   |
-|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------|---|
-| value                     | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The current value (controlled).   | - |
-| defaultValue              | `RangeValue                                                                                                                                                                                                                                                                                                                                                                                   | null`                                                                                                                                                                                     | The default value (uncontrolled). | - |
-| minValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The minimum allowed date that a user may select.                                                                                                                                          | -                                 |   |
-| maxValue                  | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The maximum allowed date that a user may select.                                                                                                                                          | -                                 |   |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                                                                                                                                                                                                   | The color of the time input.                                                                                                                                                              | `default`                         |   |
-| visibleMonths             | `number`                                                                                                                                                                                                                                                                                                                                                                                      | The number of months to display at once. Up to 3 months are supported.                                                                                                                    | `1`                               |   |
-| focusedValue              | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | Controls the currently focused date within the calendar.                                                                                                                                  | -                                 |   |
-| defaultFocusedValue       | `DateValue`                                                                                                                                                                                                                                                                                                                                                                                   | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                  | -                                 |   |
-| calendarWidth             | `number` \| `string`                                                                                                                                                                                                                                                                                                                                                                          | The width to be applied to the calendar component. This value is multiplied by the `visibleMonths` number to determine the total width of the calendar.                                   | `256`                             |   |
-| pageBehavior              | `PageBehavior`                                                                                                                                                                                                                                                                                                                                                                                | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                       | `visible`                         |   |
-| weekdayStyle              | `"narrow" \|"short" \| "long" \| undefined`                                                                                                                                                                                                                                                                                                                                                   | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.                                                                    | `narrow`                          |   |
-| allowsNonContiguousRanges | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                              | `false`                           |   |
-| isDisabled                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar is disabled.                                                                                                                                                         | `false`                           |   |
-| isReadOnly                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the calendar value is immutable.                                                                                                                                                  | `false`                           |   |
-| isInvalid                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether the current selection is invalid according to application logic.                                                                                                                  | -                                 |   |
-| autoFocus                 | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to automatically focus the calendar when it mounts.                                                                                                                               | `false`                           |   |
-| showHelper                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the description or error message.                                                                                                                                         | `false`                           |   |
-| showShadow                | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to show the shadow in the selected dates.                                                                                                                                         | `false`                           |   |
-| topContent                | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the top of the calendar.                                                                                                                                 | -                                 |   |
-| bottomContent             | `ReactNode`                                                                                                                                                                                                                                                                                                                                                                                   | Custom content to be included in the bottom of the calendar.                                                                                                                              | -                                 |   |
-| isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |   |
-| createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |   |
-| errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |   |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                 |   |
-| hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |   |
-| disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |   |
-| classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |   |
+<APITable
+  data={[
+    {
+      attribute: "value",
+      type: "RangeValue",
+      description: "The current value (controlled).",
+      default: "null"
+    },
+    {
+      attribute: "defaultValue",
+      type: "RangeValue",
+      description: "The default value (uncontrolled).",
+      default: "null"
+    },
+    {
+      attribute: "minValue",
+      type: "DateValue",
+      description: "The minimum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue", 
+      type: "DateValue",
+      description: "The maximum allowed date that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "visibleMonths",
+      type: "number",
+      description: "The number of months to display at once. Up to 3 months are supported. Passing a number greater than 1 will disable the showMonthAndYearPickers prop.",
+      default: "1"
+    },
+    {
+      attribute: "focusedValue",
+      type: "DateValue",
+      description: "Controls the currently focused date within the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "defaultFocusedValue",
+      type: "DateValue", 
+      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      default: "-"
+    },
+    {
+      attribute: "calendarWidth",
+      type: "number | string",
+      description: "The width to be applied to the calendar component. This value is multiplied by the visibleMonths number to determine the total width of the calendar.",
+      default: "256"
+    },
+    {
+      attribute: "pageBehavior",
+      type: "PageBehavior",
+      description: "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
+      default: "visible"
+    },
+    {
+      attribute: "weekdayStyle",
+      type: "narrow | short | long",
+      description: "The style of weekday names to display in the calendar grid header.",
+      default: "narrow"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean",
+      description: "Whether to show month and year pickers.",
+      default: "false"
+    },
+    {
+      attribute: "allowsNonContiguousRanges",
+      type: "boolean",
+      description: "When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the calendar is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the calendar value is immutable.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the current selection is invalid according to application logic.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether to automatically focus the calendar when it mounts.",
+      default: "false"
+    },
+    {
+      attribute: "showHelper",
+      type: "boolean",
+      description: "Whether to show the description or error message.",
+      default: "false"
+    },
+    {
+      attribute: "showShadow",
+      type: "boolean",
+      description: "Whether to show the shadow in the selected dates.",
+      default: "false"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the top of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode",
+      description: "Custom content to be included in the bottom of the calendar.",
+      default: "-"
+    },
+    {
+      attribute: "isDateUnavailable",
+      type: "(date: DateValue) => boolean",
+      description: "Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.",
+      default: "-"
+    },
+    {
+      attribute: "createCalendar",
+      type: "(calendar: SupportedCalendars) => Calendar | null",
+      description: "This function helps to reduce the bundle size by providing a custom calendar system.",
+      default: "all calendars"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: { inputValue: string, selectedKey: React.Key }) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "hideDisabledDates",
+      type: "boolean",
+      description: "Whether to hide the disabled or invalid dates.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the calendar.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### RangeCalendar Events
 
-| Attribute              | Type                            | Description                                                                                                                              |
-| ---------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| onFocusChange          | `(date: CalendarDate) => void`  | Handler that is called when the focused date changes.                                                                                    |
-| onChange               | `(value: RangeValue>) => void`  | Handler that is called when the value changes.                                                                                           |
+<APITable
+  data={[
+    {
+      attribute: "onFocusChange",
+      type: "(date: CalendarDate) => void",
+      description: "Handler that is called when the focused date changes.",
+      default: "-"
+    },
+    {
+      attribute: "onChange",
+      type: "(value: RangeValue<DateValue> | null) => void",
+      description: "Handler that is called when the value changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 #### Supported Calendars
 
diff --git a/apps/docs/content/docs/components/scroll-shadow.mdx b/apps/docs/content/docs/components/scroll-shadow.mdx
index 7f377b0937..b4fad53dfc 100644
--- a/apps/docs/content/docs/components/scroll-shadow.mdx
+++ b/apps/docs/content/docs/components/scroll-shadow.mdx
@@ -70,22 +70,61 @@ a specific position.
 
 ## API
 
-### ShadowScroll Props
-
-| Attribute     | Type                                                | Description                                     | Default    |
-| ------------- | --------------------------------------------------- | ----------------------------------------------- | ---------- |
-| size          | `number`                                            | The shadow size in pixels.                      | `40`       |
-| offset        | `number`                                            | The scroll offset to show the shadow in pixels. | `0`        |
-| hideScrollBar | `boolean`                                           | Whether to hide the scrollbar or not.           | `false`    |
-| orientation   | `horizontal` \| `vertical`                          | The scroll orientation.                         | `vertical` |
-| isEnabled     | `boolean`                                           | Whether the shadow is enabled or not.           | `true`     |
-| visibility    | [ScrollShadowVisibility](#scroll-shadow-visibility) | The shadow visibility. (controlled)             | `auto`     |
-
-### ShadowScroll Events
-
-| Attribute          | Type                                           | Description                                          |
-| ------------------ | ---------------------------------------------- | ---------------------------------------------------- |
-| onVisibilityChange | `(visibility: ScrollShadowVisibility) => void` | Callback invoked when the shadow visibility changes. |
+### ScrollShadow Props
+
+<APITable
+  data={[
+    {
+      attribute: "size",
+      type: "number",
+      description: "The shadow size in pixels.",
+      default: "40"
+    },
+    {
+      attribute: "offset",
+      type: "number", 
+      description: "The scroll offset to show the shadow in pixels.",
+      default: "0"
+    },
+    {
+      attribute: "hideScrollBar",
+      type: "boolean",
+      description: "Whether to hide the scrollbar or not.",
+      default: "false"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The scroll orientation.",
+      default: "vertical"
+    },
+    {
+      attribute: "isEnabled",
+      type: "boolean",
+      description: "Whether the shadow is enabled or not.",
+      default: "true"
+    },
+    {
+      attribute: "visibility",
+      type: "ScrollShadowVisibility",
+      description: "The shadow visibility. (controlled)",
+      default: "auto"
+    }
+  ]}
+/>
+
+### ScrollShadow Events
+
+<APITable
+  data={[
+    {
+      attribute: "onVisibilityChange",
+      type: "(visibility: ScrollShadowVisibility) => void",
+      description: "Callback invoked when the shadow visibility changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 <Spacer y={2} />
 
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 0469b09cab..7d05d3190d 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -54,7 +54,7 @@ Select follows the [Collection Components API](https://react-spectrum.adobe.com/
 - **Static**: The usage example above shows the static implementation, which can be used when the full list of options is known ahead of time.
 - **Dynamic**: The example below can be used when the options come from an external data source such as an API call, or update over time.
 
-<CodeDemo title="Dynamic items" highlightedLines="7" files={selectContent.dynamic} />
+<CodeDemo title="Dynamic items" files={selectContent.dynamic} />
 
 ### Multiple Selection
 
@@ -64,24 +64,24 @@ You can use the `selectionMode="multiple"` property to allow multiple selection.
 
 ### Disabled
 
-<CodeDemo title="Disabled" highlightedLines="8" files={selectContent.disabled} />
+<CodeDemo title="Disabled" files={selectContent.disabled} />
 
 ### Disabled Items
 
 You can disable specific items by using the `disabledKeys` property.
 
-<CodeDemo title="Disabled Items" highlightedLines="10" files={selectContent.disabledItems} />
+<CodeDemo title="Disabled Items" files={selectContent.disabledItems} />
 
 ### Required
 
 If you pass the `isRequired` property to the select, it will have a `danger` asterisk at
 the end of the label and the select will be required.
 
-<CodeDemo title="Required" highlightedLines="8" files={selectContent.required} />
+<CodeDemo title="Required" files={selectContent.required} />
 
 ### Sizes
 
-<CodeDemo title="Sizes" highlightedLines="13,24" files={selectContent.sizes} />
+<CodeDemo title="Sizes" files={selectContent.sizes} />
 
 ### Colors
 
@@ -99,7 +99,7 @@ the end of the label and the select will be required.
 
 You can change the position of the label by setting the `labelPlacement` property to `inside`, `outside` or `outside-left`.
 
-<CodeDemo title="Label Placements" highlightedLines="19,37" files={selectContent.labelPlacements} />
+<CodeDemo title="Label Placements" files={selectContent.labelPlacements} />
 
 > **Note**: If the `label` is not passed, the `labelPlacement` property will be `outside` by default.
 
@@ -108,7 +108,7 @@ You can change the position of the label by setting the `labelPlacement` propert
 You can use the `startContent` and `endContent` properties to add content to the start and end of
 the select.
 
-<CodeDemo title="Start Content" highlightedLines="13" files={selectContent.startContent} />
+<CodeDemo title="Start Content" files={selectContent.startContent} />
 
 ### Item Start & End Content
 
@@ -213,6 +213,37 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
   iframeSrc="/examples/select/async-items-loading"
 />
 
+
+### Virtualization
+
+Select supports virtualization, which allows efficient rendering of large lists by only rendering items that are visible in the viewport. You can enable virtualization by setting the `isVirtualized` prop to `true`.
+
+<CodeDemo
+  title="Virtualization"
+  files={selectContent.virtualization}
+/>
+
+> **Note**: The virtualization strategy is based on the [@tanstack/react-virtual](https://tanstack.com/virtual/latest) package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.
+
+#### Ten Thousand Items
+
+Here's an example of using virtualization with 10,000 items.
+
+<CodeDemo title="Ten Thousand Items" files={selectContent.virtualizationTenThousand} />
+
+#### Max Listbox Height
+
+The `maxListboxHeight` prop is used to set the maximum height of the listbox. This is required when using virtualization. By default, it's set to `256`.
+
+<CodeDemo title="Max Listbox Height" files={selectContent.virtualizationMaxListboxHeight} />
+
+#### Custom Item Height
+
+The `itemHeight` prop is used to set the height of each item in the listbox. This is required when using virtualization. By default, it's set to `32`.
+
+<CodeDemo title="Custom Item Height" files={selectContent.virtualizationCustomItemHeight} />
+
+
 ### With Sections
 
 You can use the `SelectSection` component to group select items.
@@ -354,55 +385,293 @@ the popover and listbox components.
 
 ### Select Props
 
-| Attribute                   | Type                                                                                                                                                                                                                   | Description                                                                                                            | Default            |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| children\*                  | `ReactNode[]`                                                                                                                                                                                                          | The children to render. Usually a list of `SelectItem` and `SelectSection` elements.                                   | -                  |
-| items                       | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)                                                                                                                 | Item objects in the select. (dynamic)                                                                                  | -                  |
-| selectionMode               | `single` \| `multiple`                                                                                                                                                                                                 | The type of selection that is allowed in the collection.                                                               | -                  |
-| selectedKeys                | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                | The currently selected keys in the collection (controlled).                                                            | -                  |
-| disabledKeys                | `Iterable<React.Key>`                                                                                                                                                                                                | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                | -                  |
-| defaultSelectedKeys         | `all` \| `Iterable<React.Key>`                                                                                                                                                                                                 | The initial selected keys in the collection (uncontrolled).                                                            | -                  |
-| variant                     | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                                                                                        | The variant of the select.                                                                                             | `flat`             |
-| color                       | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                                                            | The color of the select.                                                                                               | `default`          |
-| size                        | `sm` \| `md` \| `lg`                                                                                                                                                                                                   | The size of the select.                                                                                                | `md`               |
-| radius                      | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                                                                               | The radius of the select.                                                                                              | -                  |
-| placeholder                 | `string`                                                                                                                                                                                                               | The placeholder of the select.                                                                                         | `Select an option` |
-| labelPlacement              | `inside` \| `outside` \| `outside-left`                                                                                                                                                                                | The position of the label.                                                                                             | `inside`           |
-| label                       | `ReactNode`                                                                                                                                                                                                            | The content to display as the label.                                                                                   | -                  |
-| description                 | `ReactNode`                                                                                                                                                                                                            | A description for the select. Provides a hint such as specific requirements for what to choose.                        | -                  |
-| errorMessage                | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                                                                  | An error message for the select.                                                                                       | -                  |
-| startContent                | `ReactNode`                                                                                                                                                                                                            | Element to be rendered in the left side of the select.                                                                 | -                  |
-| endContent                  | `ReactNode`                                                                                                                                                                                                            | Element to be rendered in the right side of the select.                                                                | -                  |
-| selectorIcon                | `ReactNode`                                                                                                                                                                                                            | Element to be rendered as the selector icon.                                                                           | -                  |
-| scrollRef                   | `React.RefObject<HTMLElement>`                                                                                                                                                                                         | A ref to the scrollable element.                                                                                       | -                  |
-| spinnerRef                  | `React.RefObject<HTMLElement>`                                                                                                                                                                                         | A ref to the spinner element.                                                                                          | -                  |
-| fullWidth                   | `boolean`                                                                                                                                                                                                              | Whether the select should take up the width of its parent.                                                             | `true`             |
-| isOpen                      | `boolean`                                                                                                                                                                                                              | Whether the select is open by default (controlled).                                                                    | -                  |
-| defaultOpen                 | `boolean`                                                                                                                                                                                                              | Whether the select is open by default (uncontrolled).                                                                  | -                  |
-| isRequired                  | `boolean`                                                                                                                                                                                                              | Whether user select is required on the select before form submission.                                                  | `false`            |
-| isDisabled                  | `boolean`                                                                                                                                                                                                              | Whether the select is disabled.                                                                                        | `false`            |
-| isMultiline                 | `boolean`                                                                                                                                                                                                              | Whether the select should allow multiple lines of text.                                                                | `false`            |
-| isInvalid                   | `boolean`                                                                                                                                                                                                              | Whether the select is invalid.                                                                                         | `false`            |
-| validationState             | `valid` \| `invalid`                                                                                                                                                                                                   | Whether the select should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -                  |
-| showScrollIndicators        | `boolean`                                                                                                                                                                                                              | Whether the select should show scroll indicators when the listbox is scrollable.                                       | `true`             |
-| autoFocus                   | `boolean`                                                                                                                                                                                                              | Whether the select should be focused on the first mount.                                                               | `false`            |
-| disallowEmptySelection      | `boolean`                                                                                                                                                                                                              | Whether the collection allows empty selection.                                                                         | `false`            |
-| disableAnimation            | `boolean`                                                                                                                                                                                                              | Whether the select should be animated.                                                                                 | `true`             |
-| disableSelectorIconRotation | `boolean`                                                                                                                                                                                                              | Whether the select should disable the rotation of the selector icon.                                                   | `false`            |
-| popoverProps                | [PopoverProps](/docs/components/popover#api)                                                                                                                                                                           | Props to be passed to the popover component.                                                                           | -                  |
-| listboxProps                | [ListboxProps](/docs/components/listbox#api)                                                                                                                                                                           | Props to be passed to the listbox component.                                                                           | -                  |
-| scrollShadowProps           | [ScrollShadowProps](/docs/components/scroll-shadow#api)                                                                                                                                                                | Props to be passed to the scroll shadow component.                                                                     | -                  |
-| classNames                  | `Record<"base"｜ "label"｜ "trigger"｜ "mainWrapper" ｜ "innerWrapper"｜ "selectorIcon" ｜ "value" ｜ "listboxWrapper"｜ "listbox" ｜ "popoverContent" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the Select slots.                                                                 | -                  |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a list of SelectItem and SelectSection elements.",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "Item objects in the select. (dynamic)",
+      default: "-"
+    },
+    {
+      attribute: "selectionMode",
+      type: "single | multiple",
+      description: "The type of selection that is allowed in the collection.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Iterable<React.Key>",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "all | Iterable<React.Key>",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the select.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the select.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the select.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the select.",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the select.",
+      default: "Select an option"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the select. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the select.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the select.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the select.",
+      default: "-"
+    },
+    {
+      attribute: "selectorIcon",
+      type: "ReactNode",
+      description: "Element to be rendered as the selector icon.",
+      default: "-"
+    },
+    {
+      attribute: "scrollRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the scrollable element.",
+      default: "-"
+    },
+    {
+      attribute: "spinnerRef",
+      type: "React.RefObject<HTMLElement>",
+      description: "A ref to the spinner element.",
+      default: "-"
+    },
+    {
+      attribute: "maxListboxHeight",
+      type: "number",
+      description: "The maximum height of the listbox in pixels. Required when using virtualization.",
+      default: "256"
+    },
+    {
+      attribute: "itemHeight",
+      type: "number",
+      description: "The fixed height of each item in pixels. Required when using virtualization.",
+      default: "32"
+    },
+    {
+      attribute: "isVirtualized",
+      type: "boolean",
+      description: "Whether to enable virtualization. By default, it's enabled when the number of items exceeds 50.",
+      default: "undefined"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the select should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the select is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the select is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user select is required on the select before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the select is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isMultiline",
+      type: "boolean",
+      description: "Whether the select should allow multiple lines of text.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the select is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the select should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "showScrollIndicators",
+      type: "boolean",
+      description: "Whether the select should show scroll indicators when the listbox is scrollable.",
+      default: "true"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the select should be focused on the first mount.",
+      default: "false"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the select should be animated.",
+      default: "true"
+    },
+    {
+      attribute: "disableSelectorIconRotation",
+      type: "boolean",
+      description: "Whether the select should disable the rotation of the selector icon.",
+      default: "false"
+    },
+    {
+      attribute: "hideEmptyContent",
+      type: "boolean",
+      description: "Whether the listbox will be prevented from opening when there are no items.",
+      default: "false"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps",
+      description: "Props to be passed to the popover component.",
+      default: "-"
+    },
+    {
+      attribute: "listboxProps",
+      type: "ListboxProps",
+      description: "Props to be passed to the listbox component.",
+      default: "-"
+    },
+    {
+      attribute: "scrollShadowProps",
+      type: "ScrollShadowProps",
+      description: "Props to be passed to the scroll shadow component.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜ \"label\"｜ \"trigger\"｜ \"mainWrapper\" ｜ \"innerWrapper\"｜ \"selectorIcon\" ｜ \"value\" ｜ \"listboxWrapper\"｜ \"listbox\" ｜ \"popoverContent\" ｜ \"helperWrapper\" ｜ \"description\" ｜ \"errorMessage\", string>>",
+      description: "Allows to set custom class names for the Select slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Select Events
 
-| Attribute         | Type                                          | Description                                                                          |
-| ----------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
-| onClose           | `() => void`                                  | Callback fired when the select popover is closed.                                    |
-| onOpenChange      | `(isOpen: boolean) => void`                   | Callback fired when the select popover is opened or closed.                          |
-| onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void`                 | Callback fired when the selected keys change.                                        |
-| onChange          | `React.ChangeEvent<HTMLSelectElement>`        | Native select change event, fired when the selected value changes.                   |
-| renderValue       | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. |
+<APITable
+  data={[
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Callback fired when the select popover is closed.",
+      default: "-"
+    },
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Callback fired when the select popover is opened or closed.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: \"all\" | Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void",
+      description: "Callback fired when the selected keys change.",
+      default: "-"
+    },
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLSelectElement>",
+      description: "Native select change event, fired when the selected value changes.",
+      default: "-"
+    },
+    {
+      attribute: "renderValue",
+      type: "RenderValueFunction",
+      description: "Function to render the value of the select. It renders the selected item by default.",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/skeleton.mdx b/apps/docs/content/docs/components/skeleton.mdx
index c21aec8818..80cfccd06a 100644
--- a/apps/docs/content/docs/components/skeleton.mdx
+++ b/apps/docs/content/docs/components/skeleton.mdx
@@ -74,9 +74,31 @@ You can use the `isLoaded` prop to stop the skeleton animation and show the chil
 
 ### Skeleton Props
 
-| Attribute        | Type                                | Description                                              | Default |
-| ---------------- | ----------------------------------- | -------------------------------------------------------- | ------- |
-| children         | `ReactNode`                         | The content of the skeleton.                             | -       |
-| isLoaded         | `boolean`                           | Whether the skeleton is loaded.                          | `false` |
-| disableAnimation | `boolean`                           | Whether to disable the animations.                       | `false` |
-| classNames       | `Record<"base"｜"content", string>` | Allows to set custom class names for the skeleton slots. | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the skeleton.",
+      default: "-"
+    },
+    {
+      attribute: "isLoaded", 
+      type: "boolean",
+      description: "Whether the skeleton is loaded.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean", 
+      description: "Whether to disable the animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"content\", string>>",
+      description: "Allows to set custom class names for the skeleton slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/slider.mdx b/apps/docs/content/docs/components/slider.mdx
index ec9b5f853a..4ebe0ebad3 100644
--- a/apps/docs/content/docs/components/slider.mdx
+++ b/apps/docs/content/docs/components/slider.mdx
@@ -249,51 +249,216 @@ You can customize the `Slider` component by passing custom Tailwind CSS classes
 
 ### Slider Props
 
-| Attribute                 | Type                                                                                                                                                                             | Description                                                                                                                                                   | Default      |
-| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
-| label                     | `ReactNode`                                                                                                                                                                      | The content to display as the label.                                                                                                                          | -            |
-| name                      | `string`                                                                                                                                                                         | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). | -            |
-| size                      | `sm` \| `md` \| `lg`                                                                                                                                                             | The size of the Slider filler and thumb.                                                                                                                      | `md`         |
-| color                     | `foreground` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                                   | The color of the filler and thumb.                                                                                                                            | `primary`    |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                                                         | The Slider's thumbs border radius.                                                                                                                            | `full`       |
-| step                      | `number`                                                                                                                                                                         | The Slider's step value.                                                                                                                                      | `1`          |
-| value                     | `number`                                                                                                                                                                         | The current value (controlled).                                                                                                                               | -            |
-| defaultValue              | `number`                                                                                                                                                                         | The default value (uncontrolled).                                                                                                                             | -            |
-| minValue                  | `number`                                                                                                                                                                         | The slider's minimum value.                                                                                                                                   | `0`          |
-| maxValue                  | `number`                                                                                                                                                                         | The slider's maximum value.                                                                                                                                   | `100`        |
-| orientation               | `horizontal` \| `vertical`                                                                                                                                                       | The orientation of the Slider.                                                                                                                                | `horizontal` |
-| fillOffset                | `number`                                                                                                                                                                         | The offset from which to start the fill.                                                                                                                      | -            |
-| showSteps                 | `boolean`                                                                                                                                                                        | Whether to show the steps indicators.                                                                                                                         | `false`      |
-| showTooltip               | `boolean`                                                                                                                                                                        | Whether to show a tooltip with the current thumb value when the user hovers or drags the thumb.                                                               | `false`      |
-| marks                     | [SliderStepMarks](#slider-step-marks)                                                                                                                                            | The marks to display on the Slider's steps.                                                                                                                   | -            |
-| startContent              | `ReactNode`                                                                                                                                                                      | The content to display at the beginning of the Slider.                                                                                                        | -            |
-| endContent                | `ReactNode`                                                                                                                                                                      | The content to display at the end of the Slider.                                                                                                              | -            |
-| formatOptions             | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)                                                          | The options to format the value.                                                                                                                              | -            |
-| tooltipValueFormatOptions | [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)                                                          | The options to format the tooltip value. By default, it uses the same options as `formatOptions`.                                                             | -            |
-| tooltipProps              | [TooltipProps](/docs/components/tooltip)                                                                                                                                         | The props to pass to the thumbs's tooltip.                                                                                                                    | -            |
-| showOutline               | `boolean`                                                                                                                                                                        | Whether to show a small outline around the thumbs.                                                                                                            | `false`      |
-| hideValue                 | `boolean`                                                                                                                                                                        | Whether to hide the Slider value.                                                                                                                             | `false`      |
-| hideThumb                 | `boolean`                                                                                                                                                                        | Whether to hide all the Slider thumbs.                                                                                                                        | `false`      |
-| disableThumbScale         | `boolean`                                                                                                                                                                        | Whether to disable the thumb scale animation.                                                                                                                 | `false`      |
-| isDisabled                | `boolean`                                                                                                                                                                        | Whether the whole Slider is disabled.                                                                                                                         | `false`      |
-| disableAnimation          | `boolean`                                                                                                                                                                        | Whether to disable the Slider animations.                                                                                                                     | `false`      |
-| classNames                | `Record<"base"｜"labelWrapper"｜"label"｜ "value" ｜ "step" ｜ "mark" ｜ "trackWrapper" ｜ "track"｜ "output" ｜ "filler" ｜ "thumb" ｜ "startContent" ｜ "endContent", string>` | Allows to set custom class names for the Slider slots.                                                                                                        | -            |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the Slider filler and thumb.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "foreground | primary | secondary | success | warning | danger",
+      description: "The color of the filler and thumb.",
+      default: "primary"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The Slider's thumbs border radius.",
+      default: "full"
+    },
+    {
+      attribute: "step",
+      type: "number",
+      description: "The Slider's step value.",
+      default: "1"
+    },
+    {
+      attribute: "value",
+      type: "number",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "number",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "number",
+      description: "The slider's minimum value.",
+      default: "0"
+    },
+    {
+      attribute: "maxValue",
+      type: "number",
+      description: "The slider's maximum value.",
+      default: "100"
+    },
+    {
+      attribute: "orientation",
+      type: "horizontal | vertical",
+      description: "The orientation of the Slider.",
+      default: "horizontal"
+    },
+    {
+      attribute: "fillOffset",
+      type: "number",
+      description: "The offset from which to start the fill.",
+      default: "-"
+    },
+    {
+      attribute: "showSteps",
+      type: "boolean",
+      description: "Whether to show the steps indicators.",
+      default: "false"
+    },
+    {
+      attribute: "showTooltip",
+      type: "boolean",
+      description: "Whether to show a tooltip with the current thumb value when the user hovers or drags the thumb.",
+      default: "false"
+    },
+    {
+      attribute: "marks",
+      type: "SliderStepMarks",
+      description: "The marks to display on the Slider's steps.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The content to display at the beginning of the Slider.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "The content to display at the end of the Slider.",
+      default: "-"
+    },
+    {
+      attribute: "formatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the value.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipValueFormatOptions",
+      type: "Intl.NumberFormat",
+      description: "The options to format the tooltip value.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipProps",
+      type: "TooltipProps",
+      description: "The props to pass to the thumbs's tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "showOutline",
+      type: "boolean",
+      description: "Whether to show a small outline around the thumbs.",
+      default: "false"
+    },
+    {
+      attribute: "hideValue",
+      type: "boolean",
+      description: "Whether to hide the Slider value.",
+      default: "false"
+    },
+    {
+      attribute: "hideThumb",
+      type: "boolean",
+      description: "Whether to hide all the Slider thumbs.",
+      default: "false"
+    },
+    {
+      attribute: "disableThumbScale",
+      type: "boolean",
+      description: "Whether to disable the thumb scale animation.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the whole Slider is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the Slider animations.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Slider Functions
 
-| Name        | Type                                                                     | Description                                                                                    |
-| ----------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
-| getValue    | `(value: SliderValue) => string`                                         | A function to format the value. Overrides default formatted number.                            |
-| renderLabel | `(props: DOMAttributes<HTMLLabelElement>) => ReactNode`                  | A function to render the label.                                                                |
-| renderValue | `(props: DOMAttributes<HTMLOutputElement>) => ReactNode`                 | A function to render the value.                                                                |
-| renderThumb | `(props: DOMAttributes<HTMLDivElement> & {index?: number}) => ReactNode` | A function to render the thumbs. The `index` prop will tell you which thumb is being rendered. |
+<APITable
+  data={[
+    {
+      attribute: "getValue",
+      type: "(value: SliderValue) => string",
+      description: "A function to format the value. Overrides default formatted number.",
+      default: "-"
+    },
+    {
+      attribute: "renderLabel",
+      type: "(props: DOMAttributes<HTMLLabelElement>) => ReactNode",
+      description: "A function to render the label.",
+      default: "-"
+    },
+    {
+      attribute: "renderValue",
+      type: "(props: DOMAttributes<HTMLOutputElement>) => ReactNode",
+      description: "A function to render the value.",
+      default: "-"
+    },
+    {
+      attribute: "renderThumb",
+      type: "(props: DOMAttributes<HTMLDivElement> & {index?: number}) => ReactNode",
+      description: "A function to render the thumbs. The index prop will tell you which thumb is being rendered.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Slider Events
 
-| Name        | Type                           | Description                                                                  |
-| ----------- | ------------------------------ | ---------------------------------------------------------------------------- |
-| onChange    | `(value: SliderValue) => void` | Callback fired when the value changes.                                       |
-| onChangeEnd | `(value: SliderValue) => void` | Callback fired when the value changes and the user stops dragging the thumb. |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "(value: SliderValue) => void",
+      description: "Callback fired when the value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onChangeEnd",
+      type: "(value: SliderValue) => void",
+      description: "Callback fired when the value changes and the user stops dragging the thumb.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx
index e149ee98c5..7ea896ad1c 100644
--- a/apps/docs/content/docs/components/snippet.mdx
+++ b/apps/docs/content/docs/components/snippet.mdx
@@ -98,27 +98,116 @@ You can customize the copy and copied icons by using the `copyIcon` and `checkIc
 
 ### Snippet Props
 
-| Attribute        | Type                                                                            | Description                                                                                    | Default |
-| ---------------- | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------- |
-| children         | `ReactNode` \| `ReactNode[]`                                                    | The content of the snippet.                                                                    | -       |
-| size             | `sm` \| `md` \| `lg`                                                            | The size of the snippet.                                                                       | `md`    |
-| radius           | `none` \| `sm` \| `md` \| `lg`                                                  | The radius of the snippet.                                                                     | `lg`    |
-| symbol           | `string` \| `ReactNode`                                                         | The symbol to show before the snippet.                                                         | `$`     |
-| timeout          | `number`                                                                        | The time in milliseconds to wait before resetting the clipboard.                                | `2000`  |
-| codeString       | `string`                                                                        | The code string to copy. if `codeString` is passed, it will be copied instead of the children. | -       |
-| tooltipProps     | [TooltipProps](/docs/components/tooltip#tooltip-props)                          | The props of the tooltip.                                                                      | -       |
-| copyIcon         | `ReactNode`                                                                     | The copy icon.                                                                                 | -       |
-| checkIcon        | `ReactNode`                                                                     | The check icon.                                                                                | -       |
-| disableTooltip   | `boolean`                                                                       | Whether to disable the tooltip.                                                                | `false` |
-| disableCopy      | `boolean`                                                                       | Whether to disable the copy button.                                                            | `false` |
-| hideCopyButton   | `boolean`                                                                       | Whether to hide the copy button.                                                               | `false` |
-| hideSymbol       | `boolean`                                                                       | Whether to hide the symbol.                                                                    | `false` |
-| copyButtonProps  | [ButtonProps](/docs/components/button#button-props)                             | The props of the copy button.                                                                  | -       |
-| disableAnimation | `boolean`                                                                       | Whether to disable the animations.                                                             | `false` |
-| classNames       | `Record<"base"｜"content"｜"pre"｜"symbol"｜"copyButton"｜"checkIcon", string>` | Allows to set custom class names for the snippet slots.                                        | -       |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode | ReactNode[]",
+      description: "The content of the snippet.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the snippet.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The radius of the snippet.",
+      default: "lg"
+    },
+    {
+      attribute: "symbol",
+      type: "string | ReactNode",
+      description: "The symbol to show before the snippet.",
+      default: "$"
+    },
+    {
+      attribute: "timeout",
+      type: "number",
+      description: "The time in milliseconds to wait before resetting the clipboard.",
+      default: "2000"
+    },
+    {
+      attribute: "codeString",
+      type: "string",
+      description: "The code string to copy. if codeString is passed, it will be copied instead of the children.",
+      default: "-"
+    },
+    {
+      attribute: "tooltipProps",
+      type: "TooltipProps",
+      description: "The props of the tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "copyIcon",
+      type: "ReactNode",
+      description: "The copy icon.",
+      default: "-"
+    },
+    {
+      attribute: "checkIcon",
+      type: "ReactNode", 
+      description: "The check icon.",
+      default: "-"
+    },
+    {
+      attribute: "disableTooltip",
+      type: "boolean",
+      description: "Whether to disable the tooltip.",
+      default: "false"
+    },
+    {
+      attribute: "disableCopy",
+      type: "boolean",
+      description: "Whether to disable the copy button.",
+      default: "false"
+    },
+    {
+      attribute: "hideCopyButton",
+      type: "boolean",
+      description: "Whether to hide the copy button.",
+      default: "false"
+    },
+    {
+      attribute: "hideSymbol",
+      type: "boolean",
+      description: "Whether to hide the symbol.",
+      default: "false"
+    },
+    {
+      attribute: "copyButtonProps",
+      type: "ButtonProps",
+      description: "The props of the copy button.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animations.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'content' | 'pre' | 'symbol' | 'copyButton' | 'checkIcon', string>>",
+      description: "Allows to set custom class names for the snippet slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Snippet Events
 
-| Attribute | Type                                   | Description                                     |
-| --------- | -------------------------------------- | ----------------------------------------------- |
-| onCopy    | `(value: string ｜ string[]) => void;` | Handler that is called when the code is copied. |
+<APITable
+  data={[
+    {
+      attribute: "onCopy",
+      type: "(value: string | string[]) => void",
+      description: "Handler that is called when the code is copied.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/spacer.mdx b/apps/docs/content/docs/components/spacer.mdx
index 70703c1ae8..636da747fd 100644
--- a/apps/docs/content/docs/components/spacer.mdx
+++ b/apps/docs/content/docs/components/spacer.mdx
@@ -50,12 +50,24 @@ Spacer is a component used to add space between components.
 
 ### Spacer Props
 
-| Attribute | Type             | Description      | Default |
-| --------- | ---------------- | ---------------- | ------- |
-| x         | [Space](#spaces) | The x axis space | `1`     |
-| y         | [Space](#spaces) | The y axis space | `1`     |
+<APITable
+  data={[
+    {
+      attribute: "x",
+      type: "Space",
+      description: "The x axis space",
+      default: "1"
+    },
+    {
+      attribute: "y", 
+      type: "Space",
+      description: "The y axis space",
+      default: "1"
+    }
+  ]}
+/>
 
-### Spaces
+### Types
 
 ```ts
 type Space = 0 | "px" | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96;
diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
index e8980b0d7b..ed37bcdd37 100644
--- a/apps/docs/content/docs/components/spinner.mdx
+++ b/apps/docs/content/docs/components/spinner.mdx
@@ -72,12 +72,39 @@ Spinner express an unspecified wait time or display the length of a process.
 
 ## API
 
-### Circular Progress Props
-
-| Attribute  | Type                                                                        | Description                                             | Default   |
-| ---------- | --------------------------------------------------------------------------- | ------------------------------------------------------- | --------- |
-| label      | `string`                                                                    | The content to display as the label.                    | -         |
-| size       | `sm` \| `md` \| `lg`                                                        | The size of the spinner circles.                        | `md`      |
-| color      | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the spinner circles.                       | `primary` |
-| labelColor | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The color of the label.                                 | `default` |
-| classNames | `Record<"base"｜"wrapper"｜"circle1"｜"circle2"｜"label", string>`          | Allows to set custom class names for the spinner slots. | -         |
+### Spinner Props
+
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "string",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "size", 
+      type: "sm | md | lg",
+      description: "The size of the spinner circles.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the spinner circles.",
+      default: "primary"
+    },
+    {
+      attribute: "labelColor",
+      type: "default | primary | secondary | success | warning | danger", 
+      description: "The color of the label.",
+      default: "default"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜\"wrapper\"｜\"circle1\"｜\"circle2\"｜\"label\", string>>",
+      description: "Allows to set custom class names for the spinner slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index d76faa2e3d..292446bb05 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -66,7 +66,7 @@ The Switch component is used as an alternative between checked and not checked s
 
 You can also add icons to start and end of the switch by using `startContent` and `endContent` props.
 
-<CodeDemo title="With Icons" files={switchContent.icons} highlightedLines="11-12" />
+<CodeDemo title="With Icons" files={switchContent.icons} />
 
 ### Controlled
 
@@ -135,30 +135,113 @@ In case you need to customize the switch even further, you can use the `useSwitc
 
 ### Switch Props
 
-| Attribute        | Type                                                                                                       | Description                                                         | Default   |
-| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------- |
-| children         | `ReactNode`                                                                                                | The label of the switch.                                            | -         |
-| value            | `string`                                                                                                   | The value of the input element, used when submitting an HTML form.  | -         |
-| name             | `string`                                                                                                   | The name of the input element, used when submitting an HTML form.   | -         |
-| size             | `sm` \| `md` \| `lg`                                                                                       | The size of the switch.                                             | `md`      |
-| color            | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                | The color of the switch.                                            | `primary` |
-| thumbIcon        | [ThumbIconProps](#switch-icon-props)                                                                       | The icon to be displayed when the switch is checked.                | -         |
-| startContent     | `ReactNode`                                                                                                | The icon to be displayed at the start of the switch.                | -         |
-| endContent       | `ReactNode`                                                                                                | The icon to be displayed at the end of the switch.                  | -         |
-| isSelected       | `boolean`                                                                                                  | Whether the element should be selected (controlled).                | -         |
-| defaultSelected  | `boolean`                                                                                                  | Whether the element should be selected (uncontrolled).              | -         |
-| isRequired       | `boolean`                                                                                                  | Whether user input is required on the input before form submission. | `false`   |
-| isReadOnly       | `boolean`                                                                                                  | Whether the input can be selected but not changed by the user.      | -         |
-| isDisabled       | `boolean`                                                                                                  | Whether the switch is disabled.                                     | `false`   |
-| disableAnimation | `boolean`                                                                                                  | Whether the animation should be disabled.                           | `false`   |
-| classNames       | `Record<"base"｜ "wrapper"｜ "thumb"｜ "label" ｜ "startContent" ｜ "endContent" ｜ "thumbIcon" , string>` | Allows to set custom class names for the switch slots.              | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The label of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The value of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string", 
+      description: "The name of the input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the switch.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the switch.",
+      default: "primary"
+    },
+    {
+      attribute: "thumbIcon",
+      type: "ThumbIconProps",
+      description: "The icon to be displayed when the switch is checked.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "The icon to be displayed at the start of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "endContent", 
+      type: "ReactNode",
+      description: "The icon to be displayed at the end of the switch.",
+      default: "-"
+    },
+    {
+      attribute: "isSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelected",
+      type: "boolean",
+      description: "Whether the element should be selected (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the switch is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the animation should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜ \"wrapper\"｜ \"thumb\"｜ \"label\" ｜ \"startContent\" ｜ \"endContent\" ｜ \"thumbIcon\" , string>>",
+      description: "Allows to set custom class names for the switch slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Switch Events
 
-| Attribute     | Type                                  | Description                                                                                                                                              |
-| ------------- | ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onChange      | `React.ChangeEvent<HTMLInputElement>` | Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing `event.target.checked` (boolean). |
-| onValueChange | `(isSelected: boolean) => void`       | Handler that is called when the element's selection state changes.                                                                                       |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's selection state changes. You can pull out the new checked state by accessing event.target.checked (boolean).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(isSelected: boolean) => void",
+      description: "Handler that is called when the element's selection state changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Types
 
diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index 5415aa1e65..c7e699dd63 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -43,20 +43,20 @@ NextUI exports 6 table-related components:
 <ImportTabs
   commands={{
     main: `import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableColumn,
-  TableRow,
-  TableCell
+    Table,
+    TableHeader,
+    TableBody,
+    TableColumn,
+    TableRow,
+    TableCell
 } from "@nextui-org/react";`,
     individual: `import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableColumn,
-  TableRow,
-  TableCell
+    Table,
+    TableHeader,
+    TableBody,
+    TableColumn,
+    TableRow,
+    TableCell
 } from "@nextui-org/table";`,
   }}
 />
@@ -300,7 +300,6 @@ Table also supports infinite pagination. To do so, you can use the `useAsyncList
 
 ```jsx
 import { useInfiniteScroll } from "@nextui-org/use-infinite-scroll";
-
 import { useAsyncList } from "@react-stately/data";
 ```
 
@@ -426,108 +425,395 @@ You can customize the `Table` component by passing custom Tailwind CSS classes t
 
 ### Table Props
 
-| Attribute                     | Type                                                                                                                                                          | Description                                                                                                  | Default     |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ----------- |
-| children\*                    | `ReactNode[]`                                                                                                                                                 | The elements that make up the table. Includes the `TableHeader`, `TableBody`, `TableColumn`, and `TableRow`. | -           |
-| color                         | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                                   | Color of the selected rows, and checkboxes.                                                                  | `default`   |
-| layout                        | `auto` \| `fixed`                                                                                                                                             | Defines the layout of the table.                                                                             | `auto`      |
-| radius                        | `none` \| `sm` \| `md` \| `lg`                                                                                                                                | The border-radius of the table.                                                                              | `lg`        |
-| shadow                        | `none` \| `sm` \| `md` \| `lg`                                                                                                                                | The shadow size of the table.                                                                                | `sm`        |
-| hideHeader                    | `boolean`                                                                                                                                                     | Whether to hide the table header.                                                                            | `false`     |
-| isStriped                     | `boolean`                                                                                                                                                     | Whether to apply striped rows in the table.                                                                  | `false`     |
-| isCompact                     | `boolean`                                                                                                                                                     | Whether to apply compact style to the table.                                                                 | `false`     |
-| isHeaderSticky                | `boolean`                                                                                                                                                     | Whether to make the table header sticky.                                                                     | `false`     |
-| fullWidth                     | `boolean`                                                                                                                                                     | Whether to make the table full width.                                                                        | `true`      |
-| removeWrapper                 | `boolean`                                                                                                                                                     | Whether the table base container should not be rendered.                                                     | `false`     |
-| BaseComponent                 | `React.ComponentType<any>`                                                                                                                                    | A custom wrapper component for the table.                                                                    | `div`       |
-| topContent                    | `ReactNode`                                                                                                                                                   | Provides content to include a component in the top of the table.                                             | -           |
-| bottomContent                 | `ReactNode`                                                                                                                                                   | Provides content to include a component in the bottom of the table.                                          | -           |
-| topContentPlacement           | `inside` \| `outside`                                                                                                                                         | Where to place the `topContent` component.                                                                   | `inside`    |
-| bottomContentPlacement        | `inside` \| `outside`                                                                                                                                         | Where to place the `bottomContent` component.                                                                | `inside`    |
-| showSelectionCheckboxes       | `boolean`                                                                                                                                                     | Whether the row selection checkboxes should be displayed.                                                    | -           |
-| sortDescriptor                | [SortDescriptor](#sort-descriptor)                                                                                                                            | The current sorted column and direction.                                                                     | -           |
-| selectedKeys                  | [Selection](#selection)                                                                                                                                       | The currently selected keys in the collection (controlled).                                                  | -           |
-| defaultSelectedKeys           | [Selection](#selection)                                                                                                                                       | The initial selected keys in the collection (uncontrolled).                                                  | -           |
-| disabledKeys                  | [Selection](#selection)                                                                                                                                       | A set of keys for rows that are disabled.                                                                    | -           |
-| disallowEmptySelection        | `boolean`                                                                                                                                                     | Whether the collection allows empty selection.                                                               | -           |
-| selectionMode                 | `single` \| `multiple` \| `none`                                                                                                                              | The type of selection that is allowed in the collection.                                                     | `none`      |
-| selectionBehavior             | `toggle` \| `replace`                                                                                                                                         | How multiple selection should behave in the collection.                                                      | `toggle`    |
-| disabledBehavior              | `selection` \| `all`                                                                                                                                          | Whether `disabledKeys` applies to all interactions, or only selection.                                       | `selection` |
-| allowDuplicateSelectionEvents | `boolean`                                                                                                                                                     | Whether `onSelectionChange` should fire even if the new set of keys is the same as the last.                 | -           |
-| disableAnimation              | `boolean`                                                                                                                                                     | Whether to disable the table and checkbox animations.                                                        | `false`     |
-| checkboxesProps               | [CheckboxProps](/docs/components/checkbox/#checkbox-props)                                                                                                    | Props to be passed to the checkboxes.                                                                        | -           |
-| classNames                    | `Record<"base" ｜ "table" ｜ "thead" ｜ "tbody" ｜ "tfoot" ｜ "emptyWrapper" ｜ "loadingWrapper" ｜ "wrapper" ｜ "tr" ｜ "th" ｜ "td" ｜ "sortIcon", string>` | Allows to set custom class names for the dropdown item slots.                                                | -           |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The elements that make up the table. Includes the TableHeader, TableBody, TableColumn, and TableRow.",
+      default: "-"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "Color of the selected rows, and checkboxes.",
+      default: "default"
+    },
+    {
+      attribute: "layout",
+      type: "auto | fixed",
+      description: "Defines the layout of the table.",
+      default: "auto"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg",
+      description: "The border-radius of the table.",
+      default: "lg"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The shadow size of the table.",
+      default: "sm"
+    },
+    {
+      attribute: "hideHeader",
+      type: "boolean",
+      description: "Whether to hide the table header.",
+      default: "false"
+    },
+    {
+      attribute: "isStriped",
+      type: "boolean",
+      description: "Whether to apply striped rows in the table.",
+      default: "false"
+    },
+    {
+      attribute: "isCompact",
+      type: "boolean", 
+      description: "Whether to apply compact style to the table.",
+      default: "false"
+    },
+    {
+      attribute: "isHeaderSticky",
+      type: "boolean",
+      description: "Whether to make the table header sticky.",
+      default: "false"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether to make the table full width.",
+      default: "true"
+    },
+    {
+      attribute: "removeWrapper",
+      type: "boolean",
+      description: "Whether the table base container should not be rendered.",
+      default: "false"
+    },
+    {
+      attribute: "BaseComponent",
+      type: "React.ComponentType<any>",
+      description: "A custom wrapper component for the table.",
+      default: "div"
+    },
+    {
+      attribute: "topContent",
+      type: "ReactNode",
+      description: "Provides content to include a component in the top of the table.",
+      default: "-"
+    },
+    {
+      attribute: "bottomContent",
+      type: "ReactNode", 
+      description: "Provides content to include a component in the bottom of the table.",
+      default: "-"
+    },
+    {
+      attribute: "topContentPlacement",
+      type: "inside | outside",
+      description: "Where to place the topContent component.",
+      default: "inside"
+    },
+    {
+      attribute: "bottomContentPlacement",
+      type: "inside | outside",
+      description: "Where to place the bottomContent component.",
+      default: "inside"
+    },
+    {
+      attribute: "showSelectionCheckboxes",
+      type: "boolean",
+      description: "Whether the row selection checkboxes should be displayed.",
+      default: "-"
+    },
+    {
+      attribute: "sortDescriptor",
+      type: "SortDescriptor",
+      description: "The current sorted column and direction.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKeys",
+      type: "Selection",
+      description: "The currently selected keys in the collection (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKeys",
+      type: "Selection",
+      description: "The initial selected keys in the collection (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "Selection",
+      description: "A set of keys for rows that are disabled.",
+      default: "-"
+    },
+    {
+      attribute: "disallowEmptySelection",
+      type: "boolean",
+      description: "Whether the collection allows empty selection.",
+      default: "-"
+    },
+    {
+      attribute: "selectionMode",
+      type: "single | multiple | none",
+      description: "The type of selection that is allowed in the collection.",
+      default: "none"
+    },
+    {
+      attribute: "selectionBehavior",
+      type: "toggle | replace",
+      description: "How multiple selection should behave in the collection.",
+      default: "toggle"
+    },
+    {
+      attribute: "disabledBehavior",
+      type: "selection | all",
+      description: "Whether disabledKeys applies to all interactions, or only selection.",
+      default: "selection"
+    },
+    {
+      attribute: "allowDuplicateSelectionEvents",
+      type: "boolean",
+      description: "Whether onSelectionChange should fire even if the new set of keys is the same as the last.",
+      default: "-"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the table and checkbox animations.",
+      default: "false"
+    },
+    {
+      attribute: "checkboxesProps",
+      type: "CheckboxProps",
+      description: "Props to be passed to the checkboxes.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<'base' | 'table' | 'thead' | 'tbody' | 'tfoot' | 'emptyWrapper' | 'loadingWrapper' | 'wrapper' | 'tr' | 'th' | 'td' | 'sortIcon', string>>",
+      description: "Allows to set custom class names for the dropdown item slots.",
+      default: "-"
+    },
+    {
+      attribute: "isKeyboardNavigationDisabled",
+      type: "boolean",
+      description: "Whether to disable keyboard navigations or not.",
+      default: "false"
+    }
+  ]}
+/>
 
 ### Table Events
 
-| Attribute         | Type                                  | Description                                                         |
-| ----------------- | ------------------------------------- | ------------------------------------------------------------------- |
-| onRowAction       | `(key: React.Key) => void`            | Handler that is called when a user performs an action on the row.   |
-| onCellAction      | `(key: react.Key) => void`            | Handler that is called when a user performs an action on the cell.  |
-| onSelectionChange | `(keys: Selection) => any`            | Handler that is called when the selection changes.                  |
-| onSortChange      | `(descriptor: SortDescriptor) => any` | Handler that is called when the sorted column or direction changes. |
-
-<Spacer y={2} />
-
-#### TableHeader Props
-
-| Attribute  | Type          | Description                                                                                                 | Default |
-| ---------- | ------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode[]` | A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop | -       |
-| columns    | `T[]`         | A list of table columns.                                                                                    | -       |
-
-<Spacer y={2} />
-
-#### TableColumn Props
-
-| Attribute     | Type                         | Description                                                                                            | Default |
-| ------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------ | ------- |
-| children\*    | `ReactNode`                  | Static child columns or content to render as the column header                                         | -       |
-| align         | `start` \| `center` \| `end` | The alignment of the column's contents relative to its allotted width                                  | `start` |
-| hideHeader    | `boolean`                    | Whether the column should hide its header text                                                         | `false` |
-| allowsSorting | `boolean`                    | Whether the column allows sorting                                                                      | -       |
-| isRowHeader   | `boolean`                    | Whether a column is a row header and should be announced by assistive technology during row navigation | -       |
-| textValue     | `string`                     | A string representation of the column's contents, used for accessibility announcements                 | -       |
-| width         | `string` \| `number`         | The width of the column                                                                                | -       |
-| minWidth      | `string` \| `number`         | The minimum width of the column                                                                        | -       |
-| maxWidth      | `string` \| `number`         | The maximum width of the column                                                                        | -       |
+<APITable
+  data={[
+    {
+      attribute: "onRowAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when a user performs an action on the row.",
+      default: "-"
+    },
+    {
+      attribute: "onCellAction",
+      type: "(key: React.Key) => void",
+      description: "Handler that is called when a user performs an action on the cell.",
+      default: "-"
+    },
+    {
+      attribute: "onSelectionChange",
+      type: "(keys: Selection) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    },
+    {
+      attribute: "onSortChange",
+      type: "(descriptor: SortDescriptor) => any",
+      description: "Handler that is called when the sorted column or direction changes.",
+      default: "-"
+    }
+  ]}
+/>
 
-<Spacer y={2} />
+### TableHeader Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "A list of Column(s) or a function. If the latter, a list of columns must be provided using the columns prop",
+      default: "-"
+    },
+    {
+      attribute: "columns",
+      type: "T[]",
+      description: "A list of table columns.",
+      default: "-"
+    }
+  ]}
+/>
 
-#### TableBody Props
+### TableColumn Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "Static child columns or content to render as the column header",
+      default: "-"
+    },
+    {
+      attribute: "align",
+      type: "start | center | end",
+      description: "The alignment of the column's contents relative to its allotted width",
+      default: "start"
+    },
+    {
+      attribute: "hideHeader",
+      type: "boolean",
+      description: "Whether the column should hide its header text",
+      default: "false"
+    },
+    {
+      attribute: "allowsSorting",
+      type: "boolean",
+      description: "Whether the column allows sorting",
+      default: "-"
+    },
+    {
+      attribute: "isRowHeader",
+      type: "boolean",
+      description: "Whether a column is a row header and should be announced by assistive technology during row navigation",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the column's contents, used for accessibility announcements",
+      default: "-"
+    },
+    {
+      attribute: "width",
+      type: "string | number",
+      description: "The width of the column",
+      default: "-"
+    },
+    {
+      attribute: "minWidth",
+      type: "string | number",
+      description: "The minimum width of the column",
+      default: "-"
+    },
+    {
+      attribute: "maxWidth",
+      type: "string | number",
+      description: "The maximum width of the column",
+      default: "-"
+    }
+  ]}
+/>
 
-| Attribute      | Type                                                          | Description                                                                                   | Default |
-| -------------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------- |
-| children\*     | `RowElement` \| `RowElement[]` \| `((item: T) => RowElement)` | The contents of the table body. Supports static items or a function for dynamic rendering     | -       |
-| items          | `Iterable<T>`                                                 | A list of row objects in the table body used when dynamically rendering rows                  | -       |
-| isLoading      | `boolean`                                                     | Whether the table body is loading.                                                            | -       |
-| loadingState   | [LoadingState](#loading-state)                                | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom | -       |
-| loadingContent | `ReactNode`                                                   | Content to display while loading more items                                                   | -       |
-| emptyContent   | `ReactNode`                                                   | Content to display when there are no items in the table body                                  | -       |
+### TableBody Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "RowElement | RowElement[] | ((item: T) => RowElement)",
+      description: "The contents of the table body. Supports static items or a function for dynamic rendering",
+      default: "-"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "A list of row objects in the table body used when dynamically rendering rows",
+      default: "-"
+    },
+    {
+      attribute: "isLoading",
+      type: "boolean",
+      description: "Whether the table body is loading.",
+      default: "-"
+    },
+    {
+      attribute: "loadingState",
+      type: "LoadingState",
+      description: "Handler that is called when more items should be loaded, e.g. while scrolling near the bottom",
+      default: "-"
+    },
+    {
+      attribute: "loadingContent",
+      type: "ReactNode",
+      description: "Content to display while loading more items",
+      default: "-"
+    },
+    {
+      attribute: "emptyContent",
+      type: "ReactNode",
+      description: "Content to display when there are no items in the table body",
+      default: "-"
+    }
+  ]}
+/>
 
 ### TableBody Events
 
-| Attribute  | Type        | Description                                                                  |
-| ---------- | ----------- | ---------------------------------------------------------------------------- |
-| onLoadMore | `() => any` | A list of row objects in the table body used when dynamically rendering rows |
-
-<Spacer y={2} />
-
-#### TableRow Props
-
-| Attribute  | Type                                               | Description                                                                     | Default |
-| ---------- | -------------------------------------------------- | ------------------------------------------------------------------------------- | ------- |
-| children\* | `CellElement` \| `CellElement[]` \| `CellRenderer` | Rendered contents of the row or row child items                                 | -       |
-| textValue  | `string`                                           | A string representation of the row's contents, used for features like typeahead | -       |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onLoadMore",
+      type: "() => any",
+      description: "A list of row objects in the table body used when dynamically rendering rows",
+      default: "-"
+    }
+  ]}
+/>
 
-#### TableCell Props
+### TableRow Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "CellElement | CellElement[] | CellRenderer",
+      description: "Rendered contents of the row or row child items",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the row's contents, used for features like typeahead",
+      default: "-"
+    }
+  ]}
+/>
 
-| Attribute  | Type        | Description                                                                     | Default |
-| ---------- | ----------- | ------------------------------------------------------------------------------- | ------- |
-| children\* | `ReactNode` | The contents of the cell                                                        | -       |
-| textValue  | `string`    | A string representation of the row's contents, used for features like typeahead | -       |
+### TableCell Props
+
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The contents of the cell",
+      default: "-"
+    },
+    {
+      attribute: "textValue",
+      type: "string",
+      description: "A string representation of the row's contents, used for features like typeahead",
+      default: "-"
+    }
+  ]}
+/>
 
 ---
 
diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
index cc4fe91417..27cad0f5ca 100644
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@@ -243,52 +243,213 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 
 ### Tabs Props
 
-| Attribute              | Type                                                                                                   | Description                                                                                                  | Default     |
-| ---------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |
-| children\*             | `ReactNode` \| `((item: T) => ReactElement)`                                                           | The list of tabs.                                                                                            | -           |
-| variant                | `solid` \| `bordered` \| `light` \| `underlined`                                                       | The tabs appearance style.                                                                                   | `solid`     |
-| color                  | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                            | The tabs color theme.                                                                                        | `default`   |
-| size                   | `sm` \| `md` \| `lg`                                                                                   | The tabs size.                                                                                               | `md`        |
-| radius                 | `none` \| `sm` \| `md` \| `lg` \| `full`                                                               | The tabs border radius.                                                                                      | -           |
-| fullWidth              | `boolean`                                                                                              | Whether the tabs should take the full width of its parent.                                                   | `false`     |
-| items                  | [`Iterable<T>`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) | The list of tabs (dynamic).                                                                                  | -           |
-| disabledKeys           | `React.Key[]`                                                                                          | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.      | -           |
-| selectedKey            | `React.Key`                                                                                            | The key for the currently selected item.                                                                     | -           |
-| defaultSelectedKey     | `React.Key`                                                                                            | The key for the initially selected item.                                                                     | -           |
-| shouldSelectOnPressUp  | `boolean`                                                                                              | Whether the tabs selection should occur on press up instead of press down.                                   | `true`      |
-| keyboardActivation     | `automatic` \| `manual`                                                                                | Whether tabs are activated automatically on focus or manually.                                               | `automatic` |
-| motionProps            | [MotionProps](#motion-props)                                                                           | The props to modify the cursor framer motion animation. Use the `variants` API to create your own animation. | -           |
-| disableCursorAnimation | `boolean`                                                                                              | Whether the cursor should be hidden.                                                                         | `false`     |
-| isDisabled             | `boolean`                                                                                              | Whether the tab list should be disabled.                                                                     | `false`     |
-| disableAnimation       | `boolean`                                                                                              | Whether the tab list should be animated.                                                                     | `false`     |
-| classNames             | `Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "cursor" ｜ "panel", string>`                      | Allows to set custom class names for the card slots.                                                         | -           |
-| placement            | `top` \| `bottom` \| `start` \| `end`                                                                  | The position of the tabs.                                                                                    | `top`       |
-| isVertical             | `boolean`                                                                                              | Whether the tabs are vertical.                                                                               | `false`     |
-| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode | ((item: T) => ReactElement)",
+      description: "The list of tabs.",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "solid | bordered | light | underlined",
+      description: "The tabs appearance style.",
+      default: "solid"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The tabs color theme.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The tabs size.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The tabs border radius.",
+      default: "-"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the tabs should take the full width of its parent.",
+      default: "false"
+    },
+    {
+      attribute: "items",
+      type: "Iterable<T>",
+      description: "The list of tabs (dynamic).",
+      default: "-"
+    },
+    {
+      attribute: "disabledKeys",
+      type: "React.Key[]",
+      description: "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.",
+      default: "-"
+    },
+    {
+      attribute: "selectedKey",
+      type: "React.Key",
+      description: "The key for the currently selected item.",
+      default: "-"
+    },
+    {
+      attribute: "defaultSelectedKey",
+      type: "React.Key",
+      description: "The key for the initially selected item.",
+      default: "-"
+    },
+    {
+      attribute: "shouldSelectOnPressUp",
+      type: "boolean",
+      description: "Whether the tabs selection should occur on press up instead of press down.",
+      default: "true"
+    },
+    {
+      attribute: "keyboardActivation",
+      type: "automatic | manual",
+      description: "Whether tabs are activated automatically on focus or manually.",
+      default: "automatic"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the cursor framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "disableCursorAnimation",
+      type: "boolean",
+      description: "Whether the cursor should be hidden.",
+      default: "false"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the tab list should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the tab list should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\", string>>",
+      description: "Allows to set custom class names for the card slots.",
+      default: "-"
+    },
+    {
+      attribute: "placement",
+      type: "top | bottom | start | end",
+      description: "The position of the tabs.",
+      default: "top"
+    },
+    {
+      attribute: "isVertical",
+      type: "boolean", 
+      description: "Whether the tabs are vertical.",
+      default: "false"
+    },
+    {
+      attribute: "destroyInactiveTabPanel",
+      type: "boolean",
+      description: "Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.",
+      default: "true"
+    }
+  ]}
+/>
 
 ### Tabs Events
 
-| Attribute         | Type                      | Description                                        |
-| ----------------- | ------------------------- | -------------------------------------------------- |
-| onSelectionChange | `(key: React.Key) => any` | Handler that is called when the selection changes. |
+<APITable
+  data={[
+    {
+      attribute: "onSelectionChange",
+      type: "(key: React.Key) => any",
+      description: "Handler that is called when the selection changes.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tab Props
 
-| Attribute               | Type                          | Description                                                                                                                                                                      | Default |
-|-------------------------|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|
-| children\*              | `ReactNode`                   | The content of the tab.                                                                                                                                                          | -       |
-| title                   | `ReactNode`                   | The title of the tab.                                                                                                                                                            | -       |
-| titleValue              | `string`                      | A string representation of the item's contents. Use this when the `title` is not readable.                                                                                       | -       |
-| href                    | `string`                      | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   | -       |
-| target                  | `HTMLAttributeAnchorTarget`   | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   | -       |
-| rel                     | `string`                      | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  | -       |
-| download                | `boolean` \| `string`         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). | -       |
-| ping                    | `string`                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
-| referrerPolicy          | `HTMLAttributeReferrerPolicy` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
-| shouldSelectOnPressUp   | `boolean`                     | Whether the tab selection should occur on press up instead of press down.                                                                                                        | -       |
-
-#### Motion Props
-
-```ts
-export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
-```
+<APITable
+  data={[
+    {
+      attribute: "tabRef",
+      type: "RefObject<HTMLButtonElement>",
+      description: "A ref to the tab item.",
+      default: "-"
+    },
+    {
+      attribute: "children*",
+      type: "ReactNode",
+      description: "The content of the tab.",
+      default: "-"
+    },
+    {
+      attribute: "title",
+      type: "ReactNode",
+      description: "The title of the tab.",
+      default: "-"
+    },
+    {
+      attribute: "titleValue",
+      type: "string",
+      description: "A string representation of the item's contents. Use this when the title is not readable.",
+      default: "-"
+    },
+    {
+      attribute: "href",
+      type: "string",
+      description: "A URL to link to. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "target",
+      type: "HTMLAttributeAnchorTarget",
+      description: "The target window for the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "rel",
+      type: "string",
+      description: "The relationship between the linked resource and the current page. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "download",
+      type: "boolean | string",
+      description: "Causes the browser to download the linked URL. A string may be provided to suggest a file name. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "ping",
+      type: "string",
+      description: "A space-separated list of URLs to ping when the link is followed. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "referrerPolicy",
+      type: "HTMLAttributeReferrerPolicy",
+      description: "How much of the referrer to send when following the link. See MDN.",
+      default: "-"
+    },
+    {
+      attribute: "shouldSelectOnPressUp",
+      type: "boolean",
+      description: "Whether the tab selection should occur on press up instead of press down.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
index e4ba27b3b0..5581d2f284 100644
--- a/apps/docs/content/docs/components/textarea.mdx
+++ b/apps/docs/content/docs/components/textarea.mdx
@@ -56,6 +56,13 @@ the end of the label and the textarea will be required.
 
 <CodeDemo title="Required" files={textareaContent.required} />
 
+### Clear Button
+
+If you pass the `isClearable` property to the textarea, it will have a clear button at the
+end of the textarea, it will be visible when the textarea has a value.
+
+<CodeDemo title="Clear Button" files={textareaContent.clearButton} />
+
 ### Autosize
 
 Textarea grows automatically based on the content, but you can also set a min and max height to
@@ -92,6 +99,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 > **Note**: NextUI `Textarea` also supports native events like `onChange`, useful for form libraries
 > such as [Formik](https://formik.org/) and [React Hook Form](https://react-hook-form.com/).
 
+
 ## Slots
 
 - **base**: Input wrapper, it handles alignment, placement, and general appearance.
@@ -100,6 +108,7 @@ You can use the `value` and `onValueChange` properties to control the input valu
 - **input**: The textarea input element.
 - **description**: The description of the textarea.
 - **errorMessage**: The error message of the textarea.
+- **headerWrapper**: Wraps the `label` and the `clearButton`.
 
 <Spacer y={4} />
 
@@ -138,42 +147,212 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 ### Textarea Props
 
-| Attribute          | Type                                                                                                               | Description                                                                                                                                                                                                                                             | Default   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                                                                                                            | -         |
-| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                                                                                                                  | `3`       |
-| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                                                                                                               | `8`       |
-| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                                                                                                               | `false`   |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                                                                                                            | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                                                                                                              | `default` |
-| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                                                                                                               | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                                                                                                             | -         |
-| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                                                                                                                    | -         |
-| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                                                                                                                         | -         |
-| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                                                                                                                       | -         |
-| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                                                                                                                        | -         |
-| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                                                                                                                   | -         |
-| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                                                                                                                  | -         |
-| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                                                                                                                       | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                                                                                                                      | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                  | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop. | -         |
-| validationBehavior | `native` \| `aria`                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                          | `aria`    |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                                                                                                              | `inside`  |
-| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                                                                                                            | `true`    |
-| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                                                                                                                  | `false`   |
-| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                                                                                                                       |           |
-| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                                                                                                                       | `false`   |
-| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                                                                                                                        | `false`   |
-| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                                                | -         |
-| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                                                                                                                         | `false`   |
-| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                                                                                                                | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the checkbox slots.                                                                                                                                                                                                | -         |
+<APITable
+  data={[
+    {
+      attribute: "children",
+      type: "ReactNode",
+      description: "The content of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "minRows",
+      type: "number",
+      description: "The minimum number of rows to display.",
+      default: "3"
+    },
+    {
+      attribute: "maxRows",
+      type: "number", 
+      description: "Maximum number of rows up to which the textarea can grow.",
+      default: "8"
+    },
+    {
+      attribute: "cacheMeasurements",
+      type: "boolean",
+      description: "Reuse previously computed measurements when computing height of textarea.",
+      default: "false"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the textarea.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the textarea.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the textarea.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "string",
+      description: "The current value of the textarea (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "string",
+      description: "The default value of the textarea (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "placeholder",
+      type: "string",
+      description: "The placeholder of the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "startContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the left side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "endContent",
+      type: "ReactNode",
+      description: "Element to be rendered in the right side of the input.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the textarea. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | ((v: ValidationResult) => ReactNode)",
+      description: "An error message for the textarea.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: string) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "fullWidth",
+      type: "boolean",
+      description: "Whether the textarea should take up the width of its parent.",
+      default: "true"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user input is required on the textarea before form submission.",
+      default: "false"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the textarea can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the textarea is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isClearable",
+      type: "boolean",
+      description: "Whether the textarea should have a clear button.",
+      default: "false"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the textarea is invalid.",
+      default: "false"
+    },
+    {
+      attribute: "validationState",
+      type: "valid | invalid",
+      description: "Whether the textarea should display its \"valid\" or \"invalid\" visual styling. (Deprecated) use isInvalid instead.",
+      default: "-"
+    },
+    {
+      attribute: "disableAutosize",
+      type: "boolean",
+      description: "Whether the textarea auto vertically resize should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the textarea should be animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"label\" | \"inputWrapper\" | \"innerWrapper\" | \"input\" | \"description\" | \"errorMessage\", string>>",
+      description: "Allows to set custom class names for the checkbox slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Input Events
 
-| Attribute      | Type                                                    | Description                                                                                                                         |
-| -------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| onChange       | `React.ChangeEvent <HTMLInputElement>`                  | Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string). |
-| onValueChange  | `(value: string) => void`                               | Handler that is called when the element's value changes.                                                                            |
-| onClear        | `() => void`                                            | Handler that is called when the clear button is clicked.                                                                            |
-| onHeightChange | `(height: number, meta: { rowHeight: number }) => void` | Handler that is called when the height of the textarea changes.                                                                     |
+<APITable
+  data={[
+    {
+      attribute: "onChange",
+      type: "React.ChangeEvent<HTMLInputElement>",
+      description: "Handler that is called when the element's value changes. You can pull out the new value by accessing event.target.value (string).",
+      default: "-"
+    },
+    {
+      attribute: "onValueChange",
+      type: "(value: string) => void",
+      description: "Handler that is called when the element's value changes.",
+      default: "-"
+    },
+    {
+      attribute: "onClear",
+      type: "() => void",
+      description: "Handler that is called when the clear button is clicked.",
+      default: "-"
+    },
+    {
+      attribute: "onHeightChange",
+      type: "(height: number, meta: { rowHeight: number }) => void",
+      description: "Handler that is called when the height of the textarea changes.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx
index 24c4ac0b05..43db6888bb 100644
--- a/apps/docs/content/docs/components/time-input.mdx
+++ b/apps/docs/content/docs/components/time-input.mdx
@@ -209,43 +209,206 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen
 
 ### TimeInput Props
 
-| Attribute               | Type                                                                                                                                               | Description                                                                                                                                                        | Default   |
-| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
-| label                   | `ReactNode`                                                                                                                                        | The content to display as the label.                                                                                                                               | -         |
-| name                    | `string`                                                                                                                                           | The name of the time input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). | -         |
-| value                   | `TimeValue \|  null`                                                                                                                               | The current value (controlled).                                                                                                                                    | -         |
-| defaultValue            | `TimeValue \|  null`                                                                                                                               | The default value (uncontrolled).                                                                                                                                  | -         |
-| variant                 | `flat` \| `bordered` \| `faded` \| `underlined`                                                                                                    | The variant of the time input.                                                                                                                                     | `flat`    |
-| color                   | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                                                        | The color of the time input.                                                                                                                                       | `default` |
-| size                    | `sm` \| `md` \| `lg`                                                                                                                               | The size of the time input.                                                                                                                                        | `md`      |
-| radius                  | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                                                           | The radius of the time input.                                                                                                                                      | -         |
-| hourCycle               | `12 \| 24`                                                                                                                                         | Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.                                                          | -         |
-| granularity             | `'hour' \| 'minute' \| 'second'`                                                                                                                   | Determines the smallest unit that is displayed in the time picker.                                                                                                 | `minute`  |
-| hideTimeZone            | `boolean`                                                                                                                                          | Whether to hide the time zone abbreviation.                                                                                                                        | -         |
-| labelPlacement          | `inside` \| `outside` \| `outside-left`                                                                                                            | The position of the label.                                                                                                                                         | `inside`  |
-| shouldForceLeadingZeros | `boolean`                                                                                                                                          | Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.                                                       | `true`    |
-| placeholderValue        | `TimeValue`                                                                                                                                        | A placeholder time that influences the format of the placeholder shown when no value is selected. Defaults to 12:00 AM or 00:00 depending on the hour cycle.       | -         |
-| minValue                | `TimeValue`                                                                                                                                        | The minimum allowed time that a user may select.                                                                                                                   | -         |
-| maxValue                | `TimeValue`                                                                                                                                        | The maximum allowed time that a user may select.                                                                                                                   | -         |
-| isDisabled              | `boolean`                                                                                                                                          | Whether the time input is disabled.                                                                                                                                | -         |
-| isReadOnly              | `boolean`                                                                                                                                          | Whether the time input can be selected but not changed by the user.                                                                                                | -         |
-| isRequired              | `boolean`                                                                                                                                          | Whether user time input is required on the time input before form submission.                                                                                      | -         |
-| isInvalid               | `boolean`                                                                                                                                          | Whether the time input is invalid.                                                                                                                                 | -         |
-| autoFocus               | `boolean`                                                                                                                                          | Whether the element should receive focus on render.                                                                                                                | -         |
-| description             | `ReactNode`                                                                                                                                        | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                     | -         |
-| errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                  | An error message for the field.                                                                                                                                    | -         |
-| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
-| validationBehavior      | `native` \| `aria`                                                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.     | `aria`    |
-| disableAnimation        | `boolean`                                                                                                                                          | Whether to disable the animation of the time input.                                                                                                                | -         |
-| classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots.                                                                                                           | -         |
+<APITable
+  data={[
+    {
+      attribute: "label",
+      type: "ReactNode",
+      description: "The content to display as the label.",
+      default: "-"
+    },
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the time input element, used when submitting an HTML form.",
+      default: "-"
+    },
+    {
+      attribute: "value",
+      type: "TimeValue | null",
+      description: "The current value (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultValue",
+      type: "TimeValue | null",
+      description: "The default value (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "variant",
+      type: "flat | bordered | faded | underlined",
+      description: "The variant of the time input.",
+      default: "flat"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The color of the time input.",
+      default: "default"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The size of the time input.",
+      default: "md"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The radius of the time input.",
+      default: "-"
+    },
+    {
+      attribute: "hourCycle",
+      type: "12 | 24",
+      description: "Whether to display the time in 12 or 24 hour format. By default, this is determined by the user's locale.",
+      default: "-"
+    },
+    {
+      attribute: "granularity",
+      type: "hour | minute | second",
+      description: "Determines the smallest unit that is displayed in the time picker.",
+      default: "minute"
+    },
+    {
+      attribute: "hideTimeZone",
+      type: "boolean",
+      description: "Whether to hide the time zone abbreviation.",
+      default: "-"
+    },
+    {
+      attribute: "labelPlacement",
+      type: "inside | outside | outside-left",
+      description: "The position of the label.",
+      default: "inside"
+    },
+    {
+      attribute: "shouldForceLeadingZeros",
+      type: "boolean",
+      description: "Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.",
+      default: "true"
+    },
+    {
+      attribute: "placeholderValue",
+      type: "TimeValue",
+      description: "A placeholder time that influences the format of the placeholder shown when no value is selected.",
+      default: "-"
+    },
+    {
+      attribute: "minValue",
+      type: "TimeValue",
+      description: "The minimum allowed time that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "maxValue",
+      type: "TimeValue",
+      description: "The maximum allowed time that a user may select.",
+      default: "-"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the time input is disabled.",
+      default: "-"
+    },
+    {
+      attribute: "isReadOnly",
+      type: "boolean",
+      description: "Whether the time input can be selected but not changed by the user.",
+      default: "-"
+    },
+    {
+      attribute: "isRequired",
+      type: "boolean",
+      description: "Whether user time input is required on the time input before form submission.",
+      default: "-"
+    },
+    {
+      attribute: "isInvalid",
+      type: "boolean",
+      description: "Whether the time input is invalid.",
+      default: "-"
+    },
+    {
+      attribute: "autoFocus",
+      type: "boolean",
+      description: "Whether the element should receive focus on render.",
+      default: "-"
+    },
+    {
+      attribute: "description",
+      type: "ReactNode",
+      description: "A description for the field. Provides a hint such as specific requirements for what to choose.",
+      default: "-"
+    },
+    {
+      attribute: "errorMessage",
+      type: "ReactNode | (v: ValidationResult) => ReactNode",
+      description: "An error message for the field.",
+      default: "-"
+    },
+    {
+      attribute: "validate",
+      type: "(value: MappedTimeValue<TimeValue>) => ValidationError | true | null | undefined",
+      description: "Validate input values when committing (e.g. on blur), returning error messages for invalid values.",
+      default: "-"
+    },
+    {
+      attribute: "validationBehavior",
+      type: "native | aria",
+      description: "Whether to use native HTML form validation or ARIA validation. When wrapped in a Form component, the default is `aria`. Otherwise, the default is `native`.",
+      default: "native"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable the animation of the time input.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"label\" | \"inputWrapper\" | \"innerWrapper\" | \"segment\" | \"helperWrapper\" | \"input\" | \"description\" | \"errorMessage\", string>>",
+      description: "Allows to set custom class names for the time input slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### TimeInput Events
 
-| Attribute     | Type                                          | Description                                                     |
-| ------------- | --------------------------------------------- | --------------------------------------------------------------- |
-| onFocus       | `(e: FocusEvent<Target>) => void`             | Handler that is called when the element receives focus.         |
-| onBlur        | `(e: FocusEvent<Target>) => void`             | Handler that is called when the element loses focus.            |
-| onFocusChange | `(isFocused: boolean) => void`                | Handler that is called when the element's focus status changes. |
-| onKeyDown     | `(e: KeyboardEvent) => void`                  | Handler that is called when a key is pressed.                   |
-| onKeyUp       | `(e: KeyboardEvent) => void`                  | Handler that is called when a key is released.                  |
-| onChange      | `(value: MappedTimeValue<TimeValue>) => void` | Handler that is called when the value changes.                  |
+<APITable
+  data={[
+    {
+      attribute: "onFocus",
+      type: "(e: FocusEvent<Target>) => void",
+      description: "Handler that is called when the element receives focus."
+    },
+    {
+      attribute: "onBlur",
+      type: "(e: FocusEvent<Target>) => void",
+      description: "Handler that is called when the element loses focus."
+    },
+    {
+      attribute: "onFocusChange",
+      type: "(isFocused: boolean) => void",
+      description: "Handler that is called when the element's focus status changes."
+    },
+    {
+      attribute: "onKeyDown",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is pressed."
+    },
+    {
+      attribute: "onKeyUp",
+      type: "(e: KeyboardEvent) => void",
+      description: "Handler that is called when a key is released."
+    },
+    {
+      attribute: "onChange",
+      type: "(value: MappedTimeValue<TimeValue>) => void",
+      description: "Handler that is called when the value changes."
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx
index 8bcb0ba78e..3acd9a05bd 100644
--- a/apps/docs/content/docs/components/tooltip.mdx
+++ b/apps/docs/content/docs/components/tooltip.mdx
@@ -126,47 +126,197 @@ You can customize the `Tooltip` component by passing custom Tailwind CSS classes
 
 ### Tooltip Props
 
-| Attribute                 | Type                                                                        | Description                                                                                                  | Default         |
-| ------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | --------------- |
-| children\*                | `ReactNode[]`                                                               | The children to render. Usually a trigger element.                                                           | -               |
-| content                   | `ReactNode`                                                                 | The content to render inside the tooltip.                                                                    | -               |
-| size                      | `sm` \| `md` \| `lg`                                                        | The tooltip size. This change the `content` font size.                                                       | `md`            |
-| color                     | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger` | The tooltip color theme.                                                                                     | `default`       |
-| radius                    | `none` \| `sm` \| `md` \| `lg` \| `full`                                    | The tooltip border radius.                                                                                   | `md`            |
-| shadow                    | `none` \| `sm` \| `md` \| `lg`                                              | The tooltip shadow.                                                                                          | `sm`            |
-| placement                 | [TooltipPlacement](#tooltip-placement)                                      | The placement of the tooltip relative to its trigger reference.                                              | `top`           |
-| delay                     | `number`                                                                    | The delay in milliseconds before the tooltip opens.                                                          | `0`           |
-| closeDelay                | `number`                                                                    | The delay in milliseconds before the tooltip closes.                                                         | `500`             |
-| isOpen                    | `boolean`                                                                   | Whether the tooltip is open by default (controlled).                                                         | -               |
-| defaultOpen               | `boolean`                                                                   | Whether the tooltip is open by default (uncontrolled).                                                       | -               |
-| offset(px)                | `number`                                                                    | The distance or margin between the reference and popper. It is used internally to create an offset modifier. | `7`             |
-| containerPadding(px)      | `number`                                                                    | The placement padding that should be applied between the element and its surrounding container.              | `12`            |
-| crossOffset(px)           | `number`                                                                    | The additional offset applied along the cross axis between the element and its anchor element.               | `0`             |
-| showArrow                 | `boolean`                                                                   | Whether the tooltip should have an arrow.                                                                    | `false`         |
-| shouldFlip                | `boolean`                                                                   | Whether the tooltip should change its placement and flip when it's about to overflow its boundary area.      | `true`          |
-| triggerScaleOnOpen        | `boolean`                                                                   | Whether the trigger should scale down when the tooltip is open.                                              | `true`          |
-| shouldBlockScroll         | `boolean`                                                                   | Whether to block scrolling outside the tooltip.                                                              | `true`          |
-| isKeyboardDismissDisabled | `boolean`                                                                   | Whether pressing the escape key to close the tooltip should be disabled.                                     | `false`         |
-| isDismissable             | `boolean`                                                                   | Whether to close the overlay when the user interacts outside it.                                             | `false`         |
-| shouldCloseOnBlur         | `boolean`                                                                   | Whether the tooltip should close when focus is lost or moves outside it.                                     | `true`          |
-| motionProps               | [MotionProps](#motion-props)                                                | The props to modify the framer motion animation. Use the `variants` API to create your own animation.        | -               |
-| portalContainer           | `HTMLElement`                                                               | The container element in which the overlay portal will be placed.                                            | `document.body` |
-| updatePositionDeps        | `any[]`                                                                     | The dependencies to force the tooltip position update.                                                       | `[]`            |
-| isDisabled                | `boolean`                                                                   | Whether the tooltip is disabled.                                                                             | `false`         |
-| disableAnimation          | `boolean`                                                                   | Whether the tooltip is animated.                                                                             | `false`         |
-| classNames                | `Record<"base"｜"content", string>`                                           | Allows to set custom class names for the tooltip slots.                                                      | -               |
-
-<Spacer y={1} />
+<APITable
+  data={[
+    {
+      attribute: "children*",
+      type: "ReactNode[]",
+      description: "The children to render. Usually a trigger element.",
+      default: "-"
+    },
+    {
+      attribute: "content",
+      type: "ReactNode",
+      description: "The content to render inside the tooltip.",
+      default: "-"
+    },
+    {
+      attribute: "size",
+      type: "sm | md | lg",
+      description: "The tooltip size. This change the content font size.",
+      default: "md"
+    },
+    {
+      attribute: "color",
+      type: "default | primary | secondary | success | warning | danger",
+      description: "The tooltip color theme.",
+      default: "default"
+    },
+    {
+      attribute: "radius",
+      type: "none | sm | md | lg | full",
+      description: "The tooltip border radius.",
+      default: "md"
+    },
+    {
+      attribute: "shadow",
+      type: "none | sm | md | lg",
+      description: "The tooltip shadow.",
+      default: "sm"
+    },
+    {
+      attribute: "placement",
+      type: "TooltipPlacement",
+      description: "The placement of the tooltip relative to its trigger reference.",
+      default: "top"
+    },
+    {
+      attribute: "delay",
+      type: "number",
+      description: "The delay in milliseconds before the tooltip opens.",
+      default: "0"
+    },
+    {
+      attribute: "closeDelay",
+      type: "number",
+      description: "The delay in milliseconds before the tooltip closes.",
+      default: "500"
+    },
+    {
+      attribute: "isOpen",
+      type: "boolean",
+      description: "Whether the tooltip is open by default (controlled).",
+      default: "-"
+    },
+    {
+      attribute: "defaultOpen",
+      type: "boolean",
+      description: "Whether the tooltip is open by default (uncontrolled).",
+      default: "-"
+    },
+    {
+      attribute: "offset",
+      type: "number",
+      description: "The distance or margin between the reference and popper. It is used internally to create an offset modifier.",
+      default: "7"
+    },
+    {
+      attribute: "containerPadding",
+      type: "number",
+      description: "The placement padding that should be applied between the element and its surrounding container.",
+      default: "12"
+    },
+    {
+      attribute: "crossOffset",
+      type: "number",
+      description: "The additional offset applied along the cross axis between the element and its anchor element.",
+      default: "0"
+    },
+    {
+      attribute: "showArrow",
+      type: "boolean",
+      description: "Whether the tooltip should have an arrow.",
+      default: "false"
+    },
+    {
+      attribute: "shouldFlip",
+      type: "boolean",
+      description: "Whether the tooltip should change its placement and flip when it's about to overflow its boundary area.",
+      default: "true"
+    },
+    {
+      attribute: "triggerScaleOnOpen",
+      type: "boolean",
+      description: "Whether the trigger should scale down when the tooltip is open.",
+      default: "true"
+    },
+    {
+      attribute: "shouldBlockScroll",
+      type: "boolean",
+      description: "Whether to block scrolling outside the tooltip.",
+      default: "true"
+    },
+    {
+      attribute: "isKeyboardDismissDisabled",
+      type: "boolean",
+      description: "Whether pressing the escape key to close the tooltip should be disabled.",
+      default: "false"
+    },
+    {
+      attribute: "isDismissable",
+      type: "boolean",
+      description: "Whether to close the overlay when the user interacts outside it.",
+      default: "false"
+    },
+    {
+      attribute: "shouldCloseOnBlur",
+      type: "boolean",
+      description: "Whether the tooltip should close when focus is lost or moves outside it.",
+      default: "true"
+    },
+    {
+      attribute: "motionProps",
+      type: "MotionProps",
+      description: "The props to modify the framer motion animation. Use the variants API to create your own animation.",
+      default: "-"
+    },
+    {
+      attribute: "portalContainer",
+      type: "HTMLElement",
+      description: "The container element in which the overlay portal will be placed.",
+      default: "document.body"
+    },
+    {
+      attribute: "updatePositionDeps",
+      type: "any[]",
+      description: "The dependencies to force the tooltip position update.",
+      default: "[]"
+    },
+    {
+      attribute: "isDisabled",
+      type: "boolean",
+      description: "Whether the tooltip is disabled.",
+      default: "false"
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether the tooltip is animated.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\"｜\"content\", string>>",
+      description: "Allows to set custom class names for the tooltip slots.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tooltip Events
 
-| Attribute                    | Type                        | Description                                                                                                                                                                                                                                                                                               |
-| ---------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| onOpenChange                 | `(isOpen: boolean) => void` | Handler that is called when the tooltip's open state changes.                                                                                                                                                                                                                                             |
-| shouldCloseOnInteractOutside | `(e: HTMLElement) => void`  | When user interacts with the argument element outside of the tooltip ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the tooltip. By default, onClose will always be called on interaction outside the overlay ref. |
-| onClose                      | `() => void`                | Handler that is called when the tooltip should close.                                                                                                                                                                                                                                                     |
-
-<Spacer y={2} />
+<APITable
+  data={[
+    {
+      attribute: "onOpenChange",
+      type: "(isOpen: boolean) => void",
+      description: "Handler that is called when the tooltip's open state changes.",
+      default: "-"
+    },
+    {
+      attribute: "shouldCloseOnInteractOutside",
+      type: "(e: HTMLElement) => void",
+      description: "When user interacts with the argument element outside of the tooltip ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the tooltip. By default, onClose will always be called on interaction outside the overlay ref.",
+      default: "-"
+    },
+    {
+      attribute: "onClose",
+      type: "() => void",
+      description: "Handler that is called when the tooltip should close.",
+      default: "-"
+    }
+  ]}
+/>
 
 ### Tooltip types
 
diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx
index 2f04436e75..64309f6a67 100644
--- a/apps/docs/content/docs/components/user.mdx
+++ b/apps/docs/content/docs/components/user.mdx
@@ -72,10 +72,37 @@ Display user information with avatar and name.
 
 ### User Props
 
-| Attribute   | Type                                                          | Description                                                                                | Default |
-| ----------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------- |
-| name        | `string`                                                      | The name of the user.                                                                      | -       |
-| description | `ReactNode`                                                   | The description component.                                                                 | -       |
-| isFocusable | `boolean`                                                     | Whether the user is focusable. This is useful when using `Dropdown` or similar components. | `false` |
-| avatarProps | [AvatarProps](/docs/components/avatar#avatar-props)           | The avatar component props. The `name` is passed by default.                               | -       |
-| classNames  | `Record<"base"｜ "wrapper"｜ "name"｜ "description", string>` | Allows to set custom class names for the user slots.                                       | -       |
+<APITable
+  data={[
+    {
+      attribute: "name",
+      type: "string",
+      description: "The name of the user.",
+      default: "-"
+    },
+    {
+      attribute: "description", 
+      type: "ReactNode",
+      description: "The description component.",
+      default: "-"
+    },
+    {
+      attribute: "isFocusable",
+      type: "boolean", 
+      description: "Whether the user is focusable. This is useful when using `Dropdown` or similar components.",
+      default: "false"
+    },
+    {
+      attribute: "avatarProps",
+      type: "AvatarProps",
+      description: "The avatar component props. The `name` is passed by default.",
+      default: "-"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"wrapper\" | \"name\" | \"description\", string>>",
+      description: "Allows to set custom class names for the user slots.",
+      default: "-"
+    }
+  ]}
+/>
diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index d0539d70bf..0601d1f1bb 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -118,7 +118,7 @@ export function ThemeSwitcher() {
 };
 ```
 
-> **Note**: You can use any theme name you want, but make sure it exits in your 
+> **Note**: You can use any theme name you want, but make sure it exists in your 
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 </Steps>
@@ -185,30 +185,28 @@ export const ThemeSwitcher = () => {
 };
 ```
 
-> **Note**: You can use any theme name you want, but make sure it exits in your
+> **Note**: You can use any theme name you want, but make sure it exists in your
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 </Steps>
 
 
-## Using use-dark-mode hook
+## Using use-theme hook
 
 In case you're using plain React with [Vite](/docs/frameworks/vite) or [Create React App](https://create-react-app.dev/) 
-you can use the [use-dark-mode](https://github.com/donavon/use-dark-mode) hook to switch between themes.
+you can use the [@nextui-org/use-theme](https://github.com/nextui-org/nextui/tree/canary/packages/hooks/use-theme) hook to switch between themes.
 
-> See the [use-dark-mode](https://github.com/donavon/use-dark-mode) documentation for more details.
+<Steps> 
 
-<Steps>
-
-### Install use-dark-mode
+### Install @nextui-org/use-theme
 
-Install `use-dark-mode` in your project.
+Install `@nextui-org/use-theme` in your project.
 
 <PackageManagers
   commands={{
-    npm: 'npm install use-dark-mode',
-    yarn: 'yarn add use-dark-mode',
-    pnpm: 'pnpm add use-dark-mode',
+    npm: 'npm install @nextui-org/use-theme',
+    yarn: 'yarn add @nextui-org/use-theme',
+    pnpm: 'pnpm add @nextui-org/use-theme',
   }}
 /> 
 
@@ -217,13 +215,13 @@ Install `use-dark-mode` in your project.
 ```jsx
 // App.tsx or App.jsx
 import React from "react";
-import useDarkMode from "use-dark-mode";
+import {useTheme} from "@nextui-org/use-theme";
 
 export default function App() {
-  const darkMode = useDarkMode(false);
+  const {theme} = useTheme();
 
   return (
-    <main className={`${darkMode.value ? 'dark' : ''} text-foreground bg-background`}>
+    <main className={`${theme} text-foreground bg-background`}>
       <App />
     </main>
   )
@@ -238,24 +236,23 @@ Add the theme switcher to your app.
 // 'use client'; // uncomment this line if you're using Next.js App Directory Setup
 
 // components/ThemeSwitcher.tsx
-import useDarkMode from "use-dark-mode";
+import {useTheme} from "@nextui-org/use-theme";
 
 export const ThemeSwitcher = () => {
-  const darkMode = useDarkMode(false);
+  const { theme, setTheme } = useTheme()
 
   return (
     <div>
-      <button onClick={darkMode.disable}>Light Mode</button>
-      <button onClick={darkMode.enable}>Dark Mode</button>
+      The current theme is: {theme}
+      <button onClick={() => setTheme('light')}>Light Mode</button>
+      <button onClick={() => setTheme('dark')}>Dark Mode</button>
     </div>
   )
 };
 ```
 
-
-
-> **Note**: You can use any theme name you want, but make sure it exits in your
+> **Note**: You can use any theme name you want, but make sure it exists in your
 `tailwind.config.js` file. See [Create Theme](/docs/customization/create-theme) for more details.
 
 
-</Steps>
\ No newline at end of file
+</Steps>
diff --git a/apps/docs/content/docs/frameworks/astro.mdx b/apps/docs/content/docs/frameworks/astro.mdx
index 39cce51138..0bde0925f3 100644
--- a/apps/docs/content/docs/frameworks/astro.mdx
+++ b/apps/docs/content/docs/frameworks/astro.mdx
@@ -41,7 +41,7 @@ In your Astro project, run one of the following command to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/content/docs/frameworks/nextjs.mdx b/apps/docs/content/docs/frameworks/nextjs.mdx
index 3ba2de12bd..946adfcf08 100644
--- a/apps/docs/content/docs/frameworks/nextjs.mdx
+++ b/apps/docs/content/docs/frameworks/nextjs.mdx
@@ -156,7 +156,7 @@ In your Next.js project, run one of the following commands to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
@@ -402,7 +402,7 @@ In your Next.js project, run one of the following commands to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/content/docs/frameworks/remix.mdx b/apps/docs/content/docs/frameworks/remix.mdx
index b4a50b89cf..1012bdfa16 100644
--- a/apps/docs/content/docs/frameworks/remix.mdx
+++ b/apps/docs/content/docs/frameworks/remix.mdx
@@ -35,7 +35,7 @@ In your Remix project, run one of the following command to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/content/docs/frameworks/vite.mdx b/apps/docs/content/docs/frameworks/vite.mdx
index 9df4ba41e1..a5767d7ebc 100644
--- a/apps/docs/content/docs/frameworks/vite.mdx
+++ b/apps/docs/content/docs/frameworks/vite.mdx
@@ -36,7 +36,7 @@ In your Vite React project, run one of the following command to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/content/docs/guide/forms.mdx b/apps/docs/content/docs/guide/forms.mdx
new file mode 100644
index 0000000000..f9f4af75c0
--- /dev/null
+++ b/apps/docs/content/docs/guide/forms.mdx
@@ -0,0 +1,573 @@
+---
+title: Forms
+description: Learn how to handle forms in NextUI.
+---
+
+import {formContent} from "@/content/components/form";
+
+# Forms
+
+NextUI provides form components with built-in validation and styling to help users input and submit data effectively.
+
+<CarbonAd />
+
+<CodeDemo title="Demo" files={formContent.demo} />
+
+## Labels and help text
+
+Accessible forms start with clear, descriptive labels for each field. All NextUI form components support labeling using
+the Label component, which is automatically associated with the field via the id and for attributes on your behalf.
+
+In addition, NextUI components support help text, which associates additional context with a field such as a **description**
+or **error message**. The label and help text are announced by assistive technology such as screen readers when the user focuses
+the field.
+
+```tsx {5,6}
+import {Input} from "@nextui-org/react";
+
+<Input
+  type="password"
+  label="Password"
+  description="Password must be at least 8 characters."
+/>;
+```
+
+Most fields should have a visible label. In rare exceptions, the `aria-label` or `aria-labelledby` attribute must be provided instead to identify the element to screen readers.
+
+## Submitting data
+
+How you submit form data depends on your framework, application, and server. By default,**HTML** forms are submitted via a full-page refresh in the browser.
+You can call `preventDefault` in the `onSubmit` event to handle form data submission via an API.
+
+Frameworks like [Next.js](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#forms), [Remix](https://remix.run/docs/en/main/guides/forms), and [React Router](https://reactrouter.com/en/main/route/form-submission) provide their own ways to handle form submission.
+
+#### Uncontrolled forms
+
+A simple way to get form data is to use the browser's [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) API during the `onSubmit` event. You can send this data to a backend API or convert it into a JavaScript object using [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries).
+Each field should have a `name` prop to identify it, and the values will be serialized as strings by the browser.
+
+```tsx {12,15}
+import * as React from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    // Prevent default browser page refresh.
+    e.preventDefault();
+
+    // Get form data as an object.
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    // Submit data to your backend API.
+    setSubmitted(data);
+  };
+
+  return (
+    <Form onSubmit={onSubmit} validationBehavior="native">
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button type="submit">Submit</Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Usage" showEditor={false} files={formContent.usage} />
+
+#### Controlled forms
+
+NextUI form components are uncontrolled by default, but if you need to manage state in real-time, you can use the `useState` hook to make the component controlled.
+
+```tsx {5,26-27}
+import * as React from "react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  const [email, setEmail] = React.useState("");
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage="Please enter a valid email"
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+        value={email}
+        onValueChange={setEmail}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Controlled" showEditor={false} files={formContent.controlled} />
+
+
+#### Customizing error messages
+
+By default, error messages are provided by the browser.
+You can customize these messages by providing a function to the `errorMessage` prop.
+
+```tsx {12-16}
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage={({validationDetails}) => {
+          if (validationDetails.valueMissing) {
+            return "Please enter a valid name";
+          }
+        }}
+        label="Name"
+        labelPlacement="outside"
+        name="name"
+        placeholder="Enter your name"
+        type="text"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo
+  title="Custom error messages"
+  showEditor={false}
+  files={formContent.customErrorMessages}
+/>
+
+> **Note**: The default error messages are localized by the browser based on the browser/operating system language settings. The [locale setting in NextUI Provider](/docs/api-references/nextui-provider#props) does not affect validation errors.
+
+
+## Validation
+
+Form validation is crucial for ensuring that users enter the correct data.
+NextUI supports native HTML constraint validation and allows for custom validation and real-time validation.
+
+#### Built-in validation
+
+NextUI form components support [native HTML validation](https://developer.mozilla.org/docs/Web/HTML/Constraint_validation) attributes like `isRequired` and `minLength`.
+These constraints are checked by the browser when the user commits changes (e.g., onBlur) or submits the form.
+You can display validation errors with custom styles instead of the browser's default UI.
+
+```tsx {10}
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+```
+
+To enable native validation, set `validationBehavior="native"`.
+By default, `validationBehavior="aria"` is set, which only marks the field as required or invalid for assistive technologies, without preventing form submission.
+You can change the form defaults for your entire app using [NextUI Provider](/docs/api-references/nextui-provider).
+
+Supported constraints include:
+
+- `isRequired` indicates that a field must have a value before the form can be submitted.
+- `minValue` and `maxValue` specify the minimum and maximum value in a date picker or number field.
+- `minLength` and `maxLength` specify the minimum and length of text input.
+- `pattern` provides a custom regular expression that a text input must conform to.
+- `type="email"` and `type="url"` provide builtin validation for email addresses and URLs.
+
+See each component's documentation for more details on the supported validation props.
+
+<Spacer y={4} />
+
+<CodeDemo title="Native validation" showEditor={false} files={formContent.nativeValidation} />
+
+#### Custom validation
+
+In addition to built-in constraints, you can provide a function to the `validate` prop to support custom validation.
+
+```tsx {17-23}
+import {Form, Input, Button} from "@nextui-org/react";
+
+export default function App() {
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Form validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button type="submit" variant="bordered">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Custom validation" showEditor={false} files={formContent.customValidation} />
+
+#### Realtime validation
+
+If you want to display validation errors while the user is typing, you can control the field value and use the `isInvalid` prop along with the `errorMessage` prop.
+
+```tsx {19-26,30,32}
+import {Input} from "@nextui-org/react";
+
+export function Example() {
+  const [password, setPassword] = React.useState("");
+  const errors = [];
+
+  if (password.length < 4) {
+    errors.push("Password must be 4 characters or more.");
+  }
+  if ((password.match(/[A-Z]/g) || []).length < 1) {
+    errors.push("Password must include at least 1 upper case letter");
+  }
+  if ((password.match(/[^a-z]/gi) || []).length < 1) {
+    errors.push("Password must include at least 1 symbol.");
+  }
+
+  return (
+    <Input
+      errorMessage={() => (
+        <ul>
+          {errors.map((error, i) => (
+            <li key={i}>{error}</li>
+          ))}
+        </ul>
+      )}
+      isInvalid={errors.length > 0}
+      label="Password"
+      labelPlacement="outside"
+      placeholder="Enter your password"
+      value={password}
+      variant="bordered"
+      onValueChange={setPassword}
+    />
+  );
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Realtime validation" showEditor={false} files={formContent.realTimeValidation} />
+
+Use `validationBehavior="aria"` to allow form submission even when fields are invalid, while maintaining accessibility.
+
+#### Server validation
+
+Client-side validation provides immediate feedback, but you should also validate data on the server to ensure accuracy and security.
+NextUI allows you to display server-side validation errors by using the `validationErrors` prop in the `Form` component.
+This prop should be an object where each key is the field `name` and the value is the error message.
+
+```tsx {4,17,25-26}
+import {Button, Form, Input} from "@nextui-org/react";
+
+function Example() {
+  const [errors, setErrors] = React.useState({});
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    if (!data.username) {
+      setErrors({username: "Username is required"});
+
+      return;
+    }
+
+    const result = await callServer(data);
+
+    setErrors(result.errors);
+  };
+
+  return (
+    <Form
+      className="w-full max-w-xs flex flex-col gap-3"
+      validationErrors={errors}
+      onSubmit={onSubmit}
+    >
+      <Input
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+      />
+      <Button type="submit" variant="flat">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+// Fake server used in this example.
+function callServer(data) {
+  return {
+    errors: {
+      username: "Sorry, this username is taken.",
+    },
+  };
+}
+```
+
+<Spacer y={4} />
+
+<CodeDemo title="Server validation" showEditor={false} files={formContent.serverValidation} />
+
+#### Schema validation
+
+NextUI supports errors from schema validation libraries like [Zod](https://zod.dev/).
+You can use Zod's `flatten` method to get error messages for each field and return them as part of the server response.
+
+```tsx {14}
+// In your server.
+import {z} from "zod";
+
+const schema = z.object({
+  name: z.string().min(1),
+  age: z.coerce.number().positive(),
+});
+
+function handleRequest(formData: FormData) {
+  const result = schema.safeParse(Object.fromEntries(formData));
+
+  if (!result.success) {
+    return {
+      errors: result.error.flatten().fieldErrors,
+    };
+  }
+
+  // Do something with the validated data.
+
+  return {
+    errors: {},
+  };
+}
+```
+
+### React Server Actions
+
+[Server Actions](https://react.dev/reference/rsc/server-actions) that allows seamless form submission to the server and retrieval of results.
+The [useActionState](https://react.dev/reference/react/useActionState) hook can be used to get the result of server actions (such as errors) after submitting a form.
+
+```tsx {9-11,14}
+// app/add-form.tsx
+"use client";
+
+import {useActionState} from "react";
+import {Button, Input, Label} from "@nextui-org/react";
+import {createTodo} from "@/app/actions";
+
+export function AddForm() {
+  const [{errors}, formAction] = useActionState(createTodo, {
+    errors: {},
+  });
+
+  return (
+    <Form action={formAction} validationErrors={errors}>
+      <Input name="todo" label="Task" />
+      <Button type="submit">Add</Button>
+    </Form>
+  );
+}
+```
+
+<Spacer y={4} />
+
+```ts {10}
+// app/actions.ts
+"use server";
+
+export async function createTodo(prevState: any, formData: FormData) {
+  try {
+    // Create the todo.
+  } catch (err) {
+    return {
+      errors: {
+        todo: "Invalid todo.",
+      },
+    };
+  }
+}
+```
+
+### Remix
+
+[Remix actions](https://remix.run/docs/en/main/route/action) handle form submissions on the server.
+You can use the [useSubmit](https://remix.run/docs/en/main/hooks/use-submit) hook to submit form data to the server and the [useActionData](https://remix.run/docs/en/main/hooks/use-action-data) hook to retrieve validation errors from the server.
+
+```tsx {13,18,34}
+// app/routes/signup.tsx
+import type {ActionFunctionArgs} from "@remix-run/node";
+import {useActionData, useSubmit} from "@remix-run/react";
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function SignupForm() {
+  let submit = useSubmit();
+  let onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    submit(e.currentTarget);
+  };
+
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <Form
+      method="post"
+      validationErrors={actionData?.errors}
+      onSubmit={onSubmit}
+    >
+      <Input label="Username" name="username" />
+      <Input label="Password" name="password" type="password" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+
+export async function action({request}: ActionFunctionArgs) {
+  try {
+    // Validate data and perform action...
+  } catch (err) {
+    return {
+      errors: {
+        username: "Sorry, this username is taken.",
+      },
+    };
+  }
+}
+```
+
+<Spacer y={4} />
+
+## Form libraries
+
+In most cases, the built-in validation features of NextUI are sufficient. However, if you're building more complex forms or integrating NextUI components into an existing form, you can use a form library like [React Hook Form](https://react-hook-form.com/) or [Formik](https://formik.org/).
+
+#### React Hook Form
+
+You can integrate NextUI components using [Controller](https://react-hook-form.com/docs/usecontroller/controller).
+Controller allows you to manage field values and validation errors, and reflect the validation result in NextUI components.
+
+```tsx
+import {Controller, useForm} from "react-hook-form";
+import {Button, Input, Label} from "@nextui-org/react";
+
+function App() {
+  const {handleSubmit, control} = useForm({
+    defaultValues: {
+      name: "",
+    },
+  });
+
+  const onSubmit = (data) => {
+    // Call your API here.
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Controller
+        control={control}
+        name="name"
+        render={({field: {name, value, onChange, onBlur, ref}, fieldState: {invalid, error}}) => (
+          <Input
+            ref={ref}
+            isRequired
+            errorMessage={error?.message}
+            // Let React Hook Form handle validation instead of the browser.
+            validationBehavior="aria"
+            isInvalid={invalid}
+            label="Name"
+            name={name}
+            value={value}
+            onBlur={onBlur}
+            onChange={onChange}
+          />
+        )}
+        rules={{required: "Name is required."}}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+}
+```
+
+> For more information about forms in NextUI, visit the [React Aria Forms Guide](https://react-spectrum.adobe.com/react-aria/forms.html).
diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx
index 2c015c73bd..d81a299285 100644
--- a/apps/docs/content/docs/guide/installation.mdx
+++ b/apps/docs/content/docs/guide/installation.mdx
@@ -26,7 +26,7 @@ Execute one of the following commands in your terminal:
 <PackageManagers
   commands={{
     npm: "npm install -g nextui-cli",
-    yarn: "yarn add global nextui-cli",
+    yarn: "yarn global add nextui-cli",
     pnpm: "pnpm add -g nextui-cli",
     bun: "bun add -g nextui-cli",
   }}
@@ -143,7 +143,7 @@ To install NextUI, run one of the following commands in your terminal:
 #### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
@@ -253,7 +253,7 @@ in your terminal:
 #### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/content/docs/guide/introduction.mdx b/apps/docs/content/docs/guide/introduction.mdx
index b3fd3aaffe..242c7f8a8c 100644
--- a/apps/docs/content/docs/guide/introduction.mdx
+++ b/apps/docs/content/docs/guide/introduction.mdx
@@ -30,7 +30,7 @@ NextUI's primary goal is to streamline the development process, offering a beaut
 
 ### Is NextUI a Vercel related project?
 
-<div className="text-default-500">
+<div className="text-default-600 dark:text-default-500">
   No, NextUI is an independent community project and is not related to Vercel.
 </div>
 
@@ -38,14 +38,14 @@ NextUI's primary goal is to streamline the development process, offering a beaut
 
 - **TailwindCSS**:
 
-  <div className="text-default-500">
+  <div className="text-default-600 dark:text-default-500">
     Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components,
     leaving you to handle lots of other things like accessibility, component composition, keyboard
     navigation, style overrides, etc.
   </div>
 
 - **NextUI**:
-  <div className="text-default-500">
+  <div className="text-default-600 dark:text-default-500">
     NextUI is a UI library for React that combines the power of TailwindCSS with React Aria to
     provide complete components (logic and styles) for building accessible and customizable user
     interfaces. Since NextUI uses TailwindCSS as its style engine, you can use all TailwindCSS
@@ -54,11 +54,9 @@ NextUI's primary goal is to streamline the development process, offering a beaut
 
 ### How is NextUI different from TailwindCSS components libraries?
 
-<div className="text-default-500">
-  TailwindCSS components libraries such as{" "}
-  <Link isExternal showAnchorIcon href="https://tailwindui.com/">TailwindUI</Link>,{" "}
-  <Link isExternal showAnchorIcon href="https://flowbite.com/">Flowbite</Link>, or{" "}
-  <Link isExternal showAnchorIcon href="https://preline.co/">Preline</Link>, just to name a few, only offer a curated selection of TailwindCSS classes to style your components.
+<div className="text-default-600 dark:text-default-500">
+  TailwindCSS components libraries such as [TailwindUI](https://tailwindui.com/),
+  [Flowbite](https://flowbite.com/), or [Preline](https://preline.co/), just to name a few, only offer a curated selection of TailwindCSS classes to style your components.
   They don't provide any React specific components, logic, props, composition, or accessibility features.<br/>
   <Spacer y={2}/>
   In contrast to these libraries, NextUI is a complete UI library that provides a set of accessible and
@@ -67,16 +65,14 @@ NextUI's primary goal is to streamline the development process, offering a beaut
 
 ### How NextUI deals with TailwindCSS classes conflicts?
 
-<div className="text-default-500">
-  We created a TailwindCSS utility library called{" "}
-  <Link isExternal showAnchorIcon href="https://www.tailwind-variants.org/">tailwind-variants</Link>{" "}
-  that automatically handles TailwindCSS class conflicts. This ensures your custom classes will
+<div className="text-default-600 dark:text-default-500">
+  We created a TailwindCSS utility library called [tailwind-variants](https://www.tailwind-variants.org/) that automatically handles TailwindCSS class conflicts. This ensures your custom classes will
   consistently override the default ones, eliminating any duplication.
 </div>
 
 ### Does NextUI use runtime CSS?
 
-<div className="text-default-500">
+<div className="text-default-600 dark:text-default-500">
   No. As NextUI uses TailwindCSS as its style engine, it generates CSS at build time, eliminating
   the need for runtime CSS. This means that NextUI is fully compatible with the latest React and
   Next.js versions.
@@ -84,21 +80,21 @@ NextUI's primary goal is to streamline the development process, offering a beaut
 
 ### Does NextUI support TypeScript?
 
-<div className="text-default-500">
+<div className="text-default-600 dark:text-default-500">
   Yes, NextUI is written in TypeScript and has full support for it.
 </div>
 
 ### Can I use NextUI with other front-end frameworks or libraries, such as Vue or Angular?
 
-<div className="text-default-500">
+<div className="text-default-600 dark:text-default-500">
   No, NextUI is specifically designed for React as it is built on top of React Aria. However, you
   can still use the NextUI components styling part with other frameworks or libraries.
 </div>
 
 ### Why does NextUI use Framer Motion?
 
-<div className="text-default-500">
-  We use <Link href="https://www.framer.com/motion" isExternal showAnchorIcon>Framer Motion</Link> to animate some components due to
+<div className="text-default-600 dark:text-default-500">
+  We use [Framer Motion](https://www.framer.com/motion) to animate some components due to
   the complexity of the animations and their physics-based nature. Framer Motion allows us to
   handle these animations in a more straightforward and performant way. In addition, it is
   well tested and production ready.
diff --git a/apps/docs/content/docs/guide/routing.mdx b/apps/docs/content/docs/guide/routing.mdx
index ece0f57349..7751b310ea 100644
--- a/apps/docs/content/docs/guide/routing.mdx
+++ b/apps/docs/content/docs/guide/routing.mdx
@@ -6,37 +6,37 @@ description: Learn how to integrate client side routing into your NextUI applica
 # Routing
 
 NextUI Components such as [Tabs](/docs/components/tabs), [Listbox](/docs/components/listbox), [Dropdown](/docs/components/dropdown) and many others offer
-the flexibility to be rendered as HTML links. Explore this page to learn how to integrate them with client side routing.
+the flexibility to be rendered as **HTML links**.
 
-<CarbonAd/>
+<CarbonAd />
 
 ## Introduction
 
 By default, links perform native browser navigation when they are interacted with. However, many apps and
-frameworks use client side routers to avoid a full page reload when navigating between pages. The `NextUIProvider`
-component configures all NextUI components within it to navigate using the client side router you provide.
+frameworks use client side routers to avoid a full page reload when navigating between pages.
 
-Set this up once in the root of your app, and any NextUI component with the href prop will automatically navigate
+The `NextUIProvider` component configures all NextUI components within it to navigate using the client side
+router you provide.
+
+Set this up once in the `root` of your app, and any NextUI component with the `href` prop will automatically navigate
 using your router.
 
 ## NextUIProvider Setup
 
-The `NextUIProvider` accepts a prop called `navigate`. This should be set to a function received from your
-router for performing a client side navigation programmatically. The following example shows the general
-pattern. Framework-specific examples are shown below.
+The `NextUIProvider` component accepts `navigate` and `useHref` props. `navigate` is a router function for client-side
+navigation, while `useHref` optionally converts router hrefs to native HTML hrefs. Here's the pattern:
 
 ```jsx
 import * as React from "react";
 
-// 1. import `NextUIProvider` component
 import {NextUIProvider} from "@nextui-org/react";
+import {useNavigate, useHref} from "your-router";
 
 function App() {
-  const navigate = useNavigateFromYourRouter();
+  const navigate = useNavigate();
 
-  // 2. Add the `navigate` function to the `NextUIProvider`
   return (
-    <NextUIProvider navigate={navigate}>
+    <NextUIProvider navigate={navigate} useHref={useHref}>
       <YourApplication />
     </NextUIProvider>
   );
@@ -45,32 +45,65 @@ function App() {
 
 <Spacer y={2} />
 
-## Next.js 
+> **Note**: Framework-specific examples are shown below.
+
+### Router Options
+
+All `NextUI` link components accept a `routerOptions` prop that passes options to the router's navigate function for
+controlling behavior like scrolling and history navigation.
+
+```jsx
+<DropdownItem href="/login" routerOptions={{replace: true}}>
+  {/* ...*/}
+</DropdownItem>
+```
+
+When using TypeScript, you can configure the RouterConfig type globally so that all link components have auto
+complete and type safety using a type provided by your router.
+
+```tsx
+import type {RouterOptions} from "your-router";
+
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: RouterOptions;
+  }
+}
+```
+
+<Spacer y={2} />
+
+## Next.js
 
-### App Router
+#### App Router
 
 Go to your `app/providers.tsx` or `app/providers.jsx` (create it if it doesn't exist) and add the
 `useRouter` hook from `next/navigation`, it returns a router object that can be used to perform navigation.
 
+> Check the [Next.js docs](https://nextjs.org/docs/app/api-reference/functions/use-router) for more details.
+
 <Steps>
 
 #### Add the `useRouter`
 
-```tsx {8}
+```tsx {16}
 // app/providers.tsx
-'use client'
+"use client";
+
+import {useRouter} from "next/navigation";
+import {NextUIProvider} from "@nextui-org/react";
 
-import {NextUIProvider} from '@nextui-org/react';
-import {useRouter} from 'next/navigation'
+// Only if using TypeScript
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NonNullable<Parameters<ReturnType<typeof useRouter>["push"]>[1]>;
+  }
+}
 
-export function Providers({children}: { children: React.ReactNode }) {
+export function Providers({children}: {children: React.ReactNode}) {
   const router = useRouter();
 
-  return (
-    <NextUIProvider navigate={router.push}>
-      {children}
-    </NextUIProvider>
-  )
+  return <NextUIProvider navigate={router.push}>{children}</NextUIProvider>;
 }
 ```
 
@@ -78,17 +111,15 @@ export function Providers({children}: { children: React.ReactNode }) {
 
 Now, Go to your `root` layout page and wrap it with the `NextUIProvider`:
 
-```tsx {6,8,10}
+```tsx {8}
 // app/layout.tsx
 import {Providers} from "./providers";
 
-export default function RootLayout({children}: { children: React.ReactNode }) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang="en" className='dark'>
+    <html lang="en" className="dark">
       <body>
-        <Providers>
-          {children}
-        </Providers>
+        <Providers>{children}</Providers>
       </body>
     </html>
   );
@@ -97,30 +128,32 @@ export default function RootLayout({children}: { children: React.ReactNode }) {
 
 > **Note**: Skip this step if you already set up the `NextUIProvider` in your app.
 
-#### Add useHref (Optional)
+#### Next.js Base Path (Optional)
 
-If you are using the Next.js [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting, you'll need to configure an environment variable to access it. 
+If you are using the Next.js [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) setting,
+you'll need to configure an environment variable to access it.
 
 ```js
 // next.config.js
-const basePath = '...';
+const basePath = "...";
 const nextConfig = {
   basePath,
   env: {
-    BASE_PATH: basePath
-  }
+    BASE_PATH: basePath,
+  },
 };
 ```
+
 Then, provide a custom `useHref` function to prepend it to the href for all links.
 
 ```tsx {9,12}
 // app/providers.tsx
-'use client'
+"use client";
 
-import {NextUIProvider} from '@nextui-org/react';
-import {useRouter} from 'next/navigation'
+import {useRouter} from "next/navigation";
+import {NextUIProvider} from "@nextui-org/react";
 
-export function Providers({children}: { children: React.ReactNode }) {
+export function Providers({children}: {children: React.ReactNode}) {
   const router = useRouter();
   const useHref = (href: string) => process.env.BASE_PATH + href;
 
@@ -128,7 +161,7 @@ export function Providers({children}: { children: React.ReactNode }) {
     <NextUIProvider navigate={router.push} useHref={useHref}>
       {children}
     </NextUIProvider>
-  )
+  );
 }
 ```
 
@@ -136,37 +169,46 @@ export function Providers({children}: { children: React.ReactNode }) {
 
 ### Pages Router
 
-Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and add the`useRouter` hook 
+Go to pages`/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and add the`useRouter` hook
 from `next/router`, it returns a router object that can be used to perform navigation.
 
-```tsx {7,10}
+```tsx
 // pages/_app.tsx
-import type { AppProps } from 'next/app';
-import {NextUIProvider} from '@nextui-org/react';
-import {useRouter} from 'next/router';
+import type {AppProps} from "next/app";
+import {type NextRouter, useRouter} from "next/router";
+import {NextUIProvider} from "@nextui-org/react";
+
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NonNullable<
+      Parameters<NextRouter['push']>[2]
+    >;
+  }
+}
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
 
   return (
     <NextUIProvider navigate={router.push}>
       <Component {...pageProps} />
     </NextUIProvider>
-  )
+  );
 }
 
 export default MyApp;
 ```
 
-When using the [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) configuration option, provide a `useHref` option to the router passed to Provider to prepend it to links automatically.
+When using the [basePath](https://nextjs.org/docs/app/api-reference/next-config-js/basePath) configuration option, 
+provide a `useHref` option to the router passed to Provider to prepend it to links automatically.
 
-```tsx {8,11}
+```tsx {8}
 // pages/_app.tsx
-import type { AppProps } from 'next/app';
-import {NextUIProvider} from '@nextui-org/react';
-import {useRouter} from 'next/router';
+import type {AppProps} from "next/app";
+import {NextUIProvider} from "@nextui-org/react";
+import {useRouter} from "next/router";
 
-function MyApp({ Component, pageProps }: AppProps) {
+function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
   const useHref = (href: string) => router.basePath + href;
 
@@ -174,7 +216,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     <NextUIProvider navigate={router.push} useHref={useHref}>
       <Component {...pageProps} />
     </NextUIProvider>
-  )
+  );
 }
 
 export default MyApp;
@@ -182,17 +224,22 @@ export default MyApp;
 
 ## React Router
 
-The `useNavigate` hook from `react-router-dom` returns a `navigate` function that can be used to perform navigation. 
+Use the `useNavigate` hook from `react-router-dom` to get the `navigate` function for routing. The `useHref` hook can be used with React Router's `basename` option.
 
-The `useHref` hook can also be provided if you're using React Router's `basename` option. Ensure that the component that calls useNavigate and renders Provider is inside the router component (e.g. `BrowserRouter`) so that it has access to React Router's internal context. The React Router `<Routes>` element should also be defined inside `<NextUIProvider>` so that links inside the rendered routes have access to the router.
+Make sure to place the component using these hooks inside `BrowserRouter` and keep `<Routes>` within `NextUIProvider`. Here's how to set it up in your App component:
 
-Go to the `App` file commonly called `App.jsx` or `App.tsx`, add the `useNavigate` hook and pass the 
-`navigate` function to the `NextUIProvider`:
-
-```jsx {6,9}
+```tsx
 // App.tsx or App.jsx
-import {BrowserRouter, useNavigate, useHref} from 'react-router-dom';
-import {NextUIProvider} from '@nextui-org/react';
+import type {NavigateOptions} from "react-router-dom";
+
+import {BrowserRouter, useNavigate, useHref} from "react-router-dom";
+import {NextUIProvider} from "@nextui-org/react";
+
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NavigateOptions;
+  }
+}
 
 function App() {
   const navigate = useNavigate();
@@ -208,42 +255,47 @@ function App() {
   );
 }
 
-
 // main.tsx or main.jsx
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
   </React.StrictMode>,
-)
+);
 ```
 
-Ensure that the component that calls `useNavigate` and renders `NextUIProvider` is inside the router 
-component (e.g. `BrowserRouter`) so that it has access to React Router's internal context. The React Router `<Routes>` 
+Ensure that the component that calls `useNavigate` and renders `NextUIProvider` is inside the router
+component (e.g. `BrowserRouter`) so that it has access to React Router's internal context. The React Router `<Routes>`
 element should also be defined inside `NextUIProvider` so that links inside the rendered routes have access
 to the router.
 
 ## Remix
 
-Remix uses React Router under the hood, so the same `useNavigate` and `useHref` hook described above also works in Remix 
-apps. `NextUIProvider` should be rendered at the `root` of each page that includes NextUI components, or in 
-`app/root.tsx` to add it to all pages. See the [Remix docs](https://remix.run/docs/en/main/file-conventions/root) 
+Remix uses React Router under the hood, so the same `useNavigate` and `useHref` hook described above also works in Remix
+apps. `NextUIProvider` should be rendered at the `root` of each page that includes NextUI components, or in
+`app/root.tsx` to add it to all pages. See the [Remix docs](https://remix.run/docs/en/main/file-conventions/root)
 for more details.
 
-```jsx {14}
+```tsx
 // app/root.tsx
-import {useNavigate, useHref, Outlet} from '@remix-run/react';
-import {NextUIProvider} from '@nextui-org/react';
+import type {NavigateOptions} from 'react-router-dom';
+
+import {useNavigate, useHref, Outlet} from "@remix-run/react";
+import {NextUIProvider} from "@nextui-org/react";
+
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    routerOptions: NavigateOptions;
+  }
+}
 
 export default function App() {
   const navigate = useNavigate();
 
   return (
     <html lang="en">
-      <head>
-        {/* ... */}
-      </head>
+      <head>{/* ... */}</head>
       <body>
         <NextUIProvider navigate={navigate} useHref={useHref}>
           <Outlet />
@@ -257,19 +309,31 @@ export default function App() {
 
 ## TanStack
 
-To use [TanStack Router](https://tanstack.com/router/latest) with NextUI, render NextUI's RouterProvider inside your root route. Use `router.navigate` in the `navigate` prop, and `router.buildLocation` in the `useHref` prop. 
+To use [TanStack Router](https://tanstack.com/router/latest) with NextUI, render NextUI's RouterProvider inside your root route. 
+Use `router.navigate` in the `navigate` prop, and `router.buildLocation` in the `useHref` prop.
 
-```tsx {9,10}
+```tsx
 // app/root.tsx
-import {NextUIProvider} from '@nextui-org/react';
+import type {NavigateOptions, ToOptions} from '@tanstack/react-router';
+
+import {useRouter} from '@tanstack/react-router';
+import {NextUIProvider} from "@nextui-org/react";
+
+
+declare module "@react-types/shared" {
+  interface RouterConfig {
+    href: ToOptions['to'];
+    routerOptions: Omit<NavigateOptions, keyof ToOptions>;
+  }
+}
 
 function RootRoute() {
   let router = useRouter();
 
   return (
-    <NextUIProvider 
-      navigate={(to, options) => router.navigate({ to, ...options })}
-      useHref={(to) => router.buildLocation(to).href}
+    <NextUIProvider
+      navigate={(to, options) => router.navigate({to, ...options})}
+      useHref={(to) => router.buildLocation({to}).href}
     >
       {/* You app here... */}
     </NextUIProvider>
@@ -279,13 +343,12 @@ function RootRoute() {
 
 ## Usage examples
 
-Now that you have set up the `NextUIProvider` in your app, you can use the `href` prop in the `Tabs`, 
+Now that you have set up the `NextUIProvider` in your app, you can use the `href` prop in the `Tabs`,
 `Listbox` and `Dropdown` items to navigate between pages.
 
 The [Link](/docs/components/link) component will also use the `navigate` function from the
 `NextUIProvider` to navigate between pages.
 
-
 ```jsx
 import {
   Tabs,
@@ -304,20 +367,32 @@ function App() {
   return (
     <>
       <Tabs aria-label="Navigation">
-        <Tab key="home" href="/home">Home</Tab>
-        <Tab key="about" href="/about">About</Tab>
+        <Tab key="home" href="/home">
+          Home
+        </Tab>
+        <Tab key="about" href="/about">
+          About
+        </Tab>
       </Tabs>
       <Listbox aria-label="Navigation">
-        <ListboxItem key="home" href="/home">Home</ListboxItem>
-        <ListboxItem key="about" href="/about">About</ListboxItem>
+        <ListboxItem key="home" href="/home">
+          Home
+        </ListboxItem>
+        <ListboxItem key="about" href="/about">
+          About
+        </ListboxItem>
       </Listbox>
       <Dropdown>
         <DropdownTrigger>
           <Button>Open</Button>
         </DropdownTrigger>
         <DropdownMenu aria-label="Navigation">
-          <DropdownItem key="home" href="/home">Home</DropdownItem>
-          <DropdownItem key="about" href="/about">About</DropdownItem>
+          <DropdownItem key="home" href="/home">
+            Home
+          </DropdownItem>
+          <DropdownItem key="about" href="/about">
+            About
+          </DropdownItem>
         </DropdownMenu>
       </Dropdown>
       <Link href="/home">Home</Link>
@@ -326,3 +401,7 @@ function App() {
   );
 }
 ```
+
+<Spacer y={2} />
+
+> For more information about routing in React Aria, visit the [React Aria Routing Guide](https://react-spectrum.adobe.com/react-aria/routing.html).
diff --git a/apps/docs/content/docs/guide/upgrade-to-v2.mdx b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
index 2d3a3a0ca3..09e3dee807 100644
--- a/apps/docs/content/docs/guide/upgrade-to-v2.mdx
+++ b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
@@ -45,7 +45,7 @@ In your Next.js project, run one of the following command to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
@@ -170,7 +170,7 @@ In your Next.js project, run one of the following command to install NextUI:
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
@@ -275,7 +275,7 @@ In v2, NextUI now requires `framer-motion` as a dependency. To install both, use
 ### Hoisted Dependencies Setup
 
 <Blockquote color="primary">
-**Note**: This step is only for those who use pnpm to install. If you install NextUI using other package managers, you may skip this step.
+**Note**: This step is only for those who use `pnpm` to install. If you install NextUI using other package managers, you may skip this step.
 </Blockquote>
 
 If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.
diff --git a/apps/docs/contentlayer.config.js b/apps/docs/contentlayer.config.js
index 59331a3d6a..21e5da22b0 100644
--- a/apps/docs/contentlayer.config.js
+++ b/apps/docs/contentlayer.config.js
@@ -1,10 +1,11 @@
-import {defineDocumentType, defineNestedType, makeSource} from "contentlayer/source-files";
+import {defineDocumentType, defineNestedType, makeSource} from "contentlayer2/source-files";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import {visit} from "unist-util-visit";
+import RawPlugin from 'esbuild-plugin-raw'
 import pluginCodeBlock from "./plugins/codeBlock";
 
-/** @type {import('contentlayer/source-files').ComputedFields} */
+/** @type {import('contentlayer2/source-files').ComputedFields} */
 const computedFields = {
   slug: {
     type: "string",
@@ -15,8 +16,7 @@ const computedFields = {
     resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
   },
   url: {type: "string", resolve: (doc) => `/${doc._raw.flattenedPath}`},
-}
-
+};
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -27,10 +27,9 @@ export const Doc = defineDocumentType(() => ({
     description: {type: "string", required: false},
     date: {type: "date", required: false},
   },
-  computedFields
+  computedFields,
 }));
 
-
 const AuthorProperties = defineNestedType(() => ({
   name: "AuthorProperties",
   fields: {
@@ -38,7 +37,7 @@ const AuthorProperties = defineNestedType(() => ({
     link: {type: "string", required: false},
     avatar: {type: "string", required: false},
     username: {type: "string", required: false},
-  }
+  },
 }));
 
 export const BlogPost = defineDocumentType(() => ({
@@ -50,8 +49,8 @@ export const BlogPost = defineDocumentType(() => ({
     description: {type: "string", required: true},
     date: {type: "date", required: true},
     draft: {type: "boolean", required: false},
-    tags: { type: 'list', of: { type: 'string' } },
-    author: {type: "nested",of: AuthorProperties, required: false},
+    tags: {type: "list", of: {type: "string"}},
+    author: {type: "nested", of: AuthorProperties, required: false},
     image: {type: "string", required: false},
   },
   computedFields: {
@@ -63,7 +62,7 @@ export const BlogPost = defineDocumentType(() => ({
         const date = new Date(doc.date);
         const options = {year: "numeric", month: "long", day: "numeric"};
         return date.toLocaleDateString("en-US", options);
-      }
+      },
     },
     // add https://nextui.org to the image path
     imageAsParams: {
@@ -73,9 +72,9 @@ export const BlogPost = defineDocumentType(() => ({
         if (image) {
           return `https://nextui.org${image}`;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 
 export default makeSource({
@@ -83,6 +82,12 @@ export default makeSource({
   documentTypes: [Doc, BlogPost],
   mdx: {
     remarkPlugins: [remarkGfm, pluginCodeBlock],
+    esbuildOptions(options) {
+      options.plugins ||= [];
+      options.plugins.unshift(RawPlugin());
+ 
+      return options;
+    },
     rehypePlugins: [
       rehypeSlug,
       () => (tree) => {
diff --git a/apps/docs/global.d.ts b/apps/docs/global.d.ts
new file mode 100644
index 0000000000..1a622ff3b6
--- /dev/null
+++ b/apps/docs/global.d.ts
@@ -0,0 +1,14 @@
+declare module "*.tsx?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.jsx?raw" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.js?raw" {
+  const content: string;
+  export default content;
+}
diff --git a/apps/docs/libs/constants.tsx b/apps/docs/libs/constants.tsx
index 169a29f44b..2bfc987abd 100644
--- a/apps/docs/libs/constants.tsx
+++ b/apps/docs/libs/constants.tsx
@@ -1,14 +1,14 @@
-import {DiscordIcon, GithubIcon, TwitterIcon} from "@/components/icons";
+import {DiscordIcon, GithubIcon, XIcon} from "@/components/icons";
 
 export const TWITTER_USER_NAME = "getnextui";
 export const SITE_URL = "https://nextui.org";
 
 export const communityAccounts = [
   {
-    title: "Twitter",
+    title: "X",
     description: "For announcements, tips and general information.",
-    icon: <TwitterIcon className="text-[#00ACEE]" size={32} />,
-    href: "https://twitter.com/getnextui",
+    icon: <XIcon className="text-[#333] dark:text-[#E7E7E7]" size={28} />,
+    href: "https://x.com/getnextui",
     isExternal: true,
   },
   {
diff --git a/apps/docs/libs/contentlayer.ts b/apps/docs/libs/contentlayer.ts
index 5181aff657..1dceaa6e68 100644
--- a/apps/docs/libs/contentlayer.ts
+++ b/apps/docs/libs/contentlayer.ts
@@ -1,4 +1,4 @@
-import type {Document, MDX} from "contentlayer/core";
+import type {Document, MDX} from "contentlayer2/core";
 
 import {slug} from "github-slugger";
 
diff --git a/apps/docs/libs/docs/page.ts b/apps/docs/libs/docs/page.ts
index c0b7aed55b..7518442416 100644
--- a/apps/docs/libs/docs/page.ts
+++ b/apps/docs/libs/docs/page.ts
@@ -1,6 +1,6 @@
-import type {MDX} from "contentlayer/core";
+import type {MDX} from "contentlayer2/core";
 
-import * as Local from "contentlayer/source-files";
+import * as Local from "contentlayer2/source-files";
 
 import {TAG, FORCE_TAG, CONTENT_PATH, ASSETS_PATH} from "./config";
 
diff --git a/apps/docs/libs/rehype-highlight-line.js b/apps/docs/libs/rehype-highlight-line.js
index 9d58a8f210..ece725562a 100644
--- a/apps/docs/libs/rehype-highlight-line.js
+++ b/apps/docs/libs/rehype-highlight-line.js
@@ -1,8 +1,8 @@
 // Inspired by https://github.dev/modulz/stitches-site
 
-const hastToHtml = require("hast-util-to-html");
-const unified = require("unified");
-const parse = require("rehype-parse");
+import {unified} from "unified";
+import {toHtml} from "hast-util-to-html";
+import rehypeParse from "rehype-parse";
 
 const lineNumberify = function lineNumberify(ast, lineNum = 1) {
   let lineNumber = lineNum;
@@ -101,7 +101,7 @@ const MULTILINE_TOKEN_SPAN = /<span class="token ([^"]+)">[^<]*\n[^<]*<\/span>/g
 
 const applyMultilineFix = function (ast) {
   // AST to HTML
-  let html = hastToHtml(ast);
+  let html = toHtml(ast);
 
   // Fix JSX issue
   html = html.replace(MULTILINE_TOKEN_SPAN, (match, token) =>
@@ -109,14 +109,14 @@ const applyMultilineFix = function (ast) {
   );
 
   // HTML to AST
-  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(html);
+  const hast = unified().use(rehypeParse, {emitParseErrors: true, fragment: true}).parse(html);
 
   return hast.children;
 };
 
-module.exports = function (ast, lines) {
+export default function (ast, lines) {
   const formattedAst = applyMultilineFix(ast);
   const numbered = lineNumberify(formattedAst).nodes;
 
   return wrapLines(numbered, lines);
-};
+}
diff --git a/apps/docs/libs/rehype-highlight-word.js b/apps/docs/libs/rehype-highlight-word.js
index 1629b74f8e..61660f0fee 100644
--- a/apps/docs/libs/rehype-highlight-word.js
+++ b/apps/docs/libs/rehype-highlight-word.js
@@ -1,13 +1,13 @@
-const hastToHtml = require("hast-util-to-html");
-const unified = require("unified");
-const parse = require("rehype-parse");
+import {unified} from "unified";
+import {toHtml} from "hast-util-to-html";
+import rehypeParse from "rehype-parse";
 
 const CALLOUT = /__(.*?)__/g;
 
-module.exports = (code) => {
-  const html = hastToHtml(code);
+export default function (code) {
+  const html = toHtml(code);
   const result = html.replace(CALLOUT, (_, text) => `<span class="highlight-word">${text}</span>`);
-  const hast = unified().use(parse, {emitParseErrors: true, fragment: true}).parse(result);
+  const hast = unified().use(rehypeParse, {emitParseErrors: true, fragment: true}).parse(result);
 
   return hast.children;
-};
+}
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
index e27ef62736..f00a0d5240 100644
--- a/apps/docs/next.config.js
+++ b/apps/docs/next.config.js
@@ -1,9 +1,8 @@
-const withContentlayer = require("next-contentlayer").withContentlayer;
+const withContentlayer = require("next-contentlayer2").withContentlayer;
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@nextui-org/react", "@nextui-org/theme"],
-  swcMinify: true,
   reactStrictMode: true, // Recommended for the `pages` directory, default in `app`.
   redirects: require("./next-redirect.js"),
   eslint: {
@@ -14,12 +13,27 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   images: {
-    domains: [
-      "opencollective-production.s3.us-west-1.amazonaws.com",
-      "avatars.githubusercontent.com",
-      "logo.clearbit.com",
-      "i.pravatar.cc",
-      "nextui.org",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "opencollective-production.s3.us-west-1.amazonaws.com",
+      },
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "logo.clearbit.com",
+      },
+      {
+        protocol: "https",
+        hostname: "i.pravatar.cc",
+      },
+      {
+        protocol: "https",
+        hostname: "nextui.org",
+      },
     ],
   },
   rewrites: async () => {
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 0dfb26c55f..0709addb79 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -3,27 +3,30 @@
   "version": "2.0.0",
   "private": true,
   "scripts": {
-    "dev": "rimraf .contentlayer && concurrently \"contentlayer dev\" \"next dev\"",
-    "build": "contentlayer build && next build",
+    "dev": "rimraf .contentlayer && concurrently \"contentlayer2 dev\" \"next dev\"",
+    "build": "contentlayer2 build && next build ",
     "build:analyze": "ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint",
-    "typecheck": "contentlayer build && tsc --noEmit",
+    "typecheck": "contentlayer2 build && tsc --noEmit",
     "preinstall": "node preinstall.js",
     "build:sponsors": "tsx scripts/build-sponsors.ts",
     "update:search-meta": "tsx scripts/update-search-meta.ts",
+    "update:github-info": "tsx scripts/update-github-info.ts",
     "postbuild": "next-sitemap"
   },
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.6.4",
-    "@iconify/icons-solar": "^1.2.3",
-    "@iconify/react": "^4.1.1",
-    "@internationalized/date": "^3.5.4",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@iconify/icons-solar": "1.2.3",
+    "@iconify/react": "5.0.2",
+    "@internationalized/date": "3.5.6",
     "@mapbox/rehype-prism": "^0.6.0",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/badge": "workspace:*",
     "@nextui-org/code": "workspace:*",
     "@nextui-org/divider": "workspace:*",
+    "@nextui-org/input-otp": "workspace:*",
     "@nextui-org/kbd": "workspace:*",
     "@nextui-org/listbox": "workspace:*",
     "@nextui-org/react": "workspace:*",
@@ -37,74 +40,75 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/selection": "3.18.1",
-    "@react-aria/ssr": "3.9.4",
-    "@react-aria/utils": "3.24.1",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/selection": "3.20.1",
+    "@react-aria/ssr": "3.9.6",
+    "@react-aria/utils": "3.26.0",
     "@react-aria/virtualizer": "3.10.1",
-    "@react-aria/visually-hidden": "3.8.12",
+    "@react-aria/visually-hidden": "3.8.17",
     "@react-stately/data": "3.11.4",
     "@react-stately/layout": "3.13.9",
     "@react-stately/tree": "3.8.1",
     "@rehooks/local-storage": "^2.4.5",
+    "@tanstack/react-virtual": "3.10.9",
     "canvas-confetti": "^1.9.2",
     "cmdk": "^0.2.0",
-    "color2k": "^2.0.2",
-    "contentlayer": "^0.3.4",
-    "date-fns": "^2.30.0",
-    "framer-motion": "^11.1.7",
+    "color2k": "2.0.3",
+    "contentlayer2": "0.5.3",
+    "date-fns": "4.1.0",
+    "framer-motion": "11.11.13",
+    "geist": "1.3.1",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "7.1.2",
-    "lodash": "^4.17.21",
+    "hast-util-to-html": "9.0.3",
     "marked": "^5.1.0",
-    "match-sorter": "^6.3.1",
-    "mini-svg-data-uri": "^1.4.3",
-    "mitt": "3.0.0",
-    "next": "13.5.1",
-    "next-contentlayer": "^0.3.4",
-    "next-themes": "^0.2.1",
+    "match-sorter": "8.0.0",
+    "mini-svg-data-uri": "1.4.4",
+    "mitt": "3.0.1",
+    "next": "14.3.0-canary.43",
+    "next-contentlayer2": "0.5.3",
+    "next-themes": "0.4.3",
     "nprogress": "^0.2.0",
     "parse-numeric-range": "1.2.0",
+    "posthog-js": "1.184.1",
     "prism-react-renderer": "^1.2.1",
     "querystring": "^0.2.1",
-    "posthog-js": "1.187.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.51.3",
     "react-icons": "^4.10.1",
-    "react-live": "^2.3.0",
+    "react-live": "^4.1.8",
     "react-multi-ref": "^1.0.1",
     "react-wrap-balancer": "^1.0.0",
     "refractor": "3.3.1",
-    "rehype": "11.0.0",
-    "rehype-parse": "7.0.1",
-    "rehype-pretty-code": "^0.10.0",
-    "rehype-slug": "^5.1.0",
-    "remark": "^14.0.3",
-    "remark-autolink-headings": "^6.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-slug": "^6.0.0",
-    "rss": "^1.2.2",
-    "scroll-into-view-if-needed": "3.0.10",
+    "rehype": "13.0.2",
+    "rehype-parse": "9.0.1",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "6.0.0",
+    "remark": "^15.0.1",
+    "remark-gfm": "4.0.0",
+    "rss": "1.2.2",
+    "scroll-into-view-if-needed": "3.1.0",
     "sharp": "^0.32.1",
     "shelljs": "^0.8.4",
-    "swr": "^2.2.1",
+    "swr": "2.2.5",
     "tailwind-variants": "^0.1.20",
-    "unified": "^9.2.2",
-    "unist-util-visit": "^4.1.2",
-    "usehooks-ts": "^2.9.1",
-    "zustand": "^4.3.8"
+    "unified": "^11.0.5",
+    "unist-util-visit": "5.0.0",
+    "usehooks-ts": "3.1.0",
+    "zustand": "5.0.1"
   },
   "devDependencies": {
     "@docusaurus/utils": "2.0.0-beta.3",
-    "@next/bundle-analyzer": "^13.4.6",
-    "@next/env": "^13.4.12",
-    "@react-types/shared": "3.23.1",
+    "@next/bundle-analyzer": "14.3.0-canary.43",
+    "@next/env": "14.3.0-canary.43",
+    "@react-types/calendar": "3.4.10",
+    "@react-types/datepicker": "3.8.3",
+    "@react-types/shared": "3.25.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/canvas-confetti": "^1.4.2",
-    "@types/lodash": "^4.14.194",
     "@types/marked": "^5.0.0",
     "@types/mdx": "^2.0.5",
     "@types/node": "20.2.5",
@@ -113,21 +117,29 @@
     "@types/react": "18.2.8",
     "@types/react-dom": "18.2.4",
     "@types/refractor": "^3.0.2",
-    "@types/rss": "^0.0.30",
+    "@types/rss": "0.0.32",
     "@types/shelljs": "^0.8.9",
     "@types/uuid": "^8.3.1",
     "algoliasearch": "^4.10.3",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "10.4.20",
     "dotenv": "^16.0.1",
-    "eslint-config-next": "^13.5.1",
+    "esbuild-plugin-raw": "0.1.8",
+    "eslint-config-next": "15.0.3",
     "markdown-toc": "^1.2.0",
-    "next-sitemap": "^4.1.8",
+    "mdx-bundler": "10.0.3",
+    "next-sitemap": "4.2.3",
     "node-fetch": "^3.2.10",
-    "postcss": "^8.4.21",
+    "postcss": "8.4.49",
     "prettier": "^2.7.1",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "3.4.14",
     "tsx": "^3.8.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.5.0",
     "uuid": "^8.3.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "react": "18.2.0",
+      "react-dom": "18.2.0"
+    }
   }
 }
diff --git a/apps/docs/preinstall.js b/apps/docs/preinstall.js
index a6772b2309..e33bb62c43 100644
--- a/apps/docs/preinstall.js
+++ b/apps/docs/preinstall.js
@@ -26,7 +26,7 @@ fs.readFile("./package.json", "utf8", function (err, data) {
     // Check if the package is in the @nextui-org namespace and has "workspace:*" as its version
     if (pkg.startsWith("@nextui-org/") && packageJson.dependencies[pkg] === "workspace:*") {
       // Get the latest version of the package under the specified tag
-      const latestVersion = execSync(`npm show ${pkg}@dev-v2 version`, {encoding: "utf8"}).trim();
+      const latestVersion = execSync(`npm show ${pkg}@canary version`, {encoding: "utf8"}).trim();
 
       // Replace the version in the package.json file
       packageJson.dependencies[pkg] = latestVersion;
diff --git a/apps/docs/public/assets/fonts/FiraCode-Bold.woff2 b/apps/docs/public/assets/fonts/FiraCode-Bold.woff2
new file mode 100644
index 0000000000..349dc36a56
Binary files /dev/null and b/apps/docs/public/assets/fonts/FiraCode-Bold.woff2 differ
diff --git a/apps/docs/public/assets/fonts/FiraCode-Medium.woff2 b/apps/docs/public/assets/fonts/FiraCode-Medium.woff2
new file mode 100644
index 0000000000..7f1d770905
Binary files /dev/null and b/apps/docs/public/assets/fonts/FiraCode-Medium.woff2 differ
diff --git a/apps/docs/public/assets/fonts/FiraCode-Regular.woff2 b/apps/docs/public/assets/fonts/FiraCode-Regular.woff2
new file mode 100644
index 0000000000..f8b63fb018
Binary files /dev/null and b/apps/docs/public/assets/fonts/FiraCode-Regular.woff2 differ
diff --git a/apps/docs/public/assets/fonts/FiraCode-SemiBold.woff2 b/apps/docs/public/assets/fonts/FiraCode-SemiBold.woff2
new file mode 100644
index 0000000000..ccbefc8845
Binary files /dev/null and b/apps/docs/public/assets/fonts/FiraCode-SemiBold.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-Black.woff2 b/apps/docs/public/assets/fonts/Inter-Black.woff2
new file mode 100644
index 0000000000..18b35db75c
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-Black.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-Bold.woff2 b/apps/docs/public/assets/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000000..0f1b157633
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-Bold.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-ExtraBold.woff2 b/apps/docs/public/assets/fonts/Inter-ExtraBold.woff2
new file mode 100644
index 0000000000..b1133688a4
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-ExtraBold.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-ExtraLight.woff2 b/apps/docs/public/assets/fonts/Inter-ExtraLight.woff2
new file mode 100644
index 0000000000..1d77ae8d04
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-ExtraLight.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-Light.woff2 b/apps/docs/public/assets/fonts/Inter-Light.woff2
new file mode 100644
index 0000000000..dbe61437a1
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-Light.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-Medium.woff2 b/apps/docs/public/assets/fonts/Inter-Medium.woff2
new file mode 100644
index 0000000000..0fd2ee7370
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-Medium.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-Regular.woff2 b/apps/docs/public/assets/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000000..b8699af29b
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-Regular.woff2 differ
diff --git a/apps/docs/public/assets/fonts/Inter-SemiBold.woff2 b/apps/docs/public/assets/fonts/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..95c48b184e
Binary files /dev/null and b/apps/docs/public/assets/fonts/Inter-SemiBold.woff2 differ
diff --git a/apps/docs/public/blog/v2.6.0.jpg b/apps/docs/public/blog/v2.6.0.jpg
new file mode 100644
index 0000000000..758d312b48
Binary files /dev/null and b/apps/docs/public/blog/v2.6.0.jpg differ
diff --git a/apps/docs/public/blog/v2.6.0_2x.jpg b/apps/docs/public/blog/v2.6.0_2x.jpg
new file mode 100644
index 0000000000..2921839eaa
Binary files /dev/null and b/apps/docs/public/blog/v2.6.0_2x.jpg differ
diff --git a/apps/docs/public/images/nextuipro-section-background-light.webp b/apps/docs/public/images/nextuipro-section-background-light.webp
new file mode 100644
index 0000000000..7d9b6abf91
Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background-light.webp differ
diff --git a/apps/docs/public/images/nextuipro-section-background-light@mobile.webp b/apps/docs/public/images/nextuipro-section-background-light@mobile.webp
new file mode 100644
index 0000000000..9a56585d08
Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background-light@mobile.webp differ
diff --git a/apps/docs/public/images/nextuipro-section-background.webp b/apps/docs/public/images/nextuipro-section-background.webp
new file mode 100644
index 0000000000..b73836c219
Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background.webp differ
diff --git a/apps/docs/public/images/nextuipro-section-background@mobile.webp b/apps/docs/public/images/nextuipro-section-background@mobile.webp
new file mode 100644
index 0000000000..ad97230242
Binary files /dev/null and b/apps/docs/public/images/nextuipro-section-background@mobile.webp differ
diff --git a/apps/docs/public/sitemap-0.xml b/apps/docs/public/sitemap-0.xml
deleted file mode 100644
index 09725255fe..0000000000
--- a/apps/docs/public/sitemap-0.xml
+++ /dev/null
@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://nextui.org/feed.xml</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/figma</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/accordion</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/autocomplete</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/avatar</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/badge</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/breadcrumbs</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/button</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/card</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/checkbox-group</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/checkbox</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/chip</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/circular-progress</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/code</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/divider</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/dropdown</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/image</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/input</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/kbd</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/link</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/listbox</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/modal</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/navbar</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/pagination</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/popover</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/progress</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/radio-group</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/scroll-shadow</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/select</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/skeleton</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/slider</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/snippet</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/spacer</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/spinner</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/switch</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/table</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/tabs</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/textarea</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/tooltip</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/components/user</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/frameworks/astro</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/frameworks/nextjs</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/frameworks/remix</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/frameworks/vite</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/guide/design-principles</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/guide/installation</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/guide/introduction</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/guide/routing</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/guide/upgrade-to-v2</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/colors</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/create-theme</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/custom-variants</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/customize-theme</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/dark-mode</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/layout</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/override-styles</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/docs/customization/theme</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/blog/nextui-v2</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/blog/v2.1.0</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/blog/v2.2.0</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://nextui.org/blog</loc><lastmod>2024-02-02T20:24:45.107Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-</urlset>
\ No newline at end of file
diff --git a/apps/docs/scripts/update-github-info.ts b/apps/docs/scripts/update-github-info.ts
new file mode 100644
index 0000000000..042a18f76b
--- /dev/null
+++ b/apps/docs/scripts/update-github-info.ts
@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+import path from "path";
+import fs from 'fs';
+
+import prettier from 'prettier';
+import fetch from 'node-fetch';
+
+import { formatCompactNumber } from '../utils/number';
+
+const configFolder = "config";
+
+interface GithubInfo {
+  stars: {
+    raw: number;
+    formatted: string;
+  };
+  forks: number;
+  subscribers: number;
+  openIssues: number;
+}
+
+async function getGithubInfo() {
+  try {
+    const response = await fetch('https://api.github.com/repos/nextui-org/nextui');
+    const data = await response.json() as any;
+
+    const githubInfo: GithubInfo = {
+      stars: {
+        raw: data.stargazers_count,
+        formatted: formatCompactNumber(data.stargazers_count)
+      },
+      forks: data.forks_count,
+      subscribers: data.subscribers_count,
+      openIssues: data.open_issues_count,
+    };
+
+    // Format JSON with prettier
+    const formattedJson = prettier.format(JSON.stringify(githubInfo), {
+      parser: 'json',
+      printWidth: 80,
+      tabWidth: 2,
+      semi: true,
+    });
+
+    // Create config folder if it doesn't exist
+    if (!fs.existsSync(configFolder)) {
+      fs.mkdirSync(configFolder);
+    }
+
+    // Write to github-info.json
+    const outPath = path.join(process.cwd(), configFolder, 'github-info.json');
+
+    fs.writeFileSync(outPath, formattedJson);
+
+    console.log("[NextUI] GitHub info updated successfully ✅");
+  } catch (error) {
+    console.error("[ERROR 🔥]:", error);
+  }
+}
+
+getGithubInfo();
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 21033242d3..7c342d3527 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -1,11 +1,11 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @import 'prism.css';
 @import 'nprogress.css';
 @import 'ads.css';
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html {
   font-size: 16px;
   padding: 0px !important;
@@ -68,17 +68,17 @@ z-index: 0;
     --code-highlighted-word3-bg-active: 116 223 162;
     --code-highlighted-word3-text: 209 244 224;
     /* sandpack + prism */
-    --code-string: 152 195 121;
+    --code-string: 83, 224, 192;
     --code-class: 145 180 213;
-    --code-punctuation: 220 220 220;
-    --code-number: 229 192 123;
+    --code-punctuation: 167 172 202;
+    --code-number: 83, 224, 192;
     --code-added: 116 223 162;
     --code-line-number: 212 212 216;
     --code-faded-line: 113 113 122;
     --code-comment: 113 113 122;
     --code-keyword: 198 120 221;
     --code-function: 97 175 239;
-    --code-tag: 224 108 117;
+    --code-tag: 83, 224, 192;
     --code-attr-name: 145 180 213;
     --code-language-javascript: 145 180 213;
   }
@@ -96,3 +96,63 @@ z-index: 0;
     content: counter(step);
   }
 }
+
+pre details[open]>summary>span:first-child::before {
+  transform: rotate(90deg);
+}
+
+pre details[open]>summary span.custom-folder {
+  display: none;
+}
+
+pre details:not([open])>summary span.ellipsis-token::after {
+  content: '...';
+}
+
+pre details:not([open])>summary span.copy-token {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+pre details[open]>summary span.copy-token {
+  display: none;
+}
+
+pre details:not([open]) {
+  display: inline;
+}
+
+pre details:not([open])>summary span.empty-token {
+  display: none;
+}
+
+pre details:not([open])+div.token-line {
+  display: none;
+}
+
+pre summary {
+  display: inline;
+  position: relative;
+  list-style: none;
+}
+
+pre summary>span:first-child::before {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  height: 21px;
+  margin-left: -16px;
+  margin-top: 1px;
+  content: "▶";
+  font-size: 12px;
+  font-style: normal;
+  transition: transform 100ms;
+  color: #999;
+}
\ No newline at end of file
diff --git a/apps/docs/styles/sandpack.css b/apps/docs/styles/sandpack.css
index 56d23993e9..7c523c2bbe 100644
--- a/apps/docs/styles/sandpack.css
+++ b/apps/docs/styles/sandpack.css
@@ -26,6 +26,22 @@
   max-height: 100%;
   overflow: hidden;
 }
+
+.sp-editor,
+.sp-editor-viewer {
+  height: auto !important;
+}
+
+.sp-editor {
+  & .token-line {
+    padding: 0px 24px;
+  }
+}
+
+.sp-code-viewer {
+  padding: 6px;
+}
+
 .cm-scroller {
   overflow: hidden;
   max-height: 600px;
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index d3a3b8df21..8636036624 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -62,8 +62,8 @@ module.exports = {
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+        mono: ["var(--font-mono)", ...defaultTheme.fontFamily.mono],
         serif: defaultTheme.fontFamily.serif,
-        mono: defaultTheme.fontFamily.mono,
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
@@ -100,7 +100,7 @@ module.exports = {
             },
             "h3 a": {
               fontSize: "1.25rem !important",
-              fontWeight: theme("fontWeight.medium"),
+              fontWeight: theme("fontWeight.bold"),
             },
             "h2 small, h3 small, h4 small": {
               fontFamily: theme("fontFamily.mono").join(", "),
@@ -119,6 +119,9 @@ module.exports = {
               fontSize: theme("fontSize.sm")[0],
               ...theme("fontSize.sm")[1],
             },
+            "h4 a": {
+              fontWeight: theme("fontWeight.bold"),
+            },
             "h2, h3, h4": {
               "scroll-margin-top": "var(--scroll-mt)",
             },
@@ -147,8 +150,8 @@ module.exports = {
               fontWeight: "inherit",
             },
             strong: {
-              color: "hsl(var(--nextui-strong))",
-              fontWeight: theme("fontWeight.semibold"),
+              color: "hsl(var(--nextui-foreground))",
+              fontWeight: theme("fontWeight.bold"),
             },
             "a strong": {
               color: "inherit",
@@ -168,7 +171,7 @@ module.exports = {
               display: "flex",
               fontSize: theme("fontSize.sm")[0],
               backgroundColor: "transparent",
-              fontWeight: theme("fontWeight.light"),
+              fontWeight: theme("fontWeight.medium"),
               padding: 0,
               margin: 0,
             },
@@ -316,6 +319,14 @@ module.exports = {
             backgroundPosition: "-200% center",
           },
         },
+        "scrolling-banner": {
+          from: {transform: "translateX(0)"},
+          to: {transform: "translateX(calc(-50% - var(--gap)/2))"},
+        },
+        "scrolling-banner-vertical": {
+          from: {transform: "translateY(0)"},
+          to: {transform: "translateY(calc(-50% - var(--gap)/2))"},
+        },
       },
       animation: {
         heartbeat: "heartbeat 1s ease-in-out infinite",
@@ -323,6 +334,11 @@ module.exports = {
         expand: "expand 6s ease-out infinite both",
         "expand-opacity": "expand-opacity 6s linear infinite both",
         "text-gradient": "text-gradient 4s linear 0s infinite normal forwards running",
+        "scrolling-banner": "scrolling-banner var(--duration) linear infinite",
+        "scrolling-banner-vertical": "scrolling-banner-vertical var(--duration) linear infinite",
+      },
+      maxWidth: {
+        "8xl": "90rem", // 1440px
       },
     },
   },
@@ -332,7 +348,7 @@ module.exports = {
       themes: {
         light: {
           colors: {
-            "code-background": "#363449",
+            "code-background": "#262b36",
             strong: "#ff4ecd",
             "code-mdx": "#ff4ecd",
           },
@@ -340,7 +356,7 @@ module.exports = {
         dark: {
           colors: {
             strong: "#06B7DB",
-            "code-background": "#0D0B0B",
+            "code-background": "#111113",
             "code-mdx": "#06B7DB",
           },
         },
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index 6b641d460b..51922b7e3b 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -3,9 +3,15 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"],
-      "tailwind-variants": ["./node_modules/tailwind-variants"],
-      "contentlayer/generated": ["./.contentlayer/generated"]
+      "@/*": [
+        "./*"
+      ],
+      "tailwind-variants": [
+        "./node_modules/tailwind-variants"
+      ],
+      "contentlayer2/generated": [
+        "./.contentlayer/generated"
+      ]
     },
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
@@ -23,8 +29,14 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated"
+    ".contentlayer/generated",
+    "global.d.ts"
   ],
-  "exclude": ["node_modules", "next-redirect.js"]
+  "exclude": [
+    "node_modules",
+    "next-redirect.js"
+  ]
 }
diff --git a/apps/docs/utils/featurebase.ts b/apps/docs/utils/featurebase.ts
deleted file mode 100644
index 631079532e..0000000000
--- a/apps/docs/utils/featurebase.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const openFeedbackWidget = () => {
-  window.postMessage({
-    target: "FeaturebaseWidget",
-    data: {action: "openFeedbackWidget"},
-  });
-};
diff --git a/apps/docs/utils/get-sponsors.ts b/apps/docs/utils/get-sponsors.ts
index 06723ed2ea..046fa5cd3b 100644
--- a/apps/docs/utils/get-sponsors.ts
+++ b/apps/docs/utils/get-sponsors.ts
@@ -1,4 +1,4 @@
-import {uniqBy} from "lodash";
+import {uniqBy} from "@nextui-org/shared-utils";
 import fetch from "node-fetch";
 
 import {__PROD__} from "./env";
diff --git a/apps/docs/utils/number.ts b/apps/docs/utils/number.ts
new file mode 100644
index 0000000000..c9e680d489
--- /dev/null
+++ b/apps/docs/utils/number.ts
@@ -0,0 +1,25 @@
+/**
+ * Formats a number into a shortened string representation (e.g., 1K, 1.5M, 2B)
+ * @param number The number to format
+ * @param decimals Number of decimal places to show (default: 1)
+ * @returns Formatted string
+ */
+export function formatCompactNumber(number: number, decimals: number = 1): string {
+  if (number === 0) return "0";
+
+  const absNumber = Math.abs(number);
+  const sign = number < 0 ? "-" : "";
+
+  if (absNumber < 1000) {
+    return sign + absNumber.toString();
+  }
+
+  const suffixes = ["", "K", "M", "B", "T"];
+  const exponent = Math.min(Math.floor(Math.log10(absNumber) / 3), suffixes.length - 1);
+  const shortNumber = (absNumber / Math.pow(1000, exponent)).toFixed(decimals);
+
+  // Remove trailing zeros after decimal point
+  const formattedNumber = parseFloat(shortNumber).toString();
+
+  return sign + formattedNumber + suffixes[exponent];
+}
diff --git a/jest.config.js b/jest.config.js
index 4c8ce18dd8..225770eaeb 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,11 +18,6 @@ module.exports = {
     ],
   },
   transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
-  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect", "./scripts/setup-test.ts"],
-  globals: {
-    "ts-jest": {
-      tsconfig: "tsconfig.json",
-    },
-  },
+  setupFilesAfterEnv: ["@testing-library/jest-dom", "./scripts/setup-test.ts"],
   watchPlugins: ["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
 };
diff --git a/package.json b/package.json
index 4bd51aaf57..1ccb570fec 100644
--- a/package.json
+++ b/package.json
@@ -29,9 +29,9 @@
     "typecheck": "turbo typecheck",
     "lint": "pnpm lint:pkg && pnpm lint:docs",
     "lint:pkg": "eslint -c .eslintrc.json ./packages/**/*.{ts,tsx}",
-    "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}",
+    "lint:docs": "eslint -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}",
     "lint:fix": "eslint --fix -c .eslintrc.json ./packages/**/*.{ts,tsx}",
-    "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx}",
+    "lint:docs-fix": "eslint --fix -c .eslintrc.json ./apps/docs/**/*.{ts,tsx,js,jsx}",
     "check:rap": "tsx scripts/check-rap-updates.ts",
     "fix:rap": "tsx scripts/fix-rap.ts",
     "format:check": "prettier --check packages/**/**/src --cache",
@@ -46,6 +46,8 @@
     "create:cmp": "plop component",
     "create:pkg": "plop package",
     "create:hook": "plop hook",
+    "changeset:canary": "changeset pre enter canary",
+    "changeset:beta": "changeset pre enter beta",
     "version": "changeset version",
     "release": "changeset publish",
     "version:canary": "changeset version --snapshot canary",
@@ -60,30 +62,28 @@
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@changesets/changelog-github": "0.4.6",
-    "@changesets/cli": "2.24.1",
-    "@changesets/get-release-plan": "3.0.12",
-    "@changesets/types": "5.1.0",
+    "@changesets/cli": "2.27.10",
+    "@changesets/changelog-github": "0.5.0",
+    "@changesets/get-release-plan": "4.0.5",
+    "@changesets/get-github-info": "0.6.0",
+    "@changesets/types": "6.0.0",
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
     "@react-bootstrap/babel-preset": "^2.1.0",
-    "@react-types/link": "^3.4.4",
-    "@react-types/shared": "3.23.1",
-    "@storybook/react": "^7.4.6",
-    "@swc-node/jest": "^1.5.2",
+    "@react-types/link": "3.5.7",
+    "@react-types/shared": "3.25.0",
+    "@storybook/react": "^8.4.5",
     "@swc/core": "^1.3.35",
     "@swc/jest": "^0.2.24",
-    "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
     "@types/node": "^15.12.4",
     "@types/react": "^18.0.1",
     "@types/react-dom": "^18.0.0",
     "@types/shelljs": "^0.8.9",
-    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "chalk": "^4.1.2",
@@ -99,7 +99,7 @@
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-jest": "^24.7.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -115,9 +115,9 @@
     "gray-matter": "^4.0.3",
     "husky": "^8.0.1",
     "intl-messageformat": "^10.1.0",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
-    "jest-watch-typeahead": "1.1.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-watch-typeahead": "2.2.2",
     "lint-staged": "^13.0.3",
     "npm-check-updates": "^16.10.18",
     "npm-run-all": "^4.1.5",
@@ -142,8 +142,9 @@
   },
   "pnpm": {
     "overrides": {
-      "react": "^18.2.0",
-      "react-dom": "^18.2.0"
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
+      "@changesets/get-github-info": "0.6.0"
     }
   },
   "engines": {
diff --git a/packages/components/accordion/CHANGELOG.md b/packages/components/accordion/CHANGELOG.md
index 4f44a353a2..a80b0bfde5 100644
--- a/packages/components/accordion/CHANGELOG.md
+++ b/packages/components/accordion/CHANGELOG.md
@@ -1,5 +1,256 @@
 # @nextui-org/accordion
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/divider@2.2.1
+  - @nextui-org/use-aria-accordion@2.2.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-accordion@2.2.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/divider@2.2.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/divider@2.1.0-beta.9
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/use-aria-accordion@2.1.0-beta.8
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/divider@2.1.0-beta.8
+  - @nextui-org/use-aria-accordion@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.8
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/use-aria-accordion@2.1.0-beta.6
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/divider@2.1.0-beta.6
+  - @nextui-org/use-aria-accordion@2.1.0-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/divider@2.1.0-beta.5
+  - @nextui-org/use-aria-accordion@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/divider@2.1.0-beta.4
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/divider@2.1.0-beta.3
+  - @nextui-org/use-aria-accordion@2.1.0-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/divider@2.1.0-beta.2
+  - @nextui-org/use-aria-accordion@2.1.0-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/divider@2.1.0-beta.1
+  - @nextui-org/use-aria-accordion@2.1.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/divider@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-accordion@2.1.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.40
 
 ### Patch Changes
diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx
index ac63c95cbe..8a4d78df7e 100644
--- a/packages/components/accordion/__tests__/accordion.test.tsx
+++ b/packages/components/accordion/__tests__/accordion.test.tsx
@@ -30,7 +30,7 @@ describe("Accordion", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {
@@ -121,9 +121,7 @@ describe("Accordion", () => {
 
     expect(button).toHaveAttribute("aria-expanded", "false");
 
-    await act(async () => {
-      await user.click(button);
-    });
+    await user.click(button);
 
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
@@ -163,18 +161,12 @@ describe("Accordion", () => {
     const second = wrapper.getByTestId("item-2");
     const secondButton = second.querySelector("button") as HTMLElement;
 
-    act(() => {
-      focus(firstButton);
-    });
-
-    await act(async () => {
-      await user.keyboard("[ArrowDown]");
-    });
+    await focus(firstButton);
+    await user.keyboard("[ArrowDown]");
     expect(secondButton).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("[ArrowUp]");
-    });
+    await user.keyboard("[ArrowUp]");
+
     expect(firstButton).toHaveFocus();
   });
 
@@ -200,14 +192,10 @@ describe("Accordion", () => {
       focus(secondButton);
     });
 
-    await act(async () => {
-      await user.keyboard("[Home]");
-    });
+    await user.keyboard("[Home]");
     expect(firstButton).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("[End]");
-    });
+    await user.keyboard("[End]");
     expect(secondButton).toHaveFocus();
   });
 
@@ -233,9 +221,7 @@ describe("Accordion", () => {
       focus(firstButton);
     });
 
-    await act(async () => {
-      await user.keyboard("[Tab]");
-    });
+    await user.keyboard("[Tab]");
     expect(secondButton).toHaveFocus();
   });
 
@@ -276,10 +262,7 @@ describe("Accordion", () => {
 
     expect(button).toHaveAttribute("aria-expanded", "false");
 
-    await act(async () => {
-      await user.click(button);
-    });
-
+    await user.click(button);
     expect(button).toHaveAttribute("aria-expanded", "true");
   });
 
@@ -300,17 +283,11 @@ describe("Accordion", () => {
 
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
 
-    await act(async () => {
-      await user.click(button);
-    });
-
+    await user.click(button);
     const item2 = wrapper.getByTestId("item-2");
     const button2 = item2.querySelector("button") as HTMLElement;
 
-    await act(async () => {
-      await user.click(button2);
-    });
-
+    await user.click(button2);
     expect(item1.querySelector("[role='region']")).toBeInTheDocument();
     expect(item2.querySelector("[role='region']")).toBeInTheDocument();
   });
@@ -331,29 +308,22 @@ describe("Accordion", () => {
 
     const firstButton = await wrapper.getByRole("button", {name: "Accordion Item 1"});
 
-    await act(() => {
+    act(() => {
       focus(firstButton);
     });
-    await act(async () => {
-      await user.keyboard("[Tab]");
-    });
+
+    await user.keyboard("[Tab]");
     expect(input).toHaveFocus();
 
-    await act(async () => {
-      await user.keyboard("aaa");
-    });
+    await user.keyboard("aaa");
     expect(input).toHaveValue("aaa");
 
-    await act(async () => {
-      await user.keyboard("[ArrowLeft]");
-      await user.keyboard("b");
-    });
+    await user.keyboard("[ArrowLeft]");
+    await user.keyboard("b");
     expect(input).toHaveValue("aaba");
 
-    await act(async () => {
-      await user.keyboard("[ArrowRight]");
-      await user.keyboard("c");
-    });
+    await user.keyboard("[ArrowRight]");
+    await user.keyboard("c");
     expect(input).toHaveValue("aabac");
   });
 
diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
index 4a16c9f627..2fe3c1bd18 100644
--- a/packages/components/accordion/package.json
+++ b/packages/components/accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.40",
+  "version": "2.2.1",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",
@@ -40,11 +40,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",
@@ -54,13 +54,14 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/tree": "3.8.1",
-    "@react-aria/button": "3.9.5",
-    "@react-types/accordion": "3.0.0-alpha.21",
-    "@react-types/shared": "3.23.1"
+    "@nextui-org/dom-animation": "workspace:*",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/tree": "3.8.5",
+    "@react-aria/button": "3.10.1",
+    "@react-types/accordion": "3.0.0-alpha.24",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -69,7 +70,7 @@
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/input": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/accordion/src/accordion-item.tsx b/packages/components/accordion/src/accordion-item.tsx
index ee3fc18e19..fcdea9b5e3 100644
--- a/packages/components/accordion/src/accordion-item.tsx
+++ b/packages/components/accordion/src/accordion-item.tsx
@@ -3,13 +3,15 @@ import type {Variants} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 import {useMemo, ReactNode} from "react";
 import {ChevronIcon} from "@nextui-org/shared-icons";
-import {AnimatePresence, LazyMotion, domAnimation, m, useWillChange} from "framer-motion";
+import {AnimatePresence, LazyMotion, m, useWillChange} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 
 import {UseAccordionItemProps, useAccordionItem} from "./use-accordion-item";
 
 export interface AccordionItemProps extends UseAccordionItemProps {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const AccordionItem = forwardRef<"button", AccordionItemProps>((props, ref) => {
   const {
     Component,
diff --git a/packages/components/alert/CHANGELOG.md b/packages/components/alert/CHANGELOG.md
new file mode 100644
index 0000000000..aaa15d1cea
--- /dev/null
+++ b/packages/components/alert/CHANGELOG.md
@@ -0,0 +1,211 @@
+# @nextui-org/alert
+
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/button@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/button@2.1.0-beta.10
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4073](https://github.com/nextui-org/nextui/pull/4073) [`70dc75983`](https://github.com/nextui-org/nextui/commit/70dc7598388022fca04255c3c1623468a38a3803) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert compoentn styles improved
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.4
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4071](https://github.com/nextui-org/nextui/pull/4071) [`31349c178`](https://github.com/nextui-org/nextui/commit/31349c178b9b2bd0be9856bc09126a37be68901a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert styles improved
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.4
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4054](https://github.com/nextui-org/nextui/pull/4054) [`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert design improved
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/button@2.1.0-beta.4
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3982](https://github.com/nextui-org/nextui/pull/3982) [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - introduced Alert component (#2250)
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
diff --git a/packages/components/alert/README.md b/packages/components/alert/README.md
new file mode 100644
index 0000000000..071ac6dd26
--- /dev/null
+++ b/packages/components/alert/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/alert
+
+Alerts are temporary notifications that provide concise feedback about an action or event.
+
+Please refer to the [documentation](https://nextui.org/docs/components/alert) for more information.
+
+## Installation
+
+```sh
+yarn add @nextui-org/alert
+# or
+npm i @nextui-org/alert
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx
new file mode 100644
index 0000000000..dfa3074c18
--- /dev/null
+++ b/packages/components/alert/__tests__/alert.test.tsx
@@ -0,0 +1,85 @@
+import * as React from "react";
+import {act, render} from "@testing-library/react";
+
+import {Alert} from "../src";
+
+const title = "Testing Title";
+const description = "Testing Description";
+
+describe("Alert", () => {
+  it("should render correctly", () => {
+    const wrapper = render(<Alert description={description} title={title} />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    render(<Alert ref={ref} description={description} title={title} />);
+
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should display title and description when component is rendered", () => {
+    const wrapper = render(<Alert description={description} title={title} />);
+
+    const titleElement = wrapper.getByText(title);
+    const descriptionElement = wrapper.getByText(description);
+
+    expect(titleElement).toContainHTML(title);
+    expect(descriptionElement).toContainHTML(description);
+  });
+
+  it("should show close button when is Closable", () => {
+    const {getByRole} = render(<Alert isClosable description={description} title={title} />);
+
+    const closeButton = getByRole("button");
+
+    expect(closeButton).toBeVisible();
+  });
+
+  it("should show close button when onClose is passed", () => {
+    const onClose = jest.fn();
+
+    const {getByRole} = render(<Alert description={description} title={title} onClose={onClose} />);
+
+    const closeButton = getByRole("button");
+
+    expect(closeButton).toBeVisible();
+  });
+
+  it("should not show close button when not isClosable and onClose is not passed", () => {
+    const wrapper = render(<Alert description={description} title={title} />);
+
+    const closeButton = wrapper.queryByRole("button");
+
+    expect(closeButton).toBeNull();
+  });
+
+  it("should call the onClose function when clicking on close button", () => {
+    const onClose = jest.fn();
+
+    const wrapper = render(<Alert description={description} title={title} onClose={onClose} />);
+
+    const closeButton = wrapper.getByRole("button");
+
+    act(() => {
+      closeButton.click();
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should close the alert when clicking on close button", () => {
+    const wrapper = render(<Alert isClosable description={description} title={title} />);
+
+    const closeButton = wrapper.getByRole("button");
+
+    act(() => {
+      closeButton.click();
+    });
+
+    expect(wrapper.container).toBeEmptyDOMElement();
+  });
+});
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
new file mode 100644
index 0000000000..1c72234cdd
--- /dev/null
+++ b/packages/components/alert/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@nextui-org/alert",
+  "version": "2.2.1",
+  "description": "Alerts are temporary notifications that provide concise feedback about an action or event.",
+  "keywords": [
+    "alert"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "contributors": [
+    "Abhinav Agarwal <abhinavagrawl700@gmail.com>",
+    "WK Wong <wingkwong.code@gmail.com>"
+  ],
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/alert"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
+  },
+  "dependencies": {
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@react-stately/utils": "3.10.4",
+    "@react-aria/utils": "3.26.0",
+    "@nextui-org/button": "workspace:*"
+  },
+  "devDependencies": {
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
\ No newline at end of file
diff --git a/packages/components/alert/src/alert.tsx b/packages/components/alert/src/alert.tsx
new file mode 100644
index 0000000000..cc8c9a691d
--- /dev/null
+++ b/packages/components/alert/src/alert.tsx
@@ -0,0 +1,88 @@
+import type {ButtonProps} from "@nextui-org/button";
+
+import {forwardRef} from "@nextui-org/system";
+import {
+  CloseIcon,
+  DangerIcon,
+  InfoCircleIcon,
+  SuccessIcon,
+  WarningIcon,
+} from "@nextui-org/shared-icons";
+import {isEmpty} from "@nextui-org/shared-utils";
+import {Button} from "@nextui-org/button";
+import {cloneElement, isValidElement} from "react";
+
+import {useAlert, UseAlertProps} from "./use-alert";
+
+const iconMap = {
+  primary: InfoCircleIcon,
+  secondary: InfoCircleIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+} as const;
+
+export type AlertColor = keyof typeof iconMap;
+
+export interface AlertProps extends Omit<UseAlertProps, "hasDescription"> {}
+
+const Alert = forwardRef<"div", AlertProps>((props, ref) => {
+  const {
+    title,
+    icon,
+    children,
+    description,
+    endContent,
+    startContent,
+    isClosable,
+    domRef,
+    handleClose,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    getCloseButtonProps,
+    color,
+    isVisible,
+    onClose,
+    getAlertIconProps,
+    getIconWrapperProps,
+  } = useAlert({...props, ref});
+
+  if (!isVisible) return null;
+
+  const customIcon = icon && isValidElement(icon) ? cloneElement(icon, getAlertIconProps()) : null;
+
+  const IconComponent = iconMap[color] || iconMap.primary;
+
+  return (
+    <div ref={domRef} role="alert" {...getBaseProps()}>
+      {startContent}
+      <div {...getIconWrapperProps()}>
+        {customIcon || <IconComponent {...getAlertIconProps()} />}
+      </div>
+      <div {...getMainWrapperProps()}>
+        {title && <div {...getTitleProps()}>{title}</div>}
+        {!isEmpty(description) && <div {...getDescriptionProps()}>{description}</div>}
+        {children}
+      </div>
+      {endContent}
+      {(isClosable || onClose) && (
+        <Button
+          isIconOnly
+          aria-label="Close"
+          radius="full"
+          variant="light"
+          onClick={handleClose}
+          {...(getCloseButtonProps() as ButtonProps)}
+        >
+          <CloseIcon height={20} width={20} />
+        </Button>
+      )}
+    </div>
+  );
+});
+
+Alert.displayName = "NextUI.Alert";
+
+export default Alert;
diff --git a/packages/components/alert/src/index.ts b/packages/components/alert/src/index.ts
new file mode 100644
index 0000000000..e1d0ea8cf6
--- /dev/null
+++ b/packages/components/alert/src/index.ts
@@ -0,0 +1,10 @@
+import Alert from "./alert";
+
+// export types
+export type {AlertProps} from "./alert";
+
+// export hooks
+export {useAlert} from "./use-alert";
+
+// export component
+export {Alert};
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
new file mode 100644
index 0000000000..61e739cd7a
--- /dev/null
+++ b/packages/components/alert/src/use-alert.ts
@@ -0,0 +1,209 @@
+import type {ButtonProps} from "@nextui-org/button";
+
+import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system";
+import {AlertSlots, SlotsToClasses} from "@nextui-org/theme";
+import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
+import {AlertVariantProps} from "@nextui-org/theme/src/components/alert";
+import {ReactNode, useCallback, useMemo} from "react";
+import {mergeProps} from "@react-aria/utils";
+import {alert} from "@nextui-org/theme";
+import {useControlledState} from "@react-stately/utils";
+import {dataAttr, isEmpty, objectToDeps} from "@nextui-org/shared-utils";
+
+interface Props extends HTMLNextUIProps<"div"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLDivElement | null>;
+  /**
+   * title of the alert message
+   */
+  title?: string;
+  /**
+   * Main body of the alert message
+   */
+  description: ReactNode;
+  /**
+   * Icon to be displayed in the alert - overrides the default icon
+   */
+  icon?: ReactNode;
+  /**
+   * Content to be displayed in the end side of the alert
+   */
+  endContent?: ReactNode;
+  /**
+   * Content to be displayed in the start side of the alert
+   */
+  startContent?: ReactNode;
+  /**
+   * Whether the alert is visible.
+   * @default false
+   */
+  isVisible?: boolean;
+  /**
+   * Whether the alert should be visible by default.
+   * @default false
+   */
+  isDefaultVisible?: boolean;
+  /**
+   * The event handler for the alert visibility state.
+   * @param isVisible boolean
+   * @returns void
+   */
+  onVisibleChange?: (isVisible: boolean) => void;
+  /**
+   *  whether the alert can be closed by user
+   */
+  isClosable?: boolean;
+  /**
+   * Props for the close button
+   */
+  closeButtonProps?: Omit<ButtonProps, "children">;
+  /**
+   * function which is called when close button is clicked
+   */
+  onClose?: () => void;
+  /**
+   * Classname or List of classes to change the classNames of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <Alert classNames={{
+   *    base:"base-classes",
+   *    mainWrapper: "mainWrapper-classes"
+   *    description: "description-classes"
+   *    title: "title-classes"
+   *    closeButton: "closeButton-classes"
+   *    closeIcon: "closeIcon-classes"
+   * }} />
+   * ```
+   */
+  classNames?: SlotsToClasses<AlertSlots>;
+}
+
+export type UseAlertProps = Props & AlertVariantProps;
+
+export function useAlert(originalProps: UseAlertProps) {
+  const [props, variantProps] = mapPropsVariants(originalProps, alert.variantKeys);
+
+  const {
+    as,
+    title,
+    children,
+    description,
+    onClose,
+    isClosable,
+    ref,
+    icon,
+    startContent,
+    endContent,
+    isVisible: isVisibleProp,
+    isDefaultVisible,
+    onVisibleChange,
+    closeButtonProps = {
+      size: "sm",
+    },
+    classNames,
+    ...otherProps
+  } = props;
+
+  const [isVisible, setIsVisible] = useControlledState<boolean>(
+    isVisibleProp,
+    isDefaultVisible ?? true,
+    onVisibleChange,
+  );
+
+  const Component = as || "div";
+  const shouldFilterDOMProps = typeof Component === "string";
+
+  const domRef = useDOMRef(ref);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+  }, [setIsVisible, onClose]);
+
+  const slots = useMemo(
+    () => alert({hasDescription: !isEmpty(description), ...variantProps}),
+    [description, objectToDeps(variantProps)],
+  );
+
+  const getBaseProps = useCallback<PropGetter>(() => {
+    return {
+      "data-visible": dataAttr(isVisible),
+      "data-closeable": dataAttr(isClosable),
+      "data-has-title": dataAttr(!isEmpty(title)),
+      "data-has-description": dataAttr(!isEmpty(description)),
+      ...mergeProps(
+        filterDOMProps(otherProps, {
+          enabled: shouldFilterDOMProps,
+        }),
+        filterDOMProps(props),
+      ),
+      className: slots.base({class: classNames?.base}),
+    };
+  }, [slots, classNames?.base]);
+
+  const getMainWrapperProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.mainWrapper({class: classNames?.mainWrapper}),
+    };
+  }, [slots, classNames?.mainWrapper]);
+
+  const getDescriptionProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.description({class: classNames?.description}),
+    };
+  }, [slots, classNames?.description]);
+
+  const getTitleProps = useCallback<PropGetter>(() => {
+    return {
+      className: slots.title({class: classNames?.title}),
+    };
+  }, [slots, classNames?.title]);
+
+  const getCloseButtonProps = useCallback<PropGetter>(
+    () => ({
+      ...closeButtonProps,
+      className: slots.closeButton({class: classNames?.closeButton}),
+    }),
+    [slots, classNames?.closeButton],
+  );
+
+  const getAlertIconProps = useCallback<PropGetter>(
+    () => ({
+      className: slots.alertIcon({class: classNames?.alertIcon}),
+    }),
+    [slots, classNames?.alertIcon],
+  );
+
+  const getIconWrapperProps = useCallback<PropGetter>(
+    () => ({
+      className: slots.iconWrapper({class: classNames?.iconWrapper}),
+    }),
+    [slots, classNames?.iconWrapper],
+  );
+
+  return {
+    title,
+    icon,
+    children,
+    description,
+    isClosable,
+    domRef,
+    endContent,
+    startContent,
+    getBaseProps,
+    getMainWrapperProps,
+    getDescriptionProps,
+    getTitleProps,
+    color: variantProps["color"],
+    getCloseButtonProps,
+    handleClose,
+    isVisible,
+    onClose,
+    getAlertIconProps,
+    getIconWrapperProps,
+  };
+}
diff --git a/packages/components/alert/stories/alert.stories.tsx b/packages/components/alert/stories/alert.stories.tsx
new file mode 100644
index 0000000000..cbdac9aa6b
--- /dev/null
+++ b/packages/components/alert/stories/alert.stories.tsx
@@ -0,0 +1,296 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+import {alert, cn} from "@nextui-org/theme";
+import {Button} from "@nextui-org/button";
+
+import {Alert, AlertProps} from "../src";
+
+export default {
+  title: "Components/Alert",
+  component: Alert,
+  argTypes: {
+    color: {
+      control: {
+        type: "select",
+      },
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
+    },
+    variant: {
+      control: {
+        type: "select",
+      },
+      options: ["solid", "flat", "bordered", "faded"],
+    },
+    radius: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "sm", "md", "lg", "full"],
+    },
+    isClosable: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center w-screen h-screen">
+        <div className="w-full max-w-[542px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+} as Meta<typeof Alert>;
+
+const defaultProps = {
+  ...alert.defaultVariants,
+  title: "This is an alert with a title",
+};
+
+const Template = (args) => <Alert {...args} />;
+
+const ColorTemplate = (args) => {
+  return (
+    <div className="flex flex-col w-full">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <div key={color} className="w-full flex items-center my-3">
+          <Alert {...args} color={color} title={`This is a ${color} alert`} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const RadiusTemplate = (args) => {
+  return (
+    <div className="flex flex-col w-full">
+      {["none", "sm", "md", "lg", "full"].map((radius) => (
+        <div key={radius} className="w-full flex items-center my-3">
+          <Alert {...args} radius={radius} title={`This is a ${radius} radius alert`} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const VariantTemplate = (args) => {
+  return (
+    <div className="flex flex-col w-full">
+      {["solid", "flat", "bordered", "faded"].map((variant) => (
+        <div key={variant} className="w-full flex items-center my-3">
+          <Alert {...args} isClosable title={`This is a ${variant} alert`} variant={variant} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const CloseableTemplate = (args) => {
+  const [isVisible, setIsVisible] = React.useState(true);
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      {isVisible ? (
+        <Alert {...args} isClosable isVisible={isVisible} onClose={() => setIsVisible(false)} />
+      ) : (
+        <Button className="max-w-[200px]" variant="bordered" onPress={() => setIsVisible(true)}>
+          Re-open Alert
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const WithEndContentTemplate = (args) => {
+  return (
+    <Alert
+      {...args}
+      color="warning"
+      description="Upgrade to a paid plan to continue"
+      endContent={
+        <Button color="warning" size="sm" variant="flat">
+          Upgrade
+        </Button>
+      }
+      title="You have no credits left"
+      variant="faded"
+    />
+  );
+};
+
+const CustomAlert = React.forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {title, children, variant = "faded", color = "secondary", className, classNames, ...props},
+    ref,
+  ) => {
+    const colorClass = React.useMemo(() => {
+      switch (color) {
+        case "default":
+          return "before:bg-default-300";
+        case "primary":
+          return "before:bg-primary";
+        case "secondary":
+          return "before:bg-secondary";
+        case "success":
+          return "before:bg-success";
+        case "warning":
+          return "before:bg-warning";
+        case "danger":
+          return "before:bg-danger";
+        default:
+          return `before:bg-default-200`;
+      }
+    }, []);
+
+    return (
+      <Alert
+        ref={ref}
+        classNames={{
+          ...classNames,
+          base: cn(
+            [
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1 border-default-200 dark:border-default-100",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              colorClass,
+            ],
+            classNames?.base,
+            className,
+          ),
+          mainWrapper: cn("pt-1", classNames?.mainWrapper),
+          iconWrapper: cn("dark:bg-transparent", classNames?.iconWrapper),
+        }}
+        color={color}
+        title={title}
+        variant={variant}
+        {...props}
+      >
+        <div className="flex items-center gap-1 mt-3">{children}</div>
+      </Alert>
+    );
+  },
+);
+
+CustomAlert.displayName = "CustomAlert";
+
+const CustomStylesTemplate = (args) => {
+  const colors = ["default", "primary", "secondary", "success", "warning", "danger"];
+
+  return (
+    <div className="flex flex-col w-full gap-y-6">
+      {colors.map((color) => (
+        <CustomAlert
+          {...args}
+          key={color}
+          color={color}
+          title="The documents you requested are ready to be viewed"
+        >
+          <div className="flex items-center gap-1 mt-3">
+            <Button
+              className="bg-background text-default-700 font-medium border-1 shadow-small"
+              size="sm"
+              variant="bordered"
+            >
+              View documents
+            </Button>
+            <Button
+              className="text-default-500 font-medium underline underline-offset-4"
+              size="sm"
+              variant="light"
+            >
+              Maybe later
+            </Button>
+          </div>
+        </CustomAlert>
+      ))}
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithDescription = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    description: "This is an alert with a description",
+  },
+};
+
+export const Color = {
+  render: ColorTemplate,
+  args: {
+    ...defaultProps,
+    variant: "faded",
+  },
+};
+
+export const Variant = {
+  render: VariantTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithIcon = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    title: "This is an alert with a custom icon",
+    icon: (
+      <svg height={24} viewBox="0 0 24 24" width={24}>
+        <g
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit={10}
+          strokeWidth={1.5}
+        >
+          <path
+            d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+            data-name="Stroke 1"
+          />
+          <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+        </g>
+      </svg>
+    ),
+  },
+};
+
+export const Radius = {
+  render: RadiusTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const Closable = {
+  render: CloseableTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithEndContent = {
+  render: WithEndContentTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const CustomStyles = {
+  render: CustomStylesTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/alert/tsconfig.json b/packages/components/alert/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/alert/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/alert/tsup.config.ts b/packages/components/alert/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/alert/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/components/autocomplete/CHANGELOG.md b/packages/components/autocomplete/CHANGELOG.md
index 77ddeded3b..c9e8601afe 100644
--- a/packages/components/autocomplete/CHANGELOG.md
+++ b/packages/components/autocomplete/CHANGELOG.md
@@ -1,5 +1,373 @@
 # @nextui-org/autocomplete
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/form@2.1.1
+  - @nextui-org/input@2.4.1
+  - @nextui-org/listbox@2.3.1
+  - @nextui-org/popover@2.3.1
+  - @nextui-org/scroll-shadow@2.3.1
+  - @nextui-org/spinner@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8)]:
+  - @nextui-org/listbox@2.3.0
+  - @nextui-org/popover@2.3.0
+  - @nextui-org/input@2.4.0
+  - @nextui-org/form@2.1.0
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/scroll-shadow@2.3.0
+  - @nextui-org/spinner@2.2.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.17
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322), [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9)]:
+  - @nextui-org/input@2.3.0-beta.12
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/listbox@2.2.0-beta.14
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+
+## 2.2.0-beta.16
+
+### Patch Changes
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.11
+  - @nextui-org/listbox@2.2.0-beta.13
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.2.0-beta.15
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/input@2.3.0-beta.11
+  - @nextui-org/listbox@2.2.0-beta.12
+  - @nextui-org/popover@2.2.0-beta.11
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.14
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - support server validation with form
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/listbox@2.2.0-beta.11
+  - @nextui-org/popover@2.2.0-beta.10
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/form@2.0.1-beta.0
+  - @nextui-org/input@2.3.0-beta.10
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.8
+
+## 2.2.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac)]:
+  - @nextui-org/listbox@2.2.0-beta.10
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+
+## 2.2.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/listbox@2.2.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.2.0-beta.11
+
+### Patch Changes
+
+- [#4094](https://github.com/nextui-org/nextui/pull/4094) [`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Virtualization support added to Listbox & Autocomplete
+
+- Updated dependencies [[`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f)]:
+  - @nextui-org/listbox@2.2.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+
+## 2.2.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/listbox@2.2.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/input@2.3.0-beta.8
+  - @nextui-org/listbox@2.2.0-beta.6
+  - @nextui-org/popover@2.2.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.6
+  - @nextui-org/spinner@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/input@2.3.0-beta.7
+  - @nextui-org/listbox@2.2.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.6
+  - @nextui-org/scroll-shadow@2.2.0-beta.5
+  - @nextui-org/spinner@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/input@2.3.0-beta.6
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/input@2.3.0-beta.5
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/input@2.3.0-beta.4
+  - @nextui-org/listbox@2.2.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.3
+  - @nextui-org/spinner@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/input@2.3.0-beta.3
+  - @nextui-org/listbox@2.2.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.3
+  - @nextui-org/scroll-shadow@2.2.0-beta.2
+  - @nextui-org/spinner@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c)]:
+  - @nextui-org/popover@2.2.0-beta.2
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`a2d653137`](https://github.com/nextui-org/nextui/commit/a2d653137d61465a88dfa3830bb3a44e3a7faa87)]:
+  - @nextui-org/input@2.3.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/input@2.3.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/scroll-shadow@2.2.0-beta.1
+  - @nextui-org/spinner@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3788](https://github.com/nextui-org/nextui/pull/3788) [`2e82f165a`](https://github.com/nextui-org/nextui/commit/2e82f165a98e1cdc8f0702d2971fc534b763fd15) Thanks [@abhinav700](https://github.com/abhinav700)! - Clicking the clear button clears the selected value without closing the dropdown. (#3788)
+
+- [#3845](https://github.com/nextui-org/nextui/pull/3845) [`780ba4316`](https://github.com/nextui-org/nextui/commit/780ba43162dc7ceb3f7b46c68c8134473013c873) Thanks [@alexnguyennz](https://github.com/alexnguyennz)! - Return null if there are items for exit animation on popover close to work
+
+- [#2186](https://github.com/nextui-org/nextui/pull/2186) [`557f10f5e`](https://github.com/nextui-org/nextui/commit/557f10f5ec60f9f69bed098b3670046cd56d15da) Thanks [@juliesaia](https://github.com/juliesaia)! - automatically focus first non-disabled item
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`a2e562b03`](https://github.com/nextui-org/nextui/commit/a2e562b03f79b52b0b35f07104b3585ea05e2cb6), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`606f75726`](https://github.com/nextui-org/nextui/commit/606f75726c6b273ea25528ec3269fa6e82af3349), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/listbox@2.2.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/input@2.3.0-beta.0
+  - @nextui-org/popover@2.2.0-beta.0
+  - @nextui-org/scroll-shadow@2.2.0-beta.0
+  - @nextui-org/spinner@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.7
 
 ### Patch Changes
diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index ab4f6d381f..55a050d64c 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -1,7 +1,9 @@
+import "@testing-library/jest-dom";
 import * as React from "react";
 import {within, render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
 
 import {Autocomplete, AutocompleteItem, AutocompleteProps, AutocompleteSection} from "../src";
 import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../../modal/src";
@@ -77,6 +79,12 @@ const AutocompleteExample = (props: Partial<AutocompleteProps> = {}) => (
 );
 
 describe("Autocomplete", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<AutocompleteExample />);
 
@@ -172,9 +180,7 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("autocomplete");
 
     // open the select listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -201,9 +207,7 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("autocomplete");
 
     // open the select listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -211,9 +215,7 @@ describe("Autocomplete", () => {
     let options = wrapper.getAllByRole("option");
 
     // select the target item
-    await act(async () => {
-      await userEvent.click(options[0]);
-    });
+    await user.click(options[0]);
 
     const {container} = wrapper;
 
@@ -223,10 +225,8 @@ describe("Autocomplete", () => {
 
     expect(clearButton).not.toBeNull();
 
-    // select the target item
-    await act(async () => {
-      await userEvent.click(clearButton);
-    });
+    // click the clear button
+    await user.click(clearButton);
 
     // assert that the input has empty value
     expect(autocomplete).toHaveValue("");
@@ -235,6 +235,49 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
   });
 
+  it("should keep the ListBox open after clicking clear button", async () => {
+    const wrapper = render(
+      <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
+        <AutocompleteItem key="penguin" value="penguin">
+          Penguin
+        </AutocompleteItem>
+        <AutocompleteItem key="zebra" value="zebra">
+          Zebra
+        </AutocompleteItem>
+        <AutocompleteItem key="shark" value="shark">
+          Shark
+        </AutocompleteItem>
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let options = wrapper.getAllByRole("option");
+
+    // select the target item
+    await user.click(options[0]);
+
+    const {container} = wrapper;
+
+    const clearButton = container.querySelector(
+      "[data-slot='inner-wrapper'] button:nth-of-type(1)",
+    )!;
+
+    expect(clearButton).not.toBeNull();
+
+    // click the clear button
+    await user.click(clearButton);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("should clear value after clicking clear button (controlled)", async () => {
     const wrapper = render(
       <ControlledAutocomplete data-testid="autocomplete" items={itemsData}>
@@ -245,9 +288,7 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("autocomplete");
 
     // open the select listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -255,9 +296,7 @@ describe("Autocomplete", () => {
     let options = wrapper.getAllByRole("option");
 
     // select the target item
-    await act(async () => {
-      await userEvent.click(options[0]);
-    });
+    await user.click(options[0]);
 
     const {container} = wrapper;
 
@@ -267,10 +306,8 @@ describe("Autocomplete", () => {
 
     expect(clearButton).not.toBeNull();
 
-    // select the target item
-    await act(async () => {
-      await userEvent.click(clearButton);
-    });
+    /// click the clear button
+    await user.click(clearButton);
 
     // assert that the input has empty value
     expect(autocomplete).toHaveValue("");
@@ -279,6 +316,41 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
   });
 
+  it("should keep the ListBox open after clicking clear button (controlled)", async () => {
+    const wrapper = render(
+      <ControlledAutocomplete data-testid="autocomplete" items={itemsData}>
+        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
+      </ControlledAutocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("autocomplete");
+
+    // open the select listbox
+    await user.click(autocomplete);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let options = wrapper.getAllByRole("option");
+
+    // select the target item
+    await user.click(options[0]);
+
+    const {container} = wrapper;
+
+    const clearButton = container.querySelector(
+      "[data-slot='inner-wrapper'] button:nth-of-type(1)",
+    )!;
+
+    expect(clearButton).not.toBeNull();
+
+    // click the clear button
+    await user.click(clearButton);
+
+    // assert that the autocomplete listbox is open
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+  });
+
   it("should open and close listbox by clicking selector button", async () => {
     const wrapper = render(
       <Autocomplete aria-label="Favorite Animal" data-testid="autocomplete" label="Favorite Animal">
@@ -305,9 +377,7 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("autocomplete");
 
     // open the select listbox by clicking selector button
-    await act(async () => {
-      await userEvent.click(selectorButton);
-    });
+    await user.click(selectorButton);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -316,9 +386,7 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
 
     // close the select listbox by clicking selector button again
-    await act(async () => {
-      await userEvent.click(selectorButton);
-    });
+    await user.click(selectorButton);
 
     // assert that the autocomplete listbox is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -349,17 +417,13 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
 
     // open the select listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
 
     // click outside the autocomplete component
-    await act(async () => {
-      await userEvent.click(document.body);
-    });
+    await user.click(document.body);
 
     // assert that the autocomplete is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -398,17 +462,14 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
 
     // open the autocomplete listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
 
     // click outside the autocomplete component
-    await act(async () => {
-      await userEvent.click(document.body);
-    });
+    await user.click(document.body);
 
     // assert that the autocomplete listbox is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -432,9 +493,7 @@ describe("Autocomplete", () => {
     const autocomplete = wrapper.getByTestId("autocomplete");
 
     // open the listbox
-    await act(async () => {
-      await userEvent.click(autocomplete);
-    });
+    await user.click(autocomplete);
 
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -447,9 +506,7 @@ describe("Autocomplete", () => {
     expect(options.length).toBe(3);
 
     // select the target item
-    await act(async () => {
-      await userEvent.click(options[0]);
-    });
+    await user.click(options[0]);
 
     // assert that the input has target selection
     expect(autocomplete).toHaveValue("Penguin");
@@ -508,9 +565,7 @@ describe("Autocomplete", () => {
     expect(selectorButton2).not.toBeNull();
 
     // open the select listbox by clicking selector button in the first autocomplete
-    await act(async () => {
-      await userEvent.click(selectorButton);
-    });
+    await user.click(selectorButton);
 
     // assert that the first autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -519,9 +574,7 @@ describe("Autocomplete", () => {
     expect(autocomplete).toHaveFocus();
 
     // close the select listbox by clicking the second autocomplete
-    await act(async () => {
-      await userEvent.click(selectorButton2);
-    });
+    await user.click(selectorButton2);
 
     // assert that the first autocomplete listbox is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -536,6 +589,60 @@ describe("Autocomplete", () => {
     expect(autocomplete2).toHaveFocus();
   });
 
+  it("should work when key equals textValue", async () => {
+    const wrapper = render(
+      <Autocomplete
+        aria-label="Favorite Animal"
+        data-testid="when-key-equals-textValue"
+        defaultSelectedKey="cat"
+        items={itemsData}
+        label="Favorite Animal"
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+
+    const user = userEvent.setup();
+
+    await user.click(autocomplete);
+
+    expect(autocomplete).toHaveValue("cat");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let listboxItems = wrapper.getAllByRole("option");
+
+    await user.click(listboxItems[1]);
+
+    expect(autocomplete).toHaveValue("dog");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should work when key equals textValue (controlled)", async () => {
+    const wrapper = render(
+      <ControlledAutocomplete data-testid="when-key-equals-textValue" items={itemsData}>
+        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
+      </ControlledAutocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+
+    const user = userEvent.setup();
+
+    await user.click(autocomplete);
+
+    expect(autocomplete).toHaveValue("cat");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let listboxItems = wrapper.getAllByRole("option");
+
+    await user.click(listboxItems[1]);
+
+    expect(autocomplete).toHaveValue("dog");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+  });
+
   describe("validation", () => {
     let user;
 
@@ -546,9 +653,9 @@ describe("Autocomplete", () => {
     describe("validationBehavior=native", () => {
       it("supports isRequired", async () => {
         const {getByTestId, getByRole, findByRole} = render(
-          <form data-testid="form">
+          <Form data-testid="form">
             <AutocompleteExample isRequired validationBehavior="native" />
-          </form>,
+          </Form>,
         );
 
         const input = getByRole("combobox") as HTMLInputElement;
@@ -576,6 +683,62 @@ describe("Autocomplete", () => {
         await user.click(items[0]);
         expect(input).toHaveAttribute("aria-describedby");
       });
+
+      it("supports server validation", async () => {
+        function Test() {
+          const [serverErrors, setServerErrors] = React.useState({});
+          const onSubmit = (e) => {
+            e.preventDefault();
+            setServerErrors({
+              value: "Invalid value.",
+            });
+          };
+
+          return (
+            <Form validationErrors={serverErrors} onSubmit={onSubmit}>
+              <AutocompleteExample data-testid="input" name="value" validationBehavior="native" />
+              <button data-testid="submit" type="submit">
+                Submit
+              </button>
+            </Form>
+          );
+        }
+
+        const {getByTestId, getByRole} = render(<Test />);
+
+        const input = getByTestId("input") as HTMLInputElement;
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+
+        await user.click(getByTestId("submit"));
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid value.",
+        );
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab({shift: true});
+        await user.keyboard("[ArrowRight]Ze");
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const listbox = getByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
+
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        expect(input).toHaveAttribute("aria-describedby");
+        await user.tab();
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(true);
+      });
     });
 
     describe("validationBehavior=aria", () => {
@@ -583,8 +746,8 @@ describe("Autocomplete", () => {
         let {getByRole, findByRole} = render(
           <form data-testid="form">
             <AutocompleteExample
-              defaultInputValue="Penguin"
-              validate={(v) => (v.inputValue === "Penguin" ? "Invalid value" : null)}
+              defaultSelectedKey="penguin"
+              validate={(v) => (v.selectedKey === "penguin" ? "Invalid value" : null)}
               validationBehavior="aria"
             />
           </form>,
@@ -612,61 +775,42 @@ describe("Autocomplete", () => {
         expect(input).not.toHaveAttribute("aria-describedby");
         expect(input).not.toHaveAttribute("aria-invalid");
       });
-    });
-  });
 
-  it("should work when key equals textValue", async () => {
-    const wrapper = render(
-      <Autocomplete
-        aria-label="Favorite Animal"
-        data-testid="when-key-equals-textValue"
-        defaultSelectedKey="cat"
-        items={itemsData}
-        label="Favorite Animal"
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
-      </Autocomplete>,
-    );
-
-    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
-
-    const user = userEvent.setup();
-
-    await user.click(autocomplete);
-
-    expect(autocomplete).toHaveValue("cat");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
-
-    let listboxItems = wrapper.getAllByRole("option");
-
-    await user.click(listboxItems[1]);
-
-    expect(autocomplete).toHaveValue("dog");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should work when key equals textValue (controlled)", async () => {
-    const wrapper = render(
-      <ControlledAutocomplete data-testid="when-key-equals-textValue" items={itemsData}>
-        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
-      </ControlledAutocomplete>,
-    );
+      it("supports server validation", async () => {
+        const {getByTestId, getByRole} = render(
+          <Form validationErrors={{value: "Invalid value"}}>
+            <AutocompleteExample data-testid="input" name="value" />
+          </Form>,
+        );
 
-    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+        const input = getByTestId("input");
 
-    const user = userEvent.setup();
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid value",
+        );
 
-    await user.click(autocomplete);
+        await user.tab();
+        await user.keyboard("[ArrowRight]Ze");
 
-    expect(autocomplete).toHaveValue("cat");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+        act(() => {
+          jest.runAllTimers();
+        });
 
-    let listboxItems = wrapper.getAllByRole("option");
+        const listbox = getByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
 
-    await user.click(listboxItems[1]);
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
 
-    expect(autocomplete).toHaveValue("dog");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+        await user.tab();
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input).not.toHaveAttribute("aria-invalid");
+      });
+    });
   });
 });
 
diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
index 4982dad45a..b8c8a4c711 100644
--- a/packages/components/autocomplete/package.json
+++ b/packages/components/autocomplete/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.1.7",
+  "version": "2.3.1",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
@@ -34,13 +34,14 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "framer-motion": ">=10.17.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/input": "workspace:*",
@@ -53,15 +54,15 @@
     "@nextui-org/spinner": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/combobox": "3.9.1",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/combobox": "3.8.4",
-    "@react-types/combobox": "3.11.1",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/combobox": "3.10.5",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/combobox": "3.10.0",
+    "@react-types/combobox": "3.13.0",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/avatar": "workspace:*",
@@ -70,12 +71,12 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "@react-stately/data": "3.11.4",
+    "@react-stately/data": "3.11.7",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/autocomplete/src/autocomplete.tsx b/packages/components/autocomplete/src/autocomplete.tsx
index 2eadca4ebd..a804471551 100644
--- a/packages/components/autocomplete/src/autocomplete.tsx
+++ b/packages/components/autocomplete/src/autocomplete.tsx
@@ -5,14 +5,19 @@ import {ChevronDownIcon, CloseIcon} from "@nextui-org/shared-icons";
 import {Listbox} from "@nextui-org/listbox";
 import {Button} from "@nextui-org/button";
 import {Input} from "@nextui-org/input";
-import {ForwardedRef, ReactElement, Ref} from "react";
+import {ForwardedRef, ReactElement} from "react";
 import {AnimatePresence} from "framer-motion";
 
 import {UseAutocompleteProps, useAutocomplete} from "./use-autocomplete";
 
 interface Props<T> extends UseAutocompleteProps<T> {}
 
-function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLInputElement>) {
+export type AutocompleteProps<T extends object = object> = Props<T>;
+
+const Autocomplete = forwardRef(function Autocomplete<T extends object>(
+  props: AutocompleteProps<T>,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
   const {
     Component,
     isOpen,
@@ -31,15 +36,17 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
     getEndContentWrapperProps,
   } = useAutocomplete<T>({...props, ref});
 
+  const listboxProps = getListBoxProps();
+
   const popoverContent = isOpen ? (
     <FreeSoloPopover {...getPopoverProps()}>
       <ScrollShadow {...getListBoxWrapperProps()}>
-        <Listbox {...getListBoxProps()} />
+        <Listbox {...listboxProps} />
       </ScrollShadow>
     </FreeSoloPopover>
-  ) : (
+  ) : listboxProps.state?.collection.size === 0 ? (
     <div {...getEmptyPopoverProps()} />
-  );
+  ) : null;
 
   return (
     <Component {...getBaseProps()}>
@@ -55,13 +62,6 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
     </Component>
   );
-}
-
-export type AutocompleteProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Autocomplete) as <T extends object>(
-  props: AutocompleteProps<T>,
-) => ReactElement;
+}) as <T extends object>(props: AutocompleteProps<T>) => ReactElement;
 
-Autocomplete.displayName = "NextUI.Autocomplete";
+export default Autocomplete;
diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts
index d1cae053f3..381809b85b 100644
--- a/packages/components/autocomplete/src/use-autocomplete.ts
+++ b/packages/components/autocomplete/src/use-autocomplete.ts
@@ -18,6 +18,7 @@ import {chain, mergeProps} from "@react-aria/utils";
 import {ButtonProps} from "@nextui-org/button";
 import {AsyncLoadable, PressEvent} from "@react-types/shared";
 import {useComboBox} from "@react-aria/combobox";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>> {
@@ -110,16 +111,34 @@ interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>
    * Callback fired when the select menu is closed.
    */
   onClose?: () => void;
+  /**
+   * Whether to enable virtualization of the listbox items.
+   * By default, virtualization is automatically enabled when the number of items is greater than 50.
+   * @default undefined
+   */
+  isVirtualized?: boolean;
 }
 
 export type UseAutocompleteProps<T> = Props<T> &
   Omit<InputProps, "children" | "value" | "isClearable" | "defaultValue" | "classNames"> &
   ComboBoxProps<T> &
   AsyncLoadable &
-  AutocompleteVariantProps;
+  AutocompleteVariantProps & {
+    /**
+     * The height of each item in the listbox.
+     * This is required for virtualized listboxes to calculate the height of each item.
+     */
+    itemHeight?: number;
+    /**
+     * The max height of the listbox (which will be rendered in a popover).
+     * This is required for virtualized listboxes to set the maximum height of the listbox.
+     */
+    maxListboxHeight?: number;
+  };
 
 export function useAutocomplete<T extends object>(originalProps: UseAutocompleteProps<T>) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, autocomplete.variantKeys);
   const disableAnimation =
@@ -158,7 +177,10 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     clearButtonProps = {},
     showScrollIndicators = true,
     allowsCustomValue = false,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    isVirtualized,
+    maxListboxHeight = 256,
+    itemHeight = 32,
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     className,
     classNames,
     errorMessage,
@@ -317,6 +339,16 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     }
   }, [inputRef.current]);
 
+  // focus first non-disabled item
+  useEffect(() => {
+    let key = state.collection.getFirstKey();
+
+    while (key && state.disabledKeys.has(key)) {
+      key = state.collection.getKeyAfter(key);
+    }
+    state.selectionManager.setFocusedKey(key);
+  }, [state.collection, state.disabledKeys]);
+
   useEffect(() => {
     if (isOpen) {
       // apply the same with to the popover as the select
@@ -385,16 +417,15 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       },
       onPress: (e: PressEvent) => {
         slotsProps.clearButtonProps?.onPress?.(e);
-
         if (state.selectedItem) {
           state.setInputValue("");
           state.setSelectedKey(null);
         } else {
           if (allowsCustomValue) {
             state.setInputValue("");
-            state.close();
           }
         }
+        state.open();
       },
       "data-visible": !!state.selectedItem || state.inputValue?.length > 0,
       className: slots.clearButton({
@@ -416,14 +447,25 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       onClick: chain(slotsProps.inputProps.onClick, otherProps.onClick),
     } as unknown as InputProps);
 
-  const getListBoxProps = () =>
-    ({
+  const getListBoxProps = () => {
+    // Use isVirtualized prop if defined, otherwise fallback to default behavior
+    const shouldVirtualize = isVirtualized ?? state.collection.size > 50;
+
+    return {
       state,
       ref: listBoxRef,
+      isVirtualized: shouldVirtualize,
+      virtualization: shouldVirtualize
+        ? {
+            maxListboxHeight,
+            itemHeight,
+          }
+        : undefined,
       ...mergeProps(slotsProps.listboxProps, listBoxProps, {
         shouldHighlightOnFocus: true,
       }),
-    } as ListboxProps);
+    } as ListboxProps;
+  };
 
   const getPopoverProps = (props: DOMAttributes = {}) => {
     const popoverProps = mergeProps(slotsProps.popoverProps, props);
@@ -470,6 +512,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
         props?.className,
       ),
     }),
+    style: {
+      maxHeight: originalProps.maxListboxHeight ?? 256,
+    },
   });
 
   const getEndContentWrapperProps: PropGetter = (props: any = {}) => ({
diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
index ca4db45df2..a63fdf61b4 100644
--- a/packages/components/autocomplete/stories/autocomplete.stories.tsx
+++ b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -18,6 +18,7 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 import {PetBoldIcon, SearchLinearIcon, SelectorIcon} from "@nextui-org/shared-icons";
 import {Avatar} from "@nextui-org/avatar";
 import {Button} from "@nextui-org/button";
+import {Form} from "@nextui-org/form";
 
 import {Autocomplete, AutocompleteItem, AutocompleteProps, AutocompleteSection} from "../src";
 
@@ -100,6 +101,58 @@ const items = animalsData.map((item) => (
   </AutocompleteItem>
 ));
 
+interface LargeDatasetSchema {
+  label: string;
+  value: string;
+  description: string;
+}
+
+function generateLargeDataset(n: number): LargeDatasetSchema[] {
+  const dataset: LargeDatasetSchema[] = [];
+
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+}
+
+const LargeDatasetTemplate = (args: AutocompleteProps & {numItems: number}) => {
+  const largeDataset = generateLargeDataset(args.numItems);
+
+  return (
+    <Autocomplete label={`Search from ${args.numItems} items`} {...args}>
+      {largeDataset.map((item, index) => (
+        <AutocompleteItem key={index} value={item.value}>
+          {item.label}
+        </AutocompleteItem>
+      ))}
+    </Autocomplete>
+  );
+};
+
 const Template = (args: AutocompleteProps) => (
   <Autocomplete label="Favorite Animal" {...args}>
     <AutocompleteItem key="red_panda">Red Panda</AutocompleteItem>
@@ -803,6 +856,33 @@ const WithReactHookFormTemplate = (args: AutocompleteProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: AutocompleteProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      animals: "Please select a valid animal.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <Autocomplete {...args} className="max-w-xs" label="Favorite Animal" name="animals">
+        <AutocompleteItem key="red_panda">Red Panda</AutocompleteItem>
+        <AutocompleteItem key="cat">Cat</AutocompleteItem>
+        <AutocompleteItem key="dog">Dog</AutocompleteItem>
+      </Autocomplete>
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -978,6 +1058,13 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithSections = {
   render: WithSectionsTemplate,
 
@@ -1061,3 +1148,42 @@ export const FullyControlled = {
     ...defaultProps,
   },
 };
+
+export const OneThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Search...",
+    numItems: 1000,
+  },
+};
+
+export const TenThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Search...",
+    numItems: 10000,
+  },
+};
+
+export const CustomMaxListboxHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Search...",
+    numItems: 1000,
+    maxListboxHeight: 400,
+  },
+};
+
+export const CustomItemHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Search...",
+    numItems: 1000,
+    maxListboxHeight: 400,
+    itemHeight: 40,
+  },
+};
diff --git a/packages/components/avatar/CHANGELOG.md b/packages/components/avatar/CHANGELOG.md
index 1064734906..d55d31a5b4 100644
--- a/packages/components/avatar/CHANGELOG.md
+++ b/packages/components/avatar/CHANGELOG.md
@@ -1,5 +1,180 @@
 # @nextui-org/avatar
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-image@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-image@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-image@2.0.7-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-image@2.0.7-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-image@2.0.7-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-image@2.0.7-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-image@2.0.7-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-image@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`52f6274e9`](https://github.com/nextui-org/nextui/commit/52f6274e9baecc928ee7cbb6a8110b72931061b8)]:
+  - @nextui-org/use-image@2.0.7-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`1c05c6d77`](https://github.com/nextui-org/nextui/commit/1c05c6d77b10f6b18f3c34d36eece7702704267a)]:
+  - @nextui-org/use-image@2.0.7-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`98b13d9a9`](https://github.com/nextui-org/nextui/commit/98b13d9a9368ed188f62e3e7ff885ed3ec7c3f5a)]:
+  - @nextui-org/use-image@2.0.7-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-image@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`90cb5b14a`](https://github.com/nextui-org/nextui/commit/90cb5b14abcf70878896ea83b0b8bce0795d97fd), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/use-image@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.33
 
 ### Patch Changes
diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
index 79da2ee12f..42ce74ce38 100644
--- a/packages/components/avatar/package.json
+++ b/packages/components/avatar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "2.0.33",
+  "version": "2.2.1",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
@@ -34,18 +34,18 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-image": "workspace:*",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.24.1"
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.26.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/avatar/src/use-avatar.ts b/packages/components/avatar/src/use-avatar.ts
index e7f2b93757..4682c65be6 100644
--- a/packages/components/avatar/src/use-avatar.ts
+++ b/packages/components/avatar/src/use-avatar.ts
@@ -124,6 +124,7 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
     imgProps,
     className,
     onError,
+    disableAnimation: disableAnimationProp,
     ...otherProps
   } = originalProps;
 
@@ -134,8 +135,7 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
 
   const {isFocusVisible, isFocused, focusProps} = useFocusRing();
   const {isHovered, hoverProps} = useHover({isDisabled});
-  const disableAnimation =
-    originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
+  const disableAnimation = disableAnimationProp ?? globalContext?.disableAnimation ?? false;
 
   const imageStatus = useImage({src, onError, ignoreFallback});
 
diff --git a/packages/components/badge/CHANGELOG.md b/packages/components/badge/CHANGELOG.md
index 45f2dbcc25..ca34e74046 100644
--- a/packages/components/badge/CHANGELOG.md
+++ b/packages/components/badge/CHANGELOG.md
@@ -1,5 +1,141 @@
 # @nextui-org/badge
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.32
 
 ### Patch Changes
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
index 3645386db4..57122f4145 100644
--- a/packages/components/badge/package.json
+++ b/packages/components/badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "2.0.32",
+  "version": "2.2.1",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/packages/components/breadcrumbs/CHANGELOG.md b/packages/components/breadcrumbs/CHANGELOG.md
index 0e1c5a4b7f..b4226690f2 100644
--- a/packages/components/breadcrumbs/CHANGELOG.md
+++ b/packages/components/breadcrumbs/CHANGELOG.md
@@ -1,5 +1,172 @@
 # @nextui-org/breadcrumbs
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.13
 
 ### Patch Changes
diff --git a/packages/components/breadcrumbs/package.json b/packages/components/breadcrumbs/package.json
index b96e7cadc7..1add5f560b 100644
--- a/packages/components/breadcrumbs/package.json
+++ b/packages/components/breadcrumbs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/breadcrumbs",
-  "version": "2.0.13",
+  "version": "2.2.1",
   "description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
   "keywords": [
     "breadcrumbs"
@@ -34,20 +34,20 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/breadcrumbs": "3.5.13",
-    "@react-aria/utils": "3.24.1",
-    "@react-types/breadcrumbs": "3.7.5",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/breadcrumbs": "3.5.18",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/breadcrumbs": "3.7.8",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/button/CHANGELOG.md b/packages/components/button/CHANGELOG.md
index 5c718bdea7..6456c4e0d3 100644
--- a/packages/components/button/CHANGELOG.md
+++ b/packages/components/button/CHANGELOG.md
@@ -1,5 +1,198 @@
 # @nextui-org/button
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/ripple@2.2.1
+  - @nextui-org/spinner@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/ripple@2.2.0
+  - @nextui-org/spinner@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies []:
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/ripple@2.1.0-beta.6
+  - @nextui-org/spinner@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/ripple@2.1.0-beta.5
+  - @nextui-org/spinner@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/ripple@2.1.0-beta.3
+  - @nextui-org/spinner@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/ripple@2.1.0-beta.2
+  - @nextui-org/spinner@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/ripple@2.1.0-beta.1
+  - @nextui-org/spinner@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/ripple@2.1.0-beta.0
+  - @nextui-org/spinner@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.38
 
 ### Patch Changes
diff --git a/packages/components/button/__tests__/button-group.test.tsx b/packages/components/button/__tests__/button-group.test.tsx
index d4452870fb..ce31a5b025 100644
--- a/packages/components/button/__tests__/button-group.test.tsx
+++ b/packages/components/button/__tests__/button-group.test.tsx
@@ -35,7 +35,7 @@ describe("ButtonGroup", () => {
     let button = wrapper.getByTestId("button-test");
 
     userEvent.click(button);
-    expect(handler).toBeCalledTimes(0);
+    expect(handler).toHaveBeenCalledTimes(0);
   });
 
   it("should render different variants", () => {
diff --git a/packages/components/button/__tests__/button.test.tsx b/packages/components/button/__tests__/button.test.tsx
index c3930e8faf..4d55de3e25 100644
--- a/packages/components/button/__tests__/button.test.tsx
+++ b/packages/components/button/__tests__/button.test.tsx
@@ -1,9 +1,16 @@
 import * as React from "react";
-import {act, render} from "@testing-library/react";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Button} from "../src";
 
 describe("Button", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Button disableRipple />);
 
@@ -17,24 +24,24 @@ describe("Button", () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it("should trigger onPress function", () => {
+  it("should trigger onPress function", async () => {
     const onPress = jest.fn();
     const {getByRole} = render(<Button disableRipple onPress={onPress} />);
 
-    act(() => {
-      getByRole("button").click();
-    });
+    const button = getByRole("button");
+
+    await user.click(button);
 
     expect(onPress).toHaveBeenCalled();
   });
 
-  it("should ignore events when disabled", () => {
+  it("should ignore events when disabled", async () => {
     const onPress = jest.fn();
     const {getByRole} = render(<Button disableRipple isDisabled onPress={onPress} />);
 
-    act(() => {
-      getByRole("button").click();
-    });
+    const button = getByRole("button");
+
+    await user.click(button);
 
     expect(onPress).not.toHaveBeenCalled();
   });
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
index e3d35fb5ac..d753858d14 100644
--- a/packages/components/button/package.json
+++ b/packages/components/button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.0.38",
+  "version": "2.2.1",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
@@ -46,17 +46,18 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
     "@nextui-org/spinner": "workspace:*",
-    "@react-aria/button": "3.9.5",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/focus": "3.17.1",
-    "@react-types/shared": "3.23.1",
-    "@react-types/button": "3.9.4"
+    "@react-aria/button": "3.10.1",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/focus": "3.18.4",
+    "@react-types/shared": "3.25.0",
+    "@react-types/button": "3.10.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/calendar/CHANGELOG.md b/packages/components/calendar/CHANGELOG.md
index 811a0ac4c6..e38f1bc15a 100644
--- a/packages/components/calendar/CHANGELOG.md
+++ b/packages/components/calendar/CHANGELOG.md
@@ -1,5 +1,258 @@
 # @nextui-org/calendar
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/button@2.1.0-beta.10
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4140](https://github.com/nextui-org/nextui/pull/4140) [`78a99b628`](https://github.com/nextui-org/nextui/commit/78a99b628e3fde8808a0cce3c69059d727afd49b) Thanks [@wingkwong](https://github.com/wingkwong)! - add missing `framer-motion` in `peerDependencies`
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/button@2.1.0-beta.4
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4039](https://github.com/nextui-org/nextui/pull/4039) [`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7) Thanks [@wingkwong](https://github.com/wingkwong)! - support inert value with boolean type for react 19 (#4038)
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3302](https://github.com/nextui-org/nextui/pull/3302) [`a4a1d8fb6`](https://github.com/nextui-org/nextui/commit/a4a1d8fb69dd7f496a179a66af072f72aae0ec17) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - replaced lodash with native approaches
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.12
 
 ### Patch Changes
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
index 1910024ed6..852b30be37 100644
--- a/packages/components/calendar/package.json
+++ b/packages/components/calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.0.12",
+  "version": "2.2.1",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"
@@ -34,10 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.1.0",
-    "@nextui-org/theme": ">=2.2.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/react-utils": "workspace:*",
@@ -46,19 +47,19 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
-    "lodash.debounce": "^4.0.8",
-    "@internationalized/date": "^3.5.4",
-    "@react-aria/calendar": "3.5.8",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-stately/calendar": "3.5.1",
-    "@react-types/button": "3.9.4",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.10.1",
-    "@react-types/calendar": "3.4.6",
-    "@react-aria/interactions": "3.21.3",
-    "@react-types/shared": "3.23.1",
+    "@nextui-org/dom-animation": "workspace:*",
+    "@internationalized/date": "3.5.6",
+    "@react-aria/calendar": "3.5.13",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-stately/calendar": "3.5.5",
+    "@react-types/button": "3.10.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/utils": "3.10.4",
+    "@react-types/calendar": "3.4.10",
+    "@react-aria/interactions": "3.22.4",
+    "@react-types/shared": "3.25.0",
     "scroll-into-view-if-needed": "3.0.10",
     "@types/lodash.debounce": "^4.0.7"
   },
@@ -67,10 +68,10 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/calendar/src/calendar-base.tsx b/packages/components/calendar/src/calendar-base.tsx
index f40bcd22f2..0836bfb241 100644
--- a/packages/components/calendar/src/calendar-base.tsx
+++ b/packages/components/calendar/src/calendar-base.tsx
@@ -3,12 +3,11 @@ import type {As, HTMLNextUIProps} from "@nextui-org/system";
 import type {ButtonProps} from "@nextui-org/button";
 import type {HTMLAttributes, ReactNode, RefObject} from "react";
 
-import {Fragment} from "react";
-import {useState} from "react";
+import {Fragment, useState} from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {Button} from "@nextui-org/button";
 import {chain, mergeProps} from "@react-aria/utils";
-import {AnimatePresence, LazyMotion, domAnimation, MotionConfig} from "framer-motion";
+import {AnimatePresence, LazyMotion, MotionConfig} from "framer-motion";
 import {ResizablePanel} from "@nextui-org/framer-utils";
 
 import {ChevronLeftIcon} from "./chevron-left";
@@ -19,6 +18,8 @@ import {CalendarHeader} from "./calendar-header";
 import {CalendarPicker} from "./calendar-picker";
 import {useCalendarContext} from "./calendar-context";
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 export interface CalendarBaseProps extends HTMLNextUIProps<"div"> {
   Component?: As;
   showHelper?: boolean;
diff --git a/packages/components/calendar/src/calendar-cell.tsx b/packages/components/calendar/src/calendar-cell.tsx
index 7de61e6ce2..b2e742c588 100644
--- a/packages/components/calendar/src/calendar-cell.tsx
+++ b/packages/components/calendar/src/calendar-cell.tsx
@@ -49,9 +49,9 @@ export function CalendarCell(originalProps: CalendarCellProps) {
     !isDisabled && !isInvalid && state.isCellUnavailable(props.date.subtract({days: 1}));
   const highlightedRange = "highlightedRange" in state && state.highlightedRange;
   const isSelectionStart =
-    isSelected && highlightedRange && isSameDay(props.date, highlightedRange.start);
+    isSelected && highlightedRange ? isSameDay(props.date, highlightedRange.start) : false;
   const isSelectionEnd =
-    isSelected && highlightedRange && isSameDay(props.date, highlightedRange.end);
+    isSelected && highlightedRange ? isSameDay(props.date, highlightedRange.end) : false;
   const {locale} = useLocale();
   const dayOfWeek = getDayOfWeek(props.date, locale);
   const isRangeStart =
diff --git a/packages/components/calendar/src/calendar-header.tsx b/packages/components/calendar/src/calendar-header.tsx
index 7e04926dd1..400104f4bd 100644
--- a/packages/components/calendar/src/calendar-header.tsx
+++ b/packages/components/calendar/src/calendar-header.tsx
@@ -99,6 +99,7 @@ export function CalendarHeader(props: CalendarHeaderProps) {
   return showMonthAndYearPickers ? (
     <Button
       {...headerProps}
+      aria-label="switch to year and month view"
       disableAnimation={disableAnimation}
       endContent={<ChevronDownIcon className="chevron-icon" />}
       onKeyDown={handleKeyDown}
diff --git a/packages/components/calendar/src/calendar-month.tsx b/packages/components/calendar/src/calendar-month.tsx
index e17fca20d9..8972f10bd6 100644
--- a/packages/components/calendar/src/calendar-month.tsx
+++ b/packages/components/calendar/src/calendar-month.tsx
@@ -4,7 +4,7 @@ import {HTMLNextUIProps} from "@nextui-org/system";
 import {useLocale} from "@react-aria/i18n";
 import {useCalendarGrid} from "@react-aria/calendar";
 import {m} from "framer-motion";
-import {dataAttr} from "@nextui-org/shared-utils";
+import {dataAttr, getInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarCell} from "./calendar-cell";
 import {slideVariants} from "./calendar-transitions";
@@ -40,9 +40,8 @@ export function CalendarMonth(props: CalendarMonthProps) {
       className={slots?.gridBodyRow({class: classNames?.gridBodyRow})}
       data-slot="grid-body-row"
       // makes the browser ignore the element and its children when tabbing
-      // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157)
       // @ts-ignore
-      inert={isHeaderExpanded ? "" : undefined}
+      inert={getInertValue(!!isHeaderExpanded)}
     >
       {state
         .getDatesInWeek(weekIndex, startDate)
diff --git a/packages/components/calendar/src/calendar-picker.tsx b/packages/components/calendar/src/calendar-picker.tsx
index 76e4cf07e5..c75194aa2a 100644
--- a/packages/components/calendar/src/calendar-picker.tsx
+++ b/packages/components/calendar/src/calendar-picker.tsx
@@ -2,6 +2,7 @@ import type {CalendarPickerProps} from "./use-calendar-picker";
 
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {useCallback} from "react";
+import {getInertValue} from "@nextui-org/shared-utils";
 
 import {CalendarPickerItem} from "./calendar-picker-item";
 import {useCalendarPicker} from "./use-calendar-picker";
@@ -66,9 +67,8 @@ export function CalendarPicker(props: CalendarPickerProps) {
       })}
       data-slot="picker-wrapper"
       // makes the browser ignore the element and its children when tabbing
-      // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157)
       // @ts-ignore
-      inert={isHeaderExpanded ? undefined : ""}
+      inert={getInertValue(!isHeaderExpanded)}
     >
       <div
         ref={highlightRef}
diff --git a/packages/components/calendar/src/calendar.tsx b/packages/components/calendar/src/calendar.tsx
index 6b1eee3f76..30891d3c71 100644
--- a/packages/components/calendar/src/calendar.tsx
+++ b/packages/components/calendar/src/calendar.tsx
@@ -1,5 +1,5 @@
 import type {DateValue} from "@internationalized/date";
-import type {ForwardedRef, ReactElement, Ref} from "react";
+import type {ForwardedRef, ReactElement} from "react";
 
 import {forwardRef} from "@nextui-org/system";
 
@@ -9,7 +9,12 @@ import {CalendarBase} from "./calendar-base";
 
 interface Props<T extends DateValue> extends Omit<UseCalendarProps<T>, "isHeaderWrapperExpanded"> {}
 
-function Calendar<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
+export type CalendarProps<T extends DateValue = DateValue> = Props<T>;
+
+const Calendar = forwardRef(function Calendar<T extends DateValue>(
+  props: CalendarProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   const {context, getBaseCalendarProps} = useCalendar<T>({...props, ref});
 
   return (
@@ -17,13 +22,6 @@ function Calendar<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDi
       <CalendarBase {...getBaseCalendarProps()} />
     </CalendarProvider>
   );
-}
-
-Calendar.displayName = "NextUI.Calendar";
+}) as <T extends DateValue>(props: CalendarProps<T>) => ReactElement;
 
-export type CalendarProps<T extends DateValue = DateValue> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Calendar) as <T extends DateValue>(
-  props: CalendarProps<T>,
-) => ReactElement;
+export default Calendar;
diff --git a/packages/components/calendar/src/range-calendar.tsx b/packages/components/calendar/src/range-calendar.tsx
index a245f012dc..913f2604c8 100644
--- a/packages/components/calendar/src/range-calendar.tsx
+++ b/packages/components/calendar/src/range-calendar.tsx
@@ -1,5 +1,5 @@
 import type {DateValue} from "@internationalized/date";
-import type {ForwardedRef, ReactElement, Ref} from "react";
+import type {ForwardedRef, ReactElement} from "react";
 
 import {forwardRef} from "@nextui-org/system";
 
@@ -10,13 +10,15 @@ import {CalendarBase} from "./calendar-base";
 interface Props<T extends DateValue>
   extends Omit<
     UseRangeCalendarProps<T>,
-    | "isHeaderExpanded"
-    | "onHeaderExpandedChange"
-    | "isHeaderWrapperExpanded"
-    | "showMonthAndYearPickers"
+    "isHeaderExpanded" | "onHeaderExpandedChange" | "isHeaderWrapperExpanded"
   > {}
 
-function RangeCalendar<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
+export type RangeCalendarProps<T extends DateValue = DateValue> = Props<T>;
+
+const RangeCalendar = forwardRef(function RangeCalendar<T extends DateValue>(
+  props: RangeCalendarProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   const {context, getBaseCalendarProps} = useRangeCalendar<T>({...props, ref});
 
   return (
@@ -24,15 +26,6 @@ function RangeCalendar<T extends DateValue>(props: Props<T>, ref: ForwardedRef<H
       <CalendarBase {...getBaseCalendarProps()} />
     </CalendarProvider>
   );
-}
-
-RangeCalendar.displayName = "NextUI.RangeCalendar";
+}) as <T extends DateValue>(props: RangeCalendarProps<T>) => ReactElement;
 
-export type RangeCalendarProps<T extends DateValue = DateValue> = Props<T> & {
-  ref?: Ref<HTMLElement>;
-};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(RangeCalendar) as <T extends DateValue>(
-  props: RangeCalendarProps<T>,
-) => ReactElement;
+export default RangeCalendar;
diff --git a/packages/components/calendar/src/use-calendar-base.ts b/packages/components/calendar/src/use-calendar-base.ts
index 56c57f5383..e87be7c489 100644
--- a/packages/components/calendar/src/use-calendar-base.ts
+++ b/packages/components/calendar/src/use-calendar-base.ts
@@ -163,7 +163,12 @@ interface Props extends NextUIBaseProps {
 export type UseCalendarBasePropsComplete = Props & CalendarVariantProps & AriaCalendarPropsBase;
 
 // Omit internal props
-export type UseCalendarBaseProps = Omit<UseCalendarBasePropsComplete, "isRange">;
+export type UseCalendarBaseProps = Omit<UseCalendarBasePropsComplete, "isRange"> & {
+  /**
+   * Props for the button picker, which is used to select the month, year and expand the header.
+   */
+  buttonPickerProps?: ButtonProps;
+};
 
 export type ContextType<T extends CalendarState | RangeCalendarState> = {
   state: T;
@@ -225,11 +230,9 @@ export function useCalendarBase(originalProps: UseCalendarBasePropsComplete) {
   /**
    * Determines whether to show the month and year pickers.
    * The pickers are shown if `showMonthAndYearPickers` is true,
-   * there is only one visible month (`visibleMonths === 1`),
-   * and it's not a range calendar (`!isRange`).
+   * there is only one visible month (`visibleMonths === 1`).
    */
-  const showMonthAndYearPickers =
-    originalProps.showMonthAndYearPickers && visibleMonths === 1 && !originalProps?.isRange;
+  const showMonthAndYearPickers = originalProps.showMonthAndYearPickers && visibleMonths === 1;
 
   const domRef = useDOMRef(ref);
 
diff --git a/packages/components/calendar/src/use-calendar-picker.ts b/packages/components/calendar/src/use-calendar-picker.ts
index fca2c7bae1..7c609df1df 100644
--- a/packages/components/calendar/src/use-calendar-picker.ts
+++ b/packages/components/calendar/src/use-calendar-picker.ts
@@ -4,7 +4,7 @@ import type {PressEvent} from "@react-types/shared";
 import {useDateFormatter} from "@react-aria/i18n";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {useCallback, useRef, useEffect} from "react";
-import debounce from "lodash.debounce";
+import {debounce} from "@nextui-org/shared-utils";
 import {areRectsIntersecting} from "@nextui-org/react-utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 
diff --git a/packages/components/calendar/src/use-calendar.ts b/packages/components/calendar/src/use-calendar.ts
index 5e742d0ea3..def46e9730 100644
--- a/packages/components/calendar/src/use-calendar.ts
+++ b/packages/components/calendar/src/use-calendar.ts
@@ -13,14 +13,7 @@ import {chain, mergeProps} from "@react-aria/utils";
 import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
 import {CalendarBaseProps} from "./calendar-base";
 
-interface Props extends UseCalendarBaseProps {
-  /**
-   * Props for the button picker, which is used to select the month, year and expand the header.
-   */
-  buttonPickerProps?: ButtonProps;
-}
-
-export type UseCalendarProps<T extends DateValue> = Props & AriaCalendarProps<T>;
+export type UseCalendarProps<T extends DateValue> = UseCalendarBaseProps & AriaCalendarProps<T>;
 
 export function useCalendar<T extends DateValue>({
   buttonPickerProps: buttonPickerPropsProp,
diff --git a/packages/components/calendar/src/use-range-calendar.ts b/packages/components/calendar/src/use-range-calendar.ts
index 3b310d2cd1..08d9c321e4 100644
--- a/packages/components/calendar/src/use-range-calendar.ts
+++ b/packages/components/calendar/src/use-range-calendar.ts
@@ -8,6 +8,8 @@ import {useRangeCalendar as useAriaRangeCalendar} from "@react-aria/calendar";
 import {useRangeCalendarState} from "@react-stately/calendar";
 import {createCalendar} from "@internationalized/date";
 import {clsx} from "@nextui-org/shared-utils";
+import {ButtonProps} from "@nextui-org/button";
+import {chain} from "@react-aria/utils";
 
 import {ContextType, useCalendarBase, UseCalendarBaseProps} from "./use-calendar-base";
 import {CalendarBaseProps} from "./calendar-base";
@@ -22,6 +24,7 @@ interface Props<T extends DateValue> extends UseCalendarBaseProps, NextUIBasePro
 export type UseRangeCalendarProps<T extends DateValue> = Props<T> & AriaRangeCalendarProps<T>;
 
 export function useRangeCalendar<T extends DateValue>({
+  buttonPickerProps: buttonPickerPropsProp,
   className,
   ...originalProps
 }: UseRangeCalendarProps<T>) {
@@ -41,6 +44,7 @@ export function useRangeCalendar<T extends DateValue>({
     visibleMonths,
     disableAnimation,
     createCalendar: createCalendarProp,
+    showMonthAndYearPickers,
     baseProps,
     getPrevButtonProps,
     getNextButtonProps,
@@ -72,6 +76,11 @@ export function useRangeCalendar<T extends DateValue>({
 
   const baseStyles = clsx(classNames?.base, className);
 
+  const buttonPickerProps: ButtonProps = {
+    ...buttonPickerPropsProp,
+    onPress: chain(buttonPickerPropsProp?.onPress, () => setIsHeaderExpanded(!isHeaderExpanded)),
+  };
+
   const getBaseCalendarProps = (props = {}): CalendarBaseProps => {
     return {
       ...baseProps,
@@ -79,6 +88,7 @@ export function useRangeCalendar<T extends DateValue>({
       showHelper,
       topContent,
       bottomContent,
+      buttonPickerProps,
       calendarRef: domRef,
       calendarProps: calendarProps,
       prevButtonProps: getPrevButtonProps(prevButtonProps),
@@ -102,6 +112,7 @@ export function useRangeCalendar<T extends DateValue>({
       isHeaderExpanded,
       setIsHeaderExpanded,
       visibleMonths,
+      showMonthAndYearPickers,
       classNames,
       disableAnimation,
     }),
@@ -114,6 +125,7 @@ export function useRangeCalendar<T extends DateValue>({
       setIsHeaderExpanded,
       visibleMonths,
       disableAnimation,
+      showMonthAndYearPickers,
     ],
   );
 
diff --git a/packages/components/calendar/src/utils.ts b/packages/components/calendar/src/utils.ts
index 1e6683d5cf..c3b9f7a39f 100644
--- a/packages/components/calendar/src/utils.ts
+++ b/packages/components/calendar/src/utils.ts
@@ -1,6 +1,6 @@
 import {DateValue, startOfYear} from "@internationalized/date";
 
-export function getYearRange(start?: DateValue, end?: DateValue): DateValue[] {
+export function getYearRange(start?: DateValue | null, end?: DateValue | null): DateValue[] {
   const years: DateValue[] = [];
 
   if (!start || !end) {
diff --git a/packages/components/calendar/stories/calendar.stories.tsx b/packages/components/calendar/stories/calendar.stories.tsx
index 9cd707b47e..cf8f410c76 100644
--- a/packages/components/calendar/stories/calendar.stories.tsx
+++ b/packages/components/calendar/stories/calendar.stories.tsx
@@ -13,6 +13,7 @@ import {I18nProvider, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
 import {Radio, RadioGroup} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {NextUIProvider} from "@nextui-org/system";
 
 import {Calendar, CalendarProps, DateValue} from "../src";
 
@@ -38,6 +39,11 @@ export default {
       },
       options: ["narrow", "short", "long"],
     },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 } as Meta<typeof Calendar>;
 
@@ -241,7 +247,6 @@ const CalendarWidthTemplate = (args: CalendarProps) => {
   return (
     <div className="flex gap-4">
       <div className="flex flex-col items-center gap-4">
-        <p>calendarWidth: 300</p>
         <p className="text-small text-default-600">calendarWidth: 300</p>
         <Calendar {...args} calendarWidth={300} />
       </div>
@@ -257,6 +262,31 @@ const CalendarWidthTemplate = (args: CalendarProps) => {
   );
 };
 
+const ReducedMotionTemplate = (args: CalendarProps) => {
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-small text-default-600">reducedMotion: never</p>
+        <NextUIProvider reducedMotion="never">
+          <Calendar {...args} />
+        </NextUIProvider>
+      </div>
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-small text-default-600">reducedMotion: always</p>
+        <NextUIProvider reducedMotion="always">
+          <Calendar {...args} />
+        </NextUIProvider>
+      </div>
+      <div className="flex flex-col items-center gap-4">
+        <p className="text-small text-default-600">reducedMotion: user</p>
+        <NextUIProvider reducedMotion="user">
+          <Calendar {...args} />
+        </NextUIProvider>
+      </div>
+    </div>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -375,3 +405,10 @@ export const CalendarWidth = {
     ...defaultProps,
   },
 };
+
+export const ReducedMotion = {
+  render: ReducedMotionTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/calendar/stories/range-calendar.stories.tsx b/packages/components/calendar/stories/range-calendar.stories.tsx
index d1d58410cd..44f3398531 100644
--- a/packages/components/calendar/stories/range-calendar.stories.tsx
+++ b/packages/components/calendar/stories/range-calendar.stories.tsx
@@ -45,8 +45,6 @@ export default {
   },
 } as Meta<typeof RangeCalendar>;
 
-delete calendar.defaultVariants?.showMonthAndYearPickers;
-
 const defaultProps = {
   ...calendar.defaultVariants,
   visibleMonths: 1,
@@ -60,7 +58,7 @@ const ControlledTemplate = (args: RangeCalendarProps) => {
     end: today(getLocalTimeZone()).add({weeks: 1}),
   };
 
-  let [value, setValue] = React.useState<RangeValue<DateValue>>(defaultValue);
+  let [value, setValue] = React.useState<RangeValue<DateValue> | null>(defaultValue);
 
   return (
     <div className="flex flex-wrap gap-4">
@@ -378,6 +376,14 @@ export const InvalidDates = {
   },
 };
 
+export const WithMonthAndYearPickers = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    showMonthAndYearPickers: true,
+  },
+};
+
 export const InternationalCalendars = {
   render: InternationalCalendarsTemplate,
   args: {
diff --git a/packages/components/card/CHANGELOG.md b/packages/components/card/CHANGELOG.md
index b6adfab24a..b3622318f5 100644
--- a/packages/components/card/CHANGELOG.md
+++ b/packages/components/card/CHANGELOG.md
@@ -1,5 +1,185 @@
 # @nextui-org/card
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/ripple@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/ripple@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies []:
+  - @nextui-org/ripple@2.1.0-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/ripple@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/ripple@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/ripple@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/ripple@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/ripple@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/ripple@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx
index ea1b7f9bdb..089f63486a 100644
--- a/packages/components/card/__tests__/card.test.tsx
+++ b/packages/components/card/__tests__/card.test.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
-import {act} from "@testing-library/react-hooks";
+import userEvent from "@testing-library/user-event";
 
 import {Card} from "../src";
 
@@ -24,15 +24,15 @@ describe("Card", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should be clicked when is pressable", () => {
+  it("should be clicked when is pressable", async () => {
     const onPress = jest.fn();
     const {getByRole} = render(<Card disableRipple isPressable onPress={onPress} />);
 
     const button = getByRole("button");
 
-    act(() => {
-      button.click();
-    });
+    const user = userEvent.setup();
+
+    await user.click(button);
 
     expect(onPress).toHaveBeenCalled();
   });
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
index 1688c9457d..8ec4f9c690 100644
--- a/packages/components/card/package.json
+++ b/packages/components/card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
@@ -34,22 +34,22 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/button": "3.9.5",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/button": "3.10.1",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -59,6 +59,7 @@
     "@nextui-org/button": "workspace:*",
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/image": "workspace:*",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/checkbox/CHANGELOG.md b/packages/components/checkbox/CHANGELOG.md
index 6366e36876..b192961244 100644
--- a/packages/components/checkbox/CHANGELOG.md
+++ b/packages/components/checkbox/CHANGELOG.md
@@ -1,5 +1,175 @@
 # @nextui-org/checkbox
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/use-callback-ref@2.1.1
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4220](https://github.com/nextui-org/nextui/pull/4220) [`729ede8`](https://github.com/nextui-org/nextui/commit/729ede8de7f18c7b49fbdb736aac300b5b98f239) Thanks [@macci001](https://github.com/macci001)! - Fix #4210 radio, checkbox & switch interaction
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/form@2.1.0
+  - @nextui-org/use-callback-ref@2.1.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/use-callback-ref@2.0.7-beta.5
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - support server validation with form
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/form@2.0.1-beta.0
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.4
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.3
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.2
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.1
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.0
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.5
 
 ### Patch Changes
diff --git a/packages/components/checkbox/__tests__/checkbox-group.test.tsx b/packages/components/checkbox/__tests__/checkbox-group.test.tsx
index 68ea6e93b5..9e604b410b 100644
--- a/packages/components/checkbox/__tests__/checkbox-group.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox-group.test.tsx
@@ -1,10 +1,17 @@
 import * as React from "react";
 import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {Form} from "@nextui-org/form";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {CheckboxGroup, Checkbox} from "../src";
 
 describe("Checkbox.Group", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(
       <CheckboxGroup defaultValue={[]} label="Select cities">
@@ -48,7 +55,7 @@ describe("Checkbox.Group", () => {
     expect(container.querySelector("[data-testid=second-checkbox] input")).not.toBeChecked();
   });
 
-  it("should change value after click", () => {
+  it("should change value after click", async () => {
     let value = ["sydney"];
     const wrapper = render(
       <CheckboxGroup
@@ -67,9 +74,7 @@ describe("Checkbox.Group", () => {
 
     const secondCheckbox = wrapper.getByTestId("second-checkbox");
 
-    act(() => {
-      secondCheckbox.click();
-    });
+    await user.click(secondCheckbox);
 
     expect(value).toEqual(["sydney", "buenos-aires"]);
   });
@@ -98,7 +103,7 @@ describe("Checkbox.Group", () => {
     expect(secondCheckbox).not.toBeChecked();
   });
 
-  it("should work correctly with controlled value", () => {
+  it("should work correctly with controlled value", async () => {
     let checked = ["sydney"];
     const onChange = jest.fn((value) => {
       checked = value;
@@ -125,20 +130,13 @@ describe("Checkbox.Group", () => {
 
     const secondCheckbox = wrapper.getByTestId("second-checkbox");
 
-    act(() => {
-      secondCheckbox.click();
-    });
+    await user.click(secondCheckbox);
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(checked).toEqual(["sydney", "buenos-aires"]);
   });
 
   describe("validation", () => {
-    let user = userEvent.setup();
-
-    beforeAll(() => {
-      user = userEvent.setup();
-    });
     describe("validationBehavior=native", () => {
       it("supports group level isRequired", async () => {
         let {getAllByRole, getByRole, getByTestId} = render(
@@ -284,6 +282,60 @@ describe("Checkbox.Group", () => {
           expect(input.validity.valid).toBe(true);
         }
       });
+
+      it("supports server validation", async () => {
+        function Test() {
+          const [serverErrors, setServerErrors] = React.useState({});
+          const onSubmit = (e) => {
+            e.preventDefault();
+            setServerErrors({
+              terms: "You must accept the terms.",
+            });
+          };
+
+          return (
+            <Form validationErrors={serverErrors} onSubmit={onSubmit}>
+              <CheckboxGroup
+                label="Agree to the following"
+                name="terms"
+                validationBehavior="native"
+              >
+                <Checkbox value="terms">Terms and conditions</Checkbox>
+                <Checkbox value="cookies">Cookies</Checkbox>
+                <Checkbox value="privacy">Privacy policy</Checkbox>
+              </CheckboxGroup>
+              <button type="submit">Submit</button>
+            </Form>
+          );
+        }
+
+        const {getAllByRole, getByRole} = render(<Test />);
+
+        const group = getByRole("group");
+
+        expect(group).not.toHaveAttribute("aria-describedby");
+        const button = getByRole("button");
+
+        expect(button).toBeVisible();
+        await user.click(button);
+
+        expect(group).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(group.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "You must accept the terms.",
+        );
+
+        const checkboxes = getAllByRole("checkbox") as HTMLInputElement[];
+
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(false);
+        }
+
+        await user.click(checkboxes[0]);
+        expect(group).not.toHaveAttribute("aria-describedby");
+        for (let input of checkboxes) {
+          expect(input.validity.valid).toBe(true);
+        }
+      });
     });
 
     describe("validationBehavior=aria", () => {
@@ -323,6 +375,35 @@ describe("Checkbox.Group", () => {
         await user.click(checkboxes[2]);
         expect(group).toHaveAttribute("aria-describedby");
       });
+
+      it("supports server validation", async () => {
+        const {getAllByRole, getByRole} = render(
+          <Form validationBehavior="aria" validationErrors={{terms: "You must accept the terms"}}>
+            <CheckboxGroup label="Agree to the following" name="terms">
+              <Checkbox value="terms">Terms and conditions</Checkbox>
+              <Checkbox value="cookies">Cookies</Checkbox>
+              <Checkbox value="privacy">Privacy policy</Checkbox>
+            </CheckboxGroup>
+          </Form>,
+        );
+
+        const group = getByRole("group");
+
+        expect(group).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(group.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "You must accept the terms",
+        );
+
+        const checkboxes = getAllByRole("checkbox");
+
+        for (let input of checkboxes) {
+          expect(input).toHaveAttribute("aria-invalid", "true");
+        }
+
+        // TODO: Fix the following functions to work
+        // await user.click(checkboxes[0]);
+        // expect(group).not.toHaveAttribute("aria-describedby");
+      });
     });
   });
 });
diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx
index 462f93e973..e88356bb57 100644
--- a/packages/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,11 +1,17 @@
 import * as React from "react";
 import {render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
 
 import {Checkbox, CheckboxProps} from "../src";
 
 describe("Checkbox", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Checkbox>Label</Checkbox>);
 
@@ -29,25 +35,21 @@ describe("Checkbox", () => {
     expect(container.querySelector("input")?.checked).toBe(false);
   });
 
-  it("should change value after click", () => {
+  it("should change value after click", async () => {
     const wrapper = render(<Checkbox data-testid="checkbox-test">Option</Checkbox>);
     const checkbox = wrapper.container.querySelector("input")!;
 
     expect(checkbox.checked).toBe(false);
 
-    act(() => {
-      wrapper.getByTestId("checkbox-test").click();
-    });
+    await user.click(wrapper.getByTestId("checkbox-test"));
 
     expect(checkbox.checked).toBe(true);
   });
 
-  it("should ignore events when disabled", () => {
+  it("should ignore events when disabled", async () => {
     const {container} = render(<Checkbox isDisabled>Option</Checkbox>);
 
-    act(() => {
-      userEvent.click(container.querySelector("label")!);
-    });
+    await user.click(container.querySelector("label")!);
 
     expect(container.querySelector("input")?.checked).toBe(false);
   });
@@ -58,7 +60,7 @@ describe("Checkbox", () => {
     expect(container.querySelector("input")?.indeterminate).toBe(true);
   });
 
-  it('should work correctly with "onChange" prop', () => {
+  it('should work correctly with "onChange" prop', async () => {
     const onChange = jest.fn();
     const wrapper = render(
       <Checkbox data-testid="checkbox-test" onChange={onChange}>
@@ -66,11 +68,9 @@ describe("Checkbox", () => {
       </Checkbox>,
     );
 
-    act(() => {
-      wrapper.getByTestId("checkbox-test").click();
-    });
+    await user.click(wrapper.getByTestId("checkbox-test"));
 
-    expect(onChange).toBeCalled();
+    expect(onChange).toHaveBeenCalled();
   });
 
   it('should work correctly with "onFocus" prop', () => {
@@ -87,7 +87,7 @@ describe("Checkbox", () => {
       input.focus();
     });
 
-    expect(onFocus).toBeCalled();
+    expect(onFocus).toHaveBeenCalled();
   });
 
   it("should have required attribute when isRequired with native validationBehavior", () => {
@@ -112,7 +112,7 @@ describe("Checkbox", () => {
     expect(container.querySelector("input")).toHaveAttribute("aria-required", "true");
   });
 
-  it("should work correctly with controlled value", () => {
+  it("should work correctly with controlled value", async () => {
     const onChange = jest.fn();
 
     const Component = (props: CheckboxProps) => {
@@ -138,20 +138,12 @@ describe("Checkbox", () => {
       </Component>,
     );
 
-    act(() => {
-      wrapper.getByTestId("checkbox-test").click();
-    });
+    await user.click(wrapper.getByTestId("checkbox-test"));
 
-    expect(onChange).toBeCalled();
+    expect(onChange).toHaveBeenCalled();
   });
 
   describe("validation", () => {
-    let user;
-
-    beforeEach(() => {
-      user = userEvent.setup();
-    });
-
     describe("validationBehavior=native", () => {
       it("supports isRequired", async () => {
         const {getByRole, getByTestId} = render(
@@ -257,13 +249,11 @@ describe("Checkbox with React Hook Form", () => {
   });
 
   it("should submit form when required field is not empty", async () => {
-    act(() => {
-      checkbox3.click();
-    });
+    const user = userEvent.setup();
 
-    expect(checkbox3.checked).toBe(true);
+    await user.click(checkbox3);
 
-    const user = userEvent.setup();
+    expect(checkbox3.checked).toBe(true);
 
     await user.click(submitButton);
 
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
index 9285924cc8..a79da98a59 100644
--- a/packages/components/checkbox/package.json
+++ b/packages/components/checkbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "2.1.5",
+  "version": "2.3.1",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"
@@ -34,25 +34,26 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-callback-ref": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/checkbox": "3.14.3",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/checkbox": "3.6.5",
-    "@react-stately/toggle": "3.7.4",
-    "@react-types/checkbox": "3.8.1",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/checkbox": "3.14.8",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/checkbox": "3.6.9",
+    "@react-stately/toggle": "3.7.8",
+    "@react-types/checkbox": "3.8.4",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/chip": "workspace:*",
@@ -67,4 +68,4 @@
     "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/checkbox/src/checkbox-group.tsx b/packages/components/checkbox/src/checkbox-group.tsx
index 5f4aec3dbd..33ca09d4c0 100644
--- a/packages/components/checkbox/src/checkbox-group.tsx
+++ b/packages/components/checkbox/src/checkbox-group.tsx
@@ -1,5 +1,4 @@
 import {forwardRef} from "@nextui-org/system";
-import {useMemo} from "react";
 
 import {CheckboxGroupProvider} from "./checkbox-group-context";
 import {UseCheckboxGroupProps, useCheckboxGroup} from "./use-checkbox-group";
@@ -21,16 +20,14 @@ const CheckboxGroup = forwardRef<"div", CheckboxGroupProps>((props, ref) => {
     getErrorMessageProps,
   } = useCheckboxGroup({...props, ref});
 
-  const errorMessageContent = useMemo(() => errorMessage, [isInvalid]);
-
   return (
     <div {...getGroupProps()}>
       {label && <span {...getLabelProps()}>{label}</span>}
       <div {...getWrapperProps()}>
         <CheckboxGroupProvider value={context}>{children}</CheckboxGroupProvider>
       </div>
-      {isInvalid && errorMessageContent ? (
-        <div {...getErrorMessageProps()}>{errorMessageContent}</div>
+      {isInvalid && errorMessage ? (
+        <div {...getErrorMessageProps()}>{errorMessage}</div>
       ) : description ? (
         <div {...getDescriptionProps()}>{description}</div>
       ) : null}
diff --git a/packages/components/checkbox/src/use-checkbox-group.ts b/packages/components/checkbox/src/use-checkbox-group.ts
index ee7eaba973..e735f7f49a 100644
--- a/packages/components/checkbox/src/use-checkbox-group.ts
+++ b/packages/components/checkbox/src/use-checkbox-group.ts
@@ -2,7 +2,6 @@ import type {CheckboxGroupSlots, SlotsToClasses} from "@nextui-org/theme";
 import type {AriaCheckboxGroupProps} from "@react-types/checkbox";
 import type {Orientation} from "@react-types/shared";
 import type {ReactRef} from "@nextui-org/react-utils";
-import type {CheckboxGroupProps} from "@react-types/checkbox";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
 import {useProviderContext} from "@nextui-org/system";
@@ -13,6 +12,7 @@ import {useCheckboxGroup as useReactAriaCheckboxGroup} from "@react-aria/checkbo
 import {CheckboxGroupState, useCheckboxGroupState} from "@react-stately/checkbox";
 import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
 import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 import {CheckboxProps} from "./index";
 
@@ -71,6 +71,7 @@ export type ContextType = {
 
 export function useCheckboxGroup(props: UseCheckboxGroupProps) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const {
     as,
@@ -89,7 +90,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
     orientation = "vertical",
     lineThrough = false,
     isDisabled = false,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     disableAnimation = globalContext?.disableAnimation ?? false,
     isReadOnly,
     isRequired,
@@ -105,7 +106,7 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
 
   const domRef = useDOMRef(ref);
 
-  const checkboxGroupProps = useMemo<CheckboxGroupProps>(() => {
+  const checkboxGroupProps = useMemo(() => {
     return {
       ...otherProps,
       value,
@@ -136,7 +137,6 @@ export function useCheckboxGroup(props: UseCheckboxGroupProps) {
   ]);
 
   const groupState = useCheckboxGroupState(checkboxGroupProps);
-
   const {
     labelProps,
     groupProps,
diff --git a/packages/components/checkbox/src/use-checkbox.ts b/packages/components/checkbox/src/use-checkbox.ts
index 841b93eab6..376541cb1d 100644
--- a/packages/components/checkbox/src/use-checkbox.ts
+++ b/packages/components/checkbox/src/use-checkbox.ts
@@ -3,12 +3,12 @@ import type {AriaCheckboxProps} from "@react-types/checkbox";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
 import {useProviderContext} from "@nextui-org/system";
-import {ReactNode, Ref, useCallback, useId, useState} from "react";
+import {ReactNode, Ref, useCallback, useId} from "react";
 import {useMemo, useRef} from "react";
 import {useToggleState} from "@react-stately/toggle";
 import {checkbox} from "@nextui-org/theme";
 import {useCallbackRef} from "@nextui-org/use-callback-ref";
-import {useHover, usePress} from "@react-aria/interactions";
+import {useHover} from "@react-aria/interactions";
 import {useFocusRing} from "@react-aria/focus";
 import {mergeProps, chain} from "@react-aria/utils";
 import {__DEV__, warn, clsx, dataAttr, safeAriaLabel} from "@nextui-org/shared-utils";
@@ -18,6 +18,7 @@ import {
 } from "@react-aria/checkbox";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 import {mergeRefs} from "@nextui-org/react-utils";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 import {useCheckboxGroupContext} from "./checkbox-group-context";
 
@@ -75,6 +76,7 @@ export type UseCheckboxProps = Omit<Props, "defaultChecked"> &
 export function useCheckbox(props: UseCheckboxProps = {}) {
   const globalContext = useProviderContext();
   const groupContext = useCheckboxGroupContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   const isInGroup = !!groupContext;
 
   const {
@@ -95,13 +97,18 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     isDisabled: isDisabledProp = groupContext?.isDisabled ?? false,
     disableAnimation = groupContext?.disableAnimation ?? globalContext?.disableAnimation ?? false,
     validationState,
-    isInvalid = validationState ? validationState === "invalid" : groupContext?.isInvalid ?? false,
+    isInvalid: isInvalidProp = validationState
+      ? validationState === "invalid"
+      : groupContext?.isInvalid ?? false,
     isIndeterminate = false,
-    validationBehavior = groupContext?.validationBehavior ?? "aria",
+    validationBehavior = isInGroup
+      ? groupContext.validationBehavior
+      : formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     defaultSelected,
     classNames,
     className,
     onValueChange,
+    validate,
     ...otherProps
   } = props;
 
@@ -140,76 +147,73 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
 
   const labelId = useId();
 
-  const ariaCheckboxProps = useMemo(() => {
-    return {
+  const ariaCheckboxProps = useMemo(
+    () => ({
       name,
       value,
       children,
       autoFocus,
       defaultSelected,
-      validationBehavior,
       isIndeterminate,
       isRequired,
-      isInvalid,
+      isInvalid: isInvalidProp,
       isSelected: isSelectedProp,
       isDisabled: isDisabledProp,
       isReadOnly: isReadOnlyProp,
       "aria-label": safeAriaLabel(otherProps["aria-label"], children),
       "aria-labelledby": otherProps["aria-labelledby"] || labelId,
       onChange: onValueChange,
-    };
-  }, [
-    value,
-    name,
-    labelId,
-    children,
-    autoFocus,
-    isInvalid,
-    isIndeterminate,
-    isDisabledProp,
-    isReadOnlyProp,
-    isSelectedProp,
-    defaultSelected,
-    validationBehavior,
-    otherProps["aria-label"],
-    otherProps["aria-labelledby"],
-    onValueChange,
-  ]);
+    }),
+    [
+      name,
+      value,
+      children,
+      autoFocus,
+      defaultSelected,
+      isIndeterminate,
+      isRequired,
+      isInvalidProp,
+      isSelectedProp,
+      isDisabledProp,
+      isReadOnlyProp,
+      otherProps["aria-label"],
+      otherProps["aria-labelledby"],
+      labelId,
+      onValueChange,
+    ],
+  );
 
   const toggleState = useToggleState(ariaCheckboxProps);
 
+  const validationProps = {
+    isInvalid: isInvalidProp,
+    isRequired,
+    validate,
+    validationState,
+    validationBehavior,
+  };
+
   const {
     inputProps,
     isSelected,
     isDisabled,
     isReadOnly,
-    isPressed: isPressedKeyboard,
+    isPressed,
+    isInvalid: isAriaInvalid,
   } = isInGroup
     ? // eslint-disable-next-line
-      useReactAriaCheckboxGroupItem({...ariaCheckboxProps}, groupContext.groupState, inputRef)
+      useReactAriaCheckboxGroupItem(
+        {...ariaCheckboxProps, ...validationProps},
+        groupContext.groupState,
+        inputRef,
+      )
     : // eslint-disable-next-line
-      useReactAriaCheckbox({...ariaCheckboxProps}, toggleState, inputRef);
+      useReactAriaCheckbox({...ariaCheckboxProps, ...validationProps}, toggleState, inputRef);
 
   const isInteractionDisabled = isDisabled || isReadOnly;
+  const isInvalid = validationState === "invalid" || isInvalidProp || isAriaInvalid;
 
-  // Handle press state for full label. Keyboard press state is returned by useCheckbox
-  // since it is handled on the <input> element itself.
-  const [isPressed, setPressed] = useState(false);
-  const {pressProps} = usePress({
-    isDisabled: isInteractionDisabled,
-    onPressStart(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(true);
-      }
-    },
-    onPressEnd(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(false);
-      }
-    },
-  });
-
-  const pressed = isInteractionDisabled ? false : isPressed || isPressedKeyboard;
+  const pressed = isInteractionDisabled ? false : isPressed;
 
   const {hoverProps, isHovered} = useHover({
     isDisabled: inputProps.disabled,
@@ -273,7 +277,7 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
       "data-readonly": dataAttr(inputProps.readOnly),
       "data-focus-visible": dataAttr(isFocusVisible),
       "data-indeterminate": dataAttr(isIndeterminate),
-      ...mergeProps(hoverProps, pressProps, otherProps),
+      ...mergeProps(hoverProps, otherProps),
     };
   }, [
     slots,
@@ -288,7 +292,6 @@ export function useCheckbox(props: UseCheckboxProps = {}) {
     inputProps.readOnly,
     isFocusVisible,
     hoverProps,
-    pressProps,
     otherProps,
   ]);
 
diff --git a/packages/components/checkbox/stories/checkbox-group.stories.tsx b/packages/components/checkbox/stories/checkbox-group.stories.tsx
index 34ad88f04b..6182918020 100644
--- a/packages/components/checkbox/stories/checkbox-group.stories.tsx
+++ b/packages/components/checkbox/stories/checkbox-group.stories.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import {Meta} from "@storybook/react";
 import {checkbox} from "@nextui-org/theme";
 import {button} from "@nextui-org/theme";
+import {Form} from "@nextui-org/form";
 
 import {CheckboxGroup, Checkbox, CheckboxGroupProps} from "../src";
 
@@ -90,7 +91,7 @@ const InvalidTemplate = (args: CheckboxGroupProps) => {
 const FormTemplate = (args: CheckboxGroupProps) => {
   return (
     <form
-      className="flex flex-col items-start gap-4"
+      className="flex flex-col items-start gap-2"
       onSubmit={(e) => {
         const formData = new FormData(e.currentTarget);
         const selectedCities = formData.getAll("favorite-cities");
@@ -135,6 +136,40 @@ const ControlledTemplate = (args: CheckboxGroupProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: CheckboxGroupProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setServerErrors({
+      terms: "Please select a valid animal.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <CheckboxGroup
+        {...args}
+        label="Agree to the following"
+        name="terms"
+        validationBehavior="native"
+      >
+        <Checkbox value="terms">Terms and conditions</Checkbox>
+        <Checkbox value="cookies">Cookies</Checkbox>
+        <Checkbox value="privacy">Privacy policy</Checkbox>
+      </CheckboxGroup>
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
 export const Default = {
   render: Template,
 
@@ -253,6 +288,14 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const DisableAnimation = {
   render: Template,
 
diff --git a/packages/components/checkbox/stories/checkbox.stories.tsx b/packages/components/checkbox/stories/checkbox.stories.tsx
index aa60c33c0d..66824af903 100644
--- a/packages/components/checkbox/stories/checkbox.stories.tsx
+++ b/packages/components/checkbox/stories/checkbox.stories.tsx
@@ -4,6 +4,8 @@ import {checkbox} from "@nextui-org/theme";
 import {CloseIcon} from "@nextui-org/shared-icons";
 import {button} from "@nextui-org/theme";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
+import {ValidationErrors} from "@react-types/shared";
 
 import {Checkbox, CheckboxIconProps, CheckboxProps} from "../src";
 
@@ -75,7 +77,7 @@ const ControlledTemplate = (args: CheckboxProps) => {
 const FormTemplate = (args: CheckboxProps) => {
   return (
     <form
-      className="flex flex-col items-start gap-4"
+      className="flex flex-col items-start gap-2"
       onSubmit={(e) => {
         e.preventDefault();
         const checkbox = e.target["check"] as HTMLInputElement;
@@ -154,6 +156,58 @@ const WithReactHookFormTemplate = (args: CheckboxProps) => {
   );
 };
 
+const WithFormTemplate = (args: CheckboxProps) => {
+  const [submitted, setSubmitted] = React.useState<{[key: string]: FormDataEntryValue} | null>(
+    null,
+  );
+  const [errors, setErrors] = React.useState<ValidationErrors | undefined>(undefined);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    const terms = data.terms;
+
+    if (terms !== "true") {
+      setErrors({terms: "You must agree to the terms and conditions"});
+
+      return;
+    }
+
+    // Clear errors and submit
+    setErrors(undefined);
+    setSubmitted(data);
+  };
+
+  return (
+    <Form validationBehavior="native" validationErrors={errors} onSubmit={onSubmit}>
+      <Checkbox
+        isRequired
+        classNames={{
+          label: "text-small",
+        }}
+        isInvalid={!!errors?.terms}
+        name="terms"
+        validationBehavior="aria"
+        value="true"
+        onValueChange={() => setErrors(undefined)}
+        {...args}
+      >
+        I agree to the terms and conditions
+      </Checkbox>
+      {errors?.terms && <span className="text-danger text-small">{errors.terms}</span>}
+      <button className={button({class: "w-fit"})} type="submit">
+        Submit
+      </button>
+      {submitted && (
+        <div className="text-small text-default-500 mt-4">
+          Submitted data: <pre>{JSON.stringify(submitted, null, 2)}</pre>
+        </div>
+      )}
+    </Form>
+  );
+};
+
 export const Default = {
   args: {
     ...defaultProps,
@@ -249,3 +303,11 @@ export const Required = {
     isRequired: true,
   },
 };
+
+export const WithForm = {
+  render: WithFormTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/chip/CHANGELOG.md b/packages/components/chip/CHANGELOG.md
index 0baf5a900d..cf34292352 100644
--- a/packages/components/chip/CHANGELOG.md
+++ b/packages/components/chip/CHANGELOG.md
@@ -1,5 +1,172 @@
 # @nextui-org/chip
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.33
 
 ### Patch Changes
diff --git a/packages/components/chip/__tests__/chip.test.tsx b/packages/components/chip/__tests__/chip.test.tsx
index 377e4487ef..197f51be43 100644
--- a/packages/components/chip/__tests__/chip.test.tsx
+++ b/packages/components/chip/__tests__/chip.test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 import {Avatar} from "@nextui-org/avatar";
-import {act} from "@testing-library/react-hooks";
+import userEvent from "@testing-library/user-event";
 
 import {Chip} from "../src";
 
@@ -49,13 +49,13 @@ describe("Chip", () => {
     expect(wrapper.getByRole("button")).not.toBeNull();
   });
 
-  it("should call onClose when close button is clicked", () => {
+  it("should call onClose when close button is clicked", async () => {
     const onClose = jest.fn();
     const {getByRole} = render(<Chip onClose={onClose} />);
 
-    act(() => {
-      getByRole("button").click();
-    });
+    const user = userEvent.setup();
+
+    await user.click(getByRole("button"));
 
     expect(onClose).toHaveBeenCalled();
   });
diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
index 527c642ee2..7f966c6018 100644
--- a/packages/components/chip/package.json
+++ b/packages/components/chip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "2.0.33",
+  "version": "2.2.1",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"
@@ -34,19 +34,19 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-types/checkbox": "3.8.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/checkbox": "3.8.4"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/code/CHANGELOG.md b/packages/components/code/CHANGELOG.md
index c824086f20..aaebaf5541 100644
--- a/packages/components/code/CHANGELOG.md
+++ b/packages/components/code/CHANGELOG.md
@@ -1,5 +1,158 @@
 # @nextui-org/code
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.33
 
 ### Patch Changes
diff --git a/packages/components/code/package.json b/packages/components/code/package.json
index 811b747c31..2dcff1d47e 100644
--- a/packages/components/code/package.json
+++ b/packages/components/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "2.0.33",
+  "version": "2.2.1",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"
@@ -34,9 +34,9 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/system-rsc": "workspace:*",
diff --git a/packages/components/date-input/CHANGELOG.md b/packages/components/date-input/CHANGELOG.md
index d2f016b586..3d9c53531a 100644
--- a/packages/components/date-input/CHANGELOG.md
+++ b/packages/components/date-input/CHANGELOG.md
@@ -1,5 +1,159 @@
 # @nextui-org/date-input
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/form@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/form@2.0.1-beta.0
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.4
 
 ### Patch Changes
diff --git a/packages/components/date-input/__tests__/date-input.test.tsx b/packages/components/date-input/__tests__/date-input.test.tsx
index 62dd7d6bbf..fc6e34fee3 100644
--- a/packages/components/date-input/__tests__/date-input.test.tsx
+++ b/packages/components/date-input/__tests__/date-input.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from "react";
-import {act, fireEvent, render} from "@testing-library/react";
+import {fireEvent, render} from "@testing-library/react";
 import {CalendarDate, CalendarDateTime, DateValue, ZonedDateTime} from "@internationalized/date";
 import {pointerMap, triggerPress} from "@nextui-org/test-utils";
 import userEvent from "@testing-library/user-event";
@@ -64,13 +64,11 @@ describe("DateInput", () => {
             );
           }}
           name="date"
+          validationBehavior="aria"
         />,
       );
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       await user.keyboard("01011980");
 
       expect(tree.getByText("Date unavailable.")).toBeInTheDocument();
@@ -205,17 +203,13 @@ describe("DateInput", () => {
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[0]).toHaveFocus();
 
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[1]).toHaveFocus();
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -236,22 +230,14 @@ describe("DateInput", () => {
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[0]).toHaveFocus();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[1]).toHaveFocus();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[2]).toHaveFocus();
       expect(onBlurSpy).toHaveBeenCalledTimes(0);
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
@@ -266,9 +252,7 @@ describe("DateInput", () => {
       expect(onKeyDownSpy).not.toHaveBeenCalled();
       expect(onKeyUpSpy).not.toHaveBeenCalled();
 
-      await act(() => {
-        user.tab();
-      });
+      await user.tab();
 
       expect(segments[0]).toHaveFocus();
       expect(onKeyDownSpy).not.toHaveBeenCalled();
diff --git a/packages/components/date-input/__tests__/time-input.test.tsx b/packages/components/date-input/__tests__/time-input.test.tsx
index da00dab922..ec21a043ec 100644
--- a/packages/components/date-input/__tests__/time-input.test.tsx
+++ b/packages/components/date-input/__tests__/time-input.test.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from "react";
-import {act, fireEvent, render} from "@testing-library/react";
+import {fireEvent, render} from "@testing-library/react";
 import {Time, ZonedDateTime} from "@internationalized/date";
 import {TimeValue} from "@react-types/datepicker";
 import {pointerMap, triggerPress} from "@nextui-org/test-utils";
@@ -237,17 +237,13 @@ describe("TimeInput", () => {
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[0]).toHaveFocus();
 
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[1]).toHaveFocus();
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -268,22 +264,14 @@ describe("TimeInput", () => {
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[0]).toHaveFocus();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[1]).toHaveFocus();
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(segments[2]).toHaveFocus();
       expect(onBlurSpy).toHaveBeenCalledTimes(0);
-      await act(async () => {
-        await user.tab();
-      });
+      await user.tab();
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
@@ -298,10 +286,7 @@ describe("TimeInput", () => {
       expect(onKeyDownSpy).not.toHaveBeenCalled();
       expect(onKeyUpSpy).not.toHaveBeenCalled();
 
-      await act(() => {
-        user.tab();
-      });
-
+      await user.tab();
       expect(segments[0]).toHaveFocus();
       expect(onKeyDownSpy).not.toHaveBeenCalled();
       expect(onKeyUpSpy).toHaveBeenCalledTimes(1);
@@ -383,14 +368,27 @@ describe("TimeInput", () => {
 
   describe(`Validation (validationBehavior="aria")`, () => {
     it("should display errorMessage when timeValue is less than the minimum (controlled)", () => {
-      render(<TimeInput label="Time" minValue={new Time(9)} value={new Time(8)} />);
+      render(
+        <TimeInput
+          label="Time"
+          minValue={new Time(9)}
+          validationBehavior="aria"
+          value={new Time(8)}
+        />,
+      );
 
       expect(document.querySelector("[data-slot=error-message]")).toBeVisible();
     });
 
     it("should display errorMessage when timeValue is less than the minimum (uncontrolled)", async () => {
       const {getAllByRole} = render(
-        <TimeInput defaultValue={new Time(9)} label="Time" minValue={new Time(9)} name="time" />,
+        <TimeInput
+          defaultValue={new Time(9)}
+          label="Time"
+          minValue={new Time(9)}
+          name="time"
+          validationBehavior="aria"
+        />,
       );
 
       const input = document.querySelector("input[name=time]");
@@ -407,14 +405,27 @@ describe("TimeInput", () => {
     });
 
     it("should display errorMessage when timeValue is greater than the maximum (controlled)", () => {
-      render(<TimeInput label="Time" maxValue={new Time(17)} value={new Time(18)} />);
+      render(
+        <TimeInput
+          label="Time"
+          maxValue={new Time(17)}
+          validationBehavior="aria"
+          value={new Time(18)}
+        />,
+      );
 
       expect(document.querySelector("[data-slot=error-message]")).toBeVisible();
     });
 
     it("should display errorMessage when timeValue is greater than the maximum (uncontrolled)", async () => {
       const {getAllByRole} = render(
-        <TimeInput defaultValue={new Time(17)} label="Time" maxValue={new Time(17)} name="time" />,
+        <TimeInput
+          defaultValue={new Time(17)}
+          label="Time"
+          maxValue={new Time(17)}
+          name="time"
+          validationBehavior="aria"
+        />,
       );
 
       const input = document.querySelector("input[name=time]");
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
index 4bac8e625b..45fff96fa0 100644
--- a/packages/components/date-input/package.json
+++ b/packages/components/date-input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-input",
-  "version": "2.1.4",
+  "version": "2.3.1",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"
@@ -34,21 +34,22 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.1.0",
-    "@nextui-org/theme": ">=2.2.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@internationalized/date": "^3.5.4",
-    "@react-aria/datepicker": "3.10.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-stately/datepicker": "3.9.4",
-    "@react-types/datepicker": "3.7.4",
-    "@react-types/shared": "3.23.1",
-    "@react-aria/utils": "3.24.1"
+    "@internationalized/date": "3.5.6",
+    "@react-aria/datepicker": "3.11.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-stately/datepicker": "3.10.3",
+    "@react-types/datepicker": "3.8.3",
+    "@react-types/shared": "3.25.0",
+    "@react-aria/utils": "3.26.0"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",
@@ -60,4 +61,4 @@
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/date-input/src/date-input-segment.tsx b/packages/components/date-input/src/date-input-segment.tsx
index 9b4bbba156..72d9f6d058 100644
--- a/packages/components/date-input/src/date-input-segment.tsx
+++ b/packages/components/date-input/src/date-input-segment.tsx
@@ -22,14 +22,8 @@ export const DateInputSegment: React.FC<DateInputSegmentProps> = ({
   ...otherProps
 }) => {
   const ref = useRef(null);
-
   let {segmentProps} = useDateSegment(segment, state, ref);
 
-  // @ts-expect-error autoCapitalize is not a valid prop
-  // Removing autoCapitalize as it causes bugs in Firefox.
-  // See: https://github.com/adobe/react-spectrum/issues/5599
-  delete segmentProps.autoCapitalize;
-
   return (
     <div
       {...mergeProps(segmentProps, otherProps)}
diff --git a/packages/components/date-input/src/date-input.tsx b/packages/components/date-input/src/date-input.tsx
index daa549d115..cff34b46b8 100644
--- a/packages/components/date-input/src/date-input.tsx
+++ b/packages/components/date-input/src/date-input.tsx
@@ -1,5 +1,5 @@
 import type {DateValue} from "@internationalized/date";
-import type {ForwardedRef, ReactElement, Ref} from "react";
+import type {ForwardedRef, ReactElement} from "react";
 
 import {forwardRef} from "@nextui-org/system";
 
@@ -9,12 +9,14 @@ import {DateInputField} from "./date-input-field";
 
 export interface Props<T extends DateValue> extends UseDateInputProps<T> {}
 
-function DateInput<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
+export type DateInputProps<T extends DateValue = DateValue> = Props<T>;
+
+const DateInput = forwardRef(function DateInput<T extends DateValue>(
+  props: DateInputProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   const {state, slots, classNames, getBaseGroupProps, getInputProps, getFieldProps} =
-    useDateInput<T>({
-      ...props,
-      ref,
-    });
+    useDateInput<T>({...props, ref});
 
   return (
     <DateInputGroup {...getBaseGroupProps()}>
@@ -27,13 +29,6 @@ function DateInput<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLD
       />
     </DateInputGroup>
   );
-}
-
-DateInput.displayName = "NextUI.DateInput";
+}) as <T extends DateValue>(props: DateInputProps<T>) => ReactElement;
 
-export type DateInputProps<T extends DateValue = DateValue> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DateInput) as <T extends DateValue>(
-  props: DateInputProps<T>,
-) => ReactElement;
+export default DateInput;
diff --git a/packages/components/date-input/src/time-input.tsx b/packages/components/date-input/src/time-input.tsx
index a393fc7a17..d0214a5cc5 100644
--- a/packages/components/date-input/src/time-input.tsx
+++ b/packages/components/date-input/src/time-input.tsx
@@ -1,5 +1,5 @@
 import type {TimeValue} from "@react-types/datepicker";
-import type {ForwardedRef, ReactElement, Ref} from "react";
+import type {ForwardedRef, ReactElement} from "react";
 
 import {forwardRef} from "@nextui-org/system";
 
@@ -9,7 +9,12 @@ import {DateInputGroup} from "./date-input-group";
 
 export interface Props<T extends TimeValue> extends UseTimeInputProps<T> {}
 
-function TimeInput<T extends TimeValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
+export type TimeInputProps<T extends TimeValue = TimeValue> = Props<T>;
+
+const TimeInput = forwardRef(function TimeInput<T extends TimeValue>(
+  props: TimeInputProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   const {state, slots, classNames, getBaseGroupProps, getInputProps, getFieldProps} =
     useTimeInput<T>({
       ...props,
@@ -27,13 +32,6 @@ function TimeInput<T extends TimeValue>(props: Props<T>, ref: ForwardedRef<HTMLD
       />
     </DateInputGroup>
   );
-}
-
-TimeInput.displayName = "NextUI.TimeInput";
+}) as <T extends TimeValue>(props: TimeInputProps<T>) => ReactElement;
 
-export type TimeInputProps<T extends TimeValue = TimeValue> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(TimeInput) as <T extends TimeValue>(
-  props: TimeInputProps<T>,
-) => ReactElement;
+export default TimeInput;
diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts
index 5d3f51e06e..e34065333e 100644
--- a/packages/components/date-input/src/use-date-input.ts
+++ b/packages/components/date-input/src/use-date-input.ts
@@ -1,7 +1,8 @@
 import type {DateInputVariantProps, DateInputSlots, SlotsToClasses} from "@nextui-org/theme";
 import type {AriaDateFieldProps} from "@react-types/datepicker";
 import type {SupportedCalendars} from "@nextui-org/system";
-import type {DateValue, Calendar} from "@internationalized/date";
+import type {DateValue} from "@react-types/datepicker";
+import type {Calendar} from "@internationalized/date";
 import type {ReactRef} from "@nextui-org/react-utils";
 import type {DOMAttributes, GroupDOMAttributes} from "@react-types/shared";
 import type {DateInputGroupProps} from "./date-input-group";
@@ -17,6 +18,7 @@ import {useDateFieldState} from "@react-stately/datepicker";
 import {objectToDeps, clsx, dataAttr, getGregorianYearOffset} from "@nextui-org/shared-utils";
 import {dateInput, cn} from "@nextui-org/theme";
 import {useMemo} from "react";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 type NextUIBaseProps<T extends DateValue> = Omit<
   HTMLNextUIProps<"div">,
@@ -114,6 +116,7 @@ export type UseDateInputProps<T extends DateValue> = Props<T> &
 
 export function useDateInput<T extends DateValue>(originalProps: UseDateInputProps<T>) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, dateInput.variantKeys);
 
@@ -143,7 +146,7 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
     innerWrapperProps: innerWrapperPropsProp,
     errorMessageProps: errorMessagePropsProp,
     descriptionProps: descriptionPropsProp,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     shouldForceLeadingZeros = true,
     minValue = globalContext?.defaultDates?.minDate ??
       new CalendarDate(calendarProp, 1900 + gregorianYearOffset, 1, 1),
diff --git a/packages/components/date-input/src/use-time-input.ts b/packages/components/date-input/src/use-time-input.ts
index 042ae11589..7b540a626b 100644
--- a/packages/components/date-input/src/use-time-input.ts
+++ b/packages/components/date-input/src/use-time-input.ts
@@ -14,6 +14,7 @@ import {useTimeFieldState} from "@react-stately/datepicker";
 import {objectToDeps, clsx, dataAttr} from "@nextui-org/shared-utils";
 import {dateInput} from "@nextui-org/theme";
 import {useMemo} from "react";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 type NextUIBaseProps<T extends TimeValue> = Omit<
   HTMLNextUIProps<"div">,
@@ -74,6 +75,7 @@ export type UseTimeInputProps<T extends TimeValue> = Props<T> &
 
 export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputProps<T>) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, dateInput.variantKeys);
 
@@ -92,7 +94,7 @@ export function useTimeInput<T extends TimeValue>(originalProps: UseTimeInputPro
     fieldProps: fieldPropsProp,
     errorMessageProps: errorMessagePropsProp,
     descriptionProps: descriptionPropsProp,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     shouldForceLeadingZeros = true,
     minValue,
     maxValue,
diff --git a/packages/components/date-picker/CHANGELOG.md b/packages/components/date-picker/CHANGELOG.md
index bcc2096ee9..16629cd8bd 100644
--- a/packages/components/date-picker/CHANGELOG.md
+++ b/packages/components/date-picker/CHANGELOG.md
@@ -1,5 +1,298 @@
 # @nextui-org/date-picker
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/calendar@2.2.1
+  - @nextui-org/date-input@2.3.1
+  - @nextui-org/form@2.1.1
+  - @nextui-org/popover@2.3.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/date-input@2.3.0
+  - @nextui-org/calendar@2.2.0
+  - @nextui-org/popover@2.3.0
+  - @nextui-org/form@2.1.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.15
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/calendar@2.1.0-beta.14
+  - @nextui-org/date-input@2.2.0-beta.9
+
+## 2.2.0-beta.14
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/calendar@2.1.0-beta.13
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.2.0-beta.13
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/calendar@2.1.0-beta.12
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/popover@2.2.0-beta.11
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.12
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - support server validation with form
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/calendar@2.1.0-beta.11
+  - @nextui-org/date-input@2.2.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.10
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/form@2.0.1-beta.0
+
+## 2.2.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`78a99b628`](https://github.com/nextui-org/nextui/commit/78a99b628e3fde8808a0cce3c69059d727afd49b)]:
+  - @nextui-org/calendar@2.1.0-beta.10
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.9
+
+## 2.2.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.9
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.8
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/calendar@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.6
+  - @nextui-org/popover@2.2.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/calendar@2.1.0-beta.6
+  - @nextui-org/date-input@2.2.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.6
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/calendar@2.1.0-beta.5
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/calendar@2.1.0-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/calendar@2.1.0-beta.3
+  - @nextui-org/date-input@2.2.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/calendar@2.1.0-beta.2
+  - @nextui-org/date-input@2.2.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c)]:
+  - @nextui-org/popover@2.2.0-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/calendar@2.1.0-beta.1
+  - @nextui-org/date-input@2.2.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3773](https://github.com/nextui-org/nextui/pull/3773) [`a4ab02006`](https://github.com/nextui-org/nextui/commit/a4ab02006a63013e1a25c28c182d999e3d7c9eeb) Thanks [@macci001](https://github.com/macci001)! - Fixes getCalendarProps to propagate the classNames in the calendarProps. (#3769)
+
+- [#3302](https://github.com/nextui-org/nextui/pull/3302) [`a4a1d8fb6`](https://github.com/nextui-org/nextui/commit/a4a1d8fb69dd7f496a179a66af072f72aae0ec17) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add month and year picker to DateRangePicker and RangeCalendar (#3089, #3090)
+
+- [#3248](https://github.com/nextui-org/nextui/pull/3248) [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add support for selectorButtonPlacement property (#3015)
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`a4a1d8fb6`](https://github.com/nextui-org/nextui/commit/a4a1d8fb69dd7f496a179a66af072f72aae0ec17), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/calendar@2.1.0-beta.0
+  - @nextui-org/date-input@2.2.0-beta.0
+  - @nextui-org/popover@2.2.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.8
 
 ### Patch Changes
diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx
index 8d95dd6346..461aa8be3f 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-picker.test.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable jsx-a11y/no-autofocus */
 import * as React from "react";
-import {render, act, fireEvent, waitFor} from "@testing-library/react";
+import {render, act, fireEvent, waitFor, within} from "@testing-library/react";
 import {pointerMap, triggerPress} from "@nextui-org/test-utils";
 import userEvent from "@testing-library/user-event";
 import {CalendarDate, CalendarDateTime} from "@internationalized/date";
 import {NextUIProvider} from "@nextui-org/system";
+import {Form} from "@nextui-org/form";
 
 import {DatePicker as DatePickerBase, DatePickerProps} from "../src";
 
@@ -194,8 +195,45 @@ describe("DatePicker", () => {
       expect(getByTestId("foo")).toHaveAttribute("role", "group");
     });
 
+    it("should work with startContent", () => {
+      const {getByText} = render(<DatePicker label="Date" startContent={<div>start</div>} />);
+
+      expect(getByText("start")).toBeInTheDocument();
+    });
+
+    it("should work with endContent", () => {
+      const {getByText} = render(<DatePicker endContent={<div>end</div>} label="Date" />);
+
+      expect(getByText("end")).toBeInTheDocument();
+    });
+
+    it("should work with startContent and endContent", () => {
+      const {getByText} = render(
+        <DatePicker endContent={<div>end</div>} label="Date" startContent={<div>start</div>} />,
+      );
+
+      expect(getByText("start")).toBeInTheDocument();
+      expect(getByText("end")).toBeInTheDocument();
+    });
+
+    it("should work with selectorButtonPlacement", () => {
+      const {getByRole} = render(
+        <DatePicker label="Date" selectorButtonPlacement="start" startContent={<div>start</div>} />,
+      );
+
+      const button = getByRole("button");
+
+      expect(button).toHaveTextContent("start");
+
+      triggerPress(button);
+
+      const dialog = getByRole("dialog");
+
+      expect(dialog).toBeInTheDocument();
+    });
+
     it("should apply custom dateInput classNames", function () {
-      const {getByRole, getByText} = render(
+      const {getByText} = render(
         <DatePicker
           dateInputClassNames={{
             inputWrapper: "border-green-500",
@@ -209,7 +247,9 @@ describe("DatePicker", () => {
 
       expect(label).toHaveClass("text-green-500");
 
-      const inputWrapper = getByRole("group");
+      const inputWrapper = document.querySelector<HTMLButtonElement>(
+        `div[data-slot="input-wrapper"]`,
+      )!;
 
       expect(inputWrapper).toHaveClass("border-green-500");
     });
@@ -246,19 +286,13 @@ describe("DatePicker", () => {
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       expect(segments[0]).toHaveFocus();
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       expect(segments[1]).toHaveFocus();
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -288,19 +322,13 @@ describe("DatePicker", () => {
       expect(onFocusChangeSpy).not.toHaveBeenCalled();
       expect(onFocusSpy).not.toHaveBeenCalled();
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       expect(segments[0]).toHaveFocus();
       expect(onBlurSpy).not.toHaveBeenCalled();
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
       expect(onFocusSpy).toHaveBeenCalledTimes(1);
 
-      await act(() => {
-        user.click(document.body);
-      });
-
+      await user.click(document.body);
       expect(document.body).toHaveFocus();
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
       expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
@@ -375,10 +403,7 @@ describe("DatePicker", () => {
       expect(document.activeElement).toBe(button);
       expect(button).toHaveFocus();
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       expect(document.body).toHaveFocus();
     });
 
@@ -391,10 +416,7 @@ describe("DatePicker", () => {
       expect(onKeyDownSpy).not.toHaveBeenCalled();
       expect(onKeyUpSpy).not.toHaveBeenCalled();
 
-      await act(async () => {
-        await user.tab();
-      });
-
+      await user.tab();
       expect(segments[0]).toHaveFocus();
       expect(onKeyDownSpy).not.toHaveBeenCalled();
       expect(onKeyUpSpy).toHaveBeenCalledTimes(1);
@@ -720,4 +742,215 @@ describe("DatePicker", () => {
       expect(dialog).not.toBeVisible();
     });
   });
+
+  describe("validation", () => {
+    describe("validationBehavior=native", () => {
+      it("supports isRequired", async () => {
+        const {getByRole, getByTestId} = render(
+          <form data-testid="form">
+            <DatePicker isRequired label="Date" name="date" validationBehavior="native" />
+          </form>,
+        );
+
+        const group = getByRole("group");
+        const input = document.querySelector("input[name=date]") as HTMLInputElement;
+
+        expect(input).toHaveAttribute("required");
+        expect(input.validity.valid).toBe(false);
+        expect(group).not.toHaveAttribute("aria-describedby");
+
+        act(() => {
+          (getByTestId("form") as HTMLFormElement).checkValidity();
+        });
+
+        expect(group).toHaveAttribute("aria-describedby");
+        const getDescription = () =>
+          group
+            .getAttribute("aria-describedby")
+            ?.split(" ")
+            .map((d) => document.getElementById(d)?.textContent)
+            .join(" ");
+
+        expect(getDescription()).toContain("Constraints not satisfied");
+        expect(document.activeElement).toBe(within(group).getAllByRole("spinbutton")[0]);
+
+        await user.keyboard("[ArrowUp][Tab][ArrowUp][Tab][ArrowUp]");
+
+        expect(getDescription()).toContain("Constraints not satisfied");
+        expect(input.validity.valid).toBe(true);
+      });
+    });
+
+    it("supports validate function", async () => {
+      const {getByRole, getByTestId} = render(
+        <Form data-testid="form">
+          <DatePicker
+            defaultValue={new CalendarDate(2020, 2, 3)}
+            label="Value"
+            name="date"
+            validate={(v) => (v.year < 2022 ? "Invalid value" : null)}
+            validationBehavior="native"
+          />
+        </Form>,
+      );
+
+      const group = getByRole("group");
+      const input = document.querySelector("input[name=date]") as HTMLInputElement;
+      const getDescription = () =>
+        group
+          .getAttribute("aria-describedby")
+          ?.split(" ")
+          .map((d) => document.getElementById(d)?.textContent)
+          .join(" ");
+
+      expect(getDescription()).not.toContain("Invalid value");
+      expect(input.validity.valid).toBe(false);
+
+      act(() => {
+        (getByTestId("form") as HTMLFormElement).checkValidity();
+      });
+
+      expect(group).toHaveAttribute("aria-describedby");
+      expect(getDescription()).toContain("Invalid value");
+      expect(document.activeElement).toBe(within(group).getAllByRole("spinbutton")[0]);
+
+      await user.keyboard("[ArrowRight][ArrowRight]2024");
+
+      expect(getDescription()).toContain("Invalid value");
+      expect(input.validity.valid).toBe(true);
+    });
+
+    it("supports server validation", async () => {
+      function Test() {
+        const [serverErrors, setServerErrors] = React.useState({});
+        const onSubmit = (e) => {
+          e.preventDefault();
+          setServerErrors({
+            date: "Invalid value",
+          });
+        };
+
+        return (
+          <Form validationErrors={serverErrors} onSubmit={onSubmit}>
+            <DatePicker label="Value" name="date" validationBehavior="native" />
+            <button data-testid="submit" type="submit">
+              Submit
+            </button>
+          </Form>
+        );
+      }
+
+      const {getByTestId, getByRole} = render(<Test />);
+
+      const group = getByRole("group");
+      const input = document.querySelector("input[name=date]") as HTMLInputElement;
+
+      expect(group).not.toHaveAttribute("aria-describedby");
+
+      await user.click(getByTestId("submit"));
+
+      const getDescription = () =>
+        group
+          .getAttribute("aria-describedby")
+          ?.split(" ")
+          .map((d) => document.getElementById(d)?.textContent)
+          .join(" ");
+
+      expect(getDescription()).toContain("Invalid value");
+      expect(input.validity.valid).toBe(false);
+
+      await user.tab({shift: true});
+      await user.tab({shift: true});
+      await user.keyboard("2024[ArrowLeft]2[ArrowLeft]2");
+      act(() => (document.activeElement as HTMLInputElement)?.blur());
+
+      expect(getDescription()).not.toContain("Invalid value");
+      expect(input.validity.valid).toBe(true);
+    });
+
+    describe("validationBehavior=aria", () => {
+      it("supports minValue and maxValue", async () => {
+        const {getByRole} = render(
+          <Form data-testid="form">
+            <DatePicker
+              defaultValue={new CalendarDate(2019, 2, 3)}
+              label="Date"
+              maxValue={new CalendarDate(2024, 2, 3)}
+              minValue={new CalendarDate(2020, 2, 3)}
+              name="date"
+            />
+          </Form>,
+        );
+
+        const group = getByRole("group");
+        const getDescription = () =>
+          group
+            .getAttribute("aria-describedby")
+            ?.split(" ")
+            .map((d) => document.getElementById(d)?.textContent)
+            .join(" ");
+
+        expect(getDescription()).toContain("Value must be 2/3/2020 or later.");
+
+        await user.keyboard("[Tab][Tab][Tab][ArrowUp]");
+        expect(getDescription()).not.toContain("Value must be 2/3/2020 or later.");
+
+        await user.keyboard("[ArrowUp][ArrowUp][ArrowUp][ArrowUp][ArrowUp]");
+        expect(getDescription()).toContain("Value must be 2/3/2024 or earlier.");
+
+        await user.keyboard("[ArrowDown]");
+        expect(getDescription()).not.toContain("Value must be 2/3/2024 or earlier.");
+      });
+
+      it("supports validate function", async () => {
+        const {getByRole} = render(
+          <Form data-testid="form">
+            <DatePicker
+              defaultValue={new CalendarDate(2020, 2, 3)}
+              label="Value"
+              validate={(v) => (v.year < 2022 ? "Invalid value" : null)}
+            />
+          </Form>,
+        );
+
+        const group = getByRole("group");
+
+        expect(group).toHaveAttribute("aria-describedby");
+        const getDescription = () =>
+          group
+            .getAttribute("aria-describedby")
+            ?.split(" ")
+            .map((d) => document.getElementById(d)?.textContent)
+            .join(" ");
+
+        expect(getDescription()).toContain("Invalid value");
+
+        await user.keyboard("[Tab][ArrowRight][ArrowRight]2024");
+        expect(getDescription()).not.toContain("Invalid value");
+      });
+
+      it("supports server validation", async () => {
+        const {getByRole} = render(
+          <Form validationErrors={{value: "Invalid value"}}>
+            <DatePicker defaultValue={new CalendarDate(2020, 2, 3)} label="Value" name="value" />
+          </Form>,
+        );
+
+        const group = getByRole("group");
+
+        expect(group).toHaveAttribute("aria-describedby");
+        const getDescription = () =>
+          group
+            .getAttribute("aria-describedby")
+            ?.split(" ")
+            .map((d) => document.getElementById(d)?.textContent)
+            .join(" ");
+
+        expect(getDescription()).toContain("Invalid value");
+
+        await user.keyboard("[Tab][ArrowRight][ArrowRight]2024[Tab]");
+        expect(getDescription()).not.toContain("Invalid value");
+      });
+    });
+  });
 });
diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json
index a2c281231c..3889ea3561 100644
--- a/packages/components/date-picker/package.json
+++ b/packages/components/date-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.1.8",
+  "version": "2.3.1",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
@@ -34,38 +34,41 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.1.0",
-    "@nextui-org/theme": ">=2.2.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.4",
+    "@internationalized/date": "3.5.6",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/calendar": "workspace:*",
     "@nextui-org/date-input": "workspace:*",
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/popover": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@react-aria/datepicker": "3.10.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/datepicker": "3.9.4",
-    "@react-stately/overlays": "3.6.7",
-    "@react-stately/utils": "3.10.1",
-    "@react-types/datepicker": "3.7.4",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/datepicker": "3.11.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/datepicker": "3.10.3",
+    "@react-stately/overlays": "3.6.11",
+    "@react-stately/utils": "3.10.4",
+    "@react-types/datepicker": "3.8.3",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/radio": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/test-utils": "workspace:*",
     "@nextui-org/theme": "workspace:*",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/date-picker/src/date-picker.tsx b/packages/components/date-picker/src/date-picker.tsx
index eed11494ec..9904e4f6b8 100644
--- a/packages/components/date-picker/src/date-picker.tsx
+++ b/packages/components/date-picker/src/date-picker.tsx
@@ -1,6 +1,6 @@
 import type {DateValue} from "@internationalized/date";
 
-import {ForwardedRef, ReactElement, Ref, useMemo} from "react";
+import {ForwardedRef, ReactElement, useMemo} from "react";
 import {cloneElement, isValidElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {Button} from "@nextui-org/button";
@@ -12,11 +12,25 @@ import {CalendarBoldIcon} from "@nextui-org/shared-icons";
 
 import {UseDatePickerProps, useDatePicker} from "./use-date-picker";
 
-export interface Props<T extends DateValue> extends UseDatePickerProps<T> {}
+export interface Props<T extends DateValue> extends UseDatePickerProps<T> {
+  /**
+   * The placement of the selector button.
+   * @default "end"
+   */
+  selectorButtonPlacement?: "start" | "end";
+}
+
+export type DatePickerProps<T extends DateValue = DateValue> = Props<T>;
+
+const DatePicker = forwardRef(function DatePicker<T extends DateValue>(
+  props: DatePickerProps<T>,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
+  const {selectorButtonPlacement = "end", ...otherProps} = props;
 
-function DatePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
   const {
     state,
+    startContent,
     endContent,
     selectorIcon,
     showTimeField,
@@ -30,7 +44,7 @@ function DatePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTML
     getCalendarProps,
     CalendarTopContent,
     CalendarBottomContent,
-  } = useDatePicker<T>({...props, ref});
+  } = useDatePicker<T>({...otherProps, ref});
 
   const selectorContent = isValidElement(selectorIcon) ? (
     cloneElement(selectorIcon, getSelectorIconProps())
@@ -67,22 +81,28 @@ function DatePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTML
     </FreeSoloPopover>
   ) : null;
 
+  const dateInputProps = {
+    ...getDateInputProps(),
+    endContent:
+      selectorButtonPlacement === "end" ? (
+        <Button {...getSelectorButtonProps()}>{endContent || selectorContent}</Button>
+      ) : (
+        endContent
+      ),
+    startContent:
+      selectorButtonPlacement === "start" ? (
+        <Button {...getSelectorButtonProps()}>{startContent || selectorContent}</Button>
+      ) : (
+        startContent
+      ),
+  };
+
   return (
     <>
-      <DateInput
-        {...getDateInputProps()}
-        endContent={<Button {...getSelectorButtonProps()}>{endContent || selectorContent}</Button>}
-      />
+      <DateInput {...dateInputProps} />
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
     </>
   );
-}
-
-DatePicker.displayName = "NextUI.DatePicker";
+}) as <T extends DateValue>(props: DatePickerProps<T>) => ReactElement;
 
-export type DatePickerProps<T extends DateValue = DateValue> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DatePicker) as <T extends DateValue>(
-  props: DatePickerProps<T>,
-) => ReactElement;
+export default DatePicker;
diff --git a/packages/components/date-picker/src/date-range-picker-field.tsx b/packages/components/date-picker/src/date-range-picker-field.tsx
index dc9119532c..b26c7497fe 100644
--- a/packages/components/date-picker/src/date-range-picker-field.tsx
+++ b/packages/components/date-picker/src/date-range-picker-field.tsx
@@ -7,7 +7,7 @@ import {createCalendar} from "@internationalized/date";
 import {forwardRef, useRef} from "react";
 import {DateValue} from "@react-types/datepicker";
 import {useDateField as useAriaDateField} from "@react-aria/datepicker";
-import {ForwardedRef, ReactElement, Ref} from "react";
+import {ForwardedRef, ReactElement} from "react";
 import {useDateFieldState} from "@react-stately/datepicker";
 import {DateInputSegment} from "@nextui-org/date-input";
 import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
@@ -29,8 +29,10 @@ export interface Props<T extends DateValue>
   classNames?: SlotsToClasses<DateInputSlots>;
 }
 
-function DateRangePickerField<T extends DateValue>(
-  props: Props<T>,
+export type DateRangePickerFieldProps<T extends DateValue = DateValue> = Props<T>;
+
+const DateRangePickerField = forwardRef(function DateRangePickerField<T extends DateValue>(
+  props: DateRangePickerFieldProps<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {as, slots, createCalendar: createCalendarProp, classNames, ...otherProps} = props;
@@ -76,15 +78,6 @@ function DateRangePickerField<T extends DateValue>(
       <input {...inputProps} ref={inputRef} />
     </Component>
   );
-}
+}) as <T extends DateValue>(props: DateRangePickerFieldProps<T>) => ReactElement;
 
-DateRangePickerField.displayName = "NextUI.DateRangePickerField";
-
-export type DateRangePickerFieldProps<T extends DateValue = DateValue> = Props<T> & {
-  ref?: Ref<HTMLElement>;
-};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DateRangePickerField) as <T extends DateValue>(
-  props: DateRangePickerFieldProps<T>,
-) => ReactElement;
+export default DateRangePickerField;
diff --git a/packages/components/date-picker/src/date-range-picker.tsx b/packages/components/date-picker/src/date-range-picker.tsx
index 67cfe846b8..fef4217149 100644
--- a/packages/components/date-picker/src/date-range-picker.tsx
+++ b/packages/components/date-picker/src/date-range-picker.tsx
@@ -1,6 +1,6 @@
 import type {DateValue} from "@internationalized/date";
 
-import {ForwardedRef, ReactElement, Ref, useMemo} from "react";
+import {ForwardedRef, ReactElement, useMemo} from "react";
 import {cloneElement, isValidElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {Button} from "@nextui-org/button";
@@ -13,12 +13,26 @@ import {CalendarBoldIcon} from "@nextui-org/shared-icons";
 import DateRangePickerField from "./date-range-picker-field";
 import {UseDateRangePickerProps, useDateRangePicker} from "./use-date-range-picker";
 
-export interface Props<T extends DateValue> extends UseDateRangePickerProps<T> {}
+export interface Props<T extends DateValue> extends UseDateRangePickerProps<T> {
+  /**
+   * The placement of the selector button.
+   * @default "end"
+   */
+  selectorButtonPlacement?: "start" | "end";
+}
+
+export type DateRangePickerProps<T extends DateValue = DateValue> = Props<T>;
+
+const DateRangePicker = forwardRef(function DateRangePicker<T extends DateValue>(
+  props: DateRangePickerProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
+  const {selectorButtonPlacement = "end", ...otherProps} = props;
 
-function DateRangePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
   const {
     state,
     slots,
+    startContent,
     endContent,
     selectorIcon,
     showTimeField,
@@ -37,7 +51,7 @@ function DateRangePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef
     getCalendarProps,
     CalendarTopContent,
     CalendarBottomContent,
-  } = useDateRangePicker<T>({...props, ref});
+  } = useDateRangePicker<T>({...otherProps, ref});
 
   const selectorContent = isValidElement(selectorIcon) ? (
     cloneElement(selectorIcon, getSelectorIconProps())
@@ -77,12 +91,25 @@ function DateRangePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef
     </FreeSoloPopover>
   ) : null;
 
+  const dateInputGroupProps = {
+    ...getDateInputGroupProps(),
+    endContent:
+      selectorButtonPlacement === "end" ? (
+        <Button {...getSelectorButtonProps()}>{endContent || selectorContent}</Button>
+      ) : (
+        endContent
+      ),
+    startContent:
+      selectorButtonPlacement === "start" ? (
+        <Button {...getSelectorButtonProps()}>{startContent || selectorContent}</Button>
+      ) : (
+        startContent
+      ),
+  };
+
   return (
     <>
-      <DateInputGroup
-        {...getDateInputGroupProps()}
-        endContent={<Button {...getSelectorButtonProps()}>{endContent || selectorContent}</Button>}
-      >
+      <DateInputGroup {...dateInputGroupProps}>
         <DateRangePickerField {...getStartDateInputProps()} />
         <span {...getSeparatorProps()} aria-hidden="true" role="separator">
           -
@@ -93,15 +120,6 @@ function DateRangePicker<T extends DateValue>(props: Props<T>, ref: ForwardedRef
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
     </>
   );
-}
-
-DateRangePicker.displayName = "NextUI.DateRangePicker";
+}) as <T extends DateValue>(props: DateRangePickerProps<T>) => ReactElement;
 
-export type DateRangePickerProps<T extends DateValue = DateValue> = Props<T> & {
-  ref?: Ref<HTMLElement>;
-};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DateRangePicker) as <T extends DateValue>(
-  props: DateRangePickerProps<T>,
-) => ReactElement;
+export default DateRangePicker;
diff --git a/packages/components/date-picker/src/use-date-picker-base.ts b/packages/components/date-picker/src/use-date-picker-base.ts
index da129c2cc2..8a88836d74 100644
--- a/packages/components/date-picker/src/use-date-picker-base.ts
+++ b/packages/components/date-picker/src/use-date-picker-base.ts
@@ -226,7 +226,6 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
     ref: domRef,
     inputRef,
     description,
-    startContent,
     validationState,
     shouldForceLeadingZeros,
     isInvalid,
@@ -275,6 +274,7 @@ export function useDatePickerBase<T extends DateValue>(originalProps: UseDatePic
 
   return {
     domRef,
+    startContent,
     endContent,
     selectorIcon,
     createCalendar,
diff --git a/packages/components/date-picker/src/use-date-picker.ts b/packages/components/date-picker/src/use-date-picker.ts
index 5f7ebd0245..93ba648e24 100644
--- a/packages/components/date-picker/src/use-date-picker.ts
+++ b/packages/components/date-picker/src/use-date-picker.ts
@@ -15,6 +15,7 @@ import {useDatePickerState} from "@react-stately/datepicker";
 import {AriaDatePickerProps, useDatePicker as useAriaDatePicker} from "@react-aria/datepicker";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
@@ -63,12 +64,17 @@ export function useDatePicker<T extends DateValue>({
   ...originalProps
 }: UseDatePickerProps<T>) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const validationBehavior =
-    originalProps.validationBehavior ?? globalContext?.validationBehavior ?? "aria";
+    originalProps.validationBehavior ??
+    formValidationBehavior ??
+    globalContext?.validationBehavior ??
+    "native";
 
   const {
     domRef,
+    startContent,
     endContent,
     selectorIcon,
     createCalendar,
@@ -204,8 +210,11 @@ export function useDatePicker<T extends DateValue>({
       ...ariaCalendarProps,
       ...calendarProps,
       classNames: {
-        base: slots.calendar({class: classNames?.calendar}),
-        content: slots.calendarContent({class: classNames?.calendarContent}),
+        ...calendarProps.classNames,
+        base: slots.calendar({class: clsx(classNames?.base, calendarProps.classNames?.base)}),
+        content: slots.calendarContent({
+          class: clsx(classNames?.calendarContent, calendarProps.classNames?.content),
+        }),
       },
     };
   };
@@ -228,6 +237,7 @@ export function useDatePicker<T extends DateValue>({
 
   return {
     state,
+    startContent,
     endContent,
     selectorIcon,
     showTimeField,
diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts
index 6e45597178..2dabebb84d 100644
--- a/packages/components/date-picker/src/use-date-range-picker.ts
+++ b/packages/components/date-picker/src/use-date-range-picker.ts
@@ -21,6 +21,7 @@ import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepick
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {dateRangePicker, dateInput, cn} from "@nextui-org/theme";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
@@ -71,8 +72,12 @@ export function useDateRangePicker<T extends DateValue>({
 }: UseDateRangePickerProps<T>) {
   const globalContext = useProviderContext();
 
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   const validationBehavior =
-    originalProps.validationBehavior ?? globalContext?.validationBehavior ?? "aria";
+    originalProps.validationBehavior ??
+    formValidationBehavior ??
+    globalContext?.validationBehavior ??
+    "native";
 
   const {
     domRef,
@@ -395,7 +400,6 @@ export function useDateRangePicker<T extends DateValue>({
       endContent,
       errorMessage,
       isInvalid,
-      startContent,
       validationDetails,
       validationErrors,
       shouldLabelBeOutside,
@@ -422,6 +426,7 @@ export function useDateRangePicker<T extends DateValue>({
     label: originalProps.label,
     slots,
     classNames,
+    startContent,
     endContent,
     selectorIcon,
     showTimeField,
diff --git a/packages/components/date-picker/stories/date-picker.stories.tsx b/packages/components/date-picker/stories/date-picker.stories.tsx
index d662a5415e..49a72bb301 100644
--- a/packages/components/date-picker/stories/date-picker.stories.tsx
+++ b/packages/components/date-picker/stories/date-picker.stories.tsx
@@ -1,3 +1,5 @@
+import type {MappedDateValue} from "@react-types/datepicker";
+
 import React from "react";
 import {Meta} from "@storybook/react";
 import {dateInput, button} from "@nextui-org/theme";
@@ -15,9 +17,11 @@ import {
 } from "@internationalized/date";
 import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
-import {Radio, RadioGroup} from "@nextui-org/radio";
+import {Radio, RadioGroup, RadioProps} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {MoonIcon, SunIcon} from "@nextui-org/shared-icons";
 import {ValidationResult} from "@react-types/shared";
+import {Form} from "@nextui-org/form";
 
 import {DatePicker, DatePickerProps} from "../src";
 
@@ -89,7 +93,9 @@ const FormTemplate = (args: DatePickerProps) => (
     className="flex flex-col gap-2 w-full"
     onSubmit={(e) => {
       e.preventDefault();
-      alert(`Submitted: ${e.target["date"].value}`);
+      const form = e.target as HTMLFormElement;
+
+      alert(`Submitted: ${form["date"].value}`);
     }}
   >
     <DatePicker {...args} name="date" />
@@ -205,7 +211,7 @@ const PresetsTemplate = (args: DatePickerProps) => {
   let nextWeek = startOfWeek(now.add({weeks: 1}), locale);
   let nextMonth = startOfMonth(now.add({months: 1}));
 
-  const CustomRadio = (props) => {
+  const CustomRadio = (props: RadioProps) => {
     const {children, ...otherProps} = props;
 
     return (
@@ -294,7 +300,7 @@ const UnavailableDatesTemplate = (args: DatePickerProps) => {
 
   let {locale} = useLocale();
 
-  let isDateUnavailable = (date) =>
+  let isDateUnavailable = (date: DateValue) =>
     isWeekend(date, locale) ||
     disabledRanges.some(
       (interval) => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0,
@@ -310,6 +316,100 @@ const UnavailableDatesTemplate = (args: DatePickerProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: DatePickerProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      date: "Please select a valid date.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <DatePicker {...args} name="date" />
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
+const StartAndEndContentTemplate = (args: DatePickerProps) => {
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DatePicker {...args} endContent={<MoonIcon />} label="With end content" />
+      <DatePicker {...args} label="With start content" startContent={<SunIcon />} />
+      <DatePicker
+        {...args}
+        endContent={<MoonIcon />}
+        label="With start and end content"
+        startContent={<SunIcon />}
+      />
+    </div>
+  );
+};
+
+const selectorButtonPlacementTemplate = (args: DatePickerProps) => (
+  <div className="w-full max-w-xl flex flex-col items-start gap-4">
+    <DatePicker
+      {...args}
+      label="start inside"
+      labelPlacement="inside"
+      selectorButtonPlacement="start"
+    />
+    <DatePicker
+      {...args}
+      label="start outside"
+      labelPlacement="outside"
+      selectorButtonPlacement="start"
+    />
+    <DatePicker
+      {...args}
+      label="start outside-left"
+      labelPlacement="outside-left"
+      selectorButtonPlacement="start"
+    />
+    <DatePicker
+      {...args}
+      label="start inside with start content"
+      labelPlacement="inside"
+      selectorButtonPlacement="start"
+      startContent={<MoonIcon />}
+    />
+
+    <DatePicker
+      {...args}
+      label="end inside"
+      labelPlacement="inside"
+      selectorButtonPlacement="end"
+    />
+    <DatePicker
+      {...args}
+      label="end outside"
+      labelPlacement="outside"
+      selectorButtonPlacement="end"
+    />
+    <DatePicker
+      {...args}
+      label="end outside-left"
+      labelPlacement="outside-left"
+      selectorButtonPlacement="end"
+    />
+    <DatePicker
+      {...args}
+      endContent={<MoonIcon />}
+      label="end inside with end content"
+      labelPlacement="inside"
+      selectorButtonPlacement="end"
+    />
+  </div>
+);
+
 export const Default = {
   render: Template,
   args: {
@@ -542,7 +642,7 @@ export const WithValidation = {
 
   args: {
     ...defaultProps,
-    validate: (value) => {
+    validate: (value: MappedDateValue<DateValue>) => {
       if (!value) {
         return "Please enter a date";
       }
@@ -554,6 +654,27 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithStartAndEndContent = {
+  render: StartAndEndContentTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const selectorButtonPlacement = {
+  render: selectorButtonPlacementTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithDateInputClassNames = {
   render: Template,
   args: {
diff --git a/packages/components/date-picker/stories/date-range-picker.stories.tsx b/packages/components/date-picker/stories/date-range-picker.stories.tsx
index 78b1fbc57e..1dcac5ac4d 100644
--- a/packages/components/date-picker/stories/date-range-picker.stories.tsx
+++ b/packages/components/date-picker/stories/date-range-picker.stories.tsx
@@ -1,3 +1,5 @@
+import type {MappedDateValue} from "@react-types/datepicker";
+
 import React from "react";
 import {Meta} from "@storybook/react";
 import {dateInput, button} from "@nextui-org/theme";
@@ -17,8 +19,10 @@ import {RangeValue, ValidationResult} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";
 import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
-import {Radio, RadioGroup} from "@nextui-org/radio";
+import {Radio, RadioGroup, RadioProps} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {Form} from "@nextui-org/form";
+import {MoonIcon, SunIcon} from "@nextui-org/shared-icons";
 
 import {DateRangePicker, DateRangePickerProps} from "../src";
 
@@ -89,9 +93,9 @@ const FormTemplate = (args: DateRangePickerProps) => (
     className="flex flex-col gap-2 w-full"
     onSubmit={(e) => {
       e.preventDefault();
-      alert(
-        `Submitted: start -> ${e.target["start-date"].value} end -> ${e.target["end-date"].value}`,
-      );
+      const form = e.target as HTMLFormElement;
+
+      alert(`Submitted: start -> ${form["start-date"].value} end -> ${form["end-date"].value}`);
     }}
   >
     <DateRangePicker {...args} endName="end-date" startName="start-date" />
@@ -282,7 +286,7 @@ const PresetsTemplate = (args: DateRangePickerProps) => {
     end: endOfMonth(now.add({months: 1})),
   };
 
-  const CustomRadio = (props) => {
+  const CustomRadio = (props: RadioProps) => {
     const {children, ...otherProps} = props;
 
     return (
@@ -376,6 +380,101 @@ const PresetsTemplate = (args: DateRangePickerProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: DateRangePickerProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      startDate: "Please select a valid start date.",
+      endDate: "Please select a valid end date.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <DateRangePicker {...args} endName="endDate" label="Date range" startName="startDate" />
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
+const StartAndEndContentTemplate = (args: DateRangePickerProps) => {
+  return (
+    <div className="flex flex-col gap-4 w-full max-w-sm">
+      <DateRangePicker {...args} endContent={<MoonIcon />} label="With end content" />
+      <DateRangePicker {...args} label="With start content" startContent={<SunIcon />} />
+      <DateRangePicker
+        {...args}
+        endContent={<MoonIcon />}
+        label="With start and end content"
+        startContent={<SunIcon />}
+      />
+    </div>
+  );
+};
+
+const selectorButtonPlacementTemplate = (args: DateRangePickerProps) => (
+  <div className="w-full max-w-xl flex flex-col items-start gap-4">
+    <DateRangePicker
+      {...args}
+      label="start inside"
+      labelPlacement="inside"
+      selectorButtonPlacement="start"
+    />
+    <DateRangePicker
+      {...args}
+      label="start outside"
+      labelPlacement="outside"
+      selectorButtonPlacement="start"
+    />
+    <DateRangePicker
+      {...args}
+      label="start outside-left"
+      labelPlacement="outside-left"
+      selectorButtonPlacement="start"
+    />
+    <DateRangePicker
+      {...args}
+      label="start inside with start content"
+      labelPlacement="inside"
+      selectorButtonPlacement="start"
+      startContent={<MoonIcon />}
+    />
+
+    <DateRangePicker
+      {...args}
+      label="end inside"
+      labelPlacement="inside"
+      selectorButtonPlacement="end"
+    />
+    <DateRangePicker
+      {...args}
+      label="end outside"
+      labelPlacement="outside"
+      selectorButtonPlacement="end"
+    />
+    <DateRangePicker
+      {...args}
+      label="end outside-left"
+      labelPlacement="outside-left"
+      selectorButtonPlacement="end"
+    />
+    <DateRangePicker
+      {...args}
+      endContent={<MoonIcon />}
+      label="end inside with end content"
+      labelPlacement="inside"
+      selectorButtonPlacement="end"
+    />
+  </div>
+);
+
 export const Default = {
   render: Template,
   args: {
@@ -383,6 +482,14 @@ export const Default = {
   },
 };
 
+export const WithMonthAndYearPickers = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    showMonthAndYearPickers: true,
+  },
+};
+
 export const VisibleMonths = {
   render: Template,
   args: {
@@ -623,7 +730,7 @@ export const WithValidation = {
 
   args: {
     ...defaultProps,
-    validate: (value) => {
+    validate: (value: RangeValue<MappedDateValue<DateValue>>) => {
       if (!value || !value.start || !value.end) {
         return "Please enter a valid date range";
       }
@@ -637,6 +744,27 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithStartAndEndContent = {
+  render: StartAndEndContentTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const selectorButtonPlacement = {
+  render: selectorButtonPlacementTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const CustomStyles = {
   render: Template,
 
diff --git a/packages/components/divider/CHANGELOG.md b/packages/components/divider/CHANGELOG.md
index f858c18cbe..9d90c91479 100644
--- a/packages/components/divider/CHANGELOG.md
+++ b/packages/components/divider/CHANGELOG.md
@@ -1,5 +1,157 @@
 # @nextui-org/divider
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-rsc-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-rsc-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-rsc-utils@2.0.15-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-rsc-utils@2.0.15-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-rsc-utils@2.0.15-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-rsc-utils@2.0.15-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system-rsc@2.2.0-beta.3
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-rsc-utils@2.0.15-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-rsc-utils@2.0.15-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.0.32
 
 ### Patch Changes
diff --git a/packages/components/divider/package.json b/packages/components/divider/package.json
index 792e140858..9fc0062b4e 100644
--- a/packages/components/divider/package.json
+++ b/packages/components/divider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/divider",
-  "version": "2.0.32",
+  "version": "2.2.1",
   "description": ". A separator is a visual divider between two groups of content",
   "keywords": [
     "divider"
@@ -34,15 +34,15 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-rsc-utils": "workspace:*",
     "@nextui-org/system-rsc": "workspace:*",
-    "@react-types/shared": "3.23.1"
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/drawer/CHANGELOG.md b/packages/components/drawer/CHANGELOG.md
new file mode 100644
index 0000000000..a53dbb37e0
--- /dev/null
+++ b/packages/components/drawer/CHANGELOG.md
@@ -0,0 +1,206 @@
+# @nextui-org/drawer
+
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/modal@2.2.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/modal@2.2.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/modal@2.1.0-beta.14
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/modal@2.1.0-beta.13
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/modal@2.1.0-beta.12
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/modal@2.1.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/modal@2.1.0-beta.10
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/modal@2.1.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/modal@2.1.0-beta.8
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/modal@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4057](https://github.com/nextui-org/nextui/pull/4057) [`d947b9283`](https://github.com/nextui-org/nextui/commit/d947b92833c8e4abc16dae72466cdb922313e9c8) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Drawer styles and transition improved
+
+- Updated dependencies [[`d947b9283`](https://github.com/nextui-org/nextui/commit/d947b92833c8e4abc16dae72466cdb922313e9c8)]:
+  - @nextui-org/modal@2.1.0-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/modal@2.1.0-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/modal@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/modal@2.1.0-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/modal@2.1.0-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/modal@2.1.0-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`2d6ae74c3`](https://github.com/nextui-org/nextui/commit/2d6ae74c36a157472bd4b06b8580e7db163eddcc), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/modal@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
diff --git a/packages/components/drawer/README.md b/packages/components/drawer/README.md
new file mode 100644
index 0000000000..881c5193b7
--- /dev/null
+++ b/packages/components/drawer/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/drawer
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/drawer
+# or
+npm i @nextui-org/drawer
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/components/drawer/__tests__/drawer.test.tsx b/packages/components/drawer/__tests__/drawer.test.tsx
new file mode 100644
index 0000000000..85178372c5
--- /dev/null
+++ b/packages/components/drawer/__tests__/drawer.test.tsx
@@ -0,0 +1,110 @@
+import "@testing-library/jest-dom";
+import * as React from "react";
+import {render, fireEvent} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter} from "../src";
+// e.g. console.error Warning: Function components cannot be given refs.
+// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
+const spy = jest.spyOn(console, "error").mockImplementation(() => {});
+
+describe("Drawer", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render correctly", () => {
+    const wrapper = render(
+      <Drawer isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    expect(() => wrapper.unmount()).not.toThrow();
+    expect(spy).toHaveBeenCalledTimes(0);
+  });
+
+  it("ref should be forwarded", () => {
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <Drawer ref={ref} isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should have the proper 'aria' attributes", () => {
+    const {getByRole, getByText} = render(
+      <Drawer isOpen>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const drawer = getByRole("dialog");
+
+    expect(drawer).toHaveAttribute("aria-modal", "true");
+    expect(drawer).toHaveAttribute("role", "dialog");
+
+    const drawerHeader = getByText("Drawer header");
+
+    expect(drawer).toHaveAttribute("aria-labelledby", drawerHeader.id);
+
+    const drawerBody = getByText("Drawer body");
+
+    expect(drawer).toHaveAttribute("aria-describedby", drawerBody.id);
+  });
+
+  test("should fire 'onOpenChange' callback when close button is clicked", async () => {
+    const onClose = jest.fn();
+
+    const {getByLabelText} = render(
+      <Drawer isOpen onClose={onClose}>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const closeButton = getByLabelText("Close");
+    const user = userEvent.setup();
+
+    await user.click(closeButton);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should hide the drawer when pressing the escape key", () => {
+    const onClose = jest.fn();
+
+    const wrapper = render(
+      <Drawer isOpen onClose={onClose}>
+        <DrawerContent>
+          <DrawerHeader>Drawer header</DrawerHeader>
+          <DrawerBody>Drawer body</DrawerBody>
+          <DrawerFooter>Drawer footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    );
+
+    const drawer = wrapper.getByRole("dialog");
+
+    fireEvent.keyDown(drawer, {key: "Escape"});
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/components/drawer/package.json b/packages/components/drawer/package.json
new file mode 100644
index 0000000000..7538605bf1
--- /dev/null
+++ b/packages/components/drawer/package.json
@@ -0,0 +1,67 @@
+{
+  "name": "@nextui-org/drawer",
+  "version": "2.2.1",
+  "description": "Used to render a content that slides in from the side of the screen.",
+  "keywords": [
+    "drawer"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/drawer"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
+  },
+  "dependencies": {
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/framer-utils": "workspace:*",
+    "@nextui-org/modal": "workspace:*"
+  },
+  "devDependencies": {
+    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/input": "workspace:*",
+    "@nextui-org/checkbox": "workspace:*",
+    "@nextui-org/tooltip": "workspace:*",
+    "@nextui-org/image": "workspace:*",
+    "@nextui-org/button": "workspace:*",
+    "@nextui-org/avatar": "workspace:*",
+    "@nextui-org/link": "workspace:*",
+    "@nextui-org/switch": "workspace:*",
+    "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/use-disclosure": "workspace:*",
+    "react-lorem-component": "0.13.0",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/components/drawer/src/drawer.tsx b/packages/components/drawer/src/drawer.tsx
new file mode 100644
index 0000000000..e362911ccb
--- /dev/null
+++ b/packages/components/drawer/src/drawer.tsx
@@ -0,0 +1,22 @@
+import {forwardRef} from "@nextui-org/system";
+import {Modal} from "@nextui-org/modal";
+
+import {useDrawer, UseDrawerProps} from "./use-drawer";
+
+export interface DrawerProps extends UseDrawerProps {
+  children: React.ReactNode;
+}
+
+const Drawer = forwardRef<"div", DrawerProps>(({children, ...props}, ref) => {
+  const {domRef, getModalProps} = useDrawer({...props, ref});
+
+  return (
+    <Modal ref={domRef} {...getModalProps()}>
+      {children}
+    </Modal>
+  );
+});
+
+Drawer.displayName = "NextUI.Drawer";
+
+export default Drawer;
diff --git a/packages/components/drawer/src/index.ts b/packages/components/drawer/src/index.ts
new file mode 100644
index 0000000000..d171778a5b
--- /dev/null
+++ b/packages/components/drawer/src/index.ts
@@ -0,0 +1,20 @@
+import {ModalHeader, ModalBody, ModalFooter, ModalContent} from "@nextui-org/modal";
+
+import Drawer from "./drawer";
+
+// export types
+export type {DrawerProps} from "./drawer";
+
+// export hooks
+export {useDrawer} from "./use-drawer";
+
+// export component
+export {Drawer};
+
+// export subcomponents
+export {
+  ModalHeader as DrawerHeader,
+  ModalBody as DrawerBody,
+  ModalFooter as DrawerFooter,
+  ModalContent as DrawerContent,
+};
diff --git a/packages/components/drawer/src/use-drawer.ts b/packages/components/drawer/src/use-drawer.ts
new file mode 100644
index 0000000000..3a820bb467
--- /dev/null
+++ b/packages/components/drawer/src/use-drawer.ts
@@ -0,0 +1,97 @@
+import type {ModalProps} from "@nextui-org/modal";
+
+import {drawer} from "@nextui-org/theme";
+import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
+import {useCallback, useMemo} from "react";
+import {TRANSITION_EASINGS} from "@nextui-org/framer-utils";
+import {clsx, isEmpty} from "@nextui-org/shared-utils";
+import {PropGetter} from "@nextui-org/system";
+
+interface Props extends Omit<ModalProps, "placement" | "scrollBehavior" | "children"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+  /**
+   * The placement of the drawer.
+   */
+  placement?: "top" | "right" | "bottom" | "left";
+  /**
+   * The scroll behavior of the drawer.
+   */
+  scrollBehavior?: "inside" | "outside";
+}
+
+export type UseDrawerProps = Props;
+
+export function useDrawer(originalProps: UseDrawerProps) {
+  const {
+    ref,
+    className,
+    classNames,
+    placement = "right",
+    scrollBehavior = "inside",
+    size = "md",
+    motionProps: drawerMotionProps,
+    ...otherProps
+  } = originalProps;
+
+  const domRef = useDOMRef(ref);
+
+  const motionProps = useMemo(() => {
+    if (!isEmpty(drawerMotionProps)) return drawerMotionProps;
+
+    const key = placement === "left" || placement === "right" ? "x" : "y";
+
+    return {
+      variants: {
+        enter: {
+          [key]: 0,
+          transition: {
+            [key]: {
+              duration: 0.2,
+              ease: TRANSITION_EASINGS.easeOut,
+            },
+          },
+        },
+        exit: {
+          [key]: placement === "top" || placement === "left" ? "-100%" : "100%",
+          transition: {
+            [key]: {
+              duration: 0.1,
+              ease: TRANSITION_EASINGS.easeIn,
+            },
+          },
+        },
+      },
+    };
+  }, [placement, drawerMotionProps]);
+
+  const baseStyles = clsx(classNames?.base, className);
+
+  const slots = useMemo(
+    () =>
+      drawer({
+        size,
+        placement,
+      }),
+    [size, placement],
+  );
+
+  const getModalProps = useCallback<PropGetter>(() => {
+    return {
+      classNames: {
+        ...classNames,
+        base: slots.base({class: baseStyles}),
+      },
+      motionProps,
+      scrollBehavior,
+      size,
+      ...otherProps,
+    };
+  }, [baseStyles, classNames, motionProps, scrollBehavior, size, otherProps]);
+
+  return {domRef, getModalProps};
+}
+
+export type UseDrawerReturn = ReturnType<typeof useDrawer>;
diff --git a/packages/components/drawer/stories/drawer.stories.tsx b/packages/components/drawer/stories/drawer.stories.tsx
new file mode 100644
index 0000000000..92be13f41f
--- /dev/null
+++ b/packages/components/drawer/stories/drawer.stories.tsx
@@ -0,0 +1,557 @@
+/* eslint-disable jsx-a11y/no-autofocus */
+import React from "react";
+import {Meta} from "@storybook/react";
+import {drawer} from "@nextui-org/theme";
+import {Button} from "@nextui-org/button";
+import {Input} from "@nextui-org/input";
+import {Checkbox} from "@nextui-org/checkbox";
+import {Link} from "@nextui-org/link";
+import {Tooltip} from "@nextui-org/tooltip";
+import {Image} from "@nextui-org/image";
+import {Avatar, AvatarGroup} from "@nextui-org/avatar";
+import {MailFilledIcon, LockFilledIcon} from "@nextui-org/shared-icons";
+import {useDisclosure} from "@nextui-org/use-disclosure";
+
+import {Drawer, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerProps} from "../src";
+
+export default {
+  title: "Components/Drawer",
+  component: Drawer,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+      },
+      options: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"],
+    },
+    placement: {
+      control: {
+        type: "select",
+      },
+      options: ["left", "right", "top", "bottom"],
+    },
+    radius: {
+      control: {
+        type: "select",
+      },
+      options: ["none", "sm", "md", "lg"],
+    },
+    backdrop: {
+      control: {
+        type: "select",
+      },
+      options: ["transparent", "blur", "opaque"],
+    },
+    disableAnimation: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isDismissable: {
+      control: {
+        type: "boolean",
+      },
+    },
+    isKeyboardDismissDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex justify-center items-center w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof Drawer>;
+
+const defaultProps = {
+  ...drawer.defaultVariants,
+  isDismissable: true,
+  isKeyboardDismissDisabled: false,
+};
+
+const content = (
+  <DrawerContent>
+    {(onClose) => (
+      <>
+        <DrawerHeader className="flex flex-col gap-1">Log in</DrawerHeader>
+        <DrawerBody>
+          <Input
+            autoFocus
+            endContent={
+              <MailFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            }
+            label="Email"
+            placeholder="Enter your email"
+            variant="bordered"
+          />
+          <Input
+            endContent={
+              <LockFilledIcon className="text-2xl text-default-400 pointer-events-none flex-shrink-0" />
+            }
+            label="Password"
+            placeholder="Enter your password"
+            type="password"
+            variant="bordered"
+          />
+          <div className="flex py-2 px-1 justify-between">
+            <Checkbox
+              classNames={{
+                label: "text-sm",
+              }}
+            >
+              Remember me
+            </Checkbox>
+            <Link color="primary" href="#" size="sm">
+              Forgot password?
+            </Link>
+          </div>
+        </DrawerBody>
+        <DrawerFooter>
+          <Button color="danger" variant="flat" onPress={onClose}>
+            Close
+          </Button>
+          <Button color="primary" onPress={onClose}>
+            Sign in
+          </Button>
+        </DrawerFooter>
+      </>
+    )}
+  </DrawerContent>
+);
+
+const Template = (args: DrawerProps) => {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
+
+  return (
+    <>
+      <Button onPress={onOpen}>Open Drawer</Button>
+      <Drawer {...args} isOpen={isOpen} onOpenChange={onOpenChange}>
+        {content}
+      </Drawer>
+    </>
+  );
+};
+
+const PlacementTemplate = (args: DrawerProps) => {
+  const [placement, setPlacement] = React.useState<DrawerProps["placement"]>("right");
+  const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
+
+  const handlePress = (placement: DrawerProps["placement"]) => {
+    setPlacement(placement);
+    onOpen();
+  };
+
+  const placements = ["right", "left", "top", "bottom"] as DrawerProps["placement"][];
+
+  return (
+    <>
+      <div className="flex flex-wrap gap-2 px-4">
+        {placements.map((placement) => (
+          <Button
+            key={placement}
+            color="primary"
+            variant="flat"
+            onPress={() => handlePress(placement)}
+          >
+            Open Drawer {placement}
+          </Button>
+        ))}
+      </div>
+      <Drawer {...args} isOpen={isOpen} placement={placement} onOpenChange={onOpenChange}>
+        {content}
+      </Drawer>
+    </>
+  );
+};
+
+const CustomStylesTemplate = (args: DrawerProps) => {
+  const {isOpen, onOpen, onOpenChange} = useDisclosure({defaultOpen: args.defaultOpen});
+
+  return (
+    <>
+      <Button
+        className="text-default-500"
+        endContent={
+          <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M5.75 1.25a.75.75 0 1 0-1.5 0v.823l-.392.044c-.9.121-1.658.38-2.26.982s-.861 1.36-.982 2.26C.5 6.225.5 7.328.5 8.695v.11l.117 3.337c.121.9.38 1.658.982 2.26s1.36.861 2.26.982c.867.117 1.969.117 3.337.117h1.658l3.337-.117c.9-.121 1.658-.38 2.26-.982s.861-1.36.982-2.26c.117-.867.117-1.969.117-3.337v-.11l-.117-3.337c-.121-.9-.38-1.658-.982-2.26s-1.36-.861-2.26-.982l-.44-.048V1.25a.75.75 0 0 0-1.5 0v.756L8.853 2H7.195q-.78-.002-1.445.006zm4.5 3v-.744L8.798 3.5H7.25l-1.5.007v.743a.75.75 0 1 1-1.5 0v-.67l-.192.023c-.734.099-1.122.279-1.399.556s-.457.665-.556 1.399C2.002 6.313 2 7.315 2 8.75l.103 3.192c.099.734.279 1.122.556 1.399s.665.457 1.399.556c.755.101 1.756.103 3.192.103h1.548l3.192-.103c.734-.099 1.122-.279 1.399-.556s.457-.665.556-1.399c.102-.755.103-1.757.103-3.192l-.103-3.192c-.099-.734-.279-1.122-.556-1.399s-.665-.457-1.399-.556l-.241-.028v.675a.75.75 0 0 1-1.5 0zm-5 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0m0 3.5a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M8 8.5A.75.75 0 1 0 8 7a.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0M11.5 8.5a.75.75 0 1 0 0-1.5.75.75 0 1 0 0 1.5m.75 2.75a.75.75 0 1 1-1.5 0 .75.75 0 1 1 1.5 0"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+          </svg>
+        }
+        variant="flat"
+        onPress={onOpen}
+      >
+        See Event
+      </Button>
+      <Drawer
+        {...args}
+        hideCloseButton
+        backdrop="blur"
+        classNames={{
+          base: "data-[placement=right]:sm:m-2 data-[placement=left]:sm:m-2  rounded-medium",
+        }}
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+      >
+        <DrawerContent>
+          {(onClose) => (
+            <>
+              <DrawerHeader className="absolute top-0 inset-x-0 z-50 flex flex-row gap-2 px-2 py-2 border-b border-default-200/50 justify-between bg-content1/50 backdrop-saturate-150 backdrop-blur-lg">
+                <Tooltip content="Close">
+                  <Button
+                    isIconOnly
+                    className="text-default-400"
+                    size="sm"
+                    variant="light"
+                    onPress={onClose}
+                  >
+                    <svg
+                      fill="none"
+                      height="20"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                      width="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="m13 17 5-5-5-5M6 17l5-5-5-5" />
+                    </svg>
+                  </Button>
+                </Tooltip>
+                <div className="w-full flex justify-start gap-2">
+                  <Button
+                    className="font-medium text-small text-default-500"
+                    size="sm"
+                    startContent={
+                      <svg
+                        height="16"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M3.85.75c-.908 0-1.702.328-2.265.933-.558.599-.835 1.41-.835 2.29V7.88c0 .801.23 1.548.697 2.129.472.587 1.15.96 1.951 1.06a.75.75 0 1 0 .185-1.489c-.435-.054-.752-.243-.967-.51-.219-.273-.366-.673-.366-1.19V3.973c0-.568.176-.993.433-1.268.25-.27.632-.455 1.167-.455h4.146c.479 0 .828.146 1.071.359.246.215.43.54.497.979a.75.75 0 0 0 1.483-.23c-.115-.739-.447-1.4-.99-1.877C9.51 1 8.796.75 7.996.75zM7.9 4.828c-.908 0-1.702.326-2.265.93-.558.6-.835 1.41-.835 2.29v3.905c0 .879.275 1.69.833 2.289.563.605 1.357.931 2.267.931h4.144c.91 0 1.705-.326 2.268-.931.558-.599.833-1.41.833-2.289V8.048c0-.879-.275-1.69-.833-2.289-.563-.605-1.357-.931-2.267-.931zm-1.6 3.22c0-.568.176-.992.432-1.266.25-.27.632-.454 1.168-.454h4.145c.54 0 .92.185 1.17.453.255.274.43.698.43 1.267v3.905c0 .569-.175.993-.43 1.267-.25.268-.631.453-1.17.453H7.898c-.54 0-.92-.185-1.17-.453-.255-.274-.43-.698-.43-1.267z"
+                          fill="currentColor"
+                          fillRule="evenodd"
+                        />
+                      </svg>
+                    }
+                    variant="flat"
+                  >
+                    Copy Link
+                  </Button>
+                  <Button
+                    className="font-medium text-small text-default-500"
+                    endContent={
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="M7 17 17 7M7 7h10v10" />
+                      </svg>
+                    }
+                    size="sm"
+                    variant="flat"
+                  >
+                    Event Page
+                  </Button>
+                </div>
+                <div className="flex gap-1 items-center">
+                  <Tooltip content="Previous">
+                    <Button isIconOnly className="text-default-500" size="sm" variant="flat">
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="m18 15-6-6-6 6" />
+                      </svg>
+                    </Button>
+                  </Tooltip>
+                  <Tooltip content="Next">
+                    <Button isIconOnly className="text-default-500" size="sm" variant="flat">
+                      <svg
+                        fill="none"
+                        height="16"
+                        stroke="currentColor"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth="2"
+                        viewBox="0 0 24 24"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path d="m6 9 6 6 6-6" />
+                      </svg>
+                    </Button>
+                  </Tooltip>
+                </div>
+              </DrawerHeader>
+              <DrawerBody className="pt-16">
+                <div className="flex w-full justify-center items-center pt-4">
+                  <Image
+                    isBlurred
+                    isZoomed
+                    alt="Event image"
+                    className="aspect-square w-full hover:scale-110"
+                    height={300}
+                    src="https://nextuipro.nyc3.cdn.digitaloceanspaces.com/components-images/places/san-francisco.png"
+                  />
+                </div>
+                <div className="flex flex-col gap-2 py-4">
+                  <h1 className="text-2xl font-bold leading-7">SF Bay Area Meetup in November</h1>
+                  <p className="text-sm text-default-500">
+                    555 California St, San Francisco, CA 94103
+                  </p>
+                  <div className="mt-4 flex flex-col gap-3">
+                    <div className="flex gap-3 items-center">
+                      <div className="flex-none border-1 border-default-200/50 rounded-small text-center w-11 overflow-hidden">
+                        <div className="text-tiny bg-default-100 py-0.5 text-default-500">Nov</div>
+                        <div className="flex items-center justify-center font-semibold text-medium h-6 text-default-500">
+                          19
+                        </div>
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <p className="text-medium text-foreground font-medium">
+                          Tuesday, November 19
+                        </p>
+                        <p className="text-small text-default-500">5:00 PM - 9:00 PM PST</p>
+                      </div>
+                    </div>
+                    <div className="flex gap-3 items-center">
+                      <div className="flex items-center justify-center border-1 border-default-200/50 rounded-small w-11 h-11">
+                        <svg
+                          className="text-default-500"
+                          height="20"
+                          viewBox="0 0 16 16"
+                          width="20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <g
+                            fill="none"
+                            fillRule="evenodd"
+                            stroke="currentColor"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="1.5"
+                          >
+                            <path d="M2 6.854C2 11.02 7.04 15 8 15s6-3.98 6-8.146C14 3.621 11.314 1 8 1S2 3.62 2 6.854" />
+                            <path d="M9.5 6.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+                          </g>
+                        </svg>
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <Link
+                          isExternal
+                          showAnchorIcon
+                          anchorIcon={
+                            <svg
+                              className="group-hover:text-inherit text-default-400 transition-[color,transform] group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+                              fill="none"
+                              height="16"
+                              stroke="currentColor"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth="2"
+                              viewBox="0 0 24 24"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path d="M7 17 17 7M7 7h10v10" />
+                            </svg>
+                          }
+                          className="group gap-x-0.5 text-medium text-foreground font-medium"
+                          href="https://www.google.com/maps/place/555+California+St,+San+Francisco,+CA+94103"
+                          rel="noreferrer noopener"
+                        >
+                          555 California St suite 500
+                        </Link>
+                        <p className="text-small text-default-500">San Francisco, California</p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-medium font-medium">About the event</span>
+                      <div className="text-medium text-default-500 flex flex-col gap-2">
+                        <p>
+                          Hey Bay Area! We are excited to announce our next meetup on Tuesday,
+                          November 19th.
+                        </p>
+                        <p>
+                          Join us for an evening of insightful discussions and hands-on workshops
+                          focused on the latest developments in web development and design. Our
+                          featured speakers will share their experiences with modern frontend
+                          frameworks, responsive design patterns, and emerging web technologies.
+                          You&apos;ll have the opportunity to network with fellow developers and
+                          designers while enjoying refreshments and snacks.
+                        </p>
+                        <p>
+                          During the main session, we&apos;ll dive deep into practical examples of
+                          building scalable applications, exploring best practices for component
+                          architecture, and understanding advanced state management techniques. Our
+                          interactive workshop portion will let you apply these concepts directly,
+                          with experienced mentors available to provide guidance and answer your
+                          questions. Whether you&apos;re a seasoned developer or just starting your
+                          journey, you&apos;ll find valuable takeaways from this session.
+                        </p>
+
+                        <p className="mt-4">
+                          Brought to you by the{" "}
+                          <Link className="text-default-700" href="https://nextui.org">
+                            NextUI team
+                          </Link>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-small text-default-500">Hosted By</span>
+                      <div className="flex gap-2 items-center">
+                        <Avatar
+                          name="NextUI"
+                          size="sm"
+                          src="https://nextui.org/android-chrome-192x192.png"
+                        />
+                        <span className="text-small text-default-500">NextUI Team</span>
+                      </div>
+                    </div>
+                    <div className="flex flex-col mt-4 gap-3 items-start">
+                      <span className="text-small text-default-500">105 Going</span>
+                      <div className="flex gap-2 items-center">
+                        <AvatarGroup
+                          isBordered
+                          classNames={{
+                            base: "pl-2",
+                            count: "text-default-500 text-tiny bg-default-100",
+                          }}
+                          size="sm"
+                          total={101}
+                        >
+                          <Tooltip content="Alex">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Alex"
+                              src="https://i.pravatar.cc/150?u=a04258114e29026708c"
+                            />
+                          </Tooltip>
+                          <Tooltip content="Joe">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Joe"
+                              src="https://i.pravatar.cc/150?u=a04258114e290267084"
+                            />
+                          </Tooltip>
+                          <Tooltip content="John">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="John"
+                              src="https://i.pravatar.cc/150?u=a04258a2462d826712d"
+                            />
+                          </Tooltip>
+                          <Tooltip content="Jane">
+                            <Avatar
+                              className="data-[hover=true]:!translate-x-0"
+                              name="Jane"
+                              src="https://i.pravatar.cc/150?u=a04258114e29026702d"
+                            />
+                          </Tooltip>
+                        </AvatarGroup>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </DrawerBody>
+              <DrawerFooter className="flex flex-col gap-1">
+                <Link className="text-default-400" href="mailto:hello@nextui.org" size="sm">
+                  Contact the host
+                </Link>
+                <Link className="text-default-400" href="mailto:hello@nextui.org" size="sm">
+                  Report event
+                </Link>
+              </DrawerFooter>
+            </>
+          )}
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const DefaultOpen = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    defaultOpen: true,
+  },
+};
+
+export const Placement = {
+  render: PlacementTemplate,
+  args: {
+    ...defaultProps,
+    placement: "right",
+  },
+};
+
+export const DisableAnimation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    disableAnimation: true,
+  },
+};
+
+export const CustomMotion = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    motionProps: {
+      variants: {
+        enter: {
+          opacity: 1,
+          x: 0,
+          duration: 0.3,
+        },
+        exit: {
+          x: 100,
+          opacity: 0,
+          duration: 0.3,
+        },
+      },
+    },
+  },
+};
+
+export const CustomStyles = {
+  render: CustomStylesTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/drawer/tsconfig.json b/packages/components/drawer/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/drawer/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/drawer/tsup.config.ts b/packages/components/drawer/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/drawer/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/components/dropdown/CHANGELOG.md b/packages/components/dropdown/CHANGELOG.md
index 3f59691259..71b9e88bd0 100644
--- a/packages/components/dropdown/CHANGELOG.md
+++ b/packages/components/dropdown/CHANGELOG.md
@@ -1,5 +1,236 @@
 # @nextui-org/dropdown
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/menu@2.2.1
+  - @nextui-org/popover@2.3.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix typecheck
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4198](https://github.com/nextui-org/nextui/pull/4198) [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix forwardRef render functions not using ref
+
+- Updated dependencies [[`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8)]:
+  - @nextui-org/menu@2.2.0
+  - @nextui-org/popover@2.3.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies [[`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9)]:
+  - @nextui-org/menu@2.1.0-beta.13
+  - @nextui-org/popover@2.2.0-beta.12
+
+## 2.2.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`d37007c69`](https://github.com/nextui-org/nextui/commit/d37007c69c3e1ff4a66d414cbb1a4a38bb22264c)]:
+  - @nextui-org/menu@2.1.0-beta.12
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.2.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/menu@2.1.0-beta.11
+  - @nextui-org/popover@2.2.0-beta.11
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/menu@2.1.0-beta.10
+  - @nextui-org/popover@2.2.0-beta.10
+  - @nextui-org/aria-utils@2.1.0-beta.9
+
+## 2.2.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies [[`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac)]:
+  - @nextui-org/menu@2.1.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.9
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/menu@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/menu@2.1.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/menu@2.1.0-beta.6
+  - @nextui-org/popover@2.2.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/menu@2.1.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.6
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/menu@2.1.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/menu@2.1.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/menu@2.1.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c)]:
+  - @nextui-org/popover@2.2.0-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/menu@2.1.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a), [`2aebfcca5`](https://github.com/nextui-org/nextui/commit/2aebfcca5906fb72a7f751273b38e41a40dc16a3), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/menu@2.1.0-beta.0
+  - @nextui-org/popover@2.2.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.31
 
 ### Patch Changes
diff --git a/packages/components/dropdown/__tests__/dropdown.test.tsx b/packages/components/dropdown/__tests__/dropdown.test.tsx
index 51be87d10d..370d5ca718 100644
--- a/packages/components/dropdown/__tests__/dropdown.test.tsx
+++ b/packages/components/dropdown/__tests__/dropdown.test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {act, render, fireEvent} from "@testing-library/react";
 import {Button} from "@nextui-org/button";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {keyCodes} from "@nextui-org/test-utils";
 import {User} from "@nextui-org/user";
 import {Image} from "@nextui-org/image";
@@ -14,6 +14,11 @@ import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection}
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
 describe("Dropdown", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -144,11 +149,8 @@ describe("Dropdown", () => {
 
     expect(triggerButton).toBeTruthy();
 
-    await act(async () => {
-      await userEvent.click(triggerButton);
-    });
-
-    expect(spy).toBeCalledTimes(0);
+    await user.click(triggerButton);
+    expect(spy).toHaveBeenCalledTimes(0);
 
     let menu = wrapper.queryByRole("menu");
 
@@ -182,13 +184,11 @@ describe("Dropdown", () => {
 
     let triggerButton = wrapper.getByTestId("trigger-test");
 
-    expect(onOpenChange).toBeCalledTimes(0);
+    expect(onOpenChange).toHaveBeenCalledTimes(0);
 
-    act(() => {
-      triggerButton.click();
-    });
+    await user.click(triggerButton);
 
-    expect(onOpenChange).toBeCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
 
     let menu = wrapper.getByRole("menu");
 
@@ -201,12 +201,10 @@ describe("Dropdown", () => {
 
     expect(menuItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
+    await user.click(menuItems[1]);
 
-      expect(onSelectionChange).toBeCalledTimes(1);
-      expect(onOpenChange).toBeCalled();
-    });
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalled();
   });
 
   it("should work with multiple selection (controlled)", async () => {
@@ -236,13 +234,11 @@ describe("Dropdown", () => {
 
     let triggerButton = wrapper.getByTestId("trigger-test");
 
-    expect(onOpenChange).toBeCalledTimes(0);
+    expect(onOpenChange).toHaveBeenCalledTimes(0);
 
-    act(() => {
-      triggerButton.click();
-    });
+    await user.click(triggerButton);
 
-    expect(onOpenChange).toBeCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
 
     let menu = wrapper.getByRole("menu");
 
@@ -255,12 +251,10 @@ describe("Dropdown", () => {
 
     expect(menuItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(menuItems[0]);
+    await user.click(menuItems[0]);
 
-      expect(onSelectionChange).toBeCalledTimes(1);
-      expect(onOpenChange).toBeCalled();
-    });
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalled();
   });
 
   it("should show checkmarks if selectionMode is single and has a selected item", () => {
@@ -366,7 +360,7 @@ describe("Dropdown", () => {
     expect(checkmark1).toBeFalsy();
   });
 
-  it("should not open on disabled button", () => {
+  it("should not open on disabled button", async () => {
     const wrapper = render(
       <Dropdown>
         <DropdownTrigger>
@@ -389,16 +383,14 @@ describe("Dropdown", () => {
 
     expect(triggerButton).toBeTruthy();
 
-    act(() => {
-      triggerButton.click();
-    });
+    await user.click(triggerButton);
 
     let menu = wrapper.queryByRole("menu");
 
     expect(menu).toBeFalsy();
   });
 
-  it("should not open on disabled dropdown", () => {
+  it("should not open on disabled dropdown", async () => {
     const wrapper = render(
       <Dropdown isDisabled>
         <DropdownTrigger>
@@ -419,16 +411,14 @@ describe("Dropdown", () => {
 
     expect(triggerButton).toBeTruthy();
 
-    act(() => {
-      triggerButton.click();
-    });
+    await user.click(triggerButton);
 
     let menu = wrapper.queryByRole("menu");
 
     expect(menu).toBeFalsy();
   });
 
-  it("should not select on disabled item", () => {
+  it("should not select on disabled item", async () => {
     const onSelectionChange = jest.fn();
     const wrapper = render(
       <Dropdown isOpen>
@@ -455,11 +445,9 @@ describe("Dropdown", () => {
 
     expect(menuItems.length).toBe(4);
 
-    act(() => {
-      menuItems[1].click();
-    });
+    await user.click(menuItems[1]);
 
-    expect(onSelectionChange).toBeCalledTimes(0);
+    expect(onSelectionChange).toHaveBeenCalledTimes(0);
   });
 
   it("should render without error (custom trigger with isDisabled)", async () => {
@@ -488,7 +476,7 @@ describe("Dropdown", () => {
       </Dropdown>,
     );
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
 
     spy.mockRestore();
 
@@ -502,7 +490,7 @@ describe("Dropdown", () => {
       </Dropdown>,
     );
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
 
     spy.mockRestore();
 
@@ -516,7 +504,7 @@ describe("Dropdown", () => {
       </Dropdown>,
     );
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
 
     spy.mockRestore();
 
@@ -534,7 +522,7 @@ describe("Dropdown", () => {
       </Dropdown>,
     );
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
 
     spy.mockRestore();
   });
@@ -572,17 +560,13 @@ describe("Dropdown", () => {
     );
 
     const dropdown = wrapper.getByTestId("dropdown");
-
     const dropdown2 = wrapper.getByTestId("dropdown2");
 
-    expect(dropdown).not.toBeNull();
-
-    expect(dropdown2).not.toBeNull();
+    expect(dropdown).toBeVisible();
+    expect(dropdown2).toBeVisible();
 
-    // open the dropdown listbox by clicking dropdownor button in the first dropdown
-    await act(async () => {
-      await userEvent.click(dropdown);
-    });
+    // open the dropdown listbox by clicking dropdown button in the first dropdown
+    await user.click(dropdown);
 
     // assert that the first dropdown listbox is open
     expect(dropdown).toHaveAttribute("aria-expanded", "true");
@@ -591,9 +575,7 @@ describe("Dropdown", () => {
     expect(dropdown2).toHaveAttribute("aria-expanded", "false");
 
     // close the dropdown listbox by clicking the second dropdown
-    await act(async () => {
-      await userEvent.click(dropdown2);
-    });
+    await user.click(dropdown2);
 
     // assert that the first dropdown listbox is closed
     expect(dropdown).toHaveAttribute("aria-expanded", "false");
@@ -601,281 +583,259 @@ describe("Dropdown", () => {
     // assert that the second dropdown listbox is open
     expect(dropdown2).toHaveAttribute("aria-expanded", "true");
   });
-});
 
-describe("Keyboard interactions", () => {
-  it("should focus on the first item on keyDown (Enter)", async () => {
-    const wrapper = render(
-      <Dropdown>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu disallowEmptySelection aria-label="Actions" selectionMode="single">
-          <DropdownItem key="new">New file</DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-          <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>,
-    );
-
-    let triggerButton = wrapper.getByTestId("trigger-test");
+  describe("Keyboard interactions", () => {
+    it("should focus on the first item on keyDown (Enter)", async () => {
+      const wrapper = render(
+        <Dropdown>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu disallowEmptySelection aria-label="Actions" selectionMode="single">
+            <DropdownItem key="new">New file</DropdownItem>
+            <DropdownItem key="copy">Copy link</DropdownItem>
+            <DropdownItem key="edit">Edit file</DropdownItem>
+            <DropdownItem key="delete" color="danger">
+              Delete file
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    act(() => {
-      triggerButton.focus();
-    });
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    expect(triggerButton).toHaveFocus();
+      act(() => {
+        triggerButton.focus();
+      });
 
-    fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+      expect(triggerButton).toHaveFocus();
 
-    let menu = wrapper.queryByRole("menu");
+      fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
 
-    expect(menu).toBeTruthy();
+      let menu = wrapper.queryByRole("menu");
 
-    let menuItems = wrapper.getAllByRole("menuitemradio");
+      expect(menu).toBeTruthy();
 
-    expect(menuItems.length).toBe(4);
+      let menuItems = wrapper.getAllByRole("menuitemradio");
 
-    expect(menuItems[0]).toHaveFocus();
-  });
+      expect(menuItems.length).toBe(4);
 
-  it("should focus on the first item on keyDown (Space)", async () => {
-    const wrapper = render(
-      <Dropdown>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu disallowEmptySelection aria-label="Actions" selectionMode="single">
-          <DropdownItem key="new">New file</DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-          <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>,
-    );
+      expect(menuItems[0]).toHaveFocus();
+    });
 
-    let triggerButton = wrapper.getByTestId("trigger-test");
+    it("should focus on the first item on keyDown (Space)", async () => {
+      const wrapper = render(
+        <Dropdown>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu disallowEmptySelection aria-label="Actions" selectionMode="single">
+            <DropdownItem key="new">New file</DropdownItem>
+            <DropdownItem key="copy">Copy link</DropdownItem>
+            <DropdownItem key="edit">Edit file</DropdownItem>
+            <DropdownItem key="delete" color="danger">
+              Delete file
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    act(() => {
-      triggerButton.focus();
-    });
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    expect(triggerButton).toHaveFocus();
+      act(() => {
+        triggerButton.focus();
+      });
 
-    fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
+      expect(triggerButton).toHaveFocus();
 
-    let menu = wrapper.queryByRole("menu");
+      fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
 
-    expect(menu).toBeTruthy();
+      let menu = wrapper.queryByRole("menu");
 
-    let menuItems = wrapper.getAllByRole("menuitemradio");
+      expect(menu).toBeTruthy();
 
-    expect(menuItems.length).toBe(4);
+      let menuItems = wrapper.getAllByRole("menuitemradio");
 
-    expect(menuItems[0]).toHaveFocus();
-  });
+      expect(menuItems.length).toBe(4);
 
-  it("should press the item on keyDown (Enter)", async () => {
-    const user = userEvent.setup();
+      expect(menuItems[0]).toHaveFocus();
+    });
 
-    const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+    it("should press the item on keyDown (Enter)", async () => {
+      const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
 
-    const wrapper = render(
-      <Dropdown>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu aria-label="Actions" selectionMode="single">
-          <DropdownItem
-            key="new"
-            onPress={() => {
-              /* eslint-disable no-console */
-              console.log("ENTER");
-            }}
-          >
-            New file
-          </DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-          <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>,
-    );
+      const wrapper = render(
+        <Dropdown>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Actions" selectionMode="single">
+            <DropdownItem
+              key="new"
+              onPress={() => {
+                /* eslint-disable no-console */
+                console.log("ENTER");
+              }}
+            >
+              New file
+            </DropdownItem>
+            <DropdownItem key="copy">Copy link</DropdownItem>
+            <DropdownItem key="edit">Edit file</DropdownItem>
+            <DropdownItem key="delete" color="danger">
+              Delete file
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    let triggerButton = wrapper.getByTestId("trigger-test");
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    act(() => {
-      triggerButton.focus();
-    });
+      act(() => {
+        triggerButton.focus();
+      });
 
-    expect(triggerButton).toHaveFocus();
+      expect(triggerButton).toHaveFocus();
 
-    fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+      fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
 
-    let menu = wrapper.queryByRole("menu");
+      let menu = wrapper.queryByRole("menu");
 
-    expect(menu).toBeTruthy();
+      expect(menu).toBeTruthy();
 
-    let menuItems = wrapper.getAllByRole("menuitemradio");
+      let menuItems = wrapper.getAllByRole("menuitemradio");
 
-    expect(menuItems.length).toBe(4);
+      expect(menuItems.length).toBe(4);
 
-    expect(menuItems[0]).toHaveFocus();
+      expect(menuItems[0]).toHaveFocus();
 
-    await act(async () => {
       await user.keyboard("[Enter]");
-    });
 
-    expect(logSpy).toHaveBeenCalledWith("ENTER");
-
-    logSpy.mockRestore();
-  });
+      expect(logSpy).toHaveBeenCalledWith("ENTER");
 
-  it("should press the item on keyDown (Space)", async () => {
-    const user = userEvent.setup();
+      logSpy.mockRestore();
+    });
 
-    const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+    it("should press the item on keyDown (Space)", async () => {
+      const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
 
-    const wrapper = render(
-      <Dropdown>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu aria-label="Actions" selectionMode="single">
-          <DropdownItem
-            key="new"
-            onPress={() => {
-              /* eslint-disable no-console */
-              console.log("SPACE");
-            }}
-          >
-            New file
-          </DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-          <DropdownItem key="edit">Edit file</DropdownItem>
-          <DropdownItem key="delete" color="danger">
-            Delete file
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>,
-    );
+      const wrapper = render(
+        <Dropdown>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Actions" selectionMode="single">
+            <DropdownItem
+              key="new"
+              onPress={() => {
+                /* eslint-disable no-console */
+                console.log("SPACE");
+              }}
+            >
+              New file
+            </DropdownItem>
+            <DropdownItem key="copy">Copy link</DropdownItem>
+            <DropdownItem key="edit">Edit file</DropdownItem>
+            <DropdownItem key="delete" color="danger">
+              Delete file
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    let triggerButton = wrapper.getByTestId("trigger-test");
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    act(() => {
-      triggerButton.focus();
-    });
+      act(() => {
+        triggerButton.focus();
+      });
 
-    expect(triggerButton).toHaveFocus();
+      expect(triggerButton).toHaveFocus();
 
-    fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+      fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
 
-    let menu = wrapper.queryByRole("menu");
+      let menu = wrapper.queryByRole("menu");
 
-    expect(menu).toBeTruthy();
+      expect(menu).toBeTruthy();
 
-    let menuItems = wrapper.getAllByRole("menuitemradio");
+      let menuItems = wrapper.getAllByRole("menuitemradio");
 
-    expect(menuItems.length).toBe(4);
+      expect(menuItems.length).toBe(4);
 
-    expect(menuItems[0]).toHaveFocus();
+      expect(menuItems[0]).toHaveFocus();
 
-    await act(async () => {
       await user.keyboard("[Space]");
-    });
 
-    expect(logSpy).toHaveBeenCalledWith("SPACE");
+      expect(logSpy).toHaveBeenCalledWith("SPACE");
 
-    logSpy.mockRestore();
-  });
+      logSpy.mockRestore();
+    });
 
-  it("should respect closeOnSelect setting of DropdownItem (static)", async () => {
-    const onOpenChange = jest.fn();
-    const wrapper = render(
-      <Dropdown onOpenChange={onOpenChange}>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu aria-label="Actions">
-          <DropdownItem key="new" closeOnSelect={false}>
-            New file
-          </DropdownItem>
-          <DropdownItem key="copy">Copy link</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>,
-    );
+    it("should respect closeOnSelect setting of DropdownItem (static)", async () => {
+      const onOpenChange = jest.fn();
+      const wrapper = render(
+        <Dropdown onOpenChange={onOpenChange}>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Actions">
+            <DropdownItem key="new" closeOnSelect={false}>
+              New file
+            </DropdownItem>
+            <DropdownItem key="copy">Copy link</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    let triggerButton = wrapper.getByTestId("trigger-test");
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    act(() => {
-      triggerButton.click();
-    });
-    expect(onOpenChange).toBeCalledTimes(1);
+      await user.click(triggerButton);
 
-    let menuItems = wrapper.getAllByRole("menuitem");
+      expect(onOpenChange).toHaveBeenCalledTimes(1);
 
-    await act(async () => {
-      await userEvent.click(menuItems[0]);
-      expect(onOpenChange).toBeCalledTimes(1);
-    });
+      let menuItems = wrapper.getAllByRole("menuitem");
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
-      expect(onOpenChange).toBeCalledTimes(2);
-    });
-  });
+      await user.click(menuItems[0]);
+      expect(onOpenChange).toHaveBeenCalledTimes(1);
 
-  it("should respect closeOnSelect setting of DropdownItem (dynamic)", async () => {
-    const onOpenChange = jest.fn();
-    const items = [
-      {
-        key: "new",
-        label: "New file",
-      },
-      {
-        key: "copy",
-        label: "Copy link",
-      },
-    ];
-    const wrapper = render(
-      <Dropdown onOpenChange={onOpenChange}>
-        <DropdownTrigger>
-          <Button data-testid="trigger-test">Trigger</Button>
-        </DropdownTrigger>
-        <DropdownMenu aria-label="Actions" items={items}>
-          {(item) => (
-            <DropdownItem key={item.key} closeOnSelect={item.key !== "new"}>
-              {item.label}
-            </DropdownItem>
-          )}
-        </DropdownMenu>
-      </Dropdown>,
-    );
+      await user.click(menuItems[1]);
+      expect(onOpenChange).toHaveBeenCalledTimes(2);
+    });
 
-    let triggerButton = wrapper.getByTestId("trigger-test");
+    it("should respect closeOnSelect setting of DropdownItem (dynamic)", async () => {
+      const onOpenChange = jest.fn();
+      const items = [
+        {
+          key: "new",
+          label: "New file",
+        },
+        {
+          key: "copy",
+          label: "Copy link",
+        },
+      ];
+      const wrapper = render(
+        <Dropdown onOpenChange={onOpenChange}>
+          <DropdownTrigger>
+            <Button data-testid="trigger-test">Trigger</Button>
+          </DropdownTrigger>
+          <DropdownMenu aria-label="Actions" items={items}>
+            {(item) => (
+              <DropdownItem key={item.key} closeOnSelect={item.key !== "new"}>
+                {item.label}
+              </DropdownItem>
+            )}
+          </DropdownMenu>
+        </Dropdown>,
+      );
 
-    act(() => {
-      triggerButton.click();
-    });
-    expect(onOpenChange).toBeCalledTimes(1);
+      let triggerButton = wrapper.getByTestId("trigger-test");
 
-    let menuItems = wrapper.getAllByRole("menuitem");
+      await user.click(triggerButton);
+      expect(onOpenChange).toHaveBeenCalledTimes(1);
 
-    await act(async () => {
-      await userEvent.click(menuItems[0]);
-      expect(onOpenChange).toBeCalledTimes(1);
-    });
+      let menuItems = wrapper.getAllByRole("menuitem");
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
-      expect(onOpenChange).toBeCalledTimes(2);
+      await user.click(menuItems[0]);
+      expect(onOpenChange).toHaveBeenCalledTimes(2);
     });
   });
 });
diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json
index 7542abbf0f..8c4d7d8949 100644
--- a/packages/components/dropdown/package.json
+++ b/packages/components/dropdown/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.1.31",
+  "version": "2.3.1",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "framer-motion": ">=10.17.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",
@@ -46,11 +46,11 @@
     "@nextui-org/popover": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/menu": "3.14.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/menu": "3.7.1",
-    "@react-types/menu": "3.9.9"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/menu": "3.15.5",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/menu": "3.8.3",
+    "@react-types/menu": "3.9.12"
   },
   "devDependencies": {
     "@nextui-org/avatar": "workspace:*",
@@ -62,9 +62,9 @@
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/user": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/dropdown/src/dropdown-menu.tsx b/packages/components/dropdown/src/dropdown-menu.tsx
index 11617934c6..82c065b781 100644
--- a/packages/components/dropdown/src/dropdown-menu.tsx
+++ b/packages/components/dropdown/src/dropdown-menu.tsx
@@ -2,13 +2,18 @@ import {PopoverContent} from "@nextui-org/popover";
 import {FocusScope} from "@react-aria/focus";
 import {forwardRef} from "@nextui-org/system";
 import {Menu, MenuProps} from "@nextui-org/menu";
-import {ForwardedRef, ReactElement, Ref} from "react";
+import {ForwardedRef, ReactElement} from "react";
 
 import {useDropdownContext} from "./dropdown-context";
 
 interface Props<T extends object = object> extends Omit<MenuProps<T>, "menuProps"> {}
 
-function DropdownMenu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElement>) {
+export type DropdownMenuProps<T extends object = object> = Props<T>;
+
+const DropdownMenu = forwardRef(function DropdownMenu<T extends object>(
+  props: DropdownMenuProps<T>,
+  ref: ForwardedRef<HTMLUListElement>,
+) {
   const {getMenuProps} = useDropdownContext();
 
   return (
@@ -18,13 +23,6 @@ function DropdownMenu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLU
       </FocusScope>
     </PopoverContent>
   );
-}
-
-export type DropdownMenuProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(DropdownMenu) as <T extends object>(
-  props: DropdownMenuProps<T>,
-) => ReactElement;
+}) as <T extends object>(props: DropdownMenuProps<T>) => ReactElement;
 
-DropdownMenu.displayName = "NextUI.DropdownMenu";
+export default DropdownMenu;
diff --git a/packages/components/dropdown/src/dropdown-trigger.tsx b/packages/components/dropdown/src/dropdown-trigger.tsx
index 5217e188d3..0157d2e25f 100644
--- a/packages/components/dropdown/src/dropdown-trigger.tsx
+++ b/packages/components/dropdown/src/dropdown-trigger.tsx
@@ -1,23 +1,24 @@
-import {forwardRef} from "@nextui-org/system";
 import {PopoverTrigger} from "@nextui-org/popover";
 
 import {useDropdownContext} from "./dropdown-context";
 
 export interface DropdownTriggerProps {
   children?: React.ReactNode;
+  className?: string;
+  [key: string]: any;
 }
 
 /**
  * DropdownTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const DropdownTrigger = forwardRef<"button", DropdownTriggerProps>((props, _) => {
+const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {getMenuTriggerProps} = useDropdownContext();
 
   const {children, ...otherProps} = props;
 
   return <PopoverTrigger {...getMenuTriggerProps(otherProps)}>{children}</PopoverTrigger>;
-});
+};
 
 DropdownTrigger.displayName = "NextUI.DropdownTrigger";
 
diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts
index cff1cc1b9e..fa78241ab3 100644
--- a/packages/components/dropdown/src/use-dropdown.ts
+++ b/packages/components/dropdown/src/use-dropdown.ts
@@ -77,7 +77,7 @@ const getCloseOnSelect = <T extends object>(
   return props?.closeOnSelect;
 };
 
-export function useDropdown(props: UseDropdownProps) {
+export function useDropdown(props: UseDropdownProps): UseDropdownReturn {
   const globalContext = useProviderContext();
 
   const {
@@ -212,4 +212,18 @@ export function useDropdown(props: UseDropdownProps) {
   };
 }
 
-export type UseDropdownReturn = ReturnType<typeof useDropdown>;
+// export type UseDropdownReturn = ReturnType<typeof useDropdown>;
+
+export type UseDropdownReturn = {
+  Component: string | React.ElementType;
+  menuRef: React.RefObject<HTMLUListElement>;
+  menuProps: any;
+  classNames: string;
+  closeOnSelect: boolean;
+  onClose: () => void;
+  autoFocus: any;
+  disableAnimation: boolean;
+  getPopoverProps: PropGetter;
+  getMenuProps: <T extends object>(props?: Partial<MenuProps<T>>, ref?: Ref<any>) => MenuProps;
+  getMenuTriggerProps: (props?: any, ref?: Ref<any>) => any;
+};
diff --git a/packages/components/form/CHANGELOG.md b/packages/components/form/CHANGELOG.md
new file mode 100644
index 0000000000..5d950a628a
--- /dev/null
+++ b/packages/components/form/CHANGELOG.md
@@ -0,0 +1,69 @@
+# @nextui-org/form
+
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system@2.4.1
+  - @nextui-org/theme@2.4.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8)]:
+  - @nextui-org/system@2.4.0
+  - @nextui-org/theme@2.4.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.0.1-beta.1
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.0.1-beta.0
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - add form component
diff --git a/packages/components/form/README.md b/packages/components/form/README.md
new file mode 100644
index 0000000000..ed42241ec3
--- /dev/null
+++ b/packages/components/form/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/form
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/form
+# or
+npm i @nextui-org/form
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/components/form/package.json b/packages/components/form/package.json
new file mode 100644
index 0000000000..782b275cec
--- /dev/null
+++ b/packages/components/form/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "@nextui-org/form",
+  "version": "2.1.1",
+  "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
+  "keywords": [
+    "form"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/form"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/shared": "3.25.0",
+    "@react-stately/form": "3.0.6",
+    "@react-types/form": "^3.7.8"
+  },
+  "devDependencies": {
+    "@nextui-org/button": "workspace:*",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/components/form/src/base-form.tsx b/packages/components/form/src/base-form.tsx
new file mode 100644
index 0000000000..b8b8e4158d
--- /dev/null
+++ b/packages/components/form/src/base-form.tsx
@@ -0,0 +1,45 @@
+/*
+ * This file is copied from https://github.dev/adobe/react-spectrum/blob/2d4521098a3b4999f2e98b4d52d22483ee3451c8/packages/react-aria-components/src/Form.tsx
+ * We copied this internally to avoid installing the complete react-aria-components package.
+ */
+
+import type {FormProps as SharedFormProps} from "@react-types/form";
+
+import {FormValidationContext} from "@react-stately/form";
+import React, {createContext, ForwardedRef, forwardRef, useMemo} from "react";
+import {form} from "@nextui-org/theme";
+
+import {ContextValue, DOMProps, useContextProps} from "./utils";
+
+export interface FormProps extends SharedFormProps, DOMProps {
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when a field value is missing or invalid, or mark fields as required
+   * or invalid via ARIA.
+   * @default 'native'
+   */
+  validationBehavior?: "aria" | "native";
+}
+
+export const FormContext = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
+
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  let {validationErrors, validationBehavior = "native", children, className, ...domProps} = props;
+
+  const styles = useMemo(() => form({className}), [className]);
+
+  return (
+    <form noValidate={validationBehavior !== "native"} {...domProps} ref={ref} className={styles}>
+      <FormContext.Provider value={{...props, validationBehavior}}>
+        <FormValidationContext.Provider value={validationErrors ?? {}}>
+          {children}
+        </FormValidationContext.Provider>
+      </FormContext.Provider>
+    </form>
+  );
+});
diff --git a/packages/components/form/src/form.tsx b/packages/components/form/src/form.tsx
new file mode 100644
index 0000000000..f5bae8a497
--- /dev/null
+++ b/packages/components/form/src/form.tsx
@@ -0,0 +1,11 @@
+import {useProviderContext} from "@nextui-org/system";
+
+import {Form as AriaForm, FormProps} from "./base-form";
+
+export const Form = (props: FormProps) => {
+  const globalContext = useProviderContext();
+  const validationBehavior =
+    props.validationBehavior ?? globalContext?.validationBehavior ?? "aria";
+
+  return <AriaForm {...props} validationBehavior={validationBehavior} />;
+};
diff --git a/packages/components/form/src/index.ts b/packages/components/form/src/index.ts
new file mode 100644
index 0000000000..a45d37b3e0
--- /dev/null
+++ b/packages/components/form/src/index.ts
@@ -0,0 +1,11 @@
+// export types
+export type {FormProps} from "./base-form";
+
+// export hooks
+export {useSlottedContext} from "./utils";
+
+// export context
+export {FormContext} from "./base-form";
+
+// export component
+export {Form} from "./form";
diff --git a/packages/components/form/src/utils.ts b/packages/components/form/src/utils.ts
new file mode 100644
index 0000000000..2f90c2974a
--- /dev/null
+++ b/packages/components/form/src/utils.ts
@@ -0,0 +1,106 @@
+/*
+ * This file is copied from https://github.dev/adobe/react-spectrum/blob/2d4521098a3b4999f2e98b4d52d22483ee3451c8/packages/react-aria-components/src/utils.ts
+ * We copied this internally to avoid installing the complete react-aria-components package.
+ */
+
+import type {CSSProperties, ForwardedRef, ReactNode} from "react";
+
+import {Context, useContext, useMemo} from "react";
+import {RefObject, DOMProps as SharedDOMProps} from "@react-types/shared";
+import {mergeProps, mergeRefs, useObjectRef} from "@react-aria/utils";
+export const DEFAULT_SLOT = Symbol("default");
+
+interface SlottedValue<T> {
+  slots?: Record<string | symbol, T>;
+}
+
+export type WithRef<T, E> = T & {ref?: ForwardedRef<E>};
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
+
+export interface StyleProps {
+  /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+  className?: string;
+  /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
+  style?: CSSProperties;
+}
+
+export interface DOMProps extends StyleProps, SharedDOMProps {
+  /** The children of the component. */
+  children?: ReactNode;
+}
+
+export interface SlotProps {
+  /**
+   * A slot name for the component. Slots allow the component to receive props from a parent component.
+   * An explicit `null` value indicates that the local props completely override all props received from a parent.
+   */
+  slot?: string | null;
+}
+
+export function useSlottedContext<T>(
+  context: Context<SlottedContextValue<T>>,
+  slot?: string | null,
+): T | null | undefined {
+  let ctx = useContext(context);
+
+  if (slot === null) {
+    // An explicit `null` slot means don't use context.
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+
+    if (!ctx.slots[slotKey]) {
+      // @ts-ignore
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+
+    return ctx.slots[slotKey];
+  }
+
+  // @ts-ignore
+  return ctx;
+}
+
+export function useContextProps<T, U extends SlotProps, E extends Element>(
+  props: T & SlotProps,
+  ref: ForwardedRef<E>,
+  context: Context<ContextValue<U, E>>,
+): [T, RefObject<E | null>] {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  // @ts-ignore - TS says "Type 'unique symbol' cannot be used as an index type." but not sure why.
+  let {ref: contextRef, ...contextProps} = ctx as any;
+  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
+  let mergedProps = mergeProps(contextProps, props) as unknown as T;
+
+  // mergeProps does not merge `style`. Adding this there might be a breaking change.
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      // @ts-ignore
+      mergedProps.style = (renderProps) => {
+        let contextStyle =
+          typeof contextProps.style === "function"
+            ? contextProps.style(renderProps)
+            : contextProps.style;
+        let defaultStyle = {...renderProps.defaultStyle, ...contextStyle};
+        let style =
+          typeof props.style === "function"
+            ? props.style({...renderProps, defaultStyle})
+            : props.style;
+
+        return {...defaultStyle, ...style};
+      };
+    } else {
+      // @ts-ignore
+      mergedProps.style = {...contextProps.style, ...props.style};
+    }
+  }
+
+  return [mergedProps, mergedRef];
+}
diff --git a/packages/components/form/stories/form.stories.tsx b/packages/components/form/stories/form.stories.tsx
new file mode 100644
index 0000000000..c9eb3d4526
--- /dev/null
+++ b/packages/components/form/stories/form.stories.tsx
@@ -0,0 +1,76 @@
+import React, {useState} from "react";
+import {Meta} from "@storybook/react";
+// import {Input} from "@nextui-org/input";
+import {Button} from "@nextui-org/button";
+
+import {Form, FormProps} from "../src";
+
+export default {
+  title: "Components/Form",
+  component: Form,
+  argTypes: {
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    validationBehavior: {
+      control: {
+        type: "select",
+      },
+      options: ["aria", "native"],
+    },
+  },
+} as Meta<typeof Form>;
+
+const defaultProps = {};
+
+const Template = (args: FormProps) => (
+  <Form {...args} className="flex flex-col gap-2 w-4/5">
+    {/* TODO: Doesn't work due to circular dependencies in the monorepo.
+     * See: https://github.com/vercel/turborepo/discussions/1752
+     */}
+    {/* <Input isRequired label="comment" name="input" /> */}
+    <Button color="primary" type="submit">
+      Submit
+    </Button>
+  </Form>
+);
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const NativeValidation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    validationBehavior: "native",
+  },
+};
+
+export const AriaValidation = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    validationBehavior: "aria",
+  },
+};
+
+export const ServerValidation = () => {
+  const [serverErrors, setServerErrors] = useState({});
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    let errors = {};
+
+    for (let el of e.target.elements) {
+      errors[el.name] = `Invalid value for "${el.name}".`;
+    }
+    setServerErrors(errors);
+  };
+
+  return <Template validationErrors={serverErrors} onSubmit={onSubmit} />;
+};
diff --git a/packages/components/form/tsconfig.json b/packages/components/form/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/form/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/form/tsup.config.ts b/packages/components/form/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/form/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/components/image/CHANGELOG.md b/packages/components/image/CHANGELOG.md
index 70cc41ec3d..d3d5f77471 100644
--- a/packages/components/image/CHANGELOG.md
+++ b/packages/components/image/CHANGELOG.md
@@ -1,5 +1,174 @@
 # @nextui-org/image
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-image@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-image@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-image@2.0.7-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-image@2.0.7-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-image@2.0.7-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-image@2.0.7-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-image@2.0.7-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-image@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`52f6274e9`](https://github.com/nextui-org/nextui/commit/52f6274e9baecc928ee7cbb6a8110b72931061b8)]:
+  - @nextui-org/use-image@2.0.7-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`1c05c6d77`](https://github.com/nextui-org/nextui/commit/1c05c6d77b10f6b18f3c34d36eece7702704267a)]:
+  - @nextui-org/use-image@2.0.7-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`98b13d9a9`](https://github.com/nextui-org/nextui/commit/98b13d9a9368ed188f62e3e7ff885ed3ec7c3f5a)]:
+  - @nextui-org/use-image@2.0.7-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-image@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3802](https://github.com/nextui-org/nextui/pull/3802) [`06c4b2f76`](https://github.com/nextui-org/nextui/commit/06c4b2f7637ba5f49f37b048943d66ff65201c85) Thanks [@wingkwong](https://github.com/wingkwong)! - add missing `w` to `getWrapperProps` dependency (#3801)
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`90cb5b14a`](https://github.com/nextui-org/nextui/commit/90cb5b14abcf70878896ea83b0b8bce0795d97fd), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/use-image@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.32
 
 ### Patch Changes
diff --git a/packages/components/image/package.json b/packages/components/image/package.json
index edadc3aeef..6e51e102c5 100644
--- a/packages/components/image/package.json
+++ b/packages/components/image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "2.0.32",
+  "version": "2.2.1",
   "description": "A simple image component",
   "keywords": [
     "image"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/packages/components/image/src/use-image.ts b/packages/components/image/src/use-image.ts
index c0e18fa0a1..2fb45628b8 100644
--- a/packages/components/image/src/use-image.ts
+++ b/packages/components/image/src/use-image.ts
@@ -188,7 +188,7 @@ export function useImage(originalProps: UseImageProps) {
         maxWidth: w,
       },
     };
-  }, [slots, showFallback, fallbackSrc, classNames?.wrapper]);
+  }, [slots, showFallback, fallbackSrc, classNames?.wrapper, w]);
 
   const getBlurredImgProps = useCallback<PropGetter>(() => {
     return {
diff --git a/packages/components/input-otp/CHANGELOG.md b/packages/components/input-otp/CHANGELOG.md
new file mode 100644
index 0000000000..0b3972b90e
--- /dev/null
+++ b/packages/components/input-otp/CHANGELOG.md
@@ -0,0 +1,58 @@
+# @nextui-org/input-otp
+
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/form@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.0.1-beta.0
+
+### Patch Changes
+
+- [#4052](https://github.com/nextui-org/nextui/pull/4052) [`1d5b2b6c1`](https://github.com/nextui-org/nextui/commit/1d5b2b6c1f8672e7339a6f9dc66f0244d7bb2789) Thanks [@macci001](https://github.com/macci001)! - Adding new input-otp component.
+
+- Updated dependencies [[`1d5b2b6c1`](https://github.com/nextui-org/nextui/commit/1d5b2b6c1f8672e7339a6f9dc66f0244d7bb2789)]:
+  - @nextui-org/theme@2.3.0-beta.17
diff --git a/packages/components/input-otp/README.md b/packages/components/input-otp/README.md
new file mode 100644
index 0000000000..61442f0d22
--- /dev/null
+++ b/packages/components/input-otp/README.md
@@ -0,0 +1,26 @@
+# @nextui-org/input-otp
+
+InputOTP is a component that allows users to enter otp input. It can be used to get user otp in forms.
+
+This package contains the InputOTPcomponent.
+
+Please refer to the [documentation](https://nextui.org/docs/components/input-otp) for more information.
+
+## Installation
+
+```sh
+yarn add @nextui-org/input-otp
+# or
+npm i @nextui-org/input-otp
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/components/input-otp/__tests__/input-otp.test.tsx b/packages/components/input-otp/__tests__/input-otp.test.tsx
new file mode 100644
index 0000000000..c8abb683fb
--- /dev/null
+++ b/packages/components/input-otp/__tests__/input-otp.test.tsx
@@ -0,0 +1,238 @@
+import "@testing-library/jest-dom";
+
+import * as React from "react";
+import {render, renderHook, screen} from "@testing-library/react";
+import {useForm} from "react-hook-form";
+import userEvent, {UserEvent} from "@testing-library/user-event";
+
+import {InputOtp} from "../src";
+
+// Mock document.elementFromPoint to avoid test environment errors
+beforeAll(() => {
+  document.elementFromPoint = jest.fn(() => {
+    const mockElement = document.createElement("div");
+
+    return mockElement;
+  });
+});
+
+describe("InputOtp Component", () => {
+  let user: UserEvent;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
+
+  it("should render correctly", () => {
+    const wrapper = render(<InputOtp length={4} />);
+
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  it("should forward ref correctly", () => {
+    const ref = React.createRef<HTMLInputElement>();
+
+    render(<InputOtp ref={ref} length={4} />);
+    expect(ref.current).not.toBeNull();
+  });
+
+  it("should create segments according to length prop", () => {
+    render(<InputOtp length={5} />);
+    const segments = screen.getAllByRole("presentation");
+
+    expect(segments.length).toBe(5);
+  });
+
+  it("should display error message when isInvalid is true", () => {
+    const errorMessage = "custom error message";
+
+    render(<InputOtp errorMessage={errorMessage} isInvalid={true} length={4} />);
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it("should display description message", () => {
+    const descriptionMessage = "custom description message";
+
+    render(<InputOtp description={descriptionMessage} length={4} />);
+    expect(screen.getByText(descriptionMessage)).toBeInTheDocument();
+  });
+
+  it("should not focus when disabled", async () => {
+    render(<InputOtp isDisabled length={4} />);
+    const input = screen.getByRole("textbox");
+
+    await user.click(input);
+    expect(input).not.toHaveAttribute("data-focus", "true");
+  });
+
+  it("should activate the first segment on click", async () => {
+    render(<InputOtp length={4} />);
+    const input = screen.getByRole("textbox");
+    const segments = screen.getAllByRole("presentation");
+
+    await user.click(input);
+    expect(segments[0]).toHaveAttribute("data-active", "true");
+    expect(segments[1]).not.toHaveAttribute("data-active");
+  });
+
+  it("should move focus to the next segment on valid input", async () => {
+    render(<InputOtp length={4} />);
+    const input = screen.getByRole("textbox");
+    const segments = screen.getAllByRole("presentation");
+
+    await user.click(input);
+    expect(segments[1]).not.toHaveAttribute("data-active");
+
+    await user.keyboard("1");
+    expect(segments[1]).toHaveAttribute("data-active", "true");
+    expect(input).toHaveAttribute("value", "1");
+  });
+
+  it("should clear input on backspace", async () => {
+    render(<InputOtp length={4} />);
+    const input = screen.getByRole("textbox");
+    const segments = screen.getAllByRole("presentation");
+
+    await user.click(input);
+    await user.keyboard("12");
+    expect(input).toHaveAttribute("value", "12");
+    expect(segments[2]).toHaveAttribute("data-active", "true");
+
+    await user.keyboard("[Backspace]");
+    expect(input).toHaveAttribute("value", "1");
+    expect(segments[1]).toHaveAttribute("data-active", "true");
+  });
+
+  it("should paste values", async () => {
+    render(<InputOtp length={4} />);
+    const input = screen.getByRole("textbox");
+
+    await user.click(input);
+    await user.paste("1234");
+    expect(input).toHaveAttribute("value", "1234");
+
+    // Test partial paste
+    await user.clear(input);
+    await user.paste("12");
+    expect(input).toHaveAttribute("value", "12");
+
+    // Test longer input
+    await user.clear(input);
+    await user.paste("12345");
+    expect(input).toHaveAttribute("value", "1234");
+
+    // Test invalid characters
+    await user.clear(input);
+    await user.paste("12ab");
+    expect(input).toHaveAttribute("value", "");
+  });
+
+  it("should restrict non-allowed inputs", async () => {
+    render(<InputOtp length={4} />);
+    const input = screen.getByRole("textbox");
+    const segments = screen.getAllByRole("presentation");
+
+    await user.click(input);
+    await user.keyboard("a");
+    expect(input).toHaveAttribute("value", "");
+    expect(segments[0]).toHaveAttribute("data-active", "true");
+  });
+
+  it("should allow inputs based on custom regex", async () => {
+    const regEx = "^[a-z]*$";
+
+    render(<InputOtp allowedKeys={regEx} length={4} />);
+    const input = screen.getByRole("textbox");
+
+    await user.click(input);
+    await user.keyboard("a");
+    expect(input).toHaveAttribute("value", "a");
+  });
+
+  it("should call onComplete when all segments are filled", async () => {
+    const onComplete = jest.fn();
+
+    render(<InputOtp length={4} onComplete={onComplete} />);
+    const input = screen.getByRole("textbox");
+
+    await user.click(input);
+    await user.paste("1234");
+    expect(onComplete).toHaveBeenCalledTimes(1);
+
+    expect(onComplete).toHaveBeenCalledWith("1234");
+
+    // Test partial input followed by paste
+    await user.clear(input);
+    await user.keyboard("1");
+    await user.paste("234");
+    expect(onComplete).toHaveBeenCalledTimes(2);
+    expect(onComplete).toHaveBeenCalledWith("1234");
+  });
+});
+
+describe("InputOtp with react-hook-form", () => {
+  let user: UserEvent;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
+
+  it("should integrate with react-hook-form correctly", async () => {
+    const {result} = renderHook(() =>
+      useForm({
+        defaultValues: {
+          defaultValue: "1234",
+          withoutDefaultValue: "",
+          requiredField: "",
+        },
+      }),
+    );
+
+    const {
+      handleSubmit,
+      register,
+      formState: {errors},
+    } = result.current;
+
+    const onSubmit = jest.fn();
+
+    const {container} = render(
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <InputOtp data-testid="input-otp-1" length={4} {...register("defaultValue")} />
+        <InputOtp data-testid="input-otp-2" length={4} {...register("withoutDefaultValue")} />
+        <InputOtp
+          data-testid="input-otp-3"
+          length={4}
+          {...register("requiredField", {required: true})}
+        />
+        {errors.requiredField && <span>This field is required</span>}
+        <button type="submit">Submit</button>
+      </form>,
+    );
+
+    const button = container.querySelector("button");
+
+    if (!button) {
+      throw new Error("Button not found");
+    }
+
+    await user.click(button);
+
+    expect(onSubmit).toHaveBeenCalledTimes(0);
+
+    const inputOtp3 = screen.getByTestId("input-otp-3");
+    const input = inputOtp3.querySelector("input");
+
+    if (!input) {
+      throw new Error("Input not found");
+    }
+
+    await user.click(input);
+
+    await user.type(input, "1234");
+
+    await user.click(button);
+
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/components/input-otp/package.json b/packages/components/input-otp/package.json
new file mode 100644
index 0000000000..c9d89037a0
--- /dev/null
+++ b/packages/components/input-otp/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@nextui-org/input-otp",
+  "version": "2.1.1",
+  "description": "",
+  "keywords": [
+    "input-otp"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/components/input-otp"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
+  },
+  "dependencies": {
+    "@nextui-org/form": "workspace:*",
+    "@nextui-org/shared-utils": "workspace:*",
+    "@nextui-org/react-utils": "workspace:*",
+    "@react-aria/utils": "3.24.1",
+    "@react-aria/form": "3.0.8",
+    "@react-stately/utils": "3.10.1",
+    "@react-stately/form": "3.0.5",
+    "@react-types/textfield": "3.9.3",
+    "input-otp": "1.4.1",
+    "@react-aria/focus": "3.18.4"
+  },
+  "devDependencies": {
+    "@nextui-org/theme": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/button": "workspace:*",
+    "clean-package": "2.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-hook-form": "^7.51.3"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/components/input-otp/src/index.ts b/packages/components/input-otp/src/index.ts
new file mode 100644
index 0000000000..64bd175d31
--- /dev/null
+++ b/packages/components/input-otp/src/index.ts
@@ -0,0 +1,13 @@
+import InputOtp from "./input-otp";
+
+// export types
+export type {InputOtpProps} from "./input-otp";
+
+// export hooks
+export {useInputOtp} from "./use-input-otp";
+
+// export component
+export {InputOtp};
+
+// export constants from original package
+export {REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS} from "input-otp";
diff --git a/packages/components/input-otp/src/input-otp-context.ts b/packages/components/input-otp/src/input-otp-context.ts
new file mode 100644
index 0000000000..18779ac3d4
--- /dev/null
+++ b/packages/components/input-otp/src/input-otp-context.ts
@@ -0,0 +1,9 @@
+import {createContext} from "@nextui-org/react-utils";
+
+import {UseInputOtpReturn} from "./use-input-otp";
+
+export const [InputOtpProvider, useInputOtpContext] = createContext<UseInputOtpReturn>({
+  name: "InputOtpContext",
+  errorMessage:
+    "useInputOtpContext: `context` is undefined. Seems like you forgot to wrap all input-otp components within `<InputOtp />`",
+});
diff --git a/packages/components/input-otp/src/input-otp-segment.tsx b/packages/components/input-otp/src/input-otp-segment.tsx
new file mode 100644
index 0000000000..d977e84421
--- /dev/null
+++ b/packages/components/input-otp/src/input-otp-segment.tsx
@@ -0,0 +1,45 @@
+import {SlotProps} from "input-otp";
+import {useMemo} from "react";
+import {clsx, dataAttr} from "@nextui-org/shared-utils";
+import {cn} from "@nextui-org/theme";
+
+import {useInputOtpContext} from "./input-otp-context";
+
+export const InputOtpSegment = ({
+  ...props
+}: SlotProps & {isFocused?: boolean; isFocusVisible?: boolean}) => {
+  const {classNames, slots, type} = useInputOtpContext();
+
+  const passwordCharStyles = clsx(classNames?.passwordChar);
+  const caretStyles = clsx(classNames?.caret);
+  const segmentStyles = clsx(classNames?.segment);
+
+  const displayValue = useMemo(() => {
+    if (props.isActive && !props.char) {
+      return <div className={cn(slots.caret?.({class: caretStyles}))} />;
+    }
+    if (props.char) {
+      return type === "password" ? (
+        <div className={cn(slots.passwordChar?.({class: passwordCharStyles}))} />
+      ) : (
+        <div>{props.char}</div>
+      );
+    }
+
+    return <div>{props.placeholderChar}</div>;
+  }, [props.char, props.isActive, props.placeholderChar, type]);
+
+  return (
+    <div
+      className={cn(slots.segment?.({class: segmentStyles}))}
+      data-active={dataAttr(props.isActive)}
+      data-focus={dataAttr(props.isFocused && props.isActive)}
+      data-focus-visible={dataAttr(props.isFocusVisible && props.isActive)}
+      data-has-value={dataAttr(!!props.char)}
+      data-slot="segment2"
+      role="presentation"
+    >
+      {displayValue}
+    </div>
+  );
+};
diff --git a/packages/components/input-otp/src/input-otp.tsx b/packages/components/input-otp/src/input-otp.tsx
new file mode 100644
index 0000000000..4525c77172
--- /dev/null
+++ b/packages/components/input-otp/src/input-otp.tsx
@@ -0,0 +1,80 @@
+import {forwardRef} from "@nextui-org/system";
+import {useMemo} from "react";
+import {OTPInput} from "input-otp";
+
+import {UseInputOtpProps, useInputOtp} from "./use-input-otp";
+import {InputOtpProvider} from "./input-otp-context";
+import {InputOtpSegment} from "./input-otp-segment";
+
+export interface InputOtpProps extends UseInputOtpProps {}
+
+const InputOtp = forwardRef<"input", InputOtpProps>((props, ref) => {
+  const context = useInputOtp({...props, ref});
+
+  const {
+    Component,
+    hasHelper,
+    isInvalid,
+    errorMessage,
+    description,
+    isFocusVisible,
+    isFocused,
+    getBaseProps,
+    getInputOtpProps,
+    getSegmentWrapperProps,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps,
+  } = context;
+
+  const helperSection = useMemo(() => {
+    if (!hasHelper) {
+      return null;
+    }
+
+    return (
+      <div {...getHelperWrapperProps()}>
+        {isInvalid && errorMessage ? (
+          <div {...getErrorMessageProps()}>{errorMessage}</div>
+        ) : (
+          <div {...getDescriptionProps()}>{description}</div>
+        )}
+      </div>
+    );
+  }, [
+    hasHelper,
+    isInvalid,
+    errorMessage,
+    description,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps,
+  ]);
+
+  return (
+    <InputOtpProvider value={context}>
+      <Component {...getBaseProps()}>
+        <OTPInput
+          {...getInputOtpProps()}
+          render={({slots}) => (
+            <div {...getSegmentWrapperProps()}>
+              {slots.map((slot, idx) => (
+                <InputOtpSegment
+                  key={idx}
+                  {...slot}
+                  isFocusVisible={isFocusVisible}
+                  isFocused={isFocused}
+                />
+              ))}
+            </div>
+          )}
+        />
+        {helperSection}
+      </Component>
+    </InputOtpProvider>
+  );
+});
+
+InputOtp.displayName = "NextUI.InputOtp";
+
+export default InputOtp;
diff --git a/packages/components/input-otp/src/use-input-otp.ts b/packages/components/input-otp/src/use-input-otp.ts
new file mode 100644
index 0000000000..c7967ad8cd
--- /dev/null
+++ b/packages/components/input-otp/src/use-input-otp.ts
@@ -0,0 +1,337 @@
+import type {
+  InputOtpReturnType,
+  InputOtpSlots,
+  InputOtpVariantProps,
+  SlotsToClasses,
+} from "@nextui-org/theme";
+
+import {
+  HTMLNextUIProps,
+  mapPropsVariants,
+  PropGetter,
+  useProviderContext,
+} from "@nextui-org/system";
+import {inputOtp} from "@nextui-org/theme";
+import {filterDOMProps, ReactRef, useDOMRef} from "@nextui-org/react-utils";
+import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
+import {useCallback, useMemo} from "react";
+import {chain, mergeProps, useFormReset} from "@react-aria/utils";
+import {AriaTextFieldProps} from "@react-types/textfield";
+import {useControlledState} from "@react-stately/utils";
+import {useFormValidationState} from "@react-stately/form";
+import {useFormValidation} from "@react-aria/form";
+import {useFocusRing} from "@react-aria/focus";
+import {OTPInputProps} from "input-otp";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
+
+interface Props extends HTMLNextUIProps<"div"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLInputElement | null>;
+  /**
+   * Ref to the container DOM node.
+   */
+  baseRef?: ReactRef<HTMLDivElement | null>;
+  /**
+   * Length required for the otp.
+   */
+  length: number;
+  /**
+   * Regex string for the allowed keys.
+   */
+  allowedKeys?: string;
+  /**
+   * Callback that will be fired when the value has length equal to otp length
+   */
+  onComplete?: (v?: string) => void;
+  /**
+   * Boolean to disable the input-otp component.
+   */
+  isDisabled?: boolean;
+  /**
+   * Boolean to disable the animation in input-otp component.
+   */
+  disableAnimation?: boolean;
+  /**
+   * Classname or List of classes to change the classNames of the element.
+   * if `className` is passed, it will be added to the base slot.
+   *
+   * @example
+   * ```ts
+   * <InputOtp classNames={{
+   *    base:"base-classes",
+   *    inputWrapper:"input-wrapper-classes",
+   *    input: "input-classes",
+   *    segmentWrapper: "segment-wrapper-classes",
+   *    segment: "segment-classes",
+   *    helperWrapper: "helper-wrapper-classes",
+   *    description: "description-classes",
+   *    errorMessage: "error-message-classes",
+   * }} />
+   * ```
+   */
+  classNames?: SlotsToClasses<InputOtpSlots>;
+  /**
+   * React aria onChange event.
+   */
+  onValueChange?: (value: string) => void;
+}
+
+export type ValueTypes = {
+  slots: InputOtpReturnType;
+  classNames: SlotsToClasses<InputOtpSlots>;
+};
+
+export type UseInputOtpProps = Props &
+  InputOtpVariantProps &
+  Omit<AriaTextFieldProps, "onChange"> &
+  Omit<
+    Partial<OTPInputProps>,
+    "render" | "children" | "value" | "onChange" | keyof InputOtpVariantProps
+  >;
+
+export function useInputOtp(originalProps: UseInputOtpProps) {
+  const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
+
+  const [props, variantProps] = mapPropsVariants(originalProps, inputOtp.variantKeys);
+
+  const {
+    ref,
+    baseRef,
+    as,
+    className,
+    classNames,
+    length = 4,
+    autoFocus,
+    "aria-label": ariaLabel = "One-time password input",
+    onValueChange = () => {},
+    allowedKeys = "^[0-9]*$",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
+    type,
+    name,
+    maxLength,
+    minLength,
+    textAlign = "center",
+    onComplete = () => {},
+    pushPasswordManagerStrategy,
+    pasteTransformer,
+    containerClassName,
+    noScriptCSSFallback,
+    ...otherProps
+  } = props;
+
+  const Component = as || "div";
+
+  const inputRef = useDOMRef<HTMLInputElement>(ref);
+  const baseDomRef = useDOMRef<HTMLDivElement>(baseRef);
+
+  const {isFocusVisible, isFocused, focusProps} = useFocusRing({
+    autoFocus,
+    isTextInput: true,
+  });
+
+  const handleValueChange = useCallback(
+    (value: string | undefined) => {
+      onValueChange(value ?? "");
+    },
+    [onValueChange],
+  );
+
+  const [value, setValue] = useControlledState(
+    props.value,
+    props.defaultValue ?? "",
+    handleValueChange,
+  );
+
+  const disableAnimation =
+    originalProps.disableAnimation ?? globalContext?.disableAnimation ?? false;
+  const isDisabled = originalProps.isDisabled;
+  const baseStyles = clsx(classNames?.base, className);
+
+  const validationState = useFormValidationState<string>({
+    ...props,
+    validationBehavior,
+    value,
+  });
+
+  useFormReset(inputRef, value, setValue);
+  useFormValidation(props, validationState, inputRef);
+
+  const {
+    isInvalid: isAriaInvalid,
+    validationErrors,
+    validationDetails,
+  } = validationState.displayValidation;
+  const isReadOnly = originalProps.isReadOnly;
+  const isRequired = originalProps.isRequired;
+  const isInvalid = originalProps.isInvalid || isAriaInvalid;
+  const errorMessage =
+    typeof props.errorMessage === "function"
+      ? props.errorMessage({isInvalid, validationErrors, validationDetails})
+      : props.errorMessage || validationErrors?.join(" ");
+
+  const description = props.description;
+  const hasHelper = !!description || !!errorMessage;
+
+  const slots = useMemo(
+    () =>
+      inputOtp({
+        ...variantProps,
+        disableAnimation,
+        isInvalid,
+        isReadOnly,
+      }),
+    [objectToDeps(variantProps), disableAnimation, isInvalid, isReadOnly],
+  );
+
+  const getBaseProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        ref: baseDomRef,
+        className: slots.base({
+          class: baseStyles,
+        }),
+        "data-slot": "base",
+        "data-disabled": dataAttr(isDisabled),
+        "data-invalid": dataAttr(isInvalid),
+        "data-required": dataAttr(originalProps?.isRequired),
+        "data-readonly": dataAttr(originalProps?.isReadOnly),
+        "data-filled": dataAttr(value.length === length),
+        "aria-label": ariaLabel,
+        "aria-required": dataAttr(originalProps.isRequired),
+        "aria-readonly": dataAttr(originalProps?.isReadOnly),
+        role: "base",
+        ...mergeProps(
+          filterDOMProps(otherProps, {
+            enabled: true,
+          }),
+          filterDOMProps(props),
+        ),
+      };
+    },
+    [baseDomRef, slots, baseStyles, isDisabled, isInvalid, isRequired, isReadOnly, value, length],
+  );
+
+  const getInputOtpProps = useCallback(
+    (props: Partial<OTPInputProps> = {}) => {
+      const otpProps: Omit<OTPInputProps, "render" | "children"> & {
+        ref?: ReactRef<HTMLInputElement>;
+      } = {
+        ...focusProps,
+        required: isRequired,
+        disabled: isDisabled,
+        readOnly: isReadOnly,
+        pattern: allowedKeys,
+        maxLength: maxLength ?? length,
+        minLength: minLength ?? length,
+        textAlign,
+        ref: inputRef,
+        name: name,
+        value: value,
+        onChange: setValue,
+        onBlur: chain(focusProps.onBlur, props?.onBlur),
+        onComplete: onComplete,
+        pushPasswordManagerStrategy,
+        pasteTransformer,
+        noScriptCSSFallback,
+        containerClassName: slots.wrapper?.({class: clsx(classNames?.wrapper, containerClassName)}),
+        ...props,
+      };
+
+      return otpProps;
+    },
+    [
+      isRequired,
+      isDisabled,
+      isReadOnly,
+      allowedKeys,
+      inputRef,
+      name,
+      value,
+      length,
+      setValue,
+      props.onBlur,
+      onComplete,
+    ],
+  );
+
+  const getSegmentWrapperProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        className: slots.segmentWrapper({
+          class: clsx(classNames?.segmentWrapper, props?.className),
+        }),
+        "data-slot": "segment-wrapper",
+        "data-disabled": dataAttr(isDisabled),
+        "aria-label": ariaLabel,
+        ...props,
+      };
+    },
+    [classNames?.segmentWrapper, isDisabled],
+  );
+
+  const getHelperWrapperProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        className: slots.helperWrapper({
+          class: clsx(classNames?.helperWrapper, props?.className),
+        }),
+        "data-slot": "helper-wrapper",
+        ...props,
+      };
+    },
+    [classNames?.helperWrapper],
+  );
+
+  const getErrorMessageProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        className: slots.errorMessage({
+          class: clsx(classNames?.errorMessage, props?.className),
+        }),
+        "data-slot": "error-message",
+        ...props,
+      };
+    },
+    [classNames?.errorMessage],
+  );
+
+  const getDescriptionProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        className: slots.description({
+          class: clsx(classNames?.description, props?.className),
+        }),
+        "data-slot": "description",
+        ...props,
+      };
+    },
+    [classNames?.description],
+  );
+
+  return {
+    Component,
+    inputRef,
+    length,
+    value,
+    type,
+    slots,
+    hasHelper,
+    classNames,
+    isInvalid,
+    description,
+    errorMessage,
+    isFocusVisible,
+    isFocused,
+    getBaseProps,
+    getInputOtpProps,
+    getSegmentWrapperProps,
+    getHelperWrapperProps,
+    getErrorMessageProps,
+    getDescriptionProps,
+  };
+}
+
+export type UseInputOtpReturn = ReturnType<typeof useInputOtp>;
diff --git a/packages/components/input-otp/stories/input-otp.stories.tsx b/packages/components/input-otp/stories/input-otp.stories.tsx
new file mode 100644
index 0000000000..f79a749bd7
--- /dev/null
+++ b/packages/components/input-otp/stories/input-otp.stories.tsx
@@ -0,0 +1,385 @@
+import React from "react";
+import {Meta} from "@storybook/react";
+import {button, inputOtp} from "@nextui-org/theme";
+import {useForm} from "react-hook-form";
+import {ValidationResult} from "@react-types/shared";
+import {Button} from "@nextui-org/button";
+import {Form} from "@nextui-org/form";
+
+import {InputOtp} from "../src";
+
+export default {
+  title: "Components/InputOtp",
+  component: InputOtp,
+  argTypes: {
+    variant: {
+      control: {type: "select"},
+      options: ["flat", "faded", "bordered", "underlined"],
+    },
+    color: {
+      control: {type: "select"},
+      options: ["default", "primary", "secondary", "success", "warning", "danger"],
+    },
+    radius: {
+      control: {type: "select"},
+      options: ["none", "sm", "md", "lg", "full"],
+    },
+    size: {
+      control: {type: "select"},
+      options: ["sm", "md", "lg"],
+    },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
+    validationBehavior: {
+      control: {
+        type: "select",
+      },
+      options: ["aria", "native"],
+    },
+  },
+} as Meta<typeof InputOtp>;
+
+const defaultProps = {
+  ...inputOtp.defaultVariants,
+};
+
+const Template = (args) => (
+  <div>
+    <InputOtp {...args} />
+  </div>
+);
+
+const ErrorMessageFunctionTemplate = (args) => {
+  const {register, handleSubmit} = useForm({
+    defaultValues: {
+      otp: "",
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    // eslint-disable-next-line no-console
+    alert("Submitted value: " + JSON.stringify(data));
+  };
+
+  return (
+    <div className="flex flex-col">
+      <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
+        <InputOtp {...args} length={4} {...register("otp", {required: true})} />
+        <button className={button({class: "w-fit"})} type="submit">
+          Submit
+        </button>
+      </form>
+    </div>
+  );
+};
+
+const ControlledTemplate = (args) => {
+  const [value, setValue] = React.useState("");
+
+  return (
+    <div className="flex flex-col gap-y-2">
+      <InputOtp {...args} length={4} value={value} onValueChange={setValue} />
+      <p className="text-default-500 text-sm">Input value: {value}</p>
+    </div>
+  );
+};
+
+const AllowedKeysTemplate = (args) => {
+  const allowedKeysConfig = [
+    {
+      name: "For below InputOtp, only lower-case alphabets (a to z) are allowed:",
+      value: "^[a-z]*$",
+    },
+    {
+      name: "For below InputOtp, only upper-case alphabets (A to Z) are allowed:",
+      value: "^[A-Z]*$",
+    },
+  ];
+
+  return (
+    <div className="w-full flex flex-wrap gap-6">
+      {allowedKeysConfig.map((config, idx) => (
+        <div key={idx} className="flex w-full flex-col flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
+          <div className="text-default-500">{config.name}</div>
+          <InputOtp allowedKeys={config.value} length={4} {...args} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const RequiredTemplate = (args) => {
+  return (
+    <form
+      className="flex w-full flex-col items-start gap-4"
+      onSubmit={(e) => {
+        e.preventDefault();
+        const formData = new FormData(e.currentTarget);
+        const otp = formData.get("otp");
+
+        alert(`OTP submitted: ${otp}`);
+      }}
+    >
+      <InputOtp
+        isRequired
+        aria-label="OTP input field"
+        length={4}
+        name="otp"
+        placeholder="Enter code"
+        validationBehavior="native"
+        {...args}
+      />
+      <Button size="sm" type="submit" variant="bordered">
+        Submit
+      </Button>
+    </form>
+  );
+};
+
+const WithReactHookFormTemplate = (args) => {
+  const {
+    register,
+    formState: {errors},
+    handleSubmit,
+  } = useForm({
+    defaultValues: {
+      withDefaultValue: "12",
+      requiredField: "",
+    },
+  });
+
+  const onSubmit = (data: any) => {
+    // eslint-disable-next-line no-console
+    console.log(data);
+    alert("Submitted value: " + JSON.stringify(data));
+  };
+
+  return (
+    <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col">
+        <div className="text-default-400/60 text-xs">Default value:</div>
+        <InputOtp {...args} {...register("withDefaultValue")} />
+      </div>
+      <div className="flex flex-col">
+        <div className="text-default-400/60 text-xs">Required value:</div>
+        <InputOtp {...args} {...register("requiredField", {required: true})} />
+        {errors.requiredField && (
+          <span className="text-danger text-tiny">This field is required</span>
+        )}
+      </div>
+      <button className={button({class: "w-fit"})} type="submit">
+        Submit
+      </button>
+    </form>
+  );
+};
+
+const ServerValidationTemplate = (args) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      otp: "Please provide a valid OTP code.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <InputOtp {...args} name="otp" />
+      <Button size="sm" type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+};
+
+const WithValidationTemplate = (args) => (
+  <form
+    className="flex flex-col items-start gap-2"
+    onSubmit={(e) => {
+      e.preventDefault();
+      const formData = new FormData(e.currentTarget);
+      const otp = formData.get("otp");
+
+      alert(`OTP submitted: ${otp}`);
+    }}
+  >
+    <InputOtp
+      {...args}
+      name="otp"
+      validate={(value) => {
+        if (value.length < 4) {
+          return "OTP must be 4 digits";
+        }
+      }}
+    />
+    <Button size="sm" type="submit">
+      Submit
+    </Button>
+  </form>
+);
+
+export const Default = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+  },
+};
+
+export const Required = {
+  render: RequiredTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+  },
+};
+
+export const Disabled = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    defaultValue: "123",
+    isDisabled: true,
+  },
+};
+
+export const ReadOnly = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    value: "12",
+    isReadOnly: true,
+  },
+};
+
+export const WithDescription = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    description: "Enter the 4 digit code sent to your email",
+  },
+};
+
+export const WithErrorMessage = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    isInvalid: true,
+    errorMessage: "Please enter a valid OTP.",
+  },
+};
+
+export const WithErrorMessageFunction = {
+  render: ErrorMessageFunctionTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+    isRequired: true,
+    minLength: 4,
+    errorMessage: (value: ValidationResult) => {
+      if (value.validationDetails.tooShort) {
+        return "Value is too short";
+      }
+    },
+  },
+};
+
+export const Password = {
+  render: RequiredTemplate,
+  args: {
+    ...defaultProps,
+    type: "password",
+  },
+};
+
+export const isInvalid = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    isInvalid: true,
+    errorMessage: "Invalid OTP",
+  },
+};
+
+export const Controlled = {
+  render: ControlledTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const AllowedKeys = {
+  render: AllowedKeysTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithReactHookForm = {
+  render: WithReactHookFormTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+  },
+};
+
+export const CustomWithClassNames = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    length: 4,
+    classNames: {
+      segmentWrapper: "gap-x-0",
+      segment: [
+        "relative",
+        "h-10",
+        "w-10",
+        "border-y",
+        "border-r",
+        "first:rounded-l-md",
+        "first:border-l",
+        "last:rounded-r-md",
+        "border-default-200",
+        "data-[active=true]:border",
+        "data-[active=true]:z-20",
+        "data-[active=true]:ring-2",
+        "data-[active=true]:ring-offset-2",
+        "data-[active=true]:ring-offset-background",
+        "data-[active=true]:ring-foreground",
+      ],
+    },
+    radius: "none",
+    description: "Enter the 4 digit code sent to your email",
+  },
+};
+
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+  },
+};
+
+export const WithValidation = {
+  render: WithValidationTemplate,
+  args: {
+    ...defaultProps,
+    length: 4,
+    isRequired: true,
+  },
+};
diff --git a/packages/components/input-otp/tsconfig.json b/packages/components/input-otp/tsconfig.json
new file mode 100644
index 0000000000..5d012f6e61
--- /dev/null
+++ b/packages/components/input-otp/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "tailwind-variants": ["../../../node_modules/tailwind-variants"]
+    },
+  },
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/components/input-otp/tsup.config.ts b/packages/components/input-otp/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/components/input-otp/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/components/input/CHANGELOG.md b/packages/components/input/CHANGELOG.md
index d0f060d532..14124904fc 100644
--- a/packages/components/input/CHANGELOG.md
+++ b/packages/components/input/CHANGELOG.md
@@ -1,5 +1,198 @@
 # @nextui-org/input
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/form@2.1.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.3.0-beta.12
+
+### Patch Changes
+
+- [#4172](https://github.com/nextui-org/nextui/pull/4172) [`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - introduce `isClearable` to Textarea component (#2348, #2112)
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.3.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.3.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - support server validation with form
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/form@2.0.1-beta.0
+
+## 2.3.0-beta.9
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#3966](https://github.com/nextui-org/nextui/pull/3966) [`a2d653137`](https://github.com/nextui-org/nextui/commit/a2d653137d61465a88dfa3830bb3a44e3a7faa87) Thanks [@mstfblci](https://github.com/mstfblci)! - - Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3774](https://github.com/nextui-org/nextui/pull/3774) [`606f75726`](https://github.com/nextui-org/nextui/commit/606f75726c6b273ea25528ec3269fa6e82af3349) Thanks [@ryxxn](https://github.com/ryxxn)! - clear button should not receive focus when input is disabled.
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx
index 23859a06d5..c3b57009ba 100644
--- a/packages/components/input/__tests__/input.test.tsx
+++ b/packages/components/input/__tests__/input.test.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
-import {render, renderHook, fireEvent} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render, renderHook, fireEvent, act} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
 
 import {Input} from "../src";
 
@@ -37,6 +38,22 @@ describe("Input", () => {
     expect(container.querySelector("input")).toHaveAttribute("disabled");
   });
 
+  it("should disable the clear button when isDisabled", () => {
+    const {getByRole} = render(<Input isClearable isDisabled label="test input" />);
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).toBeDisabled();
+  });
+
+  it("should not allow clear button to be focusable", () => {
+    const {getByRole} = render(<Input isClearable label="test input" />);
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).toHaveAttribute("tabIndex", "-1");
+  });
+
   it("should have required attribute when isRequired with native validationBehavior", () => {
     const {container} = render(<Input isRequired label="test input" validationBehavior="native" />);
 
@@ -141,7 +158,7 @@ describe("Input", () => {
       />,
     );
 
-    const clearButton = getByRole("button");
+    const clearButton = getByRole("button")!;
 
     expect(clearButton).not.toBeNull();
 
@@ -197,7 +214,7 @@ describe("Input", () => {
       />,
     );
 
-    const clearButton = getByRole("button");
+    const clearButton = getByRole("button")!;
 
     expect(clearButton).not.toBeNull();
 
@@ -256,7 +273,7 @@ describe("Input with React Hook Form", () => {
     input1 = document.querySelector("input[name=withDefaultValue]")!;
     input2 = document.querySelector("input[name=withoutDefaultValue]")!;
     input3 = document.querySelector("input[name=requiredField]")!;
-    submitButton = document.querySelector("button")!;
+    submitButton = document.querySelector('button[type="submit"]')!;
   });
 
   it("should work with defaultValues", () => {
@@ -282,4 +299,198 @@ describe("Input with React Hook Form", () => {
 
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
+
+  describe("validation", () => {
+    let user: UserEvent;
+
+    beforeEach(() => {
+      user = userEvent.setup();
+    });
+
+    describe("validationBehavior=native", () => {
+      it("supports isRequired", async () => {
+        const {getByTestId} = render(
+          <Form data-testid="form">
+            <Input isRequired data-testid="input" label="Name" validationBehavior="native" />
+          </Form>,
+        );
+
+        const input = getByTestId("input") as HTMLInputElement;
+
+        expect(input).toHaveAttribute("required");
+        expect(input).not.toHaveAttribute("aria-required");
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(false);
+
+        act(() => {
+          (getByTestId("form") as HTMLFormElement).checkValidity();
+        });
+
+        expect(document.activeElement).toBe(input);
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Constraints not satisfied",
+        );
+
+        await user.keyboard("hello");
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+      });
+
+      it("supports validate function", async () => {
+        const {getByTestId} = render(
+          <Form data-testid="form">
+            <Input
+              data-testid="input"
+              defaultValue="Foo"
+              label="Name"
+              validate={(v) => (v === "Foo" ? "Invalid name" : null)}
+              validationBehavior="native"
+            />
+          </Form>,
+        );
+
+        const input = getByTestId("input") as HTMLInputElement;
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(false);
+
+        act(() => {
+          (getByTestId("form") as HTMLFormElement).checkValidity();
+        });
+
+        expect(document.activeElement).toBe(input);
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid name",
+        );
+
+        await user.keyboard("hello");
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+      });
+
+      it("supports server validation", async () => {
+        function Test() {
+          let [serverErrors, setServerErrors] = React.useState({});
+          let onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+            e.preventDefault();
+            setServerErrors({
+              name: "Invalid name.",
+            });
+          };
+
+          return (
+            <Form data-testid="form" validationErrors={serverErrors} onSubmit={onSubmit}>
+              <Input data-testid="input" label="Name" name="name" validationBehavior="native" />
+              <button data-testid="submit" type="submit">
+                Submit
+              </button>
+            </Form>
+          );
+        }
+
+        const {getByTestId} = render(<Test />);
+
+        const input = getByTestId("input") as HTMLInputElement;
+        const submitButton = getByTestId("submit");
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+
+        await user.click(submitButton);
+        act(() => {
+          (getByTestId("form") as HTMLFormElement).checkValidity();
+        });
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid name.",
+        );
+        expect(input.validity.valid).toBe(false);
+
+        // Clicking twice doesn't clear server errors.
+        await user.click(submitButton);
+        act(() => {
+          (getByTestId("form") as HTMLFormElement).checkValidity();
+        });
+
+        expect(document.activeElement).toBe(input);
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid name.",
+        );
+        expect(input.validity.valid).toBe(false);
+
+        await user.keyboard("hello");
+        await user.tab();
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(true);
+      });
+    });
+
+    describe('validationBehavior="aria"', () => {
+      it("supports validate function", async () => {
+        const {getByTestId} = render(
+          <Form data-testid="form">
+            <Input
+              data-testid="input"
+              defaultValue="Foo"
+              label="Name"
+              validate={(v) => (v === "Foo" ? "Invalid name" : null)}
+            />
+          </Form>,
+        );
+
+        const input = getByTestId("input") as HTMLInputElement;
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid name",
+        );
+        expect(input.validity.valid).toBe(true);
+
+        await user.tab();
+        await user.keyboard("hello");
+        // TODO: fix this
+        // expect(input).not.toHaveAttribute("aria-describedby");
+        // expect(input).not.toHaveAttribute("aria-invalid");
+      });
+
+      it("supports server validation", async () => {
+        const {getByTestId} = render(
+          <Form validationErrors={{name: "Invalid name"}}>
+            <Input data-testid="input" label="Name" name="name" />
+          </Form>,
+        );
+
+        const input = getByTestId("input");
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid name",
+        );
+
+        await user.tab();
+        await user.keyboard("hello");
+        await user.tab();
+
+        // TODO: fix this
+        // expect(input).not.toHaveAttribute("aria-describedby");
+        // expect(input).not.toHaveAttribute("aria-invalid");
+      });
+    });
+  });
 });
diff --git a/packages/components/input/__tests__/textarea.test.tsx b/packages/components/input/__tests__/textarea.test.tsx
new file mode 100644
index 0000000000..7e71448c61
--- /dev/null
+++ b/packages/components/input/__tests__/textarea.test.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+import {render} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import {Textarea} from "../src";
+
+describe("Textarea", () => {
+  it("should clear the value and onClear is triggered", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        isClearable
+        defaultValue="junior@nextui.org"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(ref.current?.value)?.toBe("");
+
+    expect(onClear).toHaveBeenCalledTimes(1);
+  });
+
+  it("should disable clear button when isReadOnly is true", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        isClearable
+        isReadOnly
+        defaultValue="readOnly test for clear button"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button")!;
+
+    expect(clearButton).not.toBeNull();
+
+    const user = userEvent.setup();
+
+    await user.click(clearButton);
+
+    expect(onClear).toHaveBeenCalledTimes(0);
+  });
+
+  it("should appear clear button when just define onClear but not define isClearable", async () => {
+    const onClear = jest.fn();
+
+    const ref = React.createRef<HTMLTextAreaElement>();
+
+    const {getByRole} = render(
+      <Textarea
+        ref={ref}
+        defaultValue="junior@nextui.org"
+        label="test textarea"
+        onClear={onClear}
+      />,
+    );
+
+    const clearButton = getByRole("button");
+
+    expect(clearButton).not.toBeNull();
+  });
+});
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index 2effb7f24e..68a6dc57f3 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.2.5",
+  "version": "2.4.1",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
@@ -34,32 +34,33 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/textfield": "3.14.5",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.10.1",
-    "@react-types/shared": "3.23.1",
-    "@react-types/textfield": "3.9.3",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/textfield": "3.14.10",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/utils": "3.10.4",
+    "@react-types/shared": "3.25.0",
+    "@react-types/textfield": "3.9.7",
     "react-textarea-autosize": "^8.5.3"
   },
   "devDependencies": {
-    "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
index 9414472494..91dadea0e9 100644
--- a/packages/components/input/src/input.tsx
+++ b/packages/components/input/src/input.tsx
@@ -36,22 +36,25 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
 
   const end = useMemo(() => {
     if (isClearable) {
-      return <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>;
+      return <button {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</button>;
     }
 
     return endContent;
   }, [isClearable, getClearButtonProps]);
 
   const helperWrapper = useMemo(() => {
-    if (!hasHelper) return null;
+    const shouldShowError = isInvalid && errorMessage;
+    const hasContent = shouldShowError || description;
+
+    if (!hasHelper || !hasContent) return null;
 
     return (
       <div {...getHelperWrapperProps()}>
-        {isInvalid && errorMessage ? (
+        {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
-        ) : description ? (
+        ) : (
           <div {...getDescriptionProps()}>{description}</div>
-        ) : null}
+        )}
       </div>
     );
   }, [
diff --git a/packages/components/input/src/textarea.tsx b/packages/components/input/src/textarea.tsx
index ace8ae4b53..fe6e802ba6 100644
--- a/packages/components/input/src/textarea.tsx
+++ b/packages/components/input/src/textarea.tsx
@@ -3,6 +3,7 @@ import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 import {useMemo, useState} from "react";
 import TextareaAutosize from "react-textarea-autosize";
+import {CloseFilledIcon} from "@nextui-org/shared-icons";
 
 import {UseInputProps, useInput} from "./use-input";
 
@@ -14,11 +15,7 @@ type TextareaAutoSizeStyle = Omit<
   height?: number;
 };
 
-type OmittedInputProps =
-  | "isClearButtonFocusVisible"
-  | "isLabelPlaceholder"
-  | "isClearable"
-  | "isTextarea";
+type OmittedInputProps = "isClearButtonFocusVisible" | "isLabelPlaceholder" | "isTextarea";
 
 export type TextareaHeightChangeMeta = {
   rowHeight: number;
@@ -88,6 +85,8 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       getHelperWrapperProps,
       getDescriptionProps,
       getErrorMessageProps,
+      isClearable,
+      getClearButtonProps,
     } = useInput<HTMLTextAreaElement>({...otherProps, ref, isMultiline: true});
 
     const [hasMultipleRows, setIsHasMultipleRows] = useState(minRows > 1);
@@ -122,6 +121,14 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       />
     );
 
+    const clearButtonContent = useMemo(() => {
+      return isClearable ? (
+        <button {...getClearButtonProps()}>
+          <CloseFilledIcon />
+        </button>
+      ) : null;
+    }, [isClearable, getClearButtonProps]);
+
     const innerWrapper = useMemo(() => {
       if (startContent || endContent) {
         return (
@@ -136,20 +143,24 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       return <div {...getInnerWrapperProps()}>{content}</div>;
     }, [startContent, inputProps, endContent, getInnerWrapperProps]);
 
+    const shouldShowError = isInvalid && errorMessage;
+    const hasHelperContent = shouldShowError || description;
+
     return (
       <Component {...getBaseProps()}>
         {shouldLabelBeOutside ? labelContent : null}
         <div {...getInputWrapperProps()} data-has-multiple-rows={dataAttr(hasMultipleRows)}>
           {shouldLabelBeInside ? labelContent : null}
           {innerWrapper}
+          {clearButtonContent}
         </div>
-        {hasHelper ? (
+        {hasHelper && hasHelperContent ? (
           <div {...getHelperWrapperProps()}>
-            {isInvalid && errorMessage ? (
+            {shouldShowError ? (
               <div {...getErrorMessageProps()}>{errorMessage}</div>
-            ) : description ? (
+            ) : (
               <div {...getDescriptionProps()}>{description}</div>
-            ) : null}
+            )}
           </div>
         ) : null}
       </Component>
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
index 256c75b8ec..7d5e751d46 100644
--- a/packages/components/input/src/use-input.ts
+++ b/packages/components/input/src/use-input.ts
@@ -18,6 +18,7 @@ import {useControlledState} from "@react-stately/utils";
 import {useMemo, Ref, useCallback, useState} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
 import {useTextField} from "@react-aria/textfield";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 export interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>
   extends Omit<HTMLNextUIProps<"input">, keyof InputVariantProps> {
@@ -92,6 +93,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   originalProps: UseInputProps<T>,
 ) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, input.variantKeys);
 
@@ -111,7 +113,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     onClear,
     onChange,
     validationState,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     innerWrapperRef: innerWrapperRefProp,
     onValueChange = () => {},
     ...otherProps
@@ -223,7 +225,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     onPress: handleClear,
   });
 
-  const isInvalid = validationState === "invalid" || originalProps.isInvalid || isAriaInvalid;
+  const isInvalid = validationState === "invalid" || isAriaInvalid;
 
   const labelPlacement = useMemo<InputVariantProps["labelPlacement"]>(() => {
     if (isFileTypeInput) {
@@ -363,14 +365,13 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const getInputProps: PropGetter = useCallback(
     (props = {}) => {
       return {
-        ref: domRef,
         "data-slot": "input",
         "data-filled": dataAttr(isFilled),
         "data-filled-within": dataAttr(isFilledWithin),
         "data-has-start-content": dataAttr(hasStartContent),
         "data-has-end-content": dataAttr(!!endContent),
         className: slots.input({
-          class: clsx(classNames?.input, isFilled ? "is-filled" : ""),
+          class: clsx(classNames?.input, isFilled ? "is-filled" : "", isMultiline ? "pe-0" : ""),
         }),
         ...mergeProps(
           focusProps,
@@ -384,6 +385,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         ),
         "aria-readonly": dataAttr(originalProps.isReadOnly),
         onChange: chain(inputProps.onChange, onChange),
+        ref: domRef,
       };
     },
     [
@@ -510,12 +512,15 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     (props = {}) => {
       return {
         ...props,
-        role: "button",
-        tabIndex: 0,
+        type: "button",
+        tabIndex: -1,
+        disabled: originalProps.isDisabled,
         "aria-label": "clear input",
         "data-slot": "clear-button",
         "data-focus-visible": dataAttr(isClearButtonFocusVisible),
-        className: slots.clearButton({class: clsx(classNames?.clearButton, props?.className)}),
+        className: slots.clearButton({
+          class: clsx(classNames?.clearButton, props?.className),
+        }),
         ...mergeProps(clearPressProps, clearFocusProps),
       };
     },
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index ebb29582a7..d74a2523a8 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -14,6 +14,7 @@ import {
 } from "@nextui-org/shared-icons";
 import {button} from "@nextui-org/theme";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
 
 import {Input, InputProps, useInput} from "../src";
 
@@ -515,6 +516,29 @@ const WithReactHookFormTemplate = (args: InputProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: InputProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      username: "Please provide a valid username.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <Input {...args} label="Username" name="username" />
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
 export const Default = {
   render: MirrorTemplate,
 
@@ -687,6 +711,14 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 
diff --git a/packages/components/input/stories/textarea.stories.tsx b/packages/components/input/stories/textarea.stories.tsx
index fc0799be94..fdca80cfbc 100644
--- a/packages/components/input/stories/textarea.stories.tsx
+++ b/packages/components/input/stories/textarea.stories.tsx
@@ -5,6 +5,7 @@ import {Meta} from "@storybook/react";
 import {input} from "@nextui-org/theme";
 import {SendFilledIcon, PlusFilledIcon} from "@nextui-org/shared-icons";
 import {button} from "@nextui-org/theme";
+import {Form} from "@nextui-org/form";
 
 import {Textarea, TextAreaProps} from "../src";
 
@@ -213,6 +214,29 @@ export const WithEndContent = {
   },
 };
 
+const ServerValidationTemplate = (args: TextAreaProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      comment: "Please provide a valid comment.",
+    });
+  };
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <Textarea {...args} label="Comment" name="comment" />
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
 export const Controlled = {
   render: ControlledTemplate,
 
@@ -292,6 +316,14 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 
@@ -302,3 +334,15 @@ export const IsInvalid = {
     errorMessage: "Please enter a valid description",
   },
 };
+
+export const Clearable = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    placeholder: "Enter your description",
+    defaultValue: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+    // eslint-disable-next-line no-console
+    onClear: () => console.log("textarea cleared"),
+  },
+};
diff --git a/packages/components/kbd/CHANGELOG.md b/packages/components/kbd/CHANGELOG.md
index 6451c850bf..73fcb051b9 100644
--- a/packages/components/kbd/CHANGELOG.md
+++ b/packages/components/kbd/CHANGELOG.md
@@ -1,5 +1,162 @@
 # @nextui-org/kbd
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/kbd/package.json b/packages/components/kbd/package.json
index 717f2955d8..8f58553947 100644
--- a/packages/components/kbd/package.json
+++ b/packages/components/kbd/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"
@@ -34,15 +34,15 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/system-rsc": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/utils": "3.24.1"
+    "@react-aria/utils": "3.26.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/link/CHANGELOG.md b/packages/components/link/CHANGELOG.md
index 86ca63cb65..ab9611f829 100644
--- a/packages/components/link/CHANGELOG.md
+++ b/packages/components/link/CHANGELOG.md
@@ -1,5 +1,185 @@
 # @nextui-org/link
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-aria-link@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-link@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.7
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-aria-link@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-link@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.35
 
 ### Patch Changes
diff --git a/packages/components/link/package.json b/packages/components/link/package.json
index a76323ecae..54d8fff892 100644
--- a/packages/components/link/package.json
+++ b/packages/components/link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "2.0.35",
+  "version": "2.2.1",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;",
   "keywords": [
     "link"
@@ -34,20 +34,20 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-link": "workspace:*",
-    "@react-aria/link": "3.7.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/focus": "3.17.1",
-    "@react-types/link": "3.5.5"
+    "@react-aria/link": "3.7.6",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/focus": "3.18.4",
+    "@react-types/link": "3.5.8"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/listbox/CHANGELOG.md b/packages/components/listbox/CHANGELOG.md
index 57aabd1196..cf007bb929 100644
--- a/packages/components/listbox/CHANGELOG.md
+++ b/packages/components/listbox/CHANGELOG.md
@@ -1,5 +1,238 @@
 # @nextui-org/listbox
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/divider@2.2.1
+  - @nextui-org/use-is-mobile@2.2.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix typecheck
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4198](https://github.com/nextui-org/nextui/pull/4198) [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix forwardRef render functions not using ref
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Virtualization support added to Listbox and Menu
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/divider@2.2.0
+  - @nextui-org/use-is-mobile@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.14
+
+### Patch Changes
+
+- [#4168](https://github.com/nextui-org/nextui/pull/4168) [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9) Thanks [@macci001](https://github.com/macci001)! - Fixes missing `<li>` wrapper when `href` prop is passed in `ListboxItem`, `MenuItem`, and `PaginationItem` (#4147)
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.9
+
+## 2.2.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.2.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/use-is-mobile@2.1.0-beta.8
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/divider@2.1.0-beta.8
+  - @nextui-org/use-is-mobile@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+
+## 2.2.0-beta.10
+
+### Patch Changes
+
+- [#4105](https://github.com/nextui-org/nextui/pull/4105) [`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac) Thanks [@winchesHe](https://github.com/winchesHe)! - Add truncate class to the list item to avoid overflow the wrapper
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.7
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#4094](https://github.com/nextui-org/nextui/pull/4094) [`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Virtualization support added to Listbox & Autocomplete
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.7
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/use-is-mobile@2.1.0-beta.6
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/divider@2.1.0-beta.6
+  - @nextui-org/use-is-mobile@2.1.0-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/divider@2.1.0-beta.5
+  - @nextui-org/use-is-mobile@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/divider@2.1.0-beta.3
+  - @nextui-org/use-is-mobile@2.1.0-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/divider@2.1.0-beta.2
+  - @nextui-org/use-is-mobile@2.1.0-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/divider@2.1.0-beta.1
+  - @nextui-org/use-is-mobile@2.1.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3883](https://github.com/nextui-org/nextui/pull/3883) [`a2e562b03`](https://github.com/nextui-org/nextui/commit/a2e562b03f79b52b0b35f07104b3585ea05e2cb6) Thanks [@ryo-manba](https://github.com/ryo-manba)! - change ListboxItem key to optional (#3880)
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/divider@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-is-mobile@2.1.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.27
 
 ### Patch Changes
diff --git a/packages/components/listbox/__tests__/listbox.test.tsx b/packages/components/listbox/__tests__/listbox.test.tsx
index a3d3ab0ba3..e77196aed1 100644
--- a/packages/components/listbox/__tests__/listbox.test.tsx
+++ b/packages/components/listbox/__tests__/listbox.test.tsx
@@ -1,10 +1,16 @@
 import * as React from "react";
-import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Listbox, ListboxItem, ListboxSection} from "../src";
 
 describe("Listbox", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(
       <Listbox aria-label="Actions" onAction={alert}>
@@ -118,6 +124,40 @@ describe("Listbox", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
+  it("should not have anchor tag when href prop is not passed", () => {
+    render(
+      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
+        <ListboxItem key="new">New file</ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+      </Listbox>,
+    );
+
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeFalsy();
+  });
+
+  it("should have anchor tag when href prop is passed", () => {
+    const href = "http://www.nextui.org/";
+
+    render(
+      <Listbox disallowEmptySelection aria-label="Actions" selectionMode="multiple">
+        <ListboxItem key="new" href={href}>
+          New file
+        </ListboxItem>
+        <ListboxItem key="copy">Copy link</ListboxItem>
+        <ListboxItem key="edit">Edit file</ListboxItem>
+      </Listbox>,
+    );
+
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeTruthy();
+
+    expect(anchorTag).toHaveProperty("href", href);
+  });
+
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 
@@ -145,11 +185,8 @@ describe("Listbox", () => {
 
     expect(listboxItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(listboxItems[1]);
-
-      expect(onSelectionChange).toBeCalledTimes(1);
-    });
+    await user.click(listboxItems[1]);
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
   });
 
   it("should work with multiple selection (controlled)", async () => {
@@ -179,11 +216,8 @@ describe("Listbox", () => {
 
     expect(listboxItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(listboxItems[0]);
-
-      expect(onSelectionChange).toBeCalledTimes(1);
-    });
+    await user.click(listboxItems[0]);
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
   });
 
   it("should show checkmarks if selectionMode is single and has a selected item", () => {
@@ -273,4 +307,30 @@ describe("Listbox", () => {
 
     expect(checkmark1).toBeFalsy();
   });
+
+  it("should truncate the text if the child is not a string", () => {
+    const wrapper = render(
+      <Listbox>
+        <ListboxItem key="new">New file</ListboxItem>
+      </Listbox>,
+    );
+
+    const menuItem = wrapper.getByText("New file");
+
+    expect(menuItem).toHaveProperty("className", expect.stringContaining("truncate"));
+  });
+
+  it("should not truncate the text if the child is a string", () => {
+    const wrapper = render(
+      <Listbox>
+        <ListboxItem key="new">
+          <div>New file</div>
+        </ListboxItem>
+      </Listbox>,
+    );
+
+    const menuItem = wrapper.getByText("New file").parentElement;
+
+    expect(menuItem).not.toHaveProperty("className", expect.stringContaining("truncate"));
+  });
 });
diff --git a/packages/components/listbox/package.json b/packages/components/listbox/package.json
index 92e365524e..83cd0a7026 100644
--- a/packages/components/listbox/package.json
+++ b/packages/components/listbox/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/listbox",
-  "version": "2.1.27",
+  "version": "2.3.1",
   "description": "A listbox displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "listbox"
@@ -34,34 +34,35 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
+    "@nextui-org/aria-utils": "workspace:*",
+    "@nextui-org/divider": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/divider": "workspace:*",
-    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/listbox": "3.12.1",
-    "@react-stately/list": "3.10.5",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-types/menu": "3.9.9",
-    "@react-types/shared": "3.23.1"
+    "@tanstack/react-virtual": "3.10.9",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/listbox": "3.13.5",
+    "@react-stately/list": "3.11.0",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-types/menu": "3.9.12",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
-    "@nextui-org/theme": "workspace:*",
-    "@nextui-org/system": "workspace:*",
-    "clean-package": "2.2.0",
+    "@nextui-org/avatar": "workspace:*",
+    "@nextui-org/chip": "workspace:*",
+    "@nextui-org/scroll-shadow": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
-    "@nextui-org/scroll-shadow": "workspace:*",
-    "@nextui-org/chip": "workspace:*",
-    "@nextui-org/avatar": "workspace:*",
+    "@nextui-org/system": "workspace:*",
+    "@nextui-org/theme": "workspace:*",
+    "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/components/listbox/src/base/listbox-item-base.tsx b/packages/components/listbox/src/base/listbox-item-base.tsx
index d3d68d6c65..e5283f3ff1 100644
--- a/packages/components/listbox/src/base/listbox-item-base.tsx
+++ b/packages/components/listbox/src/base/listbox-item-base.tsx
@@ -90,8 +90,8 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
 }
 
 export type ListboxItemBaseProps<T extends object = {}> = Props<T> &
-  ListboxItemVariantProps &
-  AriaOptionProps &
+  Omit<ListboxItemVariantProps, "hasDescriptionTextChild" | "hasTitleTextChild"> &
+  Omit<AriaOptionProps, "key"> &
   FocusableProps &
   PressEvents;
 
diff --git a/packages/components/listbox/src/listbox-item.tsx b/packages/components/listbox/src/listbox-item.tsx
index f2e8010f74..8a3f248de1 100644
--- a/packages/components/listbox/src/listbox-item.tsx
+++ b/packages/components/listbox/src/listbox-item.tsx
@@ -1,17 +1,18 @@
 import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
 
 import {UseListboxItemProps, useListboxItem} from "./use-listbox-item";
 import {ListboxSelectedIcon} from "./listbox-selected-icon";
 
-export interface ListboxItemProps<T extends object = object> extends UseListboxItemProps<T> {}
+export interface ListboxItemProps<T extends object = object>
+  extends Omit<UseListboxItemProps<T>, "hasDescriptionTextChild" | "hasTitleTextChild"> {}
 
 /**
  * @internal
  */
-const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
+const ListboxItem = (props: ListboxItemProps) => {
   const {
     Component,
+    FragmentWrapper,
     rendered,
     description,
     isSelectable,
@@ -22,6 +23,7 @@ const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
     endContent,
     hideSelectedIcon,
     disableAnimation,
+    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,
@@ -45,22 +47,24 @@ const ListboxItem = forwardRef<"li", ListboxItemProps>((props, _) => {
 
   return (
     <Component {...getItemProps()}>
-      {startContent}
-      {description ? (
-        <div {...getWrapperProps()}>
+      <FragmentWrapper {...fragmentWrapperProps}>
+        {startContent}
+        {description ? (
+          <div {...getWrapperProps()}>
+            <span {...getLabelProps()}>{rendered}</span>
+            <span {...getDescriptionProps()}>{description}</span>
+          </div>
+        ) : (
           <span {...getLabelProps()}>{rendered}</span>
-          <span {...getDescriptionProps()}>{description}</span>
-        </div>
-      ) : (
-        <span {...getLabelProps()}>{rendered}</span>
-      )}
-      {isSelectable && !hideSelectedIcon && (
-        <span {...getSelectedIconProps()}>{selectedContent}</span>
-      )}
-      {endContent}
+        )}
+        {isSelectable && !hideSelectedIcon && (
+          <span {...getSelectedIconProps()}>{selectedContent}</span>
+        )}
+        {endContent}
+      </FragmentWrapper>
     </Component>
   );
-});
+};
 
 ListboxItem.displayName = "NextUI.ListboxItem";
 
diff --git a/packages/components/listbox/src/listbox.tsx b/packages/components/listbox/src/listbox.tsx
index ffc0fa6f82..5098d2a910 100644
--- a/packages/components/listbox/src/listbox.tsx
+++ b/packages/components/listbox/src/listbox.tsx
@@ -1,14 +1,32 @@
-import {ForwardedRef, ReactElement, Ref} from "react";
+import {ForwardedRef, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {mergeProps} from "@react-aria/utils";
 
-import {UseListboxProps, useListbox} from "./use-listbox";
+import {UseListboxProps, UseListboxReturn, useListbox} from "./use-listbox";
 import ListboxSection from "./listbox-section";
 import ListboxItem from "./listbox-item";
+import VirtualizedListbox from "./virtualized-listbox";
 
-interface Props<T> extends UseListboxProps<T> {}
+export interface VirtualizationProps {
+  maxListboxHeight: number;
+  itemHeight: number;
+}
+
+interface Props<T> extends UseListboxProps<T> {
+  isVirtualized?: boolean;
+  virtualization?: VirtualizationProps;
+}
+
+export type ListboxProps<T extends object = object> = Props<T>;
+
+const Listbox = forwardRef(function Listbox<T extends object>(
+  props: ListboxProps<T>,
+  ref: ForwardedRef<HTMLUListElement>,
+) {
+  const {isVirtualized, ...restProps} = props;
+
+  const useListboxProps = useListbox<T>({...restProps, ref});
 
-function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElement>) {
   const {
     Component,
     state,
@@ -24,7 +42,13 @@ function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListE
     disableAnimation,
     getEmptyContentProps,
     getListProps,
-  } = useListbox<T>({...props, ref});
+  } = useListboxProps;
+
+  if (isVirtualized) {
+    return (
+      <VirtualizedListbox {...(props as Props<T>)} {...(useListboxProps as UseListboxReturn)} />
+    );
+  }
 
   const content = (
     <Component {...getListProps()}>
@@ -72,11 +96,6 @@ function Listbox<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListE
       {bottomContent}
     </div>
   );
-}
-
-Listbox.displayName = "NextUI.Listbox";
-
-export type ListboxProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
+}) as <T extends object>(props: ListboxProps<T>) => ReactElement;
 
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Listbox) as <T extends object>(props: ListboxProps<T>) => ReactElement;
+export default Listbox;
diff --git a/packages/components/listbox/src/use-listbox-item.ts b/packages/components/listbox/src/use-listbox-item.ts
index f4e0781644..820b32637f 100644
--- a/packages/components/listbox/src/use-listbox-item.ts
+++ b/packages/components/listbox/src/use-listbox-item.ts
@@ -1,6 +1,7 @@
 import type {ListboxItemBaseProps} from "./base/listbox-item-base";
+import type {MenuItemVariantProps} from "@nextui-org/theme";
 
-import {useMemo, useRef, useCallback} from "react";
+import {useMemo, useRef, useCallback, Fragment} from "react";
 import {listboxItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -24,7 +25,8 @@ interface Props<T extends object> extends ListboxItemBaseProps<T> {
 }
 
 export type UseListboxItemProps<T extends object> = Props<T> &
-  Omit<HTMLNextUIProps<"li">, keyof Props<T>>;
+  Omit<HTMLNextUIProps<"li">, keyof Props<T>> &
+  MenuItemVariantProps;
 
 export function useListboxItem<T extends object>(originalProps: UseListboxItemProps<T>) {
   const globalContext = useProviderContext();
@@ -48,6 +50,7 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     shouldHighlightOnFocus,
     hideSelectedIcon = false,
     isReadOnly = false,
+    href,
     ...otherProps
   } = props;
 
@@ -56,9 +59,12 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || (originalProps.href ? "a" : "li");
+  const Component = as || "li";
   const shouldFilterDOMProps = typeof Component === "string";
 
+  const FragmentWrapper = href ? "a" : Fragment;
+  const fragmentWrapperProps = href ? {href} : {};
+
   const {rendered, key} = item;
 
   const isDisabled = state.disabledKeys.has(key) || originalProps.isDisabled;
@@ -99,8 +105,10 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
         ...variantProps,
         isDisabled,
         disableAnimation,
+        hasTitleTextChild: typeof rendered === "string",
+        hasDescriptionTextChild: typeof description === "string",
       }),
-    [objectToDeps(variantProps), isDisabled, disableAnimation],
+    [objectToDeps(variantProps), isDisabled, disableAnimation, rendered, description],
   );
 
   const baseStyles = clsx(classNames?.base, className);
@@ -165,6 +173,7 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
 
   return {
     Component,
+    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -178,6 +187,7 @@ export function useListboxItem<T extends object>(originalProps: UseListboxItemPr
     selectedIcon,
     hideSelectedIcon,
     disableAnimation,
+    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getWrapperProps,
diff --git a/packages/components/listbox/src/virtualized-listbox.tsx b/packages/components/listbox/src/virtualized-listbox.tsx
new file mode 100644
index 0000000000..0a36766204
--- /dev/null
+++ b/packages/components/listbox/src/virtualized-listbox.tsx
@@ -0,0 +1,155 @@
+import {useRef} from "react";
+import {mergeProps} from "@react-aria/utils";
+import {useVirtualizer} from "@tanstack/react-virtual";
+import {isEmpty} from "@nextui-org/shared-utils";
+
+import ListboxItem from "./listbox-item";
+import ListboxSection from "./listbox-section";
+import {VirtualizationProps} from "./listbox";
+import {UseListboxReturn} from "./use-listbox";
+
+interface Props extends UseListboxReturn {
+  isVirtualized?: boolean;
+  virtualization?: VirtualizationProps;
+}
+
+const VirtualizedListbox = (props: Props) => {
+  const {
+    Component,
+    state,
+    color,
+    variant,
+    itemClasses,
+    getBaseProps,
+    topContent,
+    bottomContent,
+    hideEmptyContent,
+    hideSelectedIcon,
+    shouldHighlightOnFocus,
+    disableAnimation,
+    getEmptyContentProps,
+    getListProps,
+  } = props;
+
+  const {virtualization} = props;
+
+  if (
+    !virtualization ||
+    (!isEmpty(virtualization) && !virtualization.maxListboxHeight && !virtualization.itemHeight)
+  ) {
+    throw new Error(
+      "You are using a virtualized listbox. VirtualizedListbox requires 'virtualization' props with 'maxListboxHeight' and 'itemHeight' properties. This error might have originated from autocomplete components that use VirtualizedListbox. Please provide these props to use the virtualized listbox.",
+    );
+  }
+  const {maxListboxHeight, itemHeight} = virtualization;
+
+  const listHeight = Math.min(maxListboxHeight, itemHeight * state.collection.size);
+
+  const parentRef = useRef(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: state.collection.size,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+  });
+
+  const virtualItems = rowVirtualizer.getVirtualItems();
+
+  const renderRow = ({
+    index,
+    style: virtualizerStyle,
+  }: {
+    index: number;
+    style: React.CSSProperties;
+  }) => {
+    const item = [...state.collection][index];
+
+    const itemProps = {
+      color,
+      item,
+      state,
+      variant,
+      disableAnimation,
+      hideSelectedIcon,
+      ...item.props,
+    };
+
+    if (item.type === "section") {
+      return (
+        <ListboxSection
+          key={item.key}
+          {...itemProps}
+          itemClasses={itemClasses}
+          style={{...virtualizerStyle, ...itemProps.style}}
+        />
+      );
+    }
+
+    let listboxItem = (
+      <ListboxItem
+        key={item.key}
+        {...itemProps}
+        classNames={mergeProps(itemClasses, item.props?.classNames)}
+        shouldHighlightOnFocus={shouldHighlightOnFocus}
+        style={{...virtualizerStyle, ...itemProps.style}}
+      />
+    );
+
+    if (item.wrapper) {
+      listboxItem = item.wrapper(listboxItem);
+    }
+
+    return listboxItem;
+  };
+
+  const content = (
+    <Component {...getListProps()}>
+      {!state.collection.size && !hideEmptyContent && (
+        <li>
+          <div {...getEmptyContentProps()} />
+        </li>
+      )}
+      <div
+        ref={parentRef}
+        style={{
+          height: maxListboxHeight,
+          overflow: "auto",
+        }}
+      >
+        {listHeight > 0 && itemHeight > 0 && (
+          <div
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative",
+            }}
+          >
+            {virtualItems.map((virtualItem) =>
+              renderRow({
+                index: virtualItem.index,
+                style: {
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${virtualItem.size}px`,
+                  transform: `translateY(${virtualItem.start}px)`,
+                },
+              }),
+            )}
+          </div>
+        )}
+      </div>
+    </Component>
+  );
+
+  return (
+    <div {...getBaseProps()}>
+      {topContent}
+      {content}
+      {bottomContent}
+    </div>
+  );
+};
+
+export default VirtualizedListbox;
diff --git a/packages/components/listbox/stories/listbox.stories.tsx b/packages/components/listbox/stories/listbox.stories.tsx
index 9f24e947a6..c670e57621 100644
--- a/packages/components/listbox/stories/listbox.stories.tsx
+++ b/packages/components/listbox/stories/listbox.stories.tsx
@@ -679,6 +679,59 @@ const CustomWithClassNamesTemplate = ({color, variant, disableAnimation, ...args
   );
 };
 
+interface LargeDatasetSchema {
+  label: string;
+  value: string;
+  description: string;
+}
+
+function generateLargeDataset(n: number): LargeDatasetSchema[] {
+  const dataset: LargeDatasetSchema[] = [];
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+}
+
+const LargeDatasetTemplate = (args: ListboxProps & {numItems: number}) => {
+  const largeDataset = generateLargeDataset(args.numItems);
+
+  return (
+    <div className="flex w-full max-w-full py-20 px-20">
+      <Listbox label={`Select from ${args.numItems} items`} {...args}>
+        {largeDataset.map((item, index) => (
+          <ListboxItem key={index} value={item.value}>
+            {item.label}
+          </ListboxItem>
+        ))}
+      </Listbox>
+    </div>
+  );
+};
+
 export const Default = {
   render: Template,
   args: {
@@ -782,3 +835,55 @@ export const CustomWithClassNames = {
     ...defaultProps,
   },
 };
+
+export const OneThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    numItems: 1000,
+    isVirtualized: true,
+    virtualization: {
+      maxListboxHeight: 400,
+      itemHeight: 20,
+    },
+  },
+};
+
+export const TenThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    numItems: 10000,
+    isVirtualized: true,
+    virtualization: {
+      maxListboxHeight: 400,
+      itemHeight: 20,
+    },
+  },
+};
+
+export const CustomMaxListboxHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    numItems: 1000,
+    isVirtualized: true,
+    virtualization: {
+      maxListboxHeight: 600,
+      itemHeight: 20,
+    },
+  },
+};
+
+export const CustomItemHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    numItems: 1000,
+    isVirtualized: true,
+    virtualization: {
+      itemHeight: 40,
+      maxListboxHeight: 600,
+    },
+  },
+};
diff --git a/packages/components/menu/CHANGELOG.md b/packages/components/menu/CHANGELOG.md
index 0bea78939a..f9468199d9 100644
--- a/packages/components/menu/CHANGELOG.md
+++ b/packages/components/menu/CHANGELOG.md
@@ -1,5 +1,244 @@
 # @nextui-org/menu
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/divider@2.2.1
+  - @nextui-org/use-aria-menu@2.2.1
+  - @nextui-org/use-is-mobile@2.2.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix typecheck
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix should not export list item internal variables type
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4198](https://github.com/nextui-org/nextui/pull/4198) [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix forwardRef render functions not using ref
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Virtualization support added to Listbox and Menu
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/use-aria-menu@2.2.0
+  - @nextui-org/divider@2.2.0
+  - @nextui-org/use-is-mobile@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- [#4168](https://github.com/nextui-org/nextui/pull/4168) [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9) Thanks [@macci001](https://github.com/macci001)! - Fixes missing `<li>` wrapper when `href` prop is passed in `ListboxItem`, `MenuItem`, and `PaginationItem` (#4147)
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.9
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [#4156](https://github.com/nextui-org/nextui/pull/4156) [`d37007c69`](https://github.com/nextui-org/nextui/commit/d37007c69c3e1ff4a66d414cbb1a4a38bb22264c) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix menu item classNames not work (#4119)
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/use-aria-menu@2.1.0-beta.8
+  - @nextui-org/use-is-mobile@2.1.0-beta.8
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/divider@2.1.0-beta.8
+  - @nextui-org/use-aria-menu@2.1.0-beta.7
+  - @nextui-org/use-is-mobile@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4105](https://github.com/nextui-org/nextui/pull/4105) [`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac) Thanks [@winchesHe](https://github.com/winchesHe)! - Add truncate class to the list item to avoid overflow the wrapper
+
+- Updated dependencies []:
+  - @nextui-org/divider@2.1.0-beta.7
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/use-aria-menu@2.1.0-beta.6
+  - @nextui-org/use-is-mobile@2.1.0-beta.6
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/divider@2.1.0-beta.6
+  - @nextui-org/use-aria-menu@2.1.0-beta.5
+  - @nextui-org/use-is-mobile@2.1.0-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/divider@2.1.0-beta.5
+  - @nextui-org/use-aria-menu@2.1.0-beta.4
+  - @nextui-org/use-is-mobile@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/divider@2.1.0-beta.3
+  - @nextui-org/use-aria-menu@2.1.0-beta.3
+  - @nextui-org/use-is-mobile@2.1.0-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/divider@2.1.0-beta.2
+  - @nextui-org/use-aria-menu@2.1.0-beta.2
+  - @nextui-org/use-is-mobile@2.1.0-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/divider@2.1.0-beta.1
+  - @nextui-org/use-aria-menu@2.1.0-beta.1
+  - @nextui-org/use-is-mobile@2.1.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3261](https://github.com/nextui-org/nextui/pull/3261) [`2aebfcca5`](https://github.com/nextui-org/nextui/commit/2aebfcca5906fb72a7f751273b38e41a40dc16a3) Thanks [@wingkwong](https://github.com/wingkwong)! - Use `useMenu` and `useMenuItem` from `@react-aria` instead of custom hooks
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/divider@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-menu@2.1.0-beta.0
+  - @nextui-org/use-is-mobile@2.1.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.30
 
 ### Patch Changes
diff --git a/packages/components/menu/__tests__/menu.test.tsx b/packages/components/menu/__tests__/menu.test.tsx
index aeb7f14a5a..0b4ea75e87 100644
--- a/packages/components/menu/__tests__/menu.test.tsx
+++ b/packages/components/menu/__tests__/menu.test.tsx
@@ -1,10 +1,16 @@
 import * as React from "react";
-import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Menu, MenuItem, MenuSection} from "../src";
 
 describe("Menu", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(
       <Menu aria-label="Actions" onAction={alert}>
@@ -119,6 +125,46 @@ describe("Menu", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
+  it("should not have anchor tag when href prop is not passed", () => {
+    render(
+      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
+        <MenuItem key="new">New file</MenuItem>
+        <MenuItem key="copy">Copy link</MenuItem>
+        <MenuItem key="edit">Edit file</MenuItem>
+        <MenuItem key="delete" color="danger">
+          Delete file
+        </MenuItem>
+      </Menu>,
+    );
+
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeFalsy();
+  });
+
+  it("should have anchor tag when href prop is passed", () => {
+    const href = "http://www.nextui.org/";
+
+    render(
+      <Menu disallowEmptySelection aria-label="Actions" selectionMode="multiple">
+        <MenuItem key="new" href={href}>
+          New file
+        </MenuItem>
+        <MenuItem key="copy">Copy link</MenuItem>
+        <MenuItem key="edit">Edit file</MenuItem>
+        <MenuItem key="delete" color="danger">
+          Delete file
+        </MenuItem>
+      </Menu>,
+    );
+
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeTruthy();
+
+    expect(anchorTag).toHaveProperty("href", href);
+  });
+
   it("should work with single selection (controlled)", async () => {
     let onSelectionChange = jest.fn();
 
@@ -146,11 +192,8 @@ describe("Menu", () => {
 
     expect(menuItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
-
-      expect(onSelectionChange).toBeCalledTimes(1);
-    });
+    await user.click(menuItems[1]);
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
   });
 
   it("should work with multiple selection (controlled)", async () => {
@@ -180,11 +223,8 @@ describe("Menu", () => {
 
     expect(menuItems.length).toBe(4);
 
-    await act(async () => {
-      await userEvent.click(menuItems[0]);
-
-      expect(onSelectionChange).toBeCalledTimes(1);
-    });
+    await user.click(menuItems[0]);
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
   });
 
   it("should show checkmarks if selectionMode is single and has a selected item", () => {
@@ -291,11 +331,8 @@ describe("Menu", () => {
 
     let menuItems = wrapper.getAllByRole("menuitem");
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
-
-      expect(onAction).toBeCalledTimes(1);
-    });
+    await user.click(menuItems[1]);
+    expect(onAction).toHaveBeenCalledTimes(1);
   });
 
   it("should not dispatch onAction events if item is disabled", async () => {
@@ -316,11 +353,8 @@ describe("Menu", () => {
 
     let menuItems = wrapper.getAllByRole("menuitem");
 
-    await act(async () => {
-      await userEvent.click(menuItems[1]);
-
-      expect(onAction).toBeCalledTimes(0);
-    });
+    await user.click(menuItems[1]);
+    expect(onAction).toHaveBeenCalledTimes(0);
   });
 
   it("should dispatch onPress, onAction and onClick events", async () => {
@@ -343,12 +377,77 @@ describe("Menu", () => {
 
     let menuItems = wrapper.getAllByRole("menuitem");
 
-    await act(async () => {
-      await userEvent.click(menuItems[0]);
+    await user.click(menuItems[0]);
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should menuItem classNames work", () => {
+    const wrapper = render(
+      <Menu>
+        <MenuItem classNames={{title: "test"}}>New file</MenuItem>
+      </Menu>,
+    );
+    const menuItem = wrapper.getByText("New file");
+
+    expect(menuItem.classList.contains("test")).toBeTruthy();
+  });
+
+  it("should menuItem classNames override menu itemClasses", () => {
+    const wrapper = render(
+      <Menu itemClasses={{title: "test"}}>
+        <MenuItem classNames={{title: "test2"}}>New file</MenuItem>
+      </Menu>,
+    );
+    const menuItem = wrapper.getByText("New file");
+
+    expect(menuItem.classList.contains("test2")).toBeTruthy();
+  });
+  it("should merge menu item classNames with itemClasses", () => {
+    const wrapper = render(
+      <Menu itemClasses={{title: "test"}}>
+        <MenuItem classNames={{title: "test2"}}>New file</MenuItem>
+        <MenuItem>Delete file</MenuItem>
+      </Menu>,
+    );
+
+    const menuItemWithBoth = wrapper.getByText("New file");
+    const menuItemWithDefault = wrapper.getByText("Delete file");
+
+    // Check first MenuItem has both classes
+    expect(menuItemWithBoth.classList.contains("test2")).toBeTruthy();
+    expect(menuItemWithBoth.classList.contains("test")).toBeTruthy();
+
+    // Check second MenuItem only has the default class
+    expect(menuItemWithDefault.classList.contains("test")).toBeTruthy();
+    expect(menuItemWithDefault.classList.contains("test2")).toBeFalsy();
+  });
+
+  it("should truncate the text if the child is not a string", () => {
+    const wrapper = render(
+      <Menu>
+        <MenuItem key="new">New file</MenuItem>
+      </Menu>,
+    );
+
+    const menuItem = wrapper.getByText("New file");
+
+    expect(menuItem).toHaveProperty("className", expect.stringContaining("truncate"));
+  });
+
+  it("should not truncate the text if the child is a string", () => {
+    const wrapper = render(
+      <Menu>
+        <MenuItem key="new">
+          <div>New file</div>
+        </MenuItem>
+      </Menu>,
+    );
+
+    const menuItem = wrapper.getByText("New file").parentElement;
 
-      expect(onAction).toBeCalledTimes(1);
-      expect(onPress).toBeCalledTimes(1);
-      expect(onClick).toBeCalledTimes(1);
-    });
+    expect(menuItem).not.toHaveProperty("className", expect.stringContaining("truncate"));
   });
 });
diff --git a/packages/components/menu/package.json b/packages/components/menu/package.json
index b84d9ea432..c2fc854c17 100644
--- a/packages/components/menu/package.json
+++ b/packages/components/menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.0.30",
+  "version": "2.2.1",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/divider": "workspace:*",
@@ -46,14 +46,14 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-menu": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/menu": "3.14.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/menu": "3.7.1",
-    "@react-stately/tree": "3.8.1",
-    "@react-types/menu": "3.9.9",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/menu": "3.15.5",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/menu": "3.8.3",
+    "@react-stately/tree": "3.8.5",
+    "@react-types/menu": "3.9.12",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/menu/src/base/menu-item-base.tsx b/packages/components/menu/src/base/menu-item-base.tsx
index e1228b0e09..693ab6d53f 100644
--- a/packages/components/menu/src/base/menu-item-base.tsx
+++ b/packages/components/menu/src/base/menu-item-base.tsx
@@ -89,7 +89,7 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre
 }
 
 export type MenuItemBaseProps<T extends object = {}> = Props<T> &
-  MenuItemVariantProps &
+  Omit<MenuItemVariantProps, "hasDescriptionTextChild" | "hasTitleTextChild"> &
   AriaMenuItemProps &
   FocusableProps &
   PressEvents;
diff --git a/packages/components/menu/src/menu-item.tsx b/packages/components/menu/src/menu-item.tsx
index 226d28fd85..5e22e495a3 100644
--- a/packages/components/menu/src/menu-item.tsx
+++ b/packages/components/menu/src/menu-item.tsx
@@ -1,17 +1,18 @@
 import {useMemo, ReactNode} from "react";
-import {forwardRef} from "@nextui-org/system";
 
 import {UseMenuItemProps, useMenuItem} from "./use-menu-item";
 import {MenuSelectedIcon} from "./menu-selected-icon";
 
-export interface MenuItemProps<T extends object = object> extends UseMenuItemProps<T> {}
+export interface MenuItemProps<T extends object = object>
+  extends Omit<UseMenuItemProps<T>, "hasDescriptionTextChild" | "hasTitleTextChild"> {}
 
 /**
  * @internal
  */
-const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
+const MenuItem = (props: MenuItemProps) => {
   const {
     Component,
+    FragmentWrapper,
     slots,
     classNames,
     rendered,
@@ -25,6 +26,7 @@ const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
     endContent,
     disableAnimation,
     hideSelectedIcon,
+    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     getDescriptionProps,
@@ -48,23 +50,25 @@ const MenuItem = forwardRef<"li", MenuItemProps>((props, _) => {
 
   return (
     <Component {...getItemProps()}>
-      {startContent}
-      {description ? (
-        <div className={slots.wrapper({class: classNames?.wrapper})}>
+      <FragmentWrapper {...fragmentWrapperProps}>
+        {startContent}
+        {description ? (
+          <div className={slots.wrapper({class: classNames?.wrapper})}>
+            <span {...getLabelProps()}>{rendered}</span>
+            <span {...getDescriptionProps()}>{description}</span>
+          </div>
+        ) : (
           <span {...getLabelProps()}>{rendered}</span>
-          <span {...getDescriptionProps()}>{description}</span>
-        </div>
-      ) : (
-        <span {...getLabelProps()}>{rendered}</span>
-      )}
-      {shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
-      {isSelectable && !hideSelectedIcon && (
-        <span {...getSelectedIconProps()}>{selectedContent}</span>
-      )}
-      {endContent}
+        )}
+        {shortcut && <kbd {...getKeyboardShortcutProps()}>{shortcut}</kbd>}
+        {isSelectable && !hideSelectedIcon && (
+          <span {...getSelectedIconProps()}>{selectedContent}</span>
+        )}
+        {endContent}
+      </FragmentWrapper>
     </Component>
   );
-});
+};
 
 MenuItem.displayName = "NextUI.MenuItem";
 
diff --git a/packages/components/menu/src/menu.tsx b/packages/components/menu/src/menu.tsx
index 318b86baa1..95711afc8e 100644
--- a/packages/components/menu/src/menu.tsx
+++ b/packages/components/menu/src/menu.tsx
@@ -1,5 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
-import {ForwardedRef, ReactElement, Ref} from "react";
+import {ForwardedRef, ReactElement} from "react";
+import {mergeClasses} from "@nextui-org/theme";
 
 import {UseMenuProps, useMenu} from "./use-menu";
 import MenuSection from "./menu-section";
@@ -7,7 +8,12 @@ import MenuItem from "./menu-item";
 
 interface Props<T> extends UseMenuProps<T> {}
 
-function Menu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElement>) {
+export type MenuProps<T extends object = object> = Props<T>;
+
+const Menu = forwardRef(function Menu<T extends object>(
+  props: MenuProps<T>,
+  ref: ForwardedRef<HTMLUListElement>,
+) {
   const {
     Component,
     state,
@@ -48,10 +54,12 @@ function Menu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElem
           ...item.props,
         };
 
+        const mergedItemClasses = mergeClasses(itemClasses, itemProps?.classNames);
+
         if (item.type === "section") {
-          return <MenuSection key={item.key} {...itemProps} itemClasses={itemClasses} />;
+          return <MenuSection key={item.key} {...itemProps} itemClasses={mergedItemClasses} />;
         }
-        let menuItem = <MenuItem key={item.key} {...itemProps} classNames={itemClasses} />;
+        let menuItem = <MenuItem key={item.key} {...itemProps} classNames={mergedItemClasses} />;
 
         if (item.wrapper) {
           menuItem = item.wrapper(menuItem);
@@ -69,11 +77,6 @@ function Menu<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLUListElem
       {bottomContent}
     </div>
   );
-}
-
-export type MenuProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Menu) as <T extends object>(props: MenuProps<T>) => ReactElement;
+}) as <T extends object>(props: MenuProps<T>) => ReactElement;
 
-Menu.displayName = "NextUI.Menu";
+export default Menu;
diff --git a/packages/components/menu/src/use-menu-item.ts b/packages/components/menu/src/use-menu-item.ts
index 360b101e27..a150e8def2 100644
--- a/packages/components/menu/src/use-menu-item.ts
+++ b/packages/components/menu/src/use-menu-item.ts
@@ -1,7 +1,8 @@
 import type {MenuItemBaseProps} from "./base/menu-item-base";
+import type {MenuItemVariantProps} from "@nextui-org/theme";
 import type {Node} from "@react-types/shared";
 
-import {useMemo, useRef, useCallback} from "react";
+import {useMemo, useRef, useCallback, Fragment} from "react";
 import {menuItem} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -12,7 +13,8 @@ import {
 import {useFocusRing} from "@react-aria/focus";
 import {TreeState} from "@react-stately/tree";
 import {clsx, dataAttr, objectToDeps, removeEvents} from "@nextui-org/shared-utils";
-import {useAriaMenuItem} from "@nextui-org/use-aria-menu";
+import {useMenuItem as useAriaMenuItem} from "@react-aria/menu";
+import {isFocusVisible as AriaIsFocusVisible, useHover} from "@react-aria/interactions";
 import {mergeProps} from "@react-aria/utils";
 import {useIsMobile} from "@nextui-org/use-is-mobile";
 import {filterDOMProps} from "@nextui-org/react-utils";
@@ -23,7 +25,8 @@ interface Props<T extends object> extends MenuItemBaseProps<T> {
 }
 
 export type UseMenuItemProps<T extends object> = Props<T> &
-  Omit<HTMLNextUIProps<"li">, keyof Props<T>>;
+  Omit<HTMLNextUIProps<"li">, keyof Props<T>> &
+  MenuItemVariantProps;
 
 export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>) {
   const globalContext = useProviderContext();
@@ -44,16 +47,19 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     classNames,
     onAction,
     autoFocus,
-    onClick,
     onPress,
     onPressStart,
     onPressUp,
     onPressEnd,
     onPressChange,
+    onHoverStart: hoverStartProp,
+    onHoverChange,
+    onHoverEnd,
     hideSelectedIcon = false,
     isReadOnly = false,
     closeOnSelect,
     onClose,
+    href,
     ...otherProps
   } = props;
 
@@ -62,12 +68,15 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   const domRef = useRef<HTMLLIElement>(null);
 
-  const Component = as || (otherProps?.href ? "a" : "li");
+  const Component = as || "li";
   const shouldFilterDOMProps = typeof Component === "string";
 
+  const FragmentWrapper = href ? "a" : Fragment;
+  const fragmentWrapperProps = href ? {href} : {};
+
   const {rendered, key} = item;
 
-  const isDisabled = state.disabledKeys.has(key) || originalProps.isDisabled;
+  const isDisabledProp = state.disabledKeys.has(key) || originalProps.isDisabled;
   const isSelectable = state.selectionManager.selectionMode !== "none";
 
   const isMobile = useIsMobile();
@@ -77,10 +86,10 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
   });
 
   const {
-    isHovered,
     isPressed,
     isFocused,
     isSelected,
+    isDisabled,
     menuItemProps,
     labelProps,
     descriptionProps,
@@ -89,9 +98,8 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     {
       key,
       onClose,
-      isDisabled,
+      isDisabled: isDisabledProp,
       onPress,
-      onClick,
       onPressStart,
       onPressUp,
       onPressEnd,
@@ -105,6 +113,21 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     domRef,
   );
 
+  // `useMenuItem` from react-aria doesn't expose `isHovered`
+  // hence, cover the logic here
+  let {hoverProps, isHovered} = useHover({
+    isDisabled,
+    onHoverStart(e) {
+      if (!AriaIsFocusVisible()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+      }
+      hoverStartProp?.(e);
+    },
+    onHoverChange,
+    onHoverEnd,
+  });
+
   let itemProps = menuItemProps;
 
   const slots = useMemo(
@@ -113,8 +136,10 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
         ...variantProps,
         isDisabled,
         disableAnimation,
+        hasTitleTextChild: typeof rendered === "string",
+        hasDescriptionTextChild: typeof description === "string",
       }),
-    [objectToDeps(variantProps), isDisabled, disableAnimation],
+    [objectToDeps(variantProps), isDisabled, disableAnimation, rendered, description],
   );
 
   const baseStyles = clsx(classNames?.base, className);
@@ -131,6 +156,7 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
         enabled: shouldFilterDOMProps,
       }),
       itemProps,
+      hoverProps,
       props,
     ),
     "data-focus": dataAttr(isFocused),
@@ -172,6 +198,7 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
 
   return {
     Component,
+    FragmentWrapper,
     domRef,
     slots,
     classNames,
@@ -185,6 +212,7 @@ export function useMenuItem<T extends object>(originalProps: UseMenuItemProps<T>
     endContent,
     selectedIcon,
     disableAnimation,
+    fragmentWrapperProps,
     getItemProps,
     getLabelProps,
     hideSelectedIcon,
diff --git a/packages/components/menu/src/use-menu.ts b/packages/components/menu/src/use-menu.ts
index 85eda37321..9b6efd8151 100644
--- a/packages/components/menu/src/use-menu.ts
+++ b/packages/components/menu/src/use-menu.ts
@@ -3,7 +3,7 @@ import type {HTMLNextUIProps, PropGetter, SharedSelection} from "@nextui-org/sys
 import {useProviderContext} from "@nextui-org/system";
 import {AriaMenuProps} from "@react-types/menu";
 import {AriaMenuOptions} from "@react-aria/menu";
-import {useAriaMenu} from "@nextui-org/use-aria-menu";
+import {useMenu as useAriaMenu} from "@react-aria/menu";
 import {menu, MenuVariantProps, SlotsToClasses, MenuSlots} from "@nextui-org/theme";
 import {TreeState, useTreeState} from "@react-stately/tree";
 import {ReactRef, filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
diff --git a/packages/components/modal/CHANGELOG.md b/packages/components/modal/CHANGELOG.md
index a3d7fe7a52..a7e18c8d44 100644
--- a/packages/components/modal/CHANGELOG.md
+++ b/packages/components/modal/CHANGELOG.md
@@ -1,5 +1,269 @@
 # @nextui-org/modal
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/use-aria-modal-overlay@2.2.1
+  - @nextui-org/use-disclosure@2.2.1
+  - @nextui-org/use-draggable@2.1.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix typecheck
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4198](https://github.com/nextui-org/nextui/pull/4198) [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix forwardRef render functions not using ref
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-modal-overlay@2.2.0
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/use-disclosure@2.2.0
+  - @nextui-org/use-draggable@2.1.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.8
+  - @nextui-org/use-disclosure@2.1.0-beta.8
+  - @nextui-org/use-draggable@2.0.1-beta.7
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.7
+  - @nextui-org/use-disclosure@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.6
+  - @nextui-org/use-disclosure@2.1.0-beta.6
+  - @nextui-org/use-draggable@2.0.1-beta.6
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.5
+  - @nextui-org/use-disclosure@2.1.0-beta.5
+  - @nextui-org/use-draggable@2.0.1-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.4
+  - @nextui-org/use-disclosure@2.1.0-beta.4
+  - @nextui-org/use-draggable@2.0.1-beta.4
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4057](https://github.com/nextui-org/nextui/pull/4057) [`d947b9283`](https://github.com/nextui-org/nextui/commit/d947b92833c8e4abc16dae72466cdb922313e9c8) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Drawer styles and transition improved
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.3
+  - @nextui-org/use-disclosure@2.1.0-beta.3
+  - @nextui-org/use-draggable@2.0.1-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.2
+  - @nextui-org/use-disclosure@2.1.0-beta.2
+  - @nextui-org/use-draggable@2.0.1-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.1
+  - @nextui-org/use-disclosure@2.1.0-beta.1
+  - @nextui-org/use-draggable@2.0.1-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3983](https://github.com/nextui-org/nextui/pull/3983) [`2d6ae74c3`](https://github.com/nextui-org/nextui/commit/2d6ae74c36a157472bd4b06b8580e7db163eddcc) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Add draggable modal (#2647)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`2d6ae74c3`](https://github.com/nextui-org/nextui/commit/2d6ae74c36a157472bd4b06b8580e7db163eddcc), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/use-aria-modal-overlay@2.1.0-beta.0
+  - @nextui-org/use-disclosure@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/use-draggable@2.0.1-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.41
 
 ### Patch Changes
diff --git a/packages/components/modal/__tests__/modal.test.tsx b/packages/components/modal/__tests__/modal.test.tsx
index 70b5225690..3e73ec156f 100644
--- a/packages/components/modal/__tests__/modal.test.tsx
+++ b/packages/components/modal/__tests__/modal.test.tsx
@@ -1,12 +1,30 @@
+import "@testing-library/jest-dom";
 import * as React from "react";
-import {act, render, fireEvent} from "@testing-library/react";
+import {render, fireEvent} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../src";
+import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter, useDraggable} from "../src";
 
 // e.g. console.error Warning: Function components cannot be given refs.
 // Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
+const ModalDraggable = ({canOverflow = false, isDisabled = false}) => {
+  const targetRef = React.useRef(null);
+
+  const {moveProps} = useDraggable({targetRef, canOverflow, isDisabled});
+
+  return (
+    <Modal ref={targetRef} isOpen>
+      <ModalContent>
+        <ModalHeader {...moveProps}>Modal header</ModalHeader>
+        <ModalBody>Modal body</ModalBody>
+        <ModalFooter>Modal footer</ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
 describe("Modal", () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -25,7 +43,7 @@ describe("Modal", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {
@@ -68,7 +86,7 @@ describe("Modal", () => {
     expect(modal).toHaveAttribute("aria-describedby", modalBody.id);
   });
 
-  test("should fire 'onOpenChange' callback when close button is clicked", () => {
+  test("should fire 'onOpenChange' callback when close button is clicked", async () => {
     const onClose = jest.fn();
 
     const {getByLabelText} = render(
@@ -83,9 +101,9 @@ describe("Modal", () => {
 
     const closeButton = getByLabelText("Close");
 
-    act(() => {
-      closeButton.click();
-    });
+    const user = userEvent.setup();
+
+    await user.click(closeButton);
 
     expect(onClose).toHaveBeenCalled();
   });
@@ -108,4 +126,93 @@ describe("Modal", () => {
     fireEvent.keyDown(modal, {key: "Escape"});
     expect(onClose).toHaveBeenCalledTimes(1);
   });
+
+  it("should be rendered a draggable modal", () => {
+    // mock viewport size to 1920x1080
+    jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+    jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+
+    const wrapper = render(<ModalDraggable />);
+
+    const modal = wrapper.getByRole("dialog");
+    const modalHeader = wrapper.getByText("Modal header");
+
+    fireEvent.touchStart(modalHeader, {changedTouches: [{pageX: 0, pageY: 0}]});
+    fireEvent.touchMove(modalHeader, {changedTouches: [{pageX: 100, pageY: 50}]});
+    fireEvent.touchEnd(modalHeader, {changedTouches: [{pageX: 100, pageY: 50}]});
+
+    expect(() => wrapper.unmount()).not.toThrow();
+    expect(document.documentElement.clientWidth).toBe(1920);
+    expect(document.documentElement.clientHeight).toBe(1080);
+    expect(modalHeader.style.cursor).toBe("move");
+    expect(modal.style.transform).toBe("translate(100px, 50px)");
+  });
+
+  it("should be rendered a draggable modal on mobile", () => {
+    // mock viewport size to 375x667
+    jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 375);
+    jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 667);
+
+    const wrapper = render(<ModalDraggable />);
+
+    const modal = wrapper.getByRole("dialog");
+    const modalHeader = wrapper.getByText("Modal header");
+
+    fireEvent.touchStart(modalHeader, {changedTouches: [{pageX: 0, pageY: 0}]});
+    fireEvent.touchMove(modalHeader, {changedTouches: [{pageX: 0, pageY: 50}]});
+    fireEvent.touchEnd(modalHeader, {changedTouches: [{pageX: 0, pageY: 50}]});
+
+    expect(document.documentElement.clientWidth).toBe(375);
+    expect(document.documentElement.clientHeight).toBe(667);
+    expect(modal.style.transform).toBe("translate(0px, 50px)");
+  });
+
+  it("should not drag overflow viewport", () => {
+    // mock viewport size to 1920x1080
+    jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+    jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+    const wrapper = render(<ModalDraggable />);
+    const modal = wrapper.getByRole("dialog");
+    const modalHeader = wrapper.getByText("Modal header");
+
+    fireEvent.touchStart(modalHeader, {changedTouches: [{pageX: 100, pageY: 50}]});
+    fireEvent.touchMove(modalHeader, {changedTouches: [{pageX: 10000, pageY: 5000}]});
+    fireEvent.touchEnd(modalHeader, {changedTouches: [{pageX: 10000, pageY: 5000}]});
+
+    expect(modal.style.transform).toBe("translate(1920px, 1080px)");
+  });
+
+  it("should not drag when disabled", () => {
+    // mock viewport size to 1920x1080
+    jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+    jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+    const wrapper = render(<ModalDraggable isDisabled />);
+    const modal = wrapper.getByRole("dialog");
+    const modalHeader = wrapper.getByText("Modal header");
+
+    fireEvent.touchStart(modalHeader, {changedTouches: [{pageX: 100, pageY: 50}]});
+    fireEvent.touchMove(modalHeader, {changedTouches: [{pageX: 200, pageY: 100}]});
+    fireEvent.touchEnd(modalHeader, {changedTouches: [{pageX: 200, pageY: 100}]});
+
+    expect(modal.style.transform).toBe("");
+  });
+
+  test("should be rendered a draggable modal with overflow", () => {
+    // mock viewport size to 1920x1080
+    jest.spyOn(document.documentElement, "clientWidth", "get").mockImplementation(() => 1920);
+    jest.spyOn(document.documentElement, "clientHeight", "get").mockImplementation(() => 1080);
+
+    const wrapper = render(<ModalDraggable canOverflow />);
+
+    const modal = wrapper.getByRole("dialog");
+    const modalHeader = wrapper.getByText("Modal header");
+
+    fireEvent.touchStart(modalHeader, {changedTouches: [{pageX: 0, pageY: 0}]});
+    fireEvent.touchMove(modalHeader, {changedTouches: [{pageX: 2000, pageY: 1500}]});
+    fireEvent.touchEnd(modalHeader, {changedTouches: [{pageX: 2000, pageY: 1500}]});
+
+    expect(document.documentElement.clientWidth).toBe(1920);
+    expect(document.documentElement.clientHeight).toBe(1080);
+    expect(modal.style.transform).toBe("translate(2000px, 1500px)");
+  });
 });
diff --git a/packages/components/modal/package.json b/packages/components/modal/package.json
index 45a18dcb0a..5d643b6d37 100644
--- a/packages/components/modal/package.json
+++ b/packages/components/modal/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "2.0.41",
+  "version": "2.2.1",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"
@@ -34,27 +34,29 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/use-disclosure": "workspace:*",
+    "@nextui-org/use-draggable": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-aria-modal-overlay": "workspace:*",
-    "@react-aria/dialog": "3.5.14",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.7",
-    "@react-types/overlays": "3.8.7"
+    "@nextui-org/dom-animation": "workspace:*",
+    "@react-aria/dialog": "3.5.19",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/overlays": "3.6.11",
+    "@react-types/overlays": "3.8.10"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -63,8 +65,9 @@
     "@nextui-org/checkbox": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/link": "workspace:*",
+    "@nextui-org/switch": "workspace:*",
     "react-lorem-component": "0.13.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
diff --git a/packages/components/modal/src/index.ts b/packages/components/modal/src/index.ts
index 229b2c7036..75d6bbdcb8 100644
--- a/packages/components/modal/src/index.ts
+++ b/packages/components/modal/src/index.ts
@@ -15,6 +15,7 @@ export type {UseDisclosureProps} from "@nextui-org/use-disclosure";
 // export hooks
 export {useModal} from "./use-modal";
 export {useDisclosure} from "@nextui-org/use-disclosure";
+export {useDraggable} from "@nextui-org/use-draggable";
 
 // export context
 export {ModalProvider, useModalContext} from "./modal-context";
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index f9be88207a..42239327fd 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -2,11 +2,10 @@ import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
 import {cloneElement, isValidElement, ReactNode, useMemo, useCallback} from "react";
-import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
-import {domAnimation, LazyMotion, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
 import {chain, mergeProps, useViewportSize} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
@@ -21,7 +20,9 @@ export interface ModalContentProps extends AriaDialogProps, HTMLNextUIProps<"div
   children: ReactNode | ((onClose: () => void) => ReactNode);
 }
 
-const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _) => {
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
+const ModalContent = (props: ModalContentProps) => {
   const {as, children, role = "dialog", ...otherProps} = props;
 
   const {
@@ -137,7 +138,7 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
       {contents}
     </div>
   );
-});
+};
 
 ModalContent.displayName = "NextUI.ModalContent";
 
diff --git a/packages/components/modal/src/modal-header.tsx b/packages/components/modal/src/modal-header.tsx
index 4e6a96da53..1bff157918 100644
--- a/packages/components/modal/src/modal-header.tsx
+++ b/packages/components/modal/src/modal-header.tsx
@@ -1,11 +1,16 @@
 import {useEffect} from "react";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
-import {useDOMRef} from "@nextui-org/react-utils";
+import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {clsx} from "@nextui-org/shared-utils";
 
 import {useModalContext} from "./modal-context";
 
-export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {}
+export interface ModalHeaderProps extends HTMLNextUIProps<"header"> {
+  /**
+   * Ref to the DOM node.
+   */
+  ref?: ReactRef<HTMLElement | null>;
+}
 
 const ModalHeader = forwardRef<"header", ModalHeaderProps>((props, ref) => {
   const {as, children, className, ...otherProps} = props;
diff --git a/packages/components/modal/src/modal-transition.ts b/packages/components/modal/src/modal-transition.ts
index a2aacc72f4..5b02da78c1 100644
--- a/packages/components/modal/src/modal-transition.ts
+++ b/packages/components/modal/src/modal-transition.ts
@@ -5,6 +5,7 @@ export const scaleInOut = {
     scale: "var(--scale-enter)",
     y: "var(--slide-enter)",
     opacity: 1,
+    willChange: "auto",
     transition: {
       scale: {
         duration: 0.4,
@@ -25,6 +26,7 @@ export const scaleInOut = {
     scale: "var(--scale-exit)",
     y: "var(--slide-exit)",
     opacity: 0,
+    willChange: "transform",
     transition: {
       duration: 0.3,
       ease: TRANSITION_EASINGS.ease,
diff --git a/packages/components/modal/src/use-modal.ts b/packages/components/modal/src/use-modal.ts
index 66b6f7be63..9e041ce54d 100644
--- a/packages/components/modal/src/use-modal.ts
+++ b/packages/components/modal/src/use-modal.ts
@@ -88,7 +88,6 @@ export function useModal(originalProps: UseModalProps) {
     as,
     className,
     classNames,
-
     isOpen,
     defaultOpen,
     onOpenChange,
@@ -162,6 +161,7 @@ export function useModal(originalProps: UseModalProps) {
     "data-open": dataAttr(state.isOpen),
     "data-dismissable": dataAttr(isDismissable),
     "aria-modal": dataAttr(true),
+    "data-placement": originalProps?.placement ?? "right",
     "aria-labelledby": headerMounted ? headerId : undefined,
     "aria-describedby": bodyMounted ? bodyId : undefined,
   });
diff --git a/packages/components/modal/stories/modal.stories.tsx b/packages/components/modal/stories/modal.stories.tsx
index 92a3e6fb72..5d6424d61e 100644
--- a/packages/components/modal/stories/modal.stories.tsx
+++ b/packages/components/modal/stories/modal.stories.tsx
@@ -6,6 +6,7 @@ import {Button} from "@nextui-org/button";
 import {Input} from "@nextui-org/input";
 import {Checkbox} from "@nextui-org/checkbox";
 import {Link} from "@nextui-org/link";
+import {Switch} from "@nextui-org/switch";
 import {MailFilledIcon, LockFilledIcon} from "@nextui-org/shared-icons";
 import Lorem from "react-lorem-component";
 
@@ -17,6 +18,7 @@ import {
   ModalFooter,
   ModalProps,
   useDisclosure,
+  useDraggable,
 } from "../src";
 
 export default {
@@ -202,6 +204,60 @@ const OpenChangeTemplate = (args: ModalProps) => {
     </div>
   );
 };
+const DraggableTemplate = (args: ModalProps) => {
+  const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
+  const targetRef = React.useRef(null);
+
+  const {moveProps} = useDraggable({targetRef});
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Modal {...args} ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          <ModalHeader {...moveProps}>Modal Title</ModalHeader>
+          <ModalBody>
+            <Lorem count={1} />
+          </ModalBody>
+          <ModalFooter>
+            <Button onPress={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};
+const DraggableOverflowTemplate = (args: ModalProps) => {
+  const {isOpen, onOpen, onClose, onOpenChange} = useDisclosure();
+  const targetRef = React.useRef(null);
+  const [disableDraggable, setDisableDraggable] = React.useState(false);
+  const [canOverflow, setCanOverflow] = React.useState(true);
+
+  const {moveProps} = useDraggable({targetRef, isDisabled: disableDraggable, canOverflow});
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Button onPress={onOpen}>Open Modal</Button>
+      <Switch isSelected={disableDraggable} onValueChange={setDisableDraggable}>
+        Disable Draggable
+      </Switch>
+      <Switch isSelected={canOverflow} onValueChange={setCanOverflow}>
+        Overflow viewport
+      </Switch>
+      <Modal {...args} ref={targetRef} isOpen={isOpen} onOpenChange={onOpenChange}>
+        <ModalContent>
+          <ModalHeader {...moveProps}>Modal Title</ModalHeader>
+          <ModalBody>
+            <Lorem count={1} />
+          </ModalBody>
+          <ModalFooter>
+            <Button onPress={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  );
+};
 
 export const Default = {
   render: Template,
@@ -276,3 +332,19 @@ export const CustomMotion = {
     },
   },
 };
+
+export const Draggable = {
+  render: DraggableTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const DraggableOverflow = {
+  render: DraggableOverflowTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/navbar/CHANGELOG.md b/packages/components/navbar/CHANGELOG.md
index fe200ce533..80d025df79 100644
--- a/packages/components/navbar/CHANGELOG.md
+++ b/packages/components/navbar/CHANGELOG.md
@@ -1,5 +1,212 @@
 # @nextui-org/navbar
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-aria-toggle-button@2.2.1
+  - @nextui-org/use-scroll-position@2.1.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-toggle-button@2.2.0
+  - @nextui-org/use-scroll-position@2.1.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies []:
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.8
+  - @nextui-org/use-scroll-position@2.0.10-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.6
+  - @nextui-org/use-scroll-position@2.0.10-beta.4
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.5
+  - @nextui-org/use-scroll-position@2.0.10-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.4
+  - @nextui-org/use-scroll-position@2.0.10-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.3
+  - @nextui-org/use-scroll-position@2.0.10-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.2
+  - @nextui-org/use-scroll-position@2.0.10-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-toggle-button@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.37
 
 ### Patch Changes
diff --git a/packages/components/navbar/__tests__/navbar.test.tsx b/packages/components/navbar/__tests__/navbar.test.tsx
index 0b0170eb45..d2d9c4355c 100644
--- a/packages/components/navbar/__tests__/navbar.test.tsx
+++ b/packages/components/navbar/__tests__/navbar.test.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-import {act, render} from "@testing-library/react";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {
   Navbar,
@@ -18,6 +19,12 @@ window.scrollTo = jest.fn();
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
 describe("Navbar", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -62,7 +69,7 @@ describe("Navbar", () => {
     expect(navbarContent.children.length).toBe(5);
   });
 
-  it("should not throw error after toggle click", () => {
+  it("should not throw error after toggle click", async () => {
     const items = ["item1", "item2", "item3", "item4", "item5"];
 
     const wrapper = render(
@@ -85,14 +92,12 @@ describe("Navbar", () => {
 
     const toggle = wrapper.getByTestId("navbar-toggle-test");
 
-    act(() => {
-      toggle.click();
-    });
+    await user.click(toggle);
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
-  it("should render correctly with menu", () => {
+  it("should render correctly with menu", async () => {
     const items = ["item1", "item2", "item3", "item4", "item5"];
 
     const wrapper = render(
@@ -115,16 +120,13 @@ describe("Navbar", () => {
 
     const toggle = wrapper.getByTestId("navbar-toggle-test");
 
-    act(() => {
-      toggle.click();
-    });
-
+    await user.click(toggle);
     const menu = wrapper.getByTestId("navbar-menu-test");
 
     expect(menu.children.length).toBe(items.length);
   });
 
-  it("should call on onChange when toggle is clicked", () => {
+  it("should call on onChange when toggle is clicked", async () => {
     const onChange = jest.fn();
 
     const wrapper = render(
@@ -142,9 +144,7 @@ describe("Navbar", () => {
 
     const toggle = wrapper.getByTestId("navbar-toggle-test");
 
-    act(() => {
-      toggle.click();
-    });
+    await user.click(toggle);
 
     expect(onChange).toHaveBeenCalled();
   });
diff --git a/packages/components/navbar/package.json b/packages/components/navbar/package.json
index 73c5074fa6..223564a1e2 100644
--- a/packages/components/navbar/package.json
+++ b/packages/components/navbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "2.0.37",
+  "version": "2.2.1",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
@@ -46,13 +46,13 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/toggle": "3.7.4",
-    "@react-stately/utils": "3.10.1",
-    "react-remove-scroll": "^2.5.6"
+    "@nextui-org/dom-animation": "workspace:*",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/toggle": "3.7.8",
+    "@react-stately/utils": "3.10.4"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -63,6 +63,7 @@
     "@nextui-org/input": "workspace:*",
     "@nextui-org/link": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "framer-motion": "11.9.0",
     "react-lorem-component": "0.13.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
diff --git a/packages/components/navbar/src/navbar-menu.tsx b/packages/components/navbar/src/navbar-menu.tsx
index 26b6cb27e7..48ca567cb8 100644
--- a/packages/components/navbar/src/navbar-menu.tsx
+++ b/packages/components/navbar/src/navbar-menu.tsx
@@ -1,10 +1,8 @@
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
-import {AnimatePresence, domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
-import {ReactElement, useCallback} from "react";
-import {RemoveScroll} from "react-remove-scroll";
 import {Overlay} from "@react-aria/overlays";
 
 import {menuVariants} from "./navbar-menu-transitions";
@@ -23,6 +21,8 @@ export interface NavbarMenuProps extends HTMLNextUIProps<"ul"> {
   motionProps?: HTMLMotionProps<"ul">;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
   const {className, children, portalContainer, motionProps, style, ...otherProps} = props;
   const domRef = useDOMRef(ref);
@@ -31,56 +31,41 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => {
 
   const styles = clsx(classNames?.menu, className);
 
-  const MenuWrapper = useCallback(
-    ({children}: {children: ReactElement}) => {
-      return (
-        <RemoveScroll forwardProps enabled={isMenuOpen} removeScrollBar={false}>
-          {children}
-        </RemoveScroll>
-      );
-    },
-    [isMenuOpen],
-  );
-
   const contents = disableAnimation ? (
-    <MenuWrapper>
-      <ul
-        ref={domRef}
-        className={slots.menu?.({class: styles})}
-        data-open={dataAttr(isMenuOpen)}
-        style={{
-          // @ts-expect-error
-          "--navbar-height": typeof height === "number" ? `${height}px` : height,
-        }}
-        {...otherProps}
-      >
-        {children}
-      </ul>
-    </MenuWrapper>
+    <ul
+      ref={domRef}
+      className={slots.menu?.({class: styles})}
+      data-open={dataAttr(isMenuOpen)}
+      style={{
+        // @ts-expect-error
+        "--navbar-height": typeof height === "number" ? `${height}px` : height,
+      }}
+      {...otherProps}
+    >
+      {children}
+    </ul>
   ) : (
     <AnimatePresence mode="wait">
       {isMenuOpen ? (
         <LazyMotion features={domAnimation}>
-          <MenuWrapper>
-            <m.ul
-              ref={domRef}
-              layoutScroll
-              animate="enter"
-              className={slots.menu?.({class: styles})}
-              data-open={dataAttr(isMenuOpen)}
-              exit="exit"
-              initial="exit"
-              style={{
-                // @ts-expect-error
-                "--navbar-height": typeof height === "number" ? `${height}px` : height,
-                ...style,
-              }}
-              variants={menuVariants}
-              {...mergeProps(motionProps, otherProps)}
-            >
-              {children}
-            </m.ul>
-          </MenuWrapper>
+          <m.ul
+            ref={domRef}
+            layoutScroll
+            animate="enter"
+            className={slots.menu?.({class: styles})}
+            data-open={dataAttr(isMenuOpen)}
+            exit="exit"
+            initial="exit"
+            style={{
+              // @ts-expect-error
+              "--navbar-height": typeof height === "number" ? `${height}px` : height,
+              ...style,
+            }}
+            variants={menuVariants}
+            {...mergeProps(motionProps, otherProps)}
+          >
+            {children}
+          </m.ul>
         </LazyMotion>
       ) : null}
     </AnimatePresence>
diff --git a/packages/components/navbar/src/navbar.tsx b/packages/components/navbar/src/navbar.tsx
index 6fe07b9a1c..be7fdb3593 100644
--- a/packages/components/navbar/src/navbar.tsx
+++ b/packages/components/navbar/src/navbar.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
-import {LazyMotion, domAnimation, m} from "framer-motion";
+import {LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 
 import {hideOnScrollVariants} from "./navbar-transitions";
@@ -12,6 +12,8 @@ export interface NavbarProps extends Omit<UseNavbarProps, "hideOnScroll"> {
   children?: React.ReactNode | React.ReactNode[];
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Navbar = forwardRef<"div", NavbarProps>((props, ref) => {
   const {children, ...otherProps} = props;
 
diff --git a/packages/components/navbar/src/use-navbar.ts b/packages/components/navbar/src/use-navbar.ts
index 7f3334b054..3e245c15a4 100644
--- a/packages/components/navbar/src/use-navbar.ts
+++ b/packages/components/navbar/src/use-navbar.ts
@@ -15,6 +15,7 @@ import {mergeProps, useResizeObserver} from "@react-aria/utils";
 import {useScrollPosition} from "@nextui-org/use-scroll-position";
 import {useControlledState} from "@react-stately/utils";
 import {HTMLMotionProps} from "framer-motion";
+import {usePreventScroll} from "@react-aria/overlays";
 
 interface Props extends HTMLNextUIProps<"nav"> {
   /**
@@ -47,6 +48,11 @@ interface Props extends HTMLNextUIProps<"nav"> {
    * @default false
    */
   shouldHideOnScroll?: boolean;
+  /**
+   * Whether the navbar should block scroll when the menu is open or not.
+   * @default false
+   */
+  shouldBlockScroll?: boolean;
   /**
    * Whether the navbar parent scroll event should be listened to or not.
    * @default false
@@ -102,6 +108,7 @@ export function useNavbar(originalProps: UseNavbarProps) {
     height = "4rem",
     shouldHideOnScroll = false,
     disableScrollHandler = false,
+    shouldBlockScroll = true,
     onScrollPositionChange,
     isMenuOpen: isMenuOpenProp,
     isMenuDefaultOpen,
@@ -146,6 +153,10 @@ export function useNavbar(originalProps: UseNavbarProps) {
     }
   };
 
+  usePreventScroll({
+    isDisabled: !(shouldBlockScroll && isMenuOpen),
+  });
+
   useResizeObserver({
     ref: domRef,
     onResize: () => {
diff --git a/packages/components/pagination/CHANGELOG.md b/packages/components/pagination/CHANGELOG.md
index 02bfc50200..604fd3aa70 100644
--- a/packages/components/pagination/CHANGELOG.md
+++ b/packages/components/pagination/CHANGELOG.md
@@ -1,5 +1,192 @@
 # @nextui-org/pagination
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-intersection-observer@2.2.1
+  - @nextui-org/use-pagination@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4222](https://github.com/nextui-org/nextui/pull/4222) [`adbd85e`](https://github.com/nextui-org/nextui/commit/adbd85ee95b67ee779401307c49596dd45e062fc) Thanks [@Peterl561](https://github.com/Peterl561)! - fix pagination cursor position on first load
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-intersection-observer@2.2.0
+  - @nextui-org/use-pagination@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#4168](https://github.com/nextui-org/nextui/pull/4168) [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9) Thanks [@macci001](https://github.com/macci001)! - Fixes missing `<li>` wrapper when `href` prop is passed in `ListboxItem`, `MenuItem`, and `PaginationItem` (#4147)
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-pagination@2.1.0-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-pagination@2.1.0-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-pagination@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-pagination@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-pagination@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/use-pagination@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-pagination@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-pagination@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-pagination@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-pagination@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.36
 
 ### Patch Changes
diff --git a/packages/components/pagination/__tests__/pagination.test.tsx b/packages/components/pagination/__tests__/pagination.test.tsx
index 0a0ff16376..5de6f4578b 100644
--- a/packages/components/pagination/__tests__/pagination.test.tsx
+++ b/packages/components/pagination/__tests__/pagination.test.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import {Pagination} from "../src";
+import {Pagination, PaginationItem} from "../src";
 
 describe("Pagination", () => {
   it("should render correctly", () => {
@@ -37,6 +37,25 @@ describe("Pagination", () => {
     expect(prevButton).toBeNull();
   });
 
+  it("should not have anchor tag when href prop is not passed", () => {
+    render(<PaginationItem />);
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeFalsy();
+  });
+
+  it("should have anchor tag when href prop is passed", () => {
+    const href = "http://www.nextui.org/";
+
+    render(<PaginationItem href={href} />);
+
+    let anchorTag = document.getElementsByTagName("a")[0];
+
+    expect(anchorTag).toBeTruthy();
+
+    expect(anchorTag).toHaveProperty("href", href);
+  });
+
   it("should show dots when total is greater than 10", () => {
     const wrapper = render(<Pagination total={10} />);
 
@@ -60,4 +79,78 @@ describe("Pagination", () => {
 
     expect(cursor).toHaveAttribute("aria-hidden", "true");
   });
+
+  it("the pagination cursor should not have data-moving attribute before intersection", () => {
+    const originalIntersectionObserver = window.IntersectionObserver;
+
+    // save callback and options to later emulate intersection event
+    let intersectCallback: IntersectionObserverCallback | undefined;
+    let intersectOptions: IntersectionObserverInit | undefined;
+
+    // defined here as we need the closure
+    class MockIntersectionObserver implements IntersectionObserver {
+      root: Element | null = null;
+      rootMargin: string = "";
+      thresholds: number[] = [];
+      disconnect: () => void = () => {};
+      observe: (target: Element) => void = () => {};
+      unobserve: (target: Element) => void = () => {};
+      takeRecords: () => IntersectionObserverEntry[] = () => [];
+
+      constructor(
+        private readonly callback: IntersectionObserverCallback,
+        private readonly options?: IntersectionObserverInit,
+      ) {
+        this.root = (this.options?.root ?? null) as Element | null;
+        this.rootMargin = this.options?.rootMargin ?? "";
+        this.thresholds = Array.isArray(this.options?.threshold)
+          ? this.options.threshold
+          : this.options?.threshold != null
+          ? [this.options.threshold]
+          : [0];
+        this.disconnect = jest.fn();
+        this.observe = jest.fn();
+        this.unobserve = jest.fn();
+        this.takeRecords = jest.fn();
+
+        // save to closure
+        intersectCallback = this.callback;
+        intersectOptions = this.options;
+      }
+    }
+
+    // hijack the IntersectionObserver implementation so useIntersectionObserver returns our mock
+    window.IntersectionObserver = MockIntersectionObserver;
+
+    const {container, rerender} = render(<Pagination total={10} />);
+
+    const cursor = container.querySelector("span[data-slot='cursor']");
+
+    // on first render, the cursor should not have the data-moving attribute until the observer is triggered
+    expect(cursor).not.toHaveAttribute("data-moving");
+
+    // trigger the observer with a full intersection
+    intersectCallback?.(
+      [
+        {
+          isIntersecting: true,
+          intersectionRatio: 1,
+          target: container,
+          boundingClientRect: {} as DOMRectReadOnly,
+          intersectionRect: {} as DOMRectReadOnly,
+          rootBounds: {} as DOMRectReadOnly,
+          time: 0,
+        },
+      ],
+      new MockIntersectionObserver(intersectCallback, intersectOptions),
+    );
+
+    // rerender the component to update cursor state after intersection
+    rerender(<Pagination total={10} />);
+
+    // on rerender, the cursor should have the data-moving attribute
+    expect(cursor).toHaveAttribute("data-moving");
+
+    window.IntersectionObserver = originalIntersectionObserver;
+  });
 });
diff --git a/packages/components/pagination/package.json b/packages/components/pagination/package.json
index f02873e2fd..e2f929d074 100644
--- a/packages/components/pagination/package.json
+++ b/packages/components/pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "2.0.36",
+  "version": "2.2.1",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"
@@ -34,20 +34,21 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
+    "@nextui-org/use-intersection-observer": "workspace:*",
     "@nextui-org/use-pagination": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
     "scroll-into-view-if-needed": "3.0.10"
   },
   "devDependencies": {
diff --git a/packages/components/pagination/src/pagination-item.tsx b/packages/components/pagination/src/pagination-item.tsx
index 988e554b23..03ef05c91c 100644
--- a/packages/components/pagination/src/pagination-item.tsx
+++ b/packages/components/pagination/src/pagination-item.tsx
@@ -5,9 +5,14 @@ import {usePaginationItem, UsePaginationItemProps} from "./use-pagination-item";
 export interface PaginationItemProps extends UsePaginationItemProps {}
 
 const PaginationItem = forwardRef<"li", PaginationItemProps>((props, ref) => {
-  const {Component, children, getItemProps} = usePaginationItem({...props, ref});
+  const {Component, FragmentWrapper, fragmentWrapperProps, children, getItemProps} =
+    usePaginationItem({...props, ref});
 
-  return <Component {...getItemProps()}>{children}</Component>;
+  return (
+    <Component {...getItemProps()}>
+      <FragmentWrapper {...fragmentWrapperProps}>{children}</FragmentWrapper>
+    </Component>
+  );
 });
 
 PaginationItem.displayName = "NextUI.PaginationItem";
diff --git a/packages/components/pagination/src/use-pagination-item.ts b/packages/components/pagination/src/use-pagination-item.ts
index 1bef299b98..e507d3aaaf 100644
--- a/packages/components/pagination/src/use-pagination-item.ts
+++ b/packages/components/pagination/src/use-pagination-item.ts
@@ -2,7 +2,7 @@ import type {Ref} from "react";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 import type {LinkDOMProps, PressEvent} from "@react-types/shared";
 
-import {useMemo} from "react";
+import {Fragment, useMemo} from "react";
 import {PaginationItemValue} from "@nextui-org/use-pagination";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {chain, mergeProps, shouldClientNavigate, useRouter} from "@react-aria/utils";
@@ -64,10 +64,13 @@ export function usePaginationItem(props: UsePaginationItemProps) {
   } = props;
 
   const isLink = !!props?.href;
-  const Component = as || isLink ? "a" : "li";
+  const Component = as || "li";
   const shouldFilterDOMProps = typeof Component === "string";
-  const domRef = useDOMRef(ref);
 
+  const FragmentWrapper = isLink ? "a" : Fragment;
+  const fragmentWrapperProps = isLink ? {href: props.href} : {};
+
+  const domRef = useDOMRef(ref);
   const router = useRouter();
 
   const ariaLabel = useMemo(
@@ -129,6 +132,8 @@ export function usePaginationItem(props: UsePaginationItemProps) {
 
   return {
     Component,
+    FragmentWrapper,
+    fragmentWrapperProps,
     children,
     ariaLabel,
     isFocused,
diff --git a/packages/components/pagination/src/use-pagination.ts b/packages/components/pagination/src/use-pagination.ts
index 1747077045..97808fae92 100644
--- a/packages/components/pagination/src/use-pagination.ts
+++ b/packages/components/pagination/src/use-pagination.ts
@@ -17,6 +17,7 @@ import {pagination} from "@nextui-org/theme";
 import {useDOMRef} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {PressEvent} from "@react-types/shared";
+import {useIntersectionObserver} from "@nextui-org/use-intersection-observer";
 
 export type PaginationItemRenderProps = {
   /**
@@ -278,10 +279,21 @@ export function usePagination(originalProps: UsePaginationProps) {
     onChange,
   });
 
+  // check if the pagination component is visible
+  const [setRef, isVisible] = useIntersectionObserver();
+
+  useEffect(() => {
+    if (domRef.current) {
+      setRef(domRef.current);
+    }
+  }, [domRef.current]);
+
   const activePageRef = useRef(activePage);
 
   useEffect(() => {
-    if (activePage && !disableAnimation) {
+    // when the pagination component is invisible, scroll offset will be wrong
+    // thus, only scroll to the active page if the pagination component is visible
+    if (activePage && !disableAnimation && isVisible) {
       scrollTo(activePage, activePage === activePageRef.current);
     }
     activePageRef.current = activePage;
@@ -289,6 +301,7 @@ export function usePagination(originalProps: UsePaginationProps) {
     activePage,
     disableAnimation,
     disableCursorAnimation,
+    isVisible,
     originalProps.dotsJump,
     originalProps.isCompact,
     originalProps.showControls,
diff --git a/packages/components/popover/CHANGELOG.md b/packages/components/popover/CHANGELOG.md
index 538fa5372b..47ddff8831 100644
--- a/packages/components/popover/CHANGELOG.md
+++ b/packages/components/popover/CHANGELOG.md
@@ -1,5 +1,250 @@
 # @nextui-org/popover
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix typecheck
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4198](https://github.com/nextui-org/nextui/pull/4198) [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix forwardRef render functions not using ref
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/aria-utils@2.1.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.2.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.8
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4003](https://github.com/nextui-org/nextui/pull/4003) [`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix: element.ref was removed in React 19
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3595](https://github.com/nextui-org/nextui/pull/3595) [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a) Thanks [@awesome-pro](https://github.com/awesome-pro)! - added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.29
 
 ### Patch Changes
diff --git a/packages/components/popover/__tests__/popover.test.tsx b/packages/components/popover/__tests__/popover.test.tsx
index a73021d666..affe4d0dbf 100644
--- a/packages/components/popover/__tests__/popover.test.tsx
+++ b/packages/components/popover/__tests__/popover.test.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {render, fireEvent, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {Button} from "@nextui-org/button";
 
 import {Popover, PopoverContent, PopoverTrigger} from "../src";
@@ -11,6 +11,12 @@ import {Select, SelectItem} from "../../select/src";
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
 describe("Popover", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -30,7 +36,7 @@ describe("Popover", () => {
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
-  it("should not throw error when clicking trigger button", () => {
+  it("should not throw error when clicking trigger button", async () => {
     const wrapper = render(
       <Popover>
         <PopoverTrigger>
@@ -44,11 +50,9 @@ describe("Popover", () => {
     const trigger = wrapper.getByTestId("trigger-test");
 
     // open popover
-    act(() => {
-      trigger.click();
-    });
+    await user.click(trigger);
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {
@@ -130,7 +134,7 @@ describe("Popover", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it("should work with NextUI button", () => {
+  it("should work with NextUI button", async () => {
     const onClose = jest.fn();
 
     const wrapper = render(
@@ -149,15 +153,11 @@ describe("Popover", () => {
     const trigger = wrapper.getByTestId("trigger-test");
 
     // open popover
-    act(() => {
-      trigger.click();
-    });
+    await user.click(trigger);
     expect(onClose).toHaveBeenCalledTimes(0);
 
     // close popover
-    act(() => {
-      trigger.click();
-    });
+    await user.click(trigger);
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });
@@ -193,9 +193,7 @@ describe("Popover", () => {
     expect(popover2).not.toBeNull();
 
     // open the popover by clicking popover in the first popover
-    await act(async () => {
-      await userEvent.click(popover);
-    });
+    await user.click(popover);
 
     // assert that the first popover is open
     expect(popover).toHaveAttribute("aria-expanded", "true");
@@ -204,9 +202,7 @@ describe("Popover", () => {
     expect(popover2).toHaveAttribute("aria-expanded", "false");
 
     // close the popover by clicking the second popover
-    await act(async () => {
-      await userEvent.click(popover2);
-    });
+    await user.click(popover2);
 
     // assert that the first popover is closed
     expect(popover).toHaveAttribute("aria-expanded", "false");
@@ -232,9 +228,7 @@ describe("Popover", () => {
     const trigger = wrapper.getByTestId("trigger-test");
 
     // open popover
-    await act(async () => {
-      await userEvent.click(trigger);
-    });
+    await user.click(trigger);
 
     const {getByRole} = wrapper;
 
@@ -260,9 +254,9 @@ describe("Popover", () => {
 
     await act(async () => {
       // open popover
-      await userEvent.click(trigger);
+      await user.click(trigger);
       // close popover
-      await userEvent.click(trigger);
+      await user.click(trigger);
       // assert that the focus is restored back to trigger
       expect(trigger).toHaveFocus();
     });
@@ -286,27 +280,21 @@ describe("Popover", () => {
 
     const popover = wrapper.getByTestId("popover");
 
-    await act(async () => {
-      // open popover
-      await userEvent.click(popover);
-    });
+    // open popover
+    await user.click(popover);
 
     // assert that the popover is open
     expect(popover).toHaveAttribute("aria-expanded", "true");
 
     const select = wrapper.getByTestId("select");
 
-    await act(async () => {
-      // open select
-      await userEvent.click(select);
-    });
+    // open select
+    await user.click(select);
 
     // assert that the select is open
     expect(select).toHaveAttribute("aria-expanded", "true");
 
-    await act(async () => {
-      await userEvent.click(document.body);
-    });
+    await user.click(document.body);
 
     // assert that the select is closed
     expect(select).toHaveAttribute("aria-expanded", "false");
@@ -334,9 +322,7 @@ describe("Popover", () => {
     const popover = wrapper.getByTestId("popover");
 
     // open popover
-    await act(async () => {
-      await userEvent.click(popover);
-    });
+    await user.click(popover);
 
     // assert that the popover is open
     expect(popover).toHaveAttribute("aria-expanded", "true");
@@ -348,3 +334,36 @@ describe("Popover", () => {
     expect(popover).toHaveAttribute("aria-expanded", "false");
   });
 });
+
+it("should close popover on scroll when shouldCloseOnScroll is false", async () => {
+  const wrapper = render(
+    <Popover shouldCloseOnScroll={false}>
+      <PopoverTrigger>
+        <Button data-testid="popover">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <Select data-testid="select" label="Select country">
+          <SelectItem key="argentina">Argentina</SelectItem>
+          <SelectItem key="venezuela">Venezuela</SelectItem>
+          <SelectItem key="brazil">Brazil</SelectItem>
+        </Select>
+      </PopoverContent>
+    </Popover>,
+  );
+
+  const popover = wrapper.getByTestId("popover");
+
+  // open popover
+  await act(async () => {
+    await userEvent.click(popover);
+  });
+
+  // assert that the popover is open
+  expect(popover).toHaveAttribute("aria-expanded", "true");
+
+  // scroll it
+  fireEvent.scroll(document.body);
+
+  // assert that the popover is still open
+  expect(popover).toHaveAttribute("aria-expanded", "true");
+});
diff --git a/packages/components/popover/package.json b/packages/components/popover/package.json
index df41f38a46..38ce292c07 100644
--- a/packages/components/popover/package.json
+++ b/packages/components/popover/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.1.29",
+  "version": "2.3.1",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "framer-motion": ">=10.17.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",
@@ -48,15 +48,15 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/dialog": "3.5.14",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.7",
-    "@react-types/button": "3.9.4",
-    "@react-types/overlays": "3.8.7",
-    "react-remove-scroll": "^2.5.6"
+    "@nextui-org/dom-animation": "workspace:*",
+    "@react-aria/dialog": "3.5.19",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/overlays": "3.6.11",
+    "@react-types/button": "3.10.0",
+    "@react-types/overlays": "3.8.10"
   },
   "devDependencies": {
     "@nextui-org/card": "workspace:*",
@@ -64,9 +64,9 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/popover/src/free-solo-popover.tsx b/packages/components/popover/src/free-solo-popover.tsx
index 149e9b53b6..5e3c462695 100644
--- a/packages/components/popover/src/free-solo-popover.tsx
+++ b/packages/components/popover/src/free-solo-popover.tsx
@@ -10,7 +10,7 @@
 import * as React from "react";
 import {DismissButton, Overlay} from "@react-aria/overlays";
 import {forwardRef} from "@nextui-org/system";
-import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
+import {HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -18,6 +18,8 @@ import {useDialog} from "@react-aria/dialog";
 
 import {usePopover, UsePopoverProps, UsePopoverReturn} from "./use-popover";
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 export interface FreeSoloPopoverProps extends Omit<UsePopoverProps, "children"> {
   children: React.ReactNode | ((titleProps: React.DOMAttributes<HTMLElement>) => React.ReactNode);
   transformOrigin?: {
diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index ff4c4c0bc3..9ceb6a343a 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -2,11 +2,9 @@ import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
 import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
-import {forwardRef} from "@nextui-org/system";
-import {RemoveScroll} from "react-remove-scroll";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
-import {m, domAnimation, LazyMotion} from "framer-motion";
+import {m, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {useDialog} from "@react-aria/dialog";
@@ -19,17 +17,17 @@ export interface PopoverContentProps
   children: ReactNode | ((titleProps: DOMAttributes<HTMLElement>) => ReactNode);
 }
 
-const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
+const PopoverContent = (props: PopoverContentProps) => {
   const {as, children, className, ...otherProps} = props;
 
   const {
     Component: OverlayComponent,
-    isOpen,
     placement,
     backdrop,
     motionProps,
     disableAnimation,
-    shouldBlockScroll,
     getPopoverProps,
     getDialogProps,
     getBackdropProps,
@@ -83,7 +81,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
   }, [backdrop, disableAnimation, getBackdropProps]);
 
   const contents = (
-    <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+    <>
       {disableAnimation ? (
         content
       ) : (
@@ -102,7 +100,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
           </m.div>
         </LazyMotion>
       )}
-    </RemoveScroll>
+    </>
   );
 
   return (
@@ -111,7 +109,7 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
       {contents}
     </div>
   );
-});
+};
 
 PopoverContent.displayName = "NextUI.PopoverContent";
 
diff --git a/packages/components/popover/src/popover-trigger.tsx b/packages/components/popover/src/popover-trigger.tsx
index 0d92093f61..2a19f0ebf3 100644
--- a/packages/components/popover/src/popover-trigger.tsx
+++ b/packages/components/popover/src/popover-trigger.tsx
@@ -1,5 +1,4 @@
 import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {Button} from "@nextui-org/button";
@@ -9,13 +8,15 @@ import {usePopoverContext} from "./popover-context";
 
 export interface PopoverTriggerProps {
   children?: React.ReactNode;
+  className?: string;
+  [key: string]: any;
 }
 
 /**
  * PopoverTrigger opens the popover's content. It must be an interactive element
  * such as `button` or `a`.
  */
-const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
+const PopoverTrigger = (props: PopoverTriggerProps) => {
   const {triggerRef, getTriggerProps} = usePopoverContext();
 
   const {children, ...otherProps} = props;
@@ -29,9 +30,13 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     };
   }, [children]);
 
+  // Accessing the ref from props, else fallback to element.ref
+  // https://github.com/facebook/react/pull/28348
+  const childRef = child.props.ref ?? (child as any).ref;
+
   const {onPress, isDisabled, ...restProps} = useMemo(() => {
-    return getTriggerProps(mergeProps(otherProps, child.props), child.ref);
-  }, [getTriggerProps, child.props, otherProps, child.ref]);
+    return getTriggerProps(mergeProps(otherProps, child.props), childRef);
+  }, [getTriggerProps, child.props, otherProps, childRef]);
 
   // validates if contains a NextUI Button as a child
   const [, triggerChildren] = pickChildren(children, Button);
@@ -46,7 +51,7 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     child,
     mergeProps(restProps, hasNextUIButton ? {onPress, isDisabled} : buttonProps),
   );
-});
+};
 
 PopoverTrigger.displayName = "NextUI.PopoverTrigger";
 
diff --git a/packages/components/popover/src/use-aria-popover.ts b/packages/components/popover/src/use-aria-popover.ts
index e8d0873634..9eeacf1259 100644
--- a/packages/components/popover/src/use-aria-popover.ts
+++ b/packages/components/popover/src/use-aria-popover.ts
@@ -37,6 +37,11 @@ export interface Props {
    * @default []
    */
   updatePositionDeps?: any[];
+  /**
+   * Whether the popover should close on scroll.
+   * @default true
+   */
+  shouldCloseOnScroll?: boolean;
 }
 
 export type ReactAriaPopoverProps = Props & Omit<AriaPopoverProps, "placement"> & AriaOverlayProps;
@@ -60,6 +65,7 @@ export function useReactAriaPopover(
     boundaryElement,
     isDismissable = true,
     shouldCloseOnBlur = true,
+    shouldCloseOnScroll = true,
     placement: placementProp = "top",
     containerPadding,
     shouldCloseOnInteractOutside,
@@ -102,7 +108,7 @@ export function useReactAriaPopover(
     containerPadding,
     placement: toReactAriaPlacement(placementProp),
     offset: showArrow ? offset + 3 : offset,
-    onClose: isNonModal ? state.close : () => {},
+    onClose: isNonModal && shouldCloseOnScroll ? state.close : () => {},
   });
 
   useSafeLayoutEffect(() => {
diff --git a/packages/components/popover/src/use-popover.ts b/packages/components/popover/src/use-popover.ts
index 8f91399e42..f3ac340d78 100644
--- a/packages/components/popover/src/use-popover.ts
+++ b/packages/components/popover/src/use-popover.ts
@@ -6,7 +6,7 @@ import {RefObject, Ref, useEffect} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
-import {ariaHideOutside, useOverlayTrigger} from "@react-aria/overlays";
+import {ariaHideOutside, useOverlayTrigger, usePreventScroll} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
 import {
   HTMLNextUIProps,
@@ -118,6 +118,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     boundaryElement,
     isKeyboardDismissDisabled,
     shouldCloseOnInteractOutside,
+    shouldCloseOnScroll,
     motionProps,
     className,
     classNames,
@@ -169,6 +170,7 @@ export function usePopover(originalProps: UsePopoverProps) {
       containerPadding,
       updatePositionDeps,
       isKeyboardDismissDisabled,
+      shouldCloseOnScroll,
       shouldCloseOnInteractOutside,
     },
     state,
@@ -188,6 +190,10 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const baseStyles = clsx(classNames?.base, className);
 
+  usePreventScroll({
+    isDisabled: !(shouldBlockScroll && state.isOpen),
+  });
+
   const getPopoverProps: PropGetter = (props = {}) => ({
     ref: domRef,
     ...mergeProps(popoverProps, otherProps, props),
diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
index 38e7dab459..72f7efdf04 100644
--- a/packages/components/popover/stories/popover.stories.tsx
+++ b/packages/components/popover/stories/popover.stories.tsx
@@ -81,6 +81,11 @@ export default {
         type: "boolean",
       },
     },
+    shouldCloseOnScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
     disableAnimation: {
       control: {
         type: "boolean",
diff --git a/packages/components/progress/CHANGELOG.md b/packages/components/progress/CHANGELOG.md
index 16bf9c2a51..d617f3fc8b 100644
--- a/packages/components/progress/CHANGELOG.md
+++ b/packages/components/progress/CHANGELOG.md
@@ -1,5 +1,157 @@
 # @nextui-org/progress
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-is-mounted@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-is-mounted@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/progress/package.json b/packages/components/progress/package.json
index 05c075d526..be1c419b29 100644
--- a/packages/components/progress/package.json
+++ b/packages/components/progress/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"
@@ -34,19 +34,19 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-is-mounted": "workspace:*",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/progress": "3.4.13",
-    "@react-aria/utils": "3.24.1",
-    "@react-types/progress": "3.5.4"
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/progress": "3.4.17",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/progress": "3.5.7"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/radio/CHANGELOG.md b/packages/components/radio/CHANGELOG.md
index 22950b0f3b..ad98f9840f 100644
--- a/packages/components/radio/CHANGELOG.md
+++ b/packages/components/radio/CHANGELOG.md
@@ -1,5 +1,159 @@
 # @nextui-org/radio
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4220](https://github.com/nextui-org/nextui/pull/4220) [`729ede8`](https://github.com/nextui-org/nextui/commit/729ede8de7f18c7b49fbdb736aac300b5b98f239) Thanks [@macci001](https://github.com/macci001)! - Fix #4210 radio, checkbox & switch interaction
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/form@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - support server validation with form
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/form@2.0.1-beta.0
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.5
 
 ### Patch Changes
diff --git a/packages/components/radio/__tests__/radio.test.tsx b/packages/components/radio/__tests__/radio.test.tsx
index cd5b51302d..3d2d512714 100644
--- a/packages/components/radio/__tests__/radio.test.tsx
+++ b/packages/components/radio/__tests__/radio.test.tsx
@@ -1,10 +1,17 @@
 import * as React from "react";
 import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
+import {Form} from "@nextui-org/form";
 
 import {RadioGroup, Radio, RadioGroupProps} from "../src";
 
 describe("Radio", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(
       <RadioGroup label="Options">
@@ -62,7 +69,7 @@ describe("Radio", () => {
     expect(wrapper.container.querySelector("[data-testid=radio-test-2] input")).toBeChecked();
   });
 
-  it("should change value after click", () => {
+  it("should change value after click", async () => {
     const {container} = render(
       <RadioGroup defaultValue="1" label="Options">
         <Radio value="1">Option 1</Radio>
@@ -74,14 +81,11 @@ describe("Radio", () => {
 
     let radio2 = container.querySelector(".radio-test-2 input") as HTMLInputElement;
 
-    act(() => {
-      radio2.click();
-    });
-
+    await user.click(radio2);
     expect(radio2).toBeChecked();
   });
 
-  it("should ignore events when disabled", () => {
+  it("should ignore events when disabled", async () => {
     const {container} = render(
       <RadioGroup label="Options">
         <Radio isDisabled className="radio-test-1" value="1">
@@ -93,14 +97,11 @@ describe("Radio", () => {
 
     let radio1 = container.querySelector(".radio-test-1 input") as HTMLInputElement;
 
-    act(() => {
-      radio1.click();
-    });
-
+    await user.click(radio1);
     expect(radio1).not.toBeChecked();
   });
 
-  it('should work correctly with "onValueChange" prop', () => {
+  it('should work correctly with "onValueChange" prop', async () => {
     const onValueChange = jest.fn();
 
     const {container} = render(
@@ -114,11 +115,8 @@ describe("Radio", () => {
 
     let radio2 = container.querySelector(".radio-test-2 input") as HTMLInputElement;
 
-    act(() => {
-      radio2.click();
-    });
-
-    expect(onValueChange).toBeCalledWith("2");
+    await user.click(radio2);
+    expect(onValueChange).toHaveBeenCalledWith("2");
 
     expect(radio2).toBeChecked();
   });
@@ -141,7 +139,7 @@ describe("Radio", () => {
       radio2.focus();
     });
 
-    expect(onFocus).toBeCalled();
+    expect(onFocus).toHaveBeenCalled();
   });
 
   it("should have required attribute when isRequired with native validationBehavior", () => {
@@ -178,7 +176,7 @@ describe("Radio", () => {
     expect(radios[0]).not.toHaveAttribute("required");
   });
 
-  it("should work correctly with controlled value", () => {
+  it("should work correctly with controlled value", async () => {
     const onValueChange = jest.fn();
 
     const Component = ({onValueChange}: Omit<RadioGroupProps, "value">) => {
@@ -205,11 +203,8 @@ describe("Radio", () => {
 
     let radio2 = container.querySelector(".radio-test-2 input") as HTMLInputElement;
 
-    act(() => {
-      radio2.click();
-    });
-
-    expect(onValueChange).toBeCalled();
+    await user.click(radio2);
+    expect(onValueChange).toHaveBeenCalled();
 
     expect(radio2).toBeChecked();
   });
@@ -312,6 +307,54 @@ describe("validation", () => {
 
       expect(group).not.toHaveAttribute("aria-describedby");
     });
+
+    it("supports server validation", async () => {
+      function Test() {
+        const [serverErrors, setServerErrors] = React.useState({});
+        const onSubmit = (e) => {
+          e.preventDefault();
+          setServerErrors({
+            pet: "You must choose a pet.",
+          });
+        };
+
+        return (
+          <Form validationBehavior="native" validationErrors={serverErrors} onSubmit={onSubmit}>
+            <RadioGroup aria-label="favorite pet" name="pet" validationBehavior="native">
+              <Radio value="dogs">Dogs</Radio>
+              <Radio value="cats">Cats</Radio>
+              <Radio value="dragons">Dragons</Radio>
+            </RadioGroup>
+            <button type="submit">Submit</button>
+          </Form>
+        );
+      }
+
+      const {getAllByRole, getByRole} = render(<Test />);
+
+      const group = getByRole("radiogroup");
+
+      expect(group).not.toHaveAttribute("aria-describedby");
+
+      await user.click(getByRole("button"));
+
+      expect(group).toHaveAttribute("aria-describedby");
+      expect(document.getElementById(group.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "You must choose a pet.",
+      );
+
+      const radios = getAllByRole("radio") as HTMLInputElement[];
+
+      for (const input of radios) {
+        expect(input.validity.valid).toBe(false);
+      }
+
+      await user.click(radios[0]);
+      expect(group).not.toHaveAttribute("aria-describedby");
+      for (const input of radios) {
+        expect(input.validity.valid).toBe(true);
+      }
+    });
   });
 
   describe("validationBehavior=aria", () => {
@@ -347,5 +390,31 @@ describe("validation", () => {
       expect(group).not.toHaveAttribute("aria-describedby");
       expect(group).not.toHaveAttribute("aria-invalid");
     });
+
+    it("supports server validation", async () => {
+      const {getAllByRole, getByRole} = render(
+        <Form validationBehavior="aria" validationErrors={{pet: "You must choose a pet"}}>
+          <RadioGroup aria-label="favorite pet" name="pet">
+            <Radio value="dogs">Dogs</Radio>
+            <Radio value="cats">Cats</Radio>
+            <Radio value="dragons">Dragons</Radio>
+          </RadioGroup>
+        </Form>,
+      );
+
+      const group = getByRole("radiogroup");
+
+      expect(group).toHaveAttribute("aria-describedby");
+      expect(group).toHaveAttribute("aria-invalid", "true");
+      expect(document.getElementById(group.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "You must choose a pet",
+      );
+
+      const radios = getAllByRole("radio");
+
+      await user.click(radios[0]);
+      expect(group).not.toHaveAttribute("aria-describedby");
+      expect(group).not.toHaveAttribute("aria-invalid");
+    });
   });
 });
diff --git a/packages/components/radio/package.json b/packages/components/radio/package.json
index 61d7da6f33..e9f23369ff 100644
--- a/packages/components/radio/package.json
+++ b/packages/components/radio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "2.1.5",
+  "version": "2.3.1",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
@@ -34,22 +34,23 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
+    "@nextui-org/form": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/radio": "3.10.4",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/radio": "3.10.4",
-    "@react-types/radio": "3.8.1",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/radio": "3.10.9",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/radio": "3.10.8",
+    "@react-types/radio": "3.8.4",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -60,4 +61,4 @@
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/radio/src/use-radio-group.ts b/packages/components/radio/src/use-radio-group.ts
index da6ce27a2b..3fe02c3ec7 100644
--- a/packages/components/radio/src/use-radio-group.ts
+++ b/packages/components/radio/src/use-radio-group.ts
@@ -11,6 +11,7 @@ import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/syste
 import {filterDOMProps, useDOMRef} from "@nextui-org/react-utils";
 import {clsx, safeAriaLabel} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 import {RadioProps} from "./index";
 
@@ -63,6 +64,7 @@ export type ContextType = {
 
 export function useRadioGroup(props: UseRadioGroupProps) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const {
     as,
@@ -74,7 +76,7 @@ export function useRadioGroup(props: UseRadioGroupProps) {
     name,
     isInvalid: isInvalidProp,
     validationState,
-    validationBehavior = globalContext?.validationBehavior ?? "aria",
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
     size = "md",
     color = "primary",
     isDisabled = false,
diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts
index 6e9c20593b..b171b1e006 100644
--- a/packages/components/radio/src/use-radio.ts
+++ b/packages/components/radio/src/use-radio.ts
@@ -1,10 +1,10 @@
 import type {AriaRadioProps} from "@react-types/radio";
 import type {RadioVariantProps, RadioSlots, SlotsToClasses} from "@nextui-org/theme";
 
-import {Ref, ReactNode, useCallback, useId, useState} from "react";
+import {Ref, ReactNode, useCallback, useId} from "react";
 import {useMemo, useRef} from "react";
 import {useFocusRing} from "@react-aria/focus";
-import {useHover, usePress} from "@react-aria/interactions";
+import {useHover} from "@react-aria/interactions";
 import {radio} from "@nextui-org/theme";
 import {useRadio as useReactAriaRadio} from "@react-aria/radio";
 import {HTMLNextUIProps, PropGetter, useProviderContext} from "@nextui-org/system";
@@ -115,12 +115,7 @@ export function useRadio(props: UseRadioProps) {
     descriptionId,
   ]);
 
-  const {
-    inputProps,
-    isDisabled,
-    isSelected,
-    isPressed: isPressedKeyboard,
-  } = useReactAriaRadio(
+  const {inputProps, isDisabled, isSelected, isPressed} = useReactAriaRadio(
     {
       value,
       children: typeof children === "function" ? true : children,
@@ -135,29 +130,11 @@ export function useRadio(props: UseRadioProps) {
   });
 
   const interactionDisabled = isDisabled || inputProps.readOnly;
-
-  // Handle press state for full label. Keyboard press state is returned by useCheckbox
-  // since it is handled on the <input> element itself.
-  const [isPressed, setPressed] = useState(false);
-  const {pressProps} = usePress({
-    isDisabled: interactionDisabled,
-    onPressStart(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(true);
-      }
-    },
-    onPressEnd(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(false);
-      }
-    },
-  });
-
   const {hoverProps, isHovered} = useHover({
     isDisabled: interactionDisabled,
   });
 
-  const pressed = interactionDisabled ? false : isPressed || isPressedKeyboard;
+  const pressed = interactionDisabled ? false : isPressed;
 
   const slots = useMemo(
     () =>
@@ -189,7 +166,7 @@ export function useRadio(props: UseRadioProps) {
         "data-hover-unselected": dataAttr(isHovered && !isSelected),
         "data-readonly": dataAttr(inputProps.readOnly),
         "aria-required": dataAttr(isRequired),
-        ...mergeProps(hoverProps, pressProps, otherProps),
+        ...mergeProps(hoverProps, otherProps),
       };
     },
     [
diff --git a/packages/components/radio/stories/radio.stories.tsx b/packages/components/radio/stories/radio.stories.tsx
index a279d61fbd..28aae052ad 100644
--- a/packages/components/radio/stories/radio.stories.tsx
+++ b/packages/components/radio/stories/radio.stories.tsx
@@ -5,6 +5,7 @@ import {Meta} from "@storybook/react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {radio, button} from "@nextui-org/theme";
 import {clsx} from "@nextui-org/shared-utils";
+import {Form} from "@nextui-org/form";
 
 import {
   RadioGroup,
@@ -93,7 +94,7 @@ const Template = (args: RadioGroupProps) => {
 
   return args.isRequired ? (
     <form
-      className="flex flex-col items-start gap-4"
+      className="flex flex-col items-start gap-2"
       onSubmit={(e) => {
         alert(`Submitted value: ${e.target["sample"].value}`);
         e.preventDefault();
@@ -157,7 +158,7 @@ const InvalidTemplate = (args: RadioGroupProps) => {
 
   return args.isRequired ? (
     <form
-      className="flex flex-col items-start gap-4"
+      className="flex flex-col items-start gap-2"
       onSubmit={(e) => {
         e.preventDefault();
         alert("Submitted!");
@@ -205,6 +206,35 @@ const ControlledTemplate = (args: RadioGroupProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: RadioGroupProps) => {
+  const [serverErrors, setServerErrors] = React.useState({});
+  const onSubmit = (e) => {
+    e.preventDefault();
+    setServerErrors({
+      option: "You must choose an option.",
+    });
+  };
+
+  delete args.isInvalid;
+
+  return (
+    <Form
+      className="flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <RadioGroup {...args} label="Choose one option" name="option">
+        <Radio value="option1">Option 1</Radio>
+        <Radio value="option2">Option 2</Radio>
+        <Radio value="option3">Option 3</Radio>
+      </RadioGroup>
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+    </Form>
+  );
+};
+
 export const Default = {
   render: Template,
 
@@ -299,6 +329,14 @@ export const WithValidation = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const Row = {
   render: Template,
 
diff --git a/packages/components/ripple/CHANGELOG.md b/packages/components/ripple/CHANGELOG.md
index e752e154f2..35d3675150 100644
--- a/packages/components/ripple/CHANGELOG.md
+++ b/packages/components/ripple/CHANGELOG.md
@@ -1,5 +1,155 @@
 # @nextui-org/ripple
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.33
 
 ### Patch Changes
diff --git a/packages/components/ripple/package.json b/packages/components/ripple/package.json
index a84007fb2f..ac5e7e65ae 100644
--- a/packages/components/ripple/package.json
+++ b/packages/components/ripple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/ripple",
-  "version": "2.0.33",
+  "version": "2.2.1",
   "description": "A simple implementation to display a ripple animation when the source component is clicked",
   "keywords": [
     "ripple"
@@ -34,21 +34,22 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
-    "@nextui-org/react-utils": "workspace:*"
+    "@nextui-org/react-utils": "workspace:*",
+    "@nextui-org/dom-animation": "workspace:*"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
diff --git a/packages/components/ripple/src/ripple.tsx b/packages/components/ripple/src/ripple.tsx
index 92caacc451..96d4c480cd 100644
--- a/packages/components/ripple/src/ripple.tsx
+++ b/packages/components/ripple/src/ripple.tsx
@@ -3,7 +3,7 @@ import type {FC} from "react";
 import type {HTMLMotionProps} from "framer-motion";
 import type {HTMLNextUIProps} from "@nextui-org/system";
 
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {clamp} from "@nextui-org/shared-utils";
 
 export interface RippleProps extends HTMLNextUIProps<"span"> {
@@ -14,6 +14,8 @@ export interface RippleProps extends HTMLNextUIProps<"span"> {
   onClear: (key: React.Key) => void;
 }
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Ripple: FC<RippleProps> = (props) => {
   const {ripples = [], motionProps, color = "currentColor", style, onClear} = props;
 
diff --git a/packages/components/scroll-shadow/CHANGELOG.md b/packages/components/scroll-shadow/CHANGELOG.md
index 2b77ae74fe..2815dcaea3 100644
--- a/packages/components/scroll-shadow/CHANGELOG.md
+++ b/packages/components/scroll-shadow/CHANGELOG.md
@@ -1,5 +1,152 @@
 # @nextui-org/scroll-shadow
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-data-scroll-overflow@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-data-scroll-overflow@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/use-data-scroll-overflow@2.1.8-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.1.20
 
 ### Patch Changes
diff --git a/packages/components/scroll-shadow/package.json b/packages/components/scroll-shadow/package.json
index 0dc5c05a75..bdd5ce4453 100644
--- a/packages/components/scroll-shadow/package.json
+++ b/packages/components/scroll-shadow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/scroll-shadow",
-  "version": "2.1.20",
+  "version": "2.3.1",
   "description": "A component that applies top and bottom shadows when content overflows on scroll.",
   "keywords": [
     "scroll-shadow"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/packages/components/select/CHANGELOG.md b/packages/components/select/CHANGELOG.md
index ab1e4eb8f9..0146823aff 100644
--- a/packages/components/select/CHANGELOG.md
+++ b/packages/components/select/CHANGELOG.md
@@ -1,5 +1,362 @@
 # @nextui-org/select
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/form@2.1.1
+  - @nextui-org/listbox@2.3.1
+  - @nextui-org/popover@2.3.1
+  - @nextui-org/scroll-shadow@2.3.1
+  - @nextui-org/spinner@2.2.1
+  - @nextui-org/use-aria-button@2.2.1
+  - @nextui-org/use-aria-multiselect@2.4.1
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4214](https://github.com/nextui-org/nextui/pull/4214) [`af0d20d`](https://github.com/nextui-org/nextui/commit/af0d20d807311b98a49218cb10faff0972a7d2fa) Thanks [@jubar](https://github.com/jubar)! - Update the data-slot attribute of the Select component from "errorMessage" to "error-message" to maintain consistency across all components.
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4219](https://github.com/nextui-org/nextui/pull/4219) [`1855ba4`](https://github.com/nextui-org/nextui/commit/1855ba4390186f701c793f76593f31a5dce6da70) Thanks [@Peterl561](https://github.com/Peterl561)! - add hideEmptyContent API to select
+
+- Updated dependencies [[`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`1855ba4`](https://github.com/nextui-org/nextui/commit/1855ba4390186f701c793f76593f31a5dce6da70), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8)]:
+  - @nextui-org/listbox@2.3.0
+  - @nextui-org/popover@2.3.0
+  - @nextui-org/use-aria-multiselect@2.4.0
+  - @nextui-org/form@2.1.0
+  - @nextui-org/use-aria-button@2.2.0
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/scroll-shadow@2.3.0
+  - @nextui-org/spinner@2.2.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.3.0-beta.19
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322), [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/listbox@2.2.0-beta.14
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+
+## 2.3.0-beta.18
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/listbox@2.2.0-beta.13
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/aria-utils@2.1.0-beta.11
+
+## 2.3.0-beta.17
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/listbox@2.2.0-beta.12
+  - @nextui-org/popover@2.2.0-beta.11
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.8
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.3.0-beta.16
+
+### Patch Changes
+
+- [#4082](https://github.com/nextui-org/nextui/pull/4082) [`1e05a721f`](https://github.com/nextui-org/nextui/commit/1e05a721f9ba25403c023023a1e3efa44ac3bb74) Thanks [@chirokas](https://github.com/chirokas)! - Fix Controlled IsInvalid Prop In Select
+
+## 2.3.0-beta.15
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/listbox@2.2.0-beta.11
+  - @nextui-org/popover@2.2.0-beta.10
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.8
+
+## 2.3.0-beta.14
+
+### Patch Changes
+
+- Updated dependencies [[`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac)]:
+  - @nextui-org/listbox@2.2.0-beta.10
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+
+## 2.3.0-beta.13
+
+### Patch Changes
+
+- [#4126](https://github.com/nextui-org/nextui/pull/4126) [`9e8beabab`](https://github.com/nextui-org/nextui/commit/9e8beababea60dc499cc0989a0720fe25a10a823) Thanks [@tianenpang](https://github.com/tianenpang)! - Fix the label placement when the `Select` has a `placeholder` or `description`.
+
+- Updated dependencies []:
+  - @nextui-org/listbox@2.2.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+
+## 2.3.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/listbox@2.2.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/aria-utils@2.1.0-beta.8
+
+## 2.3.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f)]:
+  - @nextui-org/listbox@2.2.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+
+## 2.3.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/listbox@2.2.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.6
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.3.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/listbox@2.2.0-beta.6
+  - @nextui-org/popover@2.2.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.6
+  - @nextui-org/spinner@2.1.0-beta.6
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.5
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/listbox@2.2.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.6
+  - @nextui-org/scroll-shadow@2.2.0-beta.5
+  - @nextui-org/spinner@2.1.0-beta.5
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.4
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/listbox@2.2.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.3
+  - @nextui-org/spinner@2.1.0-beta.3
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.3
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/listbox@2.2.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.3
+  - @nextui-org/scroll-shadow@2.2.0-beta.2
+  - @nextui-org/spinner@2.1.0-beta.2
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.2
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c)]:
+  - @nextui-org/popover@2.2.0-beta.2
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#3966](https://github.com/nextui-org/nextui/pull/3966) [`a2d653137`](https://github.com/nextui-org/nextui/commit/a2d653137d61465a88dfa3830bb3a44e3a7faa87) Thanks [@mstfblci](https://github.com/mstfblci)! - - Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present
+
+- Updated dependencies []:
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/scroll-shadow@2.2.0-beta.1
+  - @nextui-org/spinner@2.1.0-beta.1
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3853](https://github.com/nextui-org/nextui/pull/3853) [`488a18f52`](https://github.com/nextui-org/nextui/commit/488a18f525465817ce56e81db8e502399a7572b7) Thanks [@macci001](https://github.com/macci001)! - update label placement in Select to use `shouldLabelBeOutside` instead of `isOutsideLeft`, resolving multiline label placement issues (#3841).
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`a2e562b03`](https://github.com/nextui-org/nextui/commit/a2e562b03f79b52b0b35f07104b3585ea05e2cb6), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/listbox@2.2.0-beta.0
+  - @nextui-org/popover@2.2.0-beta.0
+  - @nextui-org/scroll-shadow@2.2.0-beta.0
+  - @nextui-org/spinner@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+  - @nextui-org/use-aria-multiselect@2.3.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.2.7
 
 ### Patch Changes
diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index ec751bec8c..13b90369a4 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/packages/components/select/__tests__/select.test.tsx
@@ -1,9 +1,10 @@
 import type {SelectProps} from "../src";
 
 import * as React from "react";
-import {render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {act, render, renderHook, waitFor} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
 
 import {Select, SelectItem, SelectSection} from "../src";
 import {Modal, ModalContent, ModalHeader, ModalBody, ModalFooter} from "../../modal/src";
@@ -51,7 +52,7 @@ const itemsSectionData = [
 ];
 
 describe("Select", () => {
-  let user;
+  let user: UserEvent;
 
   beforeEach(() => {
     user = userEvent.setup();
@@ -153,11 +154,8 @@ describe("Select", () => {
 
     expect(listboxItems.length).toBe(3);
 
-    await act(async () => {
-      await user.click(listboxItems[1]);
-
-      expect(onSelectionChange).toBeCalledTimes(1);
-    });
+    await user.click(listboxItems[1]);
+    expect(onSelectionChange).toHaveBeenCalledTimes(1);
   });
 
   it("should work with multiple selection (controlled)", async () => {
@@ -186,12 +184,10 @@ describe("Select", () => {
 
     expect(listboxItems.length).toBe(3);
 
-    await act(async () => {
-      await user.click(listboxItems[1]);
-      await user.click(listboxItems[2]);
+    await user.click(listboxItems[1]);
+    await user.click(listboxItems[2]);
 
-      expect(onSelectionChange).toBeCalledTimes(2);
-    });
+    expect(onSelectionChange).toHaveBeenCalledTimes(2);
   });
 
   it("should work with dynamic placeholder and renderValue", async () => {
@@ -226,15 +222,11 @@ describe("Select", () => {
 
     const select = wrapper.getByTestId("render-selected-item-test");
 
-    await act(async () => {
-      await user.click(select);
-    });
+    await user.click(select);
 
     const listboxItems = wrapper.getAllByRole("option");
 
-    await act(async () => {
-      await user.click(listboxItems[0]);
-    });
+    await user.click(listboxItems[0]);
 
     expect(select).toHaveTextContent("Penguin");
     expect(wrapper.queryByText("Select an favorite animal")).toBe(null);
@@ -266,17 +258,13 @@ describe("Select", () => {
     const select = wrapper.getByTestId("close-when-clicking-outside-test");
 
     // open the select dropdown
-    await act(async () => {
-      await user.click(select);
-    });
+    await user.click(select);
 
     // assert that the select is open
     expect(select).toHaveAttribute("aria-expanded", "true");
 
     // click outside the select component
-    await act(async () => {
-      await user.click(document.body);
-    });
+    await user.click(document.body);
 
     // assert that the select is closed
     expect(select).toHaveAttribute("aria-expanded", "false");
@@ -306,17 +294,13 @@ describe("Select", () => {
     const select = wrapper.getByTestId("close-when-clicking-outside-test");
 
     // open the select dropdown
-    await act(async () => {
-      await user.click(select);
-    });
+    await user.click(select);
 
     // assert that the select is open
     expect(select).toHaveAttribute("aria-expanded", "true");
 
     // click outside the select component
-    await act(async () => {
-      await user.click(document.body);
-    });
+    await user.click(document.body);
 
     // assert that the select is closed
     expect(select).toHaveAttribute("aria-expanded", "false");
@@ -341,20 +325,68 @@ describe("Select", () => {
     );
     const select = wrapper.getByTestId("test-select");
 
-    await act(async () => {
-      await user.click(document.body);
-      await user.tab();
-      await user.type(select, "z", {skipClick: true});
+    await user.click(document.body);
+    await user.tab();
+    await user.type(select, "z", {skipClick: true});
 
-      expect(onSelectionChange).toBeCalledTimes(0);
-    });
+    expect(onSelectionChange).toHaveBeenCalledTimes(0);
+  });
+
+  it("should pre-select items based on defaultSelectedKeys (numeric keys)", () => {
+    const items = [
+      {key: 1, value: "Penguin"},
+      {key: 2, value: "Zebra"},
+      {key: 3, value: "Shark"},
+    ];
+
+    const wrapper = render(
+      <Select
+        isOpen
+        defaultSelectedKeys={[1, 2]} // Numeric keys for selection
+        items={items}
+        label="Test Default Selected Keys"
+        selectionMode="multiple"
+      >
+        {(item) => <SelectItem>{item.value}</SelectItem>}
+      </Select>,
+    );
+
+    const selectedOptions = wrapper.getAllByRole("option", {selected: true});
+
+    expect(selectedOptions.length).toBe(2);
+    expect(selectedOptions.map((opt) => opt.textContent)).toEqual(["Penguin", "Zebra"]);
+  });
+
+  it("should pre-select items based on defaultSelectedKeys (numeric ids)", () => {
+    const items = [
+      {id: 1, value: "Penguin"},
+      {id: 2, value: "Zebra"},
+      {id: 3, value: "Shark"},
+    ];
+
+    const wrapper = render(
+      <Select
+        isOpen
+        defaultSelectedKeys={[1, 2]} // Numeric ids for selection
+        items={items}
+        label="Test Default Selected IDs"
+        selectionMode="multiple"
+      >
+        {(item) => <SelectItem>{item.value}</SelectItem>}
+      </Select>,
+    );
+
+    const selectedOptions = wrapper.getAllByRole("option", {selected: true});
+
+    expect(selectedOptions.length).toBe(2);
+    expect(selectedOptions.map((opt) => opt.textContent)).toEqual(["Penguin", "Zebra"]);
   });
 
   it("onSelectionChange should be called with a Set of item ids upon selection", async () => {
     const itemsWithId = [
-      {id: "1", value: "penguin"},
-      {id: "2", value: "zebra"},
-      {id: "3", value: "shark"},
+      {id: 1, value: "penguin"},
+      {id: 2, value: "zebra"},
+      {id: 3, value: "shark"},
     ];
 
     const onSelectionChangeId = jest.fn();
@@ -365,7 +397,7 @@ describe("Select", () => {
         label="Test with ID"
         onSelectionChange={onSelectionChangeId}
       >
-        {(item) => <SelectItem key={item.id}>{item.value}</SelectItem>}
+        {(item) => <SelectItem>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -374,17 +406,15 @@ describe("Select", () => {
     expect(listbox).toBeInTheDocument();
 
     // Select item and check the correct ID is passed to the callback
-    await act(async () => {
-      await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[0].value}));
-    });
+    await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[0].value}));
+
     expect(onSelectionChangeId).toHaveBeenCalled();
     let selectionArg = onSelectionChangeId.mock.calls[0][0];
 
     expect([...selectionArg]).toEqual([itemsWithId[0].id]);
 
-    await act(async () => {
-      await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[1].value}));
-    });
+    await user.click(wrapperWithId.getByRole("option", {name: itemsWithId[1].value}));
+
     expect(onSelectionChangeId).toHaveBeenCalledTimes(2);
     selectionArg = onSelectionChangeId.mock.calls[1][0];
     expect([...selectionArg]).toEqual([itemsWithId[1].id]);
@@ -392,9 +422,9 @@ describe("Select", () => {
 
   it("onSelectionChange should be called with a Set of item keys upon selection", async () => {
     const itemsWithKey = [
-      {key: "1", value: "penguin"},
-      {key: "2", value: "zebra"},
-      {key: "3", value: "shark"},
+      {key: 1, value: "penguin"},
+      {key: 2, value: "zebra"},
+      {key: 3, value: "shark"},
     ];
 
     const onSelectionChangeKey = jest.fn();
@@ -405,7 +435,7 @@ describe("Select", () => {
         label="Test with Key"
         onSelectionChange={onSelectionChangeKey}
       >
-        {(item) => <SelectItem key={item.key}>{item.value}</SelectItem>}
+        {(item) => <SelectItem>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -414,17 +444,15 @@ describe("Select", () => {
     expect(listbox).toBeInTheDocument();
 
     // Select item and check the correct key is passed to the callback
-    await act(async () => {
-      await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[0].value}));
-    });
+    await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[0].value}));
+
     expect(onSelectionChangeKey).toHaveBeenCalled();
     let selectionArg = onSelectionChangeKey.mock.calls[0][0];
 
     expect([...selectionArg]).toEqual([itemsWithKey[0].key]);
 
-    await act(async () => {
-      await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[1].value}));
-    });
+    await user.click(wrapperWithKey.getByRole("option", {name: itemsWithKey[1].value}));
+
     expect(onSelectionChangeKey).toHaveBeenCalledTimes(2);
     selectionArg = onSelectionChangeKey.mock.calls[1][0];
     expect([...selectionArg]).toEqual([itemsWithKey[1].key]);
@@ -487,9 +515,7 @@ describe("Select", () => {
     expect(select2).not.toBeNull();
 
     // open the select listbox by clicking selector button in the first select
-    await act(async () => {
-      await userEvent.click(select);
-    });
+    await user.click(select);
 
     // assert that the first select listbox is open
     expect(select).toHaveAttribute("aria-expanded", "true");
@@ -498,9 +524,7 @@ describe("Select", () => {
     expect(select2).toHaveAttribute("aria-expanded", "false");
 
     // close the select listbox by clicking the second select
-    await act(async () => {
-      await userEvent.click(select2);
-    });
+    await user.click(select2);
 
     // assert that the first select listbox is closed
     expect(select).toHaveAttribute("aria-expanded", "false");
@@ -553,8 +577,6 @@ describe("Select", () => {
   it("should unset form value", async () => {
     const logSpy = jest.spyOn(console, "log");
 
-    const user = userEvent.setup();
-
     const wrapper = render(
       <form
         className="w-full max-w-xs items-end flex flex-col gap-4"
@@ -584,20 +606,14 @@ describe("Select", () => {
 
     const submitButton = wrapper.getByTestId("submit-button");
 
-    await act(async () => {
-      await user.click(submitButton);
-    });
-
+    await user.click(submitButton);
     expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "foo"}));
 
     const select = wrapper.getByTestId("select");
 
     expect(select).not.toBeNull();
 
-    await act(async () => {
-      await user.click(select);
-    });
-
+    await user.click(select);
     const listbox = wrapper.getByRole("listbox");
 
     expect(listbox).toBeTruthy();
@@ -606,13 +622,8 @@ describe("Select", () => {
 
     expect(listboxItems.length).toBe(2);
 
-    await act(async () => {
-      await user.click(listboxItems[0]);
-    });
-
-    await act(async () => {
-      await user.click(submitButton);
-    });
+    await user.click(listboxItems[0]);
+    await user.click(submitButton);
 
     expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: ""}));
   });
@@ -632,22 +643,18 @@ describe("Select", () => {
       </Select>,
     );
 
-    const select = wrapper.getByTestId("select");
+    const select = await wrapper.findByTestId("select");
 
     expect(select).not.toBeNull();
 
     // open the select listbox by clicking selector button
-    await act(async () => {
-      await userEvent.click(select);
-    });
+    await user.click(select);
 
     // assert that the select listbox is open
     expect(select).toHaveAttribute("aria-expanded", "true");
 
     // open the select listbox by clicking selector button
-    await act(async () => {
-      await userEvent.click(select);
-    });
+    await user.click(select);
 
     // assert that the select listbox is closed
     expect(select).toHaveAttribute("aria-expanded", "false");
@@ -663,7 +670,13 @@ describe("Select", () => {
     });
 
     const wrapper = render(
-      <Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
+      <Select
+        isOpen
+        aria-label="Favorite Animal"
+        isVirtualized={false}
+        label="Favorite Animal"
+        onChange={onChange}
+      >
         {options.map((o) => (
           <SelectItem key={o} value={o}>
             {o}
@@ -680,11 +693,9 @@ describe("Select", () => {
 
     expect(listboxItems.length).toBe(10);
 
-    await act(async () => {
-      await user.click(listboxItems[1]);
+    await user.click(listboxItems[1]);
 
-      expect(onChange).toBeCalledTimes(1);
-    });
+    expect(onChange).toHaveBeenCalledTimes(1);
   });
 
   it("should work with onChange (>= 300 select items)", async () => {
@@ -697,7 +708,13 @@ describe("Select", () => {
     });
 
     const wrapper = render(
-      <Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
+      <Select
+        isOpen
+        aria-label="Favorite Animal"
+        isVirtualized={false}
+        label="Favorite Animal"
+        onChange={onChange}
+      >
         {options.map((o) => (
           <SelectItem key={o} value={o}>
             {o}
@@ -714,11 +731,342 @@ describe("Select", () => {
 
     expect(listboxItems.length).toBe(300);
 
-    await act(async () => {
-      await user.click(listboxItems[1]);
+    await user.click(listboxItems[1]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should place the label outside when labelPlacement is outside and isMultiline enabled", () => {
+    const labelContent = "Favorite Animal Label";
+
+    render(
+      <Select
+        isMultiline
+        aria-label="Favorite Animal"
+        data-testid="select"
+        label={labelContent}
+        labelPlacement="outside"
+        placeholder="placeholder"
+      >
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+
+    const base = document.querySelector("[data-slot=base]");
+    const trigger = document.querySelector("[data-slot=trigger]");
+
+    expect(base).toHaveTextContent(labelContent);
+    expect(trigger).not.toHaveTextContent(labelContent);
+  });
+
+  it("should place the label inside when labelPlacement prop is not passed", () => {
+    const labelContent = "Favorite Animal Label";
+
+    render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="select"
+        label={labelContent}
+        placeholder="placeholder"
+      >
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+
+    const trigger = document.querySelector("[data-slot=trigger]");
+
+    expect(trigger).toHaveTextContent(labelContent);
+  });
+
+  it("should support controlled isInvalid prop", async () => {
+    function Test() {
+      const [isInvalid, setInvalid] = React.useState(false);
+
+      return (
+        <>
+          <Select
+            data-testid="select"
+            errorMessage="Invalid value"
+            isInvalid={isInvalid}
+            label="Test"
+            name="select"
+          >
+            <SelectItem key="one">One</SelectItem>
+            <SelectItem key="two">Two</SelectItem>
+            <SelectItem key="three">Three</SelectItem>
+          </Select>
+          <button data-testid="button" onClick={() => setInvalid((isInvalid) => !isInvalid)}>
+            Click Me
+          </button>
+        </>
+      );
+    }
+
+    const {getByTestId} = render(<Test />);
+    const select = getByTestId("select");
+
+    expect(select).not.toHaveAttribute("aria-describedby");
+
+    await user.click(getByTestId("button"));
+    expect(select).toHaveAttribute("aria-describedby");
+    expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
+      "Invalid value",
+    );
+  });
+
+  it("should not open dropdown when hideEmptyContent is true", async () => {
+    const wrapper = render(
+      <Select
+        hideEmptyContent
+        aria-label="Favorite Animal"
+        data-testid="hide-empty-content-true-test"
+        label="Favorite Animal"
+      >
+        {[]}
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("hide-empty-content-true-test");
+
+    // open the select dropdown
+    await user.click(select);
+
+    // assert that the select is not open
+    expect(select).not.toHaveAttribute("aria-expanded", "true");
+    // assert that the listbox is not rendered
+    expect(wrapper.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("should open dropdown when hideEmptyContent is false", async () => {
+    const wrapper = render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="hide-empty-content-false-test"
+        hideEmptyContent={false}
+        label="Favorite Animal"
+      >
+        {[]}
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("hide-empty-content-false-test");
+
+    // open the select dropdown
+    await user.click(select);
+
+    // assert that the select is open
+    expect(select).toHaveAttribute("aria-expanded", "true");
+
+    const listbox = wrapper.getByRole("listbox");
+
+    // assert that the listbox is rendered
+    expect(listbox).toBeInTheDocument();
+    // assert that the listbox items are not rendered
+    expect(wrapper.queryByRole("option")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select virtualization tests", () => {
+  const user = userEvent.setup();
+
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, "scrollTo", {
+      configurable: true,
+      value: jest.fn(),
+    });
+  });
+
+  it("should work with onChange (< virtualization threshold items)", async () => {
+    const onChange = jest.fn();
+
+    let options = Array.from({length: 10}, (_, i) => `option ${i}`);
+
+    const wrapper = render(
+      <div style={{height: "200px", overflow: "auto"}}>
+        <Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
+          {options.map((o) => (
+            <SelectItem key={o} value={o}>
+              {o}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>,
+    );
+
+    const listbox = wrapper.getByRole("listbox");
+
+    expect(listbox).toBeTruthy();
+
+    const listboxItems = wrapper.getAllByRole("option");
+
+    expect(listboxItems.length).toBe(10);
+
+    await user.click(listboxItems[1]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should work with onChange (at virtualization threshold items)", async () => {
+    const onChange = jest.fn();
+
+    let options = Array.from({length: 50}, (_, i) => `option ${i}`);
+
+    const wrapper = render(
+      <div style={{height: "200px", overflow: "auto"}}>
+        <Select isOpen aria-label="Favorite Animal" label="Favorite Animal" onChange={onChange}>
+          {options.map((o) => (
+            <SelectItem key={o} value={o}>
+              {o}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>,
+    );
+
+    const listbox = wrapper.getByRole("listbox");
+
+    expect(listbox).toBeTruthy();
+
+    const listboxItems = wrapper.getAllByRole("option");
+
+    expect(listboxItems.length).toBe(50);
+
+    await user.click(listboxItems[1]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should work with onChange (> virtualization threshold items)", async () => {
+    const onChange = jest.fn();
+
+    let options = Array.from({length: 100}, (_, i) => `option ${i}`);
+
+    /* Mock dimensions */
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {configurable: true, value: 200});
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {configurable: true, value: 2000});
+    Object.defineProperty(HTMLElement.prototype, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({
+        top: 0,
+        bottom: 200,
+        height: 200,
+        left: 0,
+        right: 100,
+        width: 100,
+      }),
+    });
+
+    const wrapper = render(
+      <div style={{height: "200px", overflow: "auto"}}>
+        <Select
+          isOpen
+          isVirtualized
+          aria-label="Favorite Animal"
+          itemHeight={20}
+          label="Favorite Animal"
+          maxListboxHeight={200}
+          onChange={onChange}
+        >
+          {options.map((o) => (
+            <SelectItem key={o} value={o}>
+              {o}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>,
+    );
+
+    const listbox = wrapper.getByRole("listbox");
+
+    expect(listbox).toBeTruthy();
+
+    /* Scroll to ensure visibility of the target item */
+    const scrollableContainer = wrapper.container.querySelector("div");
+
+    act(() => {
+      scrollableContainer?.scrollTo({top: 60});
+    });
+
+    await waitFor(() => {
+      const visibleItems = wrapper.getAllByRole("option");
+
+      expect(visibleItems.length).toBeGreaterThan(0);
+      /* Virtualized list will have listitems less than 100 */
+      expect(visibleItems.length).toBeLessThan(100);
+    });
+
+    const visibleItems = wrapper.getAllByRole("option");
+
+    await user.click(visibleItems[3]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should work with onChange (large number of items)", async () => {
+    const onChange = jest.fn();
+
+    let options = Array.from({length: 300}, (_, i) => `option ${i}`);
+
+    /* Mock dimensions */
+    Object.defineProperty(HTMLElement.prototype, "offsetHeight", {configurable: true, value: 200});
+    Object.defineProperty(HTMLElement.prototype, "scrollHeight", {configurable: true, value: 6000});
+
+    const wrapper = render(
+      <div style={{height: "200px", overflow: "auto"}}>
+        <Select
+          isOpen
+          isVirtualized
+          aria-label="Favorite Animal"
+          itemHeight={20}
+          label="Favorite Animal"
+          maxListboxHeight={200}
+          onChange={onChange}
+        >
+          {options.map((o) => (
+            <SelectItem key={o} value={o}>
+              {o}
+            </SelectItem>
+          ))}
+        </Select>
+      </div>,
+    );
+
+    const listbox = wrapper.getByRole("listbox");
 
-      expect(onChange).toBeCalledTimes(1);
+    expect(listbox).toBeTruthy();
+
+    /* Simulate scrolling to make the target item visible */
+    const scrollableContainer = wrapper.container.querySelector("div");
+
+    act(() => {
+      scrollableContainer?.scrollTo({top: 1200});
     });
+
+    await waitFor(() => {
+      const visibleItems = wrapper.getAllByRole("option");
+
+      expect(visibleItems.length).toBeGreaterThan(0);
+      /* Virtualized list will have listitems less than 300 */
+      expect(visibleItems.length).toBeLessThan(300);
+    });
+
+    const visibleItems = wrapper.getAllByRole("option");
+
+    await user.click(visibleItems[3]);
+    expect(onChange).toHaveBeenCalledTimes(1);
   });
 });
 
@@ -751,11 +1099,21 @@ describe("Select with React Hook Form", () => {
 
     wrapper = render(
       <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
-        <Select data-testid="select-1" items={itemsData} {...register("withDefaultValue")}>
+        <Select
+          data-testid="select-1"
+          items={itemsData}
+          {...register("withDefaultValue")}
+          aria-label="select-1"
+        >
           {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
 
-        <Select data-testid="select-2" items={itemsData} {...register("withoutDefaultValue")}>
+        <Select
+          data-testid="select-2"
+          items={itemsData}
+          {...register("withoutDefaultValue")}
+          aria-label="select-2"
+        >
           {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
 
@@ -763,6 +1121,7 @@ describe("Select with React Hook Form", () => {
           data-testid="select-3"
           items={itemsData}
           {...register("requiredField", {required: true})}
+          aria-label="select-3"
         >
           {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
@@ -812,3 +1171,126 @@ describe("Select with React Hook Form", () => {
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("validation", () => {
+  let user;
+
+  beforeAll(() => {
+    user = userEvent.setup();
+  });
+
+  describe("validationBehavior=aria", () => {
+    it("supports isRequired", async () => {
+      function FormRender() {
+        const [serverErrors, setServerErrors] = React.useState({});
+
+        const onSubmit = (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.target as HTMLFormElement);
+          const value = formData.get("animal");
+
+          if (!value || (value !== "cat" && value !== "dog")) {
+            setServerErrors({
+              animal: "Please select a cat or dog",
+            });
+          } else {
+            setServerErrors({});
+          }
+        };
+
+        return (
+          <Form data-testid="form" validationErrors={serverErrors} onSubmit={onSubmit}>
+            <Select
+              isRequired
+              aria-label="Favorite Animal"
+              data-testid="select"
+              label="Favorite Animal"
+              name="animal"
+            >
+              <SelectItem key="cat">Cat</SelectItem>
+              <SelectItem key="dog">Dog</SelectItem>
+              <SelectItem key="penguin">Penguin</SelectItem>
+              <SelectItem key="zebra">Zebra</SelectItem>
+              <SelectItem key="shark">Shark</SelectItem>
+            </Select>
+            <button data-testid="button" type="submit">
+              Submit
+            </button>
+          </Form>
+        );
+      }
+
+      const {getByTestId} = render(<FormRender />);
+
+      const select = getByTestId("select");
+      const input = document.querySelector("input");
+
+      expect(select).not.toHaveAttribute("aria-describedby");
+      const button = getByTestId("button");
+
+      await user.click(button);
+
+      expect(select).toHaveAttribute("aria-describedby");
+      expect(input).toHaveAttribute("aria-required");
+
+      expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "Please select a cat or dog",
+      );
+
+      await user.click(select);
+      let listboxItems = document.querySelectorAll("[role='option']");
+
+      await user.click(listboxItems[0]);
+
+      await user.click(button);
+
+      expect(select).not.toHaveAttribute("aria-describedby");
+    });
+
+    it("supports validate function", async () => {
+      const {getByTestId} = render(
+        <Form data-testid="form">
+          <Select
+            aria-label="Favorite Animal"
+            data-testid="select"
+            defaultSelectedKeys={["penguin"]}
+            label="Favorite Animal"
+            validate={(v) => (v.includes("penguin") ? "Invalid value" : null)}
+            validationBehavior="aria"
+          >
+            <SelectItem key="penguin">Penguin</SelectItem>
+            <SelectItem key="zebra">Zebra</SelectItem>
+            <SelectItem key="shark">Shark</SelectItem>
+          </Select>
+          <button data-testid="button" type="submit">
+            Submit
+          </button>
+        </Form>,
+      );
+
+      const select = getByTestId("select");
+      const input = document.querySelector("input");
+      const button = getByTestId("button");
+
+      expect(select).toHaveAttribute("aria-describedby");
+      expect(input).toHaveAttribute("aria-invalid", "true");
+
+      expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "Invalid value",
+      );
+
+      expect(input?.validity.valid).toBe(true);
+
+      await user.click(select);
+
+      let listboxItems = document.querySelectorAll("[role='option']");
+
+      await user.click(listboxItems[1]); // Select "Zebra"
+
+      await user.click(button);
+
+      expect(select).not.toHaveAttribute("aria-describedby");
+      expect(select).not.toHaveAttribute("aria-invalid");
+    });
+  });
+});
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 7c2bf17fa8..9a3406cfe9 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/select",
-  "version": "2.2.7",
+  "version": "2.4.1",
   "description": "A select displays a collapsible list of options and allows a user to select one of them.",
   "keywords": [
     "select"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "framer-motion": ">=10.17.0",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "@nextui-org/system": ">=2.3.0-beta.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/aria-utils": "workspace:*",
@@ -52,12 +52,14 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/use-aria-multiselect": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/form": "3.0.5",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-types/shared": "3.23.1"
+    "@nextui-org/form": "workspace:*",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/form": "3.0.10",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-types/shared": "3.25.0",
+    "@tanstack/react-virtual": "3.10.9"
   },
   "devDependencies": {
     "@nextui-org/avatar": "workspace:*",
@@ -68,10 +70,10 @@
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "@react-aria/i18n": "3.11.1",
-    "@react-stately/data": "3.11.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-stately/data": "3.11.7",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
+    "framer-motion": "11.9.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.51.3"
diff --git a/packages/components/select/src/hidden-select.tsx b/packages/components/select/src/hidden-select.tsx
index d7c74ef43a..dd99ff5646 100644
--- a/packages/components/select/src/hidden-select.tsx
+++ b/packages/components/select/src/hidden-select.tsx
@@ -62,6 +62,7 @@ export function useHiddenSelect<T>(
   triggerRef: RefObject<FocusableElement>,
 ) {
   let data = selectData.get(state) || {};
+
   let {
     autoComplete,
     name = data.name,
@@ -69,7 +70,7 @@ export function useHiddenSelect<T>(
     selectionMode,
     onChange,
   } = props;
-  let {validationBehavior, isRequired} = data;
+  let {validationBehavior, isRequired, isInvalid} = data;
   let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
@@ -83,6 +84,14 @@ export function useHiddenSelect<T>(
     props.selectRef,
   );
 
+  const commonProps = {
+    autoComplete,
+    disabled: isDisabled,
+    "aria-invalid": isInvalid || undefined,
+    "aria-required": (isRequired && validationBehavior === "aria") || undefined,
+    required: isRequired && validationBehavior === "native",
+  };
+
   return {
     containerProps: {
       ...visuallyHiddenProps,
@@ -90,25 +99,18 @@ export function useHiddenSelect<T>(
       ["data-a11y-ignore"]: "aria-hidden-focus",
     },
     inputProps: {
+      ...commonProps,
       type: "text",
       tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
-      autoComplete,
       value: [...state.selectedKeys].join(",") ?? "",
-      required: isRequired,
       style: {fontSize: 16},
       onFocus: () => triggerRef.current?.focus(),
-      disabled: isDisabled,
-      // The onChange is handled by the `select` element. This avoids the `form` with input `value`
-      // and no `onChange` warning.
-      onChange: () => {},
+      onChange: () => {}, // The onChange is handled by the `select` element
     },
     selectProps: {
+      ...commonProps,
       name,
       tabIndex: -1,
-      autoComplete,
-      // TODO: Address validation for cases where an option is selected and then deselected.
-      // required: validationBehavior === "native" && isRequired,
-      disabled: isDisabled,
       size: state.collection.size,
       value:
         selectionMode === "multiple"
diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 83aa324c9c..38eb938b75 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -1,10 +1,13 @@
+import type {ForwardedRef, ReactElement} from "react";
+
 import {Listbox} from "@nextui-org/listbox";
 import {FreeSoloPopover} from "@nextui-org/popover";
 import {ChevronDownIcon} from "@nextui-org/shared-icons";
 import {Spinner} from "@nextui-org/spinner";
+import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {ScrollShadow} from "@nextui-org/scroll-shadow";
-import {cloneElement, ForwardedRef, ReactElement, Ref, useMemo} from "react";
+import {cloneElement} from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
 import {AnimatePresence} from "framer-motion";
 
@@ -13,7 +16,12 @@ import {UseSelectProps, useSelect} from "./use-select";
 
 interface Props<T> extends UseSelectProps<T> {}
 
-function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectElement>) {
+export type SelectProps<T extends object = object> = Props<T>;
+
+const Select = forwardRef(function Select<T extends object>(
+  props: SelectProps<T>,
+  ref: ForwardedRef<HTMLSelectElement>,
+) {
   const {
     Component,
     state,
@@ -29,7 +37,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     endContent,
     placeholder,
     renderValue,
-    isOutsideLeft,
+    shouldLabelBeOutside,
     disableAnimation,
     getBaseProps,
     getLabelProps,
@@ -53,15 +61,18 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   const clonedIcon = cloneElement(selectorIcon as ReactElement, getSelectorIconProps());
 
   const helperWrapper = useMemo(() => {
-    if (!hasHelper) return null;
+    const shouldShowError = isInvalid && errorMessage;
+    const hasContent = shouldShowError || description;
+
+    if (!hasHelper || !hasContent) return null;
 
     return (
       <div {...getHelperWrapperProps()}>
-        {isInvalid && errorMessage ? (
+        {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
-        ) : description ? (
+        ) : (
           <div {...getDescriptionProps()}>{description}</div>
-        ) : null}
+        )}
       </div>
     );
   }, [
@@ -117,10 +128,10 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   return (
     <div {...getBaseProps()}>
       <HiddenSelect {...getHiddenSelectProps()} />
-      {isOutsideLeft ? labelContent : null}
+      {shouldLabelBeOutside ? labelContent : null}
       <div {...getMainWrapperProps()}>
         <Component {...getTriggerProps()}>
-          {!isOutsideLeft ? labelContent : null}
+          {!shouldLabelBeOutside ? labelContent : null}
           <div {...getInnerWrapperProps()}>
             {startContent}
             <span {...getValueProps()}>{renderSelectedItem}</span>
@@ -136,11 +147,6 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
       {disableAnimation ? popoverContent : <AnimatePresence>{popoverContent}</AnimatePresence>}
     </div>
   );
-}
-
-export type SelectProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Select) as <T extends object>(props: SelectProps<T>) => ReactElement;
+}) as <T extends object>(props: SelectProps<T>) => ReactElement;
 
-Select.displayName = "NextUI.Select";
+export default Select;
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index 0c8d31733b..f4c01d92f6 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -29,7 +29,8 @@ import {
 import {SpinnerProps} from "@nextui-org/spinner";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
 import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
-import {CollectionChildren} from "@react-types/shared";
+import {CollectionChildren, ValidationError} from "@react-types/shared";
+import {FormContext, useSlottedContext} from "@nextui-org/form";
 
 export type SelectedItemProps<T = object> = {
   /** A unique key for the item. */
@@ -133,11 +134,19 @@ interface Props<T> extends Omit<HTMLNextUIProps<"select">, keyof SelectVariantPr
    * Handler that is called when the selection changes.
    */
   onSelectionChange?: (keys: SharedSelection) => void;
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: (value: string | string[]) => ValidationError | true | null | undefined;
 }
 
 interface SelectData {
   isDisabled?: boolean;
   isRequired?: boolean;
+  isInvalid?: boolean;
   name?: string;
   validationBehavior?: "aria" | "native";
 }
@@ -149,10 +158,33 @@ export type UseSelectProps<T> = Omit<
   keyof Omit<MultiSelectProps<T>, "onSelectionChange">
 > &
   Omit<MultiSelectProps<T>, "onSelectionChange"> &
-  SelectVariantProps;
+  SelectVariantProps & {
+    /**
+     * The height of each item in the listbox.
+     * This is required for virtualized listboxes to calculate the height of each item.
+     */
+    itemHeight?: number;
+    /**
+     * The max height of the listbox (which will be rendered in a popover).
+     * This is required for virtualized listboxes to set the maximum height of the listbox.
+     */
+    maxListboxHeight?: number;
+    /**
+     * Whether to enable virtualization of the listbox items.
+     * By default, virtualization is automatically enabled when the number of items is greater than 50.
+     * @default undefined
+     */
+    isVirtualized?: boolean;
+    /**
+     * Whether the listbox will be prevented from opening when there are no items.
+     * @default false
+     */
+    hideEmptyContent?: boolean;
+  };
 
 export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const globalContext = useProviderContext();
+  const {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
 
   const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
 
@@ -175,6 +207,9 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     renderValue,
     onSelectionChange,
     placeholder,
+    isVirtualized,
+    itemHeight = 32,
+    maxListboxHeight = 256,
     children,
     disallowEmptySelection = false,
     selectionMode = "single",
@@ -189,6 +224,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     onClose,
     className,
     classNames,
+    validationBehavior = formValidationBehavior ?? globalContext?.validationBehavior ?? "native",
+    hideEmptyContent = false,
     ...otherProps
   } = props;
 
@@ -238,10 +275,13 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     isOpen,
     selectionMode,
     disallowEmptySelection,
+    validationBehavior,
     children: children as CollectionChildren<T>,
     isRequired: originalProps.isRequired,
     isDisabled: originalProps.isDisabled,
+    isInvalid: originalProps.isInvalid,
     defaultOpen,
+    hideEmptyContent,
     onOpenChange: (open) => {
       onOpenChange?.(open);
       if (!open) {
@@ -314,7 +354,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const hasPlaceholder = !!placeholder;
   const shouldLabelBeOutside =
     labelPlacement === "outside-left" ||
-    (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
+    (labelPlacement === "outside" &&
+      (!(hasPlaceholder || !!description) || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
   const isOutsideLeft = labelPlacement === "outside-left";
 
@@ -491,15 +532,33 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       className: slots.listboxWrapper({
         class: clsx(classNames?.listboxWrapper, props?.className),
       }),
+      style: {
+        maxHeight: maxListboxHeight ?? 256,
+        ...props.style,
+      },
       ...mergeProps(slotsProps.scrollShadowProps, props),
     }),
-    [slots.listboxWrapper, classNames?.listboxWrapper, slotsProps.scrollShadowProps],
+    [
+      slots.listboxWrapper,
+      classNames?.listboxWrapper,
+      slotsProps.scrollShadowProps,
+      maxListboxHeight,
+    ],
   );
 
   const getListboxProps = (props: any = {}) => {
+    const shouldVirtualize = isVirtualized ?? state.collection.size > 50;
+
     return {
       state,
       ref: listBoxRef,
+      isVirtualized: shouldVirtualize,
+      virtualization: shouldVirtualize
+        ? {
+            maxListboxHeight,
+            itemHeight,
+          }
+        : undefined,
       "data-slot": "listbox",
       className: slots.listbox({
         class: clsx(classNames?.listbox, props?.className),
@@ -611,7 +670,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       return {
         ...props,
         ...errorMessageProps,
-        "data-slot": "errorMessage",
+        "data-slot": "error-message",
         className: slots.errorMessage({class: clsx(classNames?.errorMessage, props?.className)}),
       };
     },
@@ -639,8 +698,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     isDisabled: originalProps?.isDisabled,
     isRequired: originalProps?.isRequired,
     name: originalProps?.name,
-    // TODO: Future enhancement to support "aria" validation behavior.
-    validationBehavior: "native",
+    isInvalid,
+    validationBehavior,
   });
 
   return {
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 0a58ad10a3..34136d2bb3 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -19,6 +19,7 @@ import {
   Animal,
   User,
 } from "@nextui-org/stories-utils";
+import {Form} from "@nextui-org/form";
 
 import {Select, SelectedItems, SelectItem, SelectProps, SelectSection} from "../src";
 
@@ -277,6 +278,100 @@ const FormTemplate = ({color, variant, ...args}: SelectProps) => {
   );
 };
 
+const ServerValidationTemplate = (args: SelectProps) => {
+  const [submittedData, setSubmittedData] = React.useState<{animal: string} | null>(null);
+  const [serverErrors, setServerErrors] = React.useState({});
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const value = formData.get("animal");
+
+    if (!value) {
+      setServerErrors({
+        animal: "Please select a valid value",
+      });
+
+      return;
+    }
+
+    if (!value || (value !== "cat" && value !== "dog")) {
+      setServerErrors({
+        animal: "Please select a cat or dog",
+      });
+    } else {
+      setServerErrors({});
+      setSubmittedData({animal: value});
+    }
+  };
+
+  return (
+    <Form
+      className="w-full flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <Select isRequired {...args} className="max-w-xs" label="Favorite Animal" name="animal">
+        {items}
+      </Select>
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+      {submittedData && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submittedData)}</code>
+        </div>
+      )}
+    </Form>
+  );
+};
+
+const ServerValidationTemplateWithMultiple = (args: SelectProps) => {
+  const [submittedData, setSubmittedData] = React.useState<{animals: string[]} | null>(null);
+  const [serverErrors, setServerErrors] = React.useState({});
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.target as HTMLFormElement);
+    const values = formData.getAll("animals");
+
+    if (!values.length || !values.every((v) => v === "cat" || v === "dog")) {
+      setServerErrors({
+        animals: "Please select only cats and/or dogs",
+      });
+    } else {
+      setServerErrors({});
+      setSubmittedData({animals: values as string[]});
+    }
+  };
+
+  return (
+    <Form
+      className="w-full flex flex-col items-start gap-2"
+      validationErrors={serverErrors}
+      onSubmit={onSubmit}
+    >
+      <Select
+        {...args}
+        className="max-w-xs"
+        label="Favorite Animals"
+        name="animals"
+        selectionMode="multiple"
+      >
+        {items}
+      </Select>
+      <button className={button({color: "primary"})} type="submit">
+        Submit
+      </button>
+      {submittedData && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submittedData)}</code>
+        </div>
+      )}
+    </Form>
+  );
+};
+
 const MirrorTemplate = ({color, variant, ...args}: SelectProps) => (
   <div className="w-full max-w-xl flex flex-row gap-4">
     <Select className="max-w-xs" color={color} label="Select an animal" variant={variant} {...args}>
@@ -357,6 +452,43 @@ const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
         </Select>
       </div>
     </div>
+    <div className="w-full max-w-2xl flex flex-col gap-3">
+      <h3>With placeholder and description</h3>
+      <div className="w-full flex flex-row items-end gap-4">
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside"
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside-left"
+        >
+          {items}
+        </Select>
+      </div>
+    </div>
   </div>
 );
 
@@ -374,6 +506,31 @@ const StartContentTemplate = ({color, variant, ...args}: SelectProps) => (
   </Select>
 );
 
+const EmptyTemplate = ({color, variant, ...args}: SelectProps) => (
+  <div className="w-full justify-center flex gap-2">
+    <Select
+      hideEmptyContent
+      className="max-w-xs"
+      color={color}
+      label="Hide empty content"
+      variant={variant}
+      {...args}
+    >
+      {[]}
+    </Select>
+    <Select
+      className="max-w-xs"
+      color={color}
+      hideEmptyContent={false}
+      label="Show empty content"
+      variant={variant}
+      {...args}
+    >
+      {[]}
+    </Select>
+  </div>
+);
+
 const CustomItemsTemplate = ({color, variant, ...args}: SelectProps<User>) => (
   <div className="w-full justify-center flex gap-2">
     <Select
@@ -692,6 +849,166 @@ const ScrollableContainerTemplate = (args: SelectProps) => {
   );
 };
 
+interface LargeDatasetSchema {
+  label: string;
+  value: string;
+  description: string;
+}
+
+function generateLargeDataset(n: number): LargeDatasetSchema[] {
+  const dataset: LargeDatasetSchema[] = [];
+  const items = [
+    "Cat",
+    "Dog",
+    "Elephant",
+    "Lion",
+    "Tiger",
+    "Giraffe",
+    "Dolphin",
+    "Penguin",
+    "Zebra",
+    "Shark",
+    "Whale",
+    "Otter",
+    "Crocodile",
+  ];
+
+  for (let i = 0; i < n; i++) {
+    const item = items[i % items.length];
+
+    dataset.push({
+      label: `${item}${i}`,
+      value: `${item.toLowerCase()}${i}`,
+      description: "Sample description",
+    });
+  }
+
+  return dataset;
+}
+
+const LargeDatasetTemplate = (args: SelectProps & {numItems: number}) => {
+  const largeDataset = generateLargeDataset(args.numItems);
+
+  return (
+    <div className="flex w-full max-w-full py-20 xl:px-32 lg:px-20 px-20">
+      <Select label={`Select from ${args.numItems} items`} {...args}>
+        {largeDataset.map((item, index) => (
+          <SelectItem key={index} value={item.value}>
+            {item.label}
+          </SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
+const ValidationBehaviorAriaTemplate = (args: SelectProps) => {
+  // Custom validation example
+  const CustomValidationExample = () => {
+    return (
+      <Select
+        {...args}
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        validate={(value) => {
+          if (typeof value === "string" && value === "penguin") {
+            return "Penguins are not allowed";
+          }
+
+          return null;
+        }}
+        validationBehavior="aria"
+      >
+        <SelectItem key="penguin">Penguin</SelectItem>
+        <SelectItem key="zebra">Zebra</SelectItem>
+        <SelectItem key="shark">Shark</SelectItem>
+      </Select>
+    );
+  };
+
+  //Custom validation example multiple
+  const CustomValidationExampleMultiple = () => {
+    return (
+      <Select
+        {...args}
+        className="max-w-xs"
+        label="Favorite Animal"
+        placeholder="Select an animal"
+        selectionMode="multiple"
+        validate={(value) => {
+          if (Array.isArray(value) && value.includes("penguin")) {
+            return "Penguins are not allowed";
+          }
+
+          return null;
+        }}
+        validationBehavior="aria"
+      >
+        <SelectItem key="penguin">Penguin</SelectItem>
+        <SelectItem key="zebra">Zebra</SelectItem>
+        <SelectItem key="shark">Shark</SelectItem>
+      </Select>
+    );
+  };
+
+  // Server validation example
+  const ServerValidationExample = () => {
+    const [serverErrors, setServerErrors] = React.useState({});
+
+    const onSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      const formData = new FormData(e.target as HTMLFormElement);
+      const value = formData.get("animal");
+
+      if (value === "penguin") {
+        setServerErrors({
+          animal: "Server says: No penguins allowed!",
+        });
+      } else {
+        setServerErrors({});
+      }
+    };
+
+    return (
+      <Form
+        className="w-full flex flex-col items-start gap-2"
+        validationErrors={serverErrors}
+        onSubmit={onSubmit}
+      >
+        <Select className="max-w-xs" label="Select Animal" name="animal" validationBehavior="aria">
+          <SelectItem key="penguin">Penguin</SelectItem>
+          <SelectItem key="zebra">Zebra</SelectItem>
+          <SelectItem key="shark">Shark</SelectItem>
+        </Select>
+        <button className={button({color: "primary"})} type="submit">
+          Validate
+        </button>
+      </Form>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500">Custom Validation</h3>
+        <p className="text-small text-default-400">Try selecting a penguin</p>
+        <CustomValidationExample />
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500">Custom Validation Multiple</h3>
+        <p className="text-small text-default-400">Try selecting a penguin</p>
+        <CustomValidationExampleMultiple />
+      </div>
+      <div className="flex flex-col gap-2">
+        <h3 className="text-default-500">Server Validation</h3>
+        <p className="text-small text-default-400">Select a penguin and click validate</p>
+        <ServerValidationExample />
+      </div>
+    </div>
+  );
+};
+
 export const Default = {
   render: MirrorTemplate,
 
@@ -774,6 +1091,14 @@ export const StartContent = {
   },
 };
 
+export const EmptyContent = {
+  render: EmptyTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithDescription = {
   render: MirrorTemplate,
 
@@ -904,6 +1229,22 @@ export const WithReactHookForm = {
   },
 };
 
+export const WithServerValidation = {
+  render: ServerValidationTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const WithServerValidationMultiple = {
+  render: ServerValidationTemplateWithMultiple,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithScrollableContainer = {
   render: ScrollableContainerTemplate,
 
@@ -1006,3 +1347,53 @@ export const CustomStyles = {
     },
   },
 };
+
+export const OneThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Select an item...",
+    numItems: 1000,
+    isVirtualized: true,
+  },
+};
+
+export const TenThousandList = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Select an item...",
+    numItems: 10000,
+    isVirtualized: true,
+  },
+};
+
+export const CustomMaxListboxHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Select an item...",
+    numItems: 1000,
+    isVirtualized: true,
+    maxListboxHeight: 400,
+  },
+};
+
+export const CustomItemHeight = {
+  render: LargeDatasetTemplate,
+  args: {
+    ...defaultProps,
+    placeholder: "Select an item...",
+    numItems: 1000,
+    isVirtualized: true,
+    maxListboxHeight: 400,
+    itemHeight: 40,
+  },
+};
+
+export const ValidationBehaviorAria = {
+  render: ValidationBehaviorAriaTemplate,
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/components/skeleton/CHANGELOG.md b/packages/components/skeleton/CHANGELOG.md
index 86b6cd1e85..877523a03e 100644
--- a/packages/components/skeleton/CHANGELOG.md
+++ b/packages/components/skeleton/CHANGELOG.md
@@ -1,5 +1,141 @@
 # @nextui-org/skeleton
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.32
 
 ### Patch Changes
diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
index 029a224cfd..f1e8cfcab7 100644
--- a/packages/components/skeleton/package.json
+++ b/packages/components/skeleton/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/skeleton",
-  "version": "2.0.32",
+  "version": "2.2.1",
   "description": "Skeleton is used to display the loading state of some component.",
   "keywords": [
     "skeleton"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/packages/components/slider/CHANGELOG.md b/packages/components/slider/CHANGELOG.md
index e8555a3ffc..408c514b68 100644
--- a/packages/components/slider/CHANGELOG.md
+++ b/packages/components/slider/CHANGELOG.md
@@ -1,5 +1,177 @@
 # @nextui-org/slider
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/tooltip@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/tooltip@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.3.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/tooltip@2.1.0-beta.11
+
+## 2.3.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/tooltip@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.3.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/tooltip@2.1.0-beta.9
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/tooltip@2.1.0-beta.8
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/tooltip@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/tooltip@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/tooltip@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/tooltip@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/tooltip@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/tooltip@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/tooltip@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.2.17
 
 ### Patch Changes
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index 0100c814c2..842f5f2552 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -1,10 +1,16 @@
 import * as React from "react";
 import {render, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Slider, SliderValue} from "../src";
 
 describe("Slider", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Slider />);
 
@@ -138,9 +144,7 @@ describe("Slider", () => {
     expect(output).toHaveTextContent("50");
 
     // change slider value
-    await act(async () => {
-      await userEvent.click(button);
-    });
+    await user.click(button);
 
     expect(slider).toHaveProperty("value", "55");
     expect(slider).toHaveAttribute("aria-valuetext", "55");
@@ -201,9 +205,7 @@ describe("Slider", () => {
     expect(rightSlider).toHaveAttribute("aria-valuetext", "20");
 
     // change slider value
-    await act(async () => {
-      await userEvent.click(button);
-    });
+    await user.click(button);
 
     expect(leftSlider).toHaveProperty("value", "15");
     expect(leftSlider).toHaveAttribute("aria-valuetext", "15");
@@ -318,10 +320,7 @@ describe("Slider", () => {
 
     expect(marks).toHaveLength(3);
 
-    await act(async () => {
-      await userEvent.click(marks[1]);
-    });
-
+    await user.click(marks[1]);
     const slider = getByRole("slider");
 
     expect(slider).toHaveProperty("value", "0.5");
@@ -358,10 +357,7 @@ describe("Slider", () => {
 
     expect(marks).toHaveLength(3);
 
-    await act(async () => {
-      await userEvent.click(marks[1]);
-    });
-
+    await user.click(marks[1]);
     const [leftSlider, rightSlider] = getAllByRole("slider");
 
     expect(leftSlider).toHaveProperty("value", "0.5");
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
index 82c4ae4273..2172d951bb 100644
--- a/packages/components/slider/package.json
+++ b/packages/components/slider/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/slider",
-  "version": "2.2.17",
+  "version": "2.4.1",
   "description": "A slider allows a user to select one or more values within a range.",
   "keywords": [
     "slider"
@@ -34,22 +34,22 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/tooltip": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/slider": "3.7.8",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/slider": "3.5.4"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/slider": "3.7.13",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/slider": "3.5.8"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/snippet/CHANGELOG.md b/packages/components/snippet/CHANGELOG.md
index 578e8e8aba..2ec88bee69 100644
--- a/packages/components/snippet/CHANGELOG.md
+++ b/packages/components/snippet/CHANGELOG.md
@@ -1,5 +1,237 @@
 # @nextui-org/snippet
 
+## 2.2.2
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/button@2.2.1
+  - @nextui-org/tooltip@2.2.1
+  - @nextui-org/use-clipboard@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.1
+
+### Patch Changes
+
+- [#4235](https://github.com/nextui-org/nextui/pull/4235) [`71e2d8c`](https://github.com/nextui-org/nextui/commit/71e2d8c6014c821c0441c6a68924043a7a491e5b) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix release
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/tooltip@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/use-clipboard@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/tooltip@2.1.0-beta.11
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [#4161](https://github.com/nextui-org/nextui/pull/4161) [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083) Thanks [@wingkwong](https://github.com/wingkwong)! - fix missing peer / dev dependency for framer-motion
+
+- Updated dependencies [[`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083)]:
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/tooltip@2.1.0-beta.11
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/tooltip@2.1.0-beta.10
+  - @nextui-org/use-clipboard@2.0.8-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/tooltip@2.1.0-beta.9
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/tooltip@2.1.0-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/tooltip@2.1.0-beta.7
+  - @nextui-org/use-clipboard@2.0.8-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/tooltip@2.1.0-beta.6
+  - @nextui-org/use-clipboard@2.0.8-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/tooltip@2.1.0-beta.5
+  - @nextui-org/use-clipboard@2.0.8-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/tooltip@2.1.0-beta.3
+  - @nextui-org/use-clipboard@2.0.8-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/tooltip@2.1.0-beta.2
+  - @nextui-org/use-clipboard@2.0.8-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/tooltip@2.1.0-beta.1
+  - @nextui-org/use-clipboard@2.0.8-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/tooltip@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.43
 
 ### Patch Changes
diff --git a/packages/components/snippet/package.json b/packages/components/snippet/package.json
index 3c1c876133..1b5b50ad3b 100644
--- a/packages/components/snippet/package.json
+++ b/packages/components/snippet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/snippet",
-  "version": "2.0.43",
+  "version": "2.2.2",
   "description": "Display a snippet of copyable code for the command line.",
   "keywords": [
     "snippet"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/button": "workspace:*",
@@ -47,15 +47,16 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-clipboard": "workspace:*",
     "@nextui-org/tooltip": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.24.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.26.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
+    "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/components/snippet/stories/snippet.stories.tsx b/packages/components/snippet/stories/snippet.stories.tsx
index 00c5f9b0fc..7f8b1011cf 100644
--- a/packages/components/snippet/stories/snippet.stories.tsx
+++ b/packages/components/snippet/stories/snippet.stories.tsx
@@ -92,9 +92,32 @@ export const MultiLine = {
   args: {
     ...defaultProps,
     children: [
-      "npm install @nextui-org/react",
-      "yarn add @nextui-org/react",
-      "pnpm add @nextui-org/react",
+      // "npm install @nextui-org/react",
+      // "yarn add @nextui-org/react",
+      // "pnpm add @nextui-org/react",
+      `
+{
+  "name": "Next.js PWA",
+  "short_name": "NextPWA",
+  "description": "A Progressive Web App built with Next.js and React",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
+`,
     ],
   },
 };
diff --git a/packages/components/spacer/CHANGELOG.md b/packages/components/spacer/CHANGELOG.md
index e630be82bf..1b0e90b2de 100644
--- a/packages/components/spacer/CHANGELOG.md
+++ b/packages/components/spacer/CHANGELOG.md
@@ -1,5 +1,158 @@
 # @nextui-org/spacer
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.33
 
 ### Patch Changes
diff --git a/packages/components/spacer/package.json b/packages/components/spacer/package.json
index 3ed63a38b7..9a7714bf00 100644
--- a/packages/components/spacer/package.json
+++ b/packages/components/spacer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spacer",
-  "version": "2.0.33",
+  "version": "2.2.1",
   "description": "A flexible spacer component designed to create consistent spacing and maintain alignment in your layout.",
   "keywords": [
     "spacer"
@@ -34,9 +34,9 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/system-rsc": "workspace:*",
diff --git a/packages/components/spinner/CHANGELOG.md b/packages/components/spinner/CHANGELOG.md
index 3148b7a0a3..8b1a5211f2 100644
--- a/packages/components/spinner/CHANGELOG.md
+++ b/packages/components/spinner/CHANGELOG.md
@@ -1,5 +1,158 @@
 # @nextui-org/spinner
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/spinner/package.json b/packages/components/spinner/package.json
index f91b73160f..659c1f96d1 100644
--- a/packages/components/spinner/package.json
+++ b/packages/components/spinner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/spinner",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "Loaders express an unspecified wait time or display the length of a process.",
   "keywords": [
     "loading",
@@ -36,9 +36,9 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/system-rsc": "workspace:*",
diff --git a/packages/components/switch/CHANGELOG.md b/packages/components/switch/CHANGELOG.md
index a0d1f37cf3..5f379a7f86 100644
--- a/packages/components/switch/CHANGELOG.md
+++ b/packages/components/switch/CHANGELOG.md
@@ -1,5 +1,159 @@
 # @nextui-org/switch
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4220](https://github.com/nextui-org/nextui/pull/4220) [`729ede8`](https://github.com/nextui-org/nextui/commit/729ede8de7f18c7b49fbdb736aac300b5b98f239) Thanks [@macci001](https://github.com/macci001)! - Fix #4210 radio, checkbox & switch interaction
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/switch/__tests__/switch.test.tsx b/packages/components/switch/__tests__/switch.test.tsx
index d9b76e9092..b8ae156774 100644
--- a/packages/components/switch/__tests__/switch.test.tsx
+++ b/packages/components/switch/__tests__/switch.test.tsx
@@ -1,11 +1,17 @@
 import * as React from "react";
-import {render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render, renderHook} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
 
 import {Switch} from "../src";
 
 describe("Switch", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(<Switch aria-label="switch" />);
 
@@ -19,35 +25,26 @@ describe("Switch", () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it("should check and uncheck", () => {
+  it("should check and uncheck", async () => {
     const {getByRole} = render(<Switch aria-label="switch" />);
 
     const checkbox = getByRole("switch");
 
     expect(checkbox).not.toBeChecked();
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).toBeChecked();
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).not.toBeChecked();
   });
 
-  it("should not check if disabled", () => {
+  it("should not check if disabled", async () => {
     const {getByRole} = render(<Switch isDisabled aria-label="switch" />);
 
     const checkbox = getByRole("switch");
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).not.toBeChecked();
   });
 
@@ -59,19 +56,16 @@ describe("Switch", () => {
     expect(checkbox).toBeChecked();
   });
 
-  it("should not check if readOnly", () => {
+  it("should not check if readOnly", async () => {
     const {getByRole} = render(<Switch isReadOnly aria-label="switch" />);
 
     const checkbox = getByRole("switch");
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).not.toBeChecked();
   });
 
-  it("should check and uncheck with controlled state", () => {
+  it("should check and uncheck with controlled state", async () => {
     const ControlledSwitch = ({onChange}: any) => {
       const [isSelected, setIsSelected] = React.useState(false);
 
@@ -95,10 +89,7 @@ describe("Switch", () => {
 
     expect(checkbox).not.toBeChecked();
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).toBeChecked();
 
     expect(onChange).toHaveBeenCalledWith(true);
@@ -121,7 +112,7 @@ describe("Switch", () => {
     expect(wrapper.getByTestId("thumb-icon")).toBeInTheDocument();
   });
 
-  it("should change the thumbIcon when clicked", () => {
+  it("should change the thumbIcon when clicked", async () => {
     const thumbIcon = jest.fn((props) => {
       const {isSelected} = props;
 
@@ -138,10 +129,7 @@ describe("Switch", () => {
 
     expect(checkbox).not.toBeChecked();
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).toBeChecked();
 
     expect(thumbIcon).toHaveBeenCalledWith(
@@ -154,10 +142,7 @@ describe("Switch", () => {
 
     expect(checkedthumbIcon).toBeInTheDocument();
 
-    act(() => {
-      checkbox.click();
-    });
-
+    await user.click(checkbox);
     expect(checkbox).not.toBeChecked();
 
     expect(thumbIcon).toHaveBeenCalledWith(
@@ -253,21 +238,16 @@ describe("Switch with React Hook Form", () => {
     const user = userEvent.setup();
 
     await user.click(submitButton);
-
     expect(onSubmit).toHaveBeenCalledTimes(0);
   });
 
   it("should submit form when required field is not empty", async () => {
-    act(() => {
-      switch3.click();
-    });
+    const user = userEvent.setup();
 
+    await switch3.click();
     expect(switch3.checked).toBe(true);
 
-    const user = userEvent.setup();
-
     await user.click(submitButton);
-
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/components/switch/package.json b/packages/components/switch/package.json
index 6c5ad5b3aa..797a4056ea 100644
--- a/packages/components/switch/package.json
+++ b/packages/components/switch/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/switch",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "A switch is similar to a checkbox, but represents on/off values as opposed to selection.",
   "keywords": [
     "switch"
@@ -34,22 +34,22 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/switch": "3.6.4",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/toggle": "3.7.4",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/switch": "3.6.9",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/toggle": "3.7.8",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/switch/src/use-switch.ts b/packages/components/switch/src/use-switch.ts
index 59ad998229..34adb52e54 100644
--- a/packages/components/switch/src/use-switch.ts
+++ b/packages/components/switch/src/use-switch.ts
@@ -2,11 +2,11 @@ import type {ToggleVariantProps, ToggleSlots, SlotsToClasses} from "@nextui-org/
 import type {AriaSwitchProps} from "@react-aria/switch";
 import type {HTMLNextUIProps, PropGetter} from "@nextui-org/system";
 
-import {ReactNode, Ref, useCallback, useId, useRef, useState} from "react";
+import {ReactNode, Ref, useCallback, useId, useRef} from "react";
 import {mapPropsVariants, useProviderContext} from "@nextui-org/system";
 import {mergeRefs} from "@nextui-org/react-utils";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
-import {useHover, usePress} from "@react-aria/interactions";
+import {useHover} from "@react-aria/interactions";
 import {toggle} from "@nextui-org/theme";
 import {chain, mergeProps} from "@react-aria/utils";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
@@ -155,36 +155,14 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
     state.setSelected(isInputRefChecked);
   }, [inputRef.current]);
 
-  const {
-    inputProps,
-    isPressed: isPressedKeyboard,
-    isReadOnly,
-  } = useReactAriaSwitch(ariaSwitchProps, state, inputRef);
+  const {inputProps, isPressed, isReadOnly} = useReactAriaSwitch(ariaSwitchProps, state, inputRef);
   const {focusProps, isFocused, isFocusVisible} = useFocusRing({autoFocus: inputProps.autoFocus});
   const {hoverProps, isHovered} = useHover({
     isDisabled: inputProps.disabled,
   });
 
   const isInteractionDisabled = ariaSwitchProps.isDisabled || isReadOnly;
-
-  // Handle press state for full label. Keyboard press state is returned by useSwitch
-  // since it is handled on the <input> element itself.
-  const [isPressed, setPressed] = useState(false);
-  const {pressProps} = usePress({
-    isDisabled: isInteractionDisabled,
-    onPressStart(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(true);
-      }
-    },
-    onPressEnd(e) {
-      if (e.pointerType !== "keyboard") {
-        setPressed(false);
-      }
-    },
-  });
-
-  const pressed = isInteractionDisabled ? false : isPressed || isPressedKeyboard;
+  const pressed = isInteractionDisabled ? false : isPressed;
 
   const isSelected = inputProps.checked;
   const isDisabled = inputProps.disabled;
@@ -202,7 +180,7 @@ export function useSwitch(originalProps: UseSwitchProps = {}) {
 
   const getBaseProps: PropGetter = (props) => {
     return {
-      ...mergeProps(hoverProps, pressProps, otherProps, props),
+      ...mergeProps(hoverProps, otherProps, props),
       ref: domRef,
       className: slots.base({class: clsx(baseStyles, props?.className)}),
       "data-disabled": dataAttr(isDisabled),
diff --git a/packages/components/table/CHANGELOG.md b/packages/components/table/CHANGELOG.md
index 0aa0628577..445192aa7e 100644
--- a/packages/components/table/CHANGELOG.md
+++ b/packages/components/table/CHANGELOG.md
@@ -1,5 +1,212 @@
 # @nextui-org/table
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/checkbox@2.3.1
+  - @nextui-org/spacer@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-icons@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`729ede8`](https://github.com/nextui-org/nextui/commit/729ede8de7f18c7b49fbdb736aac300b5b98f239), [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/checkbox@2.3.0
+  - @nextui-org/spacer@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-icons@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322)]:
+  - @nextui-org/shared-icons@2.0.10-beta.8
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/spacer@2.1.0-beta.9
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/spacer@2.1.0-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-icons@2.0.10-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - The `layoutNode` prop has been removed due to the update to react-aria.
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/checkbox@2.2.0-beta.8
+  - @nextui-org/spacer@2.1.0-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3735](https://github.com/nextui-org/nextui/pull/3735) [`ee4870dc1`](https://github.com/nextui-org/nextui/commit/ee4870dc14b2a449fd22be4489b88e44f030329a) Thanks [@macci001](https://github.com/macci001)! - Currently, whenever any arrow-key keypress is triggered it navigates the focus to other cell/row. This creates an issue when the table cell contains a component which requires this keys for specific purpose (eg. if a table cell contains input component, it might need arrow keys for editing. But it is not possible because whenever the keypress triggers navigation). The PR adds an `isKeyboardNavigationDisabled` prop to disable the navigation.
+
+- Updated dependencies []:
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/spacer@2.1.0-beta.7
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/spacer@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-icons@2.0.10-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/checkbox@2.2.0-beta.6
+  - @nextui-org/spacer@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-icons@2.0.10-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/checkbox@2.2.0-beta.5
+  - @nextui-org/spacer@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-icons@2.0.10-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/shared-icons@2.0.10-beta.3
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/spacer@2.1.0-beta.4
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/spacer@2.1.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/checkbox@2.2.0-beta.3
+  - @nextui-org/spacer@2.1.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-icons@2.0.10-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/checkbox@2.2.0-beta.2
+  - @nextui-org/spacer@2.1.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-icons@2.0.10-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/checkbox@2.2.0-beta.1
+  - @nextui-org/spacer@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-icons@2.0.10-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/checkbox@2.2.0-beta.0
+  - @nextui-org/spacer@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.40
 
 ### Patch Changes
diff --git a/packages/components/table/__tests__/table.test.tsx b/packages/components/table/__tests__/table.test.tsx
index e93b9be34a..ab5ae39353 100644
--- a/packages/components/table/__tests__/table.test.tsx
+++ b/packages/components/table/__tests__/table.test.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
-import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {act, render, fireEvent} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 
 import {Table, TableHeader, TableCell, TableColumn, TableBody, TableRow} from "../src";
+import {keyCodes} from "../../../utilities/test-utils/src";
 
 const columns = [
   {name: "Foo", key: "foo"},
@@ -16,6 +17,12 @@ let items = [
 ];
 
 describe("Table", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it("should render correctly", () => {
     const wrapper = render(
       <Table aria-label="Test example table">
@@ -95,6 +102,42 @@ describe("Table", () => {
     expect(wrapper.getAllByRole("gridcell")).toHaveLength(2);
   });
 
+  it("should disable key navigations when isKeyboardNavigationDisabled is enabled", async () => {
+    const wrapper = render(
+      <Table isKeyboardNavigationDisabled={true} selectionMode="single">
+        <TableHeader>
+          <TableColumn>Foo</TableColumn>
+          <TableColumn>Bar</TableColumn>
+          <TableColumn>Baz</TableColumn>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Foo 1</TableCell>
+            <TableCell>Bar 1</TableCell>
+            <TableCell>Baz 1</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Foo 2</TableCell>
+            <TableCell>Bar 2</TableCell>
+            <TableCell>Baz 2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    const row1 = wrapper.getAllByRole("row")[1];
+
+    // selecting the row1
+    await act(async () => {
+      await userEvent.click(row1);
+    });
+    expect(row1).toHaveFocus();
+
+    // triggering the arrow down on row1 should not shift the focus to row2
+    fireEvent.keyDown(row1, {key: "ArrowDown", keyCode: keyCodes.ArrowDown});
+    expect(row1).toHaveFocus();
+  });
+
   it("should render dynamic table", () => {
     const wrapper = render(
       <Table aria-label="Dynamic Table">
@@ -131,7 +174,7 @@ describe("Table", () => {
     expect(wrapper.getAllByRole("gridcell")).toHaveLength(4);
   });
 
-  it("should work with single selectionMode='single'", () => {
+  it("should work with single selectionMode='single'", async () => {
     const onRowAction = jest.fn();
 
     const wrapper = render(
@@ -163,14 +206,11 @@ describe("Table", () => {
     // get the first row
     const row1 = wrapper.getAllByRole("row")[1];
 
-    act(() => {
-      row1.click();
-    });
-
+    await user.click(row1);
     expect(onRowAction).toHaveBeenCalledTimes(1);
   });
 
-  it("should work with single selectionMode='multiple'", () => {
+  it("should work with single selectionMode='multiple'", async () => {
     const onRowAction = jest.fn();
 
     const wrapper = render(
@@ -207,15 +247,13 @@ describe("Table", () => {
     const row1 = wrapper.getAllByRole("row")[1];
     const row2 = wrapper.getAllByRole("row")[2];
 
-    act(() => {
-      row1.click();
-      row2.click();
-    });
+    await user.click(row1);
+    await user.click(row2);
 
     expect(onRowAction).toHaveBeenCalledTimes(2);
   });
 
-  it("should set the proper aria-sort on an ascending sorted column header", () => {
+  it("should set the proper aria-sort on an ascending sorted column header", async () => {
     const wrapper = render(
       <Table aria-label="Static Table">
         <TableHeader>
diff --git a/packages/components/table/package.json b/packages/components/table/package.json
index e31d994131..c2fab3062b 100644
--- a/packages/components/table/package.json
+++ b/packages/components/table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/table",
-  "version": "2.0.40",
+  "version": "2.2.1",
   "description": "Tables are used to display tabular data using rows and columns. ",
   "keywords": [
     "table"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/checkbox": "workspace:*",
@@ -45,15 +45,15 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/spacer": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/table": "3.14.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/table": "3.11.8",
-    "@react-stately/virtualizer": "3.7.1",
-    "@react-types/grid": "3.2.6",
-    "@react-types/table": "3.9.5"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/table": "3.15.5",
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/visually-hidden": "3.8.17",
+    "@react-stately/table": "3.12.3",
+    "@react-stately/virtualizer": "4.1.0",
+    "@react-types/grid": "3.2.9",
+    "@react-types/table": "3.10.2"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
@@ -65,7 +65,7 @@
     "@nextui-org/tooltip": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/user": "workspace:*",
-    "@react-stately/data": "3.11.4",
+    "@react-stately/data": "3.11.7",
     "clean-package": "2.2.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/packages/components/table/src/use-table.ts b/packages/components/table/src/use-table.ts
index 56f48b01d4..00a5847cf9 100644
--- a/packages/components/table/src/use-table.ts
+++ b/packages/components/table/src/use-table.ts
@@ -90,6 +90,11 @@ interface Props<T> extends HTMLNextUIProps<"table"> {
    * @default false
    */
   disableAnimation?: boolean;
+  /**
+   * Whether to disable the keyboard navigation functionality.
+   * @default false
+   */
+  isKeyboardNavigationDisabled?: boolean;
   /**
    * Props to be passed to the checkboxes.
    */
@@ -123,7 +128,7 @@ interface Props<T> extends HTMLNextUIProps<"table"> {
 
 export type UseTableProps<T = object> = Props<T> &
   TableStateProps<T> &
-  Omit<AriaTableProps<T>, "layout"> &
+  Omit<AriaTableProps, "layout"> &
   TableVariantProps;
 
 export type ValuesType<T = object> = {
@@ -156,9 +161,9 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
     children,
     className,
     classNames,
-    layoutNode,
     removeWrapper = false,
     disableAnimation = globalContext?.disableAnimation ?? false,
+    isKeyboardNavigationDisabled = false,
     selectionMode = "none",
     topContentPlacement = "inside",
     bottomContentPlacement = "inside",
@@ -186,9 +191,16 @@ export function useTable<T extends object>(originalProps: UseTableProps<T>) {
     showSelectionCheckboxes,
   });
 
+  if (isKeyboardNavigationDisabled && !state.isKeyboardNavigationDisabled) {
+    state.setKeyboardNavigationDisabled(true);
+  }
+
   const {collection} = state;
 
-  const {gridProps} = useReactAriaTable<T>({...originalProps, layout: layoutNode}, state, domRef);
+  // Exclude the layout prop because it has a name conflict and is deprecated in useTable.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {layout, ...otherOriginalProps} = originalProps;
+  const {gridProps} = useReactAriaTable<T>({...otherOriginalProps}, state, domRef);
 
   const isSelectable = selectionMode !== "none";
   const isMultiSelectable = selectionMode === "multiple";
diff --git a/packages/components/tabs/CHANGELOG.md b/packages/components/tabs/CHANGELOG.md
index 6324f58a0f..2114bb75f0 100644
--- a/packages/components/tabs/CHANGELOG.md
+++ b/packages/components/tabs/CHANGELOG.md
@@ -1,5 +1,217 @@
 # @nextui-org/tabs
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-is-mounted@2.1.1
+  - @nextui-org/use-update-effect@2.1.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4207](https://github.com/nextui-org/nextui/pull/4207) [`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix the "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?" on next.js by changing the way we manage collection base components refs
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/use-is-mounted@2.1.0
+  - @nextui-org/use-update-effect@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.5
+  - @nextui-org/use-update-effect@2.0.7-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.8
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.4
+  - @nextui-org/use-update-effect@2.0.7-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.3
+  - @nextui-org/use-update-effect@2.0.7-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.2
+  - @nextui-org/use-update-effect@2.0.7-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4039](https://github.com/nextui-org/nextui/pull/4039) [`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7) Thanks [@wingkwong](https://github.com/wingkwong)! - support inert value with boolean type for react 19 (#4038)
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.1
+  - @nextui-org/use-update-effect@2.0.7-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-is-mounted@2.0.7-beta.0
+  - @nextui-org/use-update-effect@2.0.7-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3974](https://github.com/nextui-org/nextui/pull/3974) [`7c2c9c487`](https://github.com/nextui-org/nextui/commit/7c2c9c48750c334c30bd3c5d06b27cff7f33fb54) Thanks [@winchesHe](https://github.com/winchesHe)! - Add tab ref
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- [#3978](https://github.com/nextui-org/nextui/pull/3978) [`9fe0aa79c`](https://github.com/nextui-org/nextui/commit/9fe0aa79c8d74a29418db6a235db179a5a9242bc) Thanks [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)! - revise the inert attribute in `TabPanel` (#3972)
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.37
 
 ### Patch Changes
diff --git a/packages/components/tabs/__tests__/tabs.test.tsx b/packages/components/tabs/__tests__/tabs.test.tsx
index f412236daa..34fe9b96a5 100644
--- a/packages/components/tabs/__tests__/tabs.test.tsx
+++ b/packages/components/tabs/__tests__/tabs.test.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import {act, render, fireEvent, within} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
 import {focus} from "@nextui-org/test-utils";
 
 import {Tabs, Tab, TabsProps} from "../src";
@@ -50,6 +50,11 @@ function getPlacementTemplate(position: TabsProps["placement"]) {
 const spy = jest.spyOn(console, "error").mockImplementation(() => {});
 
 describe("Tabs", () => {
+  let user: UserEvent;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -71,7 +76,7 @@ describe("Tabs", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("should render correctly (dynamic)", () => {
@@ -168,26 +173,17 @@ describe("Tabs", () => {
       focus(tab1);
     });
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab1).toHaveAttribute("aria-selected", "false");
     expect(tab2).toHaveAttribute("aria-selected", "true");
     expect(tab3).toHaveAttribute("aria-selected", "false");
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab1).toHaveAttribute("aria-selected", "false");
     expect(tab2).toHaveAttribute("aria-selected", "false");
     expect(tab3).toHaveAttribute("aria-selected", "true");
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab1).toHaveAttribute("aria-selected", "true");
     expect(tab2).toHaveAttribute("aria-selected", "false");
     expect(tab3).toHaveAttribute("aria-selected", "false");
@@ -220,22 +216,13 @@ describe("Tabs", () => {
       focus(tab1);
     });
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab2).toHaveFocus();
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab3).toHaveFocus();
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowLeft]");
-    });
-
+    await user.keyboard("[ArrowLeft]");
     expect(tab2).toHaveFocus();
 
     expect(tab1).toHaveAttribute("aria-selected", "true");
@@ -280,10 +267,7 @@ describe("Tabs", () => {
 
     const tab2 = wrapper.getByTestId("item2");
 
-    await act(async () => {
-      await userEvent.click(tab2);
-    });
-
+    await user.click(tab2);
     expect(tab2).toHaveAttribute("aria-selected", "false");
   });
 
@@ -396,18 +380,25 @@ describe("Tabs", () => {
       focus(tab1);
     });
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowRight]");
-    });
-
+    await user.keyboard("[ArrowRight]");
     expect(tab2).toHaveFocus();
 
-    await act(async () => {
-      await userEvent.keyboard("[ArrowLeft]");
-    });
-
+    await user.keyboard("[ArrowLeft]");
     expect(tab1).toHaveFocus();
 
     expect(input).toHaveValue("23");
   });
+
+  test("should forward ref to the tab item", () => {
+    const ref = React.createRef<HTMLButtonElement>();
+
+    render(
+      <Tabs aria-label="Tabs static test">
+        <Tab key="item1" tabRef={ref} title="Item 1">
+          <div>Content 1</div>
+        </Tab>
+      </Tabs>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
 });
diff --git a/packages/components/tabs/package.json b/packages/components/tabs/package.json
index 6e29b796ba..489ef528ac 100644
--- a/packages/components/tabs/package.json
+++ b/packages/components/tabs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tabs",
-  "version": "2.0.37",
+  "version": "2.2.1",
   "description": "Tabs organize content into multiple sections and allow users to navigate between them.",
   "keywords": [
     "tabs"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
@@ -47,19 +47,19 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-is-mounted": "workspace:*",
     "@nextui-org/use-update-effect": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/tabs": "3.9.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/tabs": "3.6.6",
-    "@react-types/shared": "3.23.1",
-    "@react-types/tabs": "3.3.7",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/tabs": "3.9.7",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/tabs": "3.6.10",
+    "@react-types/shared": "3.25.0",
+    "@react-types/tabs": "3.3.10",
     "scroll-into-view-if-needed": "3.0.10"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
     "@nextui-org/system": "workspace:*",
-    "framer-motion": "^11.0.22",
+    "framer-motion": "11.9.0",
     "react-lorem-component": "0.13.0",
     "@nextui-org/card": "workspace:*",
     "@nextui-org/input": "workspace:*",
diff --git a/packages/components/tabs/src/base/tab-item-base.ts b/packages/components/tabs/src/base/tab-item-base.ts
index f1bd1abb37..f92080f819 100644
--- a/packages/components/tabs/src/base/tab-item-base.ts
+++ b/packages/components/tabs/src/base/tab-item-base.ts
@@ -1,5 +1,5 @@
 import {BaseItem, ItemProps} from "@nextui-org/aria-utils";
-import {ReactNode} from "react";
+import {ReactNode, RefObject} from "react";
 interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "children" | "title"> {
   /**
    * The content of the component.
@@ -18,6 +18,8 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"button", T>, "chi
   isDisabled?: boolean;
   /** Whether the tab selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean;
+  /** A ref to the tab item. */
+  tabRef?: RefObject<HTMLButtonElement>;
 }
 
 export type TabItemProps<T extends object = {}> = Props<T>;
diff --git a/packages/components/tabs/src/tab-panel.tsx b/packages/components/tabs/src/tab-panel.tsx
index eb54049865..a7f9b8f131 100644
--- a/packages/components/tabs/src/tab-panel.tsx
+++ b/packages/components/tabs/src/tab-panel.tsx
@@ -3,7 +3,7 @@ import type {AriaTabPanelProps} from "@react-aria/tabs";
 import {Key} from "@react-types/shared";
 import {forwardRef, HTMLNextUIProps} from "@nextui-org/system";
 import {useDOMRef} from "@nextui-org/react-utils";
-import {clsx} from "@nextui-org/shared-utils";
+import {clsx, getInertValue} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {useTabPanel} from "@react-aria/tabs";
 import {useFocusRing} from "@react-aria/focus";
@@ -69,7 +69,9 @@ const TabPanel = forwardRef<"div", TabPanelProps>((props, ref) => {
       data-focus={isFocused}
       data-focus-visible={isFocusVisible}
       data-inert={!isSelected ? "true" : undefined}
-      inert={!isSelected ? "true" : undefined}
+      // makes the browser ignore the element and its children when tabbing
+      // @ts-ignore
+      inert={getInertValue(!isSelected)}
       {...(isSelected && mergeProps(tabPanelProps, focusProps, otherProps))}
       className={slots.panel?.({class: tabPanelStyles})}
       data-slot="panel"
diff --git a/packages/components/tabs/src/tab.tsx b/packages/components/tabs/src/tab.tsx
index 1be4868b4e..1330a186bd 100644
--- a/packages/components/tabs/src/tab.tsx
+++ b/packages/components/tabs/src/tab.tsx
@@ -1,7 +1,7 @@
 import type {TabItemProps as BaseTabItemProps} from "./base/tab-item-base";
 
 import {forwardRef} from "@nextui-org/system";
-import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
+import {useDOMRef, filterDOMProps, mergeRefs} from "@nextui-org/react-utils";
 import {clsx, dataAttr} from "@nextui-org/shared-utils";
 import {chain, mergeProps} from "@react-aria/utils";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -44,6 +44,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
     disableCursorAnimation,
     shouldSelectOnPressUp,
     onClick,
+    tabRef,
     ...otherProps
   } = props;
 
@@ -94,7 +95,7 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
 
   return (
     <Component
-      ref={domRef}
+      ref={mergeRefs(domRef, tabRef)}
       data-disabled={dataAttr(isDisabledItem)}
       data-focus={dataAttr(isFocused)}
       data-focus-visible={dataAttr(isFocusVisible)}
@@ -122,6 +123,8 @@ const Tab = forwardRef<"button", TabItemProps>((props, ref) => {
       type={Component === "button" ? "button" : undefined}
     >
       {isSelected && !disableAnimation && !disableCursorAnimation && isMounted ? (
+        // use synchronous loading for domMax here
+        // since lazy loading produces different behaviour
         <LazyMotion features={domMax}>
           <m.span
             className={slots.cursor({class: classNames?.cursor})}
diff --git a/packages/components/tabs/src/tabs.tsx b/packages/components/tabs/src/tabs.tsx
index c03e7c8525..ead0fae5fe 100644
--- a/packages/components/tabs/src/tabs.tsx
+++ b/packages/components/tabs/src/tabs.tsx
@@ -1,4 +1,4 @@
-import {ForwardedRef, ReactElement, Ref, useId} from "react";
+import {ForwardedRef, ReactElement, useId} from "react";
 import {LayoutGroup} from "framer-motion";
 import {forwardRef} from "@nextui-org/system";
 
@@ -8,7 +8,12 @@ import TabPanel from "./tab-panel";
 
 interface Props<T> extends UseTabsProps<T> {}
 
-function Tabs<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLDivElement>) {
+export type TabsProps<T extends object = object> = Props<T>;
+
+const Tabs = forwardRef(function Tabs<T extends object>(
+  props: TabsProps<T>,
+  ref: ForwardedRef<HTMLDivElement>,
+) {
   const {
     Component,
     values,
@@ -69,11 +74,6 @@ function Tabs<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLDivElemen
   }
 
   return renderTabs;
-}
-
-export type TabsProps<T extends object = object> = Props<T> & {ref?: Ref<HTMLElement>};
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-export default forwardRef(Tabs) as <T extends object>(props: TabsProps<T>) => ReactElement;
+}) as <T extends object>(props: TabsProps<T>) => ReactElement;
 
-Tabs.displayName = "NextUI.Tabs";
+export default Tabs;
diff --git a/packages/components/tooltip/CHANGELOG.md b/packages/components/tooltip/CHANGELOG.md
index 252689abb4..0370ac364d 100644
--- a/packages/components/tooltip/CHANGELOG.md
+++ b/packages/components/tooltip/CHANGELOG.md
@@ -1,5 +1,213 @@
 # @nextui-org/tooltip
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-safe-layout-effect@2.1.1
+  - @nextui-org/aria-utils@2.2.1
+  - @nextui-org/dom-animation@2.1.1
+  - @nextui-org/framer-utils@2.1.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/aria-utils@2.2.0
+  - @nextui-org/use-safe-layout-effect@2.1.0
+  - @nextui-org/dom-animation@2.1.0
+  - @nextui-org/framer-utils@2.1.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+  - @nextui-org/aria-utils@2.1.0-beta.10
+  - @nextui-org/dom-animation@2.0.1-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/aria-utils@2.1.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.9
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/aria-utils@2.1.0-beta.8
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.7
+  - @nextui-org/dom-animation@2.0.1-beta.6
+  - @nextui-org/framer-utils@2.0.26-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+  - @nextui-org/aria-utils@2.1.0-beta.6
+  - @nextui-org/dom-animation@2.0.1-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+  - @nextui-org/aria-utils@2.1.0-beta.5
+  - @nextui-org/dom-animation@2.0.1-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/aria-utils@2.1.0-beta.4
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+  - @nextui-org/aria-utils@2.1.0-beta.3
+  - @nextui-org/dom-animation@2.0.1-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.2
+  - @nextui-org/dom-animation@2.0.1-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/aria-utils@2.1.0-beta.1
+  - @nextui-org/dom-animation@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/aria-utils@2.1.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/dom-animation@2.0.1-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.41
 
 ### Patch Changes
diff --git a/packages/components/tooltip/__tests__/tooltip.test.tsx b/packages/components/tooltip/__tests__/tooltip.test.tsx
index b5e2f43ffa..326e59a3ce 100644
--- a/packages/components/tooltip/__tests__/tooltip.test.tsx
+++ b/packages/components/tooltip/__tests__/tooltip.test.tsx
@@ -30,7 +30,7 @@ describe("Tooltip", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
-    expect(spy).toBeCalledTimes(0);
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {
diff --git a/packages/components/tooltip/package.json b/packages/components/tooltip/package.json
index 26c1ac2b93..a7d334e86c 100644
--- a/packages/components/tooltip/package.json
+++ b/packages/components/tooltip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/tooltip",
-  "version": "2.0.41",
+  "version": "2.2.1",
   "description": "A React Component for rendering dynamically positioned Tooltips",
   "keywords": [
     "tooltip"
@@ -34,11 +34,11 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
@@ -46,22 +46,21 @@
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/tooltip": "3.7.4",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/tooltip": "3.4.9",
-    "@react-types/overlays": "3.8.7",
-    "@react-types/tooltip": "3.4.9"
+    "@nextui-org/dom-animation": "workspace:*",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/tooltip": "3.7.9",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/tooltip": "3.4.13",
+    "@react-types/overlays": "3.8.10",
+    "@react-types/tooltip": "3.4.12"
   },
   "devDependencies": {
     "@nextui-org/button": "workspace:*",
     "@nextui-org/system": "workspace:*",
     "@nextui-org/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.28",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "framer-motion": "11.9.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file
diff --git a/packages/components/tooltip/src/tooltip.tsx b/packages/components/tooltip/src/tooltip.tsx
index 3bfa32c309..e014eb8944 100644
--- a/packages/components/tooltip/src/tooltip.tsx
+++ b/packages/components/tooltip/src/tooltip.tsx
@@ -1,6 +1,6 @@
 import {forwardRef} from "@nextui-org/system";
 import {OverlayContainer} from "@react-aria/overlays";
-import {AnimatePresence, m, LazyMotion, domAnimation} from "framer-motion";
+import {AnimatePresence, m, LazyMotion} from "framer-motion";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {warn} from "@nextui-org/shared-utils";
 import {Children, cloneElement, isValidElement} from "react";
@@ -11,6 +11,8 @@ import {UseTooltipProps, useTooltip} from "./use-tooltip";
 
 export interface TooltipProps extends Omit<UseTooltipProps, "disableTriggerFocus" | "backdrop"> {}
 
+const domAnimation = () => import("@nextui-org/dom-animation").then((res) => res.default);
+
 const Tooltip = forwardRef<"div", TooltipProps>((props, ref) => {
   const {
     Component,
diff --git a/packages/components/user/CHANGELOG.md b/packages/components/user/CHANGELOG.md
index 2c2173a059..b598de1674 100644
--- a/packages/components/user/CHANGELOG.md
+++ b/packages/components/user/CHANGELOG.md
@@ -1,5 +1,184 @@
 # @nextui-org/user
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/avatar@2.2.1
+  - @nextui-org/react-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/avatar@2.2.0
+  - @nextui-org/react-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.12
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/avatar@2.1.0-beta.12
+  - @nextui-org/react-utils@2.0.18-beta.8
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/avatar@2.1.0-beta.11
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/react-utils@2.0.18-beta.7
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/avatar@2.1.0-beta.9
+  - @nextui-org/react-utils@2.0.18-beta.6
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/avatar@2.1.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/avatar@2.1.0-beta.7
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/avatar@2.1.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/avatar@2.1.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/avatar@2.1.0-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/avatar@2.1.0-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/avatar@2.1.0-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/avatar@2.1.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/avatar@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.34
 
 ### Patch Changes
diff --git a/packages/components/user/package.json b/packages/components/user/package.json
index 8cff7d17e7..1554024b01 100644
--- a/packages/components/user/package.json
+++ b/packages/components/user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/user",
-  "version": "2.0.34",
+  "version": "2.2.1",
   "description": "Flexible User Profile Component.",
   "keywords": [
     "user"
@@ -34,17 +34,17 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.1.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0",
+    "@nextui-org/system": ">=2.3.0-beta.0"
   },
   "dependencies": {
     "@nextui-org/avatar": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.24.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.26.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",
diff --git a/packages/components/user/stories/user.stories.tsx b/packages/components/user/stories/user.stories.tsx
index c3112c0982..e330dbf4b9 100644
--- a/packages/components/user/stories/user.stories.tsx
+++ b/packages/components/user/stories/user.stories.tsx
@@ -58,7 +58,7 @@ export const WithLinkDescription = {
   args: {
     name: "Junior Garcia",
     description: (
-      <Link href="https://twitter.com/jrgarciadev" size="sm">
+      <Link href="https://x.com/jrgarciadev" size="sm">
         @jrgarciadev
       </Link>
     ),
diff --git a/packages/core/react/CHANGELOG.md b/packages/core/react/CHANGELOG.md
index e3747487aa..18dcd3f2d7 100644
--- a/packages/core/react/CHANGELOG.md
+++ b/packages/core/react/CHANGELOG.md
@@ -1,5 +1,1312 @@
 # @nextui-org/react
 
+## 2.6.2
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/accordion@2.2.1
+  - @nextui-org/alert@2.2.1
+  - @nextui-org/autocomplete@2.3.1
+  - @nextui-org/avatar@2.2.1
+  - @nextui-org/badge@2.2.1
+  - @nextui-org/breadcrumbs@2.2.1
+  - @nextui-org/button@2.2.1
+  - @nextui-org/calendar@2.2.1
+  - @nextui-org/card@2.2.1
+  - @nextui-org/checkbox@2.3.1
+  - @nextui-org/chip@2.2.1
+  - @nextui-org/code@2.2.1
+  - @nextui-org/date-input@2.3.1
+  - @nextui-org/date-picker@2.3.1
+  - @nextui-org/divider@2.2.1
+  - @nextui-org/drawer@2.2.1
+  - @nextui-org/dropdown@2.3.1
+  - @nextui-org/form@2.1.1
+  - @nextui-org/image@2.2.1
+  - @nextui-org/input@2.4.1
+  - @nextui-org/input-otp@2.1.1
+  - @nextui-org/kbd@2.2.1
+  - @nextui-org/link@2.2.1
+  - @nextui-org/listbox@2.3.1
+  - @nextui-org/menu@2.2.1
+  - @nextui-org/modal@2.2.1
+  - @nextui-org/navbar@2.2.1
+  - @nextui-org/pagination@2.2.1
+  - @nextui-org/popover@2.3.1
+  - @nextui-org/progress@2.2.1
+  - @nextui-org/radio@2.3.1
+  - @nextui-org/ripple@2.2.1
+  - @nextui-org/scroll-shadow@2.3.1
+  - @nextui-org/select@2.4.1
+  - @nextui-org/skeleton@2.2.1
+  - @nextui-org/slider@2.4.1
+  - @nextui-org/snippet@2.2.2
+  - @nextui-org/spacer@2.2.1
+  - @nextui-org/spinner@2.2.1
+  - @nextui-org/switch@2.2.1
+  - @nextui-org/table@2.2.1
+  - @nextui-org/tabs@2.2.1
+  - @nextui-org/tooltip@2.2.1
+  - @nextui-org/user@2.2.1
+  - @nextui-org/system@2.4.1
+  - @nextui-org/theme@2.4.1
+  - @nextui-org/framer-utils@2.1.1
+
+## 2.6.1
+
+### Patch Changes
+
+- Updated dependencies [[`71e2d8c`](https://github.com/nextui-org/nextui/commit/71e2d8c6014c821c0441c6a68924043a7a491e5b)]:
+  - @nextui-org/snippet@2.2.1
+
+## 2.6.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`6bc616c`](https://github.com/nextui-org/nextui/commit/6bc616caea948431d05eec33c1784e0560524e97), [`af0d20d`](https://github.com/nextui-org/nextui/commit/af0d20d807311b98a49218cb10faff0972a7d2fa), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`729ede8`](https://github.com/nextui-org/nextui/commit/729ede8de7f18c7b49fbdb736aac300b5b98f239), [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`1855ba4`](https://github.com/nextui-org/nextui/commit/1855ba4390186f701c793f76593f31a5dce6da70), [`ffb1e55`](https://github.com/nextui-org/nextui/commit/ffb1e554f7d6b5b1ede66d0838b3b1edeeccdf6b), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201), [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8), [`adbd85e`](https://github.com/nextui-org/nextui/commit/adbd85ee95b67ee779401307c49596dd45e062fc)]:
+  - @nextui-org/autocomplete@2.3.0
+  - @nextui-org/date-picker@2.3.0
+  - @nextui-org/date-input@2.3.0
+  - @nextui-org/calendar@2.2.0
+  - @nextui-org/dropdown@2.3.0
+  - @nextui-org/listbox@2.3.0
+  - @nextui-org/select@2.4.0
+  - @nextui-org/menu@2.2.0
+  - @nextui-org/tabs@2.2.0
+  - @nextui-org/popover@2.3.0
+  - @nextui-org/modal@2.2.0
+  - @nextui-org/checkbox@2.3.0
+  - @nextui-org/switch@2.2.0
+  - @nextui-org/radio@2.3.0
+  - @nextui-org/input-otp@2.1.0
+  - @nextui-org/input@2.4.0
+  - @nextui-org/form@2.1.0
+  - @nextui-org/system@2.4.0
+  - @nextui-org/theme@2.4.0
+  - @nextui-org/breadcrumbs@2.2.0
+  - @nextui-org/pagination@2.2.0
+  - @nextui-org/accordion@2.2.0
+  - @nextui-org/progress@2.2.0
+  - @nextui-org/snippet@2.2.0
+  - @nextui-org/tooltip@2.2.0
+  - @nextui-org/avatar@2.2.0
+  - @nextui-org/button@2.2.0
+  - @nextui-org/navbar@2.2.0
+  - @nextui-org/slider@2.4.0
+  - @nextui-org/alert@2.2.0
+  - @nextui-org/table@2.2.0
+  - @nextui-org/card@2.2.0
+  - @nextui-org/chip@2.2.0
+  - @nextui-org/link@2.2.0
+  - @nextui-org/user@2.2.0
+  - @nextui-org/kbd@2.2.0
+  - @nextui-org/badge@2.2.0
+  - @nextui-org/code@2.2.0
+  - @nextui-org/divider@2.2.0
+  - @nextui-org/drawer@2.2.0
+  - @nextui-org/image@2.2.0
+  - @nextui-org/ripple@2.2.0
+  - @nextui-org/scroll-shadow@2.3.0
+  - @nextui-org/skeleton@2.2.0
+  - @nextui-org/spacer@2.2.0
+  - @nextui-org/spinner@2.2.0
+  - @nextui-org/framer-utils@2.1.0
+
+## 2.5.0-beta.26
+
+### Patch Changes
+
+- Updated dependencies [[`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322), [`922c4a567`](https://github.com/nextui-org/nextui/commit/922c4a5674a74be749db6abeffd153eaf7d3a5c7), [`0b5ceb93c`](https://github.com/nextui-org/nextui/commit/0b5ceb93ce098e5d76409190f2d57cd89c06b7e9)]:
+  - @nextui-org/input@2.3.0-beta.12
+  - @nextui-org/theme@2.3.0-beta.18
+  - @nextui-org/listbox@2.2.0-beta.14
+  - @nextui-org/menu@2.1.0-beta.13
+  - @nextui-org/pagination@2.1.0-beta.11
+  - @nextui-org/accordion@2.1.0-beta.13
+  - @nextui-org/autocomplete@2.2.0-beta.17
+  - @nextui-org/drawer@2.1.0-beta.14
+  - @nextui-org/modal@2.1.0-beta.14
+  - @nextui-org/navbar@2.1.0-beta.11
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/select@2.3.0-beta.19
+  - @nextui-org/tabs@2.1.0-beta.11
+  - @nextui-org/alert@2.1.0-beta.14
+  - @nextui-org/avatar@2.1.0-beta.12
+  - @nextui-org/badge@2.1.0-beta.8
+  - @nextui-org/breadcrumbs@2.1.0-beta.11
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/calendar@2.1.0-beta.14
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/chip@2.1.0-beta.11
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/date-picker@2.2.0-beta.15
+  - @nextui-org/dropdown@2.2.0-beta.14
+  - @nextui-org/link@2.1.0-beta.11
+  - @nextui-org/slider@2.3.0-beta.11
+  - @nextui-org/snippet@2.1.0-beta.13
+  - @nextui-org/switch@2.1.0-beta.9
+  - @nextui-org/table@2.1.0-beta.12
+  - @nextui-org/card@2.1.0-beta.10
+  - @nextui-org/code@2.1.0-beta.9
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/image@2.1.0-beta.11
+  - @nextui-org/input-otp@2.0.1-beta.0
+  - @nextui-org/kbd@2.1.0-beta.9
+  - @nextui-org/progress@2.1.0-beta.9
+  - @nextui-org/radio@2.2.0-beta.9
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/skeleton@2.1.0-beta.8
+  - @nextui-org/spacer@2.1.0-beta.9
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/tooltip@2.1.0-beta.11
+  - @nextui-org/user@2.1.0-beta.12
+
+## 2.5.0-beta.25
+
+### Patch Changes
+
+- [#4052](https://github.com/nextui-org/nextui/pull/4052) [`1d5b2b6c1`](https://github.com/nextui-org/nextui/commit/1d5b2b6c1f8672e7339a6f9dc66f0244d7bb2789) Thanks [@macci001](https://github.com/macci001)! - Adding new input-otp component.
+
+- Updated dependencies [[`1d5b2b6c1`](https://github.com/nextui-org/nextui/commit/1d5b2b6c1f8672e7339a6f9dc66f0244d7bb2789)]:
+  - @nextui-org/input-otp@2.0.1-beta.0
+  - @nextui-org/theme@2.3.0-beta.17
+  - @nextui-org/accordion@2.1.0-beta.12
+  - @nextui-org/alert@2.1.0-beta.13
+  - @nextui-org/autocomplete@2.2.0-beta.16
+  - @nextui-org/avatar@2.1.0-beta.12
+  - @nextui-org/badge@2.1.0-beta.8
+  - @nextui-org/breadcrumbs@2.1.0-beta.10
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/calendar@2.1.0-beta.13
+  - @nextui-org/card@2.1.0-beta.10
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/chip@2.1.0-beta.10
+  - @nextui-org/code@2.1.0-beta.9
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/date-picker@2.2.0-beta.14
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/drawer@2.1.0-beta.13
+  - @nextui-org/dropdown@2.2.0-beta.13
+  - @nextui-org/image@2.1.0-beta.11
+  - @nextui-org/input@2.3.0-beta.11
+  - @nextui-org/kbd@2.1.0-beta.9
+  - @nextui-org/link@2.1.0-beta.10
+  - @nextui-org/listbox@2.2.0-beta.13
+  - @nextui-org/menu@2.1.0-beta.12
+  - @nextui-org/modal@2.1.0-beta.13
+  - @nextui-org/navbar@2.1.0-beta.11
+  - @nextui-org/pagination@2.1.0-beta.10
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/progress@2.1.0-beta.9
+  - @nextui-org/radio@2.2.0-beta.9
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/select@2.3.0-beta.18
+  - @nextui-org/skeleton@2.1.0-beta.8
+  - @nextui-org/slider@2.3.0-beta.11
+  - @nextui-org/snippet@2.1.0-beta.12
+  - @nextui-org/spacer@2.1.0-beta.9
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/switch@2.1.0-beta.9
+  - @nextui-org/table@2.1.0-beta.11
+  - @nextui-org/tabs@2.1.0-beta.11
+  - @nextui-org/tooltip@2.1.0-beta.11
+  - @nextui-org/user@2.1.0-beta.12
+
+## 2.5.0-beta.24
+
+### Patch Changes
+
+- Updated dependencies [[`d37007c69`](https://github.com/nextui-org/nextui/commit/d37007c69c3e1ff4a66d414cbb1a4a38bb22264c), [`17bf65799`](https://github.com/nextui-org/nextui/commit/17bf65799c39c2ee44ea9c0b23aa80315b2a5083), [`c8f2ec887`](https://github.com/nextui-org/nextui/commit/c8f2ec88752289913968331032b9e7f772c12ec4)]:
+  - @nextui-org/menu@2.1.0-beta.12
+  - @nextui-org/theme@2.3.0-beta.16
+  - @nextui-org/accordion@2.1.0-beta.12
+  - @nextui-org/button@2.1.0-beta.10
+  - @nextui-org/card@2.1.0-beta.10
+  - @nextui-org/date-picker@2.2.0-beta.14
+  - @nextui-org/navbar@2.1.0-beta.11
+  - @nextui-org/snippet@2.1.0-beta.12
+  - @nextui-org/system@2.3.0-beta.11
+  - @nextui-org/dropdown@2.2.0-beta.13
+  - @nextui-org/alert@2.1.0-beta.13
+  - @nextui-org/autocomplete@2.2.0-beta.16
+  - @nextui-org/avatar@2.1.0-beta.12
+  - @nextui-org/badge@2.1.0-beta.8
+  - @nextui-org/breadcrumbs@2.1.0-beta.10
+  - @nextui-org/calendar@2.1.0-beta.13
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/chip@2.1.0-beta.10
+  - @nextui-org/code@2.1.0-beta.9
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/drawer@2.1.0-beta.13
+  - @nextui-org/image@2.1.0-beta.11
+  - @nextui-org/input@2.3.0-beta.11
+  - @nextui-org/kbd@2.1.0-beta.9
+  - @nextui-org/link@2.1.0-beta.10
+  - @nextui-org/listbox@2.2.0-beta.13
+  - @nextui-org/modal@2.1.0-beta.13
+  - @nextui-org/pagination@2.1.0-beta.10
+  - @nextui-org/popover@2.2.0-beta.12
+  - @nextui-org/progress@2.1.0-beta.9
+  - @nextui-org/radio@2.2.0-beta.9
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/select@2.3.0-beta.18
+  - @nextui-org/skeleton@2.1.0-beta.8
+  - @nextui-org/slider@2.3.0-beta.11
+  - @nextui-org/spacer@2.1.0-beta.9
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/switch@2.1.0-beta.9
+  - @nextui-org/table@2.1.0-beta.11
+  - @nextui-org/tabs@2.1.0-beta.11
+  - @nextui-org/tooltip@2.1.0-beta.11
+  - @nextui-org/user@2.1.0-beta.12
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.11
+
+## 2.5.0-beta.23
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/accordion@2.1.0-beta.11
+  - @nextui-org/alert@2.1.0-beta.12
+  - @nextui-org/autocomplete@2.2.0-beta.15
+  - @nextui-org/avatar@2.1.0-beta.12
+  - @nextui-org/badge@2.1.0-beta.8
+  - @nextui-org/breadcrumbs@2.1.0-beta.10
+  - @nextui-org/button@2.1.0-beta.9
+  - @nextui-org/calendar@2.1.0-beta.12
+  - @nextui-org/card@2.1.0-beta.9
+  - @nextui-org/checkbox@2.2.0-beta.9
+  - @nextui-org/chip@2.1.0-beta.10
+  - @nextui-org/code@2.1.0-beta.9
+  - @nextui-org/date-input@2.2.0-beta.9
+  - @nextui-org/date-picker@2.2.0-beta.13
+  - @nextui-org/divider@2.1.0-beta.9
+  - @nextui-org/drawer@2.1.0-beta.12
+  - @nextui-org/dropdown@2.2.0-beta.12
+  - @nextui-org/form@2.0.1-beta.1
+  - @nextui-org/image@2.1.0-beta.11
+  - @nextui-org/input@2.3.0-beta.11
+  - @nextui-org/kbd@2.1.0-beta.9
+  - @nextui-org/link@2.1.0-beta.10
+  - @nextui-org/listbox@2.2.0-beta.12
+  - @nextui-org/menu@2.1.0-beta.11
+  - @nextui-org/modal@2.1.0-beta.12
+  - @nextui-org/navbar@2.1.0-beta.10
+  - @nextui-org/pagination@2.1.0-beta.10
+  - @nextui-org/popover@2.2.0-beta.11
+  - @nextui-org/progress@2.1.0-beta.9
+  - @nextui-org/radio@2.2.0-beta.9
+  - @nextui-org/ripple@2.1.0-beta.8
+  - @nextui-org/scroll-shadow@2.2.0-beta.8
+  - @nextui-org/select@2.3.0-beta.17
+  - @nextui-org/skeleton@2.1.0-beta.8
+  - @nextui-org/slider@2.3.0-beta.10
+  - @nextui-org/snippet@2.1.0-beta.11
+  - @nextui-org/spacer@2.1.0-beta.9
+  - @nextui-org/spinner@2.1.0-beta.9
+  - @nextui-org/switch@2.1.0-beta.9
+  - @nextui-org/table@2.1.0-beta.11
+  - @nextui-org/tabs@2.1.0-beta.10
+  - @nextui-org/tooltip@2.1.0-beta.10
+  - @nextui-org/user@2.1.0-beta.12
+  - @nextui-org/system@2.3.0-beta.10
+  - @nextui-org/theme@2.3.0-beta.15
+  - @nextui-org/framer-utils@2.0.26-beta.10
+
+## 2.5.0-beta.22
+
+### Patch Changes
+
+- Updated dependencies [[`1e05a721f`](https://github.com/nextui-org/nextui/commit/1e05a721f9ba25403c023023a1e3efa44ac3bb74)]:
+  - @nextui-org/select@2.3.0-beta.16
+
+## 2.5.0-beta.21
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00), [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/table@2.1.0-beta.10
+  - @nextui-org/accordion@2.1.0-beta.10
+  - @nextui-org/avatar@2.1.0-beta.11
+  - @nextui-org/breadcrumbs@2.1.0-beta.9
+  - @nextui-org/button@2.1.0-beta.8
+  - @nextui-org/calendar@2.1.0-beta.11
+  - @nextui-org/card@2.1.0-beta.8
+  - @nextui-org/chip@2.1.0-beta.9
+  - @nextui-org/date-input@2.2.0-beta.8
+  - @nextui-org/divider@2.1.0-beta.8
+  - @nextui-org/dropdown@2.2.0-beta.11
+  - @nextui-org/kbd@2.1.0-beta.8
+  - @nextui-org/link@2.1.0-beta.9
+  - @nextui-org/listbox@2.2.0-beta.11
+  - @nextui-org/menu@2.1.0-beta.10
+  - @nextui-org/modal@2.1.0-beta.11
+  - @nextui-org/navbar@2.1.0-beta.9
+  - @nextui-org/pagination@2.1.0-beta.9
+  - @nextui-org/popover@2.2.0-beta.10
+  - @nextui-org/progress@2.1.0-beta.8
+  - @nextui-org/select@2.3.0-beta.15
+  - @nextui-org/slider@2.3.0-beta.9
+  - @nextui-org/snippet@2.1.0-beta.10
+  - @nextui-org/switch@2.1.0-beta.8
+  - @nextui-org/tabs@2.1.0-beta.9
+  - @nextui-org/tooltip@2.1.0-beta.9
+  - @nextui-org/user@2.1.0-beta.11
+  - @nextui-org/system@2.3.0-beta.9
+  - @nextui-org/form@2.0.1-beta.0
+  - @nextui-org/autocomplete@2.2.0-beta.14
+  - @nextui-org/checkbox@2.2.0-beta.8
+  - @nextui-org/date-picker@2.2.0-beta.12
+  - @nextui-org/input@2.3.0-beta.10
+  - @nextui-org/radio@2.2.0-beta.8
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/drawer@2.1.0-beta.11
+  - @nextui-org/alert@2.1.0-beta.11
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/framer-utils@2.0.26-beta.9
+  - @nextui-org/code@2.1.0-beta.8
+  - @nextui-org/spacer@2.1.0-beta.8
+  - @nextui-org/spinner@2.1.0-beta.8
+
+## 2.5.0-beta.20
+
+### Patch Changes
+
+- Updated dependencies [[`78a99b628`](https://github.com/nextui-org/nextui/commit/78a99b628e3fde8808a0cce3c69059d727afd49b), [`ee4870dc1`](https://github.com/nextui-org/nextui/commit/ee4870dc14b2a449fd22be4489b88e44f030329a), [`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac)]:
+  - @nextui-org/calendar@2.1.0-beta.10
+  - @nextui-org/table@2.1.0-beta.9
+  - @nextui-org/listbox@2.2.0-beta.10
+  - @nextui-org/menu@2.1.0-beta.9
+  - @nextui-org/theme@2.3.0-beta.14
+  - @nextui-org/date-picker@2.2.0-beta.11
+  - @nextui-org/autocomplete@2.2.0-beta.13
+  - @nextui-org/select@2.3.0-beta.14
+  - @nextui-org/dropdown@2.2.0-beta.10
+  - @nextui-org/accordion@2.1.0-beta.9
+  - @nextui-org/alert@2.1.0-beta.10
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/breadcrumbs@2.1.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/card@2.1.0-beta.7
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/chip@2.1.0-beta.8
+  - @nextui-org/code@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/drawer@2.1.0-beta.10
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/kbd@2.1.0-beta.7
+  - @nextui-org/link@2.1.0-beta.8
+  - @nextui-org/modal@2.1.0-beta.10
+  - @nextui-org/navbar@2.1.0-beta.8
+  - @nextui-org/pagination@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/progress@2.1.0-beta.7
+  - @nextui-org/radio@2.2.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/slider@2.3.0-beta.8
+  - @nextui-org/snippet@2.1.0-beta.9
+  - @nextui-org/spacer@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/switch@2.1.0-beta.7
+  - @nextui-org/tabs@2.1.0-beta.8
+  - @nextui-org/tooltip@2.1.0-beta.8
+  - @nextui-org/user@2.1.0-beta.10
+
+## 2.5.0-beta.19
+
+### Patch Changes
+
+- Updated dependencies [[`341b5de79`](https://github.com/nextui-org/nextui/commit/341b5de7947655e6b18fa09045f7e10fba5b8c59), [`9e8beabab`](https://github.com/nextui-org/nextui/commit/9e8beababea60dc499cc0989a0720fe25a10a823)]:
+  - @nextui-org/theme@2.3.0-beta.13
+  - @nextui-org/select@2.3.0-beta.13
+  - @nextui-org/accordion@2.1.0-beta.9
+  - @nextui-org/alert@2.1.0-beta.10
+  - @nextui-org/autocomplete@2.2.0-beta.12
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/breadcrumbs@2.1.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.9
+  - @nextui-org/card@2.1.0-beta.7
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/chip@2.1.0-beta.8
+  - @nextui-org/code@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/date-picker@2.2.0-beta.10
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/drawer@2.1.0-beta.10
+  - @nextui-org/dropdown@2.2.0-beta.9
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/kbd@2.1.0-beta.7
+  - @nextui-org/link@2.1.0-beta.8
+  - @nextui-org/listbox@2.2.0-beta.9
+  - @nextui-org/menu@2.1.0-beta.8
+  - @nextui-org/modal@2.1.0-beta.10
+  - @nextui-org/navbar@2.1.0-beta.8
+  - @nextui-org/pagination@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/progress@2.1.0-beta.7
+  - @nextui-org/radio@2.2.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/slider@2.3.0-beta.8
+  - @nextui-org/snippet@2.1.0-beta.9
+  - @nextui-org/spacer@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/switch@2.1.0-beta.7
+  - @nextui-org/table@2.1.0-beta.8
+  - @nextui-org/tabs@2.1.0-beta.8
+  - @nextui-org/tooltip@2.1.0-beta.8
+  - @nextui-org/user@2.1.0-beta.10
+
+## 2.5.0-beta.18
+
+### Patch Changes
+
+- Updated dependencies [[`4607fe2ff`](https://github.com/nextui-org/nextui/commit/4607fe2ff448a536496c2b59ccdfcb217379b6ed)]:
+  - @nextui-org/system@2.3.0-beta.8
+  - @nextui-org/accordion@2.1.0-beta.9
+  - @nextui-org/alert@2.1.0-beta.10
+  - @nextui-org/autocomplete@2.2.0-beta.12
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/breadcrumbs@2.1.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.9
+  - @nextui-org/card@2.1.0-beta.7
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/chip@2.1.0-beta.8
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/date-picker@2.2.0-beta.10
+  - @nextui-org/drawer@2.1.0-beta.10
+  - @nextui-org/dropdown@2.2.0-beta.9
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/link@2.1.0-beta.8
+  - @nextui-org/listbox@2.2.0-beta.9
+  - @nextui-org/menu@2.1.0-beta.8
+  - @nextui-org/modal@2.1.0-beta.10
+  - @nextui-org/navbar@2.1.0-beta.8
+  - @nextui-org/pagination@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.9
+  - @nextui-org/progress@2.1.0-beta.7
+  - @nextui-org/radio@2.2.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/select@2.3.0-beta.12
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/slider@2.3.0-beta.8
+  - @nextui-org/snippet@2.1.0-beta.9
+  - @nextui-org/switch@2.1.0-beta.7
+  - @nextui-org/table@2.1.0-beta.8
+  - @nextui-org/tabs@2.1.0-beta.8
+  - @nextui-org/tooltip@2.1.0-beta.8
+  - @nextui-org/user@2.1.0-beta.10
+  - @nextui-org/framer-utils@2.0.26-beta.8
+
+## 2.5.0-beta.17
+
+### Patch Changes
+
+- Updated dependencies [[`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f)]:
+  - @nextui-org/autocomplete@2.2.0-beta.11
+  - @nextui-org/listbox@2.2.0-beta.8
+  - @nextui-org/theme@2.3.0-beta.12
+  - @nextui-org/select@2.3.0-beta.11
+  - @nextui-org/accordion@2.1.0-beta.8
+  - @nextui-org/alert@2.1.0-beta.10
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/breadcrumbs@2.1.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.8
+  - @nextui-org/card@2.1.0-beta.7
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/chip@2.1.0-beta.8
+  - @nextui-org/code@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/date-picker@2.2.0-beta.9
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/drawer@2.1.0-beta.9
+  - @nextui-org/dropdown@2.2.0-beta.8
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/kbd@2.1.0-beta.7
+  - @nextui-org/link@2.1.0-beta.8
+  - @nextui-org/menu@2.1.0-beta.7
+  - @nextui-org/modal@2.1.0-beta.9
+  - @nextui-org/navbar@2.1.0-beta.7
+  - @nextui-org/pagination@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/progress@2.1.0-beta.7
+  - @nextui-org/radio@2.2.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/slider@2.3.0-beta.7
+  - @nextui-org/snippet@2.1.0-beta.8
+  - @nextui-org/spacer@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/switch@2.1.0-beta.7
+  - @nextui-org/table@2.1.0-beta.8
+  - @nextui-org/tabs@2.1.0-beta.7
+  - @nextui-org/tooltip@2.1.0-beta.7
+  - @nextui-org/user@2.1.0-beta.10
+
+## 2.5.0-beta.16
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/accordion@2.1.0-beta.8
+  - @nextui-org/alert@2.1.0-beta.10
+  - @nextui-org/autocomplete@2.2.0-beta.10
+  - @nextui-org/avatar@2.1.0-beta.10
+  - @nextui-org/badge@2.1.0-beta.7
+  - @nextui-org/breadcrumbs@2.1.0-beta.8
+  - @nextui-org/button@2.1.0-beta.7
+  - @nextui-org/calendar@2.1.0-beta.8
+  - @nextui-org/card@2.1.0-beta.7
+  - @nextui-org/checkbox@2.2.0-beta.7
+  - @nextui-org/chip@2.1.0-beta.8
+  - @nextui-org/code@2.1.0-beta.7
+  - @nextui-org/date-input@2.2.0-beta.7
+  - @nextui-org/date-picker@2.2.0-beta.9
+  - @nextui-org/divider@2.1.0-beta.7
+  - @nextui-org/drawer@2.1.0-beta.9
+  - @nextui-org/dropdown@2.2.0-beta.8
+  - @nextui-org/image@2.1.0-beta.10
+  - @nextui-org/input@2.3.0-beta.9
+  - @nextui-org/kbd@2.1.0-beta.7
+  - @nextui-org/link@2.1.0-beta.8
+  - @nextui-org/listbox@2.2.0-beta.7
+  - @nextui-org/menu@2.1.0-beta.7
+  - @nextui-org/modal@2.1.0-beta.9
+  - @nextui-org/navbar@2.1.0-beta.7
+  - @nextui-org/pagination@2.1.0-beta.8
+  - @nextui-org/popover@2.2.0-beta.8
+  - @nextui-org/progress@2.1.0-beta.7
+  - @nextui-org/radio@2.2.0-beta.7
+  - @nextui-org/ripple@2.1.0-beta.7
+  - @nextui-org/scroll-shadow@2.2.0-beta.7
+  - @nextui-org/select@2.3.0-beta.10
+  - @nextui-org/skeleton@2.1.0-beta.7
+  - @nextui-org/slider@2.3.0-beta.7
+  - @nextui-org/snippet@2.1.0-beta.8
+  - @nextui-org/spacer@2.1.0-beta.7
+  - @nextui-org/spinner@2.1.0-beta.7
+  - @nextui-org/switch@2.1.0-beta.7
+  - @nextui-org/table@2.1.0-beta.8
+  - @nextui-org/tabs@2.1.0-beta.7
+  - @nextui-org/tooltip@2.1.0-beta.7
+  - @nextui-org/user@2.1.0-beta.10
+  - @nextui-org/system@2.3.0-beta.7
+  - @nextui-org/theme@2.3.0-beta.11
+  - @nextui-org/framer-utils@2.0.26-beta.7
+
+## 2.5.0-beta.15
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/accordion@2.1.0-beta.7
+  - @nextui-org/alert@2.1.0-beta.9
+  - @nextui-org/autocomplete@2.2.0-beta.9
+  - @nextui-org/avatar@2.1.0-beta.9
+  - @nextui-org/badge@2.1.0-beta.6
+  - @nextui-org/breadcrumbs@2.1.0-beta.7
+  - @nextui-org/button@2.1.0-beta.6
+  - @nextui-org/calendar@2.1.0-beta.7
+  - @nextui-org/card@2.1.0-beta.6
+  - @nextui-org/checkbox@2.2.0-beta.6
+  - @nextui-org/chip@2.1.0-beta.7
+  - @nextui-org/code@2.1.0-beta.6
+  - @nextui-org/date-input@2.2.0-beta.6
+  - @nextui-org/date-picker@2.2.0-beta.8
+  - @nextui-org/divider@2.1.0-beta.6
+  - @nextui-org/drawer@2.1.0-beta.8
+  - @nextui-org/dropdown@2.2.0-beta.7
+  - @nextui-org/image@2.1.0-beta.9
+  - @nextui-org/input@2.3.0-beta.8
+  - @nextui-org/kbd@2.1.0-beta.6
+  - @nextui-org/link@2.1.0-beta.7
+  - @nextui-org/listbox@2.2.0-beta.6
+  - @nextui-org/menu@2.1.0-beta.6
+  - @nextui-org/modal@2.1.0-beta.8
+  - @nextui-org/navbar@2.1.0-beta.6
+  - @nextui-org/pagination@2.1.0-beta.7
+  - @nextui-org/popover@2.2.0-beta.7
+  - @nextui-org/progress@2.1.0-beta.6
+  - @nextui-org/radio@2.2.0-beta.6
+  - @nextui-org/ripple@2.1.0-beta.6
+  - @nextui-org/scroll-shadow@2.2.0-beta.6
+  - @nextui-org/select@2.3.0-beta.9
+  - @nextui-org/skeleton@2.1.0-beta.6
+  - @nextui-org/slider@2.3.0-beta.6
+  - @nextui-org/snippet@2.1.0-beta.7
+  - @nextui-org/spacer@2.1.0-beta.6
+  - @nextui-org/spinner@2.1.0-beta.6
+  - @nextui-org/switch@2.1.0-beta.6
+  - @nextui-org/table@2.1.0-beta.7
+  - @nextui-org/tabs@2.1.0-beta.6
+  - @nextui-org/tooltip@2.1.0-beta.6
+  - @nextui-org/user@2.1.0-beta.9
+  - @nextui-org/system@2.3.0-beta.6
+  - @nextui-org/theme@2.3.0-beta.10
+  - @nextui-org/framer-utils@2.0.26-beta.6
+
+## 2.5.0-beta.14
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/accordion@2.1.0-beta.6
+  - @nextui-org/alert@2.1.0-beta.8
+  - @nextui-org/autocomplete@2.2.0-beta.8
+  - @nextui-org/avatar@2.1.0-beta.8
+  - @nextui-org/badge@2.1.0-beta.5
+  - @nextui-org/breadcrumbs@2.1.0-beta.6
+  - @nextui-org/button@2.1.0-beta.5
+  - @nextui-org/calendar@2.1.0-beta.6
+  - @nextui-org/card@2.1.0-beta.5
+  - @nextui-org/checkbox@2.2.0-beta.5
+  - @nextui-org/chip@2.1.0-beta.6
+  - @nextui-org/code@2.1.0-beta.5
+  - @nextui-org/date-input@2.2.0-beta.5
+  - @nextui-org/date-picker@2.2.0-beta.7
+  - @nextui-org/divider@2.1.0-beta.5
+  - @nextui-org/drawer@2.1.0-beta.7
+  - @nextui-org/dropdown@2.2.0-beta.6
+  - @nextui-org/image@2.1.0-beta.8
+  - @nextui-org/input@2.3.0-beta.7
+  - @nextui-org/kbd@2.1.0-beta.5
+  - @nextui-org/link@2.1.0-beta.6
+  - @nextui-org/listbox@2.2.0-beta.5
+  - @nextui-org/menu@2.1.0-beta.5
+  - @nextui-org/modal@2.1.0-beta.7
+  - @nextui-org/navbar@2.1.0-beta.5
+  - @nextui-org/pagination@2.1.0-beta.6
+  - @nextui-org/popover@2.2.0-beta.6
+  - @nextui-org/progress@2.1.0-beta.5
+  - @nextui-org/radio@2.2.0-beta.5
+  - @nextui-org/ripple@2.1.0-beta.5
+  - @nextui-org/scroll-shadow@2.2.0-beta.5
+  - @nextui-org/select@2.3.0-beta.8
+  - @nextui-org/skeleton@2.1.0-beta.5
+  - @nextui-org/slider@2.3.0-beta.5
+  - @nextui-org/snippet@2.1.0-beta.6
+  - @nextui-org/spacer@2.1.0-beta.5
+  - @nextui-org/spinner@2.1.0-beta.5
+  - @nextui-org/switch@2.1.0-beta.5
+  - @nextui-org/table@2.1.0-beta.6
+  - @nextui-org/tabs@2.1.0-beta.5
+  - @nextui-org/tooltip@2.1.0-beta.5
+  - @nextui-org/user@2.1.0-beta.8
+  - @nextui-org/system@2.3.0-beta.5
+  - @nextui-org/theme@2.3.0-beta.9
+  - @nextui-org/framer-utils@2.0.26-beta.5
+
+## 2.5.0-beta.13
+
+### Patch Changes
+
+- Updated dependencies [[`70dc75983`](https://github.com/nextui-org/nextui/commit/70dc7598388022fca04255c3c1623468a38a3803)]:
+  - @nextui-org/alert@2.1.0-beta.7
+  - @nextui-org/theme@2.3.0-beta.8
+  - @nextui-org/accordion@2.1.0-beta.5
+  - @nextui-org/autocomplete@2.2.0-beta.7
+  - @nextui-org/avatar@2.1.0-beta.7
+  - @nextui-org/badge@2.1.0-beta.4
+  - @nextui-org/breadcrumbs@2.1.0-beta.5
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/calendar@2.1.0-beta.5
+  - @nextui-org/card@2.1.0-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/chip@2.1.0-beta.5
+  - @nextui-org/code@2.1.0-beta.4
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/date-picker@2.2.0-beta.6
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/drawer@2.1.0-beta.6
+  - @nextui-org/dropdown@2.2.0-beta.5
+  - @nextui-org/image@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.6
+  - @nextui-org/kbd@2.1.0-beta.4
+  - @nextui-org/link@2.1.0-beta.5
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/menu@2.1.0-beta.4
+  - @nextui-org/modal@2.1.0-beta.6
+  - @nextui-org/navbar@2.1.0-beta.4
+  - @nextui-org/pagination@2.1.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/progress@2.1.0-beta.4
+  - @nextui-org/radio@2.2.0-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/select@2.3.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.4
+  - @nextui-org/slider@2.3.0-beta.4
+  - @nextui-org/snippet@2.1.0-beta.5
+  - @nextui-org/spacer@2.1.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/switch@2.1.0-beta.4
+  - @nextui-org/table@2.1.0-beta.5
+  - @nextui-org/tabs@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/user@2.1.0-beta.7
+
+## 2.5.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies [[`31349c178`](https://github.com/nextui-org/nextui/commit/31349c178b9b2bd0be9856bc09126a37be68901a)]:
+  - @nextui-org/alert@2.1.0-beta.6
+  - @nextui-org/theme@2.3.0-beta.7
+  - @nextui-org/accordion@2.1.0-beta.5
+  - @nextui-org/autocomplete@2.2.0-beta.7
+  - @nextui-org/avatar@2.1.0-beta.7
+  - @nextui-org/badge@2.1.0-beta.4
+  - @nextui-org/breadcrumbs@2.1.0-beta.5
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/calendar@2.1.0-beta.5
+  - @nextui-org/card@2.1.0-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/chip@2.1.0-beta.5
+  - @nextui-org/code@2.1.0-beta.4
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/date-picker@2.2.0-beta.6
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/drawer@2.1.0-beta.6
+  - @nextui-org/dropdown@2.2.0-beta.5
+  - @nextui-org/image@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.6
+  - @nextui-org/kbd@2.1.0-beta.4
+  - @nextui-org/link@2.1.0-beta.5
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/menu@2.1.0-beta.4
+  - @nextui-org/modal@2.1.0-beta.6
+  - @nextui-org/navbar@2.1.0-beta.4
+  - @nextui-org/pagination@2.1.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/progress@2.1.0-beta.4
+  - @nextui-org/radio@2.2.0-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/select@2.3.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.4
+  - @nextui-org/slider@2.3.0-beta.4
+  - @nextui-org/snippet@2.1.0-beta.5
+  - @nextui-org/spacer@2.1.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/switch@2.1.0-beta.4
+  - @nextui-org/table@2.1.0-beta.5
+  - @nextui-org/tabs@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/user@2.1.0-beta.7
+
+## 2.5.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`d947b9283`](https://github.com/nextui-org/nextui/commit/d947b92833c8e4abc16dae72466cdb922313e9c8)]:
+  - @nextui-org/drawer@2.1.0-beta.6
+  - @nextui-org/modal@2.1.0-beta.6
+
+## 2.5.0-beta.10
+
+### Patch Changes
+
+- Updated dependencies [[`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a)]:
+  - @nextui-org/alert@2.1.0-beta.5
+  - @nextui-org/theme@2.3.0-beta.6
+  - @nextui-org/accordion@2.1.0-beta.5
+  - @nextui-org/autocomplete@2.2.0-beta.7
+  - @nextui-org/avatar@2.1.0-beta.7
+  - @nextui-org/badge@2.1.0-beta.4
+  - @nextui-org/breadcrumbs@2.1.0-beta.5
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/calendar@2.1.0-beta.5
+  - @nextui-org/card@2.1.0-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/chip@2.1.0-beta.5
+  - @nextui-org/code@2.1.0-beta.4
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/date-picker@2.2.0-beta.6
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/drawer@2.1.0-beta.5
+  - @nextui-org/dropdown@2.2.0-beta.5
+  - @nextui-org/image@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.6
+  - @nextui-org/kbd@2.1.0-beta.4
+  - @nextui-org/link@2.1.0-beta.5
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/menu@2.1.0-beta.4
+  - @nextui-org/modal@2.1.0-beta.5
+  - @nextui-org/navbar@2.1.0-beta.4
+  - @nextui-org/pagination@2.1.0-beta.5
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/progress@2.1.0-beta.4
+  - @nextui-org/radio@2.2.0-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/select@2.3.0-beta.7
+  - @nextui-org/skeleton@2.1.0-beta.4
+  - @nextui-org/slider@2.3.0-beta.4
+  - @nextui-org/snippet@2.1.0-beta.5
+  - @nextui-org/spacer@2.1.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/switch@2.1.0-beta.4
+  - @nextui-org/table@2.1.0-beta.5
+  - @nextui-org/tabs@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/user@2.1.0-beta.7
+
+## 2.5.0-beta.9
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/calendar@2.1.0-beta.4
+  - @nextui-org/tabs@2.1.0-beta.4
+  - @nextui-org/date-picker@2.2.0-beta.5
+  - @nextui-org/accordion@2.1.0-beta.4
+  - @nextui-org/alert@2.1.0-beta.4
+  - @nextui-org/autocomplete@2.2.0-beta.6
+  - @nextui-org/avatar@2.1.0-beta.7
+  - @nextui-org/badge@2.1.0-beta.4
+  - @nextui-org/breadcrumbs@2.1.0-beta.4
+  - @nextui-org/button@2.1.0-beta.4
+  - @nextui-org/card@2.1.0-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.4
+  - @nextui-org/chip@2.1.0-beta.4
+  - @nextui-org/code@2.1.0-beta.4
+  - @nextui-org/date-input@2.2.0-beta.4
+  - @nextui-org/divider@2.1.0-beta.4
+  - @nextui-org/drawer@2.1.0-beta.4
+  - @nextui-org/dropdown@2.2.0-beta.5
+  - @nextui-org/image@2.1.0-beta.7
+  - @nextui-org/input@2.3.0-beta.5
+  - @nextui-org/kbd@2.1.0-beta.4
+  - @nextui-org/link@2.1.0-beta.4
+  - @nextui-org/listbox@2.2.0-beta.4
+  - @nextui-org/menu@2.1.0-beta.4
+  - @nextui-org/modal@2.1.0-beta.4
+  - @nextui-org/navbar@2.1.0-beta.4
+  - @nextui-org/pagination@2.1.0-beta.4
+  - @nextui-org/popover@2.2.0-beta.5
+  - @nextui-org/progress@2.1.0-beta.4
+  - @nextui-org/radio@2.2.0-beta.4
+  - @nextui-org/ripple@2.1.0-beta.4
+  - @nextui-org/scroll-shadow@2.2.0-beta.4
+  - @nextui-org/select@2.3.0-beta.6
+  - @nextui-org/skeleton@2.1.0-beta.4
+  - @nextui-org/slider@2.3.0-beta.4
+  - @nextui-org/snippet@2.1.0-beta.4
+  - @nextui-org/spacer@2.1.0-beta.4
+  - @nextui-org/spinner@2.1.0-beta.4
+  - @nextui-org/switch@2.1.0-beta.4
+  - @nextui-org/table@2.1.0-beta.4
+  - @nextui-org/tooltip@2.1.0-beta.4
+  - @nextui-org/user@2.1.0-beta.7
+  - @nextui-org/theme@2.3.0-beta.5
+  - @nextui-org/framer-utils@2.0.26-beta.4
+  - @nextui-org/system@2.3.0-beta.4
+
+## 2.5.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`54be700e0`](https://github.com/nextui-org/nextui/commit/54be700e04386e95cead7ce63d87015347dd166f)]:
+  - @nextui-org/theme@2.3.0-beta.4
+  - @nextui-org/accordion@2.1.0-beta.3
+  - @nextui-org/alert@2.1.0-beta.3
+  - @nextui-org/autocomplete@2.2.0-beta.5
+  - @nextui-org/avatar@2.1.0-beta.6
+  - @nextui-org/badge@2.1.0-beta.3
+  - @nextui-org/breadcrumbs@2.1.0-beta.3
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/calendar@2.1.0-beta.3
+  - @nextui-org/card@2.1.0-beta.3
+  - @nextui-org/checkbox@2.2.0-beta.3
+  - @nextui-org/chip@2.1.0-beta.3
+  - @nextui-org/code@2.1.0-beta.3
+  - @nextui-org/date-input@2.2.0-beta.3
+  - @nextui-org/date-picker@2.2.0-beta.4
+  - @nextui-org/divider@2.1.0-beta.3
+  - @nextui-org/drawer@2.1.0-beta.3
+  - @nextui-org/dropdown@2.2.0-beta.4
+  - @nextui-org/image@2.1.0-beta.6
+  - @nextui-org/input@2.3.0-beta.4
+  - @nextui-org/kbd@2.1.0-beta.3
+  - @nextui-org/link@2.1.0-beta.3
+  - @nextui-org/listbox@2.2.0-beta.3
+  - @nextui-org/menu@2.1.0-beta.3
+  - @nextui-org/modal@2.1.0-beta.3
+  - @nextui-org/navbar@2.1.0-beta.3
+  - @nextui-org/pagination@2.1.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/progress@2.1.0-beta.3
+  - @nextui-org/radio@2.2.0-beta.3
+  - @nextui-org/ripple@2.1.0-beta.3
+  - @nextui-org/scroll-shadow@2.2.0-beta.3
+  - @nextui-org/select@2.3.0-beta.5
+  - @nextui-org/skeleton@2.1.0-beta.3
+  - @nextui-org/slider@2.3.0-beta.3
+  - @nextui-org/snippet@2.1.0-beta.3
+  - @nextui-org/spacer@2.1.0-beta.3
+  - @nextui-org/spinner@2.1.0-beta.3
+  - @nextui-org/switch@2.1.0-beta.3
+  - @nextui-org/table@2.1.0-beta.3
+  - @nextui-org/tabs@2.1.0-beta.3
+  - @nextui-org/tooltip@2.1.0-beta.3
+  - @nextui-org/user@2.1.0-beta.6
+
+## 2.5.0-beta.7
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/accordion@2.1.0-beta.3
+  - @nextui-org/alert@2.1.0-beta.3
+  - @nextui-org/autocomplete@2.2.0-beta.5
+  - @nextui-org/avatar@2.1.0-beta.6
+  - @nextui-org/badge@2.1.0-beta.3
+  - @nextui-org/breadcrumbs@2.1.0-beta.3
+  - @nextui-org/button@2.1.0-beta.3
+  - @nextui-org/calendar@2.1.0-beta.3
+  - @nextui-org/card@2.1.0-beta.3
+  - @nextui-org/checkbox@2.2.0-beta.3
+  - @nextui-org/chip@2.1.0-beta.3
+  - @nextui-org/code@2.1.0-beta.3
+  - @nextui-org/date-input@2.2.0-beta.3
+  - @nextui-org/date-picker@2.2.0-beta.4
+  - @nextui-org/divider@2.1.0-beta.3
+  - @nextui-org/drawer@2.1.0-beta.3
+  - @nextui-org/dropdown@2.2.0-beta.4
+  - @nextui-org/image@2.1.0-beta.6
+  - @nextui-org/input@2.3.0-beta.4
+  - @nextui-org/kbd@2.1.0-beta.3
+  - @nextui-org/link@2.1.0-beta.3
+  - @nextui-org/listbox@2.2.0-beta.3
+  - @nextui-org/menu@2.1.0-beta.3
+  - @nextui-org/modal@2.1.0-beta.3
+  - @nextui-org/navbar@2.1.0-beta.3
+  - @nextui-org/pagination@2.1.0-beta.3
+  - @nextui-org/popover@2.2.0-beta.4
+  - @nextui-org/progress@2.1.0-beta.3
+  - @nextui-org/radio@2.2.0-beta.3
+  - @nextui-org/ripple@2.1.0-beta.3
+  - @nextui-org/scroll-shadow@2.2.0-beta.3
+  - @nextui-org/select@2.3.0-beta.5
+  - @nextui-org/skeleton@2.1.0-beta.3
+  - @nextui-org/slider@2.3.0-beta.3
+  - @nextui-org/snippet@2.1.0-beta.3
+  - @nextui-org/spacer@2.1.0-beta.3
+  - @nextui-org/spinner@2.1.0-beta.3
+  - @nextui-org/switch@2.1.0-beta.3
+  - @nextui-org/table@2.1.0-beta.3
+  - @nextui-org/tabs@2.1.0-beta.3
+  - @nextui-org/tooltip@2.1.0-beta.3
+  - @nextui-org/user@2.1.0-beta.6
+  - @nextui-org/system@2.3.0-beta.3
+  - @nextui-org/theme@2.3.0-beta.3
+  - @nextui-org/framer-utils@2.0.26-beta.3
+
+## 2.5.0-beta.6
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/accordion@2.1.0-beta.2
+  - @nextui-org/alert@2.1.0-beta.2
+  - @nextui-org/autocomplete@2.2.0-beta.4
+  - @nextui-org/avatar@2.1.0-beta.5
+  - @nextui-org/badge@2.1.0-beta.2
+  - @nextui-org/breadcrumbs@2.1.0-beta.2
+  - @nextui-org/button@2.1.0-beta.2
+  - @nextui-org/calendar@2.1.0-beta.2
+  - @nextui-org/card@2.1.0-beta.2
+  - @nextui-org/checkbox@2.2.0-beta.2
+  - @nextui-org/chip@2.1.0-beta.2
+  - @nextui-org/code@2.1.0-beta.2
+  - @nextui-org/date-input@2.2.0-beta.2
+  - @nextui-org/date-picker@2.2.0-beta.3
+  - @nextui-org/divider@2.1.0-beta.2
+  - @nextui-org/drawer@2.1.0-beta.2
+  - @nextui-org/dropdown@2.2.0-beta.3
+  - @nextui-org/image@2.1.0-beta.5
+  - @nextui-org/input@2.3.0-beta.3
+  - @nextui-org/kbd@2.1.0-beta.2
+  - @nextui-org/link@2.1.0-beta.2
+  - @nextui-org/listbox@2.2.0-beta.2
+  - @nextui-org/menu@2.1.0-beta.2
+  - @nextui-org/modal@2.1.0-beta.2
+  - @nextui-org/navbar@2.1.0-beta.2
+  - @nextui-org/pagination@2.1.0-beta.2
+  - @nextui-org/popover@2.2.0-beta.3
+  - @nextui-org/progress@2.1.0-beta.2
+  - @nextui-org/radio@2.2.0-beta.2
+  - @nextui-org/ripple@2.1.0-beta.2
+  - @nextui-org/scroll-shadow@2.2.0-beta.2
+  - @nextui-org/select@2.3.0-beta.4
+  - @nextui-org/skeleton@2.1.0-beta.2
+  - @nextui-org/slider@2.3.0-beta.2
+  - @nextui-org/snippet@2.1.0-beta.2
+  - @nextui-org/spacer@2.1.0-beta.2
+  - @nextui-org/spinner@2.1.0-beta.2
+  - @nextui-org/switch@2.1.0-beta.2
+  - @nextui-org/table@2.1.0-beta.2
+  - @nextui-org/tabs@2.1.0-beta.2
+  - @nextui-org/tooltip@2.1.0-beta.2
+  - @nextui-org/user@2.1.0-beta.5
+  - @nextui-org/system@2.3.0-beta.2
+  - @nextui-org/theme@2.3.0-beta.2
+  - @nextui-org/framer-utils@2.0.26-beta.2
+
+## 2.5.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`563c1585a`](https://github.com/nextui-org/nextui/commit/563c1585a3c1a32e8272ec4641cfabeaaac3296c)]:
+  - @nextui-org/popover@2.2.0-beta.2
+  - @nextui-org/autocomplete@2.2.0-beta.3
+  - @nextui-org/date-picker@2.2.0-beta.2
+  - @nextui-org/dropdown@2.2.0-beta.2
+  - @nextui-org/select@2.3.0-beta.3
+  - @nextui-org/breadcrumbs@2.1.0-beta.1
+  - @nextui-org/navbar@2.1.0-beta.1
+
+## 2.5.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/avatar@2.1.0-beta.4
+  - @nextui-org/image@2.1.0-beta.4
+  - @nextui-org/accordion@2.1.0-beta.1
+  - @nextui-org/autocomplete@2.2.0-beta.2
+  - @nextui-org/badge@2.1.0-beta.1
+  - @nextui-org/card@2.1.0-beta.1
+  - @nextui-org/chip@2.1.0-beta.1
+  - @nextui-org/dropdown@2.2.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/navbar@2.1.0-beta.1
+  - @nextui-org/select@2.3.0-beta.2
+  - @nextui-org/user@2.1.0-beta.4
+  - @nextui-org/checkbox@2.2.0-beta.1
+  - @nextui-org/table@2.1.0-beta.1
+
+## 2.5.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/avatar@2.1.0-beta.3
+  - @nextui-org/image@2.1.0-beta.3
+  - @nextui-org/accordion@2.1.0-beta.1
+  - @nextui-org/autocomplete@2.2.0-beta.2
+  - @nextui-org/badge@2.1.0-beta.1
+  - @nextui-org/card@2.1.0-beta.1
+  - @nextui-org/chip@2.1.0-beta.1
+  - @nextui-org/dropdown@2.2.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/navbar@2.1.0-beta.1
+  - @nextui-org/select@2.3.0-beta.2
+  - @nextui-org/user@2.1.0-beta.3
+  - @nextui-org/checkbox@2.2.0-beta.1
+  - @nextui-org/table@2.1.0-beta.1
+
+## 2.5.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`a2d653137`](https://github.com/nextui-org/nextui/commit/a2d653137d61465a88dfa3830bb3a44e3a7faa87)]:
+  - @nextui-org/select@2.3.0-beta.2
+  - @nextui-org/input@2.3.0-beta.2
+  - @nextui-org/accordion@2.1.0-beta.1
+  - @nextui-org/autocomplete@2.2.0-beta.2
+  - @nextui-org/drawer@2.1.0-beta.1
+  - @nextui-org/modal@2.1.0-beta.1
+  - @nextui-org/navbar@2.1.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/tabs@2.1.0-beta.1
+  - @nextui-org/avatar@2.1.0-beta.2
+  - @nextui-org/image@2.1.0-beta.2
+  - @nextui-org/badge@2.1.0-beta.1
+  - @nextui-org/card@2.1.0-beta.1
+  - @nextui-org/chip@2.1.0-beta.1
+  - @nextui-org/dropdown@2.2.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/user@2.1.0-beta.2
+  - @nextui-org/checkbox@2.2.0-beta.1
+  - @nextui-org/table@2.1.0-beta.1
+
+## 2.5.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/accordion@2.1.0-beta.1
+  - @nextui-org/alert@2.1.0-beta.1
+  - @nextui-org/autocomplete@2.2.0-beta.1
+  - @nextui-org/avatar@2.1.0-beta.1
+  - @nextui-org/badge@2.1.0-beta.1
+  - @nextui-org/breadcrumbs@2.1.0-beta.1
+  - @nextui-org/button@2.1.0-beta.1
+  - @nextui-org/calendar@2.1.0-beta.1
+  - @nextui-org/card@2.1.0-beta.1
+  - @nextui-org/checkbox@2.2.0-beta.1
+  - @nextui-org/chip@2.1.0-beta.1
+  - @nextui-org/code@2.1.0-beta.1
+  - @nextui-org/date-input@2.2.0-beta.1
+  - @nextui-org/date-picker@2.2.0-beta.1
+  - @nextui-org/divider@2.1.0-beta.1
+  - @nextui-org/drawer@2.1.0-beta.1
+  - @nextui-org/dropdown@2.2.0-beta.1
+  - @nextui-org/image@2.1.0-beta.1
+  - @nextui-org/input@2.3.0-beta.1
+  - @nextui-org/kbd@2.1.0-beta.1
+  - @nextui-org/link@2.1.0-beta.1
+  - @nextui-org/listbox@2.2.0-beta.1
+  - @nextui-org/menu@2.1.0-beta.1
+  - @nextui-org/modal@2.1.0-beta.1
+  - @nextui-org/navbar@2.1.0-beta.1
+  - @nextui-org/pagination@2.1.0-beta.1
+  - @nextui-org/popover@2.2.0-beta.1
+  - @nextui-org/progress@2.1.0-beta.1
+  - @nextui-org/radio@2.2.0-beta.1
+  - @nextui-org/ripple@2.1.0-beta.1
+  - @nextui-org/scroll-shadow@2.2.0-beta.1
+  - @nextui-org/select@2.3.0-beta.1
+  - @nextui-org/skeleton@2.1.0-beta.1
+  - @nextui-org/slider@2.3.0-beta.1
+  - @nextui-org/snippet@2.1.0-beta.1
+  - @nextui-org/spacer@2.1.0-beta.1
+  - @nextui-org/spinner@2.1.0-beta.1
+  - @nextui-org/switch@2.1.0-beta.1
+  - @nextui-org/table@2.1.0-beta.1
+  - @nextui-org/tabs@2.1.0-beta.1
+  - @nextui-org/tooltip@2.1.0-beta.1
+  - @nextui-org/user@2.1.0-beta.1
+  - @nextui-org/system@2.3.0-beta.1
+  - @nextui-org/theme@2.3.0-beta.1
+  - @nextui-org/framer-utils@2.0.26-beta.1
+
+## 2.5.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`a2e562b03`](https://github.com/nextui-org/nextui/commit/a2e562b03f79b52b0b35f07104b3585ea05e2cb6), [`2e82f165a`](https://github.com/nextui-org/nextui/commit/2e82f165a98e1cdc8f0702d2971fc534b763fd15), [`488a18f52`](https://github.com/nextui-org/nextui/commit/488a18f525465817ce56e81db8e502399a7572b7), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`a4ab02006`](https://github.com/nextui-org/nextui/commit/a4ab02006a63013e1a25c28c182d999e3d7c9eeb), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`a4a1d8fb6`](https://github.com/nextui-org/nextui/commit/a4a1d8fb69dd7f496a179a66af072f72aae0ec17), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`780ba4316`](https://github.com/nextui-org/nextui/commit/780ba43162dc7ceb3f7b46c68c8134473013c873), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`557f10f5e`](https://github.com/nextui-org/nextui/commit/557f10f5ec60f9f69bed098b3670046cd56d15da), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`06c4b2f76`](https://github.com/nextui-org/nextui/commit/06c4b2f7637ba5f49f37b048943d66ff65201c85), [`9f6839faf`](https://github.com/nextui-org/nextui/commit/9f6839faf9fe05c766571bcb71028bd3236d6e3a), [`7c2c9c487`](https://github.com/nextui-org/nextui/commit/7c2c9c48750c334c30bd3c5d06b27cff7f33fb54), [`2d6ae74c3`](https://github.com/nextui-org/nextui/commit/2d6ae74c36a157472bd4b06b8580e7db163eddcc), [`2aebfcca5`](https://github.com/nextui-org/nextui/commit/2aebfcca5906fb72a7f751273b38e41a40dc16a3), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`9fe0aa79c`](https://github.com/nextui-org/nextui/commit/9fe0aa79c8d74a29418db6a235db179a5a9242bc), [`606f75726`](https://github.com/nextui-org/nextui/commit/606f75726c6b273ea25528ec3269fa6e82af3349), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+  - @nextui-org/listbox@2.2.0-beta.0
+  - @nextui-org/autocomplete@2.2.0-beta.0
+  - @nextui-org/select@2.3.0-beta.0
+  - @nextui-org/table@2.1.0-beta.0
+  - @nextui-org/accordion@2.1.0-beta.0
+  - @nextui-org/alert@2.1.0-beta.0
+  - @nextui-org/avatar@2.1.0-beta.0
+  - @nextui-org/badge@2.1.0-beta.0
+  - @nextui-org/breadcrumbs@2.1.0-beta.0
+  - @nextui-org/button@2.1.0-beta.0
+  - @nextui-org/calendar@2.1.0-beta.0
+  - @nextui-org/card@2.1.0-beta.0
+  - @nextui-org/checkbox@2.2.0-beta.0
+  - @nextui-org/chip@2.1.0-beta.0
+  - @nextui-org/date-input@2.2.0-beta.0
+  - @nextui-org/date-picker@2.2.0-beta.0
+  - @nextui-org/dropdown@2.2.0-beta.0
+  - @nextui-org/input@2.3.0-beta.0
+  - @nextui-org/code@2.1.0-beta.0
+  - @nextui-org/divider@2.1.0-beta.0
+  - @nextui-org/image@2.1.0-beta.0
+  - @nextui-org/drawer@2.1.0-beta.0
+  - @nextui-org/kbd@2.1.0-beta.0
+  - @nextui-org/link@2.1.0-beta.0
+  - @nextui-org/menu@2.1.0-beta.0
+  - @nextui-org/modal@2.1.0-beta.0
+  - @nextui-org/navbar@2.1.0-beta.0
+  - @nextui-org/pagination@2.1.0-beta.0
+  - @nextui-org/popover@2.2.0-beta.0
+  - @nextui-org/progress@2.1.0-beta.0
+  - @nextui-org/radio@2.2.0-beta.0
+  - @nextui-org/scroll-shadow@2.2.0-beta.0
+  - @nextui-org/ripple@2.1.0-beta.0
+  - @nextui-org/slider@2.3.0-beta.0
+  - @nextui-org/skeleton@2.1.0-beta.0
+  - @nextui-org/spacer@2.1.0-beta.0
+  - @nextui-org/spinner@2.1.0-beta.0
+  - @nextui-org/snippet@2.1.0-beta.0
+  - @nextui-org/switch@2.1.0-beta.0
+  - @nextui-org/tabs@2.1.0-beta.0
+  - @nextui-org/tooltip@2.1.0-beta.0
+  - @nextui-org/user@2.1.0-beta.0
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/framer-utils@2.0.26-beta.0
+
 ## 2.4.8
 
 ### Patch Changes
diff --git a/packages/core/react/README.md b/packages/core/react/README.md
index 841fb0f84d..242f0440c2 100644
--- a/packages/core/react/README.md
+++ b/packages/core/react/README.md
@@ -39,7 +39,7 @@ Visit [https://storybook.nextui.org](https://storybook.nextui.org/) to view the
 Canary versions are available after every merge into `canary` branch. You can install the packages with the tag `canary` in npm to use the latest changes before the next production release.
 
 - [Documentation](https://canary.nextui.org/docs)
-- [Storybook](https://canary-storybook.nextui.org)
+- [Storybook](https://canary-sb.nextui.org)
 
 ## Community
 
@@ -47,7 +47,7 @@ We're excited to see the community adopt NextUI, raise issues, and provide feedb
 Whether it's a feature request, bug report, or a project to showcase, please get involved!
 
 - [Discord](https://discord.gg/9b6yyZKmH4)
-- [Twitter](https://twitter.com/getnextui)
+- [X](https://x.com/getnextui)
 - [GitHub Discussions](https://github.com/nextui-org/nextui/discussions)
 
 ## Contributing
diff --git a/packages/core/react/package.json b/packages/core/react/package.json
index 1dbd682fd3..3e077f1eb6 100644
--- a/packages/core/react/package.json
+++ b/packages/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react",
-  "version": "2.4.8",
+  "version": "2.6.2",
   "description": "🚀 Beautiful and modern React UI library.",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
@@ -30,14 +30,14 @@
     "url": "https://github.com/nextui-org/nextui/issues"
   },
   "scripts": {
-    "prebuild": "node src/scripts/prebuild.js",
     "build": "tsup --dts",
-    "postbuild": "node src/scripts/postbuild.js",
     "dev": "pnpm build:fast --watch",
     "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
     "build:fast": "tsup",
     "prepack": "clean-package",
+    "postbuild": "node src/scripts/postbuild.js",
+    "prebuild": "node src/scripts/prebuild.js",
     "postpack": "clean-package restore"
   },
   "dependencies": {
@@ -62,6 +62,7 @@
     "@nextui-org/user": "workspace:*",
     "@nextui-org/progress": "workspace:*",
     "@nextui-org/input": "workspace:*",
+    "@nextui-org/input-otp": "workspace:*",
     "@nextui-org/popover": "workspace:*",
     "@nextui-org/dropdown": "workspace:*",
     "@nextui-org/image": "workspace:*",
@@ -84,12 +85,15 @@
     "@nextui-org/date-input": "workspace:*",
     "@nextui-org/date-picker": "workspace:*",
     "@nextui-org/framer-utils": "workspace:*",
-    "@react-aria/visually-hidden": "3.8.12"
+    "@nextui-org/drawer": "workspace:*",
+    "@nextui-org/form": "workspace:*",
+    "@nextui-org/alert": "workspace:*",
+    "@react-aria/visually-hidden": "3.8.17"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -97,4 +101,4 @@
     "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json"
-}
\ No newline at end of file
+}
diff --git a/packages/core/react/src/index.ts b/packages/core/react/src/index.ts
index d504dbd361..ff125e4378 100644
--- a/packages/core/react/src/index.ts
+++ b/packages/core/react/src/index.ts
@@ -1,5 +1,5 @@
-"use client";
 // only for development purpose, this directive is added by tsup at build time
+"use client";
 
 export * from "@nextui-org/system";
 export * from "@nextui-org/theme";
@@ -43,6 +43,10 @@ export * from "@nextui-org/autocomplete";
 export * from "@nextui-org/calendar";
 export * from "@nextui-org/date-input";
 export * from "@nextui-org/date-picker";
+export * from "@nextui-org/form";
+export * from "@nextui-org/alert";
+export * from "@nextui-org/drawer";
+export * from "@nextui-org/input-otp";
 
 /**
  * React Aria - Exports
diff --git a/packages/core/react/src/scripts/postbuild.js b/packages/core/react/src/scripts/postbuild.js
index 3dc358b5e1..e8f7a0c060 100644
--- a/packages/core/react/src/scripts/postbuild.js
+++ b/packages/core/react/src/scripts/postbuild.js
@@ -15,12 +15,12 @@ const appsRoutesJsonPath = path.resolve(appsConfigDir, 'routes.json'); // Apps r
 
 const docsComponentsDir = path.resolve(rootDir, 'apps/docs/content/docs/components'); // Docs components directory path
 
-const filePath = './src/index.ts'; // Updated file path
-const backupFilePath = filePath + '.backup.ts'; // Backup file
-
 const themeDir = path.resolve(packagesDir, 'core/theme'); // Theme directory path
 
 const baseDocs = 'https://nextui.org/docs/components';
+const filePath = './src/index.ts'; // Updated file path
+const backupFilePath = filePath + '.backup.ts'; // Backup file
+
 
 const EXCLUDE_LIST = ['.DS_Store'];
 
@@ -71,24 +71,24 @@ function generateComponents() {
 }
 
 function main() {
-    // Restore the original file from the backup
-    fs.copyFile(backupFilePath, filePath, (err) => {
-        if (err) {
-            return console.log(err);
-        }
-        console.log('The original file has been restored.');
-
-        // Delete the backup file
-        fs.unlink(backupFilePath, (err) => {
+    // Generate the components meta data
+    try {
+        // Restore the original file from the backup
+        fs.copyFile(backupFilePath, filePath, (err) => {
             if (err) {
                 return console.log(err);
             }
-            console.log('The backup file has been deleted.');
+            console.log('The original file has been restored.');
+
+            // Delete the backup file
+            fs.unlink(backupFilePath, (err) => {
+                if (err) {
+                    return console.log(err);
+                }
+                console.log('The backup file has been deleted.');
+            });
         });
-    });
 
-    // Generate the components meta data
-    try {
         generateComponents()
     } catch (error) {
         console.error(chalk.red(`Generate the components Error: ${error}`))
diff --git a/packages/core/react/tsup.config.ts b/packages/core/react/tsup.config.ts
index 0ddb926e3b..4ac849569b 100644
--- a/packages/core/react/tsup.config.ts
+++ b/packages/core/react/tsup.config.ts
@@ -5,4 +5,5 @@ export default defineConfig({
   target: "es2019",
   entry: ["src/index.ts", "!src/scripts"],
   format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
 });
diff --git a/packages/core/system-rsc/CHANGELOG.md b/packages/core/system-rsc/CHANGELOG.md
index fae9ad32e0..f90f3e6fee 100644
--- a/packages/core/system-rsc/CHANGELOG.md
+++ b/packages/core/system-rsc/CHANGELOG.md
@@ -1,5 +1,98 @@
 # @nextui-org/system-rsc
 
+## 2.3.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.3.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.2.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.2.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.2.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.2.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.2.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.2.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.2.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.2.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.2.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8), [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a), [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09), [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88), [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56), [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8), [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f), [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0), [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4), [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07)]:
+  - @nextui-org/theme@2.3.0-beta.0
+
 ## 2.1.6
 
 ### Patch Changes
diff --git a/packages/core/system-rsc/package.json b/packages/core/system-rsc/package.json
index 0613b5fc9d..4b62c9a350 100644
--- a/packages/core/system-rsc/package.json
+++ b/packages/core/system-rsc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system-rsc",
-  "version": "2.1.6",
+  "version": "2.3.1",
   "description": "NextUI system primitives compatibles with RSC imports",
   "keywords": [
     "system-rsc"
@@ -34,8 +34,8 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "@nextui-org/theme": ">=2.1.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0-beta.0"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -46,7 +46,7 @@
     "clean-package": "2.2.0"
   },
   "dependencies": {
-    "@react-types/shared": "3.23.1",
+    "@react-types/shared": "3.25.0",
     "clsx": "^1.2.1"
   },
   "clean-package": "../../../clean-package.config.json",
diff --git a/packages/core/system/CHANGELOG.md b/packages/core/system/CHANGELOG.md
index ed4df8c064..634de444a8 100644
--- a/packages/core/system/CHANGELOG.md
+++ b/packages/core/system/CHANGELOG.md
@@ -1,5 +1,169 @@
 # @nextui-org/system
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system-rsc@2.3.1
+  - @nextui-org/react-utils@2.1.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system-rsc@2.3.0
+  - @nextui-org/react-utils@2.1.0
+
+## 2.3.0-beta.11
+
+### Patch Changes
+
+- [#4163](https://github.com/nextui-org/nextui/pull/4163) [`c8f2ec887`](https://github.com/nextui-org/nextui/commit/c8f2ec88752289913968331032b9e7f772c12ec4) Thanks [@wingkwong](https://github.com/wingkwong)! - align `navigate` function parameters with `@react-aria`
+
+- Updated dependencies []:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+
+## 2.3.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system-rsc@2.2.0-beta.8
+  - @nextui-org/react-utils@2.0.18-beta.8
+
+## 2.3.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system-rsc@2.2.0-beta.7
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- [#3470](https://github.com/nextui-org/nextui/pull/3470) [`4607fe2ff`](https://github.com/nextui-org/nextui/commit/4607fe2ff448a536496c2b59ccdfcb217379b6ed) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add reducedMotion setting to Provider (#3395)
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system-rsc@2.2.0-beta.6
+  - @nextui-org/react-utils@2.0.18-beta.7
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system-rsc@2.2.0-beta.5
+  - @nextui-org/react-utils@2.0.18-beta.6
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system-rsc@2.2.0-beta.4
+  - @nextui-org/react-utils@2.0.18-beta.5
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system-rsc@2.2.0-beta.3
+  - @nextui-org/react-utils@2.0.18-beta.3
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system-rsc@2.2.0-beta.2
+  - @nextui-org/react-utils@2.0.18-beta.2
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system-rsc@2.2.0-beta.1
+  - @nextui-org/react-utils@2.0.18-beta.1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d)]:
+  - @nextui-org/system-rsc@2.2.0-beta.0
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.2.6
 
 ### Patch Changes
diff --git a/packages/core/system/package.json b/packages/core/system/package.json
index 50180968be..849d668f53 100644
--- a/packages/core/system/package.json
+++ b/packages/core/system/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/system",
-  "version": "2.2.6",
+  "version": "2.4.1",
   "description": "NextUI system primitives",
   "keywords": [
     "system"
@@ -34,15 +34,15 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "11.9.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "tsup": {
@@ -54,12 +54,13 @@
     ]
   },
   "dependencies": {
-    "@nextui-org/system-rsc": "workspace:*",
+    "@internationalized/date": "3.5.6",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/i18n": "3.11.1",
-    "@internationalized/date": "^3.5.4",
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.10.1"
+    "@react-aria/i18n": "3.12.3",
+    "@nextui-org/system-rsc": "workspace:*",
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/utils": "3.10.4",
+    "@react-types/datepicker": "3.8.3"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/core/system/src/provider-context.ts b/packages/core/system/src/provider-context.ts
index 575b545999..c33e2266a4 100644
--- a/packages/core/system/src/provider-context.ts
+++ b/packages/core/system/src/provider-context.ts
@@ -1,5 +1,6 @@
 import type {SupportedCalendars} from "./types";
-import type {CalendarDate, Calendar} from "@internationalized/date";
+import type {Calendar} from "@internationalized/date";
+import type {DateValue} from "@react-types/datepicker";
 
 import {createContext} from "@nextui-org/react-utils";
 
@@ -23,7 +24,7 @@ export type ProviderContextProps = {
    * or invalid via ARIA.
    * @see https://react-spectrum.adobe.com/react-aria/forms.html
    *
-   * @default "aria"
+   * @default undefined
    */
   validationBehavior?: "aria" | "native";
   /**
@@ -37,14 +38,14 @@ export type ProviderContextProps = {
      * @default CalendarDate(1900, 1, 1)
      *
      */
-    minDate?: CalendarDate;
+    minDate?: DateValue;
     /**
      * The maximum date that can be selected in the calendar.
      * @see https://react-spectrum.adobe.com/internationalized/date/CalendarDate.html
      *
      * @default CalendarDate(2099, 12, 31)
      */
-    maxDate?: CalendarDate;
+    maxDate?: DateValue;
   };
   /**
    * This function helps to reduce the bundle size by providing a custom calendar system.
diff --git a/packages/core/system/src/provider.tsx b/packages/core/system/src/provider.tsx
index 1c10249c7b..45e85e775f 100644
--- a/packages/core/system/src/provider.tsx
+++ b/packages/core/system/src/provider.tsx
@@ -1,12 +1,12 @@
 import type {ModalProviderProps} from "@react-aria/overlays";
 import type {ProviderContextProps} from "./provider-context";
-import type {Href} from "@react-types/shared";
+import type {Href, RouterOptions} from "@react-types/shared";
 
 import {I18nProvider, I18nProviderProps} from "@react-aria/i18n";
 import {RouterProvider} from "@react-aria/utils";
 import {OverlayProvider} from "@react-aria/overlays";
 import {useMemo} from "react";
-import {MotionGlobalConfig} from "framer-motion";
+import {MotionConfig, MotionGlobalConfig} from "framer-motion";
 
 import {ProviderContext} from "./provider-context";
 
@@ -22,6 +22,12 @@ export interface NextUIProviderProps
    * animations in NextUI Components are still omitted if the `disableAnimation` prop is `true`.
    */
   skipFramerMotionAnimations?: boolean;
+  /**
+   * Defines a new default transition for the entire tree.
+   * @default "never"
+   * See: https://www.framer.com/motion/motion-config/#props
+   */
+  reducedMotion?: "user" | "always" | "never";
   /**
    * The locale to apply to the children.
    * @default "en-US"
@@ -31,7 +37,7 @@ export interface NextUIProviderProps
    * Provides a client side router to all nested components such as
    * Link, Menu, Tabs, Table, etc.
    */
-  navigate?: (path: string) => void;
+  navigate?: (path: Href, routerOptions: RouterOptions | undefined) => void;
   /**
    * Convert an `href` provided to a link component to a native `href`
    * For example, a router might accept hrefs relative to a base path,
@@ -45,11 +51,12 @@ export interface NextUIProviderProps
 export const NextUIProvider: React.FC<NextUIProviderProps> = ({
   children,
   navigate,
+  disableAnimation,
   useHref,
-  disableAnimation = false,
   disableRipple = false,
   skipFramerMotionAnimations = disableAnimation,
-  validationBehavior = "aria",
+  reducedMotion = "never",
+  validationBehavior,
   locale = "en-US",
   // if minDate / maxDate are not specified in `defaultDates`
   // then they will be set in `use-date-input.ts` or `use-calendar-base.ts`
@@ -91,7 +98,9 @@ export const NextUIProvider: React.FC<NextUIProviderProps> = ({
   return (
     <ProviderContext value={context}>
       <I18nProvider locale={locale}>
-        <OverlayProvider {...otherProps}>{contents}</OverlayProvider>
+        <MotionConfig reducedMotion={reducedMotion}>
+          <OverlayProvider {...otherProps}>{contents}</OverlayProvider>
+        </MotionConfig>
       </I18nProvider>
     </ProviderContext>
   );
diff --git a/packages/core/theme/CHANGELOG.md b/packages/core/theme/CHANGELOG.md
index d165e2b5a3..e552a633ef 100644
--- a/packages/core/theme/CHANGELOG.md
+++ b/packages/core/theme/CHANGELOG.md
@@ -1,5 +1,222 @@
 # @nextui-org/theme
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Fix should not export list item internal variables type
+
+- [#4206](https://github.com/nextui-org/nextui/pull/4206) [`44958bf`](https://github.com/nextui-org/nextui/commit/44958bf91a1677becd5e9f3c420b7956cf0244d8) Thanks [@vinroger](https://github.com/vinroger)! - Virtualization support added to Listbox and Menu
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.3.0-beta.18
+
+### Patch Changes
+
+- [#4172](https://github.com/nextui-org/nextui/pull/4172) [`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - introduce `isClearable` to Textarea component (#2348, #2112)
+
+- [#4141](https://github.com/nextui-org/nextui/pull/4141) [`922c4a567`](https://github.com/nextui-org/nextui/commit/922c4a5674a74be749db6abeffd153eaf7d3a5c7) Thanks [@wingkwong](https://github.com/wingkwong)! - revise label font size for lg (#3073)
+
+## 2.3.0-beta.17
+
+### Patch Changes
+
+- [#4052](https://github.com/nextui-org/nextui/pull/4052) [`1d5b2b6c1`](https://github.com/nextui-org/nextui/commit/1d5b2b6c1f8672e7339a6f9dc66f0244d7bb2789) Thanks [@macci001](https://github.com/macci001)! - Adding new input-otp component.
+
+## 2.3.0-beta.16
+
+### Patch Changes
+
+- [#4156](https://github.com/nextui-org/nextui/pull/4156) [`d37007c69`](https://github.com/nextui-org/nextui/commit/d37007c69c3e1ff4a66d414cbb1a4a38bb22264c) Thanks [@winchesHe](https://github.com/winchesHe)! - Fix menu item classNames not work (#4119)
+
+## 2.3.0-beta.15
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.3.0-beta.14
+
+### Patch Changes
+
+- [#4105](https://github.com/nextui-org/nextui/pull/4105) [`256d46277`](https://github.com/nextui-org/nextui/commit/256d462771c19d6ca5b969d0ec44419fb560f0ac) Thanks [@winchesHe](https://github.com/winchesHe)! - Add truncate class to the list item to avoid overflow the wrapper
+
+## 2.3.0-beta.13
+
+### Patch Changes
+
+- [#3321](https://github.com/nextui-org/nextui/pull/3321) [`341b5de79`](https://github.com/nextui-org/nextui/commit/341b5de7947655e6b18fa09045f7e10fba5b8c59) Thanks [@winchesHe](https://github.com/winchesHe)! - move circular-progress tv to progress
+
+## 2.3.0-beta.12
+
+### Patch Changes
+
+- [#4094](https://github.com/nextui-org/nextui/pull/4094) [`b9d5d4925`](https://github.com/nextui-org/nextui/commit/b9d5d492519778a4bf071748ec9f2b4e25d8373f) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Virtualization support added to Listbox & Autocomplete
+
+## 2.3.0-beta.11
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.3.0-beta.10
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.3.0-beta.9
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- [#4073](https://github.com/nextui-org/nextui/pull/4073) [`70dc75983`](https://github.com/nextui-org/nextui/commit/70dc7598388022fca04255c3c1623468a38a3803) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert compoentn styles improved
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- [#4071](https://github.com/nextui-org/nextui/pull/4071) [`31349c178`](https://github.com/nextui-org/nextui/commit/31349c178b9b2bd0be9856bc09126a37be68901a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert styles improved
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- [#4054](https://github.com/nextui-org/nextui/pull/4054) [`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert design improved
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- [#3881](https://github.com/nextui-org/nextui/pull/3881) [`54be700e0`](https://github.com/nextui-org/nextui/commit/54be700e04386e95cead7ce63d87015347dd166f) Thanks [@macci001](https://github.com/macci001)! - making input and select styling consistent(#3876)
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- [#3869](https://github.com/nextui-org/nextui/pull/3869) [`0cf91395c`](https://github.com/nextui-org/nextui/commit/0cf91395c7c66a69fb05c7fca4a30cbad9e1e0f8) Thanks [@macci001](https://github.com/macci001)! - fix label placement in input and select
+
+- [#3768](https://github.com/nextui-org/nextui/pull/3768) [`781b85566`](https://github.com/nextui-org/nextui/commit/781b85566ee5eac3f505625462c4f5f14e36ed3a) Thanks [@macci001](https://github.com/macci001)! - fix the fullWidth variant in input and select component. (#3745)
+
+- [#3912](https://github.com/nextui-org/nextui/pull/3912) [`38a54ab49`](https://github.com/nextui-org/nextui/commit/38a54ab497781e17799b37f0061ba50f2dc44e09) Thanks [@sanuj21](https://github.com/sanuj21)! - remove the pseudo cancel btn from input (#3907)
+
+- [#3868](https://github.com/nextui-org/nextui/pull/3868) [`af3c4f706`](https://github.com/nextui-org/nextui/commit/af3c4f706bb88eae02eee594a6db68cdd33bbe88) Thanks [@macci001](https://github.com/macci001)! - replace the use of RTL-specific styles with logical properties.
+
+- [#3657](https://github.com/nextui-org/nextui/pull/3657) [`ae73de1a6`](https://github.com/nextui-org/nextui/commit/ae73de1a61c26e78235ce2d4c38159d486b55d56) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `tailwind-merge` version (#3614)
+
+- [#3909](https://github.com/nextui-org/nextui/pull/3909) [`ad6393ab3`](https://github.com/nextui-org/nextui/commit/ad6393ab33362119203455ef5c8ffbfe1ffa96a1) Thanks [@wingkwong](https://github.com/wingkwong)! - apply tw nested group (#3544, #2324, #2959)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - replaced lodash with native approaches
+
+- [#3248](https://github.com/nextui-org/nextui/pull/3248) [`cb1b3135b`](https://github.com/nextui-org/nextui/commit/cb1b3135bc7e811c9c2e163d4778f9f6eb2ef8c8) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add support for selectorButtonPlacement property (#3015)
+
+- [#3938](https://github.com/nextui-org/nextui/pull/3938) [`a5cac4561`](https://github.com/nextui-org/nextui/commit/a5cac45619e529cf9850f02f416b6bc7cba77f3f) Thanks [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)! - added stripe color gradients for progress (#1933)
+
+- [#3982](https://github.com/nextui-org/nextui/pull/3982) [`d90ad05b1`](https://github.com/nextui-org/nextui/commit/d90ad05b13b36617009cb0e5f57f299aa7bb7bd0) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - introduced Alert component (#2250)
+
+- [#3927](https://github.com/nextui-org/nextui/pull/3927) [`a0d7141db`](https://github.com/nextui-org/nextui/commit/a0d7141db314c6bea27df6b8beb15dae3b1bcb93) Thanks [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)! - separator icon RTL support in Breadcrumbs component (#2486)
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- [#3861](https://github.com/nextui-org/nextui/pull/3861) [`8a33eabb2`](https://github.com/nextui-org/nextui/commit/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4) Thanks [@ShrinidhiUpadhyaya](https://github.com/ShrinidhiUpadhyaya)! - show margin only with label in Switch component (#3791)
+
+- [#3764](https://github.com/nextui-org/nextui/pull/3764) [`559436d46`](https://github.com/nextui-org/nextui/commit/559436d462bdb8739d8c817d1aa98607969d8a07) Thanks [@wingkwong](https://github.com/wingkwong)! - add missing `data-[hover=true]:` for ghost button with danger color
+
+- Updated dependencies [[`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.2.11
 
 ### Patch Changes
diff --git a/packages/core/theme/__tests__/semantic-colors.test.ts b/packages/core/theme/__tests__/semantic-colors.test.ts
index 45d6effb6a..770a1cd9dd 100644
--- a/packages/core/theme/__tests__/semantic-colors.test.ts
+++ b/packages/core/theme/__tests__/semantic-colors.test.ts
@@ -1,5 +1,5 @@
 import {getContrast} from "color2k";
-import get from "lodash.get";
+import {get} from "@nextui-org/shared-utils";
 
 import {semanticColors} from "../src/colors/semantic";
 
diff --git a/packages/core/theme/package.json b/packages/core/theme/package.json
index 316a7accbb..1123a32e9d 100644
--- a/packages/core/theme/package.json
+++ b/packages/core/theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/theme",
-  "version": "2.2.11",
+  "version": "2.4.1",
   "description": "The default theme for NextUI components",
   "keywords": [
     "theme",
@@ -50,14 +50,10 @@
     "color2k": "^2.0.2",
     "deepmerge": "4.3.1",
     "flat": "^5.0.2",
-    "lodash.foreach": "^4.5.0",
-    "lodash.get": "^4.4.2",
-    "lodash.kebabcase": "^4.1.1",
-    "lodash.mapkeys": "^4.6.0",
-    "lodash.omit": "^4.5.0",
     "clsx": "^1.2.1",
     "tailwind-variants": "^0.1.20",
-    "tailwind-merge": "^1.14.0"
+    "tailwind-merge": "^2.5.2",
+    "@nextui-org/shared-utils": "workspace:*"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.4.0"
@@ -65,11 +61,6 @@
   "devDependencies": {
     "@types/color": "^3.0.3",
     "@types/flat": "^5.0.2",
-    "@types/lodash.foreach": "^4.5.7",
-    "@types/lodash.get": "^4.4.7",
-    "@types/lodash.kebabcase": "^4.1.7",
-    "@types/lodash.mapkeys": "^4.6.7",
-    "@types/lodash.omit": "^4.5.7",
     "tailwindcss": "^3.4.0",
     "clean-package": "2.2.0"
   },
diff --git a/packages/core/theme/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts
index a0bd6b45c3..cf5e3b7ce5 100644
--- a/packages/core/theme/src/components/accordion.ts
+++ b/packages/core/theme/src/components/accordion.ts
@@ -66,7 +66,7 @@ const accordionItem = tv({
     startContent: "flex-shrink-0",
     indicator: "text-default-400",
     titleWrapper: "flex-1 flex flex-col text-start",
-    title: "text-foreground text-large",
+    title: "text-foreground text-medium",
     subtitle: "text-small text-foreground-500 font-normal",
     content: "py-2",
   },
diff --git a/packages/core/theme/src/components/alert.ts b/packages/core/theme/src/components/alert.ts
new file mode 100644
index 0000000000..6ec5039767
--- /dev/null
+++ b/packages/core/theme/src/components/alert.ts
@@ -0,0 +1,358 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+import {colorVariants} from "../utils";
+/**
+ * Alert wrapper **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, mainWrapper, title, description, closeButton, alertIcon} = alert({...})
+ *
+ *
+ * <div className={base()}>
+ *    {alertIcon}
+ *    <div className={mainWrapper()}>
+ *       <div className={title()}>Title</div>
+ *       <div className={description()}>Description</div>
+ *   </div>
+ *    <button>
+ *      // close button
+ *    </button>
+ * </div>
+ * ```
+ */
+const alert = tv({
+  slots: {
+    base: "flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1",
+    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit",
+    title: "text-small w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
+    closeButton: "relative text-inherit translate-x-1 -translate-y-1",
+    iconWrapper: "flex-none relative w-9 h-9 rounded-full",
+    alertIcon: "fill-current w-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+  },
+  variants: {
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {},
+    },
+    variant: {
+      solid: {},
+      flat: {},
+      faded: {
+        base: "border-small",
+      },
+      bordered: {
+        base: "border-small bg-transparent",
+      },
+    },
+    radius: {
+      none: {
+        base: "rounded-none",
+      },
+      sm: {
+        base: "rounded-small",
+      },
+      md: {
+        base: "rounded-medium",
+      },
+      lg: {
+        base: "rounded-large",
+      },
+      full: {
+        base: "rounded-full",
+      },
+    },
+    hideIcon: {
+      true: {
+        iconWrapper: "hidden",
+      },
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none",
+      },
+    },
+    hasDescription: {
+      false: {
+        base: "items-start",
+        mainWrapper: "justify-center",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "flat",
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false,
+  },
+  compoundVariants: [
+    // solid / color
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        base: colorVariants.solid.default,
+        closeButton: "data-[hover]:bg-default-100",
+        alertIcon: "text-default-foreground",
+      },
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: colorVariants.solid.primary,
+      },
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: colorVariants.solid.secondary,
+      },
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: colorVariants.solid.success,
+      },
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: colorVariants.solid.warning,
+      },
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: colorVariants.solid.danger,
+      },
+    },
+    // flat & faded / color
+    {
+      variant: ["flat", "faded"],
+      color: "default",
+      class: {
+        base: [
+          colorVariants.flat.default,
+          "bg-default-100 dark:bg-default-50/50",
+          "text-default-foreground",
+        ],
+        description: "text-default-600",
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100 border-default-200",
+      },
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "primary",
+      class: {
+        base: [colorVariants.flat.primary, "bg-primary-50 dark:bg-primary-50/50"],
+        closeButton: "text-primary-500 data-[hover]:bg-primary-200",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100 border-primary-100",
+      },
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "secondary",
+      class: {
+        base: [colorVariants.flat.secondary, "bg-secondary-50 dark:bg-secondary-50/50"],
+        closeButton: "text-secondary-500 data-[hover]:bg-secondary-200",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100 border-secondary-100",
+      },
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "success",
+      class: {
+        base: [colorVariants.flat.success, "bg-success-50 dark:bg-success-50/50"],
+        closeButton: "text-success-500 data-[hover]:bg-success-200",
+        iconWrapper: "bg-success-50 dark:bg-success-100 border-success-100",
+      },
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "warning",
+      class: {
+        base: [colorVariants.flat.warning, "bg-warning-50 dark:bg-warning-50/50"],
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100 border-warning-100",
+      },
+    },
+    {
+      variant: ["flat", "faded"],
+      color: "danger",
+      class: {
+        base: [colorVariants.flat.danger, "bg-danger-50 dark:bg-danger-50/50"],
+        closeButton: "text-danger-500 data-[hover]:bg-danger-200",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100 border-danger-100",
+      },
+    },
+    // faded / color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default-300 dark:border-default-200",
+      },
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary-200 dark:border-primary-100",
+      },
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary-200",
+      },
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success-300 dark:border-success-100",
+      },
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning-300 dark:border-warning-100",
+      },
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        base: "border-danger-200 dark:border-danger-100",
+      },
+    },
+    // bordered / color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        base: [colorVariants.bordered.default],
+        description: "text-default-600",
+        closeButton: "text-default-400",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: [colorVariants.bordered.primary],
+        closeButton: "data-[hover]:bg-primary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: [colorVariants.bordered.secondary],
+        closeButton: "data-[hover]:bg-secondary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: [colorVariants.bordered.success],
+        closeButton: "data-[hover]:bg-success-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: [colorVariants.bordered.warning],
+        closeButton: "data-[hover]:bg-warning-100",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: [colorVariants.bordered.danger],
+        closeButton: "data-[hover]:bg-danger-50",
+      },
+    },
+    // flat & bordered & faded
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small",
+      },
+    },
+    // flat & faded
+    {
+      variant: ["flat", "faded"],
+      class: {
+        iconWrapper: "shadow-small border-1",
+      },
+    },
+    // bordered & color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50",
+      },
+    },
+  ],
+});
+
+export type AlertVariantProps = VariantProps<typeof alert>;
+export type AlertSlots = keyof ReturnType<typeof alert>;
+
+export {alert};
diff --git a/packages/core/theme/src/components/autocomplete.ts b/packages/core/theme/src/components/autocomplete.ts
index a1c6af6a9b..9ca6b7f061 100644
--- a/packages/core/theme/src/components/autocomplete.ts
+++ b/packages/core/theme/src/components/autocomplete.ts
@@ -5,7 +5,7 @@ import {tv} from "../utils/tv";
 const autocomplete = tv({
   slots: {
     base: "group inline-flex flex-column w-full",
-    listboxWrapper: "scroll-py-6 max-h-64 w-full",
+    listboxWrapper: "scroll-py-6 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
     endContentWrapper: "relative flex h-full items-center -mr-2",
diff --git a/packages/core/theme/src/components/breadcrumbs.ts b/packages/core/theme/src/components/breadcrumbs.ts
index b5b2e902b1..ca1ac08b6c 100644
--- a/packages/core/theme/src/components/breadcrumbs.ts
+++ b/packages/core/theme/src/components/breadcrumbs.ts
@@ -23,7 +23,7 @@ const breadcrumbItem = tv({
       // focus ring
       ...dataFocusVisibleClasses,
     ],
-    separator: "text-default-400 px-1",
+    separator: "text-default-400 px-1 rtl:rotate-180",
   },
   variants: {
     color: {
diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
index 7ebf311c7d..3a9de2c9a0 100644
--- a/packages/core/theme/src/components/checkbox.ts
+++ b/packages/core/theme/src/components/checkbox.ts
@@ -78,7 +78,7 @@ const checkbox = tv({
     size: {
       sm: {
         wrapper: [
-          "w-4 h-4 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-4 h-4 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.5)]",
@@ -88,7 +88,7 @@ const checkbox = tv({
       },
       md: {
         wrapper: [
-          "w-5 h-5 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-5 h-5 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.6)]",
@@ -98,7 +98,7 @@ const checkbox = tv({
       },
       lg: {
         wrapper: [
-          "w-6 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-6 h-6 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.7)]",
diff --git a/packages/core/theme/src/components/circular-progress.ts b/packages/core/theme/src/components/circular-progress.ts
deleted file mode 100644
index 604a4f8bbe..0000000000
--- a/packages/core/theme/src/components/circular-progress.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import type {VariantProps} from "tailwind-variants";
-
-import {tv} from "../utils/tv";
-
-/**
- * CircularProgress **Tailwind Variants** component
- *
- * @example
- * ```js
- * const {base, svgWrapper, svg, indicator, value, label} = circularProgress({...})
- *
- * <div className={base()} aria-label="progress" role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max}>
- *   <div className={svgWrapper()}>
- *      <svg className={svg()}>
- *        <circle className={track()} />
- *        <circle className={indicator()} />
- *      </svg>
- *      <span className={value()}>{value}</span>
- *   </div>
- *    <span className={label()}>{label}</span>
- * </div>
- * ```
- */
-const circularProgress = tv({
-  slots: {
-    base: "flex flex-col justify-center gap-1 max-w-fit items-center",
-    label: "",
-    svgWrapper: "relative block",
-    svg: "z-0 relative overflow-hidden",
-    track: "h-full stroke-default-300/50",
-    indicator: "h-full stroke-current",
-    value: "absolute font-normal inset-0 flex items-center justify-center",
-  },
-  variants: {
-    color: {
-      default: {
-        svg: "text-default-400",
-      },
-      primary: {
-        svg: "text-primary",
-      },
-      secondary: {
-        svg: "text-secondary",
-      },
-      success: {
-        svg: "text-success",
-      },
-      warning: {
-        svg: "text-warning",
-      },
-      danger: {
-        svg: "text-danger",
-      },
-    },
-    size: {
-      sm: {
-        svg: "w-8 h-8",
-        label: "text-small",
-        value: "text-[0.5rem]",
-      },
-      md: {
-        svg: "w-10 h-10",
-        label: "text-small",
-        value: "text-[0.55rem]",
-      },
-      lg: {
-        svg: "w-12 h-12",
-        label: "text-medium",
-        value: "text-[0.6rem]",
-      },
-    },
-    isIndeterminate: {
-      true: {
-        svg: "animate-spinner-ease-spin",
-      },
-    },
-    isDisabled: {
-      true: {
-        base: "opacity-disabled cursor-not-allowed",
-      },
-    },
-    disableAnimation: {
-      true: {},
-      false: {
-        indicator: "transition-all !duration-500",
-      },
-    },
-  },
-  defaultVariants: {
-    color: "primary",
-    size: "md",
-    isDisabled: false,
-  },
-  compoundVariants: [
-    // disableAnimation && !isIndeterminate
-    {
-      disableAnimation: true,
-      isIndeterminate: false,
-      class: {
-        svg: "!transition-none motion-reduce:transition-none",
-      },
-    },
-  ],
-});
-
-export type CircularProgressVariantProps = VariantProps<typeof circularProgress>;
-export type CircularProgressSlots = keyof ReturnType<typeof circularProgress>;
-
-export {circularProgress};
diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
index 1036491eec..4334d08d48 100644
--- a/packages/core/theme/src/components/date-input.ts
+++ b/packages/core/theme/src/components/date-input.ts
@@ -141,6 +141,7 @@ const dateInput = tv({
         clearButton: "text-large",
       },
       lg: {
+        label: "text-medium",
         input: "text-medium",
         inputWrapper: "h-12 min-h-12 rounded-large",
       },
@@ -166,13 +167,13 @@ const dateInput = tv({
       outside: {
         base: "flex flex-col data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+8px)] gap-y-1.5",
         label: "w-full text-foreground",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0",
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
       },
       "outside-left": {
         base: "flex-row items-center data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+_8px)] gap-x-2 flex-nowrap",
         label: "relative text-foreground",
         inputWrapper: "relative flex-1",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0",
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
       },
       inside: {
         label: "w-full text-tiny cursor-text",
@@ -387,7 +388,7 @@ const dateInput = tv({
       labelPlacement: "inside",
       size: "lg",
       class: {
-        label: "text-small",
+        label: "text-medium",
         inputWrapper: "h-16 py-2.5 gap-0",
       },
     },
diff --git a/packages/core/theme/src/components/date-picker.ts b/packages/core/theme/src/components/date-picker.ts
index 7a0ebd4dfe..7f8ce52dd8 100644
--- a/packages/core/theme/src/components/date-picker.ts
+++ b/packages/core/theme/src/components/date-picker.ts
@@ -10,7 +10,7 @@ import {tv} from "../utils/tv";
 const datePicker = tv({
   slots: {
     base: "group w-full",
-    selectorButton: "-mr-2 text-inherit",
+    selectorButton: "-mx-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
     calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
diff --git a/packages/core/theme/src/components/drawer.ts b/packages/core/theme/src/components/drawer.ts
new file mode 100644
index 0000000000..3bd749f035
--- /dev/null
+++ b/packages/core/theme/src/components/drawer.ts
@@ -0,0 +1,76 @@
+import {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+
+/**
+ * Modal **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base} = drawer({...})
+ *
+ * <div>
+ *    <button>Open Drawer</button>
+ *    <div className={base()}>
+ *       Drawer Content
+ *    </div>
+ * </div>
+ * ```
+ */
+const drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"],
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]",
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]",
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]",
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]",
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]",
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]",
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]",
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]",
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]",
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none",
+      },
+    },
+    placement: {
+      top: {
+        base: "inset-x-0 top-0 max-w-[none] rounded-t-none",
+      },
+      right: {
+        base: "inset-y-0 right-0 max-h-[none] rounded-r-none",
+      },
+      bottom: {
+        base: "inset-x-0 bottom-0 max-w-[none] rounded-b-none",
+      },
+      left: {
+        base: "inset-y-0 left-0 max-h-[none] rounded-l-none",
+      },
+    },
+  },
+});
+
+export type DrawerVariants = VariantProps<typeof drawer>;
+
+export {drawer};
diff --git a/packages/core/theme/src/components/form.ts b/packages/core/theme/src/components/form.ts
new file mode 100644
index 0000000000..da5301d19a
--- /dev/null
+++ b/packages/core/theme/src/components/form.ts
@@ -0,0 +1,23 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+
+/**
+ * Card **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const classNames = form({...})
+ *
+ * <form className={base()}>
+ *    // form content
+ * </form>
+ * ```
+ */
+const form = tv({
+  base: "flex flex-col gap-2 items-start",
+});
+
+export type FormVariantProps = VariantProps<typeof form>;
+
+export {form};
diff --git a/packages/core/theme/src/components/index.ts b/packages/core/theme/src/components/index.ts
index 7776b24c52..dee45f4401 100644
--- a/packages/core/theme/src/components/index.ts
+++ b/packages/core/theme/src/components/index.ts
@@ -16,7 +16,7 @@ export * from "./pagination";
 export * from "./toggle";
 export * from "./accordion";
 export * from "./progress";
-export * from "./circular-progress";
+export * from "./input-otp";
 export * from "./input";
 export * from "./dropdown";
 export * from "./image";
@@ -38,3 +38,6 @@ export * from "./autocomplete";
 export * from "./calendar";
 export * from "./date-input";
 export * from "./date-picker";
+export * from "./alert";
+export * from "./drawer";
+export * from "./form";
diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts
new file mode 100644
index 0000000000..520d764fed
--- /dev/null
+++ b/packages/core/theme/src/components/input-otp.ts
@@ -0,0 +1,453 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "../utils/tv";
+import {dataFocusVisibleClasses} from "../utils";
+
+const inputOtp = tv({
+  slots: {
+    base: ["relative", "flex", "flex-col", "w-fit"],
+    wrapper: ["group", "flex items-center", "has-[:disabled]:opacity-60"],
+    input: [
+      "absolute",
+      "inset-0",
+      "border-none",
+      "outline-none",
+      "bg-transparent",
+      "text-transparent",
+    ],
+    segmentWrapper: ["inline-flex", "gap-x-1", "py-2"],
+    segment: [
+      "h-10",
+      "w-10",
+      "font-semibold",
+      "flex",
+      "justify-center",
+      "items-center",
+      "border-default-200",
+      "data-[active=true]:border-default-400",
+      "data-[active=true]:scale-110",
+      "shadow-sm",
+      "hover:bg-danger",
+      ...dataFocusVisibleClasses,
+    ],
+    passwordChar: ["w-1", "h-1", "bg-default-800", "rounded-full"],
+    caret: [
+      "animate-[appearance-in_1s_infinite]",
+      "font-extralight",
+      "h-full",
+      "w-full",
+      "flex",
+      "justify-center",
+      "items-center",
+      "text-2xl",
+      "h-[50%]",
+      "w-px",
+      "bg-foreground",
+    ],
+    helperWrapper: ["text-tiny", "mt-0.5", "font-extralight", ""],
+    errorMessage: ["text-tiny text-danger w-full"],
+    description: ["text-tiny text-foreground-400"],
+  },
+  variants: {
+    variant: {
+      flat: {
+        segment: ["border-transparent", "bg-default-100", "data-[active=true]:bg-default-200"],
+      },
+      faded: {
+        segment: ["bg-default-100", "border-medium"],
+      },
+      bordered: {
+        segment: ["border-medium"],
+      },
+      underlined: {
+        segment: [
+          "shadow-none",
+          "relative",
+          "box-border",
+          "!rounded-none",
+          "border-b-medium",
+          "shadow-[0_1px_0px_0_rgba(0,0,0,0.05)]",
+          "border-default-200",
+          "after:content-['']",
+          "after:w-0",
+          "after:origin-center",
+          "after:bg-default-foreground",
+          "after:absolute",
+          "after:left-1/2",
+          "after:-translate-x-1/2",
+          "after:-bottom-[2px]",
+          "after:h-[2px]",
+          "data-[active=true]:border-default-300",
+          "data-[active=true]:after:w-full",
+          "data-[active=true]:scale-100",
+        ],
+      },
+    },
+    isDisabled: {
+      true: {
+        segment: "opacity-disabled pointer-events-none",
+        input: "pointer-events-none",
+      },
+    },
+    isInvalid: {
+      true: {},
+    },
+    isReadOnly: {
+      true: {
+        caret: "bg-transparent",
+        segment: "transition-none data-[active=true]:scale-100",
+      },
+    },
+    fullWidth: {
+      true: {
+        base: "w-full",
+      },
+    },
+    radius: {
+      none: {
+        segment: "rounded-none",
+      },
+      sm: {
+        segment: "rounded-sm",
+      },
+      md: {
+        segment: "rounded-md",
+      },
+      lg: {
+        segment: "rounded-lg",
+      },
+      full: {
+        segment: "rounded-full",
+      },
+    },
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {},
+    },
+    size: {
+      sm: {
+        segment: "h-8 min-h-8 w-8 min-w-8 text-small",
+      },
+      md: {
+        segment: "h-10 min-h-10 w-10 min-w-10 text-small",
+      },
+      lg: {
+        segment: "h-12 min-h-12 w-12 min-w-12 text-medium",
+      },
+    },
+    disableAnimation: {
+      true: {
+        segment: "transition-none",
+        caret: "animate-none",
+      },
+      false: {
+        segment: "transition duration-150",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "flat",
+    color: "default",
+    radius: "md",
+    size: "md",
+  },
+  compoundVariants: [
+    // flat & color
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        segment: ["bg-default-100", "data-[active=true]:bg-default-200"],
+      },
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        segment: ["bg-primary-100", "data-[active=true]:bg-primary-200", "text-primary"],
+        caret: ["bg-primary"],
+        passwordChar: ["bg-primary"],
+      },
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        segment: ["bg-secondary-100", "data-[active=true]:bg-secondary-200", "text-secondary"],
+        caret: ["bg-secondary"],
+        passwordChar: ["bg-secondary"],
+      },
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        segment: ["bg-success-100", "data-[active=true]:bg-success-200", "text-success"],
+        caret: ["bg-success"],
+        passwordChar: ["bg-success"],
+      },
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        segment: ["bg-warning-100", "data-[active=true]:bg-warning-200", "text-warning"],
+        caret: ["bg-warning"],
+        passwordChar: ["bg-warning"],
+      },
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        segment: ["bg-danger-100", "data-[active=true]:bg-danger-200", "text-danger"],
+        caret: ["bg-danger"],
+        passwordChar: ["bg-danger"],
+      },
+    },
+    // faded & color
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        segment: "",
+      },
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        segment: [
+          "bg-primary-100",
+          "text-primary",
+          "border-primary-200",
+          "data-[active=true]:border-primary",
+        ],
+        caret: ["bg-primary"],
+        passwordChar: ["bg-primary"],
+      },
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        segment: [
+          "bg-secondary-100",
+          "text-secondary",
+          "border-secondary-200",
+          "data-[active=true]:border-secondary",
+        ],
+        caret: ["bg-secondary"],
+        passwordChar: ["bg-secondary"],
+      },
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        segment: [
+          "bg-success-100",
+          "text-success",
+          "border-success-200",
+          "data-[active=true]:border-success",
+        ],
+        caret: ["bg-success"],
+        passwordChar: ["bg-success"],
+      },
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        segment: [
+          "bg-warning-100",
+          "text-warning",
+          "border-warning-200",
+          "data-[active=true]:border-warning",
+        ],
+        caret: ["bg-warning"],
+        passwordChar: ["bg-warning"],
+      },
+    },
+    {
+      variant: "faded",
+      color: "danger",
+      class: {
+        segment: [
+          "bg-danger-100",
+          "text-danger",
+          "border-danger-200",
+          "data-[active=true]:border-danger",
+        ],
+        caret: ["bg-danger"],
+        passwordChar: ["bg-danger"],
+      },
+    },
+    // bordered & color
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        segment:
+          "data-[has-value=true]:text-default-foreground data-[active=true]:border-foreground",
+      },
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        segment: ["border-primary-200", "text-primary", "data-[active=true]:border-primary"],
+        caret: ["bg-primary"],
+        passwordChar: ["bg-primary"],
+      },
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        segment: ["border-secondary-200", "text-secondary", "data-[active=true]:border-secondary"],
+        caret: ["bg-secondary"],
+        passwordChar: ["bg-secondary"],
+      },
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        segment: ["border-success-200", "text-success", "data-[active=true]:border-success"],
+        caret: ["bg-success"],
+        passwordChar: ["bg-success"],
+      },
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        segment: ["border-warning-200", "text-warning", "data-[active=true]:border-warning"],
+        caret: ["bg-warning"],
+        passwordChar: ["bg-warning"],
+      },
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        segment: ["border-danger-200", "text-danger", "data-[active=true]:border-danger"],
+        caret: ["bg-danger"],
+        passwordChar: ["bg-danger"],
+      },
+    },
+    // underlined & color
+    {
+      variant: "underlined",
+      color: "default",
+      class: {
+        segment: "data-[has-value=true]:text-default-foreground after:bg-foreground",
+      },
+    },
+    {
+      variant: "underlined",
+      color: "primary",
+      class: {
+        segment: ["border-primary-200", "text-primary", "after:bg-primary"],
+        caret: ["bg-primary"],
+        passwordChar: ["bg-primary"],
+      },
+    },
+    {
+      variant: "underlined",
+      color: "secondary",
+      class: {
+        segment: ["border-secondary-200", "text-secondary", "after:bg-secondary"],
+        caret: ["bg-secondary"],
+        passwordChar: ["bg-secondary"],
+      },
+    },
+    {
+      variant: "underlined",
+      color: "success",
+      class: {
+        segment: ["border-success-200", "text-success", "after:bg-success"],
+        caret: ["bg-success"],
+        passwordChar: ["bg-success"],
+      },
+    },
+    {
+      variant: "underlined",
+      color: "warning",
+      class: {
+        segment: ["border-warning-200", "text-warning", "after:bg-warning"],
+        caret: ["bg-warning"],
+        passwordChar: ["bg-warning"],
+      },
+    },
+    {
+      variant: "underlined",
+      color: "danger",
+      class: {
+        segment: ["border-danger-200", "text-danger", "after:bg-danger"],
+        caret: ["bg-danger"],
+        passwordChar: ["bg-danger"],
+      },
+    },
+    // isInvalid and flat
+    {
+      variant: "flat",
+      isInvalid: true,
+      class: {
+        segment: ["bg-danger-50", "data-[active=true]:bg-danger-100", "text-danger"],
+        caret: ["bg-danger"],
+      },
+    },
+    // isInvalid and faded
+    {
+      variant: "faded",
+      isInvalid: true,
+      class: {
+        segment: [
+          "bg-danger-50",
+          "text-danger",
+          "border-danger-200",
+          "data-[active=true]:border-danger-400",
+        ],
+        caret: ["bg-danger"],
+      },
+    },
+    // isInvalid and bordered
+    {
+      variant: "bordered",
+      isInvalid: true,
+      class: {
+        segment: ["border-danger-200", "text-danger", "data-[active=true]:border-danger-400"],
+        caret: ["bg-danger"],
+      },
+    },
+    // isInvalid anf underlined
+    {
+      variant: "underlined",
+      isInvalid: true,
+      class: {
+        segment: ["border-danger-200", "text-danger", "data-[active=true]:after:bg-danger-400"],
+        caret: ["bg-danger"],
+      },
+    },
+    // disableAnimation and underlined
+    {
+      disableAnimation: false,
+      variant: "underlined",
+      class: {
+        segment: "after:transition-width motion-reduce:after:transition-none",
+      },
+    },
+  ],
+});
+
+export type InputOtpVariantProps = VariantProps<typeof inputOtp>;
+export type InputOtpSlots = keyof ReturnType<typeof inputOtp>;
+export type InputOtpReturnType = ReturnType<typeof inputOtp>;
+
+export {inputOtp};
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 43c0741982..5cb6ef14a5 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -29,6 +29,8 @@ const input = tv({
       "z-10",
       "pointer-events-none",
       "origin-top-left",
+      "flex-shrink-0",
+      // Using RTL here as Tailwind CSS doesn't support `start` and `end` logical properties for transforms yet.
       "rtl:origin-top-right",
       "subpixel-antialiased",
       "block",
@@ -50,10 +52,10 @@ const input = tv({
       "p-2",
       "-m-2",
       "z-10",
-      "hidden",
       "absolute",
       "end-3",
       "start-auto",
+      "pointer-events-none",
       "appearance-none",
       "outline-none",
       "select-none",
@@ -74,7 +76,7 @@ const input = tv({
       flat: {
         inputWrapper: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
+          "data-[hover=true]:bg-default-50",
           "group-data-[focus=true]:bg-default-100",
         ],
       },
@@ -83,7 +85,7 @@ const input = tv({
           "bg-default-100",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400",
+          "data-[hover=true]:border-default-400 focus-within:border-default-400",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -143,6 +145,7 @@ const input = tv({
         clearButton: "text-large",
       },
       lg: {
+        label: "text-medium",
         inputWrapper: "h-12 min-h-12 rounded-large",
         input: "text-medium",
         clearButton: "text-large",
@@ -176,7 +179,7 @@ const input = tv({
         label: "relative text-foreground pe-2 ps-2 pointer-events-auto",
       },
       inside: {
-        label: "text-tiny cursor-text",
+        label: "cursor-text",
         inputWrapper: "flex-col items-start justify-center gap-0",
         innerWrapper: "group-data-[has-label=true]:items-end",
       },
@@ -185,11 +188,16 @@ const input = tv({
       true: {
         base: "w-full",
       },
+      false: {},
     },
     isClearable: {
       true: {
-        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
-        clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+        input: "peer pe-6 input-search-cancel-button-none",
+        clearButton: [
+          "peer-data-[filled=true]:pointer-events-auto",
+          "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+          "peer-data-[filled=true]:scale-100",
+        ],
       },
     },
     isDisabled: {
@@ -207,8 +215,7 @@ const input = tv({
     },
     isRequired: {
       true: {
-        label:
-          "after:content-['*'] after:text-danger after:ml-0.5 rtl:after:ml-[unset] rtl:after:mr-0.5",
+        label: "after:content-['*'] after:text-danger after:ms-0.5",
       },
     },
     isMultiline: {
@@ -217,6 +224,7 @@ const input = tv({
         inputWrapper: "!h-auto",
         innerWrapper: "items-start group-data-[has-label=true]:items-start",
         input: "resize-none data-[hide-scroll=true]:scrollbar-hide",
+        clearButton: "absolute top-2 right-2 rtl:right-auto rtl:left-2 z-10",
       },
     },
     disableAnimation: {
@@ -234,7 +242,14 @@ const input = tv({
           "motion-reduce:transition-none",
           "transition-[transform,color,left,opacity]",
         ],
-        clearButton: ["transition-opacity", "motion-reduce:transition-none"],
+        clearButton: [
+          "scale-90",
+          "ease-out",
+          "duration-150",
+          "transition-[opacity,transform]",
+          "motion-reduce:transition-none",
+          "motion-reduce:scale-100",
+        ],
       },
     },
   },
@@ -261,8 +276,8 @@ const input = tv({
       color: "primary",
       class: {
         inputWrapper: [
-          "bg-primary-50",
-          "data-[hover=true]:bg-primary-100",
+          "bg-primary-100",
+          "data-[hover=true]:bg-primary-50",
           "text-primary",
           "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary",
@@ -276,9 +291,9 @@ const input = tv({
       color: "secondary",
       class: {
         inputWrapper: [
-          "bg-secondary-50",
+          "bg-secondary-100",
           "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
+          "data-[hover=true]:bg-secondary-50",
           "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary",
         ],
@@ -291,12 +306,12 @@ const input = tv({
       color: "success",
       class: {
         inputWrapper: [
-          "bg-success-50",
+          "bg-success-100",
           "text-success-600",
           "dark:text-success",
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
-          "data-[hover=true]:bg-success-100",
+          "data-[hover=true]:bg-success-50",
           "group-data-[focus=true]:bg-success-50",
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
@@ -308,12 +323,12 @@ const input = tv({
       color: "warning",
       class: {
         inputWrapper: [
-          "bg-warning-50",
+          "bg-warning-100",
           "text-warning-600",
           "dark:text-warning",
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
-          "data-[hover=true]:bg-warning-100",
+          "data-[hover=true]:bg-warning-50",
           "group-data-[focus=true]:bg-warning-50",
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
@@ -325,12 +340,12 @@ const input = tv({
       color: "danger",
       class: {
         inputWrapper: [
-          "bg-danger-50",
+          "bg-danger-100",
           "text-danger",
           "dark:text-danger-500",
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
+          "data-[hover=true]:bg-danger-50",
           "group-data-[focus=true]:bg-danger-50",
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",
@@ -575,7 +590,6 @@ const input = tv({
       labelPlacement: "inside",
       size: "lg",
       class: {
-        label: "text-small",
         inputWrapper: "h-16 py-2.5 gap-0",
       },
     },
@@ -861,6 +875,18 @@ const input = tv({
         inputWrapper: "data-[has-multiple-rows=true]:rounded-large",
       },
     },
+    // isClearable & isMultiline
+    {
+      isClearable: true,
+      isMultiline: true,
+      class: {
+        clearButton: [
+          "group-data-[has-value=true]:opacity-70 group-data-[has-value=true]:block",
+          "group-data-[has-value=true]:scale-100",
+          "group-data-[has-value=true]:pointer-events-auto",
+        ],
+      },
+    },
   ],
 });
 
diff --git a/packages/core/theme/src/components/menu.ts b/packages/core/theme/src/components/menu.ts
index b5abf8f83e..2e4fb7bb4b 100644
--- a/packages/core/theme/src/components/menu.ts
+++ b/packages/core/theme/src/components/menu.ts
@@ -11,7 +11,7 @@ import {dataFocusVisibleClasses} from "../utils";
  */
 const menu = tv({
   slots: {
-    base: "w-full relative flex flex-col gap-1 p-1",
+    base: "w-full relative flex flex-col gap-1 p-1 overflow-hidden",
     list: "w-full flex flex-col gap-0.5 outline-none",
     emptyContent: [
       "h-10",
@@ -144,6 +144,17 @@ const menuItem = tv({
         base: "data-[hover=true]:transition-colors",
       },
     },
+    // If the child isn't a string, the truncate such as `overflow, white-space, text-overflow` css won't be extended to the child, so we remove the truncate class here
+    hasTitleTextChild: {
+      true: {
+        title: "truncate",
+      },
+    },
+    hasDescriptionTextChild: {
+      true: {
+        description: "truncate",
+      },
+    },
   },
   defaultVariants: {
     variant: "solid",
diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
index b98f3d24f0..4aeeb471f1 100644
--- a/packages/core/theme/src/components/modal.ts
+++ b/packages/core/theme/src/components/modal.ts
@@ -59,9 +59,7 @@ const modal = tv({
       "outline-none",
       "select-none",
       "top-1",
-      "right-1",
-      "rtl:left-1",
-      "rtl:right-[unset]",
+      "end-1",
       "p-2",
       "text-foreground-500",
       "rounded-full",
diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts
index cef7fb35ff..03becc089a 100644
--- a/packages/core/theme/src/components/progress.ts
+++ b/packages/core/theme/src/components/progress.ts
@@ -92,7 +92,7 @@ const progress = tv(
       },
       isStriped: {
         true: {
-          indicator: "bg-stripe-gradient bg-[length:1.25rem_1.25rem]",
+          indicator: "bg-stripe-gradient-default bg-stripe-size",
         },
       },
       isIndeterminate: {
@@ -129,6 +129,43 @@ const progress = tv(
           indicator: "!transition-none motion-reduce:transition-none",
         },
       },
+      {
+        color: "primary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-primary bg-stripe-size",
+        },
+      },
+      {
+        color: "secondary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-secondary bg-stripe-size",
+        },
+      },
+      {
+        color: "success",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-success bg-stripe-size",
+        },
+      },
+
+      {
+        color: "warning",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-warning bg-stripe-size",
+        },
+      },
+
+      {
+        color: "danger",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-danger bg-stripe-size",
+        },
+      },
     ],
   },
   {
@@ -136,7 +173,110 @@ const progress = tv(
   },
 );
 
+/**
+ * CircularProgress **Tailwind Variants** component
+ *
+ * @example
+ * ```js
+ * const {base, svgWrapper, svg, indicator, value, label} = circularProgress({...})
+ *
+ * <div className={base()} aria-label="progress" role="progressbar" aria-valuenow={value} aria-valuemin={min} aria-valuemax={max}>
+ *   <div className={svgWrapper()}>
+ *      <svg className={svg()}>
+ *        <circle className={track()} />
+ *        <circle className={indicator()} />
+ *      </svg>
+ *      <span className={value()}>{value}</span>
+ *   </div>
+ *    <span className={label()}>{label}</span>
+ * </div>
+ * ```
+ */
+const circularProgress = tv({
+  slots: {
+    base: "flex flex-col justify-center gap-1 max-w-fit items-center",
+    label: "",
+    svgWrapper: "relative block",
+    svg: "z-0 relative overflow-hidden",
+    track: "h-full stroke-default-300/50",
+    indicator: "h-full stroke-current",
+    value: "absolute font-normal inset-0 flex items-center justify-center",
+  },
+  variants: {
+    color: {
+      default: {
+        svg: "text-default-400",
+      },
+      primary: {
+        svg: "text-primary",
+      },
+      secondary: {
+        svg: "text-secondary",
+      },
+      success: {
+        svg: "text-success",
+      },
+      warning: {
+        svg: "text-warning",
+      },
+      danger: {
+        svg: "text-danger",
+      },
+    },
+    size: {
+      sm: {
+        svg: "w-8 h-8",
+        label: "text-small",
+        value: "text-[0.5rem]",
+      },
+      md: {
+        svg: "w-10 h-10",
+        label: "text-small",
+        value: "text-[0.55rem]",
+      },
+      lg: {
+        svg: "w-12 h-12",
+        label: "text-medium",
+        value: "text-[0.6rem]",
+      },
+    },
+    isIndeterminate: {
+      true: {
+        svg: "animate-spinner-ease-spin",
+      },
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled cursor-not-allowed",
+      },
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        indicator: "transition-all !duration-500",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false,
+  },
+  compoundVariants: [
+    // disableAnimation && !isIndeterminate
+    {
+      disableAnimation: true,
+      isIndeterminate: false,
+      class: {
+        svg: "!transition-none motion-reduce:transition-none",
+      },
+    },
+  ],
+});
+
 export type ProgressVariantProps = VariantProps<typeof progress>;
 export type ProgressSlots = keyof ReturnType<typeof progress>;
+export type CircularProgressVariantProps = VariantProps<typeof circularProgress>;
+export type CircularProgressSlots = keyof ReturnType<typeof circularProgress>;
 
-export {progress};
+export {progress, circularProgress};
diff --git a/packages/core/theme/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
index 30f0feeacb..a5161981fd 100644
--- a/packages/core/theme/src/components/radio.ts
+++ b/packages/core/theme/src/components/radio.ts
@@ -97,14 +97,14 @@ const radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-medium",
         description: "text-small",
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-large",
         description: "text-medium",
       },
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index a490c59fba..67c216126e 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -5,12 +5,13 @@ import {tv} from "../utils/tv";
 
 const select = tv({
   slots: {
-    base: ["group inline-flex flex-col relative w-full"],
+    base: ["group inline-flex flex-col relative"],
     label: [
       "block",
       "absolute",
       "z-10",
       "origin-top-left",
+      // Using RTL here as Tailwind CSS doesn't support `start` and `end` logical properties for transforms yet.
       "rtl:origin-top-right",
       "subpixel-antialiased",
       "text-small",
@@ -24,8 +25,8 @@ const select = tv({
       "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute end-3 w-4 h-4",
     spinner: "absolute end-3",
-    value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"],
-    listboxWrapper: "scroll-py-6 max-h-64 w-full",
+    value: ["text-foreground-500", "font-normal", "w-full", "text-start"],
+    listboxWrapper: "scroll-py-6 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
     helperWrapper: "p-1 flex relative flex-col gap-1.5",
@@ -37,17 +38,16 @@ const select = tv({
       flat: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100",
+          "data-[hover=true]:bg-default-50",
+          "group-data-[focus=true]:bg-default-50",
         ],
       },
       faded: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400",
+          "data-[hover=true]:border-default-400 data-[focus=true]:border-default-400 data-[open=true]:border-default-400",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -58,7 +58,6 @@ const select = tv({
           "data-[hover=true]:border-default-400",
           "data-[open=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground",
         ],
         value: "group-data-[has-value=true]:text-default-foreground",
       },
@@ -146,6 +145,9 @@ const select = tv({
       true: {
         base: "w-full",
       },
+      false: {
+        base: "min-w-40",
+      },
     },
     isDisabled: {
       true: {
@@ -186,6 +188,7 @@ const select = tv({
         label: [
           "will-change-auto",
           "origin-top-left",
+          // Using RTL here as Tailwind CSS doesn't support `start` and `end` logical properties for transforms yet.
           "rtl:origin-top-right",
           "!duration-200",
           "!ease-out",
@@ -300,7 +303,8 @@ const select = tv({
       variant: "faded",
       color: "primary",
       class: {
-        trigger: "data-[hover=true]:border-primary",
+        trigger:
+          "data-[hover=true]:border-primary data-[focus=true]:border-primary data-[open=true]:border-primary",
         label: "text-primary",
       },
     },
@@ -308,7 +312,8 @@ const select = tv({
       variant: "faded",
       color: "secondary",
       class: {
-        trigger: "data-[hover=true]:border-secondary",
+        trigger:
+          "data-[hover=true]:border-secondary data-[focus=true]:border-secondary data-[open=true]:border-secondary",
         label: "text-secondary",
       },
     },
@@ -316,7 +321,8 @@ const select = tv({
       variant: "faded",
       color: "success",
       class: {
-        trigger: "data-[hover=true]:border-success",
+        trigger:
+          "data-[hover=true]:border-success data-[focus=true]:border-success data-[open=true]:border-success",
         label: "text-success",
       },
     },
@@ -324,7 +330,8 @@ const select = tv({
       variant: "faded",
       color: "warning",
       class: {
-        trigger: "data-[hover=true]:border-warning",
+        trigger:
+          "data-[hover=true]:border-warning data-[focus=true]:border-warning data-[open=true]:border-warning",
         label: "text-warning",
       },
     },
@@ -332,7 +339,8 @@ const select = tv({
       variant: "faded",
       color: "danger",
       class: {
-        trigger: "data-[hover=true]:border-danger",
+        trigger:
+          "data-[hover=true]:border-danger data-[focus=true]:border-danger data-[open=true]:border-danger",
         label: "text-danger",
       },
     },
@@ -534,7 +542,7 @@ const select = tv({
       labelPlacement: "inside",
       size: "lg",
       class: {
-        label: "text-small",
+        label: "text-medium",
         trigger: "h-16 min-h-16 py-2.5 gap-0",
       },
     },
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 80988897b2..f906987e4e 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -56,9 +56,9 @@ const table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "",
-    tr: ["group", "outline-none", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-none", ...dataFocusVisibleClasses],
     th: [
-      "group",
+      "group/th",
       "px-3",
       "h-10",
       "text-start",
@@ -95,8 +95,8 @@ const table = tv({
       "before:opacity-0",
       "data-[selected=true]:before:opacity-100",
       // disabled
-      "group-data-[disabled=true]:text-foreground-300",
-      "group-data-[disabled=true]:cursor-not-allowed",
+      "group-data-[disabled=true]/tr:text-foreground-300",
+      "group-data-[disabled=true]/tr:cursor-not-allowed",
     ],
     tfoot: "",
     sortIcon: [
@@ -107,7 +107,7 @@ const table = tv({
       "inline-block",
       "transition-transform-opacity",
       "data-[visible=true]:opacity-100",
-      "group-data-[hover=true]:opacity-100",
+      "group-data-[hover=true]/th:opacity-100",
       "data-[direction=ascending]:rotate-180",
     ],
     emptyWrapper: "text-foreground-400 align-middle text-center h-40",
@@ -178,9 +178,9 @@ const table = tv({
     isStriped: {
       true: {
         td: [
-          "group-data-[odd=true]:before:bg-default-100",
-          "group-data-[odd=true]:before:opacity-100",
-          "group-data-[odd=true]:before:-z-10",
+          "group-data-[odd=true]/tr:before:bg-default-100",
+          "group-data-[odd=true]/tr:before:opacity-100",
+          "group-data-[odd=true]/tr:before:-z-10",
         ],
       },
     },
@@ -199,8 +199,8 @@ const table = tv({
       true: {
         tr: "cursor-default",
         td: [
-          "group-aria-[selected=false]:group-data-[hover=true]:before:bg-default-100",
-          "group-aria-[selected=false]:group-data-[hover=true]:before:opacity-70",
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100",
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70",
         ],
       },
     },
@@ -208,13 +208,13 @@ const table = tv({
       true: {
         td: [
           // first
-          "group-data-[first=true]:first:before:rounded-ts-lg",
-          "group-data-[first=true]:last:before:rounded-te-lg",
+          "group-data-[first=true]/tr:first:before:rounded-ts-lg",
+          "group-data-[first=true]/tr:last:before:rounded-te-lg",
           // middle
-          "group-data-[middle=true]:before:rounded-none",
+          "group-data-[middle=true]/tr:before:rounded-none",
           // last
-          "group-data-[last=true]:first:before:rounded-bs-lg",
-          "group-data-[last=true]:last:before:rounded-be-lg",
+          "group-data-[last=true]/tr:first:before:rounded-bs-lg",
+          "group-data-[last=true]/tr:last:before:rounded-be-lg",
         ],
       },
       false: {
@@ -259,42 +259,42 @@ const table = tv({
       isStriped: true,
       color: "default",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-default/60",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60",
       },
     },
     {
       isStriped: true,
       color: "primary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-primary/20",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20",
       },
     },
     {
       isStriped: true,
       color: "secondary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-secondary/20",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20",
       },
     },
     {
       isStriped: true,
       color: "success",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-success/20",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20",
       },
     },
     {
       isStriped: true,
       color: "warning",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-warning/20",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20",
       },
     },
     {
       isStriped: true,
       color: "danger",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-danger/20",
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20",
       },
     },
   ],
diff --git a/packages/core/theme/src/components/toggle.ts b/packages/core/theme/src/components/toggle.ts
index 8b70dcf2be..a06217e8ae 100644
--- a/packages/core/theme/src/components/toggle.ts
+++ b/packages/core/theme/src/components/toggle.ts
@@ -54,10 +54,10 @@ const toggle = tv({
       "rounded-full",
       "origin-right",
     ],
-    startContent: "z-0 absolute left-1.5 rtl:right-1.5 rtl:left-[unset] text-current",
-    endContent: "z-0 absolute right-1.5 rtl:left-1.5 rtl:right-[unset] text-default-600",
+    startContent: "z-0 absolute start-1.5 text-current",
+    endContent: "z-0 absolute end-1.5 text-default-600",
     thumbIcon: "text-black",
-    label: "relative text-foreground select-none",
+    label: "relative text-foreground select-none ms-2",
   },
   variants: {
     color: {
@@ -100,33 +100,33 @@ const toggle = tv({
     },
     size: {
       sm: {
-        wrapper: "w-10 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-10 h-6",
         thumb: [
           "w-4 h-4 text-tiny",
           //selected
-          "group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4",
+          "group-data-[selected=true]:ms-4",
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
         label: "text-small",
       },
       md: {
-        wrapper: "w-12 h-7 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-12 h-7",
         thumb: [
           "w-5 h-5 text-small",
           //selected
-          "group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5",
+          "group-data-[selected=true]:ms-5",
         ],
         endContent: "text-small",
         startContent: "text-small",
         label: "text-medium",
       },
       lg: {
-        wrapper: "w-14 h-8 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-14 h-8",
         thumb: [
           "w-6 h-6 text-medium",
           //selected
-          "group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6",
+          "group-data-[selected=true]:ms-6",
         ],
         endContent: "text-medium",
         startContent: "text-medium",
diff --git a/packages/core/theme/src/plugin.ts b/packages/core/theme/src/plugin.ts
index c3bcbdfd91..a8788d3d79 100644
--- a/packages/core/theme/src/plugin.ts
+++ b/packages/core/theme/src/plugin.ts
@@ -5,12 +5,8 @@
 
 import Color from "color";
 import plugin from "tailwindcss/plugin.js";
-import get from "lodash.get";
-import omit from "lodash.omit";
-import forEach from "lodash.foreach";
-import mapKeys from "lodash.mapkeys";
-import kebabCase from "lodash.kebabcase";
 import deepMerge from "deepmerge";
+import {omit, kebabCase, mapKeys} from "@nextui-org/shared-utils";
 
 import {semanticColors, commonColors} from "./colors";
 import {animations} from "./animations";
@@ -63,7 +59,7 @@ const resolveConfig = (
     // flatten color definitions
     const flatColors = flattenThemeObject(colors) as Record<string, string>;
 
-    const flatLayout = layout ? mapKeys(layout, (value, key) => kebabCase(key)) : {};
+    const flatLayout = layout ? mapKeys(layout, (_, key) => kebabCase(key)) : {};
 
     // resolved.variants
     resolved.variants.push({
@@ -152,6 +148,9 @@ const corePlugin = (
 ) => {
   const resolved = resolveConfig(themes, defaultTheme, prefix);
 
+  const createStripeGradient = (stripeColor: string, backgroundColor: string) =>
+    `linear-gradient(45deg,  hsl(var(--${prefix}-${stripeColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 25%,  hsl(var(--${prefix}-${backgroundColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 50%,  hsl(var(--${prefix}-${stripeColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})) 75%,  hsl(var(--${prefix}-${backgroundColor})))`;
+
   return plugin(
     ({addBase, addUtilities, addVariant}) => {
       // add base classNames
@@ -216,9 +215,16 @@ const corePlugin = (
             medium: `var(--${prefix}-box-shadow-medium)`,
             large: `var(--${prefix}-box-shadow-large)`,
           },
+          backgroundSize: {
+            "stripe-size": "1.25rem 1.25rem",
+          },
           backgroundImage: {
-            "stripe-gradient":
-              "linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent)",
+            "stripe-gradient-default": createStripeGradient("default-200", "default-400"),
+            "stripe-gradient-primary": createStripeGradient("primary-200", "primary"),
+            "stripe-gradient-secondary": createStripeGradient("secondary-200", "secondary"),
+            "stripe-gradient-success": createStripeGradient("success-200", "success"),
+            "stripe-gradient-warning": createStripeGradient("warning-200", "warning"),
+            "stripe-gradient-danger": createStripeGradient("danger-200", "danger"),
           },
           transitionDuration: {
             0: "0ms",
@@ -246,8 +252,8 @@ export const nextui = (config: NextUIPluginConfig = {}): ReturnType<typeof plugi
     addCommonColors = false,
   } = config;
 
-  const userLightColors = get(themeObject, "light.colors", {});
-  const userDarkColors = get(themeObject, "dark.colors", {});
+  const userLightColors = themeObject?.light?.colors || {};
+  const userDarkColors = themeObject?.dark?.colors || {};
 
   const defaultLayoutObj =
     userLayout && typeof userLayout === "object"
@@ -268,7 +274,7 @@ export const nextui = (config: NextUIPluginConfig = {}): ReturnType<typeof plugi
   // get other themes from the config different from light and dark
   let otherThemes = omit(themeObject, ["light", "dark"]) || {};
 
-  forEach(otherThemes, ({extend, colors, layout}, themeName) => {
+  Object.entries(otherThemes).forEach(([themeName, {extend, colors, layout}]) => {
     const baseTheme = extend && isBaseTheme(extend) ? extend : defaultExtendTheme;
 
     if (colors && typeof colors === "object") {
@@ -283,12 +289,12 @@ export const nextui = (config: NextUIPluginConfig = {}): ReturnType<typeof plugi
   });
 
   const light: ConfigTheme = {
-    layout: deepMerge(baseLayouts.light, get(themeObject, "light.layout", {})),
+    layout: deepMerge(baseLayouts.light, themeObject?.light?.layout || {}),
     colors: deepMerge(semanticColors.light, userLightColors),
   };
 
   const dark = {
-    layout: deepMerge(baseLayouts.dark, get(themeObject, "dark.layout", {})),
+    layout: deepMerge(baseLayouts.dark, themeObject?.dark?.layout || {}),
     colors: deepMerge(semanticColors.dark, userDarkColors),
   };
 
diff --git a/packages/core/theme/src/utilities/custom.ts b/packages/core/theme/src/utilities/custom.ts
index 3c5d8d73b3..782b301df9 100644
--- a/packages/core/theme/src/utilities/custom.ts
+++ b/packages/core/theme/src/utilities/custom.ts
@@ -17,4 +17,9 @@ export default {
   ".tap-highlight-transparent": {
     "-webkit-tap-highlight-color": "transparent",
   },
+  ".input-search-cancel-button-none": {
+    "&::-webkit-search-cancel-button": {
+      "-webkit-appearance": "none",
+    },
+  },
 };
diff --git a/packages/core/theme/src/utils/cn.ts b/packages/core/theme/src/utils/cn.ts
index d1f24280bc..7cff18742a 100644
--- a/packages/core/theme/src/utils/cn.ts
+++ b/packages/core/theme/src/utils/cn.ts
@@ -10,7 +10,7 @@ import {twMergeConfig} from "./tw-merge-config";
  *
  * So we can use classes like `text-small` or `text-default-500` and override them.
  */
-const twMerge = extendTailwindMerge(twMergeConfig);
+const twMerge = extendTailwindMerge({extend: twMergeConfig});
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
diff --git a/packages/core/theme/src/utils/index.ts b/packages/core/theme/src/utils/index.ts
index 262655a859..2a096ff86a 100644
--- a/packages/core/theme/src/utils/index.ts
+++ b/packages/core/theme/src/utils/index.ts
@@ -11,4 +11,5 @@ export {
 export type {SlotsToClasses} from "./types";
 export {colorVariants} from "./variants";
 export {COMMON_UNITS, twMergeConfig} from "./tw-merge-config";
+export {mergeClasses} from "./merge-classes";
 export {cn} from "./cn";
diff --git a/packages/core/theme/src/utils/merge-classes.ts b/packages/core/theme/src/utils/merge-classes.ts
new file mode 100644
index 0000000000..02ab8a914f
--- /dev/null
+++ b/packages/core/theme/src/utils/merge-classes.ts
@@ -0,0 +1,26 @@
+import type {SlotsToClasses} from "./types";
+
+import {clsx} from "@nextui-org/shared-utils";
+
+/**
+ * Merges two sets of class names for each slot in a component.
+ * @param itemClasses - Base classes for each slot
+ * @param itemPropsClasses - Additional classes from props for each slot
+ * @returns A merged object containing the combined classes for each slot
+ */
+export const mergeClasses = <T extends SlotsToClasses<string>, P extends SlotsToClasses<string>>(
+  itemClasses?: T,
+  itemPropsClasses?: P,
+): T => {
+  if (!itemClasses && !itemPropsClasses) return {} as T;
+
+  const keys = new Set([...Object.keys(itemClasses || {}), ...Object.keys(itemPropsClasses || {})]);
+
+  return Array.from(keys).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: clsx(itemClasses?.[key], itemPropsClasses?.[key]),
+    }),
+    {} as T,
+  );
+};
diff --git a/packages/core/theme/src/utils/tw-merge-config.ts b/packages/core/theme/src/utils/tw-merge-config.ts
index bd5776fe0f..fcde3b2466 100644
--- a/packages/core/theme/src/utils/tw-merge-config.ts
+++ b/packages/core/theme/src/utils/tw-merge-config.ts
@@ -1,7 +1,6 @@
-import type {Config} from "tailwind-merge";
 export const COMMON_UNITS = ["small", "medium", "large"];
 
-export const twMergeConfig: Partial<Config> = {
+export const twMergeConfig = {
   theme: {
     opacity: ["disabled"],
     spacing: ["divider"],
@@ -11,6 +10,13 @@ export const twMergeConfig: Partial<Config> = {
   classGroups: {
     shadow: [{shadow: COMMON_UNITS}],
     "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
-    "bg-image": ["bg-stripe-gradient"],
+    "bg-image": [
+      "bg-stripe-gradient-default",
+      "bg-stripe-gradient-primary",
+      "bg-stripe-gradient-secondary",
+      "bg-stripe-gradient-success",
+      "bg-stripe-gradient-warning",
+      "bg-stripe-gradient-danger",
+    ],
   },
 };
diff --git a/packages/core/theme/src/utils/variants.ts b/packages/core/theme/src/utils/variants.ts
index 084bf1de5c..9a4ad2d674 100644
--- a/packages/core/theme/src/utils/variants.ts
+++ b/packages/core/theme/src/utils/variants.ts
@@ -30,11 +30,11 @@ const bordered = {
 
 const flat = {
   default: "bg-default/40 text-default-700",
-  primary: "bg-primary/20 text-primary-700",
-  secondary: "bg-secondary/20 text-secondary-700",
-  success: "bg-success/20 text-success-800 dark:text-success",
-  warning: "bg-warning/20 text-warning-800 dark:text-warning",
-  danger: "bg-danger/20 text-danger-800 dark:text-danger-500",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
   foreground: "bg-foreground/10 text-foreground",
 };
 
diff --git a/packages/hooks/use-aria-accordion-item/CHANGELOG.md b/packages/hooks/use-aria-accordion-item/CHANGELOG.md
index 3c828c14b2..a027fea0e8 100644
--- a/packages/hooks/use-aria-accordion-item/CHANGELOG.md
+++ b/packages/hooks/use-aria-accordion-item/CHANGELOG.md
@@ -1,5 +1,93 @@
 # @nextui-org/use-aria-accordion-item
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-accordion-item/package.json b/packages/hooks/use-aria-accordion-item/package.json
index abb6f00021..9811752ee7 100644
--- a/packages/hooks/use-aria-accordion-item/package.json
+++ b/packages/hooks/use-aria-accordion-item/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion-item",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "description": "Internal impl for react aria accordion item",
   "keywords": [
     "use-aria-accordion-item"
@@ -34,13 +34,13 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/button": "3.9.5",
-    "@react-aria/focus": "3.17.1",
-    "@react-stately/tree": "3.8.1",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/button": "3.10.1",
+    "@react-aria/focus": "3.18.4",
+    "@react-stately/tree": "3.8.5",
+    "@react-types/shared": "3.25.0"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -55,4 +55,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-aria-accordion-item/src/index.ts b/packages/hooks/use-aria-accordion-item/src/index.ts
index 42e0017198..3846b9b68b 100644
--- a/packages/hooks/use-aria-accordion-item/src/index.ts
+++ b/packages/hooks/use-aria-accordion-item/src/index.ts
@@ -55,7 +55,7 @@ export function useAriaAccordionItem<T>(
       if (!manager.canSelectItem(key)) {
         return;
       }
-      manager.select(key, e);
+      manager.select(key, e as any);
       state.toggleKey(key);
     },
     [key, manager],
diff --git a/packages/hooks/use-aria-accordion/CHANGELOG.md b/packages/hooks/use-aria-accordion/CHANGELOG.md
index 635ea307bf..ec53a7ca48 100644
--- a/packages/hooks/use-aria-accordion/CHANGELOG.md
+++ b/packages/hooks/use-aria-accordion/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-aria-accordion
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-accordion/package.json b/packages/hooks/use-aria-accordion/package.json
index 8756a04cd5..0a2ab90071 100644
--- a/packages/hooks/use-aria-accordion/package.json
+++ b/packages/hooks/use-aria-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-accordion",
-  "version": "2.0.7",
+  "version": "2.2.1",
   "description": "React-aria useAccordion hooks with custom implementations",
   "keywords": [
     "use-aria-accordion"
@@ -34,16 +34,16 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/button": "3.9.5",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/selection": "3.18.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/tree": "3.8.1",
-    "@react-types/accordion": "3.0.0-alpha.21",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/button": "3.10.1",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/selection": "3.20.1",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/tree": "3.8.5",
+    "@react-types/accordion": "3.0.0-alpha.24",
+    "@react-types/shared": "3.25.0"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -58,4 +58,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-aria-accordion/src/use-accordion-item.ts b/packages/hooks/use-aria-accordion/src/use-accordion-item.ts
index d36bf6382e..95df7413c5 100644
--- a/packages/hooks/use-aria-accordion/src/use-accordion-item.ts
+++ b/packages/hooks/use-aria-accordion/src/use-accordion-item.ts
@@ -52,7 +52,7 @@ export function useReactAriaAccordionItem<T>(
       if (!manager.canSelectItem(key)) {
         return;
       }
-      manager.select(key, e);
+      manager.select(key, e as any);
       state.toggleKey(key);
     },
     [key, manager],
diff --git a/packages/hooks/use-aria-button/CHANGELOG.md b/packages/hooks/use-aria-button/CHANGELOG.md
index b2ee84f050..2912c2e23c 100644
--- a/packages/hooks/use-aria-button/CHANGELOG.md
+++ b/packages/hooks/use-aria-button/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-aria-button
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-button/package.json b/packages/hooks/use-aria-button/package.json
index 83e80861d2..2fe177e316 100644
--- a/packages/hooks/use-aria-button/package.json
+++ b/packages/hooks/use-aria-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-button",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
   "keywords": [
     "use-aria-button"
@@ -34,14 +34,14 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-types/button": "3.9.4",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/button": "3.10.0",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -56,4 +56,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-aria-link/CHANGELOG.md b/packages/hooks/use-aria-link/CHANGELOG.md
index f2c1a53382..673c233bcd 100644
--- a/packages/hooks/use-aria-link/CHANGELOG.md
+++ b/packages/hooks/use-aria-link/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-aria-link
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.19
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-link/package.json b/packages/hooks/use-aria-link/package.json
index 031086cf40..cf37e52fb9 100644
--- a/packages/hooks/use-aria-link/package.json
+++ b/packages/hooks/use-aria-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-link",
-  "version": "2.0.19",
+  "version": "2.2.1",
   "description": "Internal hook to handle link a11y and events, this is based on react-aria link hook but without the onClick warning",
   "keywords": [
     "use-aria-link"
@@ -34,14 +34,14 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/utils": "3.24.1",
-    "@react-types/link": "3.5.5",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-types/link": "3.5.8",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -56,4 +56,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-aria-menu/CHANGELOG.md b/packages/hooks/use-aria-menu/CHANGELOG.md
index ef0de3a10d..5435cc072b 100644
--- a/packages/hooks/use-aria-menu/CHANGELOG.md
+++ b/packages/hooks/use-aria-menu/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-aria-menu
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-menu/package.json b/packages/hooks/use-aria-menu/package.json
index 7b5d3845fb..84dbc403ad 100644
--- a/packages/hooks/use-aria-menu/package.json
+++ b/packages/hooks/use-aria-menu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-menu",
-  "version": "2.0.7",
+  "version": "2.2.1",
   "description": "React-aria useMenu hooks with custom implementations",
   "keywords": [
     "use-aria-menu"
@@ -34,19 +34,19 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@react-aria/utils": "3.24.1",
-    "@react-types/shared": "3.23.1",
-    "@react-aria/menu": "3.14.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-stately/tree": "3.8.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/selection": "3.18.1",
-    "@react-stately/collections": "3.10.7",
-    "@react-types/menu": "3.9.9"
+    "@react-aria/utils": "3.26.0",
+    "@react-types/shared": "3.25.0",
+    "@react-aria/menu": "3.15.5",
+    "@react-aria/interactions": "3.22.4",
+    "@react-stately/tree": "3.8.5",
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/selection": "3.20.1",
+    "@react-stately/collections": "3.11.0",
+    "@react-types/menu": "3.9.12"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-aria-modal-overlay/CHANGELOG.md b/packages/hooks/use-aria-modal-overlay/CHANGELOG.md
index eb445c48a1..de13b7f330 100644
--- a/packages/hooks/use-aria-modal-overlay/CHANGELOG.md
+++ b/packages/hooks/use-aria-modal-overlay/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-aria-modal-overlay
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.13
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-modal-overlay/package.json b/packages/hooks/use-aria-modal-overlay/package.json
index ae4ae2f871..b17d1fa3da 100644
--- a/packages/hooks/use-aria-modal-overlay/package.json
+++ b/packages/hooks/use-aria-modal-overlay/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-modal-overlay",
-  "version": "2.0.13",
+  "version": "2.2.1",
   "description": "A custom implementation of react aria modal overlay, this removes the prevent scroll",
   "keywords": [
     "use-aria-modal-overlay"
@@ -34,14 +34,14 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/overlays": "3.22.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.7",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/overlays": "3.23.4",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/overlays": "3.6.11",
+    "@react-types/shared": "3.25.0"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
@@ -57,4 +57,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-aria-multiselect/CHANGELOG.md b/packages/hooks/use-aria-multiselect/CHANGELOG.md
index 68ae6e1c49..489b10e1f1 100644
--- a/packages/hooks/use-aria-multiselect/CHANGELOG.md
+++ b/packages/hooks/use-aria-multiselect/CHANGELOG.md
@@ -1,5 +1,101 @@
 # @nextui-org/use-aria-multiselect
 
+## 2.4.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.4.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4224](https://github.com/nextui-org/nextui/pull/4224) [`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Added form support to input-otp, change default validationBehavior to "native" to avoid breaking changes, and fix select with form
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- [#4219](https://github.com/nextui-org/nextui/pull/4219) [`1855ba4`](https://github.com/nextui-org/nextui/commit/1855ba4390186f701c793f76593f31a5dce6da70) Thanks [@Peterl561](https://github.com/Peterl561)! - add hideEmptyContent API to select
+
+## 2.3.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.3.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.3.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.3.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.3.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.3.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.3.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.3.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.3.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.2.5
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-multiselect/package.json b/packages/hooks/use-aria-multiselect/package.json
index 482503f17f..88f0023089 100644
--- a/packages/hooks/use-aria-multiselect/package.json
+++ b/packages/hooks/use-aria-multiselect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-multiselect",
-  "version": "2.2.5",
+  "version": "2.4.1",
   "description": "Provides the behavior and accessibility implementation for a multi-select component.",
   "keywords": [
     "use-aria-multiselect"
@@ -34,24 +34,24 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/label": "3.7.8",
-    "@react-aria/listbox": "3.12.1",
-    "@react-aria/menu": "3.14.1",
-    "@react-aria/selection": "3.18.1",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/form": "3.0.3",
-    "@react-stately/list": "3.10.5",
-    "@react-stately/menu": "3.7.1",
-    "@react-types/button": "3.9.4",
-    "@react-types/overlays": "3.8.7",
-    "@react-types/select": "3.9.4",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/i18n": "3.12.3",
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/label": "3.7.12",
+    "@react-aria/listbox": "3.13.5",
+    "@react-aria/menu": "3.15.5",
+    "@react-aria/selection": "3.20.1",
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/form": "3.0.6",
+    "@react-stately/list": "3.11.0",
+    "@react-stately/menu": "3.8.3",
+    "@react-types/button": "3.10.0",
+    "@react-types/overlays": "3.8.10",
+    "@react-types/select": "3.9.7",
+    "@react-types/shared": "3.25.0"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts b/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts
index 8e2d5535c6..d8c14ad820 100644
--- a/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts
+++ b/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts
@@ -11,6 +11,7 @@ import type {
   MultipleSelection,
   TextInputBase,
   Validation,
+  ValidationError,
 } from "@react-types/shared";
 
 import {MenuTriggerState, useMenuTriggerState} from "@react-stately/menu";
@@ -25,7 +26,7 @@ export interface MultiSelectProps<T>
     Omit<InputBase, "isReadOnly">,
     DOMProps,
     HelpTextProps,
-    Omit<Validation<T>, "validationBehavior" | "validate">,
+    Omit<Validation<T>, "validate">,
     LabelableProps,
     TextInputBase,
     Omit<MultipleSelection, "none">,
@@ -36,6 +37,17 @@ export interface MultiSelectProps<T>
    * @default true
    */
   shouldFlip?: boolean;
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: (value: string | string[]) => ValidationError | true | null | undefined;
+  /**
+   * Whether the menu should be hidden when there are no items.
+   */
+  hideEmptyContent?: boolean;
 }
 
 export interface MultiSelectState<T>
@@ -44,16 +56,20 @@ export interface MultiSelectState<T>
     FormValidationState {
   /** Whether the select is currently focused. */
   isFocused: boolean;
-
   /** Sets whether the select is focused. */
   setFocused(isFocused: boolean): void;
 }
 
-export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): MultiSelectState<T> {
+export function useMultiSelectState<T extends object>({
+  validate,
+  validationBehavior,
+  ...props
+}: MultiSelectProps<T>): MultiSelectState<T> {
   const [isFocused, setFocused] = useState(false);
   const [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
 
   const triggerState = useMenuTriggerState(props);
+
   const listState = useMultiSelectListState({
     ...props,
     onSelectionChange: (keys) => {
@@ -74,14 +90,21 @@ export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): M
     },
   });
 
-  const validationState = useFormValidationState({
+  const validationState = useFormValidationState<Set<string>>({
     ...props,
-    // TODO: Future enhancement to support "aria" validation behavior.
-    validationBehavior: "native",
+    validationBehavior,
+    validate: (value) => {
+      if (!validate) return;
+      const keys = Array.from(value as Set<string>);
+
+      return validate(props.selectionMode === "single" ? keys[0] : keys);
+    },
     // @ts-ignore
     value: listState.selectedKeys,
   });
 
+  const shouldHideContent = listState.collection.size === 0 && props.hideEmptyContent;
+
   return {
     ...validationState,
     ...listState,
@@ -91,18 +114,17 @@ export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): M
       triggerState.close();
     },
     open(focusStrategy: FocusStrategy | null = null) {
-      // Don't open if the collection is empty.
-      if (listState.collection.size !== 0) {
-        setFocusStrategy(focusStrategy);
-        triggerState.open();
-      }
+      if (shouldHideContent) return;
+
+      setFocusStrategy(focusStrategy);
+      triggerState.open();
     },
     toggle(focusStrategy: FocusStrategy | null = null) {
-      if (listState.collection.size !== 0) {
-        setFocusStrategy(focusStrategy);
-        triggerState.toggle();
-        validationState.commitValidation();
-      }
+      if (shouldHideContent) return;
+
+      setFocusStrategy(focusStrategy);
+      triggerState.toggle();
+      validationState.commitValidation();
     },
     isFocused,
     setFocused,
diff --git a/packages/hooks/use-aria-multiselect/src/use-multiselect.ts b/packages/hooks/use-aria-multiselect/src/use-multiselect.ts
index ffa17dce10..5fdb36391b 100644
--- a/packages/hooks/use-aria-multiselect/src/use-multiselect.ts
+++ b/packages/hooks/use-aria-multiselect/src/use-multiselect.ts
@@ -11,7 +11,7 @@ import {AriaListBoxOptions} from "@react-aria/listbox";
 import {useMenuTrigger} from "@react-aria/menu";
 import {ListKeyboardDelegate, useTypeSelect} from "@react-aria/selection";
 import {chain, filterDOMProps, mergeProps, useId} from "@react-aria/utils";
-import {FocusEvent, HTMLAttributes, RefObject, useMemo} from "react";
+import {FocusEvent, HTMLAttributes, RefObject, useMemo, Key} from "react";
 import {ValidationResult} from "@react-types/shared";
 
 export type MultiSelectProps<T> = MultiSelectStateProps<T>;
@@ -64,7 +64,7 @@ export function useMultiSelect<T>(
 
           const key =
             state.selectedKeys.size > 0
-              ? delegate.getKeyAbove(state.selectedKeys.values().next().value)
+              ? delegate.getKeyAbove(state.selectedKeys.values().next().value as Key)
               : delegate.getFirstKey();
 
           if (key) {
@@ -78,7 +78,7 @@ export function useMultiSelect<T>(
 
           const key =
             state.selectedKeys.size > 0
-              ? delegate.getKeyBelow(state.selectedKeys.values().next().value)
+              ? delegate.getKeyBelow(state.selectedKeys.values().next().value as Key)
               : delegate.getFirstKey();
 
           if (key) {
diff --git a/packages/hooks/use-aria-toggle-button/CHANGELOG.md b/packages/hooks/use-aria-toggle-button/CHANGELOG.md
index 45e3120ab5..23920362e9 100644
--- a/packages/hooks/use-aria-toggle-button/CHANGELOG.md
+++ b/packages/hooks/use-aria-toggle-button/CHANGELOG.md
@@ -1,5 +1,132 @@
 # @nextui-org/use-aria-toggle-button
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-aria-button@2.2.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-aria-button@2.2.0
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d)]:
+  - @nextui-org/use-aria-button@2.1.0-beta.0
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/hooks/use-aria-toggle-button/package.json b/packages/hooks/use-aria-toggle-button/package.json
index 7319e031fe..5cff369809 100644
--- a/packages/hooks/use-aria-toggle-button/package.json
+++ b/packages/hooks/use-aria-toggle-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-aria-toggle-button",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "description": "Internal hook to handle button a11y and events, this is based on react-aria button hook but without the onClick warning",
   "keywords": [
     "use-aria-toggle-button"
@@ -34,14 +34,14 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/use-aria-button": "workspace:*",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/toggle": "3.7.4",
-    "@react-types/button": "3.9.4",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/toggle": "3.7.8",
+    "@react-types/button": "3.10.0",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-callback-ref/CHANGELOG.md b/packages/hooks/use-callback-ref/CHANGELOG.md
index f43cddb12c..091c97be2a 100644
--- a/packages/hooks/use-callback-ref/CHANGELOG.md
+++ b/packages/hooks/use-callback-ref/CHANGELOG.md
@@ -1,5 +1,101 @@
 # @nextui-org/use-callback-ref
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-safe-layout-effect@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-safe-layout-effect@2.1.0
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-callback-ref/package.json b/packages/hooks/use-callback-ref/package.json
index 842bd36175..d2b3c953cd 100644
--- a/packages/hooks/use-callback-ref/package.json
+++ b/packages/hooks/use-callback-ref/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-callback-ref",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "React hook to persist any value between renders, but keeps it up-to-date if it changes.",
   "keywords": [
     "use-callback-ref"
@@ -37,7 +37,7 @@
     "@nextui-org/use-safe-layout-effect": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-clipboard/CHANGELOG.md b/packages/hooks/use-clipboard/CHANGELOG.md
index 8f17da1a31..e9cb5b5fbf 100644
--- a/packages/hooks/use-clipboard/CHANGELOG.md
+++ b/packages/hooks/use-clipboard/CHANGELOG.md
@@ -1,5 +1,81 @@
 # @nextui-org/use-clipboard
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.8-beta.6
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.8-beta.5
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.8-beta.4
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.8-beta.3
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.8-beta.2
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.8-beta.1
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.8-beta.0
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/hooks/use-clipboard/__tests__/clipboard.test.tsx b/packages/hooks/use-clipboard/__tests__/clipboard.test.tsx
index bb5fe4c8eb..347d418c72 100644
--- a/packages/hooks/use-clipboard/__tests__/clipboard.test.tsx
+++ b/packages/hooks/use-clipboard/__tests__/clipboard.test.tsx
@@ -1,4 +1,4 @@
-import {renderHook, act} from "@testing-library/react-hooks";
+import {renderHook, act} from "@testing-library/react";
 
 import {useClipboard} from "../src";
 
diff --git a/packages/hooks/use-clipboard/package.json b/packages/hooks/use-clipboard/package.json
index 97f24c56aa..bba9da7d2e 100644
--- a/packages/hooks/use-clipboard/package.json
+++ b/packages/hooks/use-clipboard/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-clipboard",
-  "version": "2.0.7",
+  "version": "2.1.1",
   "description": "Wrapper around navigator.clipboard with feedback timeout",
   "keywords": [
     "use-clipboard"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-data-scroll-overflow/CHANGELOG.md b/packages/hooks/use-data-scroll-overflow/CHANGELOG.md
index ea490c5ae7..9d9bf65c3a 100644
--- a/packages/hooks/use-data-scroll-overflow/CHANGELOG.md
+++ b/packages/hooks/use-data-scroll-overflow/CHANGELOG.md
@@ -1,5 +1,124 @@
 # @nextui-org/use-data-scroll-overflow
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.8-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.8-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.8-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.8-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.8-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+
+## 2.1.8-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.8-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.8-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.8-beta.0
+
+### Patch Changes
+
+- Updated dependencies [[`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.1.7
 
 ### Patch Changes
diff --git a/packages/hooks/use-data-scroll-overflow/package.json b/packages/hooks/use-data-scroll-overflow/package.json
index 08d856e47c..704eb86bb4 100644
--- a/packages/hooks/use-data-scroll-overflow/package.json
+++ b/packages/hooks/use-data-scroll-overflow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-data-scroll-overflow",
-  "version": "2.1.7",
+  "version": "2.2.1",
   "description": "A hook to add data attributes when the element has top or bottom scroll.",
   "keywords": [
     "use-data-scroll-overflow"
@@ -37,7 +37,7 @@
     "@nextui-org/shared-utils": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-disclosure/CHANGELOG.md b/packages/hooks/use-disclosure/CHANGELOG.md
index 0cd5cbeb3b..3cab8cba1d 100644
--- a/packages/hooks/use-disclosure/CHANGELOG.md
+++ b/packages/hooks/use-disclosure/CHANGELOG.md
@@ -1,5 +1,121 @@
 # @nextui-org/use-disclosure
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-callback-ref@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-callback-ref@2.1.0
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.5
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.4
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.3
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.2
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.1
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-callback-ref@2.0.7-beta.0
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/hooks/use-disclosure/package.json b/packages/hooks/use-disclosure/package.json
index ff32061bc5..0d63265ffd 100644
--- a/packages/hooks/use-disclosure/package.json
+++ b/packages/hooks/use-disclosure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-disclosure",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "description": "The hook in charge of managing modals",
   "keywords": [
     "use-disclosure"
@@ -34,12 +34,12 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/use-callback-ref": "workspace:*",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.10.1"
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/utils": "3.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-draggable/CHANGELOG.md b/packages/hooks/use-draggable/CHANGELOG.md
new file mode 100644
index 0000000000..b27cd8c434
--- /dev/null
+++ b/packages/hooks/use-draggable/CHANGELOG.md
@@ -0,0 +1,83 @@
+# @nextui-org/use-draggable
+
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.1-beta.7
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.1-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.1-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.1-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.1-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.1-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.1-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.1-beta.0
+
+### Patch Changes
+
+- [#3983](https://github.com/nextui-org/nextui/pull/3983) [`2d6ae74c3`](https://github.com/nextui-org/nextui/commit/2d6ae74c36a157472bd4b06b8580e7db163eddcc) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Add draggable modal (#2647)
diff --git a/packages/hooks/use-draggable/README.md b/packages/hooks/use-draggable/README.md
new file mode 100644
index 0000000000..b2e0c2e017
--- /dev/null
+++ b/packages/hooks/use-draggable/README.md
@@ -0,0 +1,24 @@
+# @nextui-org/use-draggable
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @nextui-org/use-draggable
+# or
+npm i @nextui-org/use-draggable
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/hooks/use-draggable/package.json b/packages/hooks/use-draggable/package.json
new file mode 100644
index 0000000000..717c0014d3
--- /dev/null
+++ b/packages/hooks/use-draggable/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "@nextui-org/use-draggable",
+  "version": "2.1.1",
+  "description": "This hook can provide drag and drop interaction",
+  "keywords": [
+    "use-draggable"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/hooks/use-draggable"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "dependencies": {
+    "@react-aria/interactions": "3.22.4"
+  }
+}
diff --git a/packages/hooks/use-draggable/src/index.ts b/packages/hooks/use-draggable/src/index.ts
new file mode 100644
index 0000000000..300ef53ee1
--- /dev/null
+++ b/packages/hooks/use-draggable/src/index.ts
@@ -0,0 +1,113 @@
+import type {MoveMoveEvent, MoveResult} from "@react-aria/interactions";
+
+import {useEffect, useRef, useCallback} from "react";
+import {useMove} from "@react-aria/interactions";
+
+export interface UseDraggableProps {
+  /**
+   * Ref to the moving target DOM node.
+   */
+  targetRef?: React.RefObject<HTMLElement>;
+  /**
+   * Whether to disable the target is draggable.
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Whether the target can overflow the viewport.
+   * @default false
+   */
+  canOverflow?: boolean;
+}
+
+/**
+ * A hook to make a target draggable.
+ * @param props UseDraggableProps
+ * @returns MoveResult for the drag DOM node.
+ */
+export function useDraggable(props: UseDraggableProps): MoveResult {
+  const {targetRef, isDisabled = false, canOverflow = false} = props;
+  const boundary = useRef({minLeft: 0, minTop: 0, maxLeft: 0, maxTop: 0});
+  let transform = {offsetX: 0, offsetY: 0};
+
+  const onMoveStart = useCallback(() => {
+    const {offsetX, offsetY} = transform;
+
+    const targetRect = targetRef?.current?.getBoundingClientRect();
+    const targetLeft = targetRect?.left ?? 0;
+    const targetTop = targetRect?.top ?? 0;
+    const targetWidth = targetRect?.width ?? 0;
+    const targetHeight = targetRect?.height ?? 0;
+
+    const clientWidth = document.documentElement.clientWidth;
+    const clientHeight = document.documentElement.clientHeight;
+
+    const minLeft = -targetLeft + offsetX;
+    const minTop = -targetTop + offsetY;
+    const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
+    const maxTop = clientHeight - targetTop - targetHeight + offsetY;
+
+    boundary.current = {
+      minLeft,
+      minTop,
+      maxLeft,
+      maxTop,
+    };
+  }, [transform, targetRef?.current]);
+
+  const onMove = useCallback(
+    (e: MoveMoveEvent) => {
+      if (isDisabled) {
+        return;
+      }
+      const {offsetX, offsetY} = transform;
+      const {minLeft, minTop, maxLeft, maxTop} = boundary.current;
+      let moveX = offsetX + e.deltaX;
+      let moveY = offsetY + e.deltaY;
+
+      if (!canOverflow) {
+        moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+        moveY = Math.min(Math.max(moveY, minTop), maxTop);
+      }
+
+      transform = {
+        offsetX: moveX,
+        offsetY: moveY,
+      };
+
+      if (targetRef?.current) {
+        targetRef.current.style.transform = `translate(${moveX}px, ${moveY}px)`;
+      }
+    },
+    [isDisabled, transform, boundary.current, canOverflow, targetRef?.current],
+  );
+
+  const {moveProps} = useMove({
+    onMoveStart,
+    onMove,
+  });
+
+  const preventDefault = useCallback((e: TouchEvent) => {
+    e.preventDefault();
+  }, []);
+
+  // NOTE: This process is due to the modal being displayed at the bottom instead of the center when opened on mobile sizes.
+  // It will become unnecessary once the modal is centered properly.
+  useEffect(() => {
+    if (!isDisabled) {
+      // Prevent body scroll when dragging at mobile.
+      document.body.addEventListener("touchmove", preventDefault, {passive: false});
+    }
+
+    return () => {
+      document.body.removeEventListener("touchmove", preventDefault);
+    };
+  }, [isDisabled]);
+
+  return {
+    moveProps: {
+      ...moveProps,
+      style: {cursor: !isDisabled ? "move" : undefined},
+    },
+  };
+}
diff --git a/packages/hooks/use-draggable/tsconfig.json b/packages/hooks/use-draggable/tsconfig.json
new file mode 100644
index 0000000000..46e3b466c2
--- /dev/null
+++ b/packages/hooks/use-draggable/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/hooks/use-image/CHANGELOG.md b/packages/hooks/use-image/CHANGELOG.md
index adcfb77443..b8ad4cf788 100644
--- a/packages/hooks/use-image/CHANGELOG.md
+++ b/packages/hooks/use-image/CHANGELOG.md
@@ -1,5 +1,131 @@
 # @nextui-org/use-image
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/use-safe-layout-effect@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/use-safe-layout-effect@2.1.0
+
+## 2.0.7-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.5
+
+## 2.0.7-beta.9
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.4
+
+## 2.0.7-beta.8
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.3
+
+## 2.0.7-beta.7
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.2
+
+## 2.0.7-beta.6
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.1
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/use-safe-layout-effect@2.0.7-beta.0
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#3998](https://github.com/nextui-org/nextui/pull/3998) [`52f6274e9`](https://github.com/nextui-org/nextui/commit/52f6274e9baecc928ee7cbb6a8110b72931061b8) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - use-image hook logic restore to the previous one to avoid nextjs hydration issues
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [`1c05c6d77`](https://github.com/nextui-org/nextui/commit/1c05c6d77b10f6b18f3c34d36eece7702704267a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - server validation added to the use-image hook
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#3993](https://github.com/nextui-org/nextui/pull/3993) [`98b13d9a9`](https://github.com/nextui-org/nextui/commit/98b13d9a9368ed188f62e3e7ff885ed3ec7c3f5a) Thanks [@wingkwong](https://github.com/wingkwong)! - fix Image ReferenceError in SSR
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#3987](https://github.com/nextui-org/nextui/pull/3987) [`90cb5b14a`](https://github.com/nextui-org/nextui/commit/90cb5b14abcf70878896ea83b0b8bce0795d97fd) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - fix cached image flashing due to use-image always returning pending initially. The fix was to check if the image is loaded instantly through HTMLImageElement.complete attribute and use that to initialize the state.
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-image/__tests__/use-image.test.tsx b/packages/hooks/use-image/__tests__/use-image.test.tsx
new file mode 100644
index 0000000000..f69de371f6
--- /dev/null
+++ b/packages/hooks/use-image/__tests__/use-image.test.tsx
@@ -0,0 +1,37 @@
+import {renderHook, waitFor} from "@testing-library/react";
+import {mocks} from "@nextui-org/test-utils";
+
+import {useImage} from "../src";
+
+describe("use-image hook", () => {
+  let mockImage: {restore: any; simulate: (value: "loaded" | "error") => void};
+
+  beforeEach(() => {
+    mockImage = mocks.image();
+  });
+  afterEach(() => {
+    mockImage.restore();
+  });
+
+  it("can handle missing src", () => {
+    const {result} = renderHook(() => useImage({}));
+
+    expect(result.current).toEqual("pending");
+  });
+
+  it("can handle loading image", async () => {
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
+
+    expect(result.current).toEqual("loading");
+    mockImage.simulate("loaded");
+    await waitFor(() => expect(result.current).toBe("loaded"));
+  });
+
+  it("can handle error image", async () => {
+    mockImage.simulate("error");
+    const {result} = renderHook(() => useImage({src: "/test.png"}));
+
+    expect(result.current).toEqual("loading");
+    await waitFor(() => expect(result.current).toBe("failed"));
+  });
+});
diff --git a/packages/hooks/use-image/package.json b/packages/hooks/use-image/package.json
index 6e507b4750..f881cad622 100644
--- a/packages/hooks/use-image/package.json
+++ b/packages/hooks/use-image/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-image",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "React hook for progressing image loading",
   "keywords": [
     "use-image"
@@ -37,9 +37,10 @@
     "@nextui-org/use-safe-layout-effect": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
+    "@nextui-org/test-utils": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0"
   },
@@ -52,4 +53,4 @@
       "esm"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/hooks/use-image/src/index.ts b/packages/hooks/use-image/src/index.ts
index 8647f03393..a935d00ab3 100644
--- a/packages/hooks/use-image/src/index.ts
+++ b/packages/hooks/use-image/src/index.ts
@@ -1,6 +1,157 @@
+// /**
+//  * Part of this code is taken from @chakra-ui/react package ❤️
+//  */
+// import type {ImgHTMLAttributes, MutableRefObject, SyntheticEvent} from "react";
+
+// import {useEffect, useRef, useState} from "react";
+// import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
+
+// type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
+
+// export interface UseImageProps {
+//   /**
+//    * The image `src` attribute
+//    */
+//   src?: string;
+//   /**
+//    * The image `srcset` attribute
+//    */
+//   srcSet?: string;
+//   /**
+//    * The image `sizes` attribute
+//    */
+//   sizes?: string;
+//   /**
+//    * A callback for when the image `src` has been loaded
+//    */
+//   onLoad?: NativeImageProps["onLoad"];
+//   /**
+//    * A callback for when there was an error loading the image `src`
+//    */
+//   onError?: NativeImageProps["onError"];
+//   /**
+//    * If `true`, opt out of the `fallbackSrc` logic and use as `img`
+//    */
+//   ignoreFallback?: boolean;
+//   /**
+//    * The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded.
+//    * This tells the browser to request cross-origin access when trying to download the image data.
+//    */
+//   crossOrigin?: NativeImageProps["crossOrigin"];
+//   loading?: NativeImageProps["loading"];
+// }
+
+// type Status = "loading" | "failed" | "pending" | "loaded";
+
+// export type FallbackStrategy = "onError" | "beforeLoadOrError";
+
+// type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
+
+// /**
+//  * React hook that loads an image in the browser,
+//  * and lets us know the `status` so we can show image
+//  * fallback if it is still `pending`
+//  *
+//  * @returns the status of the image loading progress
+//  *
+//  * @example
+//  *
+//  * ```jsx
+//  * function App(){
+//  *   const status = useImage({ src: "image.png" })
+//  *   return status === "loaded" ? <img src="image.png" /> : <Placeholder />
+//  * }
+//  * ```
+//  */
+// export function useImage(props: UseImageProps = {}) {
+//   const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;
+
+//   const imageRef = useRef<HTMLImageElement | null>();
+//   const firstMount = useRef<boolean>(true);
+//   const [status, setStatus] = useState<Status>(() => setImageAndGetInitialStatus(props, imageRef));
+
+//   useSafeLayoutEffect(() => {
+//     if (firstMount.current) {
+//       firstMount.current = false;
+
+//       return;
+//     }
+
+//     setStatus(setImageAndGetInitialStatus(props, imageRef));
+
+//     return () => {
+//       flush();
+//     };
+//   }, [src, crossOrigin, srcSet, sizes, loading]);
+
+//   useEffect(() => {
+//     if (!imageRef.current) return;
+//     imageRef.current.onload = (event) => {
+//       flush();
+//       setStatus("loaded");
+//       onLoad?.(event as unknown as ImageEvent);
+//     };
+//     imageRef.current.onerror = (error) => {
+//       flush();
+//       setStatus("failed");
+//       onError?.(error as any);
+//     };
+//   }, [imageRef.current]);
+
+//   const flush = () => {
+//     if (imageRef.current) {
+//       imageRef.current.onload = null;
+//       imageRef.current.onerror = null;
+//       imageRef.current = null;
+//     }
+//   };
+
+//   /**
+//    * If user opts out of the fallback/placeholder
+//    * logic, let's just return 'loaded'
+//    */
+//   return ignoreFallback ? "loaded" : status;
+// }
+
+// function setImageAndGetInitialStatus(
+//   props: UseImageProps,
+//   imageRef: MutableRefObject<HTMLImageElement | null | undefined>,
+// ): Status {
+//   const {loading, src, srcSet, crossOrigin, sizes, ignoreFallback} = props;
+
+//   if (!src) return "pending";
+//   if (ignoreFallback) return "loaded";
+
+//   try {
+//     const img = new Image();
+
+//     img.src = src;
+//     if (crossOrigin) img.crossOrigin = crossOrigin;
+//     if (srcSet) img.srcset = srcSet;
+//     if (sizes) img.sizes = sizes;
+//     if (loading) img.loading = loading;
+
+//     imageRef.current = img;
+//     if (img.complete && img.naturalWidth) {
+//       return "loaded";
+//     }
+
+//     return "loading";
+//   } catch (error) {
+//     return "loading";
+//   }
+// }
+
+// export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
+//   (status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
+//   (status === "failed" && fallbackStrategy === "onError");
+
+// export type UseImageReturn = ReturnType<typeof useImage>;
+
 /**
  * Part of this code is taken from @chakra-ui/react package ❤️
  */
+
 import type {ImgHTMLAttributes, SyntheticEvent} from "react";
 
 import {useCallback, useEffect, useRef, useState} from "react";
@@ -46,7 +197,6 @@ type Status = "loading" | "failed" | "pending" | "loaded";
 export type FallbackStrategy = "onError" | "beforeLoadOrError";
 
 type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
-
 /**
  * React hook that loads an image in the browser,
  * and lets us know the `status` so we can show image
@@ -63,6 +213,7 @@ type ImageEvent = SyntheticEvent<HTMLImageElement, Event>;
  * }
  * ```
  */
+
 export function useImage(props: UseImageProps = {}) {
   const {loading, src, srcSet, onLoad, onError, crossOrigin, sizes, ignoreFallback} = props;
 
@@ -131,9 +282,3 @@ export function useImage(props: UseImageProps = {}) {
    */
   return ignoreFallback ? "loaded" : status;
 }
-
-export const shouldShowFallbackImage = (status: Status, fallbackStrategy: FallbackStrategy) =>
-  (status !== "loaded" && fallbackStrategy === "beforeLoadOrError") ||
-  (status === "failed" && fallbackStrategy === "onError");
-
-export type UseImageReturn = ReturnType<typeof useImage>;
diff --git a/packages/hooks/use-infinite-scroll/CHANGELOG.md b/packages/hooks/use-infinite-scroll/CHANGELOG.md
index fd7e04280f..debcd9481d 100644
--- a/packages/hooks/use-infinite-scroll/CHANGELOG.md
+++ b/packages/hooks/use-infinite-scroll/CHANGELOG.md
@@ -1,5 +1,128 @@
 # @nextui-org/use-infinite-scroll
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.6-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.6-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.6-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.6-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.6-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+
+## 2.1.6-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.6-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.6-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.6-beta.0
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - replaced lodash with native approaches
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
+- Updated dependencies [[`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.1.5
 
 ### Patch Changes
diff --git a/packages/hooks/use-infinite-scroll/package.json b/packages/hooks/use-infinite-scroll/package.json
index 15fe2c719f..83ecf603bb 100644
--- a/packages/hooks/use-infinite-scroll/package.json
+++ b/packages/hooks/use-infinite-scroll/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-infinite-scroll",
-  "version": "2.1.5",
+  "version": "2.2.1",
   "description": "A hook for handling infinite scroll based on the IntersectionObserver API",
   "keywords": [
     "use-infinite-scroll"
@@ -33,12 +33,11 @@
     "prepack": "clean-package",
     "postpack": "clean-package restore"
   },
-  "dependencies": {
-    "lodash.debounce": "^4.0.8",
-    "@types/lodash.debounce": "^4.0.7"
-  },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
+  },
+  "dependencies": {
+    "@nextui-org/shared-utils": "workspace:*"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-infinite-scroll/src/index.ts b/packages/hooks/use-infinite-scroll/src/index.ts
index 5c897fd063..8a34075eb1 100644
--- a/packages/hooks/use-infinite-scroll/src/index.ts
+++ b/packages/hooks/use-infinite-scroll/src/index.ts
@@ -1,5 +1,5 @@
-import debounce from "lodash.debounce";
 import {useLayoutEffect, useRef, useCallback} from "react";
+import {debounce} from "@nextui-org/shared-utils";
 
 export interface UseInfiniteScrollProps {
   /**
diff --git a/packages/hooks/use-intersection-observer/CHANGELOG.md b/packages/hooks/use-intersection-observer/CHANGELOG.md
index 63a5d4ea24..74ec5ea1f4 100644
--- a/packages/hooks/use-intersection-observer/CHANGELOG.md
+++ b/packages/hooks/use-intersection-observer/CHANGELOG.md
@@ -1,5 +1,97 @@
 # @nextui-org/use-intersection-observer
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.5
 
 ### Patch Changes
diff --git a/packages/hooks/use-intersection-observer/package.json b/packages/hooks/use-intersection-observer/package.json
index 82be17fa3c..624baf2cee 100644
--- a/packages/hooks/use-intersection-observer/package.json
+++ b/packages/hooks/use-intersection-observer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-intersection-observer",
-  "version": "2.0.5",
+  "version": "2.2.1",
   "description": "Tracks the intersection of a DOM element and its containing element or the viewport.",
   "keywords": [
     "use-intersection-observer"
@@ -34,13 +34,13 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/utils": "3.24.1",
-    "@react-aria/ssr": "3.9.4",
-    "@react-types/shared": "3.23.1",
-    "@react-aria/interactions": "3.21.3"
+    "@react-aria/utils": "3.26.0",
+    "@react-aria/ssr": "3.9.6",
+    "@react-types/shared": "3.25.0",
+    "@react-aria/interactions": "3.22.4"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-is-mobile/CHANGELOG.md b/packages/hooks/use-is-mobile/CHANGELOG.md
index 0f62191f0d..4a1e7cd827 100644
--- a/packages/hooks/use-is-mobile/CHANGELOG.md
+++ b/packages/hooks/use-is-mobile/CHANGELOG.md
@@ -1,5 +1,93 @@
 # @nextui-org/use-is-mobile
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/hooks/use-is-mobile/package.json b/packages/hooks/use-is-mobile/package.json
index dda4ca54a4..6b8fd7ae39 100644
--- a/packages/hooks/use-is-mobile/package.json
+++ b/packages/hooks/use-is-mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-is-mobile",
-  "version": "2.0.9",
+  "version": "2.2.1",
   "description": "A hook that returns whether the device is mobile or not",
   "keywords": [
     "use-is-mobile"
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@react-aria/ssr": "3.9.4"
+    "@react-aria/ssr": "3.9.6"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-is-mounted/CHANGELOG.md b/packages/hooks/use-is-mounted/CHANGELOG.md
index 3d516ca9d0..e553dd280a 100644
--- a/packages/hooks/use-is-mounted/CHANGELOG.md
+++ b/packages/hooks/use-is-mounted/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-is-mounted
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-is-mounted/package.json b/packages/hooks/use-is-mounted/package.json
index 7efa650bdf..c1a4e87918 100644
--- a/packages/hooks/use-is-mounted/package.json
+++ b/packages/hooks/use-is-mounted/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-is-mounted",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "This hook can be used to render client-based components or run client logic",
   "keywords": [
     "use-is-mounted"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-measure/CHANGELOG.md b/packages/hooks/use-measure/CHANGELOG.md
index a28118b9c3..1d6ffe3b63 100644
--- a/packages/hooks/use-measure/CHANGELOG.md
+++ b/packages/hooks/use-measure/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-real-shape
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.3-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.3-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.3-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.3-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.3-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.3-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.2
 
 ### Patch Changes
diff --git a/packages/hooks/use-measure/package.json b/packages/hooks/use-measure/package.json
index 9c683ed699..f551befd65 100644
--- a/packages/hooks/use-measure/package.json
+++ b/packages/hooks/use-measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-measure",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "description": "Hook that measure and track a element dimensions",
   "keywords": [
     "use-measure"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-pagination/CHANGELOG.md b/packages/hooks/use-pagination/CHANGELOG.md
index 3eb0370e6e..4d01f29e80 100644
--- a/packages/hooks/use-pagination/CHANGELOG.md
+++ b/packages/hooks/use-pagination/CHANGELOG.md
@@ -1,5 +1,134 @@
 # @nextui-org/use-pagination
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.0.10
 
 ### Patch Changes
diff --git a/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx b/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx
index b3338bfed9..f2c880d6c6 100644
--- a/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx
+++ b/packages/hooks/use-pagination/__tests__/use-pagination.test.tsx
@@ -1,4 +1,4 @@
-import {renderHook, act} from "@testing-library/react-hooks";
+import {renderHook, act} from "@testing-library/react";
 
 import {usePagination} from "../src";
 
@@ -97,6 +97,6 @@ describe("usePagination", () => {
     const {result} = renderHook(() => usePagination({total: 10, onChange}));
 
     act(() => result.current.setPage(5));
-    expect(onChange).toBeCalledWith(5);
+    expect(onChange).toHaveBeenCalledWith(5);
   });
 });
diff --git a/packages/hooks/use-pagination/package.json b/packages/hooks/use-pagination/package.json
index 9820be8867..e6af9c2cd2 100644
--- a/packages/hooks/use-pagination/package.json
+++ b/packages/hooks/use-pagination/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-pagination",
-  "version": "2.0.10",
+  "version": "2.2.1",
   "description": "State management hook for Pagination component, it lets you manage pagination with controlled and uncontrolled state",
   "keywords": [
     "use-pagination"
@@ -35,10 +35,10 @@
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
-    "@react-aria/i18n": "3.11.1"
+    "@react-aria/i18n": "3.12.3"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-real-shape/CHANGELOG.md b/packages/hooks/use-real-shape/CHANGELOG.md
index e5874f3899..2c1a646c26 100644
--- a/packages/hooks/use-real-shape/CHANGELOG.md
+++ b/packages/hooks/use-real-shape/CHANGELOG.md
@@ -1,5 +1,124 @@
 # @nextui-org/use-real-shape
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-utils@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-utils@2.1.0
+
+## 2.0.18-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-utils@2.0.18-beta.8
+
+## 2.0.18-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-utils@2.0.18-beta.7
+
+## 2.0.18-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-utils@2.0.18-beta.6
+
+## 2.0.18-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-utils@2.0.18-beta.5
+
+## 2.0.18-beta.4
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.18-beta.4
+
+## 2.0.18-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-utils@2.0.18-beta.3
+
+## 2.0.18-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-utils@2.0.18-beta.2
+
+## 2.0.18-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/react-utils@2.0.18-beta.1
+
+## 2.0.18-beta.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @nextui-org/react-utils@2.0.18-beta.0
+
 ## 2.0.17
 
 ### Patch Changes
diff --git a/packages/hooks/use-real-shape/package.json b/packages/hooks/use-real-shape/package.json
index 2fc4cbbc1b..33f201a40a 100644
--- a/packages/hooks/use-real-shape/package.json
+++ b/packages/hooks/use-real-shape/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-real-shape",
-  "version": "2.0.17",
+  "version": "2.1.1",
   "description": "Hook that returns the real dimensions of an element",
   "keywords": [
     "use-real-shape"
@@ -37,7 +37,7 @@
     "@nextui-org/react-utils": "workspace:*"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-ref-state/CHANGELOG.md b/packages/hooks/use-ref-state/CHANGELOG.md
index 943d82c2fd..d0fed76432 100644
--- a/packages/hooks/use-ref-state/CHANGELOG.md
+++ b/packages/hooks/use-ref-state/CHANGELOG.md
@@ -1,5 +1,81 @@
 # @nextui-org/use-ref-state
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.8-beta.6
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.8-beta.5
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.8-beta.4
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.8-beta.3
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.8-beta.2
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.8-beta.1
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.8-beta.0
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
 ## 2.0.7
 
 ### Patch Changes
diff --git a/packages/hooks/use-ref-state/__tests__/use-ref-state.test.tsx b/packages/hooks/use-ref-state/__tests__/use-ref-state.test.tsx
index 650aa34365..7d33b82030 100644
--- a/packages/hooks/use-ref-state/__tests__/use-ref-state.test.tsx
+++ b/packages/hooks/use-ref-state/__tests__/use-ref-state.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import {renderHook, act} from "@testing-library/react-hooks";
+import {renderHook, act} from "@testing-library/react";
 import {render} from "@testing-library/react";
 
 import {useRefState} from "../src";
diff --git a/packages/hooks/use-ref-state/package.json b/packages/hooks/use-ref-state/package.json
index e65f0bf03f..749245c2a0 100644
--- a/packages/hooks/use-ref-state/package.json
+++ b/packages/hooks/use-ref-state/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ref-state",
-  "version": "2.0.7",
+  "version": "2.1.1",
   "description": "Hook for saving the state in a ref value",
   "keywords": [
     "use-ref-state"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-resize/CHANGELOG.md b/packages/hooks/use-resize/CHANGELOG.md
index 86ee7a431d..dcf7f924aa 100644
--- a/packages/hooks/use-resize/CHANGELOG.md
+++ b/packages/hooks/use-resize/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-resize
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-resize/package.json b/packages/hooks/use-resize/package.json
index a900317857..e35b8c4be3 100644
--- a/packages/hooks/use-resize/package.json
+++ b/packages/hooks/use-resize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-resize",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "Hook that adds an event listener to the resize window event",
   "keywords": [
     "use-resize"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-safe-layout-effect/CHANGELOG.md b/packages/hooks/use-safe-layout-effect/CHANGELOG.md
index 2ab535c965..367e4f2050 100644
--- a/packages/hooks/use-safe-layout-effect/CHANGELOG.md
+++ b/packages/hooks/use-safe-layout-effect/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-safe-layout-effect
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-safe-layout-effect/package.json b/packages/hooks/use-safe-layout-effect/package.json
index 6eff87af8b..2b2f2c9b74 100644
--- a/packages/hooks/use-safe-layout-effect/package.json
+++ b/packages/hooks/use-safe-layout-effect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-safe-layout-effect",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "",
   "keywords": [
     "use-safe-layout-effect"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-scroll-position/CHANGELOG.md b/packages/hooks/use-scroll-position/CHANGELOG.md
index 83abc54ec0..8891930363 100644
--- a/packages/hooks/use-scroll-position/CHANGELOG.md
+++ b/packages/hooks/use-scroll-position/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-scroll-position
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.10-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.10-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.10-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.10-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.10-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.10-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/hooks/use-scroll-position/package.json b/packages/hooks/use-scroll-position/package.json
index 9a991c6b6d..1c71999f0c 100644
--- a/packages/hooks/use-scroll-position/package.json
+++ b/packages/hooks/use-scroll-position/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-scroll-position",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "description": "Provides the logic to control the scroll over an element",
   "keywords": [
     "use-scroll-position"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-ssr/CHANGELOG.md b/packages/hooks/use-ssr/CHANGELOG.md
index 3eb0aeefa2..872fb60543 100644
--- a/packages/hooks/use-ssr/CHANGELOG.md
+++ b/packages/hooks/use-ssr/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-ssr
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-ssr/package.json b/packages/hooks/use-ssr/package.json
index 91c8f206d5..23cff0e4c6 100644
--- a/packages/hooks/use-ssr/package.json
+++ b/packages/hooks/use-ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-ssr",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "",
   "keywords": [
     "use-ssr"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/hooks/use-theme/CHANGELOG.md b/packages/hooks/use-theme/CHANGELOG.md
new file mode 100644
index 0000000000..8a42e2c6a9
--- /dev/null
+++ b/packages/hooks/use-theme/CHANGELOG.md
@@ -0,0 +1,83 @@
+# @nextui-org/use-theme
+
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.1-beta.7
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.1-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.1-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.1-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.1-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.1-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.1-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.1-beta.0
+
+### Patch Changes
+
+- [#3169](https://github.com/nextui-org/nextui/pull/3169) [`ad7e2615d`](https://github.com/nextui-org/nextui/commit/ad7e2615d3cbc8044a8acc3a6adb35a653bdfbeb) Thanks [@wingkwong](https://github.com/wingkwong)! - introduce `use-theme` hook
diff --git a/packages/hooks/use-theme/README.md b/packages/hooks/use-theme/README.md
new file mode 100644
index 0000000000..4f6fdc709a
--- /dev/null
+++ b/packages/hooks/use-theme/README.md
@@ -0,0 +1,55 @@
+# @nextui-org/use-theme
+
+React hook to switch between light and dark themes
+
+## Installation
+
+```sh
+yarn add @nextui-org/use-theme
+# or
+npm i @nextui-org/use-theme
+```
+
+## Usage
+
+Import `useTheme`
+
+```tsx
+import {useTheme} from "@nextui-org/use-theme";
+```
+
+### theme
+
+```tsx
+// `theme` is the active theme name
+// by default, it will use the one in localStorage.
+// if it is no such value in localStorage, `light` theme will be used
+const {theme} = useTheme();
+```
+
+### setTheme
+
+You can use any theme name you want, but make sure it exists in your 
+`tailwind.config.js` file. See [Create Theme](https://nextui.org/docs/customization/create-theme) for more details.
+
+```tsx
+// set `theme` by using `setTheme`
+const {setTheme} = useTheme();
+// setting to light theme
+setTheme('light')
+// setting to dark theme
+setTheme('dark')
+// setting to purple-dark theme
+setTheme('purple-dark')
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/hooks/use-theme/__tests__/use-theme.test.tsx b/packages/hooks/use-theme/__tests__/use-theme.test.tsx
new file mode 100644
index 0000000000..67f0155d0c
--- /dev/null
+++ b/packages/hooks/use-theme/__tests__/use-theme.test.tsx
@@ -0,0 +1,147 @@
+import * as React from "react";
+import {render, act} from "@testing-library/react";
+
+import {useTheme, ThemeProps, Theme} from "../src";
+
+const TestComponent = ({defaultTheme}: {defaultTheme?: Theme}) => {
+  const {theme, setTheme} = useTheme(defaultTheme);
+
+  return (
+    <div>
+      <span data-testid="theme-display">{theme}</span>
+      <button type="button" onClick={() => setTheme(ThemeProps.DARK)}>
+        Set Dark
+      </button>
+      <button type="button" onClick={() => setTheme(ThemeProps.LIGHT)}>
+        Set Light
+      </button>
+      <button type="button" onClick={() => setTheme(ThemeProps.SYSTEM)}>
+        Set System
+      </button>
+    </div>
+  );
+};
+
+TestComponent.displayName = "TestComponent";
+
+const localStorageMock = (() => {
+  let store: {[key: string]: string} = {};
+
+  return {
+    getItem: (key: string) => store[key] || null,
+    setItem: (key: string, value: string) => {
+      store[key] = value;
+    },
+    clear: () => {
+      store = {};
+    },
+  };
+})();
+
+Object.defineProperty(window, "localStorage", {
+  value: localStorageMock,
+});
+
+describe("useTheme hook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    localStorage.clear();
+
+    document.documentElement.className = "";
+  });
+
+  it("should initialize with default theme if no theme is stored in localStorage", () => {
+    const {getByTestId} = render(<TestComponent />);
+
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.LIGHT);
+    expect(document.documentElement.classList.contains(ThemeProps.LIGHT)).toBe(true);
+  });
+
+  it("should initialize with the given theme if no theme is stored in localStorage", () => {
+    const customTheme = "purple-dark";
+    const {getByTestId} = render(<TestComponent defaultTheme={customTheme} />);
+
+    expect(getByTestId("theme-display").textContent).toBe(customTheme);
+    expect(document.documentElement.classList.contains(customTheme)).toBe(true);
+  });
+
+  it("should initialize with stored theme from localStorage", () => {
+    localStorage.setItem(ThemeProps.KEY, ThemeProps.DARK);
+
+    const {getByTestId} = render(<TestComponent />);
+
+    expect(localStorage.getItem(ThemeProps.KEY)).toBe(ThemeProps.DARK);
+
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.DARK);
+    expect(document.documentElement.classList.contains(ThemeProps.DARK)).toBe(true);
+  });
+
+  it("should set new theme correctly and update localStorage and DOM (dark)", () => {
+    const {getByText, getByTestId} = render(<TestComponent />);
+
+    act(() => {
+      getByText("Set Dark").click();
+    });
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.DARK);
+    expect(localStorage.getItem(ThemeProps.KEY)).toBe(ThemeProps.DARK);
+    expect(document.documentElement.classList.contains(ThemeProps.DARK)).toBe(true);
+  });
+
+  it("should set new theme correctly and update localStorage and DOM (light)", () => {
+    const {getByText, getByTestId} = render(<TestComponent />);
+
+    act(() => {
+      getByText("Set Light").click();
+    });
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.LIGHT);
+    expect(localStorage.getItem(ThemeProps.KEY)).toBe(ThemeProps.LIGHT);
+    expect(document.documentElement.classList.contains(ThemeProps.LIGHT)).toBe(true);
+  });
+
+  it("should set new theme correctly and update localStorage and DOM (system - prefers-color-scheme: light)", () => {
+    const {getByText, getByTestId} = render(<TestComponent />);
+
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    act(() => {
+      getByText("Set System").click();
+    });
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.SYSTEM);
+    expect(localStorage.getItem(ThemeProps.KEY)).toBe(ThemeProps.SYSTEM);
+    expect(document.documentElement.classList.contains(ThemeProps.LIGHT)).toBe(true);
+  });
+
+  it("should set new theme correctly and update localStorage and DOM (system - prefers-color-scheme: dark)", () => {
+    const {getByText, getByTestId} = render(<TestComponent />);
+
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation((query) => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    act(() => {
+      getByText("Set System").click();
+    });
+    expect(getByTestId("theme-display").textContent).toBe(ThemeProps.SYSTEM);
+    expect(localStorage.getItem(ThemeProps.KEY)).toBe(ThemeProps.SYSTEM);
+    expect(document.documentElement.classList.contains(ThemeProps.DARK)).toBe(true);
+  });
+});
diff --git a/packages/hooks/use-theme/package.json b/packages/hooks/use-theme/package.json
new file mode 100644
index 0000000000..2ad7a57e6a
--- /dev/null
+++ b/packages/hooks/use-theme/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@nextui-org/use-theme",
+  "version": "2.1.1",
+  "description": "React hook to switch between light and dark themes",
+  "keywords": [
+    "use-theme"
+  ],
+  "author": "WK Wong <wingkwong.code@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/hooks/use-theme"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  }
+}
diff --git a/packages/hooks/use-theme/src/index.ts b/packages/hooks/use-theme/src/index.ts
new file mode 100644
index 0000000000..00dcd1a4ca
--- /dev/null
+++ b/packages/hooks/use-theme/src/index.ts
@@ -0,0 +1,85 @@
+import {useCallback, useEffect, useState} from "react";
+
+// constant properties for Theme
+export const ThemeProps = {
+  // localStorage key for storing the current theme
+  KEY: "nextui-theme",
+  // light theme
+  LIGHT: "light",
+  // dark theme
+  DARK: "dark",
+  // system theme
+  SYSTEM: "system",
+} as const;
+
+// type definition for Theme using system theme names or custom theme names
+export type customTheme = string;
+export type Theme =
+  | typeof ThemeProps.LIGHT
+  | typeof ThemeProps.DARK
+  | typeof ThemeProps.SYSTEM
+  | customTheme;
+
+/**
+ * React hook to switch between themes
+ *
+ * @param defaultTheme the default theme name (e.g. light, dark, purple-dark and etc)
+ * @returns An object containing the current theme and theme manipulation functions
+ */
+export function useTheme(defaultTheme: Theme = ThemeProps.SYSTEM) {
+  const MEDIA = "(prefers-color-scheme: dark)";
+
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(ThemeProps.KEY) as Theme | null;
+
+    // return stored theme if it is selected previously
+    if (storedTheme) return storedTheme;
+
+    // if it is using system theme, check `prefers-color-scheme` value
+    // return light theme if not specified
+    if (defaultTheme === ThemeProps.SYSTEM) {
+      return window.matchMedia?.(MEDIA).matches ? ThemeProps.DARK : ThemeProps.LIGHT;
+    }
+
+    return defaultTheme;
+  });
+
+  const setTheme = useCallback(
+    (newTheme: Theme) => {
+      const targetTheme =
+        newTheme === ThemeProps.SYSTEM
+          ? window.matchMedia?.(MEDIA).matches
+            ? ThemeProps.DARK
+            : ThemeProps.LIGHT
+          : newTheme;
+
+      localStorage.setItem(ThemeProps.KEY, newTheme);
+
+      document.documentElement.classList.remove(theme);
+      document.documentElement.classList.add(targetTheme);
+      setThemeState(newTheme);
+    },
+    [theme],
+  );
+
+  const handleMediaQuery = useCallback(
+    (e: MediaQueryListEvent | MediaQueryList) => {
+      if (defaultTheme === ThemeProps.SYSTEM) {
+        setTheme(e.matches ? ThemeProps.DARK : ThemeProps.LIGHT);
+      }
+    },
+    [setTheme],
+  );
+
+  useEffect(() => setTheme(theme), [theme, setTheme]);
+
+  useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+
+    media.addEventListener("change", handleMediaQuery);
+
+    return () => media.removeEventListener("change", handleMediaQuery);
+  }, [handleMediaQuery]);
+
+  return {theme, setTheme};
+}
diff --git a/packages/hooks/use-theme/tsconfig.json b/packages/hooks/use-theme/tsconfig.json
new file mode 100644
index 0000000000..46e3b466c2
--- /dev/null
+++ b/packages/hooks/use-theme/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/hooks/use-update-effect/CHANGELOG.md b/packages/hooks/use-update-effect/CHANGELOG.md
index 623c057101..360491972e 100644
--- a/packages/hooks/use-update-effect/CHANGELOG.md
+++ b/packages/hooks/use-update-effect/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/use-update-effect
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/hooks/use-update-effect/package.json b/packages/hooks/use-update-effect/package.json
index 050016f113..c67afdab4d 100644
--- a/packages/hooks/use-update-effect/package.json
+++ b/packages/hooks/use-update-effect/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/use-update-effect",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "React effect hook that invokes only on update",
   "keywords": [
     "use-update-effect"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/storybook/.storybook/addons/react-strict-mode/index.tsx b/packages/storybook/.storybook/addons/react-strict-mode/index.tsx
index aea3be9ef6..cf18635d0f 100644
--- a/packages/storybook/.storybook/addons/react-strict-mode/index.tsx
+++ b/packages/storybook/.storybook/addons/react-strict-mode/index.tsx
@@ -1,29 +1,29 @@
-import type { PropsWithChildren } from "react"
+import type {PropsWithChildren} from "react";
 
-import { addons, makeDecorator } from "@storybook/preview-api"
-import { getQueryParams } from "@storybook/preview-api"
-import React, { StrictMode, useEffect, useState } from "react"
+import {addons, makeDecorator} from "@storybook/preview-api";
+import React, {StrictMode, useEffect, useState} from "react";
 
-function StrictModeDecorator({ children }: PropsWithChildren<any>) {
-  const [isStrict, setStrict] = useState(() => getQueryParams()?.strict === "true")
+function StrictModeDecorator({children}: PropsWithChildren<any>) {
+  const strictQuery = new URLSearchParams(window.location.search).get("strict");
+  const [isStrict, setStrict] = useState(strictQuery === "true");
 
   useEffect(() => {
-    const channel = addons.getChannel()
+    const channel = addons.getChannel();
 
-    channel.on("strict/updated", setStrict)
+    channel.on("strict/updated", setStrict);
 
     return () => {
-      channel.removeListener("strict/updated", setStrict)
-    }
-  }, [])
+      channel.removeListener("strict/updated", setStrict);
+    };
+  }, []);
 
-  return isStrict ? <StrictMode>{children}</StrictMode> : children
+  return isStrict ? <StrictMode>{children}</StrictMode> : children;
 }
 
 export const withStrictModeSwitcher = makeDecorator({
   name: "withStrictModeSwitcher",
   parameterName: "strictModeSwitcher",
   wrapper: (getStory, context) => {
-    return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>
+    return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>;
   },
-})
+});
diff --git a/packages/storybook/.storybook/addons/react-strict-mode/register.tsx b/packages/storybook/.storybook/addons/react-strict-mode/register.tsx
index f53c70e3b1..a6c7fd8cd1 100644
--- a/packages/storybook/.storybook/addons/react-strict-mode/register.tsx
+++ b/packages/storybook/.storybook/addons/react-strict-mode/register.tsx
@@ -1,11 +1,11 @@
-import type { API } from "@storybook/manager-api";
+import type {API} from "@storybook/manager-api";
 
-import { addons, types } from "@storybook/manager-api";
-import React, { useEffect, useState } from "react";
+import {addons, types} from "@storybook/manager-api";
+import React, {useEffect, useState} from "react";
 
 const ADDON_ID = "StrictModeSwitcher";
 
-function StrictModeSwitcher({ api }: { api: API }) {
+function StrictModeSwitcher({api}: {api: API}) {
   const [isStrict, setStrict] = useState(() => api.getQueryParam("strict") === "true");
 
   const onChange = () => setStrict((val) => !val);
@@ -46,7 +46,7 @@ function StrictModeSwitcher({ api }: { api: API }) {
 if (process.env.NODE_ENV !== "production") {
   addons.register(ADDON_ID, (api) => {
     addons.add(ADDON_ID, {
-      match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+      match: ({viewMode}) => !!viewMode?.match(/^(story|docs)$/),
       render: () => <StrictModeSwitcher api={api} />,
       title: "Strict Mode Switcher",
       type: types.TOOL,
diff --git a/packages/storybook/.storybook/main.js b/packages/storybook/.storybook/main.ts
similarity index 61%
rename from packages/storybook/.storybook/main.js
rename to packages/storybook/.storybook/main.ts
index fe52861392..9de42c8be4 100644
--- a/packages/storybook/.storybook/main.js
+++ b/packages/storybook/.storybook/main.ts
@@ -1,25 +1,43 @@
-import { dirname, join } from "path";
-module.exports = {
+import {dirname, join} from "path";
+import remarkGfm from "remark-gfm";
+import type {StorybookConfig} from "@storybook/react-vite";
+
+const config: StorybookConfig = {
   stories: [
-    "./welcome.stories.mdx",
+    "./welcome.mdx",
     "../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)",
     "../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
+
   staticDirs: ["../public"],
+
   addons: [
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("storybook-dark-mode"),
-    getAbsolutePath("@storybook/addon-mdx-gfm"),
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
     "./addons/react-strict-mode/register",
   ],
+
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
   },
+
   core: {
     disableTelemetry: true,
   },
+
   typescript: {
     reactDocgen: false,
   },
@@ -28,3 +46,5 @@ module.exports = {
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, "package.json")));
 }
+
+export default config;
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
index 258a65787d..c519a071c4 100644
--- a/packages/storybook/.storybook/preview.tsx
+++ b/packages/storybook/.storybook/preview.tsx
@@ -4,7 +4,7 @@ import {NextUIProvider} from "@nextui-org/system/src/provider";
 import type {Preview} from "@storybook/react";
 
 import "./style.css";
-import { withStrictModeSwitcher } from "./addons/react-strict-mode";
+import {withStrictModeSwitcher} from "./addons/react-strict-mode";
 
 const decorators: Preview["decorators"] = [
   (Story, {globals: {locale, disableAnimation}}) => {
@@ -30,7 +30,6 @@ const commonTheme = {
 };
 
 const parameters: Preview["parameters"] = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
   options: {
     storySort: {
       method: "alphabetical",
@@ -134,6 +133,7 @@ const preview: Preview = {
   decorators,
   parameters,
   globalTypes,
+  tags: ["autodocs"],
 };
 
 export default preview;
diff --git a/packages/storybook/.storybook/welcome.stories.mdx b/packages/storybook/.storybook/welcome.mdx
similarity index 95%
rename from packages/storybook/.storybook/welcome.stories.mdx
rename to packages/storybook/.storybook/welcome.mdx
index e707a74eb0..4833bdfb5c 100644
--- a/packages/storybook/.storybook/welcome.stories.mdx
+++ b/packages/storybook/.storybook/welcome.mdx
@@ -13,10 +13,9 @@ import {link, button} from "@nextui-org/theme";
 
 <br />
 
-<p className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
-  Here you can find the guidelines, components APIs and examples to help you build your next project
-  with NextUI.
-</p>
+<div className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
+  Here you can find the guidelines, components APIs and examples to help you build your next project with NextUI.
+</div>
 
 <div className="flex flex-col gap-8">
   <div className="flex flex-row justify-start items-center mt-8 gap-4">
@@ -127,6 +126,6 @@ import {link, button} from "@nextui-org/theme";
 <br />
 
 
-<div class="block text-xs [&>p]:text-default-400">
-  Last updated on <time datetime="2023-03-07">Jul 31, 2023</time>
+<div className="block text-xs [&>p]:text-default-400">
+  Last updated on <time dateTime="2023-03-07">Jul 31, 2023</time>
 </div>
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index cd34db68dd..6ed943f1a4 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -5,6 +5,7 @@
   "keywords": [
     "storybook"
   ],
+  "type": "module",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "homepage": "https://nextui.org",
   "license": "MIT",
@@ -37,23 +38,24 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.4.6",
-    "@storybook/addon-actions": "^7.4.6",
-    "@storybook/addon-docs": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/cli": "^7.4.6",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/preview-api": "^7.6.17",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
-    "@storybook/theming": "^7.4.6",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/cli": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.13",
-    "storybook": "^7.4.6",
-    "storybook-dark-mode": "^3.0.1",
+    "remark-gfm": "^4.0.0",
+    "storybook": "^8.4.5",
+    "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.5",
-    "vite": "^4.4.7"
+    "vite": "^5.4.11"
   },
   "tsup": {
     "clean": true,
diff --git a/packages/storybook/postcss.config.js b/packages/storybook/postcss.config.js
index 12a703d900..2aa7205d4b 100644
--- a/packages/storybook/postcss.config.js
+++ b/packages/storybook/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/packages/storybook/tailwind.config.js b/packages/storybook/tailwind.config.js
index fd291b0649..e9e510ccff 100644
--- a/packages/storybook/tailwind.config.js
+++ b/packages/storybook/tailwind.config.js
@@ -1,9 +1,9 @@
-const {nextui} = require("@nextui-org/theme/plugin");
+import {nextui} from '@nextui-org/theme/plugin';
 
-// /** @type {import('tailwindcss').Config} */
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    "./.storybook/welcome.stories.mdx",
+    "./.storybook/welcome.mdx",
     "../components/*/src/**/*.{js,jsx,ts,tsx}",
     "../components/*/stories/**/*.{js,jsx,ts,tsx}",
     "../core/theme/src/components/**/*.{js,jsx,ts,tsx}",
diff --git a/packages/storybook/vite.config.ts b/packages/storybook/vite.config.ts
new file mode 100644
index 0000000000..d496766f1e
--- /dev/null
+++ b/packages/storybook/vite.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ["@storybook/theming", "@mdx-js/react"],
+  },
+});
diff --git a/packages/utilities/aria-utils/CHANGELOG.md b/packages/utilities/aria-utils/CHANGELOG.md
index adff0f2dd1..9335ef7582 100644
--- a/packages/utilities/aria-utils/CHANGELOG.md
+++ b/packages/utilities/aria-utils/CHANGELOG.md
@@ -1,5 +1,172 @@
 # @nextui-org/aria-utils
 
+## 2.2.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system@2.4.1
+  - @nextui-org/react-rsc-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.2.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- [#4226](https://github.com/nextui-org/nextui/pull/4226) [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc) Thanks [@wingkwong](https://github.com/wingkwong)! - bump `@react-aria/utils` version (#4212)
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system@2.4.0
+  - @nextui-org/react-rsc-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.1.0-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`c8f2ec887`](https://github.com/nextui-org/nextui/commit/c8f2ec88752289913968331032b9e7f772c12ec4)]:
+  - @nextui-org/system@2.3.0-beta.11
+
+## 2.1.0-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system@2.3.0-beta.10
+  - @nextui-org/react-rsc-utils@2.0.15-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.1.0-beta.9
+
+### Patch Changes
+
+- [#3036](https://github.com/nextui-org/nextui/pull/3036) [`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system@2.3.0-beta.9
+
+## 2.1.0-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`4607fe2ff`](https://github.com/nextui-org/nextui/commit/4607fe2ff448a536496c2b59ccdfcb217379b6ed)]:
+  - @nextui-org/system@2.3.0-beta.8
+
+## 2.1.0-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system@2.3.0-beta.7
+  - @nextui-org/react-rsc-utils@2.0.15-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.1.0-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system@2.3.0-beta.6
+  - @nextui-org/react-rsc-utils@2.0.15-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.1.0-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system@2.3.0-beta.5
+  - @nextui-org/react-rsc-utils@2.0.15-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.1.0-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system@2.3.0-beta.4
+
+## 2.1.0-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system@2.3.0-beta.3
+  - @nextui-org/react-rsc-utils@2.0.15-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.1.0-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system@2.3.0-beta.2
+  - @nextui-org/react-rsc-utils@2.0.15-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.1.0-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system@2.3.0-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.1.0-beta.0
+
+### Minor Changes
+
+- [#3732](https://github.com/nextui-org/nextui/pull/3732) [`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d) Thanks [@ryo-manba](https://github.com/ryo-manba)! - update react-aria version
+
+### Patch Changes
+
+- Updated dependencies [[`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.0.26
 
 ### Patch Changes
diff --git a/packages/utilities/aria-utils/package.json b/packages/utilities/aria-utils/package.json
index c9c4388232..ca951bf716 100644
--- a/packages/utilities/aria-utils/package.json
+++ b/packages/utilities/aria-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/aria-utils",
-  "version": "2.0.26",
+  "version": "2.2.1",
   "description": "A package for managing @react-aria nextui utils.",
   "keywords": [
     "aria-utils"
@@ -34,18 +34,18 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-rsc-utils": "workspace:*",
-    "@react-aria/utils": "3.24.1",
-    "@react-stately/collections": "3.10.7",
-    "@react-stately/overlays": "3.6.7",
-    "@react-types/overlays": "3.8.7",
-    "@react-types/shared": "3.23.1"
+    "@react-aria/utils": "3.26.0",
+    "@react-stately/collections": "3.11.0",
+    "@react-stately/overlays": "3.6.11",
+    "@react-types/overlays": "3.8.10",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/utilities/dom-animation/CHANGELOG.md b/packages/utilities/dom-animation/CHANGELOG.md
new file mode 100644
index 0000000000..478937454f
--- /dev/null
+++ b/packages/utilities/dom-animation/CHANGELOG.md
@@ -0,0 +1,83 @@
+# @nextui-org/dom-animation
+
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.1-beta.7
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.1-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.1-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.1-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.1-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.1-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.1-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.1-beta.0
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
diff --git a/packages/utilities/dom-animation/README.md b/packages/utilities/dom-animation/README.md
new file mode 100644
index 0000000000..66f79ccbfd
--- /dev/null
+++ b/packages/utilities/dom-animation/README.md
@@ -0,0 +1,23 @@
+# @nextui-org/dom-animation
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+## Installation
+
+```sh
+yarn add @nextui-org/dom-animation
+# or
+npm i @nextui-org/dom-animation
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
diff --git a/packages/utilities/dom-animation/package.json b/packages/utilities/dom-animation/package.json
new file mode 100644
index 0000000000..57408b918e
--- /dev/null
+++ b/packages/utilities/dom-animation/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@nextui-org/dom-animation",
+  "version": "2.1.1",
+  "description": "Dom Animation from Framer Motion for dynamic import",
+  "keywords": [
+    "dom-animation"
+  ],
+  "author": "WK Wong <wingkwong.code@gmail.com>",
+  "homepage": "https://nextui.org",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nextui-org/nextui.git",
+    "directory": "packages/utilities/dom-animation"
+  },
+  "bugs": {
+    "url": "https://github.com/nextui-org/nextui/issues"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore"
+  },
+  "peerDependencies": {
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
+  },
+  "devDependencies": {
+    "clean-package": "2.2.0",
+    "framer-motion": "11.9.0"
+  },
+  "clean-package": "../../../clean-package.config.json"
+}
diff --git a/packages/utilities/dom-animation/src/index.ts b/packages/utilities/dom-animation/src/index.ts
new file mode 100644
index 0000000000..b150f14a9d
--- /dev/null
+++ b/packages/utilities/dom-animation/src/index.ts
@@ -0,0 +1,3 @@
+import {domAnimation} from "framer-motion";
+
+export default domAnimation;
diff --git a/packages/utilities/dom-animation/tsconfig.json b/packages/utilities/dom-animation/tsconfig.json
new file mode 100644
index 0000000000..46e3b466c2
--- /dev/null
+++ b/packages/utilities/dom-animation/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": ["src", "index.ts"]
+}
diff --git a/packages/utilities/dom-animation/tsup.config.ts b/packages/utilities/dom-animation/tsup.config.ts
new file mode 100644
index 0000000000..3e2bcff6cc
--- /dev/null
+++ b/packages/utilities/dom-animation/tsup.config.ts
@@ -0,0 +1,8 @@
+import {defineConfig} from "tsup";
+
+export default defineConfig({
+  clean: true,
+  target: "es2019",
+  format: ["cjs", "esm"],
+  banner: {js: '"use client";'},
+});
diff --git a/packages/utilities/framer-utils/CHANGELOG.md b/packages/utilities/framer-utils/CHANGELOG.md
index f582297b88..0fcf3c3e86 100644
--- a/packages/utilities/framer-utils/CHANGELOG.md
+++ b/packages/utilities/framer-utils/CHANGELOG.md
@@ -1,5 +1,166 @@
 # @nextui-org/framer-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/system@2.4.1
+  - @nextui-org/use-measure@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`26e478d`](https://github.com/nextui-org/nextui/commit/26e478dd937dedcaf41110171d971a8a3cf2ff52), [`6c0213d`](https://github.com/nextui-org/nextui/commit/6c0213dfc805aa3c793763c0b25f53b2b80c24dc), [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/system@2.4.0
+  - @nextui-org/use-measure@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.0.26-beta.11
+
+### Patch Changes
+
+- Updated dependencies [[`c8f2ec887`](https://github.com/nextui-org/nextui/commit/c8f2ec88752289913968331032b9e7f772c12ec4)]:
+  - @nextui-org/system@2.3.0-beta.11
+
+## 2.0.26-beta.10
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/system@2.3.0-beta.10
+  - @nextui-org/use-measure@2.0.3-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.0.26-beta.9
+
+### Patch Changes
+
+- Updated dependencies [[`eafdb7d47`](https://github.com/nextui-org/nextui/commit/eafdb7d475a7fcaa7671af77e86fcdf62f14ae00)]:
+  - @nextui-org/system@2.3.0-beta.9
+
+## 2.0.26-beta.8
+
+### Patch Changes
+
+- Updated dependencies [[`4607fe2ff`](https://github.com/nextui-org/nextui/commit/4607fe2ff448a536496c2b59ccdfcb217379b6ed)]:
+  - @nextui-org/system@2.3.0-beta.8
+
+## 2.0.26-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/system@2.3.0-beta.7
+  - @nextui-org/use-measure@2.0.3-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.0.26-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/system@2.3.0-beta.6
+  - @nextui-org/use-measure@2.0.3-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.0.26-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/system@2.3.0-beta.5
+  - @nextui-org/use-measure@2.0.3-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.0.26-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+  - @nextui-org/system@2.3.0-beta.4
+
+## 2.0.26-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/system@2.3.0-beta.3
+  - @nextui-org/use-measure@2.0.3-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.0.26-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/system@2.3.0-beta.2
+  - @nextui-org/use-measure@2.0.3-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.0.26-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/system@2.3.0-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.0.26-beta.0
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - update `framer-motion` versions
+
+- Updated dependencies [[`67ea2f65e`](https://github.com/nextui-org/nextui/commit/67ea2f65e17f913bdffae4690586a6ae202c8f7d), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/system@2.3.0-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.0.25
 
 ### Patch Changes
diff --git a/packages/utilities/framer-utils/package.json b/packages/utilities/framer-utils/package.json
index f367216d1b..64d942de54 100644
--- a/packages/utilities/framer-utils/package.json
+++ b/packages/utilities/framer-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/framer-utils",
-  "version": "2.0.25",
+  "version": "2.1.1",
   "description": "A set of framer motion transitions for react",
   "keywords": [
     "framer-utils"
@@ -34,9 +34,9 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "framer-motion": ">=10.17.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1"
   },
   "dependencies": {
     "@nextui-org/system": "workspace:*",
@@ -47,7 +47,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "clean-package": "2.2.0",
-    "framer-motion": "^11.0.22"
+    "framer-motion": "11.9.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
\ No newline at end of file
diff --git a/packages/utilities/react-rsc-utils/CHANGELOG.md b/packages/utilities/react-rsc-utils/CHANGELOG.md
index 4e53b0826f..00f6e49905 100644
--- a/packages/utilities/react-rsc-utils/CHANGELOG.md
+++ b/packages/utilities/react-rsc-utils/CHANGELOG.md
@@ -1,5 +1,75 @@
 # @nextui-org/react-rsc-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.15-beta.5
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.15-beta.4
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.15-beta.3
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.15-beta.2
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.15-beta.1
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.15-beta.0
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
 ## 2.0.14
 
 ### Patch Changes
diff --git a/packages/utilities/react-rsc-utils/package.json b/packages/utilities/react-rsc-utils/package.json
index b6a8421f67..125fb370fe 100644
--- a/packages/utilities/react-rsc-utils/package.json
+++ b/packages/utilities/react-rsc-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react-rsc-utils",
-  "version": "2.0.14",
+  "version": "2.1.1",
   "description": "A set of utilities for react compatible with RSC",
   "keywords": [
     "react-rsc-utils"
@@ -38,7 +38,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/utilities/react-utils/CHANGELOG.md b/packages/utilities/react-utils/CHANGELOG.md
index 358a8694f5..486bbe019b 100644
--- a/packages/utilities/react-utils/CHANGELOG.md
+++ b/packages/utilities/react-utils/CHANGELOG.md
@@ -1,5 +1,132 @@
 # @nextui-org/react-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+- Updated dependencies [[`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af)]:
+  - @nextui-org/react-rsc-utils@2.1.1
+  - @nextui-org/shared-utils@2.1.1
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+### Patch Changes
+
+- Updated dependencies [[`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201)]:
+  - @nextui-org/react-rsc-utils@2.1.0
+  - @nextui-org/shared-utils@2.1.0
+
+## 2.0.18-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+- Updated dependencies [[`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.5
+  - @nextui-org/shared-utils@2.0.9-beta.8
+
+## 2.0.18-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+- Updated dependencies [[`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.4
+  - @nextui-org/shared-utils@2.0.9-beta.7
+
+## 2.0.18-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+- Updated dependencies [[`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.3
+  - @nextui-org/shared-utils@2.0.9-beta.6
+
+## 2.0.18-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+- Updated dependencies [[`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.2
+  - @nextui-org/shared-utils@2.0.9-beta.5
+
+## 2.0.18-beta.4
+
+### Patch Changes
+
+- Updated dependencies [[`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7)]:
+  - @nextui-org/shared-utils@2.0.9-beta.4
+
+## 2.0.18-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+- Updated dependencies [[`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.1
+  - @nextui-org/shared-utils@2.0.9-beta.3
+
+## 2.0.18-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+- Updated dependencies [[`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89)]:
+  - @nextui-org/react-rsc-utils@2.0.15-beta.0
+  - @nextui-org/shared-utils@2.0.9-beta.2
+
+## 2.0.18-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+- Updated dependencies [[`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85)]:
+  - @nextui-org/shared-utils@2.0.9-beta.1
+
+## 2.0.18-beta.0
+
+### Patch Changes
+
+- Updated dependencies [[`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb), [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb)]:
+  - @nextui-org/shared-utils@2.0.9-beta.0
+
 ## 2.0.17
 
 ### Patch Changes
diff --git a/packages/utilities/react-utils/package.json b/packages/utilities/react-utils/package.json
index 9a230d029a..e19b33e351 100644
--- a/packages/utilities/react-utils/package.json
+++ b/packages/utilities/react-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/react-utils",
-  "version": "2.0.17",
+  "version": "2.1.1",
   "description": "A set of utilities for react on client side",
   "keywords": [
     "react-utils"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/packages/utilities/shared-icons/CHANGELOG.md b/packages/utilities/shared-icons/CHANGELOG.md
index 728f78c25b..e2786800c1 100644
--- a/packages/utilities/shared-icons/CHANGELOG.md
+++ b/packages/utilities/shared-icons/CHANGELOG.md
@@ -1,5 +1,93 @@
 # @nextui-org/shared-icons
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.10-beta.8
+
+### Patch Changes
+
+- [#4172](https://github.com/nextui-org/nextui/pull/4172) [`004c4a4b3`](https://github.com/nextui-org/nextui/commit/004c4a4b3e44477f148937b12bb542e4b27fd322) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - introduce `isClearable` to Textarea component (#2348, #2112)
+
+## 2.0.10-beta.7
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.10-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.10-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.10-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.10-beta.3
+
+### Patch Changes
+
+- [#4054](https://github.com/nextui-org/nextui/pull/4054) [`0f55c491b`](https://github.com/nextui-org/nextui/commit/0f55c491b73da8944f9b38f2ad7486d1b89f8b7a) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Alert design improved
+
+## 2.0.10-beta.2
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.10-beta.1
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.10-beta.0
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
 ## 2.0.9
 
 ### Patch Changes
diff --git a/packages/utilities/shared-icons/package.json b/packages/utilities/shared-icons/package.json
index 6cbeb9a8a7..dbd822a980 100644
--- a/packages/utilities/shared-icons/package.json
+++ b/packages/utilities/shared-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-icons",
-  "version": "2.0.9",
+  "version": "2.1.1",
   "description": "Internal icons set, commonly used in the components stories",
   "keywords": [
     "icons-utils"
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/packages/utilities/shared-icons/src/danger.tsx b/packages/utilities/shared-icons/src/danger.tsx
new file mode 100644
index 0000000000..ffa5c56f6d
--- /dev/null
+++ b/packages/utilities/shared-icons/src/danger.tsx
@@ -0,0 +1,20 @@
+import {IconSvgProps} from "./types";
+
+export const DangerIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/index.ts b/packages/utilities/shared-icons/src/index.ts
index d4a719af5c..a2f5a0286d 100644
--- a/packages/utilities/shared-icons/src/index.ts
+++ b/packages/utilities/shared-icons/src/index.ts
@@ -33,6 +33,10 @@ export * from "./arrow-right";
 export * from "./arrow-left";
 export * from "./link";
 export * from "./selector";
+export * from "./info-circle";
+export * from "./warning";
+export * from "./danger";
+export * from "./success";
 
 // sets
 export * from "./bulk";
diff --git a/packages/utilities/shared-icons/src/info-circle.tsx b/packages/utilities/shared-icons/src/info-circle.tsx
new file mode 100644
index 0000000000..6f4650d0e3
--- /dev/null
+++ b/packages/utilities/shared-icons/src/info-circle.tsx
@@ -0,0 +1,20 @@
+import {IconSvgProps} from "./types";
+
+export const InfoCircleIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z" />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/success.tsx b/packages/utilities/shared-icons/src/success.tsx
new file mode 100644
index 0000000000..dab41491ea
--- /dev/null
+++ b/packages/utilities/shared-icons/src/success.tsx
@@ -0,0 +1,27 @@
+import {IconSvgProps} from "./types";
+
+export const SuccessIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="
+          M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2Z
+          M16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54
+          C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64
+          C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z
+        "
+      />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-icons/src/warning.tsx b/packages/utilities/shared-icons/src/warning.tsx
new file mode 100644
index 0000000000..fd4d4d3133
--- /dev/null
+++ b/packages/utilities/shared-icons/src/warning.tsx
@@ -0,0 +1,25 @@
+import {IconSvgProps} from "./types";
+
+export const WarningIcon = (
+  props: IconSvgProps & {
+    className?: string;
+  },
+) => {
+  return (
+    <svg
+      fill="none"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M3 10.417C3 7.219 3 5.62 3.378 5.082C3.755 4.545 5.258 4.03 8.265 3.001L8.838 2.805C10.405 2.268 11.188 2 12 2C12.812 2 13.595 2.268 15.162 2.805L15.735 3.001C18.742 4.03 20.245 4.545 20.622 5.082C21 5.62 21 7.22 21 10.417V11.991C21 17.629 16.761 20.366 14.101 21.527C13.38 21.842 13.02 22 12 22C10.98 22 10.62 21.842 9.899 21.527C7.239 20.365 3 17.63 3 11.991V10.417ZM12 7.25C12.1989 7.25 12.3897 7.32902 12.5303 7.46967C12.671 7.61032 12.75 7.80109 12.75 8V12C12.75 12.1989 12.671 12.3897 12.5303 12.5303C12.3897 12.671 12.1989 12.75 12 12.75C11.8011 12.75 11.6103 12.671 11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.80109 11.329 7.61032 11.4697 7.46967C11.6103 7.32902 11.8011 7.25 12 7.25ZM12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14C11.7348 14 11.4804 14.1054 11.2929 14.2929C11.1054 14.4804 11 14.7348 11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
diff --git a/packages/utilities/shared-utils/CHANGELOG.md b/packages/utilities/shared-utils/CHANGELOG.md
index f9073a33c0..ffebf252d9 100644
--- a/packages/utilities/shared-utils/CHANGELOG.md
+++ b/packages/utilities/shared-utils/CHANGELOG.md
@@ -1,5 +1,95 @@
 # @nextui-org/shared-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.9-beta.8
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.9-beta.7
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.9-beta.6
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.9-beta.5
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.9-beta.4
+
+### Patch Changes
+
+- [#4039](https://github.com/nextui-org/nextui/pull/4039) [`5339b2571`](https://github.com/nextui-org/nextui/commit/5339b2571e6d73ca6efe2acd34d88669419db9f7) Thanks [@wingkwong](https://github.com/wingkwong)! - support inert value with boolean type for react 19 (#4038)
+
+## 2.0.9-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.9-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.9-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.9-beta.0
+
+### Patch Changes
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - replaced lodash with native approaches
+
+- [#3523](https://github.com/nextui-org/nextui/pull/3523) [`3f0d81b56`](https://github.com/nextui-org/nextui/commit/3f0d81b560e7ef3eb315bd98407249c0eb4ed5eb) Thanks [@wingkwong](https://github.com/wingkwong)! - framer motion optimization (#3340)
+
 ## 2.0.8
 
 ### Patch Changes
diff --git a/packages/utilities/shared-utils/package.json b/packages/utilities/shared-utils/package.json
index fa43139151..56034f63f0 100644
--- a/packages/utilities/shared-utils/package.json
+++ b/packages/utilities/shared-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/shared-utils",
-  "version": "2.0.8",
+  "version": "2.1.1",
   "description": "A set of NextUI utilities",
   "keywords": [
     "system"
diff --git a/packages/utilities/shared-utils/src/functions.ts b/packages/utilities/shared-utils/src/functions.ts
index 2663a84a6f..bdbcec3db4 100644
--- a/packages/utilities/shared-utils/src/functions.ts
+++ b/packages/utilities/shared-utils/src/functions.ts
@@ -1,3 +1,5 @@
+import React from "react";
+
 type Args<T extends Function> = T extends (...args: infer R) => any ? R : never;
 
 type AnyFunction<T = any> = (...args: T[]) => any;
@@ -8,15 +10,37 @@ type Extractable =
     }
   | undefined;
 
+type Iteratee<T> = ((value: T) => any) | keyof T;
+
 /**
- * Capitalizes the first letter of a string
- * @param {string} text
- * @returns {string}
+ * Capitalizes the first character of a string and converts the rest of the string to lowercase.
+ *
+ * @param s - The string to capitalize.
+ * @returns The capitalized string, or an empty string if the input is falsy.
+ *
+ * @example
+ * capitalize('hello'); // returns 'Hello'
+ * capitalize(''); // returns ''
  */
-export const capitalize = (text: string) => {
-  return text.charAt(0).toUpperCase() + text.slice(1);
+export const capitalize = (s: string) => {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1).toLowerCase() : "";
 };
 
+/**
+ * Creates a function that invokes each provided function with the same argument, until
+ * one of the functions calls `event.preventDefault()`.
+ *
+ * @param fns - An array of functions that may or may not be defined.
+ * @returns A function that takes an event and invokes each handler with this event.
+ *
+ * @typeParam T - A function type that takes an event-like argument.
+ *
+ * @example
+ * const handler1 = event => console.log('Handled by first', event.type);
+ * const handler2 = event => event.preventDefault();
+ * const allHandlers = callAllHandlers(handler1, handler2);
+ * allHandlers({ type: 'click' });
+ */
 export function callAllHandlers<T extends (event: any) => void>(...fns: (T | undefined)[]) {
   return function func(event: Args<T>[0]) {
     fns.some((fn) => {
@@ -27,6 +51,20 @@ export function callAllHandlers<T extends (event: any) => void>(...fns: (T | und
   };
 }
 
+/**
+ * Creates a function that invokes each provided function with the same argument.
+ *
+ * @param fns - An array of functions that may or may not be defined.
+ * @returns A function that takes one argument and invokes all provided functions with it.
+ *
+ * @typeParam T - A function type that takes any argument.
+ *
+ * @example
+ * const greet = name => console.log(`Hello, ${name}!`);
+ * const bye = name => console.log(`Goodbye, ${name}!`);
+ * const greetAndBye = callAll(greet, bye);
+ * greetAndBye('Alice');
+ */
 export function callAll<T extends AnyFunction>(...fns: (T | undefined)[]) {
   return function mergedFn(arg: Args<T>[0]) {
     fns.forEach((fn) => {
@@ -35,6 +73,21 @@ export function callAll<T extends AnyFunction>(...fns: (T | undefined)[]) {
   };
 }
 
+/**
+ * Extracts a property from a list of objects, returning the first found non-falsy value or a default value.
+ *
+ * @param key - The key of the property to extract.
+ * @param defaultValue - The default value to return if no non-falsy property value is found.
+ * @param objs - An array of objects to search.
+ * @returns The value of the extracted property or the default value.
+ *
+ * @typeParam K - The type of the key.
+ * @typeParam D - The type of the default value.
+ *
+ * @example
+ * extractProperty('name', 'Unknown', { name: 'Alice' }, { name: 'Bob' }); // returns 'Alice'
+ * extractProperty('age', 18, { name: 'Alice' }); // returns 18
+ */
 export function extractProperty<K extends keyof Extractable, D extends keyof Extractable>(
   key: K | string,
   defaultValue: D | string | boolean,
@@ -51,12 +104,27 @@ export function extractProperty<K extends keyof Extractable, D extends keyof Ext
   return result as Extractable[K] | D | string | boolean;
 }
 
+/**
+ * Generates a unique identifier using a specified prefix and a random number.
+ *
+ * @param prefix - The prefix to prepend to the unique identifier.
+ * @returns A string that combines the prefix and a random number.
+ *
+ * @example
+ * getUniqueID('btn'); // returns 'btn-123456'
+ */
 export function getUniqueID(prefix: string) {
   return `${prefix}-${Math.floor(Math.random() * 1000000)}`;
 }
 
 /**
- * This function removes all event handlers from an object.
+ * Removes all properties from an object that start with 'on', which are typically event handlers.
+ *
+ * @param input - The object from which to remove event properties.
+ * @returns The same object with event properties removed.
+ *
+ * @example
+ * removeEvents({ onClick: () => {}, onChange: () => {}, value: 10 }); // returns { value: 10 }
  */
 export function removeEvents(input: {[key: string]: any}) {
   for (const key in input) {
@@ -68,6 +136,18 @@ export function removeEvents(input: {[key: string]: any}) {
   return input;
 }
 
+/**
+ * Converts an object into a JSON string. Returns an empty string if the object
+ * is not extractable or if a circular reference is detected during stringification.
+ *
+ * @param obj - The object to convert into a dependency string.
+ *
+ * @returns A JSON string representation of the object or an empty string if conversion fails.
+ *
+ * @example
+ * objectToDeps({ key: 'value' }); // returns '{"key":"value"}'
+ * objectToDeps(undefined); // returns ""
+ */
 export function objectToDeps(obj: Extractable) {
   if (!obj || typeof obj !== "object") {
     return "";
@@ -79,3 +159,262 @@ export function objectToDeps(obj: Extractable) {
     return "";
   }
 }
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `waitMilliseconds` have elapsed
+ * since the last time the debounced function was invoked. The debounced function has the
+ * same `this` context and arguments as the original function.
+ *
+ * @param func - The function to debounce.
+ * @param waitMilliseconds - The number of milliseconds to delay; defaults to 0.
+ *
+ * @returns A new debounced function.
+ *
+ * @typeParam F - The type of the function to debounce.
+ *
+ * @example
+ * const save = debounce(() => console.log('Saved!'), 300);
+ * save(); // Will log 'Saved!' after 300ms, subsequent calls within 300ms will reset the timer.
+ */
+
+export function debounce<F extends (...args: any[]) => void>(
+  func: F,
+  waitMilliseconds: number = 0,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+
+  return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
+    const later = () => {
+      timeout = undefined;
+      func.apply(this, args);
+    };
+
+    if (timeout !== undefined) {
+      clearTimeout(timeout);
+    }
+
+    timeout = setTimeout(later, waitMilliseconds);
+  };
+}
+
+/**
+ * Returns a new array of unique elements from the given array, where the uniqueness is determined by the specified iteratee.
+ *
+ * @param arr - The array to process.
+ * @param iteratee - The iteratee invoked per element to generate the criterion by which uniqueness is computed.
+ *                  This can be a function or the string key of the object properties.
+ *
+ * @returns A new array of elements that are unique based on the iteratee function.
+ *
+ * @typeParam T - The type of elements in the input array.
+ *
+ * @example
+ * uniqBy([{ id: 1 }, { id: 2 }, { id: 1 }], 'id'); // returns [{ id: 1 }, { id: 2 }]
+ */
+export function uniqBy<T>(arr: T[], iteratee: any) {
+  if (typeof iteratee === "string") {
+    iteratee = (item: T) => item[iteratee as keyof T];
+  }
+
+  return arr.filter((x, i, self) => i === self.findIndex((y) => iteratee(x) === iteratee(y)));
+}
+
+/**
+ * Creates an object composed of the own and inherited enumerable property paths of `obj` that are not omitted.
+ *
+ * @param obj - The source object.
+ * @param keys - The property keys to omit.
+ *
+ * @returns A new object with the keys specified omitted.
+ *
+ * @typeParam Obj - The type of the object.
+ * @typeParam Keys - The type of the keys to omit.
+ *
+ * @example
+ * omit({ a: 1, b: '2', c: 3 }, ['a', 'c']); // returns { b: '2' }
+ */
+export const omit = <Obj, Keys extends keyof Obj>(obj: Obj, keys: Keys[]): Omit<Obj, Keys> => {
+  const res = Object.assign({}, obj);
+
+  keys.forEach((key) => {
+    delete res[key];
+  });
+
+  return res;
+};
+
+/**
+ * Converts a string to kebab-case.
+ *
+ * @param s - The string to convert.
+ *
+ * @returns The kebab-case version of the string.
+ *
+ * @example
+ * kebabCase('fooBar'); // returns 'foo-bar'
+ */
+export const kebabCase = (s: string) => {
+  return s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+};
+
+/**
+ * Creates an object with keys transformed using provided `iteratee` function, which takes each value and the corresponding key.
+ *
+ * @param obj - The source object.
+ * @param iteratee - The function invoked per iteration to transform the keys.
+ *
+ * @returns A new object with keys transformed by `iteratee`.
+ *
+ * @example
+ * mapKeys({ a: 1, b: 2 }, (value, key) => key + value); // returns { a1: 1, b2: 2 }
+ */
+export const mapKeys = (
+  obj: Record<string, any>,
+  iteratee: (value: any, key: string) => any,
+): Record<string, any> => {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [iteratee(value, key), value]),
+  );
+};
+
+/**
+ * Retrieves the value at a given path of a provided object safely. If the path does not exist,
+ * the function returns a default value, if provided.
+ *
+ * @param object - The object from which to retrieve the property.
+ * @param path - A dot notation string or an array of strings and numbers indicating the path of the property in the object.
+ *               Dot notation can also include array indices in bracket notation (e.g., 'a.b[0].c').
+ * @param defaultValue - The value to return if the resolved value is `undefined`. This parameter is optional.
+ *
+ * @returns The value from the object at the specified path, or the default value if the path is not resolved.
+ *
+ * @example
+ * const obj = { a: { b: [{ c: 3 }] } };
+ *
+ * // Using string path with dot and bracket notation
+ * get(obj, 'a.b[0].c'); // returns 3
+ *
+ * // Using array path
+ * get(obj, ['a', 'b', 0, 'c']); // returns 3
+ *
+ * // Using default value for non-existent path
+ * get(obj, 'a.b[1].c', 'not found'); // returns 'not found'
+ */
+export const get = (
+  object: Record<string, any>,
+  path: string | (string | number)[],
+  defaultValue?: any,
+): any => {
+  const keys = Array.isArray(path) ? path : path.replace(/\[(\d+)\]/g, ".$1").split(".");
+
+  let res: any = object;
+
+  for (const key of keys) {
+    res = res?.[key];
+
+    if (res === undefined) {
+      return defaultValue;
+    }
+  }
+
+  return res;
+};
+
+/**
+ * Computes the list of values that are the intersection of all provided arrays,
+ * with each element being transformed by the given iteratee, which can be a function or property name.
+ *
+ * @param args - A rest parameter that collects all arrays to intersect followed by an iteratee.
+ * The last element in `args` is the iteratee, which can be either a function or a property name string.
+ * The rest are arrays of elements of type T.
+ *
+ * @returns An array of elements of type T that exist in all arrays after being transformed by the iteratee.
+ *
+ * @throws {Error} If less than two arguments are provided or if the iteratee is not a function or a valid property string.
+ *
+ * @typeParam T - The type of elements in the input arrays.
+ *
+ * @example
+ * // Using a function as an iteratee
+ * intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // returns [2.1]
+ *
+ * // Using a property name as an iteratee
+ * intersectionBy([{ x: 1 }, { x: 2 }], [{ x: 1 }], 'x'); // returns [{ x: 1 }]
+ */
+export const intersectionBy = <T>(...args: [...arrays: T[][], iteratee: Iteratee<T>]): T[] => {
+  if (args.length < 2) {
+    throw new Error("intersectionBy requires at least two arrays and an iteratee");
+  }
+
+  const iteratee = args[args.length - 1];
+  const arrays = args.slice(0, -1) as T[][];
+
+  if (arrays.length === 0) {
+    return [];
+  }
+
+  const getIterateeValue = (item: T): unknown => {
+    if (typeof iteratee === "function") {
+      return (iteratee as (value: T) => any)(item);
+    } else if (typeof iteratee === "string") {
+      return (item as any)[iteratee];
+    } else {
+      throw new Error("Iteratee must be a function or a string key of the array elements");
+    }
+  };
+
+  const [first, ...rest] = arrays;
+  const transformedFirst = first.map((item) => getIterateeValue(item));
+
+  const transformedSets: Set<unknown>[] = rest.map(
+    (array) => new Set(array.map((item) => getIterateeValue(item))),
+  );
+
+  const res: T[] = [];
+  const seen = new Set<unknown>();
+
+  for (let i = 0; i < first.length; i++) {
+    const item = first[i];
+    const transformed = transformedFirst[i];
+
+    if (seen.has(transformed)) {
+      continue;
+    }
+
+    const existsInAll = transformedSets.every((set) => set.has(transformed));
+
+    if (existsInAll) {
+      res.push(item);
+      seen.add(transformed);
+    }
+  }
+
+  return res;
+};
+
+/**
+ * Checks if the current React version is 19.x.x
+ *
+ * @returns {boolean} - Returns `true` if the React major version is 19, otherwise returns `false`.
+ */
+export const isReact19 = (): boolean => {
+  return React.version.split(".")[0] === "19";
+};
+
+/**
+ * Returns an appropriate value for the `inert` attribute based on the React version.
+ *
+ * In React 19, the attribute `inert` is a boolean. In versions prior to 19, the attribute
+ * behaves differently: setting `inert=""` will make it `true`, and `inert=undefined` will make it `false`.
+ *
+ * @param {boolean} v - The desired boolean state for the `inert` attribute.
+ * @returns {boolean | string | undefined} - Depending on the React version:
+ * - Returns `boolean` if React version is 19 (the input value `v` directly).
+ * - Returns `string` (empty string) if `v` is `true` in older React versions.
+ * - Returns `undefined` if `v` is `false` in older React versions.
+ *
+ * @see {@link https://github.com/facebook/react/issues/17157} for more details on the behavior in older React versions.
+ */
+export const getInertValue = (v: boolean): boolean | string | undefined => {
+  return isReact19() ? v : v ? "" : undefined;
+};
diff --git a/packages/utilities/stories-utils/CHANGELOG.md b/packages/utilities/stories-utils/CHANGELOG.md
index 47d56c2f7b..1ef58a10a1 100644
--- a/packages/utilities/stories-utils/CHANGELOG.md
+++ b/packages/utilities/stories-utils/CHANGELOG.md
@@ -1,5 +1,39 @@
 # @nextui-org/stories-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
 ## 2.0.3
 
 ### Patch Changes
diff --git a/packages/utilities/stories-utils/package.json b/packages/utilities/stories-utils/package.json
index 462fa5b9df..a3b039c0e3 100644
--- a/packages/utilities/stories-utils/package.json
+++ b/packages/utilities/stories-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/stories-utils",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "A list of utilities for storybook' stories.",
   "keywords": [
     "stories-utils"
diff --git a/packages/utilities/test-utils/CHANGELOG.md b/packages/utilities/test-utils/CHANGELOG.md
index 756816fc4c..53eb51d4df 100644
--- a/packages/utilities/test-utils/CHANGELOG.md
+++ b/packages/utilities/test-utils/CHANGELOG.md
@@ -1,5 +1,87 @@
 # @nextui-org/test-utils
 
+## 2.1.1
+
+### Patch Changes
+
+- [`d6eee4a`](https://github.com/nextui-org/nextui/commit/d6eee4a8767556152f47f06dcf04940951abc5af) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - v2.6.2
+
+## 2.1.0
+
+### Minor Changes
+
+- [`5786897`](https://github.com/nextui-org/nextui/commit/5786897b9950d95c12351dacd2fb41bb1e298201) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - This release includes several improvements and bug fixes:
+
+  - Updated react-aria version across all components
+  - Improved Drawer styles and transitions
+  - Fixed missing peer dependencies for framer-motion
+  - Fixed menu item classNames functionality
+  - Added isClearable prop to Textarea component
+  - Fixed label placement issues in Input and Select components
+  - Improved table keyboard navigation with new isKeyboardNavigationDisabled prop
+  - Fixed UI sliding issues with helper wrapper in Input and Select
+  - Updated use-image hook to avoid Next.js hydration issues
+  - Replaced RTL-specific styles with logical properties
+  - Fixed textarea label squish issue
+  - Bumped tailwind-merge version
+  - Applied tw nested group fixes
+  - Fixed fullWidth variant in input and select components
+  - Moved circular-progress tv to progress
+  - Changed ListboxItem key to optional
+  - Fixed autocomplete clear button behavior
+  - Updated Select label placement logic
+  - Added missing framer-motion peer dependencies
+  - Removed layoutNode prop from Table due to react-aria update
+  - Virtualization added to Autocomplete
+
+## 2.0.7-beta.7
+
+### Patch Changes
+
+- [`9869f2b91`](https://github.com/nextui-org/nextui/commit/9869f2b91d0829f9c7f0500ba05745707820bf27) Thanks [@wingkwong](https://github.com/wingkwong)! - bump version
+
+## 2.0.7-beta.6
+
+### Patch Changes
+
+- [#4092](https://github.com/nextui-org/nextui/pull/4092) [`528668db8`](https://github.com/nextui-org/nextui/commit/528668db85b98b46473cb1e214780b7468cdadba) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Test new runner
+
+## 2.0.7-beta.5
+
+### Patch Changes
+
+- [#4086](https://github.com/nextui-org/nextui/pull/4086) [`f69fe47b5`](https://github.com/nextui-org/nextui/commit/f69fe47b5b8f6f3a77a7a8c20d8715263fa32acb) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Pnpm clean
+
+## 2.0.7-beta.4
+
+### Patch Changes
+
+- [#4083](https://github.com/nextui-org/nextui/pull/4083) [`35058262c`](https://github.com/nextui-org/nextui/commit/35058262c61628fb42907f529c4417886aa12bb2) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Fix build
+
+## 2.0.7-beta.3
+
+### Patch Changes
+
+- [#4010](https://github.com/nextui-org/nextui/pull/4010) [`ef432eb53`](https://github.com/nextui-org/nextui/commit/ef432eb539714fded6cab86a2185956fb103e0df) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - framer-motion alpha version added
+
+## 2.0.7-beta.2
+
+### Patch Changes
+
+- [#4008](https://github.com/nextui-org/nextui/pull/4008) [`7c1c0dd8f`](https://github.com/nextui-org/nextui/commit/7c1c0dd8fef3ea72996c1095b919574c4b7f9b89) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - React 19 added to peerDeps
+
+## 2.0.7-beta.1
+
+### Patch Changes
+
+- [#3990](https://github.com/nextui-org/nextui/pull/3990) [`cb5bc4c74`](https://github.com/nextui-org/nextui/commit/cb5bc4c74f00caaee80dca89c1f02038db315b85) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - Beta 1
+
+## 2.0.7-beta.0
+
+### Patch Changes
+
+- [#3987](https://github.com/nextui-org/nextui/pull/3987) [`90cb5b14a`](https://github.com/nextui-org/nextui/commit/90cb5b14abcf70878896ea83b0b8bce0795d97fd) Thanks [@jrgarciadev](https://github.com/jrgarciadev)! - fix cached image flashing due to use-image always returning pending initially. The fix was to check if the image is loaded instantly through HTMLImageElement.complete attribute and use that to initialize the state.
+
 ## 2.0.6
 
 ### Patch Changes
diff --git a/packages/utilities/test-utils/package.json b/packages/utilities/test-utils/package.json
index f2c15a9c2b..5d1a1dad84 100644
--- a/packages/utilities/test-utils/package.json
+++ b/packages/utilities/test-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/test-utils",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "A set of utilities for react testing",
   "keywords": [
     "test-utils"
diff --git a/packages/utilities/test-utils/src/mocks/image.ts b/packages/utilities/test-utils/src/mocks/image.ts
index e965d7ada6..b5932ef35e 100644
--- a/packages/utilities/test-utils/src/mocks/image.ts
+++ b/packages/utilities/test-utils/src/mocks/image.ts
@@ -14,6 +14,10 @@ export function mockImage() {
     onerror: VoidFunction = () => {};
     src = "";
     alt = "";
+    naturalWidth = 100;
+    get complete() {
+      return status === "loaded";
+    }
     hasAttribute(name: string) {
       return name in this;
     }
diff --git a/plop/component/package.json.hbs b/plop/component/package.json.hbs
index d9a7ba7a87..915b755d8b 100644
--- a/plop/component/package.json.hbs
+++ b/plop/component/package.json.hbs
@@ -34,10 +34,10 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "@nextui-org/theme": ">=2.0.0",
-    "@nextui-org/system": ">=2.0.0"
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@nextui-org/theme": ">=2.3.0",
+    "@nextui-org/system": ">=2.3.0"
   },
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
diff --git a/plop/hook/__tests__/{{hookName}}.test.tsx.hbs b/plop/hook/__tests__/{{hookName}}.test.tsx.hbs
index 3f7f508870..dd9dc85d6a 100644
--- a/plop/hook/__tests__/{{hookName}}.test.tsx.hbs
+++ b/plop/hook/__tests__/{{hookName}}.test.tsx.hbs
@@ -1,4 +1,4 @@
-import {renderHook} from "@testing-library/react-hooks";
+import {renderHook} from "@testing-library/react";
 
 import { {{camelCase hookName}} } from "../src";
 
diff --git a/plop/hook/package.json.hbs b/plop/hook/package.json.hbs
index dae92d30d9..44cd407eb2 100644
--- a/plop/hook/package.json.hbs
+++ b/plop/hook/package.json.hbs
@@ -34,7 +34,7 @@
     "postpack": "clean-package restore"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18 || >=19.0.0-rc.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 39dcffcab6..60197ce5ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,8 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  react: ^18.2.0
-  react-dom: ^18.2.0
+  react: 18.2.0
+  react-dom: 18.2.0
+  '@changesets/get-github-info': 0.6.0
 
 importers:
 
@@ -14,40 +15,43 @@ importers:
     devDependencies:
       '@babel/cli':
         specifier: ^7.14.5
-        version: 7.24.1(@babel/core@7.24.4)
+        version: 7.25.9(@babel/core@7.26.0)
       '@babel/core':
         specifier: ^7.16.7
-        version: 7.24.4
+        version: 7.26.0
       '@babel/plugin-proposal-object-rest-spread':
         specifier: ^7.15.6
-        version: 7.20.7(@babel/core@7.24.4)
+        version: 7.20.7(@babel/core@7.26.0)
       '@babel/plugin-transform-runtime':
         specifier: ^7.14.5
-        version: 7.24.3(@babel/core@7.24.4)
+        version: 7.25.9(@babel/core@7.26.0)
       '@babel/preset-env':
         specifier: ^7.14.5
-        version: 7.24.4(@babel/core@7.24.4)
+        version: 7.26.0(@babel/core@7.26.0)
       '@babel/preset-react':
         specifier: ^7.14.5
-        version: 7.24.1(@babel/core@7.24.4)
+        version: 7.25.9(@babel/core@7.26.0)
       '@babel/preset-typescript':
         specifier: ^7.14.5
-        version: 7.24.1(@babel/core@7.24.4)
+        version: 7.26.0(@babel/core@7.26.0)
       '@changesets/changelog-github':
-        specifier: 0.4.6
-        version: 0.4.6(encoding@0.1.13)
+        specifier: 0.5.0
+        version: 0.5.0
       '@changesets/cli':
-        specifier: 2.24.1
-        version: 2.24.1
+        specifier: 2.27.10
+        version: 2.27.10
+      '@changesets/get-github-info':
+        specifier: 0.6.0
+        version: 0.6.0
       '@changesets/get-release-plan':
-        specifier: 3.0.12
-        version: 3.0.12
+        specifier: 4.0.5
+        version: 4.0.5
       '@changesets/types':
-        specifier: 5.1.0
-        version: 5.1.0
+        specifier: 6.0.0
+        version: 6.0.0
       '@commitlint/cli':
         specifier: ^17.2.0
-        version: 17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))
+        version: 17.8.1(@swc/core@1.9.2(@swc/helpers@0.5.15))
       '@commitlint/config-conventional':
         specifier: ^17.2.0
         version: 17.8.1
@@ -55,41 +59,35 @@ importers:
         specifier: ^2.1.0
         version: 2.2.0
       '@react-types/link':
-        specifier: ^3.4.4
-        version: 3.5.3(react@18.2.0)
+        specifier: 3.5.7
+        version: 3.5.7(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       '@storybook/react':
-        specifier: ^7.4.6
-        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
-      '@swc-node/jest':
-        specifier: ^1.5.2
-        version: 1.8.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)
+        specifier: ^8.4.5
+        version: 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@2.8.8))(typescript@4.9.5)
       '@swc/core':
         specifier: ^1.3.35
-        version: 1.4.13(@swc/helpers@0.5.9)
+        version: 1.9.2(@swc/helpers@0.5.15)
       '@swc/jest':
         specifier: ^0.2.24
-        version: 0.2.36(@swc/core@1.4.13(@swc/helpers@0.5.9))
+        version: 0.2.37(@swc/core@1.9.2(@swc/helpers@0.5.15))
       '@testing-library/dom':
-        specifier: ^8.1.0
-        version: 8.20.1
+        specifier: ^10.4.0
+        version: 10.4.0
       '@testing-library/jest-dom':
-        specifier: ^5.16.4
-        version: 5.17.0
+        specifier: ^6.6.2
+        version: 6.6.3
       '@testing-library/react':
-        specifier: ^14.0.0
-        version: 14.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@testing-library/react-hooks':
-        specifier: ^8.0.1
-        version: 8.0.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^16.0.1
+        version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@testing-library/user-event':
-        specifier: ^14.4.3
-        version: 14.5.2(@testing-library/dom@8.20.1)
+        specifier: ^14.5.2
+        version: 14.5.2(@testing-library/dom@10.4.0)
       '@types/jest':
-        specifier: ^28.1.1
-        version: 28.1.8
+        specifier: ^29.5.14
+        version: 29.5.14
       '@types/node':
         specifier: ^15.12.4
         version: 15.14.9
@@ -102,9 +100,6 @@ importers:
       '@types/shelljs':
         specifier: ^0.8.9
         version: 0.8.15
-      '@types/testing-library__jest-dom':
-        specifier: 5.14.5
-        version: 5.14.5
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.0
         version: 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
@@ -128,34 +123,34 @@ importers:
         version: 7.32.0
       eslint-config-airbnb:
         specifier: ^18.2.1
-        version: 18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)
+        version: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)
       eslint-config-airbnb-typescript:
         specifier: ^12.3.1
-        version: 12.3.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
+        version: 12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
       eslint-config-prettier:
         specifier: ^8.2.0
         version: 8.10.0(eslint@7.32.0)
       eslint-config-react-app:
         specifier: ^6.0.0
-        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
+        version: 6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5)
       eslint-config-ts-lambdas:
         specifier: ^1.2.3
         version: 1.2.3(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       eslint-import-resolver-typescript:
         specifier: ^2.4.0
-        version: 2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+        version: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
       eslint-loader:
         specifier: ^4.0.2
-        version: 4.0.2(eslint@7.32.0)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12))
+        version: 4.0.2(eslint@7.32.0)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12))
       eslint-plugin-import:
         specifier: ^2.26.0
-        version: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+        version: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       eslint-plugin-jest:
-        specifier: ^24.3.6
+        specifier: ^24.7.0
         version: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       eslint-plugin-jsx-a11y:
         specifier: ^6.4.1
-        version: 6.8.0(eslint@7.32.0)
+        version: 6.10.2(eslint@7.32.0)
       eslint-plugin-node:
         specifier: ^11.1.0
         version: 11.1.0(eslint@7.32.0)
@@ -164,13 +159,13 @@ importers:
         version: 4.2.1(eslint-config-prettier@8.10.0(eslint@7.32.0))(eslint@7.32.0)(prettier@2.8.8)
       eslint-plugin-promise:
         specifier: ^6.0.0
-        version: 6.1.1(eslint@7.32.0)
+        version: 6.6.0(eslint@7.32.0)
       eslint-plugin-react:
         specifier: ^7.23.2
-        version: 7.34.1(eslint@7.32.0)
+        version: 7.37.2(eslint@7.32.0)
       eslint-plugin-react-hooks:
         specifier: ^4.6.0
-        version: 4.6.0(eslint@7.32.0)
+        version: 4.6.2(eslint@7.32.0)
       eslint-plugin-unused-imports:
         specifier: ^2.0.0
         version: 2.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)
@@ -197,22 +192,22 @@ importers:
         version: 8.0.3
       intl-messageformat:
         specifier: ^10.1.0
-        version: 10.5.11
+        version: 10.7.7
       jest:
-        specifier: ^28.1.1
-        version: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
+        specifier: ^29.7.0
+        version: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
       jest-environment-jsdom:
-        specifier: ^28.1.1
-        version: 28.1.3
+        specifier: ^29.7.0
+        version: 29.7.0
       jest-watch-typeahead:
-        specifier: 1.1.0
-        version: 1.1.0(jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)))
+        specifier: 2.2.2
+        version: 2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)))
       lint-staged:
         specifier: ^13.0.3
         version: 13.3.0(enquirer@2.4.1)
       npm-check-updates:
         specifier: ^16.10.18
-        version: 16.14.18
+        version: 16.14.20
       npm-run-all:
         specifier: ^4.1.5
         version: 4.1.5
@@ -221,7 +216,7 @@ importers:
         version: 1.1.8
       parcel:
         specifier: ^2.3.1
-        version: 2.12.0(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
+        version: 2.13.0(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)
       plop:
         specifier: 3.1.1
         version: 3.1.1
@@ -235,10 +230,10 @@ importers:
         specifier: ^5.0.1
         version: 5.0.1
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       rimraf:
         specifier: ^3.0.2
@@ -248,7 +243,7 @@ importers:
         version: 0.8.5
       tsup:
         specifier: 6.4.0
-        version: 6.4.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
+        version: 6.4.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
       tsx:
         specifier: ^3.8.2
         version: 3.14.0
@@ -260,13 +255,13 @@ importers:
         version: 4.9.5
       webpack:
         specifier: ^5.53.0
-        version: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
+        version: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
       webpack-bundle-analyzer:
         specifier: ^4.4.2
         version: 4.10.2
       webpack-cli:
         specifier: ^3.3.11
-        version: 3.3.12(webpack@5.91.0)
+        version: 3.3.12(webpack@5.96.1)
       webpack-merge:
         specifier: ^5.8.0
         version: 5.10.0
@@ -275,16 +270,19 @@ importers:
     dependencies:
       '@codesandbox/sandpack-react':
         specifier: ^2.6.4
-        version: 2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 2.19.9(@lezer/common@1.2.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@emotion/is-prop-valid':
+        specifier: ^1.3.1
+        version: 1.3.1
       '@iconify/icons-solar':
-        specifier: ^1.2.3
+        specifier: 1.2.3
         version: 1.2.3
       '@iconify/react':
-        specifier: ^4.1.1
-        version: 4.1.1(react@18.2.0)
+        specifier: 5.0.2
+        version: 5.0.2(react@18.2.0)
       '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.4
+        specifier: 3.5.6
+        version: 3.5.6
       '@mapbox/rehype-prism':
         specifier: ^0.6.0
         version: 0.6.0
@@ -300,6 +298,9 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../../packages/components/divider
+      '@nextui-org/input-otp':
+        specifier: workspace:*
+        version: link:../../packages/components/input-otp
       '@nextui-org/kbd':
         specifier: workspace:*
         version: link:../../packages/components/kbd
@@ -338,31 +339,31 @@ importers:
         version: link:../../packages/hooks/use-is-mobile
       '@radix-ui/react-scroll-area':
         specifier: ^1.0.5
-        version: 1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        version: 1.2.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/selection':
-        specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.20.1
+        version: 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/ssr':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.9.6
+        version: 3.9.6(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/virtualizer':
         specifier: 3.10.1
         version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/data':
         specifier: 3.11.4
         version: 3.11.4(react@18.2.0)
@@ -375,24 +376,30 @@ importers:
       '@rehooks/local-storage':
         specifier: ^2.4.5
         version: 2.4.5(react@18.2.0)
+      '@tanstack/react-virtual':
+        specifier: 3.10.9
+        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       canvas-confetti:
         specifier: ^1.9.2
-        version: 1.9.2
+        version: 1.9.3
       cmdk:
         specifier: ^0.2.0
         version: 0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       color2k:
-        specifier: ^2.0.2
+        specifier: 2.0.3
         version: 2.0.3
-      contentlayer:
-        specifier: ^0.3.4
-        version: 0.3.4(esbuild@0.20.2)
+      contentlayer2:
+        specifier: 0.5.3
+        version: 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
       date-fns:
-        specifier: ^2.30.0
-        version: 2.30.0
+        specifier: 4.1.0
+        version: 4.1.0
       framer-motion:
-        specifier: ^11.1.7
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.11.13
+        version: 11.11.13(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      geist:
+        specifier: 1.3.1
+        version: 1.3.1(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       github-slugger:
         specifier: ^2.0.0
         version: 2.0.0
@@ -400,32 +407,29 @@ importers:
         specifier: ^4.0.3
         version: 4.0.3
       hast-util-to-html:
-        specifier: 7.1.2
-        version: 7.1.2
-      lodash:
-        specifier: ^4.17.21
-        version: 4.17.21
+        specifier: 9.0.3
+        version: 9.0.3
       marked:
         specifier: ^5.1.0
         version: 5.1.2
       match-sorter:
-        specifier: ^6.3.1
-        version: 6.3.4
+        specifier: 8.0.0
+        version: 8.0.0
       mini-svg-data-uri:
-        specifier: ^1.4.3
+        specifier: 1.4.4
         version: 1.4.4
       mitt:
-        specifier: 3.0.0
-        version: 3.0.0
+        specifier: 3.0.1
+        version: 3.0.1
       next:
-        specifier: 13.5.1
-        version: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      next-contentlayer:
-        specifier: ^0.3.4
-        version: 0.3.4(contentlayer@0.3.4(esbuild@0.20.2))(esbuild@0.20.2)(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 14.3.0-canary.43
+        version: 14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next-contentlayer2:
+        specifier: 0.5.3
+        version: 0.5.3(acorn@8.14.0)(contentlayer2@0.5.3(acorn@8.14.0)(esbuild@0.21.5))(esbuild@0.21.5)(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 0.4.3
+        version: 0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -433,8 +437,8 @@ importers:
         specifier: 1.2.0
         version: 1.2.0
       posthog-js:
-        specifier: 1.187.1
-        version: 1.187.1
+        specifier: 1.184.1
+        version: 1.184.1
       prism-react-renderer:
         specifier: ^1.2.1
         version: 1.3.5(react@18.2.0)
@@ -442,56 +446,53 @@ importers:
         specifier: ^0.2.1
         version: 0.2.1
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.53.2(react@18.2.0)
       react-icons:
         specifier: ^4.10.1
         version: 4.12.0(react@18.2.0)
       react-live:
-        specifier: ^2.3.0
-        version: 2.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^4.1.8
+        version: 4.1.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-multi-ref:
         specifier: ^1.0.1
-        version: 1.0.1
+        version: 1.0.2
       react-wrap-balancer:
         specifier: ^1.0.0
-        version: 1.1.0(react@18.2.0)
+        version: 1.1.1(react@18.2.0)
       refractor:
         specifier: 3.3.1
         version: 3.3.1
       rehype:
-        specifier: 11.0.0
-        version: 11.0.0
+        specifier: 13.0.2
+        version: 13.0.2
       rehype-parse:
-        specifier: 7.0.1
-        version: 7.0.1
+        specifier: 9.0.1
+        version: 9.0.1
       rehype-pretty-code:
-        specifier: ^0.10.0
-        version: 0.10.2(shiki@0.14.7)
+        specifier: ^0.14.0
+        version: 0.14.0(shiki@1.23.1)
       rehype-slug:
-        specifier: ^5.1.0
-        version: 5.1.0
+        specifier: 6.0.0
+        version: 6.0.0
       remark:
-        specifier: ^14.0.3
-        version: 14.0.3
-      remark-autolink-headings:
-        specifier: ^6.0.1
-        version: 6.1.0
+        specifier: ^15.0.1
+        version: 15.0.1
       remark-gfm:
-        specifier: ^3.0.1
-        version: 3.0.1
-      remark-slug:
-        specifier: ^6.0.0
-        version: 6.1.0
+        specifier: 4.0.0
+        version: 4.0.0
       rss:
-        specifier: ^1.2.2
+        specifier: 1.2.2
         version: 1.2.2
       scroll-into-view-if-needed:
-        specifier: 3.0.10
-        version: 3.0.10
+        specifier: 3.1.0
+        version: 3.1.0
       sharp:
         specifier: ^0.32.1
         version: 0.32.6
@@ -499,45 +500,48 @@ importers:
         specifier: ^0.8.4
         version: 0.8.5
       swr:
-        specifier: ^2.2.1
+        specifier: 2.2.5
         version: 2.2.5(react@18.2.0)
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)))
       unified:
-        specifier: ^9.2.2
-        version: 9.2.2
+        specifier: ^11.0.5
+        version: 11.0.5
       unist-util-visit:
-        specifier: ^4.1.2
-        version: 4.1.2
+        specifier: 5.0.0
+        version: 5.0.0
       usehooks-ts:
-        specifier: ^2.9.1
-        version: 2.16.0(react@18.2.0)
+        specifier: 3.1.0
+        version: 3.1.0(react@18.2.0)
       zustand:
-        specifier: ^4.3.8
-        version: 4.5.2(@types/react@18.2.8)(react@18.2.0)
+        specifier: 5.0.1
+        version: 5.0.1(@types/react@18.2.8)(react@18.2.0)(use-sync-external-store@1.2.2(react@18.2.0))
     devDependencies:
       '@docusaurus/utils':
         specifier: 2.0.0-beta.3
-        version: 2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
+        version: 2.0.0-beta.3(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
       '@next/bundle-analyzer':
-        specifier: ^13.4.6
-        version: 13.5.6
+        specifier: 14.3.0-canary.43
+        version: 14.3.0-canary.43
       '@next/env':
-        specifier: ^13.4.12
-        version: 13.5.6
+        specifier: 14.3.0-canary.43
+        version: 14.3.0-canary.43
+      '@react-types/calendar':
+        specifier: 3.4.10
+        version: 3.4.10(react@18.2.0)
+      '@react-types/datepicker':
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.12(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))
+        version: 0.5.15(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)))
       '@types/canvas-confetti':
         specifier: ^1.4.2
         version: 1.6.4
-      '@types/lodash':
-        specifier: ^4.14.194
-        version: 4.17.5
       '@types/marked':
         specifier: ^5.0.0
         version: 5.0.2
@@ -563,8 +567,8 @@ importers:
         specifier: ^3.0.2
         version: 3.4.1
       '@types/rss':
-        specifier: ^0.0.30
-        version: 0.0.30
+        specifier: 0.0.32
+        version: 0.0.32
       '@types/shelljs':
         specifier: ^0.8.9
         version: 0.8.15
@@ -573,40 +577,46 @@ importers:
         version: 8.3.4
       algoliasearch:
         specifier: ^4.10.3
-        version: 4.23.3
+        version: 4.24.0
       autoprefixer:
-        specifier: ^10.4.14
-        version: 10.4.19(postcss@8.4.38)
+        specifier: 10.4.20
+        version: 10.4.20(postcss@8.4.49)
       dotenv:
         specifier: ^16.0.1
         version: 16.4.5
+      esbuild-plugin-raw:
+        specifier: 0.1.8
+        version: 0.1.8(esbuild@0.21.5)
       eslint-config-next:
-        specifier: ^13.5.1
-        version: 13.5.6(eslint@7.32.0)(typescript@4.9.5)
+        specifier: 15.0.3
+        version: 15.0.3(eslint@7.32.0)(typescript@5.6.3)
       markdown-toc:
         specifier: ^1.2.0
         version: 1.2.0
+      mdx-bundler:
+        specifier: 10.0.3
+        version: 10.0.3(acorn@8.14.0)(esbuild@0.21.5)
       next-sitemap:
-        specifier: ^4.1.8
-        version: 4.2.3(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
+        specifier: 4.2.3
+        version: 4.2.3(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))
       node-fetch:
         specifier: ^3.2.10
         version: 3.3.2
       postcss:
-        specifier: ^8.4.21
-        version: 8.4.38
+        specifier: 8.4.49
+        version: 8.4.49
       prettier:
         specifier: ^2.7.1
         version: 2.8.8
       tailwindcss:
-        specifier: ^3.4.0
-        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
+        specifier: 3.4.14
+        version: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
       tsx:
         specifier: ^3.8.2
         version: 3.14.0
       typescript:
-        specifier: ^4.9.5
-        version: 4.9.5
+        specifier: ^5.5.0
+        version: 5.6.3
       uuid:
         specifier: ^8.3.2
         version: 8.3.2
@@ -619,6 +629,9 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../divider
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -635,26 +648,26 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-aria-accordion
       '@react-aria/button':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/tree':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.5
+        version: 3.8.5(react@18.2.0)
       '@react-types/accordion':
-        specifier: 3.0.0-alpha.21
-        version: 3.0.0-alpha.21(react@18.2.0)
+        specifier: 3.0.0-alpha.24
+        version: 3.0.0-alpha.24(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -678,13 +691,50 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/components/alert:
+    dependencies:
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+      '@react-aria/utils':
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
+      '@react-stately/utils':
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
+    devDependencies:
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/autocomplete:
@@ -695,6 +745,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/input':
         specifier: workspace:*
         version: link:../input
@@ -726,32 +779,32 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/combobox':
-        specifier: 3.9.1
-        version: 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.10.5
+        version: 3.10.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/combobox':
-        specifier: 3.8.4
-        version: 3.8.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/combobox':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.13.0
+        version: 3.13.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -772,23 +825,23 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-infinite-scroll
       '@react-stately/data':
-        specifier: 3.11.4
-        version: 3.11.4(react@18.2.0)
+        specifier: 3.11.7
+        version: 3.11.7(react@18.2.0)
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
         specifier: ^7.51.3
-        version: 7.51.3(react@18.2.0)
+        version: 7.53.2(react@18.2.0)
 
   packages/components/avatar:
     dependencies:
@@ -802,14 +855,14 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-image
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -827,10 +880,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/badge:
@@ -861,10 +914,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/breadcrumbs:
@@ -879,20 +932,20 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/breadcrumbs':
-        specifier: 3.5.13
-        version: 3.5.13(react@18.2.0)
+        specifier: 3.5.18
+        version: 3.5.18(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/breadcrumbs':
-        specifier: 3.7.5
-        version: 3.7.5(react@18.2.0)
+        specifier: 3.7.8
+        version: 3.7.8(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/button':
         specifier: workspace:*
@@ -913,10 +966,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/button:
@@ -937,26 +990,23 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-aria-button
       '@react-aria/button':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
-      framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -970,21 +1020,27 @@ importers:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/calendar:
     dependencies:
       '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.4
+        specifier: 3.5.6
+        version: 3.5.6
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1001,44 +1057,41 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-aria-button
       '@react-aria/calendar':
-        specifier: 3.5.8
-        version: 3.5.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.5.13
+        version: 3.5.13(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/calendar':
-        specifier: 3.5.1
-        version: 3.5.1(react@18.2.0)
+        specifier: 3.5.5
+        version: 3.5.5(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/calendar':
-        specifier: 3.4.6
-        version: 3.4.6(react@18.2.0)
+        specifier: 3.4.10
+        version: 3.4.10(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       '@types/lodash.debounce':
         specifier: ^4.0.7
         version: 4.0.9
-      lodash.debounce:
-        specifier: ^4.0.8
-        version: 4.0.8
       scroll-into-view-if-needed:
         specifier: 3.0.10
         version: 3.0.10
@@ -1059,13 +1112,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^10.16.4
-        version: 10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/card:
@@ -1083,23 +1136,20 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-aria-button
       '@react-aria/button':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
-      framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1125,15 +1175,21 @@ importers:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/checkbox:
     dependencies:
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -1147,32 +1203,32 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/checkbox':
-        specifier: 3.14.3
-        version: 3.14.3(react@18.2.0)
+        specifier: 3.14.8
+        version: 3.14.8(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/checkbox':
-        specifier: 3.6.5
-        version: 3.6.5(react@18.2.0)
+        specifier: 3.6.9
+        version: 3.6.9(react@18.2.0)
       '@react-stately/toggle':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.7.8
+        version: 3.7.8(react@18.2.0)
       '@react-types/checkbox':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.4
+        version: 3.8.4(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/chip':
         specifier: workspace:*
@@ -1196,14 +1252,14 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
         specifier: ^7.51.3
-        version: 7.51.3(react@18.2.0)
+        version: 7.53.2(react@18.2.0)
 
   packages/components/chip:
     dependencies:
@@ -1217,17 +1273,17 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/checkbox':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.4
+        version: 3.8.4(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1242,10 +1298,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/code:
@@ -1267,17 +1323,20 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/date-input:
     dependencies:
       '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.4
+        specifier: 3.5.6
+        version: 3.5.6
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -1285,23 +1344,23 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/datepicker':
-        specifier: 3.10.1
-        version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.11.4
+        version: 3.11.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/datepicker':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.3
+        version: 3.10.3(react@18.2.0)
       '@react-types/datepicker':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -1319,17 +1378,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/date-picker:
     dependencies:
       '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.4
+        specifier: 3.5.6
+        version: 3.5.6
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
@@ -1342,6 +1401,9 @@ importers:
       '@nextui-org/date-input':
         specifier: workspace:*
         version: link:../date-input
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/popover':
         specifier: workspace:*
         version: link:../popover
@@ -1355,29 +1417,29 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/datepicker':
-        specifier: 3.10.1
-        version: 3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.11.4
+        version: 3.11.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/datepicker':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.3
+        version: 3.10.3(react@18.2.0)
       '@react-stately/overlays':
-        specifier: 3.6.7
-        version: 3.6.7(react@18.2.0)
+        specifier: 3.6.11
+        version: 3.6.11(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
       '@react-types/datepicker':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/radio':
         specifier: workspace:*
@@ -1394,11 +1456,14 @@ importers:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/divider:
@@ -1413,21 +1478,85 @@ importers:
         specifier: workspace:*
         version: link:../../core/system-rsc
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
+    devDependencies:
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/components/drawer:
+    dependencies:
+      '@nextui-org/framer-utils':
+        specifier: workspace:*
+        version: link:../../utilities/framer-utils
+      '@nextui-org/modal':
+        specifier: workspace:*
+        version: link:../modal
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
     devDependencies:
+      '@nextui-org/avatar':
+        specifier: workspace:*
+        version: link:../avatar
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
+      '@nextui-org/checkbox':
+        specifier: workspace:*
+        version: link:../checkbox
+      '@nextui-org/image':
+        specifier: workspace:*
+        version: link:../image
+      '@nextui-org/input':
+        specifier: workspace:*
+        version: link:../input
+      '@nextui-org/link':
+        specifier: workspace:*
+        version: link:../link
+      '@nextui-org/shared-icons':
+        specifier: workspace:*
+        version: link:../../utilities/shared-icons
+      '@nextui-org/switch':
+        specifier: workspace:*
+        version: link:../switch
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
       '@nextui-org/theme':
         specifier: workspace:*
         version: link:../../core/theme
+      '@nextui-org/tooltip':
+        specifier: workspace:*
+        version: link:../tooltip
+      '@nextui-org/use-disclosure':
+        specifier: workspace:*
+        version: link:../../hooks/use-disclosure
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-lorem-component:
+        specifier: 0.13.0
+        version: 0.13.0(react@18.2.0)
 
   packages/components/dropdown:
     dependencies:
@@ -1447,20 +1576,20 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/menu':
-        specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.15.5
+        version: 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/menu':
-        specifier: 3.7.1
-        version: 3.7.1(react@18.2.0)
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-types/menu':
-        specifier: 3.9.9
-        version: 3.9.9(react@18.2.0)
+        specifier: 3.9.12
+        version: 3.9.12(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1490,13 +1619,53 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+
+  packages/components/form:
+    dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      '@react-aria/utils':
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
+      '@react-stately/form':
+        specifier: 3.0.6
+        version: 3.0.6(react@18.2.0)
+      '@react-types/form':
+        specifier: ^3.7.8
+        version: 3.7.8(react@18.2.0)
+      '@react-types/shared':
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
+    devDependencies:
+      '@nextui-org/button':
+        specifier: workspace:*
+        version: link:../button
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/image:
@@ -1521,14 +1690,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/input:
     dependencies:
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -1542,29 +1714,29 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/textfield':
-        specifier: 3.14.5
-        version: 3.14.5(react@18.2.0)
+        specifier: 3.14.10
+        version: 3.14.10(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       '@react-types/textfield':
-        specifier: 3.9.3
-        version: 3.9.3(react@18.2.0)
+        specifier: 3.9.7
+        version: 3.9.7(react@18.2.0)
       react-textarea-autosize:
         specifier: ^8.5.3
-        version: 8.5.3(@types/react@18.2.8)(react@18.2.0)
+        version: 8.5.5(@types/react@18.2.8)(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
         specifier: workspace:*
@@ -1576,41 +1748,96 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
         specifier: ^7.51.3
-        version: 7.51.3(react@18.2.0)
+        version: 7.53.2(react@18.2.0)
 
-  packages/components/kbd:
+  packages/components/input-otp:
     dependencies:
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
-      '@nextui-org/system-rsc':
-        specifier: workspace:*
-        version: link:../../core/system-rsc
+      '@react-aria/focus':
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
+      '@react-aria/form':
+        specifier: 3.0.8
+        version: 3.0.8(react@18.2.0)
       '@react-aria/utils':
         specifier: 3.24.1
         version: 3.24.1(react@18.2.0)
+      '@react-stately/form':
+        specifier: 3.0.5
+        version: 3.0.5(react@18.2.0)
+      '@react-stately/utils':
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
+      '@react-types/textfield':
+        specifier: 3.9.3
+        version: 3.9.3(react@18.2.0)
+      input-otp:
+        specifier: 1.4.1
+        version: 1.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
-      '@nextui-org/theme':
+      '@nextui-org/button':
         specifier: workspace:*
-        version: link:../../core/theme
+        version: link:../button
+      '@nextui-org/system':
+        specifier: workspace:*
+        version: link:../../core/system
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-hook-form:
+        specifier: ^7.51.3
+        version: 7.53.2(react@18.2.0)
+
+  packages/components/kbd:
+    dependencies:
+      '@nextui-org/react-utils':
+        specifier: workspace:*
+        version: link:../../utilities/react-utils
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
+      '@nextui-org/system-rsc':
+        specifier: workspace:*
+        version: link:../../core/system-rsc
+      '@react-aria/utils':
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
+    devDependencies:
+      '@nextui-org/theme':
+        specifier: workspace:*
+        version: link:../../core/theme
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/link:
@@ -1628,17 +1855,17 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-aria-link
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/link':
-        specifier: 3.7.1
-        version: 3.7.1(react@18.2.0)
+        specifier: 3.7.6
+        version: 3.7.6(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/link':
-        specifier: 3.5.5
-        version: 3.5.5(react@18.2.0)
+        specifier: 3.5.8
+        version: 3.5.8(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
         specifier: workspace:*
@@ -1650,10 +1877,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/listbox:
@@ -1674,26 +1901,29 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-is-mobile
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/listbox':
-        specifier: 3.12.1
-        version: 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.13.5
+        version: 3.13.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/list':
-        specifier: 3.10.5
-        version: 3.10.5(react@18.2.0)
+        specifier: 3.11.0
+        version: 3.11.0(react@18.2.0)
       '@react-types/menu':
-        specifier: 3.9.9
-        version: 3.9.9(react@18.2.0)
+        specifier: 3.9.12
+        version: 3.9.12(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
+      '@tanstack/react-virtual':
+        specifier: 3.10.9
+        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1720,10 +1950,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/menu:
@@ -1747,29 +1977,29 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-is-mobile
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/menu':
-        specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.15.5
+        version: 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/menu':
-        specifier: 3.7.1
-        version: 3.7.1(react@18.2.0)
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-stately/tree':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.5
+        version: 3.8.5(react@18.2.0)
       '@react-types/menu':
-        specifier: 3.9.9
-        version: 3.9.9(react@18.2.0)
+        specifier: 3.9.12
+        version: 3.9.12(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -1787,14 +2017,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/modal:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1816,27 +2049,30 @@ importers:
       '@nextui-org/use-disclosure':
         specifier: workspace:*
         version: link:../../hooks/use-disclosure
+      '@nextui-org/use-draggable':
+        specifier: workspace:*
+        version: link:../../hooks/use-draggable
       '@react-aria/dialog':
-        specifier: 3.5.14
-        version: 3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.5.19
+        version: 3.5.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/overlays':
-        specifier: 3.6.7
-        version: 3.6.7(react@18.2.0)
+        specifier: 3.6.11
+        version: 3.6.11(react@18.2.0)
       '@react-types/overlays':
-        specifier: 3.8.7
-        version: 3.8.7(react@18.2.0)
+        specifier: 3.8.10
+        version: 3.8.10(react@18.2.0)
     devDependencies:
       '@nextui-org/button':
         specifier: workspace:*
@@ -1850,6 +2086,9 @@ importers:
       '@nextui-org/link':
         specifier: workspace:*
         version: link:../link
+      '@nextui-org/switch':
+        specifier: workspace:*
+        version: link:../switch
       '@nextui-org/system':
         specifier: workspace:*
         version: link:../../core/system
@@ -1860,13 +2099,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-lorem-component:
         specifier: 0.13.0
@@ -1874,6 +2113,9 @@ importers:
 
   packages/components/navbar:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -1890,29 +2132,23 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-scroll-position
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/toggle':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.7.8
+        version: 3.7.8(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
-      framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-remove-scroll:
-        specifier: ^2.5.6
-        version: 2.5.9(@types/react@18.2.8)(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -1941,11 +2177,14 @@ importers:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-lorem-component:
         specifier: 0.13.0
@@ -1962,21 +2201,24 @@ importers:
       '@nextui-org/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
+      '@nextui-org/use-intersection-observer':
+        specifier: workspace:*
+        version: link:../../hooks/use-intersection-observer
       '@nextui-org/use-pagination':
         specifier: workspace:*
         version: link:../../hooks/use-pagination
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       scroll-into-view-if-needed:
         specifier: 3.0.10
         version: 3.0.10
@@ -1991,10 +2233,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/popover:
@@ -2005,6 +2247,9 @@ importers:
       '@nextui-org/button':
         specifier: workspace:*
         version: link:../button
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2021,32 +2266,29 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/dialog':
-        specifier: 3.5.14
-        version: 3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.5.19
+        version: 3.5.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/overlays':
-        specifier: 3.6.7
-        version: 3.6.7(react@18.2.0)
+        specifier: 3.6.11
+        version: 3.6.11(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/overlays':
-        specifier: 3.8.7
-        version: 3.8.7(react@18.2.0)
-      react-remove-scroll:
-        specifier: ^2.5.6
-        version: 2.5.9(@types/react@18.2.8)(react@18.2.0)
+        specifier: 3.8.10
+        version: 3.8.10(react@18.2.0)
     devDependencies:
       '@nextui-org/card':
         specifier: workspace:*
@@ -2064,13 +2306,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/progress:
@@ -2085,17 +2327,17 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-is-mounted
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/progress':
-        specifier: 3.4.13
-        version: 3.4.13(react@18.2.0)
+        specifier: 3.4.17
+        version: 3.4.17(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/progress':
-        specifier: 3.5.4
-        version: 3.5.4(react@18.2.0)
+        specifier: 3.5.7
+        version: 3.5.7(react@18.2.0)
     devDependencies:
       '@nextui-org/card':
         specifier: workspace:*
@@ -2113,14 +2355,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/radio:
     dependencies:
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -2128,29 +2373,29 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/radio':
-        specifier: 3.10.4
-        version: 3.10.4(react@18.2.0)
+        specifier: 3.10.9
+        version: 3.10.9(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/radio':
-        specifier: 3.10.4
-        version: 3.10.4(react@18.2.0)
+        specifier: 3.10.8
+        version: 3.10.8(react@18.2.0)
       '@react-types/radio':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.4
+        version: 3.8.4(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/button':
         specifier: workspace:*
@@ -2165,14 +2410,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/ripple:
     dependencies:
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -2190,13 +2438,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/scroll-shadow:
@@ -2221,10 +2469,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-lorem-component:
         specifier: 0.13.0
@@ -2235,6 +2483,9 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../form
       '@nextui-org/listbox':
         specifier: workspace:*
         version: link:../listbox
@@ -2266,23 +2517,26 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/form':
-        specifier: 3.0.5
-        version: 3.0.5(react@18.2.0)
+        specifier: 3.0.10
+        version: 3.0.10(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
+      '@tanstack/react-virtual':
+        specifier: 3.10.9
+        version: 3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       '@nextui-org/avatar':
         specifier: workspace:*
@@ -2309,26 +2563,26 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-infinite-scroll
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-stately/data':
-        specifier: 3.11.4
-        version: 3.11.4(react@18.2.0)
+        specifier: 3.11.7
+        version: 3.11.7(react@18.2.0)
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
         specifier: ^7.51.3
-        version: 7.51.3(react@18.2.0)
+        version: 7.53.2(react@18.2.0)
 
   packages/components/skeleton:
     dependencies:
@@ -2355,10 +2609,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/slider:
@@ -2373,26 +2627,26 @@ importers:
         specifier: workspace:*
         version: link:../tooltip
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/slider':
-        specifier: 3.7.8
-        version: 3.7.8(react@18.2.0)
+        specifier: 3.7.13
+        version: 3.7.13(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/slider':
-        specifier: 3.5.4
-        version: 3.5.4(react@18.2.0)
+        specifier: 3.5.8
+        version: 3.5.8(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -2410,10 +2664,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/snippet:
@@ -2437,14 +2691,11 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-clipboard
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
-      framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
     devDependencies:
       '@nextui-org/system':
         specifier: workspace:*
@@ -2455,11 +2706,14 @@ importers:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/spacer:
@@ -2481,10 +2735,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/spinner:
@@ -2506,10 +2760,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/components/switch:
@@ -2524,26 +2778,26 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/switch':
-        specifier: 3.6.4
-        version: 3.6.4(react@18.2.0)
+        specifier: 3.6.9
+        version: 3.6.9(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/toggle':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.7.8
+        version: 3.7.8(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       '@nextui-org/shared-icons':
         specifier: workspace:*
@@ -2558,14 +2812,14 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-hook-form:
         specifier: ^7.51.3
-        version: 7.51.3(react@18.2.0)
+        version: 7.53.2(react@18.2.0)
 
   packages/components/table:
     dependencies:
@@ -2585,32 +2839,32 @@ importers:
         specifier: workspace:*
         version: link:../spacer
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/table':
-        specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.15.5
+        version: 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       '@react-stately/table':
-        specifier: 3.11.8
-        version: 3.11.8(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-stately/virtualizer':
-        specifier: 3.7.1
-        version: 3.7.1(react@18.2.0)
+        specifier: 4.1.0
+        version: 4.1.0(react@18.2.0)
       '@react-types/grid':
-        specifier: 3.2.6
-        version: 3.2.6(react@18.2.0)
+        specifier: 3.2.9
+        version: 3.2.9(react@18.2.0)
       '@react-types/table':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.2
+        version: 3.10.2(react@18.2.0)
     devDependencies:
       '@nextui-org/button':
         specifier: workspace:*
@@ -2640,16 +2894,16 @@ importers:
         specifier: workspace:*
         version: link:../user
       '@react-stately/data':
-        specifier: 3.11.4
-        version: 3.11.4(react@18.2.0)
+        specifier: 3.11.7
+        version: 3.11.7(react@18.2.0)
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       swr:
         specifier: ^2.2.1
@@ -2676,26 +2930,26 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-update-effect
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/tabs':
-        specifier: 3.9.1
-        version: 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.9.7
+        version: 3.9.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/tabs':
-        specifier: 3.6.6
-        version: 3.6.6(react@18.2.0)
+        specifier: 3.6.10
+        version: 3.6.10(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       '@react-types/tabs':
-        specifier: 3.3.7
-        version: 3.3.7(react@18.2.0)
+        specifier: 3.3.10
+        version: 3.3.10(react@18.2.0)
       scroll-into-view-if-needed:
         specifier: 3.0.10
         version: 3.0.10
@@ -2725,13 +2979,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
       react-lorem-component:
         specifier: 0.13.0
@@ -2742,6 +2996,9 @@ importers:
       '@nextui-org/aria-utils':
         specifier: workspace:*
         version: link:../../utilities/aria-utils
+      '@nextui-org/dom-animation':
+        specifier: workspace:*
+        version: link:../../utilities/dom-animation
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2755,26 +3012,32 @@ importers:
         specifier: workspace:*
         version: link:../../hooks/use-safe-layout-effect
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/tooltip':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.7.9
+        version: 3.7.9(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/tooltip':
-        specifier: 3.4.9
-        version: 3.4.9(react@18.2.0)
+        specifier: 3.4.13
+        version: 3.4.13(react@18.2.0)
       '@react-types/overlays':
-        specifier: 3.8.7
-        version: 3.8.7(react@18.2.0)
+        specifier: 3.8.10
+        version: 3.8.10(react@18.2.0)
       '@react-types/tooltip':
-        specifier: 3.4.9
-        version: 3.4.9(react@18.2.0)
+        specifier: 3.4.12
+        version: 3.4.12(react@18.2.0)
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: 18.2.0
+        version: 18.2.0(react@18.2.0)
     devDependencies:
       '@nextui-org/button':
         specifier: workspace:*
@@ -2789,14 +3052,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.28
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
 
   packages/components/user:
     dependencies:
@@ -2810,11 +3067,11 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
     devDependencies:
       '@nextui-org/link':
         specifier: workspace:*
@@ -2829,10 +3086,10 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/core/react:
@@ -2840,6 +3097,9 @@ importers:
       '@nextui-org/accordion':
         specifier: workspace:*
         version: link:../../components/accordion
+      '@nextui-org/alert':
+        specifier: workspace:*
+        version: link:../../components/alert
       '@nextui-org/autocomplete':
         specifier: workspace:*
         version: link:../../components/autocomplete
@@ -2879,9 +3139,15 @@ importers:
       '@nextui-org/divider':
         specifier: workspace:*
         version: link:../../components/divider
+      '@nextui-org/drawer':
+        specifier: workspace:*
+        version: link:../../components/drawer
       '@nextui-org/dropdown':
         specifier: workspace:*
         version: link:../../components/dropdown
+      '@nextui-org/form':
+        specifier: workspace:*
+        version: link:../../components/form
       '@nextui-org/framer-utils':
         specifier: workspace:*
         version: link:../../utilities/framer-utils
@@ -2891,6 +3157,9 @@ importers:
       '@nextui-org/input':
         specifier: workspace:*
         version: link:../../components/input
+      '@nextui-org/input-otp':
+        specifier: workspace:*
+        version: link:../../components/input-otp
       '@nextui-org/kbd':
         specifier: workspace:*
         version: link:../../components/kbd
@@ -2967,27 +3236,27 @@ importers:
         specifier: workspace:*
         version: link:../../components/user
       '@react-aria/visually-hidden':
-        specifier: 3.8.12
-        version: 3.8.12(react@18.2.0)
+        specifier: 3.8.17
+        version: 3.8.17(react@18.2.0)
       framer-motion:
-        specifier: '>=10.17.0'
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: '>=11.5.6 || >=12.0.0-alpha.1'
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/core/system:
     dependencies:
       '@internationalized/date':
-        specifier: ^3.5.4
-        version: 3.5.4
+        specifier: 3.5.6
+        version: 3.5.6
       '@nextui-org/react-utils':
         specifier: workspace:*
         version: link:../../utilities/react-utils
@@ -2995,36 +3264,39 @@ importers:
         specifier: workspace:*
         version: link:../system-rsc
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
+      '@react-types/datepicker':
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/core/system-rsc:
     dependencies:
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
@@ -3042,14 +3314,17 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
 
   packages/core/theme:
     dependencies:
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
       clsx:
         specifier: ^1.2.1
         version: 1.2.1
@@ -3065,27 +3340,12 @@ importers:
       flat:
         specifier: ^5.0.2
         version: 5.0.2
-      lodash.foreach:
-        specifier: ^4.5.0
-        version: 4.5.0
-      lodash.get:
-        specifier: ^4.4.2
-        version: 4.4.2
-      lodash.kebabcase:
-        specifier: ^4.1.1
-        version: 4.1.1
-      lodash.mapkeys:
-        specifier: ^4.6.0
-        version: 4.6.0
-      lodash.omit:
-        specifier: ^4.5.0
-        version: 4.5.0
       tailwind-merge:
-        specifier: ^1.14.0
-        version: 1.14.0
+        specifier: ^2.5.2
+        version: 2.5.4
       tailwind-variants:
         specifier: ^0.1.20
-        version: 0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)))
+        version: 0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)))
     devDependencies:
       '@types/color':
         specifier: ^3.0.3
@@ -3093,249 +3353,234 @@ importers:
       '@types/flat':
         specifier: ^5.0.2
         version: 5.0.5
-      '@types/lodash.foreach':
-        specifier: ^4.5.7
-        version: 4.5.9
-      '@types/lodash.get':
-        specifier: ^4.4.7
-        version: 4.4.9
-      '@types/lodash.kebabcase':
-        specifier: ^4.1.7
-        version: 4.1.9
-      '@types/lodash.mapkeys':
-        specifier: ^4.6.7
-        version: 4.6.9
-      '@types/lodash.omit':
-        specifier: ^4.5.7
-        version: 4.5.9
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       tailwindcss:
         specifier: ^3.4.0
-        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
 
   packages/hooks/use-aria-accordion:
     dependencies:
       '@react-aria/button':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/selection':
-        specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.20.1
+        version: 3.20.1(react-dom@18.3.1(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/tree':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.5
+        version: 3.8.5(react@18.2.0)
       '@react-types/accordion':
-        specifier: 3.0.0-alpha.21
-        version: 3.0.0-alpha.21(react@18.2.0)
+        specifier: 3.0.0-alpha.24
+        version: 3.0.0-alpha.24(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-aria-accordion-item:
     dependencies:
       '@react-aria/button':
-        specifier: 3.9.5
-        version: 3.9.5(react@18.2.0)
+        specifier: 3.10.1
+        version: 3.10.1(react@18.2.0)
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-stately/tree':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.5
+        version: 3.8.5(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-aria-button:
     dependencies:
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-aria-link:
     dependencies:
       '@react-aria/focus':
-        specifier: 3.17.1
-        version: 3.17.1(react@18.2.0)
+        specifier: 3.18.4
+        version: 3.18.4(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/link':
-        specifier: 3.5.5
-        version: 3.5.5(react@18.2.0)
+        specifier: 3.5.8
+        version: 3.5.8(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-aria-menu:
     dependencies:
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/menu':
-        specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.15.5
+        version: 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/selection':
-        specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.20.1
+        version: 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/collections':
-        specifier: 3.10.7
-        version: 3.10.7(react@18.2.0)
+        specifier: 3.11.0
+        version: 3.11.0(react@18.2.0)
       '@react-stately/tree':
-        specifier: 3.8.1
-        version: 3.8.1(react@18.2.0)
+        specifier: 3.8.5
+        version: 3.8.5(react@18.2.0)
       '@react-types/menu':
-        specifier: 3.9.9
-        version: 3.9.9(react@18.2.0)
+        specifier: 3.9.12
+        version: 3.9.12(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-aria-modal-overlay:
     dependencies:
       '@react-aria/overlays':
-        specifier: 3.22.1
-        version: 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.23.4
+        version: 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/overlays':
-        specifier: 3.6.7
-        version: 3.6.7(react@18.2.0)
+        specifier: 3.6.11
+        version: 3.6.11(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/hooks/use-aria-multiselect:
     dependencies:
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/label':
-        specifier: 3.7.8
-        version: 3.7.8(react@18.2.0)
+        specifier: 3.7.12
+        version: 3.7.12(react@18.2.0)
       '@react-aria/listbox':
-        specifier: 3.12.1
-        version: 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.13.5
+        version: 3.13.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/menu':
-        specifier: 3.14.1
-        version: 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.15.5
+        version: 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/selection':
-        specifier: 3.18.1
-        version: 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 3.20.1
+        version: 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/form':
-        specifier: 3.0.3
-        version: 3.0.3(react@18.2.0)
+        specifier: 3.0.6
+        version: 3.0.6(react@18.2.0)
       '@react-stately/list':
-        specifier: 3.10.5
-        version: 3.10.5(react@18.2.0)
+        specifier: 3.11.0
+        version: 3.11.0(react@18.2.0)
       '@react-stately/menu':
-        specifier: 3.7.1
-        version: 3.7.1(react@18.2.0)
+        specifier: 3.8.3
+        version: 3.8.3(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/overlays':
-        specifier: 3.8.7
-        version: 3.8.7(react@18.2.0)
+        specifier: 3.8.10
+        version: 3.8.10(react@18.2.0)
       '@react-types/select':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.9.7
+        version: 3.9.7(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/hooks/use-aria-toggle-button:
@@ -3344,23 +3589,23 @@ importers:
         specifier: workspace:*
         version: link:../use-aria-button
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/toggle':
-        specifier: 3.7.4
-        version: 3.7.4(react@18.2.0)
+        specifier: 3.7.8
+        version: 3.7.8(react@18.2.0)
       '@react-types/button':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.10.0
+        version: 3.10.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-callback-ref:
@@ -3373,7 +3618,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-clipboard:
@@ -3382,7 +3627,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-data-scroll-overflow:
@@ -3395,7 +3640,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-disclosure:
@@ -3404,17 +3649,30 @@ importers:
         specifier: workspace:*
         version: link:../use-callback-ref
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/utils':
-        specifier: 3.10.1
-        version: 3.10.1(react@18.2.0)
+        specifier: 3.10.4
+        version: 3.10.4(react@18.2.0)
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+
+  packages/hooks/use-draggable:
+    dependencies:
+      '@react-aria/interactions':
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-image:
@@ -3423,62 +3681,62 @@ importers:
         specifier: workspace:*
         version: link:../use-safe-layout-effect
     devDependencies:
+      '@nextui-org/test-utils':
+        specifier: workspace:*
+        version: link:../../utilities/test-utils
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-infinite-scroll:
     dependencies:
-      '@types/lodash.debounce':
-        specifier: ^4.0.7
-        version: 4.0.9
-      lodash.debounce:
-        specifier: ^4.0.8
-        version: 4.0.8
+      '@nextui-org/shared-utils':
+        specifier: workspace:*
+        version: link:../../utilities/shared-utils
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-intersection-observer:
     dependencies:
       '@react-aria/interactions':
-        specifier: 3.21.3
-        version: 3.21.3(react@18.2.0)
+        specifier: 3.22.4
+        version: 3.22.4(react@18.2.0)
       '@react-aria/ssr':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.9.6
+        version: 3.9.6(react@18.2.0)
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-is-mobile:
     dependencies:
       '@react-aria/ssr':
-        specifier: 3.9.4
-        version: 3.9.4(react@18.2.0)
+        specifier: 3.9.6
+        version: 3.9.6(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-is-mounted:
@@ -3487,7 +3745,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-measure:
@@ -3496,7 +3754,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-pagination:
@@ -3505,14 +3763,14 @@ importers:
         specifier: workspace:*
         version: link:../../utilities/shared-utils
       '@react-aria/i18n':
-        specifier: 3.11.1
-        version: 3.11.1(react@18.2.0)
+        specifier: 3.12.3
+        version: 3.12.3(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-real-shape:
@@ -3525,7 +3783,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-ref-state:
@@ -3534,7 +3792,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-resize:
@@ -3543,7 +3801,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-safe-layout-effect:
@@ -3552,7 +3810,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-scroll-position:
@@ -3561,7 +3819,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-ssr:
@@ -3570,7 +3828,16 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
+        version: 18.2.0
+
+  packages/hooks/use-theme:
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      react:
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/hooks/use-update-effect:
@@ -3579,7 +3846,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/storybook:
@@ -3594,63 +3861,66 @@ importers:
         specifier: workspace:*
         version: link:../core/theme
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
     devDependencies:
       '@storybook/addon-a11y':
-        specifier: ^7.4.6
-        version: 7.6.17
+        specifier: ^8.4.5
+        version: 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/addon-actions':
-        specifier: ^7.4.6
-        version: 7.6.17
+        specifier: ^8.4.5
+        version: 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/addon-docs':
-        specifier: ^7.4.6
-        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^8.4.5
+        version: 8.4.5(@types/react@18.3.12)(storybook@8.4.5(prettier@3.3.3))
       '@storybook/addon-essentials':
-        specifier: ^7.4.6
-        version: 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^8.4.5
+        version: 8.4.5(@types/react@18.3.12)(storybook@8.4.5(prettier@3.3.3))
       '@storybook/addon-links':
-        specifier: ^7.4.6
-        version: 7.6.17(react@18.2.0)
-      '@storybook/addon-mdx-gfm':
-        specifier: ^7.4.6
-        version: 7.6.17
+        specifier: ^8.4.5
+        version: 8.4.5(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))
       '@storybook/cli':
-        specifier: ^7.4.6
-        version: 7.6.17(encoding@0.1.13)
+        specifier: ^8.4.5
+        version: 8.4.5(@babel/preset-env@7.26.0(@babel/core@7.26.0))(prettier@3.3.3)
       '@storybook/manager-api':
-        specifier: ^7.6.17
-        version: 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^8.4.5
+        version: 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/preview-api':
-        specifier: ^7.6.17
-        version: 7.6.17
+        specifier: ^8.4.5
+        version: 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/react':
-        specifier: ^7.4.6
-        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
+        specifier: ^8.4.5
+        version: 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))(typescript@5.6.3)
       '@storybook/react-vite':
-        specifier: ^7.4.6
-        version: 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@3.29.4)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
+        specifier: ^8.4.5
+        version: 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.27.4)(storybook@8.4.5(prettier@3.3.3))(typescript@5.6.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))
       '@storybook/theming':
-        specifier: ^7.4.6
-        version: 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^8.4.5
+        version: 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@vitejs/plugin-react':
+        specifier: ^4.3.3
+        version: 4.3.3(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))
       autoprefixer:
         specifier: ^10.4.13
-        version: 10.4.19(postcss@8.4.38)
+        version: 10.4.20(postcss@8.4.49)
+      remark-gfm:
+        specifier: ^4.0.0
+        version: 4.0.0
       storybook:
-        specifier: ^7.4.6
-        version: 7.6.17(encoding@0.1.13)
+        specifier: ^8.4.5
+        version: 8.4.5(prettier@3.3.3)
       storybook-dark-mode:
-        specifier: ^3.0.1
-        version: 3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: ^4.0.2
+        version: 4.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))
       tailwindcss:
         specifier: ^3.3.5
-        version: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
+        version: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
       vite:
-        specifier: ^4.4.7
-        version: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+        specifier: ^5.4.11
+        version: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0)
 
   packages/utilities/aria-utils:
     dependencies:
@@ -3664,31 +3934,40 @@ importers:
         specifier: workspace:*
         version: link:../../core/system
       '@react-aria/utils':
-        specifier: 3.24.1
-        version: 3.24.1(react@18.2.0)
+        specifier: 3.26.0
+        version: 3.26.0(react@18.2.0)
       '@react-stately/collections':
-        specifier: 3.10.7
-        version: 3.10.7(react@18.2.0)
+        specifier: 3.11.0
+        version: 3.11.0(react@18.2.0)
       '@react-stately/overlays':
-        specifier: 3.6.7
-        version: 3.6.7(react@18.2.0)
+        specifier: 3.6.11
+        version: 3.6.11(react@18.2.0)
       '@react-types/overlays':
-        specifier: 3.8.7
-        version: 3.8.7(react@18.2.0)
+        specifier: 3.8.10
+        version: 3.8.10(react@18.2.0)
       '@react-types/shared':
-        specifier: 3.23.1
-        version: 3.23.1(react@18.2.0)
+        specifier: 3.25.0
+        version: 3.25.0(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
+  packages/utilities/dom-animation:
+    devDependencies:
+      clean-package:
+        specifier: 2.2.0
+        version: 2.2.0
+      framer-motion:
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+
   packages/utilities/framer-utils:
     dependencies:
       '@nextui-org/shared-utils':
@@ -3705,13 +3984,13 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       framer-motion:
-        specifier: ^11.0.22
-        version: 11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 11.9.0
+        version: 11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
       react-dom:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
 
   packages/utilities/react-rsc-utils:
@@ -3720,7 +3999,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/utilities/react-utils:
@@ -3736,7 +4015,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/utilities/shared-icons:
@@ -3745,7 +4024,7 @@ importers:
         specifier: 2.2.0
         version: 2.2.0
       react:
-        specifier: ^18.2.0
+        specifier: 18.2.0
         version: 18.2.0
 
   packages/utilities/shared-utils:
@@ -3768,57 +4047,53 @@ importers:
 
 packages:
 
-  '@aashutoshrathi/word-wrap@1.2.6':
-    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
-    engines: {node: '>=0.10.0'}
-
-  '@adobe/css-tools@4.3.3':
-    resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==}
+  '@adobe/css-tools@4.4.1':
+    resolution: {integrity: sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==}
 
-  '@algolia/cache-browser-local-storage@4.23.3':
-    resolution: {integrity: sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==}
+  '@algolia/cache-browser-local-storage@4.24.0':
+    resolution: {integrity: sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==}
 
-  '@algolia/cache-common@4.23.3':
-    resolution: {integrity: sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A==}
+  '@algolia/cache-common@4.24.0':
+    resolution: {integrity: sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g==}
 
-  '@algolia/cache-in-memory@4.23.3':
-    resolution: {integrity: sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==}
+  '@algolia/cache-in-memory@4.24.0':
+    resolution: {integrity: sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==}
 
-  '@algolia/client-account@4.23.3':
-    resolution: {integrity: sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==}
+  '@algolia/client-account@4.24.0':
+    resolution: {integrity: sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==}
 
-  '@algolia/client-analytics@4.23.3':
-    resolution: {integrity: sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==}
+  '@algolia/client-analytics@4.24.0':
+    resolution: {integrity: sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==}
 
-  '@algolia/client-common@4.23.3':
-    resolution: {integrity: sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==}
+  '@algolia/client-common@4.24.0':
+    resolution: {integrity: sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==}
 
-  '@algolia/client-personalization@4.23.3':
-    resolution: {integrity: sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==}
+  '@algolia/client-personalization@4.24.0':
+    resolution: {integrity: sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==}
 
-  '@algolia/client-search@4.23.3':
-    resolution: {integrity: sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==}
+  '@algolia/client-search@4.24.0':
+    resolution: {integrity: sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==}
 
-  '@algolia/logger-common@4.23.3':
-    resolution: {integrity: sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g==}
+  '@algolia/logger-common@4.24.0':
+    resolution: {integrity: sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA==}
 
-  '@algolia/logger-console@4.23.3':
-    resolution: {integrity: sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==}
+  '@algolia/logger-console@4.24.0':
+    resolution: {integrity: sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==}
 
-  '@algolia/recommend@4.23.3':
-    resolution: {integrity: sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==}
+  '@algolia/recommend@4.24.0':
+    resolution: {integrity: sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==}
 
-  '@algolia/requester-browser-xhr@4.23.3':
-    resolution: {integrity: sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==}
+  '@algolia/requester-browser-xhr@4.24.0':
+    resolution: {integrity: sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==}
 
-  '@algolia/requester-common@4.23.3':
-    resolution: {integrity: sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw==}
+  '@algolia/requester-common@4.24.0':
+    resolution: {integrity: sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA==}
 
-  '@algolia/requester-node-http@4.23.3':
-    resolution: {integrity: sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==}
+  '@algolia/requester-node-http@4.24.0':
+    resolution: {integrity: sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==}
 
-  '@algolia/transporter@4.23.3':
-    resolution: {integrity: sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==}
+  '@algolia/transporter@4.24.0':
+    resolution: {integrity: sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==}
 
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
@@ -3828,12 +4103,8 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
-  '@aw-web-design/x-default-browser@1.4.126':
-    resolution: {integrity: sha512-Xk1sIhyNC/esHGGVjL/niHLowM0csl/kFO5uawBy4IrWwy0o1G8LGt3jP6nmWGz+USxeeqbihAmp/oVZju6wug==}
-    hasBin: true
-
-  '@babel/cli@7.24.1':
-    resolution: {integrity: sha512-HbmrtxyFUr34LwAlV9jS+sSIjUp4FpdtIMGwgufY3AsxrIfsh/HxlMTywsONAZsU0RMYbZtbZFpUCrSGs7o0EA==}
+  '@babel/cli@7.25.9':
+    resolution: {integrity: sha512-I+02IfrTiSanpxJBlZQYb18qCxB6c2Ih371cVpfgIrPQrjAYkf45XxomTJOG8JBWX5GY35/+TmhCMdJ4ZPkL8Q==}
     engines: {node: '>=6.9.0'}
     hasBin: true
     peerDependencies:
@@ -3842,42 +4113,42 @@ packages:
   '@babel/code-frame@7.12.11':
     resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
 
-  '@babel/code-frame@7.24.2':
-    resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==}
+  '@babel/code-frame@7.26.2':
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.24.4':
-    resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==}
+  '@babel/compat-data@7.26.2':
+    resolution: {integrity: sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.24.4':
-    resolution: {integrity: sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==}
+  '@babel/core@7.26.0':
+    resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.24.4':
-    resolution: {integrity: sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==}
+  '@babel/generator@7.26.2':
+    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.22.5':
-    resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
+  '@babel/helper-annotate-as-pure@7.25.9':
+    resolution: {integrity: sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.22.15':
-    resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==}
+  '@babel/helper-builder-binary-assignment-operator-visitor@7.25.9':
+    resolution: {integrity: sha512-C47lC7LIDCnz0h4vai/tpNOI95tCd5ZT3iBt/DBH5lXKHZsyNQv18yf1wIIg2ntiQNgmAvA+DgZ82iW8Qdym8g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.23.6':
-    resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==}
+  '@babel/helper-compilation-targets@7.25.9':
+    resolution: {integrity: sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.24.4':
-    resolution: {integrity: sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==}
+  '@babel/helper-create-class-features-plugin@7.25.9':
+    resolution: {integrity: sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.22.15':
-    resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==}
+  '@babel/helper-create-regexp-features-plugin@7.25.9':
+    resolution: {integrity: sha512-ORPNZ3h6ZRkOyAa/SaHU+XsLZr0UQzRwuDQ0cczIA17nAzZ+85G5cVkOJIj7QavLZGSe8QXUmNFxSZzjcZF9bw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -3887,118 +4158,108 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0-0
 
-  '@babel/helper-define-polyfill-provider@0.6.1':
-    resolution: {integrity: sha512-o7SDgTJuvx5vLKD6SFvkydkSMBvahDKGiNJzG22IZYXhiqoe9efY7zocICBgzHV4IRg5wdgl2nEL/tulKIEIbA==}
+  '@babel/helper-define-polyfill-provider@0.6.3':
+    resolution: {integrity: sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  '@babel/helper-environment-visitor@7.22.20':
-    resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-function-name@7.23.0':
-    resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-hoist-variables@7.22.5':
-    resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-member-expression-to-functions@7.23.0':
-    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.24.3':
-    resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==}
+  '@babel/helper-module-imports@7.25.9':
+    resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.23.3':
-    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+  '@babel/helper-module-transforms@7.26.0':
+    resolution: {integrity: sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.22.5':
-    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+  '@babel/helper-optimise-call-expression@7.25.9':
+    resolution: {integrity: sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.24.0':
-    resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==}
+  '@babel/helper-plugin-utils@7.25.9':
+    resolution: {integrity: sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-remap-async-to-generator@7.22.20':
-    resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==}
+  '@babel/helper-remap-async-to-generator@7.25.9':
+    resolution: {integrity: sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-replace-supers@7.24.1':
-    resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==}
+  '@babel/helper-replace-supers@7.25.9':
+    resolution: {integrity: sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-simple-access@7.22.5':
-    resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-skip-transparent-expression-wrappers@7.22.5':
-    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+  '@babel/helper-simple-access@7.25.9':
+    resolution: {integrity: sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-split-export-declaration@7.22.6':
-    resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
+    resolution: {integrity: sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.24.1':
-    resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.22.20':
-    resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.23.5':
-    resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
+  '@babel/helper-validator-option@7.25.9':
+    resolution: {integrity: sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-wrap-function@7.22.20':
-    resolution: {integrity: sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==}
+  '@babel/helper-wrap-function@7.25.9':
+    resolution: {integrity: sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.24.4':
-    resolution: {integrity: sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==}
+  '@babel/helpers@7.26.0':
+    resolution: {integrity: sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/highlight@7.24.2':
-    resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==}
+  '@babel/highlight@7.25.9':
+    resolution: {integrity: sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.24.4':
-    resolution: {integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==}
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4':
-    resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9':
+    resolution: {integrity: sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9':
+    resolution: {integrity: sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1':
-    resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==}
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9':
+    resolution: {integrity: sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1':
-    resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==}
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9':
+    resolution: {integrity: sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.13.0
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1':
-    resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==}
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9':
+    resolution: {integrity: sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -4010,8 +4271,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-proposal-export-default-from@7.24.1':
-    resolution: {integrity: sha512-+0hrgGGV3xyYIjOrD/bUZk/iUwOIGuoANfRfVg1cPhYBxF+TIXSEcc42DqzBICmWsnAQ+SfKedY0bj8QD+LuMg==}
+  '@babel/plugin-proposal-export-default-from@7.25.9':
+    resolution: {integrity: sha512-ykqgwNfSnNOB+C8fV5X4mG3AVmvu+WVxcaU9xHHtBb7PCrPeweMmPjGsn8eMaeJg6SJuoUuZENeeSWaarWqonQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4062,31 +4323,25 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-export-default-from@7.24.1':
-    resolution: {integrity: sha512-cNXSxv9eTkGUtd0PsNMK8Yx5xeScxfpWOUAxE+ZPAXXEcAMOC3fk7LRdXq5fvpra2pLx2p1YtkAhpUbB2SwaRA==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-syntax-export-namespace-from@7.8.3':
     resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-flow@7.24.1':
-    resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==}
+  '@babel/plugin-syntax-flow@7.26.0':
+    resolution: {integrity: sha512-B+O2DnPc0iG+YXFqOxv2WNuNU97ToWjOomUQ78DouOENWUaM5sVrmet9mcomUGQFwpJd//gvUagXBSdzO1fRKg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-assertions@7.24.1':
-    resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==}
+  '@babel/plugin-syntax-import-assertions@7.26.0':
+    resolution: {integrity: sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.24.1':
-    resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==}
+  '@babel/plugin-syntax-import-attributes@7.26.0':
+    resolution: {integrity: sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4101,8 +4356,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.24.1':
-    resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==}
+  '@babel/plugin-syntax-jsx@7.25.9':
+    resolution: {integrity: sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4149,8 +4404,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-typescript@7.24.1':
-    resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==}
+  '@babel/plugin-syntax-typescript@7.25.9':
+    resolution: {integrity: sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4161,356 +4416,368 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-arrow-functions@7.24.1':
-    resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==}
+  '@babel/plugin-transform-arrow-functions@7.25.9':
+    resolution: {integrity: sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-generator-functions@7.24.3':
-    resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==}
+  '@babel/plugin-transform-async-generator-functions@7.25.9':
+    resolution: {integrity: sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-to-generator@7.24.1':
-    resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==}
+  '@babel/plugin-transform-async-to-generator@7.25.9':
+    resolution: {integrity: sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.1':
-    resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==}
+  '@babel/plugin-transform-block-scoped-functions@7.25.9':
+    resolution: {integrity: sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.24.4':
-    resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==}
+  '@babel/plugin-transform-block-scoping@7.25.9':
+    resolution: {integrity: sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-properties@7.24.1':
-    resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==}
+  '@babel/plugin-transform-class-properties@7.25.9':
+    resolution: {integrity: sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-static-block@7.24.4':
-    resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==}
+  '@babel/plugin-transform-class-static-block@7.26.0':
+    resolution: {integrity: sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.24.1':
-    resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==}
+  '@babel/plugin-transform-classes@7.25.9':
+    resolution: {integrity: sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-computed-properties@7.24.1':
-    resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==}
+  '@babel/plugin-transform-computed-properties@7.25.9':
+    resolution: {integrity: sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.24.1':
-    resolution: {integrity: sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==}
+  '@babel/plugin-transform-destructuring@7.25.9':
+    resolution: {integrity: sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dotall-regex@7.24.1':
-    resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==}
+  '@babel/plugin-transform-dotall-regex@7.25.9':
+    resolution: {integrity: sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-keys@7.24.1':
-    resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==}
+  '@babel/plugin-transform-duplicate-keys@7.25.9':
+    resolution: {integrity: sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dynamic-import@7.24.1':
-    resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==}
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9':
+    resolution: {integrity: sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-dynamic-import@7.25.9':
+    resolution: {integrity: sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.1':
-    resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==}
+  '@babel/plugin-transform-exponentiation-operator@7.25.9':
+    resolution: {integrity: sha512-KRhdhlVk2nObA5AYa7QMgTMTVJdfHprfpAk4DjZVtllqRg9qarilstTKEhpVjyt+Npi8ThRyiV8176Am3CodPA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-export-namespace-from@7.24.1':
-    resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==}
+  '@babel/plugin-transform-export-namespace-from@7.25.9':
+    resolution: {integrity: sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-flow-strip-types@7.24.1':
-    resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==}
+  '@babel/plugin-transform-flow-strip-types@7.25.9':
+    resolution: {integrity: sha512-/VVukELzPDdci7UUsWQaSkhgnjIWXnIyRpM02ldxaVoFK96c41So8JcKT3m0gYjyv7j5FNPGS5vfELrWalkbDA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-for-of@7.24.1':
-    resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==}
+  '@babel/plugin-transform-for-of@7.25.9':
+    resolution: {integrity: sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-function-name@7.24.1':
-    resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==}
+  '@babel/plugin-transform-function-name@7.25.9':
+    resolution: {integrity: sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-json-strings@7.24.1':
-    resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==}
+  '@babel/plugin-transform-json-strings@7.25.9':
+    resolution: {integrity: sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-literals@7.24.1':
-    resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==}
+  '@babel/plugin-transform-literals@7.25.9':
+    resolution: {integrity: sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.1':
-    resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==}
+  '@babel/plugin-transform-logical-assignment-operators@7.25.9':
+    resolution: {integrity: sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-member-expression-literals@7.24.1':
-    resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==}
+  '@babel/plugin-transform-member-expression-literals@7.25.9':
+    resolution: {integrity: sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-amd@7.24.1':
-    resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==}
+  '@babel/plugin-transform-modules-amd@7.25.9':
+    resolution: {integrity: sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-commonjs@7.24.1':
-    resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==}
+  '@babel/plugin-transform-modules-commonjs@7.25.9':
+    resolution: {integrity: sha512-dwh2Ol1jWwL2MgkCzUSOvfmKElqQcuswAZypBSUsScMXvgdT8Ekq5YA6TtqpTVWH+4903NmboMuH1o9i8Rxlyg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.24.1':
-    resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==}
+  '@babel/plugin-transform-modules-systemjs@7.25.9':
+    resolution: {integrity: sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-umd@7.24.1':
-    resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==}
+  '@babel/plugin-transform-modules-umd@7.25.9':
+    resolution: {integrity: sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.22.5':
-    resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==}
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9':
+    resolution: {integrity: sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-new-target@7.24.1':
-    resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==}
+  '@babel/plugin-transform-new-target@7.25.9':
+    resolution: {integrity: sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.1':
-    resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==}
+  '@babel/plugin-transform-nullish-coalescing-operator@7.25.9':
+    resolution: {integrity: sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-numeric-separator@7.24.1':
-    resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==}
+  '@babel/plugin-transform-numeric-separator@7.25.9':
+    resolution: {integrity: sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.24.1':
-    resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==}
+  '@babel/plugin-transform-object-rest-spread@7.25.9':
+    resolution: {integrity: sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-super@7.24.1':
-    resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==}
+  '@babel/plugin-transform-object-super@7.25.9':
+    resolution: {integrity: sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.1':
-    resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==}
+  '@babel/plugin-transform-optional-catch-binding@7.25.9':
+    resolution: {integrity: sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.24.1':
-    resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==}
+  '@babel/plugin-transform-optional-chaining@7.25.9':
+    resolution: {integrity: sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-parameters@7.24.1':
-    resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==}
+  '@babel/plugin-transform-parameters@7.25.9':
+    resolution: {integrity: sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-methods@7.24.1':
-    resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==}
+  '@babel/plugin-transform-private-methods@7.25.9':
+    resolution: {integrity: sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-property-in-object@7.24.1':
-    resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==}
+  '@babel/plugin-transform-private-property-in-object@7.25.9':
+    resolution: {integrity: sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-property-literals@7.24.1':
-    resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==}
+  '@babel/plugin-transform-property-literals@7.25.9':
+    resolution: {integrity: sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-display-name@7.24.1':
-    resolution: {integrity: sha512-mvoQg2f9p2qlpDQRBC7M3c3XTr0k7cp/0+kFKKO/7Gtu0LSw16eKB+Fabe2bDT/UpsyasTBBkAnbdsLrkD5XMw==}
+  '@babel/plugin-transform-react-display-name@7.25.9':
+    resolution: {integrity: sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-development@7.22.5':
-    resolution: {integrity: sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==}
+  '@babel/plugin-transform-react-jsx-development@7.25.9':
+    resolution: {integrity: sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-self@7.24.1':
-    resolution: {integrity: sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==}
+  '@babel/plugin-transform-react-jsx-self@7.25.9':
+    resolution: {integrity: sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-source@7.24.1':
-    resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==}
+  '@babel/plugin-transform-react-jsx-source@7.25.9':
+    resolution: {integrity: sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.23.4':
-    resolution: {integrity: sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==}
+  '@babel/plugin-transform-react-jsx@7.25.9':
+    resolution: {integrity: sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-pure-annotations@7.24.1':
-    resolution: {integrity: sha512-+pWEAaDJvSm9aFvJNpLiM2+ktl2Sn2U5DdyiWdZBxmLc6+xGt88dvFqsHiAiDS+8WqUwbDfkKz9jRxK3M0k+kA==}
+  '@babel/plugin-transform-react-pure-annotations@7.25.9':
+    resolution: {integrity: sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.24.1':
-    resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==}
+  '@babel/plugin-transform-regenerator@7.25.9':
+    resolution: {integrity: sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-reserved-words@7.24.1':
-    resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==}
+  '@babel/plugin-transform-regexp-modifiers@7.26.0':
+    resolution: {integrity: sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/plugin-transform-reserved-words@7.25.9':
+    resolution: {integrity: sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-runtime@7.24.3':
-    resolution: {integrity: sha512-J0BuRPNlNqlMTRJ72eVptpt9VcInbxO6iP3jaxr+1NPhC0UkKL+6oeX6VXMEYdADnuqmMmsBspt4d5w8Y/TCbQ==}
+  '@babel/plugin-transform-runtime@7.25.9':
+    resolution: {integrity: sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-shorthand-properties@7.24.1':
-    resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==}
+  '@babel/plugin-transform-shorthand-properties@7.25.9':
+    resolution: {integrity: sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-spread@7.24.1':
-    resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==}
+  '@babel/plugin-transform-spread@7.25.9':
+    resolution: {integrity: sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-sticky-regex@7.24.1':
-    resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==}
+  '@babel/plugin-transform-sticky-regex@7.25.9':
+    resolution: {integrity: sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-template-literals@7.24.1':
-    resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==}
+  '@babel/plugin-transform-template-literals@7.25.9':
+    resolution: {integrity: sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typeof-symbol@7.24.1':
-    resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==}
+  '@babel/plugin-transform-typeof-symbol@7.25.9':
+    resolution: {integrity: sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.24.4':
-    resolution: {integrity: sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==}
+  '@babel/plugin-transform-typescript@7.25.9':
+    resolution: {integrity: sha512-7PbZQZP50tzv2KGGnhh82GSyMB01yKY9scIjf1a+GfZCtInOWqUH5+1EBU4t9fyR5Oykkkc9vFTs4OHrhHXljQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-escapes@7.24.1':
-    resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==}
+  '@babel/plugin-transform-unicode-escapes@7.25.9':
+    resolution: {integrity: sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-property-regex@7.24.1':
-    resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==}
+  '@babel/plugin-transform-unicode-property-regex@7.25.9':
+    resolution: {integrity: sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-regex@7.24.1':
-    resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==}
+  '@babel/plugin-transform-unicode-regex@7.25.9':
+    resolution: {integrity: sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-sets-regex@7.24.1':
-    resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==}
+  '@babel/plugin-transform-unicode-sets-regex@7.25.9':
+    resolution: {integrity: sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/preset-env@7.24.4':
-    resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==}
+  '@babel/preset-env@7.26.0':
+    resolution: {integrity: sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/preset-flow@7.24.1':
-    resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==}
+  '@babel/preset-flow@7.25.9':
+    resolution: {integrity: sha512-EASHsAhE+SSlEzJ4bzfusnXSHiU+JfAYzj+jbw2vgQKgq5HrUr8qs+vgtiEL5dOH6sEweI+PNt2D7AqrDSHyqQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -4520,126 +4787,117 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/preset-react@7.24.1':
-    resolution: {integrity: sha512-eFa8up2/8cZXLIpkafhaADTXSnl7IsUFCYenRWrARBz0/qZwcT0RBXpys0LJU4+WfPoF2ZG6ew6s2V6izMCwRA==}
+  '@babel/preset-react@7.25.9':
+    resolution: {integrity: sha512-D3to0uSPiWE7rBrdIICCd0tJSIGpLaaGptna2+w7Pft5xMqLpA1sz99DK5TZ1TjGbdQ/VI1eCSZ06dv3lT4JOw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/preset-typescript@7.24.1':
-    resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==}
+  '@babel/preset-typescript@7.26.0':
+    resolution: {integrity: sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/register@7.23.7':
-    resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==}
+  '@babel/register@7.25.9':
+    resolution: {integrity: sha512-8D43jXtGsYmEeDvm4MWHYUpWf8iiXgWYx3fW7E7Wb7Oe6FWqJPl5K6TuFW0dOwNZzEE5rjlaSJYH9JjrUKJszA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/regjsgen@0.8.0':
-    resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
-
-  '@babel/runtime@7.24.4':
-    resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==}
+  '@babel/runtime@7.26.0':
+    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.24.0':
-    resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
+  '@babel/template@7.25.9':
+    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.24.1':
-    resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==}
+  '@babel/traverse@7.25.9':
+    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.24.0':
-    resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
     engines: {node: '>=6.9.0'}
 
-  '@base2/pretty-print-object@1.0.1':
-    resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==}
-
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  '@changesets/apply-release-plan@6.1.4':
-    resolution: {integrity: sha512-FMpKF1fRlJyCZVYHr3CbinpZZ+6MwvOtWUuO8uo+svcATEoc1zRDcj23pAurJ2TZ/uVz1wFHH6K3NlACy0PLew==}
+  '@changesets/apply-release-plan@7.0.6':
+    resolution: {integrity: sha512-TKhVLtiwtQOgMAC0fCJfmv93faiViKSDqr8oMEqrnNs99gtSC1sZh/aEMS9a+dseU1ESZRCK+ofLgGY7o0fw/Q==}
 
-  '@changesets/assemble-release-plan@5.2.4':
-    resolution: {integrity: sha512-xJkWX+1/CUaOUWTguXEbCDTyWJFECEhmdtbkjhn5GVBGxdP/JwaHBIU9sW3FR6gD07UwZ7ovpiPclQZs+j+mvg==}
+  '@changesets/assemble-release-plan@6.0.5':
+    resolution: {integrity: sha512-IgvBWLNKZd6k4t72MBTBK3nkygi0j3t3zdC1zrfusYo0KpdsvnDjrMM9vPnTCLCMlfNs55jRL4gIMybxa64FCQ==}
 
-  '@changesets/changelog-git@0.1.14':
-    resolution: {integrity: sha512-+vRfnKtXVWsDDxGctOfzJsPhaCdXRYoe+KyWYoq5X/GqoISREiat0l3L8B0a453B2B4dfHGcZaGyowHbp9BSaA==}
+  '@changesets/changelog-git@0.2.0':
+    resolution: {integrity: sha512-bHOx97iFI4OClIT35Lok3sJAwM31VbUM++gnMBV16fdbtBhgYu4dxsphBF/0AZZsyAHMrnM0yFcj5gZM1py6uQ==}
 
-  '@changesets/changelog-github@0.4.6':
-    resolution: {integrity: sha512-ahR/+o3OPodzfG9kucEMU/tEtBgwy6QoJiWi1sDBPme8n3WjT6pBlbhqNYpWAJKilomwfjBGY0MTUTs6r9d1RQ==}
+  '@changesets/changelog-github@0.5.0':
+    resolution: {integrity: sha512-zoeq2LJJVcPJcIotHRJEEA2qCqX0AQIeFE+L21L8sRLPVqDhSXY8ZWAt2sohtBpFZkBwu+LUwMSKRr2lMy3LJA==}
 
-  '@changesets/cli@2.24.1':
-    resolution: {integrity: sha512-7Lz1inqGQjBrXgnXlENtzQ7EmO/9c+09d9oi8XoK4ARqlJe8GpafjqKRobcjcA/TTI7Fn2+cke4CrXFZfVF8Rw==}
+  '@changesets/cli@2.27.10':
+    resolution: {integrity: sha512-PfeXjvs9OfQJV8QSFFHjwHX3QnUL9elPEQ47SgkiwzLgtKGyuikWjrdM+lO9MXzOE22FO9jEGkcs4b+B6D6X0Q==}
     hasBin: true
 
-  '@changesets/config@2.3.1':
-    resolution: {integrity: sha512-PQXaJl82CfIXddUOppj4zWu+987GCw2M+eQcOepxN5s+kvnsZOwjEJO3DH9eVy+OP6Pg/KFEWdsECFEYTtbg6w==}
+  '@changesets/config@3.0.4':
+    resolution: {integrity: sha512-+DiIwtEBpvvv1z30f8bbOsUQGuccnZl9KRKMM/LxUHuDu5oEjmN+bJQ1RIBKNJjfYMQn8RZzoPiX0UgPaLQyXw==}
 
-  '@changesets/errors@0.1.4':
-    resolution: {integrity: sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==}
+  '@changesets/errors@0.2.0':
+    resolution: {integrity: sha512-6BLOQUscTpZeGljvyQXlWOItQyU71kCdGz7Pi8H8zdw6BI0g3m43iL4xKUVPWtG+qrrL9DTjpdn8eYuCQSRpow==}
 
-  '@changesets/get-dependents-graph@1.3.6':
-    resolution: {integrity: sha512-Q/sLgBANmkvUm09GgRsAvEtY3p1/5OCzgBE5vX3vgb5CvW0j7CEljocx5oPXeQSNph6FXulJlXV3Re/v3K3P3Q==}
+  '@changesets/get-dependents-graph@2.1.2':
+    resolution: {integrity: sha512-sgcHRkiBY9i4zWYBwlVyAjEM9sAzs4wYVwJUdnbDLnVG3QwAaia1Mk5P8M7kraTOZN+vBET7n8KyB0YXCbFRLQ==}
 
-  '@changesets/get-github-info@0.5.2':
-    resolution: {integrity: sha512-JppheLu7S114aEs157fOZDjFqUDpm7eHdq5E8SSR0gUBTEK0cNSHsrSR5a66xs0z3RWuo46QvA3vawp8BxDHvg==}
+  '@changesets/get-github-info@0.6.0':
+    resolution: {integrity: sha512-v/TSnFVXI8vzX9/w3DU2Ol+UlTZcu3m0kXTjTT4KlAdwSvwutcByYwyYn9hwerPWfPkT2JfpoX0KgvCEi8Q/SA==}
 
-  '@changesets/get-release-plan@3.0.12':
-    resolution: {integrity: sha512-TlpEdpxV5ZQmNeHoD6KNKAc01wjRrcu9/CQqzmO4qAlX7ARA4pIuAxd8QZ1AQXv/l4qhHox7SUYH3VLHfarv5w==}
+  '@changesets/get-release-plan@4.0.5':
+    resolution: {integrity: sha512-E6wW7JoSMcctdVakut0UB76FrrN3KIeJSXvB+DHMFo99CnC3ZVnNYDCVNClMlqAhYGmLmAj77QfApaI3ca4Fkw==}
 
-  '@changesets/get-version-range-type@0.3.2':
-    resolution: {integrity: sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==}
+  '@changesets/get-version-range-type@0.4.0':
+    resolution: {integrity: sha512-hwawtob9DryoGTpixy1D3ZXbGgJu1Rhr+ySH2PvTLHvkZuQ7sRT4oQwMh0hbqZH1weAooedEjRsbrWcGLCeyVQ==}
 
-  '@changesets/git@1.5.0':
-    resolution: {integrity: sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==}
+  '@changesets/git@3.0.2':
+    resolution: {integrity: sha512-r1/Kju9Y8OxRRdvna+nxpQIsMsRQn9dhhAZt94FLDeu0Hij2hnOozW8iqnHBgvu+KdnJppCveQwK4odwfw/aWQ==}
 
-  '@changesets/git@2.0.0':
-    resolution: {integrity: sha512-enUVEWbiqUTxqSnmesyJGWfzd51PY4H7mH9yUw0hPVpZBJ6tQZFMU3F3mT/t9OJ/GjyiM4770i+sehAn6ymx6A==}
+  '@changesets/logger@0.1.1':
+    resolution: {integrity: sha512-OQtR36ZlnuTxKqoW4Sv6x5YIhOmClRd5pWsjZsddYxpWs517R0HkyiefQPIytCVh4ZcC5x9XaG8KTdd5iRQUfg==}
 
-  '@changesets/logger@0.0.5':
-    resolution: {integrity: sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==}
+  '@changesets/parse@0.4.0':
+    resolution: {integrity: sha512-TS/9KG2CdGXS27S+QxbZXgr8uPsP4yNJYb4BC2/NeFUj80Rni3TeD2qwWmabymxmrLo7JEsytXH1FbpKTbvivw==}
 
-  '@changesets/parse@0.3.16':
-    resolution: {integrity: sha512-127JKNd167ayAuBjUggZBkmDS5fIKsthnr9jr6bdnuUljroiERW7FBTDNnNVyJ4l69PzR57pk6mXQdtJyBCJKg==}
+  '@changesets/pre@2.0.1':
+    resolution: {integrity: sha512-vvBJ/If4jKM4tPz9JdY2kGOgWmCowUYOi5Ycv8dyLnEE8FgpYYUo1mgJZxcdtGGP3aG8rAQulGLyyXGSLkIMTQ==}
 
-  '@changesets/pre@1.0.14':
-    resolution: {integrity: sha512-dTsHmxQWEQekHYHbg+M1mDVYFvegDh9j/kySNuDKdylwfMEevTeDouR7IfHNyVodxZXu17sXoJuf2D0vi55FHQ==}
+  '@changesets/read@0.6.2':
+    resolution: {integrity: sha512-wjfQpJvryY3zD61p8jR87mJdyx2FIhEcdXhKUqkja87toMrP/3jtg/Yg29upN+N4Ckf525/uvV7a4tzBlpk6gg==}
 
-  '@changesets/read@0.5.9':
-    resolution: {integrity: sha512-T8BJ6JS6j1gfO1HFq50kU3qawYxa4NTbI/ASNVVCBTsKquy2HYwM9r7ZnzkiMe8IEObAJtUVGSrePCOxAK2haQ==}
+  '@changesets/should-skip-package@0.1.1':
+    resolution: {integrity: sha512-H9LjLbF6mMHLtJIc/eHR9Na+MifJ3VxtgP/Y+XLn4BF7tDTEN1HNYtH6QMcjP1uxp9sjaFYmW8xqloaCi/ckTg==}
 
   '@changesets/types@4.1.0':
     resolution: {integrity: sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==}
 
-  '@changesets/types@5.1.0':
-    resolution: {integrity: sha512-uUByGATZCdaPkaO9JkBsgGDjEvHyY2Sb0e/J23+cwxBi5h0fxpLF/HObggO/Fw8T2nxK6zDfJbPsdQt5RwYFJA==}
-
-  '@changesets/types@5.2.1':
-    resolution: {integrity: sha512-myLfHbVOqaq9UtUKqR/nZA/OY7xFjQMdfgfqeZIBK4d0hA6pgxArvdv8M+6NUzzBsjWLOtvApv8YHr4qM+Kpfg==}
+  '@changesets/types@6.0.0':
+    resolution: {integrity: sha512-b1UkfNulgKoWfqyHtzKS5fOZYSJO+77adgL7DLRDr+/7jhChN+QcHnbjiQVOz/U+Ts3PGNySq7diAItzDgugfQ==}
 
-  '@changesets/write@0.1.9':
-    resolution: {integrity: sha512-E90ZrsrfJVOOQaP3Mm5Xd7uDwBAqq3z5paVEavTHKA8wxi7NAL8CmjgbGxSFuiP7ubnJA2BuHlrdE4z86voGOg==}
+  '@changesets/write@0.3.2':
+    resolution: {integrity: sha512-kDxDrPNpUgsjDbWBvUo27PzKX4gqeKOlhibaOXDJA6kuBisGqNHv/HwGJrAu8U/dSf8ZEFIeHIPtvSlZI1kULw==}
 
-  '@codemirror/autocomplete@6.16.0':
-    resolution: {integrity: sha512-P/LeCTtZHRTCU4xQsa89vSKWecYv1ZqwzOd5topheGRf+qtacFgBeIMQi3eL8Kt/BUNvxUWkx+5qP2jlGoARrg==}
+  '@codemirror/autocomplete@6.18.3':
+    resolution: {integrity: sha512-1dNIOmiM0z4BIBwxmxEfA1yoxh1MF/6KPBbh20a5vphGV0ictKlgQsbJs6D6SkR6iJpGbpwRsa6PFMNlg9T9pQ==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
 
-  '@codemirror/commands@6.3.3':
-    resolution: {integrity: sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==}
+  '@codemirror/commands@6.7.1':
+    resolution: {integrity: sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==}
 
-  '@codemirror/lang-css@6.2.1':
-    resolution: {integrity: sha512-/UNWDNV5Viwi/1lpr/dIXJNWiwDxpw13I4pTUAsNxZdg6E0mI2kTQb0P2iHczg1Tu+H4EBgJR+hYhKiHKko7qg==}
+  '@codemirror/lang-css@6.3.0':
+    resolution: {integrity: sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==}
 
   '@codemirror/lang-html@6.4.9':
     resolution: {integrity: sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==}
@@ -4647,29 +4905,29 @@ packages:
   '@codemirror/lang-javascript@6.2.2':
     resolution: {integrity: sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==}
 
-  '@codemirror/language@6.10.1':
-    resolution: {integrity: sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==}
+  '@codemirror/language@6.10.3':
+    resolution: {integrity: sha512-kDqEU5sCP55Oabl6E7m5N+vZRoc0iWqgDVhEKifcHzPzjqCegcO4amfrYVL9PmPZpl4G0yjkpTpUO/Ui8CzO8A==}
 
-  '@codemirror/lint@6.5.0':
-    resolution: {integrity: sha512-+5YyicIaaAZKU8K43IQi8TBy6mF6giGeWAH7N96Z5LC30Wm5JMjqxOYIE9mxwMG1NbhT2mA3l9hA4uuKUM3E5g==}
+  '@codemirror/lint@6.8.3':
+    resolution: {integrity: sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==}
 
   '@codemirror/state@6.4.1':
     resolution: {integrity: sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==}
 
-  '@codemirror/view@6.26.3':
-    resolution: {integrity: sha512-gmqxkPALZjkgSxIeeweY/wGQXBfwTUaLs8h7OKtSwfbj9Ct3L11lD+u1sS7XHppxFQoMDiMDp07P9f3I2jWOHw==}
+  '@codemirror/view@6.35.0':
+    resolution: {integrity: sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==}
 
   '@codesandbox/nodebox@0.1.8':
     resolution: {integrity: sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==}
 
-  '@codesandbox/sandpack-client@2.13.8':
-    resolution: {integrity: sha512-IjVlqfVK0fascNyUVH9hs5UZBx4KhKtyZyDrxdiDyQBtLmgESNaFWelAf4a/PX4gJp+H+WW6/iC6KzR7XtK//w==}
+  '@codesandbox/sandpack-client@2.19.8':
+    resolution: {integrity: sha512-CMV4nr1zgKzVpx4I3FYvGRM5YT0VaQhALMW9vy4wZRhEyWAtJITQIqZzrTGWqB1JvV7V72dVEUCUPLfYz5hgJQ==}
 
-  '@codesandbox/sandpack-react@2.13.8':
-    resolution: {integrity: sha512-+/OnUyrNidSzDDiek7drf8UUTJJl4Cd05dCG3BK51OBKoBCieRmsaUlIM3CU2nFDVAgvcSp9Cmu2CXQmwuJ58w==}
+  '@codesandbox/sandpack-react@2.19.9':
+    resolution: {integrity: sha512-a5uXWYdg5Wtz6VHwXIegdS7C63foCofFa/eHO9crtPp1Yf5/npKimds0S3kKJL7jpOmMAascEvAOqOy5S9e6qQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
@@ -4744,16 +5002,16 @@ packages:
     resolution: {integrity: sha512-PXDQXkAmiMEG162Bqdh9ChML/GJZo6vU+7F03ALKDK8zYc6SuAr47LjG7hGYRqUOz+WK0dU7bQ0xzuqFMdxzeQ==}
     engines: {node: '>=v14'}
 
-  '@contentlayer/cli@0.3.4':
-    resolution: {integrity: sha512-vNDwgLuhYNu+m70NZ3XK9kexKNguuxPXg7Yvzj3B34cEilQjjzSrcTY/i+AIQm9V7uT5GGshx9ukzPf+SmoszQ==}
+  '@contentlayer2/cli@0.5.3':
+    resolution: {integrity: sha512-8xO+piFSNVq5Ad2P3D30nM0BzQh1qQ0Q4kIx2otlLhYe3tdeuf3TCB3nFZTgfOJESnZABxqy6XTcfpmeAfNd/Q==}
 
-  '@contentlayer/client@0.3.4':
-    resolution: {integrity: sha512-QSlLyc3y4PtdC5lFw0L4wTZUH8BQnv2nk37hNCsPAqGf+dRO7TLAzdc+2/mVIRgK+vSH+pSOzjLsQpFxxXRTZA==}
+  '@contentlayer2/client@0.5.3':
+    resolution: {integrity: sha512-ZlrPpNhK+jNF00f20G6MIlELiEnVjUPuyjXeRHNsq582DzqcdgE/Etqa5O5zJ9/w3fhvyj5N1h7fP0MLFoswPw==}
 
-  '@contentlayer/core@0.3.4':
-    resolution: {integrity: sha512-o68oBLwfYZ+2vtgfk1lgHxOl3LoxvRNiUfeQ8IWFWy/L4wnIkKIqLZX01zlRE5IzYM+ZMMN5V0cKQlO7DsyR9g==}
+  '@contentlayer2/core@0.5.3':
+    resolution: {integrity: sha512-qGDryuO+6Uw0U8JZ9cdrxzieEJkkwuTuT+soycnYFShuvqofb+wkpktnsaTn4wUXLd5ut/ngPrH/9w/IbOlF2w==}
     peerDependencies:
-      esbuild: 0.17.x || 0.18.x
+      esbuild: '>=0.17'
       markdown-wasm: 1.x
     peerDependenciesMeta:
       esbuild:
@@ -4761,14 +5019,14 @@ packages:
       markdown-wasm:
         optional: true
 
-  '@contentlayer/source-files@0.3.4':
-    resolution: {integrity: sha512-4njyn0OFPu7WY4tAjMxiJgWOKeiHuBOGdQ36EYE03iij/pPPRbiWbL+cmLccYXUFEW58mDwpqROZZm6pnxjRDQ==}
+  '@contentlayer2/source-files@0.5.3':
+    resolution: {integrity: sha512-kESg2zAJKDQio5rCILpFPhsWklX5xmMdlJa9KSj5UdXMd7/gY+q0GiVqZ2PAmZi5+hG73pVihg9ieC2TEjLSIQ==}
 
-  '@contentlayer/source-remote-files@0.3.4':
-    resolution: {integrity: sha512-cyiv4sNUySZvR0uAKlM+kSAELzNd2h2QT1R2e41dRKbwOUVxeLfmGiLugr0aVac6Q3xYcD99dbHyR1xWPV+w9w==}
+  '@contentlayer2/source-remote-files@0.5.3':
+    resolution: {integrity: sha512-0dxoLfS7EbVR3Xap4MPSmzLvQCGrMwtXVIA4ZmRHLOGzG+vWpaY9BtnCACb/Om4tUQBsCA9oduBjNqRu4Sx+gQ==}
 
-  '@contentlayer/utils@0.3.4':
-    resolution: {integrity: sha512-ZWWOhbUWYQ2QHoLIlcUnEo7X4ZbwcyFPuzVQWWMkK43BxCveyQtZwBIzfyx54sqVzi0GUmKP8bHzsLQT0QxaLQ==}
+  '@contentlayer2/utils@0.5.3':
+    resolution: {integrity: sha512-2nTFhZ7xnOevoZQnGP6BSIkTCpNos1PkGJ894gMYSmRMaMkyv+9VE9adoa0sywIA1y01iLU8niqcxJiuCQ1OkQ==}
     peerDependencies:
       '@effect-ts/otel-node': '*'
     peerDependenciesMeta:
@@ -4796,23 +5054,14 @@ packages:
   '@effect-ts/core@0.60.5':
     resolution: {integrity: sha512-qi1WrtJA90XLMnj2hnUszW9Sx4dXP03ZJtCc5DiUBIOhF4Vw7plfb65/bdBySPoC9s7zy995TdUX1XBSxUkl5w==}
 
-  '@effect-ts/otel-exporter-trace-otlp-grpc@0.15.1':
-    resolution: {integrity: sha512-47gAg0O2pW5Jlo86jfzjdkwL5a7Bzb+Kj5WTmdu4CxYRfWn9ytKjuuYIfsNDW8neuhdKzn+P5wCddgEh0glYyQ==}
+  '@effect-ts/otel-sdk-trace-node@0.15.1':
+    resolution: {integrity: sha512-a2sF0ylmn8xOJs8fNeT/spJ1gUcsksAJCALxo9WOfuTCMtTwMVtVhCKEPEeQoL7wFqU+JgPkVdP91+FJ/Rkeow==}
     peerDependencies:
       '@effect-ts/core': ^0.60.2
       '@opentelemetry/api': ^1.4.0
       '@opentelemetry/core': ^1.13.0
-      '@opentelemetry/exporter-trace-otlp-grpc': ^0.39.0
       '@opentelemetry/sdk-trace-base': ^1.13.0
-
-  '@effect-ts/otel-sdk-trace-node@0.15.1':
-    resolution: {integrity: sha512-a2sF0ylmn8xOJs8fNeT/spJ1gUcsksAJCALxo9WOfuTCMtTwMVtVhCKEPEeQoL7wFqU+JgPkVdP91+FJ/Rkeow==}
-    peerDependencies:
-      '@effect-ts/core': ^0.60.2
-      '@opentelemetry/api': ^1.4.0
-      '@opentelemetry/core': ^1.13.0
-      '@opentelemetry/sdk-trace-base': ^1.13.0
-      '@opentelemetry/sdk-trace-node': ^1.13.0
+      '@opentelemetry/sdk-trace-node': ^1.13.0
 
   '@effect-ts/otel@0.15.1':
     resolution: {integrity: sha512-AmZJHl7t0+Peh7Yb2+hqn6r9+rd9/UfeA4AMV9h0YGTdOyouyFfD3wzWlxnAUzAQ4Lrod4kC7Noruret4EpqpA==}
@@ -4825,30 +5074,22 @@ packages:
   '@effect-ts/system@0.57.5':
     resolution: {integrity: sha512-/crHGujo0xnuHIYNc1VgP0HGJGFSoSqq88JFXe6FmFyXPpWt8Xu39LyLg7rchsxfXFeEdA9CrIZvLV5eswXV5g==}
 
-  '@emnapi/core@1.1.1':
-    resolution: {integrity: sha512-eu4KjHfXg3I+UUR7vSuwZXpRo4c8h4Rtb5Lu2F7Z4JqJFl/eidquONEBiRs6viXKpWBC3BaJBy68xGJ2j56idw==}
-
-  '@emnapi/runtime@1.1.1':
-    resolution: {integrity: sha512-3bfqkzuR1KLx57nZfjr2NLnFOobvyS0aTszaEGCGqmYMVDRaGvgIZbjGSV/MHSSmLgQ/b9JFHQ5xm5WRZYd+XQ==}
+  '@emnapi/runtime@1.3.1':
+    resolution: {integrity: sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==}
 
-  '@emotion/is-prop-valid@0.8.8':
-    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+  '@emotion/is-prop-valid@1.3.1':
+    resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
 
-  '@emotion/memoize@0.7.4':
-    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1':
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: ^18.2.0
-
-  '@esbuild-plugins/node-resolve@0.1.4':
-    resolution: {integrity: sha512-haFQ0qhxEpqtWWY0kx1Y5oE3sMyO1PcoSiWEPrAw6tm/ZOOLXjSs6Q+v1v9eyuVF0nNt50YEvrcrvENmyoMv5g==}
+  '@esbuild-plugins/node-resolve@0.2.2':
+    resolution: {integrity: sha512-+t5FdX3ATQlb53UFDBRb4nqjYBz492bIrnVWvpQHpzZlu9BQL5HasMZhqc409ygUwOWCXZhrWr6NyZ6T6Y+cxw==}
     peerDependencies:
       esbuild: '*'
 
-  '@esbuild/aix-ppc64@0.20.2':
-    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
+  '@esbuild/aix-ppc64@0.21.5':
+    resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
@@ -4859,8 +5100,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm64@0.20.2':
-    resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
+  '@esbuild/android-arm64@0.21.5':
+    resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
@@ -4877,8 +5118,8 @@ packages:
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-arm@0.20.2':
-    resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
+  '@esbuild/android-arm@0.21.5':
+    resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
@@ -4889,8 +5130,8 @@ packages:
     cpu: [x64]
     os: [android]
 
-  '@esbuild/android-x64@0.20.2':
-    resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
+  '@esbuild/android-x64@0.21.5':
+    resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
@@ -4901,8 +5142,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-arm64@0.20.2':
-    resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
+  '@esbuild/darwin-arm64@0.21.5':
+    resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
@@ -4913,8 +5154,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.20.2':
-    resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
+  '@esbuild/darwin-x64@0.21.5':
+    resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
@@ -4925,8 +5166,8 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-arm64@0.20.2':
-    resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
+  '@esbuild/freebsd-arm64@0.21.5':
+    resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
@@ -4937,8 +5178,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.20.2':
-    resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
+  '@esbuild/freebsd-x64@0.21.5':
+    resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
@@ -4949,8 +5190,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm64@0.20.2':
-    resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
+  '@esbuild/linux-arm64@0.21.5':
+    resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
@@ -4961,8 +5202,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-arm@0.20.2':
-    resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
+  '@esbuild/linux-arm@0.21.5':
+    resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
@@ -4973,8 +5214,8 @@ packages:
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.20.2':
-    resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
+  '@esbuild/linux-ia32@0.21.5':
+    resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
@@ -4991,8 +5232,8 @@ packages:
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.20.2':
-    resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
+  '@esbuild/linux-loong64@0.21.5':
+    resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
@@ -5003,8 +5244,8 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.20.2':
-    resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
+  '@esbuild/linux-mips64el@0.21.5':
+    resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
@@ -5015,8 +5256,8 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.20.2':
-    resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
+  '@esbuild/linux-ppc64@0.21.5':
+    resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
@@ -5027,8 +5268,8 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.20.2':
-    resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
+  '@esbuild/linux-riscv64@0.21.5':
+    resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
@@ -5039,8 +5280,8 @@ packages:
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.20.2':
-    resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
+  '@esbuild/linux-s390x@0.21.5':
+    resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
@@ -5051,8 +5292,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/linux-x64@0.20.2':
-    resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
+  '@esbuild/linux-x64@0.21.5':
+    resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
@@ -5063,8 +5304,8 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.20.2':
-    resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
+  '@esbuild/netbsd-x64@0.21.5':
+    resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
@@ -5075,8 +5316,8 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.20.2':
-    resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
+  '@esbuild/openbsd-x64@0.21.5':
+    resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
@@ -5087,8 +5328,8 @@ packages:
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/sunos-x64@0.20.2':
-    resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
+  '@esbuild/sunos-x64@0.21.5':
+    resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
@@ -5099,8 +5340,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-arm64@0.20.2':
-    resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
+  '@esbuild/win32-arm64@0.21.5':
+    resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
@@ -5111,8 +5352,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.20.2':
-    resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
+  '@esbuild/win32-ia32@0.21.5':
+    resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
@@ -5123,20 +5364,20 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@esbuild/win32-x64@0.20.2':
-    resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
+  '@esbuild/win32-x64@0.21.5':
+    resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.4.0':
-    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
+  '@eslint-community/eslint-utils@4.4.1':
+    resolution: {integrity: sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.10.0':
-    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   '@eslint/eslintrc@0.4.3':
@@ -5146,45 +5387,30 @@ packages:
   '@fal-works/esbuild-plugin-global-externals@2.1.2':
     resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
 
-  '@floating-ui/core@1.6.0':
-    resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
-
-  '@floating-ui/dom@1.6.3':
-    resolution: {integrity: sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==}
-
-  '@floating-ui/react-dom@2.0.8':
-    resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
-  '@floating-ui/utils@0.2.1':
-    resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
+  '@formatjs/ecma402-abstract@2.2.4':
+    resolution: {integrity: sha512-lFyiQDVvSbQOpU+WFd//ILolGj4UgA/qXrKeZxdV14uKiAUiPAtX6XAn7WBCRi7Mx6I7EybM9E5yYn4BIpZWYg==}
 
-  '@formatjs/ecma402-abstract@1.18.2':
-    resolution: {integrity: sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==}
+  '@formatjs/fast-memoize@2.2.3':
+    resolution: {integrity: sha512-3jeJ+HyOfu8osl3GNSL4vVHUuWFXR03Iz9jjgI7RwjG6ysu/Ymdr0JRCPHfF5yGbTE6JCrd63EpvX1/WybYRbA==}
 
-  '@formatjs/fast-memoize@2.2.0':
-    resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
+  '@formatjs/icu-messageformat-parser@2.9.4':
+    resolution: {integrity: sha512-Tbvp5a9IWuxUcpWNIW6GlMQYEc4rwNHR259uUFoKWNN1jM9obf9Ul0e+7r7MvFOBNcN+13K7NuKCKqQiAn1QEg==}
 
-  '@formatjs/icu-messageformat-parser@2.7.6':
-    resolution: {integrity: sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==}
+  '@formatjs/icu-skeleton-parser@1.8.8':
+    resolution: {integrity: sha512-vHwK3piXwamFcx5YQdCdJxUQ1WdTl6ANclt5xba5zLGDv5Bsur7qz8AD7BevaKxITwpgDeU0u8My3AIibW9ywA==}
 
-  '@formatjs/icu-skeleton-parser@1.8.0':
-    resolution: {integrity: sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==}
-
-  '@formatjs/intl-localematcher@0.5.4':
-    resolution: {integrity: sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==}
+  '@formatjs/intl-localematcher@0.5.8':
+    resolution: {integrity: sha512-I+WDNWWJFZie+jkfkiK5Mp4hEDyRSEvmyfYadflOno/mmKJKcB17fEpEH0oJu/OWhhCJ8kJBDz2YMd/6cDl7Mg==}
 
   '@gar/promisify@1.1.3':
     resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
 
-  '@grpc/grpc-js@1.10.6':
-    resolution: {integrity: sha512-xP58G7wDQ4TCmN/cMUHh00DS7SRDv/+lC+xFLrTkMIN8h55X5NhZMLYbvy7dSELP15qlI6hPhNCRWVMtZMwqLA==}
+  '@grpc/grpc-js@1.12.2':
+    resolution: {integrity: sha512-bgxdZmgTrJZX50OjyVwz3+mNEnCTNkh3cIqGPWVNeW9jX6bn1ZkU80uPd+67/ZpIJIjRQ9qaHCjhavyoWYxumg==}
     engines: {node: '>=12.10.0'}
 
-  '@grpc/proto-loader@0.7.12':
-    resolution: {integrity: sha512-DCVwMxqYzpUCiDMl7hQ384FqP4T3DbNpXU8pt681l3UWCip1WUiD5JrkImUwCB9a7f2cq4CUTmi5r/xIMRPY1Q==}
+  '@grpc/proto-loader@0.7.13':
+    resolution: {integrity: sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==}
     engines: {node: '>=6'}
     hasBin: true
 
@@ -5206,25 +5432,130 @@ packages:
   '@iconify/icons-solar@1.2.3':
     resolution: {integrity: sha512-dots93IzoaOrJ8aUD2YGZ4+Jy+yf5D87CmzSeBkEi/m+WX1klvHqWuw5kyZvVroLOlaIaJXb5nZVaDnhc8XJyQ==}
 
-  '@iconify/react@4.1.1':
-    resolution: {integrity: sha512-jed14EjvKjee8mc0eoscGxlg7mSQRkwQG3iX3cPBCO7UlOjz0DtlvTqxqEcHUJGh+z1VJ31Yhu5B9PxfO0zbdg==}
+  '@iconify/react@5.0.2':
+    resolution: {integrity: sha512-wtmstbYlEbo4NDxFxBJkhkf9gJBDqMGr7FaqLrAUMneRV3Z+fVHLJjOhWbkAF8xDQNFC/wcTYdrWo1lnRhmagQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@internationalized/date@3.5.4':
-    resolution: {integrity: sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==}
+  '@img/sharp-darwin-arm64@0.33.5':
+    resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-darwin-x64@0.33.5':
+    resolution: {integrity: sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    resolution: {integrity: sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    resolution: {integrity: sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linux-arm64@0.33.5':
+    resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linux-arm@0.33.5':
+    resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@img/sharp-linux-s390x@0.33.5':
+    resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@img/sharp-linux-x64@0.33.5':
+    resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@img/sharp-wasm32@0.33.5':
+    resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [wasm32]
+
+  '@img/sharp-win32-ia32@0.33.5':
+    resolution: {integrity: sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@img/sharp-win32-x64@0.33.5':
+    resolution: {integrity: sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@internationalized/date@3.5.6':
+    resolution: {integrity: sha512-jLxQjefH9VI5P9UQuqB6qNKnvFt1Ky1TPIzHGsIlCi7sZZoMR8SdYbBGRvM0y+Jtb+ez4ieBzmiAUcpmPYpyOw==}
 
-  '@internationalized/message@3.1.4':
-    resolution: {integrity: sha512-Dygi9hH1s7V9nha07pggCkvmRfDd3q2lWnMGvrJyrOwYMe1yj4D2T9BoH9I6MGR7xz0biQrtLPsqUkqXzIrBOw==}
+  '@internationalized/message@3.1.5':
+    resolution: {integrity: sha512-hjEpLKFlYA3m5apldLqzHqw531qqfOEq0HlTWdfyZmcloWiUbWsYXD6YTiUmQmOtarthzhdjCAwMVrB8a4E7uA==}
 
-  '@internationalized/number@3.5.3':
-    resolution: {integrity: sha512-rd1wA3ebzlp0Mehj5YTuTI50AQEx80gWFyHcQu+u91/5NgdwBecO8BH6ipPfE+lmQ9d63vpB3H9SHoIUiupllw==}
+  '@internationalized/number@3.5.4':
+    resolution: {integrity: sha512-h9huwWjNqYyE2FXZZewWqmCdkw1HeFds5q4Siuoms3hUQC5iPJK3aBmkFZoDSLN4UD0Bl8G22L/NdHpeOr+/7A==}
 
-  '@internationalized/string@3.2.3':
-    resolution: {integrity: sha512-9kpfLoA8HegiWTeCbR2livhdVeKobCnVv8tlJ6M2jF+4tcMqDo94ezwlnrUANBWPgd8U7OXIHCk2Ov2qhk4KXw==}
+  '@internationalized/string@3.2.4':
+    resolution: {integrity: sha512-BcyadXPn89Ae190QGZGDUZPqxLj/xsP4U1Br1oSy8yfIjmpJ8cJtGYleaodqW/EmzFjwELtwDojLkf3FhV6SjA==}
 
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -5238,13 +5569,13 @@ packages:
     resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
     engines: {node: '>=8'}
 
-  '@jest/console@28.1.3':
-    resolution: {integrity: sha512-QPAkP5EwKdK/bxIr6C1I4Vs0rm2nHiANzj/Z5X2JQkrZo6IqvC4ldZ9K95tF0HdidhA8Bo6egxSzUFPYKcEXLw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/console@29.7.0':
+    resolution: {integrity: sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/core@28.1.3':
-    resolution: {integrity: sha512-CIKBrlaKOzA7YG19BEqCw3SLIsEwjZkeJzf5bdooVnW4bH5cktqe3JX+G2YV1aK5vP8N9na1IGWFzYaTp6k6NA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/core@29.7.0':
+    resolution: {integrity: sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
     peerDependenciesMeta:
@@ -5255,67 +5586,55 @@ packages:
     resolution: {integrity: sha512-4QqS3LY5PBmTRHj9sAg1HLoPzqAI0uOX6wI/TRqHIcOxlFidy6YEmCQJk6FSZjNLGCeubDMfmkWL+qaLKhSGQA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/environment@28.1.3':
-    resolution: {integrity: sha512-1bf40cMFTEkKyEf585R9Iz1WayDjHoHqvts0XFYEqyKM3cFWDpeMoqKKTAF9LSYQModPUlh8FKptoM2YcMWAXA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/environment@29.7.0':
+    resolution: {integrity: sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/expect-utils@28.1.3':
-    resolution: {integrity: sha512-wvbi9LUrHJLn3NlDW6wF2hvIMtd4JUl2QNVrjq+IBSHirgfrR3o9RnVtxzdEGO2n9JyIWwHnLfby5KzqBGg2YA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/expect-utils@29.7.0':
+    resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/expect@28.1.3':
-    resolution: {integrity: sha512-lzc8CpUbSoE4dqT0U+g1qODQjBRHPpCPXissXD4mS9+sWQdmmpeJ9zSH1rS1HEkrsMN0fb7nKrJ9giAR1d3wBw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/expect@29.7.0':
+    resolution: {integrity: sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/fake-timers@28.1.3':
-    resolution: {integrity: sha512-D/wOkL2POHv52h+ok5Oj/1gOG9HSywdoPtFsRCUmlCILXNn5eIWmcnd3DIiWlJnpGvQtmajqBP95Ei0EimxfLw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/fake-timers@29.7.0':
+    resolution: {integrity: sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/globals@28.1.3':
-    resolution: {integrity: sha512-XFU4P4phyryCXu1pbcqMO0GSQcYe1IsalYCDzRNyhetyeyxMcIxa11qPNDpVNLeretItNqEmYYQn1UYz/5x1NA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/globals@29.7.0':
+    resolution: {integrity: sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/reporters@28.1.3':
-    resolution: {integrity: sha512-JuAy7wkxQZVNU/V6g9xKzCGC5LVXx9FDcABKsSXp5MiKPEE2144a/vXTEDoyzjUpZKfVwp08Wqg5A4WfTMAzjg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/reporters@29.7.0':
+    resolution: {integrity: sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
     peerDependenciesMeta:
       node-notifier:
         optional: true
 
-  '@jest/schemas@28.1.3':
-    resolution: {integrity: sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.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}
 
-  '@jest/source-map@28.1.2':
-    resolution: {integrity: sha512-cV8Lx3BeStJb8ipPHnqVw/IM2VCMWO3crWZzYodSIkxXnRcXJipCdx1JCK0K5MsJJouZQTH73mzf4vgxRaH9ww==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
-  '@jest/test-result@28.1.3':
-    resolution: {integrity: sha512-kZAkxnSE+FqE8YjW8gNuoVkkC9I7S1qmenl8sGcDOLropASP+BkcGKwhXoyqQuGOGeYY0y/ixjrd/iERpEXHNg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/source-map@29.6.3':
+    resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/test-sequencer@28.1.3':
-    resolution: {integrity: sha512-NIMPEqqa59MWnDi1kvXXpYbqsfQmSJsIbnd85mdVGkiDfQ9WQQTXOLsvISUfonmnBT+w85WEgneCigEEdHDFxw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/test-result@29.7.0':
+    resolution: {integrity: sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/transform@28.1.3':
-    resolution: {integrity: sha512-u5dT5di+oFI6hfcLOHGTAfmUxFRrjK+vnaP0kkVow9Md/M7V/MxqQMOz/VV25UZO8pzeA9PjfTpOu6BDuwSPQA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  '@jest/test-sequencer@29.7.0':
+    resolution: {integrity: sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   '@jest/transform@29.7.0':
     resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  '@jest/types@28.1.3':
-    resolution: {integrity: sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
   '@jest/types@29.6.3':
     resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5344,8 +5663,8 @@ packages:
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
-  '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
@@ -5360,26 +5679,41 @@ packages:
     resolution: {integrity: sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==}
     engines: {node: '>=12'}
 
-  '@juggle/resize-observer@3.4.0':
-    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+  '@jsonjoy.com/base64@1.1.2':
+    resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/json-pack@1.1.0':
+    resolution: {integrity: sha512-zlQONA+msXPPwHWZMKFVS78ewFczIll5lXiVPwFPCZUsrOKdxc2AvxU1HoNBmMRhqDZUR9HkC3UOm+6pME6Xsg==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
+  '@jsonjoy.com/util@1.5.0':
+    resolution: {integrity: sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
 
-  '@lezer/common@1.2.1':
-    resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
+  '@lezer/common@1.2.3':
+    resolution: {integrity: sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA==}
 
-  '@lezer/css@1.1.8':
-    resolution: {integrity: sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==}
+  '@lezer/css@1.1.9':
+    resolution: {integrity: sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==}
 
-  '@lezer/highlight@1.2.0':
-    resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
 
-  '@lezer/html@1.3.9':
-    resolution: {integrity: sha512-MXxeCMPyrcemSLGaTQEZx0dBUH0i+RPl8RN5GwMAzo53nTsd/Unc/t5ZxACeQoyPUM5/GkPLRUs2WliOImzkRA==}
+  '@lezer/html@1.3.10':
+    resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
 
-  '@lezer/javascript@1.4.14':
-    resolution: {integrity: sha512-GEdUyspTRgc5dwIGebUk+f3BekvqEWVIYsIuAC3pA8e8wcikGwBZRWRa450L0s8noGWuULwnmi4yjxTnYz9PpA==}
+  '@lezer/javascript@1.4.19':
+    resolution: {integrity: sha512-j44kbR1QL26l6dMunZ1uhKBFteVGLVCBGNUD2sUaMnic+rbTviVuoK0CD1l9FTW31EueWvFFswCKMH7Z+M3JRA==}
 
-  '@lezer/lr@1.4.0':
-    resolution: {integrity: sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==}
+  '@lezer/lr@1.4.2':
+    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
 
   '@lmdb/lmdb-darwin-arm64@2.8.5':
     resolution: {integrity: sha512-KPDeVScZgA1oq0CiPBcOa3kHIqU+pTOwRFDIhxvmf8CTNvqdZQYp5cCKW0bUk69VygB2PuTiINFWbY78aR2pQw==}
@@ -5421,121 +5755,116 @@ packages:
     resolution: {integrity: sha512-/0Ev/PB4fXdKPT6VDzVpnAPxGpWFIc4Yz3mf/DzLEMxlpIPZpZlCzaFk4V4NGFofQXPc41+GpEcZtWP3VuFWVA==}
     engines: {node: '>=10'}
 
-  '@mdx-js/esbuild@2.3.0':
-    resolution: {integrity: sha512-r/vsqsM0E+U4Wr0DK+0EfmABE/eg+8ITW4DjvYdh3ve/tK2safaqHArNnaqbOk1DjYGrhxtoXoGaM3BY8fGBTA==}
+  '@mdx-js/esbuild@3.1.0':
+    resolution: {integrity: sha512-Jk42xUb1SEJxh6n2GBAtJjQISFIZccjz8XVEsHVhrlvZJAJziIxR9KyaFF6nTeTB/jCAFQGDgO7+oMRH/ApRsg==}
     peerDependencies:
-      esbuild: '>=0.11.0'
+      esbuild: '>=0.14.0'
 
-  '@mdx-js/mdx@2.3.0':
-    resolution: {integrity: sha512-jLuwRlz8DQfQNiUCJR50Y09CGPq3fLtmtUQfVrj79E0JWu3dvsVcxVIcfhR5h0iXu+/z++zDrYeiJqifRynJkA==}
+  '@mdx-js/mdx@3.1.0':
+    resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
-  '@mdx-js/react@2.3.0':
-    resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==}
+  '@mdx-js/react@3.1.0':
+    resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
     peerDependencies:
-      react: ^18.2.0
+      '@types/react': '>=16'
+      react: 18.2.0
 
   '@mischnic/json-sourcemap@0.1.1':
     resolution: {integrity: sha512-iA7+tyVqfrATAIsIRWQG+a7ZLLD0VaOCKV2Wd/v4mqIU3J9c4jx9p7S0nw1XH3gJCKNBOOwACOPYYSUu9pgT+w==}
     engines: {node: '>=12.0.0'}
 
-  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2':
-    resolution: {integrity: sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==}
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
+    resolution: {integrity: sha512-QZHtlVgbAdy2zAqNA9Gu1UpIuI8Xvsd1v8ic6B2pZmeFnFcMWiPLfWXh7TVw4eGEZ/C9TH281KwhVoeQUKbyjw==}
     cpu: [arm64]
     os: [darwin]
 
-  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2':
-    resolution: {integrity: sha512-lwriRAHm1Yg4iDf23Oxm9n/t5Zpw1lVnxYU3HnJPTi2lJRkKTrps1KVgvL6m7WvmhYVt/FIsssWay+k45QHeuw==}
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
+    resolution: {integrity: sha512-mdzd3AVzYKuUmiWOQ8GNhl64/IoFGol569zNRdkLReh6LRLHOXxU4U8eq0JwaD8iFHdVGqSy4IjFL4reoWCDFw==}
     cpu: [x64]
     os: [darwin]
 
-  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2':
-    resolution: {integrity: sha512-FU20Bo66/f7He9Fp9sP2zaJ1Q8L9uLPZQDub/WlUip78JlPeMbVL8546HbZfcW9LNciEXc8d+tThSJjSC+tmsg==}
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
+    resolution: {integrity: sha512-YxQL+ax0XqBJDZiKimS2XQaf+2wDGVa1enVRGzEvLLVFeqa5kx2bWbtcSXgsxjQB7nRqqIGFIcLteF/sHeVtQg==}
     cpu: [arm64]
     os: [linux]
 
-  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2':
-    resolution: {integrity: sha512-MOI9Dlfrpi2Cuc7i5dXdxPbFIgbDBGgKR5F2yWEa6FVEtSWncfVNKW5AKjImAQ6CZlBK9tympdsZJ2xThBiWWA==}
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
+    resolution: {integrity: sha512-fg0uy/dG/nZEXfYilKoRe7yALaNmHoYeIoJuJ7KJ+YyU2bvY8vPv27f7UKhGRpY6euFYqEVhxCFZgAUNQBM3nw==}
     cpu: [arm]
     os: [linux]
 
-  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2':
-    resolution: {integrity: sha512-gsWNDCklNy7Ajk0vBBf9jEx04RUxuDQfBse918Ww+Qb9HCPoGzS+XJTLe96iN3BVK7grnLiYghP/M4L8VsaHeA==}
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
+    resolution: {integrity: sha512-cvwNfbP07pKUfq1uH+S6KJ7dT9K8WOE4ZiAcsrSes+UY55E/0jLYc+vq+DO7jlmqRb5zAggExKm0H7O/CBaesg==}
     cpu: [x64]
     os: [linux]
 
-  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2':
-    resolution: {integrity: sha512-O+6Gs8UeDbyFpbSh2CPEz/UOrrdWPTBYNblZK5CxxLisYt4kGX3Sc+czffFonyjiGSq3jWLwJS/CCJc7tBr4sQ==}
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
+    resolution: {integrity: sha512-x0fWaQtYp4E6sktbsdAqnehxDgEc/VwM7uLsRCYWaiGu0ykYdZPiS8zCWdnjHwyiumousxfBm4SO31eXqwEZhQ==}
     cpu: [x64]
     os: [win32]
 
-  '@napi-rs/wasm-runtime@0.1.2':
-    resolution: {integrity: sha512-8JuczewTFIZ/XIjHQ+YlQUydHvlKx2hkcxtuGwh+t/t5zWyZct6YG4+xjHcq8xyc/e7FmFwf42Zj2YgICwmlvA==}
+  '@next/bundle-analyzer@14.3.0-canary.43':
+    resolution: {integrity: sha512-Hq8yox06Nujp5InwdrCzsjlDBI9KilOzWGlhM1xg5QhSu7twQhPpTyUQVpEhQWb1H0mcbTg4JV3UtIOOR0Xi7w==}
 
-  '@ndelangen/get-tarball@3.0.9':
-    resolution: {integrity: sha512-9JKTEik4vq+yGosHYhZ1tiH/3WpUS0Nh0kej4Agndhox8pAdWhEx5knFVRcb/ya9knCRCs1rPxNrSXTDdfVqpA==}
+  '@next/env@13.5.7':
+    resolution: {integrity: sha512-uVuRqoj28Ys/AI/5gVEgRAISd0KWI0HRjOO1CTpNgmX3ZsHb5mdn14Y59yk0IxizXdo7ZjsI2S7qbWnO+GNBcA==}
 
-  '@next/bundle-analyzer@13.5.6':
-    resolution: {integrity: sha512-4P5YVpR3N/B5+p0TQ/rPAr+9fsjkdfCVTGzJhKwE7XHqS+QME4gYxAYeGKkfkHEkP2A3GKXs8QSp0LjIvWLI3g==}
+  '@next/env@14.3.0-canary.43':
+    resolution: {integrity: sha512-SOxSQQX1uW5uYJGoH2hXT0rtP0WRpffAgd5P/zd7dNjXc/3jNMOgHWe6jhzBIz+VmHKqyT5oLT14XsYqOeR2VQ==}
 
-  '@next/env@13.5.1':
-    resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==}
+  '@next/eslint-plugin-next@15.0.3':
+    resolution: {integrity: sha512-3Ln/nHq2V+v8uIaxCR6YfYo7ceRgZNXfTd3yW1ukTaFbO+/I8jNakrjYWODvG9BuR2v5kgVtH/C8r0i11quOgw==}
 
-  '@next/env@13.5.6':
-    resolution: {integrity: sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==}
-
-  '@next/eslint-plugin-next@13.5.6':
-    resolution: {integrity: sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==}
-
-  '@next/swc-darwin-arm64@13.5.1':
-    resolution: {integrity: sha512-Bcd0VFrLHZnMmJy6LqV1CydZ7lYaBao8YBEdQUVzV8Ypn/l5s//j5ffjfvMzpEQ4mzlAj3fIY+Bmd9NxpWhACw==}
+  '@next/swc-darwin-arm64@14.3.0-canary.43':
+    resolution: {integrity: sha512-RWS1ynwh76JAxxcmOdwr+yQUKnjeB4YNx0lCK9DTU3wB5B9H8dDZENjf/Gax8fAD530+gnL86iZItH+70EXgUw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@13.5.1':
-    resolution: {integrity: sha512-uvTZrZa4D0bdWa1jJ7X1tBGIxzpqSnw/ATxWvoRO9CVBvXSx87JyuISY+BWsfLFF59IRodESdeZwkWM2l6+Kjg==}
+  '@next/swc-darwin-x64@14.3.0-canary.43':
+    resolution: {integrity: sha512-nNsY0jjoBOXWOG45r6e9o3xyWt8ZF9UdN6ulYmdDcefHd9b/yexcm5Mdw3vDwElELwOxltwcGgCRkGnVfr6XYQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@13.5.1':
-    resolution: {integrity: sha512-/52ThlqdORPQt3+AlMoO+omicdYyUEDeRDGPAj86ULpV4dg+/GCFCKAmFWT0Q4zChFwsAoZUECLcKbRdcc0SNg==}
+  '@next/swc-linux-arm64-gnu@14.3.0-canary.43':
+    resolution: {integrity: sha512-Sv8l5CnlQjvHTQ8tBnC29LHq5ouoRfSjll0IjvITQrJUjtOrPPqpwaxdwmzkZ3GGM4yLD7hXGnEHPMVk3erxOA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@13.5.1':
-    resolution: {integrity: sha512-L4qNXSOHeu1hEAeeNsBgIYVnvm0gg9fj2O2Yx/qawgQEGuFBfcKqlmIE/Vp8z6gwlppxz5d7v6pmHs1NB6R37w==}
+  '@next/swc-linux-arm64-musl@14.3.0-canary.43':
+    resolution: {integrity: sha512-0J3apoiZZOzdC9jrxnZygKrx1wSza+xVDFKPXK32mwYRi4FvwZ6GNhVftYpnhunKqU+cBwpN2zB6YJnS2VZ4Uw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@13.5.1':
-    resolution: {integrity: sha512-QVvMrlrFFYvLtABk092kcZ5Mzlmsk2+SV3xYuAu8sbTuIoh0U2+HGNhVklmuYCuM3DAAxdiMQTNlRQmNH11udw==}
+  '@next/swc-linux-x64-gnu@14.3.0-canary.43':
+    resolution: {integrity: sha512-c3qqGBo/Zfj8oN5m3I2rSrGc6H6EVJfxRrGwtJz/gADr5xMtxgAhKDjHuIoFeI5AG/eqWgMzeXWeFkE5QdKO4Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@13.5.1':
-    resolution: {integrity: sha512-bBnr+XuWc28r9e8gQ35XBtyi5KLHLhTbEvrSgcWna8atI48sNggjIK8IyiEBO3KIrcUVXYkldAzGXPEYMnKt1g==}
+  '@next/swc-linux-x64-musl@14.3.0-canary.43':
+    resolution: {integrity: sha512-v7FgUD2/e+Vurg6X/L0quLdNwWLhh7nwvjrrKbynF3TptRkr7PQphbqGC4ds8LCxLfy1DsV4jj6JwnPxeB1Cig==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@13.5.1':
-    resolution: {integrity: sha512-EQGeE4S5c9v06jje9gr4UlxqUEA+zrsgPi6kg9VwR+dQHirzbnVJISF69UfKVkmLntknZJJI9XpWPB6q0Z7mTg==}
+  '@next/swc-win32-arm64-msvc@14.3.0-canary.43':
+    resolution: {integrity: sha512-KPRF9mFDAdUUB9r0qd/4wGwZqwxgJxrFf2Xe7FSwSwUL9ome1FynGOqRqg5onqiOUjXftW5BNxnN/Drz/0F0/Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-ia32-msvc@13.5.1':
-    resolution: {integrity: sha512-1y31Q6awzofVjmbTLtRl92OX3s+W0ZfO8AP8fTnITcIo9a6ATDc/eqa08fd6tSpFu6IFpxOBbdevOjwYTGx/AQ==}
+  '@next/swc-win32-ia32-msvc@14.3.0-canary.43':
+    resolution: {integrity: sha512-+9dJywc7hiLyKTXoSPCH/vL49tRGZO8x0eACdiJbfI0hbK55lViTMd74cuz66rOPQkvR8r/IL0dQ9JLKPX0Cvg==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@13.5.1':
-    resolution: {integrity: sha512-+9XBQizy7X/GuwNegq+5QkkxAPV7SBsIwapVRQd9WSvvU20YO23B3bZUpevdabi4fsd25y9RJDDncljy/V54ww==}
+  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
+    resolution: {integrity: sha512-m/SWNFC6usuGsfZztkJWpUd/myK3UHr6lhqwsaV5bMw+1itNnPIj37RbFpL/N0tWQRYahWIqep8EkZOdtKVjqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -5543,93 +5872,6 @@ packages:
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
 
-  '@node-rs/xxhash-android-arm-eabi@1.7.0':
-    resolution: {integrity: sha512-IvkF5xrVwr3OcOlD3fkbD1/nAYPWCjJPxmx+8XVLzjZL7TVdsGlNBRRDe4z5nAywMWjVVJJk0qmQ1fjjbBeCOw==}
-    engines: {node: '>= 12'}
-    cpu: [arm]
-    os: [android]
-
-  '@node-rs/xxhash-android-arm64@1.7.0':
-    resolution: {integrity: sha512-6pQKgNgUNGyv+pBqreTaLNDo4ElFnkhf5WPW/bgD5UlfPsJl48sMrF+4EqjaFRMCtLxRiI62XY+MRKDK/KrDrg==}
-    engines: {node: '>= 12'}
-    cpu: [arm64]
-    os: [android]
-
-  '@node-rs/xxhash-darwin-arm64@1.7.0':
-    resolution: {integrity: sha512-8FThAUO6IO35ek9DW6Y/TdktMmIy/2Ol7tSDecFdv+c8izQMrCzISTLWgLjjhb7zCMZE4+ZgL3oQPI1mbB/wSQ==}
-    engines: {node: '>= 12'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@node-rs/xxhash-darwin-x64@1.7.0':
-    resolution: {integrity: sha512-a8tWz+tMXfYgHzGBxdANObpu6o6APV7KO4D4W1yxHxzLiY0cujTsQpVvN9Z2YVTsFUVuAQwmy9UsB5aTxSnxlg==}
-    engines: {node: '>= 12'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@node-rs/xxhash-freebsd-x64@1.7.0':
-    resolution: {integrity: sha512-vAeZNsqlPtwCkSm7IAatUwN1srvuApEc04BkdL9ryoEP0u7Su0O4wAvb0UoSzwB9+fwr0APSK4NtJ5Wd7F3p8w==}
-    engines: {node: '>= 12'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@node-rs/xxhash-linux-arm-gnueabihf@1.7.0':
-    resolution: {integrity: sha512-zhw98wpFlDiJ8YSTDaHJ3oYcn/ZIpTZRJS0G0VbTlHT7KNQwyc6pT1UQE5dkBRhwa4vyrBfwtrQu+UzIAE/ERg==}
-    engines: {node: '>= 12'}
-    cpu: [arm]
-    os: [linux]
-
-  '@node-rs/xxhash-linux-arm64-gnu@1.7.0':
-    resolution: {integrity: sha512-mqzonU68+WhttziDKL+eW4Eo/RBPsztfMd8pAehELJlW1wIRhbggm9jmwSy90dZm7HnozHIzg278Hc+134xwhw==}
-    engines: {node: '>= 12'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@node-rs/xxhash-linux-arm64-musl@1.7.0':
-    resolution: {integrity: sha512-QpUhAUvM5cFKrWDzutvbsaBLMSw1KUy2Yysh6MlzpcTrshLi6XPqLfPAz2FrDRzD7yquZNVs0HrleEh/tG7Dxg==}
-    engines: {node: '>= 12'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@node-rs/xxhash-linux-x64-gnu@1.7.0':
-    resolution: {integrity: sha512-CKZJrM/BSrvH0yDEIRJTDTA+K5Nxj7zzuNsA88IQCXHAWaHMRgearznL/E72G6yYZ2V007rwy4CD2DOahZHgBg==}
-    engines: {node: '>= 12'}
-    cpu: [x64]
-    os: [linux]
-
-  '@node-rs/xxhash-linux-x64-musl@1.7.0':
-    resolution: {integrity: sha512-oiACZI4Z5Uh0bQ63/OqIUrETVhSR7sb8VynoJ6fx9ZpjXpAww6A+twBznIgKRRBGGF82qjeydXAOv9p1+Nonyw==}
-    engines: {node: '>= 12'}
-    cpu: [x64]
-    os: [linux]
-
-  '@node-rs/xxhash-wasm32-wasi@1.7.0':
-    resolution: {integrity: sha512-pS+yUVkovxJF6S96fK0QYyYqpNp/CB+DjbNDECtNryTj+dSJx4DslQlhsO/46xBoyJf6CUtfeB7cB7ugRgd++Q==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-
-  '@node-rs/xxhash-win32-arm64-msvc@1.7.0':
-    resolution: {integrity: sha512-oU1WNrtuHXrFGKCKKnPUZEuqOvmMWYmX42/tN3eGgvpzrL/ONz5hAaLxW6h+Tn1h3SqCvgvrB6JR2HaIXYpqeQ==}
-    engines: {node: '>= 12'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@node-rs/xxhash-win32-ia32-msvc@1.7.0':
-    resolution: {integrity: sha512-XISZ7x3ISXhWMm5iXUcDj6Tanj2F5r93Nvo0K+xQM+UPW45Q+A6+ybE2YXTAZOSN1tZa5qF49DNNMILZSBfcDA==}
-    engines: {node: '>= 12'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@node-rs/xxhash-win32-x64-msvc@1.7.0':
-    resolution: {integrity: sha512-c50wUnGFo2EWnZeUDco0ItPel7VfooCxMVSCwjLzxr7J/FWdYko/4qcUROj40XVj0QDlT/ypO7dm6bRDTVZadg==}
-    engines: {node: '>= 12'}
-    cpu: [x64]
-    os: [win32]
-
-  '@node-rs/xxhash@1.7.0':
-    resolution: {integrity: sha512-nvY2X76vIC8A8NNEtfipFcJl+izyglQfJjVNqXi/qb74r422yH3MbGrVKNU+Sp5G1EJXM8/Z7ksbiowPHiGcVg==}
-    engines: {node: '>= 12'}
-
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -5642,20 +5884,24 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
+  '@nolyfill/is-core-module@1.0.39':
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+
   '@npmcli/fs@2.1.2':
     resolution: {integrity: sha512-yOJKRvohFOaLqipNtwYB9WugyZKhC/DZC4VYPmpaCzDBrA8YpK3qHZ8/HGscMnE4GqbkLNuVcCnxkeQEdGt6LQ==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
-  '@npmcli/fs@3.1.0':
-    resolution: {integrity: sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==}
+  '@npmcli/fs@3.1.1':
+    resolution: {integrity: sha512-q9CRWjpHCMIh5sVyefoD1cA7PkvILqCZsnSOEUUivORLjxCO/Irmue2DprETiNgEqktDBZaM1Bi+jrarx1XdCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   '@npmcli/git@4.1.0':
     resolution: {integrity: sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  '@npmcli/installed-package-contents@2.0.2':
-    resolution: {integrity: sha512-xACzLPhnfD51GKvTOOuNX2/V4G4mz9/1I2MfDoye9kBM3RYe5g2YbscsaGoTlaWqkxeiapBWyseULVKpSVHtKQ==}
+  '@npmcli/installed-package-contents@2.1.0':
+    resolution: {integrity: sha512-c8UuGLeZpm69BryRykLuKRyKFZYJsZSCT4aVY5ds4omyZqJ172ApzgfKJ5eV/r3HgLdUYgFVe54KSFVjKoe27w==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
@@ -5679,416 +5925,433 @@ packages:
   '@open-draft/deferred-promise@2.2.0':
     resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
 
-  '@opentelemetry/api-logs@0.39.1':
-    resolution: {integrity: sha512-9BJ8lMcOzEN0lu+Qji801y707oFO4xT3db6cosPvl+k7ItUHKN5ofWqtSbM9gbt1H4JJ/4/2TVrqI9Rq7hNv6Q==}
+  '@opentelemetry/api-logs@0.51.1':
+    resolution: {integrity: sha512-E3skn949Pk1z2XtXu/lxf6QAZpawuTM/IUEXcAzpiUkTd73Hmvw26FiN3cJuTmkpM5hZzHwkomVdtrh/n/zzwA==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/api@1.8.0':
-    resolution: {integrity: sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==}
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@1.23.0':
-    resolution: {integrity: sha512-wazGJZDRevibOJ+VgyrT+9+8sybZAxpZx2G7vy30OAtk92OpZCg7HgNxT11NUx0VBDWcRx1dOatMYGOVplQ7QA==}
+  '@opentelemetry/context-async-hooks@1.28.0':
+    resolution: {integrity: sha512-igcl4Ve+F1N2063PJUkesk/GkYyuGIWinYkSyAFTnIj3gzrOgvOA4k747XNdL47HRRL1w/qh7UW8NDuxOLvKFA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@1.13.0':
-    resolution: {integrity: sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==}
+  '@opentelemetry/core@1.24.1':
+    resolution: {integrity: sha512-wMSGfsdmibI88K9wB498zXY04yThPexo8jvwNNlm542HZB7XrrMRBbAyKJqG8qDRJwIBdBrPMi4V9ZPW/sqrcg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
-  '@opentelemetry/core@1.23.0':
-    resolution: {integrity: sha512-hdQ/a9TMzMQF/BO8Cz1juA43/L5YGtCSiKoOHmrTEf7VMDAZgy8ucpWx3eQTnQ3gBloRcWtzvcrMZABC3PTSKQ==}
+  '@opentelemetry/core@1.28.0':
+    resolution: {integrity: sha512-ZLwRMV+fNDpVmF2WYUdBHlq0eOWtEaUJSusrzjGnBt7iSRvfjFE3RXYUZJrqou/wIDWV0DwQ5KIfYe9WXg9Xqw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/exporter-trace-otlp-grpc@0.39.1':
-    resolution: {integrity: sha512-l5RhLKx6U+yuLhMrtgavTDthX50E1mZM3/SSySC7OPZiArFHV/b/9x9jxAzrOgIQUDxyj4N0V9aLKSA2t7Qzxg==}
+  '@opentelemetry/exporter-trace-otlp-grpc@0.51.1':
+    resolution: {integrity: sha512-P9+Hkszih95ITvldGZ+kXvj9HpD1QfS+PwooyHK72GYA+Bgm+yUSAsDkUkDms8+s9HW6poxURv3LcjaMuBBpVQ==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/otlp-exporter-base@0.39.1':
-    resolution: {integrity: sha512-Pv5X8fbi6jD/RJBePyn7MnCSuE6MbPB6dl+7YYBWJ5RcMGYMwvLXjd4h2jWsPV2TSUg38H/RoSP0aXvQ06Y7iw==}
+  '@opentelemetry/otlp-exporter-base@0.51.1':
+    resolution: {integrity: sha512-UYlnOYyDdzo1Gw559EHCzru0RwhvuXCwoH8jGo9J4gO1TE58GjnEmIjomMsKBCym3qWNJfIQXw+9SZCV0DdQNg==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/otlp-grpc-exporter-base@0.39.1':
-    resolution: {integrity: sha512-u3ErFRQqQFKjjIMuwLWxz/tLPYInfmiAmSy//fGSCzCh2ZdJgqQjMOAxBgqFtCF2xFL+OmMhyuC2ThMzceGRWA==}
+  '@opentelemetry/otlp-grpc-exporter-base@0.51.1':
+    resolution: {integrity: sha512-ZAS+4pq8o7dsugGTwV9s6JMKSxi+guIHdn0acOv0bqj26e9pWDFx5Ky+bI0aY46uR9Y0JyXqY+KAEYM/SO3DFA==}
     engines: {node: '>=14'}
     peerDependencies:
       '@opentelemetry/api': ^1.0.0
 
-  '@opentelemetry/otlp-transformer@0.39.1':
-    resolution: {integrity: sha512-0hgVnXXz5efI382B/24NxD4b6Zxlh7nxCdJkxkdmQMbn0yRiwoq/ZT+QG8eUL6JNzsBAV1WJlF5aJNsL8skHvw==}
+  '@opentelemetry/otlp-transformer@0.51.1':
+    resolution: {integrity: sha512-OppYOXwV9LQqqtYUCywqoOqX/JT9LQ5/FMuPZ//eTkvuHdUC4ZMwz2c6uSoT2R90GWvvGnF1iEqTGyTT3xAt2Q==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.5.0'
+      '@opentelemetry/api': '>=1.3.0 <1.9.0'
 
-  '@opentelemetry/propagator-b3@1.23.0':
-    resolution: {integrity: sha512-cZ6rl8y2bdxYQ4e+zP2CQ+QmuPebaLBLO1skjFpj3eEu7zar+6hBzUP3llMOUupkQeQSwXz+4c8dZ26OhYfG/g==}
+  '@opentelemetry/propagator-b3@1.28.0':
+    resolution: {integrity: sha512-Q7HVDIMwhN5RxL4bECMT4BdbyYSAKkC6U/RGn4NpO/cbqP6ZRg+BS7fPo/pGZi2w8AHfpIGQFXQmE8d2PC5xxQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/propagator-jaeger@1.23.0':
-    resolution: {integrity: sha512-6iArixfgIl3ZgzeltQ5jyiKbjZygM+MbM84pXi1HL0Qs4x4Ck5rM6wEtjhZffFnlDMWEkEqrnM0xF6bTfbiMAQ==}
+  '@opentelemetry/propagator-jaeger@1.28.0':
+    resolution: {integrity: sha512-wKJ94+s8467CnIRgoSRh0yXm/te0QMOwTq9J01PfG/RzYZvlvN8aRisN2oZ9SznB45dDGnMj3BhUlchSA9cEKA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/resources@1.13.0':
-    resolution: {integrity: sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==}
+  '@opentelemetry/resources@1.24.1':
+    resolution: {integrity: sha512-cyv0MwAaPF7O86x5hk3NNgenMObeejZFLJJDVuSeSMIsknlsj3oOZzRv3qSzlwYomXsICfBeFFlxwHQte5mGXQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
-  '@opentelemetry/resources@1.23.0':
-    resolution: {integrity: sha512-iPRLfVfcEQynYGo7e4Di+ti+YQTAY0h5mQEUJcHlU9JOqpb4x965O6PZ+wMcwYVY63G96KtdS86YCM1BF1vQZg==}
+  '@opentelemetry/resources@1.28.0':
+    resolution: {integrity: sha512-cIyXSVJjGeTICENN40YSvLDAq4Y2502hGK3iN7tfdynQLKWb3XWZQEkPc+eSx47kiy11YeFAlYkEfXwR1w8kfw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/sdk-logs@0.39.1':
-    resolution: {integrity: sha512-/gmgKfZ1ZVFporKuwsewqIyvaUIGpv76JZ7lBpHQQPb37IMpaXO6pdqFI4ebHAWfNIm3akMyhmdtzivcgF3lgw==}
+  '@opentelemetry/sdk-logs@0.51.1':
+    resolution: {integrity: sha512-ULQQtl82b673PpZc5/0EtH4V+BrwVOgKJZEB7tYZnGTG3I98tQVk89S9/JSixomDr++F4ih+LSJTCqIKBz+MQQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.4.0 <1.5.0'
-      '@opentelemetry/api-logs': '>=0.38.0'
+      '@opentelemetry/api': '>=1.4.0 <1.9.0'
+      '@opentelemetry/api-logs': '>=0.39.1'
 
-  '@opentelemetry/sdk-metrics@1.13.0':
-    resolution: {integrity: sha512-MOjZX6AnSOqLliCcZUrb+DQKjAWXBiGeICGbHAGe5w0BB18PJIeIo995lO5JSaFfHpmUMgJButTPfJJD27W3Vg==}
+  '@opentelemetry/sdk-metrics@1.24.1':
+    resolution: {integrity: sha512-FrAqCbbGao9iKI+Mgh+OsC9+U2YMoXnlDHe06yH7dvavCKzE3S892dGtX54+WhSFVxHR/TMRVJiK/CV93GR0TQ==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.5.0'
+      '@opentelemetry/api': '>=1.3.0 <1.9.0'
 
-  '@opentelemetry/sdk-trace-base@1.13.0':
-    resolution: {integrity: sha512-moTiQtc0uPR1hQLt6gLDJH9IIkeBhgRb71OKjNHZPE1VF45fHtD6nBDi5J/DkTHTwYP5X3kBJLa3xN7ub6J4eg==}
+  '@opentelemetry/sdk-trace-base@1.24.1':
+    resolution: {integrity: sha512-zz+N423IcySgjihl2NfjBf0qw1RWe11XIAWVrTNOSSI6dtSPJiVom2zipFB2AEEtJWpv0Iz6DY6+TjnyTV5pWg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': '>=1.0.0 <1.9.0'
 
-  '@opentelemetry/sdk-trace-base@1.23.0':
-    resolution: {integrity: sha512-PzBmZM8hBomUqvCddF/5Olyyviayka44O5nDWq673np3ctnvwMOvNrsUORZjKja1zJbwEuD9niAGbnVrz3jwRQ==}
+  '@opentelemetry/sdk-trace-base@1.28.0':
+    resolution: {integrity: sha512-ceUVWuCpIao7Y5xE02Xs3nQi0tOGmMea17ecBdwtCvdo9ekmO+ijc9RFDgfifMl7XCBf41zne/1POM3LqSTZDA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-node@1.23.0':
-    resolution: {integrity: sha512-dwnin5Go2r6VzJZkVc9JBPupssWp7j2EFto+S7qRkwQ00WDykWeq3x2Skk7I1Jr448FeBSvGCQVPgV5e6s6O3w==}
+  '@opentelemetry/sdk-trace-node@1.28.0':
+    resolution: {integrity: sha512-N0sYfYXvHpP0FNIyc+UfhLnLSTOuZLytV0qQVrDWIlABeD/DWJIGttS7nYeR14gQLXch0M1DW8zm3VeN6Opwtg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.9.0'
+      '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/semantic-conventions@1.13.0':
-    resolution: {integrity: sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==}
+  '@opentelemetry/semantic-conventions@1.24.1':
+    resolution: {integrity: sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/semantic-conventions@1.23.0':
-    resolution: {integrity: sha512-MiqFvfOzfR31t8cc74CTP1OZfz7MbqpAnLCra8NqQoaHJX6ncIRTdYOQYBDQ2uFISDq0WY8Y9dDTWvsgzzBYRg==}
+  '@opentelemetry/semantic-conventions@1.27.0':
+    resolution: {integrity: sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==}
     engines: {node: '>=14'}
 
-  '@parcel/bundler-default@2.12.0':
-    resolution: {integrity: sha512-3ybN74oYNMKyjD6V20c9Gerdbh7teeNvVMwIoHIQMzuIFT6IGX53PyOLlOKRLbjxMc0TMimQQxIt2eQqxR5LsA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@opentelemetry/semantic-conventions@1.28.0':
+    resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==}
+    engines: {node: '>=14'}
 
-  '@parcel/cache@2.12.0':
-    resolution: {integrity: sha512-FX5ZpTEkxvq/yvWklRHDESVRz+c7sLTXgFuzz6uEnBcXV38j6dMSikflNpHA6q/L4GKkCqRywm9R6XQwhwIMyw==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/bundler-default@2.13.0':
+    resolution: {integrity: sha512-qx6v8mBJkgiEeNXZwzW+1x0YZ3lpkx/WDmqa63GE/CUWSIlMb14ZELyXewAo7mzX99qDhV4E6+OX1vRUI47+nQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
+
+  '@parcel/cache@2.13.0':
+    resolution: {integrity: sha512-8GA4Dmhu917a5ZAfLgc7G3gDEWOkFhxeoY44eU7WYgh12rSJCS9XVIaWVnzDKb0ou3brSpbVKz9rhNj1K7kmPw==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/codeframe@2.12.0':
-    resolution: {integrity: sha512-v2VmneILFiHZJTxPiR7GEF1wey1/IXPdZMcUlNXBiPZyWDfcuNgGGVQkx/xW561rULLIvDPharOMdxz5oHOKQg==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/codeframe@2.13.0':
+    resolution: {integrity: sha512-mKOQSDmRzWqC/ELwjGv9ZDqkYtHwkwvpLC4gb5mUAw6VJsDqraydtluxGR2NejYwETiS4j9mQElcbHZoRcZ9uA==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/compressor-raw@2.12.0':
-    resolution: {integrity: sha512-h41Q3X7ZAQ9wbQ2csP8QGrwepasLZdXiuEdpUryDce6rF9ZiHoJ97MRpdLxOhOPyASTw/xDgE1xyaPQr0Q3f5A==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/compressor-raw@2.13.0':
+    resolution: {integrity: sha512-T6+qN36Rci/D3C79vImzZyQyReKOqKQetWAG2n3PG780mt+6omTGyZKRVUQTxJIbStgttlL9ZRlTHFiQeid7rg==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/config-default@2.12.0':
-    resolution: {integrity: sha512-dPNe2n9eEsKRc1soWIY0yToMUPirPIa2QhxcCB3Z5RjpDGIXm0pds+BaiqY6uGLEEzsjhRO0ujd4v2Rmm0vuFg==}
+  '@parcel/config-default@2.13.0':
+    resolution: {integrity: sha512-clxN5xXeVrq6GhxrKWoQi0BkmLYmbfttoXA/zXsX2XF15QZALHqQtUKuKh2LLZj4NmwplTkIRz5vT80n8uvLOQ==}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/core@2.12.0':
-    resolution: {integrity: sha512-s+6pwEj+GfKf7vqGUzN9iSEPueUssCCQrCBUlcAfKrJe0a22hTUCjewpB0I7lNrCIULt8dkndD+sMdOrXsRl6Q==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/core@2.13.0':
+    resolution: {integrity: sha512-ok2y14uJebDuDz5QGcv+Ui4cjdroV/L5HUorYDfttNbuxjc4XpLJC9bzfu3MSwVKF44n/prT9pt3AK/Vf1LFDg==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/diagnostic@2.12.0':
-    resolution: {integrity: sha512-8f1NOsSFK+F4AwFCKynyIu9Kr/uWHC+SywAv4oS6Bv3Acig0gtwUjugk0C9UaB8ztBZiW5TQZhw+uPZn9T/lJA==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/diagnostic@2.13.0':
+    resolution: {integrity: sha512-ocgqebLD4VL7/zkOoNBcIRu4ndFRipPwNkLd9cdfux3QBYuYBi5DE+3RSt9IWMrwjS8DMFXCxmtNANr7zujgjw==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/events@2.12.0':
-    resolution: {integrity: sha512-nmAAEIKLjW1kB2cUbCYSmZOGbnGj8wCzhqnK727zCCWaA25ogzAtt657GPOeFyqW77KyosU728Tl63Fc8hphIA==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/events@2.13.0':
+    resolution: {integrity: sha512-vFB/GebsoiSxQy68DvrX8zpeJP2xWhSNYSN99ZbyADxutiAUnquu4nKMJCp4Pb+gNPHr2TitU6LKNGXqWLEE7w==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/fs@2.12.0':
-    resolution: {integrity: sha512-NnFkuvou1YBtPOhTdZr44WN7I60cGyly2wpHzqRl62yhObyi1KvW0SjwOMa0QGNcBOIzp4G0CapoZ93hD0RG5Q==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/feature-flags@2.13.0':
+    resolution: {integrity: sha512-HNTUy7DfEuowGqkKq2DGwhGEO9U3ORgIgRyxG4cXHMhx9BIE1lmB3ZVfu+dyq34GSYw6ceOgo0I3BZYs7rRKDA==}
+    engines: {node: '>= 16.0.0'}
+
+  '@parcel/fs@2.13.0':
+    resolution: {integrity: sha512-qMaTdlrmnZPk7jy5+FC0xdE5tqzGutRhcoEKGTvtbjEBh++azw9mKkGxLe2CQXnoJXydvM++dhUUIsKhchQGxA==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/graph@3.2.0':
-    resolution: {integrity: sha512-xlrmCPqy58D4Fg5umV7bpwDx5Vyt7MlnQPxW68vae5+BA4GSWetfZt+Cs5dtotMG2oCHzZxhIPt7YZ7NRyQzLA==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/graph@3.3.0':
+    resolution: {integrity: sha512-CMiX+yzpZH4clrHIbWqH7Pz2tfdS4C22WbcpUMvS4W+U97BhY4B6mm4ytEUOmyqKWiFNGFTfGwZKst9RjSLE6A==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/logger@2.12.0':
-    resolution: {integrity: sha512-cJ7Paqa7/9VJ7C+KwgJlwMqTQBOjjn71FbKk0G07hydUEBISU2aDfmc/52o60ErL9l+vXB26zTrIBanbxS8rVg==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/logger@2.13.0':
+    resolution: {integrity: sha512-/hWNC27PntVH+GugndqPYflucG8a9Octc6fuQWS40oBZSw5kBQBYs4xkBSkTVLpcI8910HN3aSHjOJIX8ddtRg==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/markdown-ansi@2.12.0':
-    resolution: {integrity: sha512-WZz3rzL8k0H3WR4qTHX6Ic8DlEs17keO9gtD4MNGyMNQbqQEvQ61lWJaIH0nAtgEetu0SOITiVqdZrb8zx/M7w==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/markdown-ansi@2.13.0':
+    resolution: {integrity: sha512-kznmctJ7myhu7/JKN9njHudBj4t8bv4oKW4/cvWgzVR7ftsw9oOJ8EE7eqtqOzzInyATZxXmbk+EYX4S04vLUg==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/namer-default@2.12.0':
-    resolution: {integrity: sha512-9DNKPDHWgMnMtqqZIMiEj/R9PNWW16lpnlHjwK3ciRlMPgjPJ8+UNc255teZODhX0T17GOzPdGbU/O/xbxVPzA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/namer-default@2.13.0':
+    resolution: {integrity: sha512-D4NbhiSr9sG0OUE0TpLWCuFtwZDexfQpug4MGF0qBKTDb0urVxd6peITU2cuJJ2Y615kagGHNiw14qJ62MpIgA==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/node-resolver-core@3.3.0':
-    resolution: {integrity: sha512-rhPW9DYPEIqQBSlYzz3S0AjXxjN6Ub2yS6tzzsW/4S3Gpsgk/uEq4ZfxPvoPf/6TgZndVxmKwpmxaKtGMmf3cA==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/node-resolver-core@3.4.0':
+    resolution: {integrity: sha512-LFbbdUTcrbFI8fYDPk86mJc2SANPZzECTfsrqhx1u36t33iYmJTuGnYUH32unT5ra60KOmeZWny8yqedeyHwuw==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/optimizer-css@2.12.0':
-    resolution: {integrity: sha512-ifbcC97fRzpruTjaa8axIFeX4MjjSIlQfem3EJug3L2AVqQUXnM1XO8L0NaXGNLTW2qnh1ZjIJ7vXT/QhsphsA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/optimizer-css@2.13.0':
+    resolution: {integrity: sha512-rB+zltYJaHTqaiVSYkZfYns6bkk4X9AG0AuD78VpGnGhcramle0bvsB8w6zOOtseY66m1+nlYUe6OPw6jrE6Lg==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/optimizer-htmlnano@2.12.0':
-    resolution: {integrity: sha512-MfPMeCrT8FYiOrpFHVR+NcZQlXAptK2r4nGJjfT+ndPBhEEZp4yyL7n1y7HfX9geg5altc4WTb4Gug7rCoW8VQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/optimizer-htmlnano@2.13.0':
+    resolution: {integrity: sha512-69Of5qyiWAAHCKyrqg7NbkriuonzowAysIOQNjQPuy5HVMy+hJjUmgikCcwfRxmV+7af/DRlBYGo0ay6wzH/7w==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/optimizer-image@2.12.0':
-    resolution: {integrity: sha512-bo1O7raeAIbRU5nmNVtx8divLW9Xqn0c57GVNGeAK4mygnQoqHqRZ0mR9uboh64pxv6ijXZHPhKvU9HEpjPjBQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/optimizer-image@2.13.0':
+    resolution: {integrity: sha512-lCcmUrH91PKLLInADr8k+gEjvGTox4D9XGQkU3o88M+h7nBM0Tx2mKrDjWlMhFag73juc2vuMQKyjt7Sszk+MQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/optimizer-svgo@2.12.0':
-    resolution: {integrity: sha512-Kyli+ZZXnoonnbeRQdoWwee9Bk2jm/49xvnfb+2OO8NN0d41lblBoRhOyFiScRnJrw7eVl1Xrz7NTkXCIO7XFQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/optimizer-svgo@2.13.0':
+    resolution: {integrity: sha512-dksW0u0IdA73VhutwDYnNhY/Yl5xscm+bia0zmm+02wr11PRW6nvsxvIyFSI/lU0+gsk7nMMxeSqWuPFDJWfrw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/optimizer-swc@2.12.0':
-    resolution: {integrity: sha512-iBi6LZB3lm6WmbXfzi8J3DCVPmn4FN2lw7DGXxUXu7MouDPVWfTsM6U/5TkSHJRNRogZ2gqy5q9g34NPxHbJcw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/optimizer-swc@2.13.0':
+    resolution: {integrity: sha512-tBo1kn003BJh3dkGQ3Yd5Gsf9yTS+O8G/U0eSvFb/2Xov/Syx98yNFN9JJv9rOf/agJ7Ism3LjbgBEzDDjzZ0w==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/package-manager@2.12.0':
-    resolution: {integrity: sha512-0nvAezcjPx9FT+hIL+LS1jb0aohwLZXct7jAh7i0MLMtehOi0z1Sau+QpgMlA9rfEZZ1LIeFdnZZwqSy7Ccspw==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/package-manager@2.13.0':
+    resolution: {integrity: sha512-S8cnSFpJUkPFSvrWc886nDHVTUGWqdCaoA5R8BJ8I8fMOu6pSUkkUexqK5yYnN7S0dn1bLMnKU3ARpwXhOUZJw==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/packager-css@2.12.0':
-    resolution: {integrity: sha512-j3a/ODciaNKD19IYdWJT+TP+tnhhn5koBGBWWtrKSu0UxWpnezIGZetit3eE+Y9+NTePalMkvpIlit2eDhvfJA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-css@2.13.0':
+    resolution: {integrity: sha512-Zgf2lr0erqiCh4zqmGjnuo63Q6JhouXfYNVTXYWEf+vgCnSanuy7q4e17YC6SU4QmHdy6IF0zoAz1D+x23hsQA==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/packager-html@2.12.0':
-    resolution: {integrity: sha512-PpvGB9hFFe+19NXGz2ApvPrkA9GwEqaDAninT+3pJD57OVBaxB8U+HN4a5LICKxjUppPPqmrLb6YPbD65IX4RA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-html@2.13.0':
+    resolution: {integrity: sha512-L/QrmiG3Zib3WnPy7kxC8njT4r8yvIpNveyv2NE8MRwwlsHf5GytTyK0euRPVLlnl4wCg3z15nrA3081E/OPjw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/packager-js@2.12.0':
-    resolution: {integrity: sha512-viMF+FszITRRr8+2iJyk+4ruGiL27Y6AF7hQ3xbJfzqnmbOhGFtLTQwuwhOLqN/mWR2VKdgbLpZSarWaO3yAMg==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-js@2.13.0':
+    resolution: {integrity: sha512-aObsQMSTyZtyvozuAoIRH3Qr7Xqcp+7w8mZNbhxjQsReQoRcnWfoN02yJ658f9vy+JT5lQkgdkNN3k6YfI7lsw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/packager-raw@2.12.0':
-    resolution: {integrity: sha512-tJZqFbHqP24aq1F+OojFbQIc09P/u8HAW5xfndCrFnXpW4wTgM3p03P0xfw3gnNq+TtxHJ8c3UFE5LnXNNKhYA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-raw@2.13.0':
+    resolution: {integrity: sha512-HiLdxaMk588NfUh2ROyOORMaz1kDoPqZzcShz32U9q2kangFSFJmUN+5Sqdw1eSN/cVmK7StWsRyMulGJ+mbgQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/packager-svg@2.12.0':
-    resolution: {integrity: sha512-ldaGiacGb2lLqcXas97k8JiZRbAnNREmcvoY2W2dvW4loVuDT9B9fU777mbV6zODpcgcHWsLL3lYbJ5Lt3y9cg==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-svg@2.13.0':
+    resolution: {integrity: sha512-hzSKpgXO/d1vzMFDXe4qjsuDoPTcclkX/41CJ1WWtKmBtU7UVK2BEq+hfps4ZrE04cER/0ZvxrrH4xXviYKsig==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/packager-wasm@2.12.0':
-    resolution: {integrity: sha512-fYqZzIqO9fGYveeImzF8ll6KRo2LrOXfD+2Y5U3BiX/wp9wv17dz50QLDQm9hmTcKGWxK4yWqKQh+Evp/fae7A==}
-    engines: {node: '>=12.0.0', parcel: ^2.12.0}
+  '@parcel/packager-wasm@2.13.0':
+    resolution: {integrity: sha512-2KJnDQhDCU8E79zeUYMy3t6DPC0o1lg8KqvW6cVFS6Cr9Lot5YRzMGSY6/2M3upXK6M9TigfGs21WEcdf10tLw==}
+    engines: {node: '>=16.0.0', parcel: ^2.13.0}
 
-  '@parcel/plugin@2.12.0':
-    resolution: {integrity: sha512-nc/uRA8DiMoe4neBbzV6kDndh/58a4wQuGKw5oEoIwBCHUvE2W8ZFSu7ollSXUGRzfacTt4NdY8TwS73ScWZ+g==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/plugin@2.13.0':
+    resolution: {integrity: sha512-Q00Zv+zJ+rx+C/bHVNscXot1/cPm7Xx2H/NaJpwoXGg1+GNJFRYI37ids5HyWp9H+K67OnM0bC/7VPsTr9NJ0A==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/profiler@2.12.0':
-    resolution: {integrity: sha512-q53fvl5LDcFYzMUtSusUBZSjQrKjMlLEBgKeQHFwkimwR1mgoseaDBDuNz0XvmzDzF1UelJ02TUKCGacU8W2qA==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/profiler@2.13.0':
+    resolution: {integrity: sha512-LW2p0Pfz5TWQprJevN1xHRhqlVm01plCgbzT72qmgjzPMI4QYcZVyG+Y62VGn6iBPivpBqm2TNqdiXzfJreQuw==}
+    engines: {node: '>= 16.0.0'}
 
-  '@parcel/reporter-cli@2.12.0':
-    resolution: {integrity: sha512-TqKsH4GVOLPSCanZ6tcTPj+rdVHERnt5y4bwTM82cajM21bCX1Ruwp8xOKU+03091oV2pv5ieB18pJyRF7IpIw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/reporter-cli@2.13.0':
+    resolution: {integrity: sha512-cChHsbp+XrW/3pGZe6Sa+AyWxKRE5uoO9HzFD/r3j6ijCctX2b/Sshs7kmVZLGfDx1GO0u5xU+NzZA8lpFkIkg==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/reporter-dev-server@2.12.0':
-    resolution: {integrity: sha512-tIcDqRvAPAttRlTV28dHcbWT5K2r/MBFks7nM4nrEDHWtnrCwimkDmZTc1kD8QOCCjGVwRHcQybpHvxfwol6GA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/reporter-dev-server@2.13.0':
+    resolution: {integrity: sha512-LYm/2peex4aNv5mBqWqSJSpmiGegfuL4i73c3J1zXlcx/lnUIrjAkjh24v+LQsud5Krapqabr19nVlAHpOk33g==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/reporter-tracer@2.12.0':
-    resolution: {integrity: sha512-g8rlu9GxB8Ut/F8WGx4zidIPQ4pcYFjU9bZO+fyRIPrSUFH2bKijCnbZcr4ntqzDGx74hwD6cCG4DBoleq2UlQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/reporter-tracer@2.13.0':
+    resolution: {integrity: sha512-POKec53mKPI3XurJUIjaKDl9NHdGzkNONzkjcerHdRHp5W5xUp1KuasKIOQY8tHlvqG0Pp1bytszjDvZB3CnmA==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/resolver-default@2.12.0':
-    resolution: {integrity: sha512-uuhbajTax37TwCxu7V98JtRLiT6hzE4VYSu5B7Qkauy14/WFt2dz6GOUXPgVsED569/hkxebPx3KCMtZW6cHHA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/resolver-default@2.13.0':
+    resolution: {integrity: sha512-fdqJ6KnxbZW3Ll65JgHldGiAfVWIhfTVYpnUsh+VvIhranHzn4+JjfevTyjCqx1eLRMxOIjg0uEkwT8d2MOFLw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/runtime-browser-hmr@2.12.0':
-    resolution: {integrity: sha512-4ZLp2FWyD32r0GlTulO3+jxgsA3oO1P1b5oO2IWuWilfhcJH5LTiazpL5YdusUjtNn9PGN6QLAWfxmzRIfM+Ow==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/runtime-browser-hmr@2.13.0':
+    resolution: {integrity: sha512-5aSVcow/BN8HG3kS1ACY7SKRMm9zaQ9stCpNLtY5HgqwZ+sSC2jtQPeqMnhrSn9ZHunysGJfJ57Xb9Olgjwh5Q==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/runtime-js@2.12.0':
-    resolution: {integrity: sha512-sBerP32Z1crX5PfLNGDSXSdqzlllM++GVnVQVeM7DgMKS8JIFG3VLi28YkX+dYYGtPypm01JoIHCkvwiZEcQJg==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/runtime-js@2.13.0':
+    resolution: {integrity: sha512-19YxijsDLVs6iGve0ARSkxvz12fgwAXYwvZqXaXn0bZYKHAB5M+Yhd/9fW8/z2NXARfI+hnYWdSaMJAardDltQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/runtime-react-refresh@2.12.0':
-    resolution: {integrity: sha512-SCHkcczJIDFTFdLTzrHTkQ0aTrX3xH6jrA4UsCBL6ji61+w+ohy4jEEe9qCgJVXhnJfGLE43HNXek+0MStX+Mw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/runtime-react-refresh@2.13.0':
+    resolution: {integrity: sha512-RoUpZjdTai85G4lL+gIERJvZlQJfVylqK/BSjTe4udEez6EZlumxxRKnGLo2ciJEJE4o/+yI0eZDkVmGXCj4pQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/runtime-service-worker@2.12.0':
-    resolution: {integrity: sha512-BXuMBsfiwpIEnssn+jqfC3jkgbS8oxeo3C7xhSQsuSv+AF2FwY3O3AO1c1RBskEW3XrBLNINOJujroNw80VTKA==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/runtime-service-worker@2.13.0':
+    resolution: {integrity: sha512-UcYIwEbfjdsHeDU/7f28uzz9gdffhkqP2mQeAwyn5okMb4yaWNxx0lCzcMigC5ORy7kNAYO6875FxzqqlsQBxA==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/rust@2.12.0':
-    resolution: {integrity: sha512-005cldMdFZFDPOjbDVEXcINQ3wT4vrxvSavRWI3Az0e3E18exO/x/mW9f648KtXugOXMAqCEqhFHcXECL9nmMw==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/rust@2.13.0':
+    resolution: {integrity: sha512-7wPx5fma2imcIpwoBHxkt4yMDLYbnxQ1utswXaDj59iDu3mJkHU9/WyZWD2KzZdrADAdF8ulR1fg1woBYQ+nwA==}
+    engines: {node: '>= 16.0.0'}
 
   '@parcel/source-map@2.1.1':
     resolution: {integrity: sha512-Ejx1P/mj+kMjQb8/y5XxDUn4reGdr+WyKYloBljpppUy8gs42T+BNoEOuRYqDVdgPc6NxduzIDoJS9pOFfV5Ew==}
     engines: {node: ^12.18.3 || >=14}
 
-  '@parcel/transformer-babel@2.12.0':
-    resolution: {integrity: sha512-zQaBfOnf/l8rPxYGnsk/ufh/0EuqvmnxafjBIpKZ//j6rGylw5JCqXSb1QvvAqRYruKeccxGv7+HrxpqKU6V4A==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-babel@2.13.0':
+    resolution: {integrity: sha512-hAZFlZoX/RWbMWezk0/2hyFFmM+D0V7KM31NuNZhuCmgeM54e5QeB64qRUFEXFCN0z2XZR2fdxcYNv3dAb17Ww==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-css@2.12.0':
-    resolution: {integrity: sha512-vXhOqoAlQGATYyQ433Z1DXKmiKmzOAUmKysbYH3FD+LKEKLMEl/pA14goqp00TW+A/EjtSKKyeMyHlMIIUqj4Q==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-css@2.13.0':
+    resolution: {integrity: sha512-zxQ5mYFonnv5LR+7CQNH0KxuO+Lao/mtkwRSS+KqsgM/h3liVOumZ406jgag08f22gwXxndQDCE+khys/ODMIA==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-html@2.12.0':
-    resolution: {integrity: sha512-5jW4dFFBlYBvIQk4nrH62rfA/G/KzVzEDa6S+Nne0xXhglLjkm64Ci9b/d4tKZfuGWUbpm2ASAq8skti/nfpXw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-html@2.13.0':
+    resolution: {integrity: sha512-iCgW95Nb+Hvu5y+2owjipuzxGOMzLdw2OHcGAN4iw+lyQtXD1TnovL4kzHxjURk5Jj+or0xRAjACtdHjAz7O8Q==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-image@2.12.0':
-    resolution: {integrity: sha512-8hXrGm2IRII49R7lZ0RpmNk27EhcsH+uNKsvxuMpXPuEnWgC/ha/IrjaI29xCng1uGur74bJF43NUSQhR4aTdw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-image@2.13.0':
+    resolution: {integrity: sha512-wehluaZIB6sMqCDU70d2WQW53ubQ6nlzWIsCKoXQxDVThf4xNPbXaqDwZ4udwKZQ+x3frfmeEZXhv1JcFFN5Yw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/transformer-js@2.12.0':
-    resolution: {integrity: sha512-OSZpOu+FGDbC/xivu24v092D9w6EGytB3vidwbdiJ2FaPgfV7rxS0WIUjH4I0OcvHAcitArRXL0a3+HrNTdQQw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-js@2.13.0':
+    resolution: {integrity: sha512-vFSLXhdAQ1G4QqdXPE3bu2Yxh047HeqsxoQpbUNqPzLY/IR8P+ZTG4lUVVE5sGGfck2FfHksJP8uTq6RII4cnw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
-  '@parcel/transformer-json@2.12.0':
-    resolution: {integrity: sha512-Utv64GLRCQILK5r0KFs4o7I41ixMPllwOLOhkdjJKvf1hZmN6WqfOmB1YLbWS/y5Zb/iB52DU2pWZm96vLFQZQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-json@2.13.0':
+    resolution: {integrity: sha512-aNmOZcX8oMHrgP4BlqShAoXleTTIstdM2Cflf4d8gUxm4G0GgfYvXRlypxg4twbEtbEHyqrb3qI6wEzIz6U9ZQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-postcss@2.12.0':
-    resolution: {integrity: sha512-FZqn+oUtiLfPOn67EZxPpBkfdFiTnF4iwiXPqvst3XI8H+iC+yNgzmtJkunOOuylpYY6NOU5jT8d7saqWSDv2Q==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-postcss@2.13.0':
+    resolution: {integrity: sha512-04W4QSEqqY36wqpDB9zw847C5LKuQ2pOAO/AseLc7pdvt7W8Pq7GYFTCUUhlo0Lravvw5Z7mMJq043Z05IoCDg==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-posthtml@2.12.0':
-    resolution: {integrity: sha512-z6Z7rav/pcaWdeD+2sDUcd0mmNZRUvtHaUGa50Y2mr+poxrKilpsnFMSiWBT+oOqPt7j71jzDvrdnAF4XkCljg==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-posthtml@2.13.0':
+    resolution: {integrity: sha512-MnfF0a5LMCALxm5h7zgmGnOkSC/o9J9l6QwddzX1om3MSsCwRWmvEewuASSftyIy80Opx0J8bBPVJbkCCAWqLQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-raw@2.12.0':
-    resolution: {integrity: sha512-Ht1fQvXxix0NncdnmnXZsa6hra20RXYh1VqhBYZLsDfkvGGFnXIgO03Jqn4Z8MkKoa0tiNbDhpKIeTjyclbBxQ==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-raw@2.13.0':
+    resolution: {integrity: sha512-9gvh3ozDOXOjpufTrEcqmzKisjTFeXA+GO9pochiVdjVB5Sg0FBxFFX9dkcXmC0dFcHchh7/d4unbUUQuCjM8Q==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-react-refresh-wrap@2.12.0':
-    resolution: {integrity: sha512-GE8gmP2AZtkpBIV5vSCVhewgOFRhqwdM5Q9jNPOY5PKcM3/Ff0qCqDiTzzGLhk0/VMBrdjssrfZkVx6S/lHdJw==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-react-refresh-wrap@2.13.0':
+    resolution: {integrity: sha512-AHbCYewzMmIH8ajFvequTtCEST9oHIGHTzYfIss7TMjvAvSrgUs4ESQ9qyNV1Y0A6Nrj5nOe1Oax4bCsBMDWCw==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/transformer-svg@2.12.0':
-    resolution: {integrity: sha512-cZJqGRJ4JNdYcb+vj94J7PdOuTnwyy45dM9xqbIMH+HSiiIkfrMsdEwYft0GTyFTdsnf+hdHn3tau7Qa5hhX+A==}
-    engines: {node: '>= 12.0.0', parcel: ^2.12.0}
+  '@parcel/transformer-svg@2.13.0':
+    resolution: {integrity: sha512-9lV9ab6TBBs1GQhNcgs9IwpdqvWnfOeZiORqGH7aSpiAaTy9w9Nm+1hSycK5Fz4EZ9wavvdcHftf0LGyymK2MQ==}
+    engines: {node: '>= 16.0.0', parcel: ^2.13.0}
 
-  '@parcel/types@2.12.0':
-    resolution: {integrity: sha512-8zAFiYNCwNTQcglIObyNwKfRYQK5ELlL13GuBOrSMxueUiI5ylgsGbTS1N7J3dAGZixHO8KhHGv5a71FILn9rQ==}
+  '@parcel/types-internal@2.13.0':
+    resolution: {integrity: sha512-yhIbaH+VXQB7Leifsnwifr80R6q2Yqeo+xN4KcPGuGH94iX7LrxJ3V0iwUMIg5nGmh5hmNbq0MEYFFxqVuZ8wQ==}
 
-  '@parcel/utils@2.12.0':
-    resolution: {integrity: sha512-z1JhLuZ8QmDaYoEIuUCVZlhcFrS7LMfHrb2OCRui5SQFntRWBH2fNM6H/fXXUkT9SkxcuFP2DUA6/m4+Gkz72g==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/types@2.13.0':
+    resolution: {integrity: sha512-o9Oe43ZIe5rwY/vqE70yZxSPfkNAIoXdLTnqYX+bIDchqWqY6xSSeNdhkwuT5VNKAh5F8T1UJput7rgE6Znx/w==}
 
-  '@parcel/watcher-android-arm64@2.4.1':
-    resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==}
+  '@parcel/utils@2.13.0':
+    resolution: {integrity: sha512-tLHtce8s2gNFHC9kS5VkNrf6YX9ZjVigk/+ZeWpsde8lBpCaY8OHLubJMXSAdk6q26RDn8tCrdMkndlfautDIw==}
+    engines: {node: '>= 16.0.0'}
+
+  '@parcel/watcher-android-arm64@2.5.0':
+    resolution: {integrity: sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
-    resolution: {integrity: sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==}
+  '@parcel/watcher-darwin-arm64@2.5.0':
+    resolution: {integrity: sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@parcel/watcher-darwin-x64@2.4.1':
-    resolution: {integrity: sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==}
+  '@parcel/watcher-darwin-x64@2.5.0':
+    resolution: {integrity: sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
-    resolution: {integrity: sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==}
+  '@parcel/watcher-freebsd-x64@2.5.0':
+    resolution: {integrity: sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
-    resolution: {integrity: sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==}
+  '@parcel/watcher-linux-arm-glibc@2.5.0':
+    resolution: {integrity: sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  '@parcel/watcher-linux-arm-musl@2.5.0':
+    resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
-    resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
+  '@parcel/watcher-linux-arm64-glibc@2.5.0':
+    resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
-    resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
+  '@parcel/watcher-linux-arm64-musl@2.5.0':
+    resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
-    resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
+  '@parcel/watcher-linux-x64-glibc@2.5.0':
+    resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
-    resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
+  '@parcel/watcher-linux-x64-musl@2.5.0':
+    resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
 
-  '@parcel/watcher-win32-arm64@2.4.1':
-    resolution: {integrity: sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==}
+  '@parcel/watcher-win32-arm64@2.5.0':
+    resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@parcel/watcher-win32-ia32@2.4.1':
-    resolution: {integrity: sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==}
+  '@parcel/watcher-win32-ia32@2.5.0':
+    resolution: {integrity: sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==}
     engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
-  '@parcel/watcher-win32-x64@2.4.1':
-    resolution: {integrity: sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==}
+  '@parcel/watcher-win32-x64@2.5.0':
+    resolution: {integrity: sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
-  '@parcel/watcher@2.4.1':
-    resolution: {integrity: sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==}
+  '@parcel/watcher@2.5.0':
+    resolution: {integrity: sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@parcel/workers@2.12.0':
-    resolution: {integrity: sha512-zv5We5Jmb+ZWXlU6A+AufyjY4oZckkxsZ8J4dvyWL0W8IQvGO1JB4FGeryyttzQv3RM3OxcN/BpTGPiDG6keBw==}
-    engines: {node: '>= 12.0.0'}
+  '@parcel/workers@2.13.0':
+    resolution: {integrity: sha512-E9LryfGSog45j/ZSMyGSQVuuBWen2P0s/SEwIsXIYQFP/MGY9tL4ZUwVyfThHOI0kx8d8PfdNaSHBOZEIRrXvQ==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
-      '@parcel/core': ^2.12.0
+      '@parcel/core': ^2.13.0
 
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
@@ -6102,12 +6365,12 @@ packages:
     resolution: {integrity: sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==}
     engines: {node: '>=12.22.0'}
 
-  '@pnpm/npm-conf@2.2.2':
-    resolution: {integrity: sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==}
+  '@pnpm/npm-conf@2.3.1':
+    resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
     engines: {node: '>=12'}
 
-  '@polka/url@1.0.0-next.25':
-    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+  '@polka/url@1.0.0-next.28':
+    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
   '@protobufjs/aspromise@1.1.2':
     resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
@@ -6139,51 +6402,25 @@ packages:
   '@protobufjs/utf8@1.1.0':
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
-  '@radix-ui/number@1.0.1':
-    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==}
+  '@radix-ui/number@1.1.0':
+    resolution: {integrity: sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==}
 
   '@radix-ui/primitive@1.0.0':
     resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==}
 
-  '@radix-ui/primitive@1.0.1':
-    resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
-
-  '@radix-ui/react-arrow@1.0.3':
-    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.0.3':
-    resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@radix-ui/primitive@1.1.0':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
 
   '@radix-ui/react-compose-refs@1.0.0':
     resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-compose-refs@1.0.1':
-    resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+  '@radix-ui/react-compose-refs@1.1.0':
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -6191,13 +6428,13 @@ packages:
   '@radix-ui/react-context@1.0.0':
     resolution: {integrity: sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-context@1.0.1':
-    resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -6205,14 +6442,14 @@ packages:
   '@radix-ui/react-dialog@1.0.0':
     resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-direction@1.0.1':
-    resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==}
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -6220,791 +6457,803 @@ packages:
   '@radix-ui/react-dismissable-layer@1.0.0':
     resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
-  '@radix-ui/react-dismissable-layer@1.0.4':
-    resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
 
   '@radix-ui/react-focus-guards@1.0.0':
     resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
     peerDependencies:
-      react: ^18.2.0
-
-  '@radix-ui/react-focus-guards@1.0.1':
-    resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
   '@radix-ui/react-focus-scope@1.0.0':
     resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@radix-ui/react-id@1.0.0':
+    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@radix-ui/react-portal@1.0.0':
+    resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@radix-ui/react-presence@1.0.0':
+    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-focus-scope@1.0.3':
-    resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
+  '@radix-ui/react-presence@1.1.1':
+    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-id@1.0.0':
-    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+  '@radix-ui/react-primitive@1.0.0':
+    resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-id@1.0.1':
-    resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
+  '@radix-ui/react-primitive@2.0.0':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      '@types/react-dom': '*'
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@radix-ui/react-popper@1.1.2':
-    resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
+  '@radix-ui/react-scroll-area@1.2.1':
+    resolution: {integrity: sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==}
     peerDependencies:
       '@types/react': '*'
       '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-portal@1.0.0':
-    resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
+  '@radix-ui/react-slot@1.0.0':
+    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-portal@1.0.3':
-    resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
+  '@radix-ui/react-slot@1.1.0':
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-presence@1.0.0':
-    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+  '@radix-ui/react-use-callback-ref@1.0.0':
+    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-presence@1.0.1':
-    resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+  '@radix-ui/react-use-callback-ref@1.1.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-primitive@1.0.0':
-    resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
+  '@radix-ui/react-use-controllable-state@1.0.0':
+    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-primitive@1.0.3':
-    resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+  '@radix-ui/react-use-escape-keydown@1.0.0':
+    resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-roving-focus@1.0.4':
-    resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
+  '@radix-ui/react-use-layout-effect@1.0.0':
+    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-scroll-area@1.0.5':
-    resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
+  '@radix-ui/react-use-layout-effect@1.1.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
     peerDependencies:
       '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-select@1.2.2':
-    resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
+  '@react-aria/breadcrumbs@3.5.18':
+    resolution: {integrity: sha512-JRc6nAwQsjqsPw/3MlGwJcVo9ACZDbCOwWNNEnj8mR0fQopJO5xliq3qVzxDRZjdYrVUfTTyKXuepv/jMB1Y6Q==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-separator@1.0.3':
-    resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
+  '@react-aria/button@3.10.1':
+    resolution: {integrity: sha512-1vkRsjdvJrJleK73u7ClrW4Fw3mtr2hIs8M2yLZUpLoqHXnIYJwmeEMtzwyPFYKBc5jaHcGXw45any7Puy1aFA==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-slot@1.0.0':
-    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
+  '@react-aria/calendar@3.5.13':
+    resolution: {integrity: sha512-BJV5IwIH4UPDa6/HRTOBcM1wC+/6p823VrbocV9mr+rt5cCnuh+cqcCQKqUSEbfaTMPrmabjBuEaQIvqjLRYUA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-slot@1.0.2':
-    resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+  '@react-aria/checkbox@3.14.8':
+    resolution: {integrity: sha512-0qPJ3fiQQm7tiMHmIhR9iokr/MhhI2h6OWX/pDeIy/Gj63WSVk+Cka3NUhgMRGkguHKDZPKaFjK1oZQsXhCThQ==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-toggle-group@1.0.4':
-    resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
+  '@react-aria/combobox@3.10.5':
+    resolution: {integrity: sha512-1cjBJXWYuR0de+9IEU1MOer3H5FSlbrdaqlWo+M6vvMymBL2OjjwXiG3LY1mR65ZwHoTswXzt6/mujUKaxk5vw==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-toggle@1.0.3':
-    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+  '@react-aria/datepicker@3.11.4':
+    resolution: {integrity: sha512-TXe1TB/pSwrIQ5BIDr6NCAYjBaKgLN6cP5DlAihywHzqxbM6vO8GU6qbrZNSBrtfzZnrR/4z66Vlw6rhznLnqQ==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-toolbar@1.0.4':
-    resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==}
+  '@react-aria/dialog@3.5.19':
+    resolution: {integrity: sha512-I3AJWpAWCajj8Ama8qLQ18Tc37ODyk+Ym3haYEl5L4QnuFc0dU1sMJr15fppDGIxYjwvTTfctyhaSCz+S+wpkw==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-use-callback-ref@1.0.0':
-    resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
+  '@react-aria/focus@3.18.4':
+    resolution: {integrity: sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-use-callback-ref@1.0.1':
-    resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+  '@react-aria/focus@3.19.0':
+    resolution: {integrity: sha512-hPF9EXoUQeQl1Y21/rbV2H4FdUR2v+4/I0/vB+8U3bT1CJ+1AFj1hc/rqx2DqEwDlEwOHN+E4+mRahQmlybq0A==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-controllable-state@1.0.0':
-    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
+  '@react-aria/form@3.0.10':
+    resolution: {integrity: sha512-hWBrqEXxBxcpYTJv0telQKaiu2728EUFHta8/RGBqJ4+MhKKxI7+PnLoms78IuiK0MCYvukHfun1fuQvK+8jsg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-use-controllable-state@1.0.1':
-    resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+  '@react-aria/form@3.0.8':
+    resolution: {integrity: sha512-8S2QiyUdAgK43M3flohI0R+2rTyzH088EmgeRArA8euvJTL16cj/oSOKMEgWVihjotJ9n6awPb43ZhKboyNsMg==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-escape-keydown@1.0.0':
-    resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
+  '@react-aria/grid@3.10.5':
+    resolution: {integrity: sha512-9sLa+rpLgRZk7VX+tvdSudn1tdVgolVzhDLGWd95yS4UtPVMihTMGBrRoByY57Wxvh1V+7Ptw8kc6tsRSotYKg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@radix-ui/react-use-escape-keydown@1.0.3':
-    resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
+  '@react-aria/i18n@3.12.3':
+    resolution: {integrity: sha512-0Tp/4JwnCVNKDfuknPF+/xf3/woOc8gUjTU2nCjO3mCVb4FU7KFtjxQ2rrx+6hpIVG6g+N9qfMjRa/ggVH0CJg==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-layout-effect@1.0.0':
-    resolution: {integrity: sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==}
+  '@react-aria/interactions@3.22.4':
+    resolution: {integrity: sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@radix-ui/react-use-layout-effect@1.0.1':
-    resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+  '@react-aria/interactions@3.22.5':
+    resolution: {integrity: sha512-kMwiAD9E0TQp+XNnOs13yVJghiy8ET8L0cbkeuTgNI96sOAp/63EJ1FSrDf17iD8sdjt41LafwX/dKXW9nCcLQ==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-previous@1.0.1':
-    resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+  '@react-aria/label@3.7.12':
+    resolution: {integrity: sha512-u9xT90lAlgb7xiv+p0md9QwCHz65XL7tjS5e29e88Rs3ptkv3aQubTqxVOUTEwzbNUT4A1QqTjUm1yfHewIRUw==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-rect@1.0.1':
-    resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==}
+  '@react-aria/link@3.7.6':
+    resolution: {integrity: sha512-8buJznRWoOud8ApygUAz7TsshXNs6HDGB6YOYEJxy0WTKILn0U5NUymw2PWC14+bWRPelHMKmi6vbFBrJWzSzQ==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
 
-  '@radix-ui/react-use-size@1.0.1':
-    resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+  '@react-aria/listbox@3.13.5':
+    resolution: {integrity: sha512-tn32L/PIELIPYfDWCJ3OBRvvb/jCEvIzs6IYs8xCISV5W4853Je/WnA8wumWnz07U9sODYFmHUx2ThO7Z7dH7Q==}
     peerDependencies:
-      '@types/react': '*'
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@react-aria/live-announcer@3.4.0':
+    resolution: {integrity: sha512-VBxEdMq2SbtRbNTQNcDR2G6E3lEl5cJSBiHTTO8Ln1AL76LiazrylIXGgoktqzCfRQmyq0v8CHk1cNKDU9mvJg==}
 
-  '@radix-ui/react-visually-hidden@1.0.3':
-    resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
+  '@react-aria/menu@3.15.5':
+    resolution: {integrity: sha512-ygfS032hJSZCYYbMHnUSmUTVMaz99L9AUZ9kMa6g+k2X1t92K1gXfhYYkoClQD6+G0ch7zm0SwYFlUmRf9yOEA==}
     peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@react-aria/overlays@3.23.4':
+    resolution: {integrity: sha512-MZUW6SUlTWOwKuFTqUTxW5BnvdW3Y9cEwanWuz98NX3ST7JYe/3ZcZhb37/fGW4uoGHnQ9icEwVf0rbMrK2STg==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@react-aria/progress@3.4.17':
+    resolution: {integrity: sha512-5+01WNibLoNS5KcfU5p6vg7Lhz17plqqzv/uITx28zzj3saaj0VLR7n57Ig2fXe8ZEQoUS89BS3sIEsIf96S1A==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-aria/radio@3.10.9':
+    resolution: {integrity: sha512-XnU7zGTEku1mPvJweX4I3ifwEBtglEWYoO4CZGvA3eXj39X8iGwNZXUst1pdk2ykWUKbtwrmsWA6zG2OAGODYw==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-aria/selection@3.20.1':
+    resolution: {integrity: sha512-My0w8UC/7PAkz/1yZUjr2VRuzDZz1RrbgTqP36j5hsJx8RczDTjI4TmKtQNKG0ggaP4w83G2Og5JPTq3w3LMAw==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@react-aria/slider@3.7.13':
+    resolution: {integrity: sha512-yGlIpoOUKUoP0M3iI8ZHU001NASBOeZJSIQNfoS7HiqSR3bz+6BX7DRAM6B+CPHJleUtrdQ6JjO/8V8ZUV2kNQ==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-aria/spinbutton@3.6.9':
+    resolution: {integrity: sha512-m+uVJdiIc2LrLVDGjU7p8P2O2gUvTN26GR+NgH4rl+tUSuAB0+T1rjls/C+oXEqQjCpQihEB9Bt4M+VHpzmyjA==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
+
+  '@react-aria/ssr@3.9.6':
+    resolution: {integrity: sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: 18.2.0
 
-  '@radix-ui/rect@1.0.1':
-    resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
+  '@react-aria/ssr@3.9.7':
+    resolution: {integrity: sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==}
+    engines: {node: '>= 12'}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-aria/breadcrumbs@3.5.13':
-    resolution: {integrity: sha512-G1Gqf/P6kVdfs94ovwP18fTWuIxadIQgHsXS08JEVcFVYMjb9YjqnEBaohUxD1tq2WldMbYw53ahQblT4NTG+g==}
+  '@react-aria/switch@3.6.9':
+    resolution: {integrity: sha512-w7xIywpR6llm22DXYOObZ2Uqvsw+gNmxdJ86h8+YRtpSkFnPMhXtTMv3RXpEGYhPTt/YDIqfxiluF1E2IHGwIA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/button@3.9.5':
-    resolution: {integrity: sha512-dgcYR6j8WDOMLKuVrtxzx4jIC05cVKDzc+HnPO8lNkBAOfjcuN5tkGRtIjLtqjMvpZHhQT5aDbgFpIaZzxgFIg==}
+  '@react-aria/table@3.15.5':
+    resolution: {integrity: sha512-bdNZF0ZoNOfyOEIK/ctv0llacaCNk8mv+GGy8mwh5bZeJjd8KuDIpYQtZJYvf2YVvPYRWyXRhF0/B229m65f/g==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@react-aria/calendar@3.5.8':
-    resolution: {integrity: sha512-Whlp4CeAA5/ZkzrAHUv73kgIRYjw088eYGSc+cvSOCxfrc/2XkBm9rNrnSBv0DvhJ8AG0Fjz3vYakTmF3BgZBw==}
+  '@react-aria/tabs@3.9.7':
+    resolution: {integrity: sha512-f78P2Y9ZCYtwOnteku9mPVIk21xSSREYWaQPtA9ebSgVbeR5ya6RpaX9ISc9cd0HEF3Av+hZYyS1pNXXWymv9g==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@react-aria/checkbox@3.14.3':
-    resolution: {integrity: sha512-EtBJL6iu0gvrw3A4R7UeVLR6diaVk/mh4kFBc7c8hQjpEJweRr4hmJT3hrNg3MBcTWLxFiMEXPGgWEwXDBygtA==}
+  '@react-aria/textfield@3.14.10':
+    resolution: {integrity: sha512-vG44FgxwfJUF2S6tRG+Sg646DDEgs0CO9RYniafEOHz8rwcNIH3lML7n8LAfzQa+BjBY28+UF0wmqEvd6VCzCQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/combobox@3.9.1':
-    resolution: {integrity: sha512-SpK92dCmT8qn8aEcUAihRQrBb5LZUhwIbDExFII8PvUvEFy/PoQHXIo3j1V29WkutDBDpMvBv/6XRCHGXPqrhQ==}
+  '@react-aria/toggle@3.10.10':
+    resolution: {integrity: sha512-QwMT/vTNrbrILxWVHfd9zVQ3mV2NdBwyRu+DphVQiFAXcmc808LEaIX2n0lI6FCsUDC9ZejCyvzd91/YemdZ1Q==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/datepicker@3.10.1':
-    resolution: {integrity: sha512-4HZL593nrNMa1GjBmWEN/OTvNS6d3/16G1YJWlqiUlv11ADulSbqBIjMmkgwrJVFcjrgqtXFy+yyrTA/oq94Zw==}
+  '@react-aria/toggle@3.10.9':
+    resolution: {integrity: sha512-dtfnyIU2/kcH9rFAiB48diSmaXDv45K7UCuTkMQLjbQa3QHC1oYNbleVN/VdGyAMBsIWtfl8L4uuPrAQmDV/bg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/dialog@3.5.14':
-    resolution: {integrity: sha512-oqDCjQ8hxe3GStf48XWBf2CliEnxlR9GgSYPHJPUc69WBj68D9rVcCW3kogJnLAnwIyf3FnzbX4wSjvUa88sAQ==}
+  '@react-aria/tooltip@3.7.9':
+    resolution: {integrity: sha512-TqVJ7YqaP/enxNyA1QGr43w4nBZmOs6Hb/pROMS5afbX7gHgMVFn0lTRc6DC2cvcfgYc4WICs2QiQMniZt/E7A==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/focus@3.17.1':
-    resolution: {integrity: sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==}
+  '@react-aria/utils@3.24.1':
+    resolution: {integrity: sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/form@3.0.5':
-    resolution: {integrity: sha512-n290jRwrrRXO3fS82MyWR+OKN7yznVesy5Q10IclSTVYHHI3VI53xtAPr/WzNjJR1um8aLhOcDNFKwnNIUUCsQ==}
+  '@react-aria/utils@3.26.0':
+    resolution: {integrity: sha512-LkZouGSjjQ0rEqo4XJosS4L3YC/zzQkfRM3KoqK6fUOmUJ9t0jQ09WjiF+uOoG9u+p30AVg3TrZRUWmoTS+koQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/grid@3.9.1':
-    resolution: {integrity: sha512-fGEZqAEaS8mqzV/II3N4ndoNWegIcbh+L3PmKbXdpKKUP8VgMs/WY5rYl5WAF0f5RoFwXqx3ibDLeR9tKj/bOg==}
+  '@react-aria/virtualizer@3.10.1':
+    resolution: {integrity: sha512-y34w+n/B3nwwj18QHIZlkNj5Fn2rt5CbQE4BBWAM8jYZ5ypwF77i2toxhGTuk1Oo1/hgTX7JYIgDIAQbNraBcg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@react-aria/i18n@3.11.1':
-    resolution: {integrity: sha512-vuiBHw1kZruNMYeKkTGGnmPyMnM5T+gT8bz97H1FqIq1hQ6OPzmtBZ6W6l6OIMjeHI5oJo4utTwfZl495GALFQ==}
+  '@react-aria/visually-hidden@3.8.17':
+    resolution: {integrity: sha512-WFgny1q2CbxxU6gu46TGQXf1DjsnuSk+RBDP4M7bm1mUVZzoCp7U7AtjNmsBrWg0NejxUdgD7+7jkHHCQ91qRA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/interactions@3.21.3':
-    resolution: {integrity: sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==}
+  '@react-bootstrap/babel-preset@2.2.0':
+    resolution: {integrity: sha512-lJNNow6APKf1pH5/R60i7c/QGYbx/VCKdqzWWIMDyyXvNDGFwcM2T0DNOBqe9Rjz8rEROS/mKGLN3C1Im6+adQ==}
+
+  '@react-hook/intersection-observer@3.1.2':
+    resolution: {integrity: sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/label@3.7.8':
-    resolution: {integrity: sha512-MzgTm5+suPA3KX7Ug6ZBK2NX9cin/RFLsv1BdafJ6CZpmUSpWnGE/yQfYUB7csN7j31OsZrD3/P56eShYWAQfg==}
+  '@react-hook/passive-layout-effect@1.2.1':
+    resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/link@3.7.1':
-    resolution: {integrity: sha512-a4IaV50P3fXc7DQvEIPYkJJv26JknFbRzFT5MJOMgtzuhyJoQdILEUK6XHYjcSSNCA7uLgzpojArVk5Hz3lCpw==}
+  '@react-stately/calendar@3.5.5':
+    resolution: {integrity: sha512-HzaiDRhrmaYIly8hRsjjIrydLkldiw1Ws6T/130NLQOt+VPwRW/x0R+nil42mA9LZ6oV0XN0NpmG5tn7TaKRGw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/listbox@3.12.1':
-    resolution: {integrity: sha512-7JiUp0NGykbv/HgSpmTY1wqhuf/RmjFxs1HZcNaTv8A+DlzgJYc7yQqFjP3ZA/z5RvJFuuIxggIYmgIFjaRYdA==}
+  '@react-stately/checkbox@3.6.9':
+    resolution: {integrity: sha512-JrY3ecnK/SSJPxw+qhGhg3YV4e0CpUcPDrVwY3mSiAE932DPd19xr+qVCknJ34H7JYYt/q0l2z0lmgPnl96RTg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/live-announcer@3.3.4':
-    resolution: {integrity: sha512-w8lxs35QrRrn6pBNzVfyGOeqWdxeVKf9U6bXIVwhq7rrTqRULL8jqy8RJIMfIs1s8G5FpwWYjyBOjl2g5Cu1iA==}
+  '@react-stately/collections@3.10.9':
+    resolution: {integrity: sha512-plyrng6hOQMG8LrjArMA6ts/DgWyXln3g90/hFNbqe/hdVYF53sDVsj8Jb+5LtoYTpiAlV6eOvy1XR0vPZUf8w==}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-aria/menu@3.14.1':
-    resolution: {integrity: sha512-BYliRb38uAzq05UOFcD5XkjA5foQoXRbcH3ZufBsc4kvh79BcP1PMW6KsXKGJ7dC/PJWUwCui6QL1kUg8PqMHA==}
+  '@react-stately/collections@3.11.0':
+    resolution: {integrity: sha512-TiJeJjHMPSbbeAhmCXLJNSCk0fa5XnCvEuYw6HtQzDnYiq1AD7KAwkpjC5NfKkjqF3FLXs/v9RDm/P69q6rYzw==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/overlays@3.22.1':
-    resolution: {integrity: sha512-GHiFMWO4EQ6+j6b5QCnNoOYiyx1Gk8ZiwLzzglCI4q1NY5AG2EAmfU4Z1+Gtrf2S5Y0zHbumC7rs9GnPoGLUYg==}
+  '@react-stately/combobox@3.10.0':
+    resolution: {integrity: sha512-4W4HCCjjoddW/LZM3pSSeLoV7ncYXlaICKmqlBcbtLR5jY4U5Kx+pPpy3oJ1vCdjDHatIxZ0tVKEBP7vBQVeGQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/progress@3.4.13':
-    resolution: {integrity: sha512-YBV9bOO5JzKvG8QCI0IAA00o6FczMgIDiK8Q9p5gKorFMatFUdRayxlbIPoYHMi+PguLil0jHgC7eOyaUcrZ0g==}
+  '@react-stately/data@3.11.4':
+    resolution: {integrity: sha512-PbnUQxeE6AznSuEWYnRmrYQ9t5z1Asx98Jtrl96EeA6Iapt9kOjTN9ySqCxtPxMKleb1NIqG3+uHU3veIqmLsg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/radio@3.10.4':
-    resolution: {integrity: sha512-3fmoMcQtCpgjTwJReFjnvIE/C7zOZeCeWUn4JKDqz9s1ILYsC3Rk5zZ4q66tFn6v+IQnecrKT52wH6+hlVLwTA==}
+  '@react-stately/data@3.11.7':
+    resolution: {integrity: sha512-2YJ+Lmca18f/h7jiZiU9j2IhBJl6BFO1BWlwvcCAH/eCWTdveX8gzsUdW++0szzpJaoCilTCYoi8z7QWyVH9jQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/selection@3.18.1':
-    resolution: {integrity: sha512-GSqN2jX6lh7v+ldqhVjAXDcrWS3N4IsKXxO6L6Ygsye86Q9q9Mq9twWDWWu5IjHD6LoVZLUBCMO+ENGbOkyqeQ==}
+  '@react-stately/datepicker@3.10.3':
+    resolution: {integrity: sha512-6PJW1QMwk6BQMktV9L6DA4f2rfAdLfbq3iTNLy4qxd5IfNPLMUZiJGGTj+cuqx0WcEl+q5irp+YhKBpbmhPZHg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/slider@3.7.8':
-    resolution: {integrity: sha512-MYvPcM0K8jxEJJicUK2+WxUkBIM/mquBxOTOSSIL3CszA80nXIGVnLlCUnQV3LOUzpWtabbWaZokSPtGgOgQOw==}
+  '@react-stately/flags@3.0.4':
+    resolution: {integrity: sha512-RNJEkOALwKg+JeYsfNlfPc4GXm7hiBLX0yuHOkRapWEyDOfi0cinkV/TZG4goOZdQ5tBpHmemf2qqiHAxqHlzQ==}
+
+  '@react-stately/form@3.0.5':
+    resolution: {integrity: sha512-J3plwJ63HQz109OdmaTqTA8Qhvl3gcYYK7DtgKyNP6mc/Me2Q4tl2avkWoA+22NRuv5m+J8TpBk4AVHUEOwqeQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/spinbutton@3.6.5':
-    resolution: {integrity: sha512-0aACBarF/Xr/7ixzjVBTQ0NBwwwsoGkf5v6AVFVMTC0uYMXHTALvRs+ULHjHMa5e/cX/aPlEvaVT7jfSs+Xy9Q==}
+  '@react-stately/form@3.0.6':
+    resolution: {integrity: sha512-KMsxm3/V0iCv/6ikt4JEjVM3LW2AgCzo7aNotMzRobtwIo0RwaUo7DQNY00rGgFQ3/IjzI6DcVo13D+AVE/zXg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/ssr@3.9.4':
-    resolution: {integrity: sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==}
-    engines: {node: '>= 12'}
+  '@react-stately/grid@3.9.3':
+    resolution: {integrity: sha512-P5KgCNYwm/n8bbLx6527li89RQWoESikrsg2MMyUpUd6IJ321t2pGONGRRQzxE0SBMolPRDJKV0Do2OlsjYKhQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/switch@3.6.4':
-    resolution: {integrity: sha512-2nVqz4ZuJyof47IpGSt3oZRmp+EdS8wzeDYgf42WHQXrx4uEOk1mdLJ20+NnsYhj/2NHZsvXVrjBeKMjlMs+0w==}
+  '@react-stately/layout@3.13.9':
+    resolution: {integrity: sha512-JCj2cnvRbBjah9LFZbBXMdKkoKuEpzn6hvYBw7h0fNIhNGISpiI1TW4ya1X34kD2vcv/3dc31KV/UqmI4hJCQw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/table@3.14.1':
-    resolution: {integrity: sha512-WaPgQe4zQF5OaluO5rm+Y2nEoFR63vsLd4BT4yjK1uaFhKhDY2Zk+1SCVQvBLLKS4WK9dhP05nrNzT0vp/ZPOw==}
+  '@react-stately/list@3.11.0':
+    resolution: {integrity: sha512-O+BxXcbtoLZWn4QIT54RoFUaM+QaJQm6s0ZBJ3Jv4ILIhukVOc55ra+aWMVlXFQSpbf6I3hyVP6cz1yyvd5Rtw==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/tabs@3.9.1':
-    resolution: {integrity: sha512-S5v/0sRcOaSXaJYZuuy1ZVzYc7JD4sDyseG1133GjyuNjJOFHgoWMb+b4uxNIJbZxnLgynn/ZDBZSO+qU+fIxw==}
+  '@react-stately/menu@3.8.3':
+    resolution: {integrity: sha512-sV63V+cMgzipx/N7dq5GaXoItfXIfFEpCtlk3PM2vKstlCJalszXrdo+x996bkeU96h0plB7znAlhlXOeTKzUg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/textfield@3.14.5':
-    resolution: {integrity: sha512-hj7H+66BjB1iTKKaFXwSZBZg88YT+wZboEXZ0DNdQB2ytzoz/g045wBItUuNi4ZjXI3P+0AOZznVMYadWBAmiA==}
+  '@react-stately/overlays@3.6.11':
+    resolution: {integrity: sha512-usuxitwOx4FbmOW7Og4VM8R8ZjerbHZLLbFaxZW7pWLs7Ypway1YhJ3SWcyNTYK7NEk4o602kSoU6MSev1Vgag==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/toggle@3.10.4':
-    resolution: {integrity: sha512-bRk+CdB8QzrSyGNjENXiTWxfzYKRw753iwQXsEAU7agPCUdB8cZJyrhbaUoD0rwczzTp2zDbZ9rRbUPdsBE2YQ==}
+  '@react-stately/radio@3.10.8':
+    resolution: {integrity: sha512-VRq6Gzsbk3jzX6hdrSoDoSra9vLRsOi2pLkvW/CMrJ0GSgMwr8jjvJKnNFvYJ3eYQb20EwkarsOAfk7vPSIt/Q==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/tooltip@3.7.4':
-    resolution: {integrity: sha512-+XRx4HlLYqWY3fB8Z60bQi/rbWDIGlFUtXYbtoa1J+EyRWfhpvsYImP8qeeNO/vgjUtDy1j9oKa8p6App9mBMQ==}
+  '@react-stately/select@3.6.8':
+    resolution: {integrity: sha512-fLAVzGeYSdYdBdrEVws6Pb1ywFPdapA0eWphoW5s3fS0/pKcVWwbCHeHlaBEi1ISyqEubQZFGQdeFKm/M46Hew==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/utils@3.24.1':
-    resolution: {integrity: sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==}
+  '@react-stately/selection@3.17.0':
+    resolution: {integrity: sha512-It3LRTaFOavybuDBvBH2mvCh73OL4awqvN4tZ0JzLzMtaYSBe9+YmFasYrzB0o7ca17B2q1tpUmsNWaAgIqbLA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/virtualizer@3.10.1':
-    resolution: {integrity: sha512-y34w+n/B3nwwj18QHIZlkNj5Fn2rt5CbQE4BBWAM8jYZ5ypwF77i2toxhGTuk1Oo1/hgTX7JYIgDIAQbNraBcg==}
+  '@react-stately/slider@3.5.8':
+    resolution: {integrity: sha512-EDgbrxMq1w3+XTN72MGl3YtAG/j65EYX1Uc3Fh56K00+inJbTdRWyYTrb3NA310fXCd0WFBbzExuH2ohlKQycg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  '@react-aria/visually-hidden@3.8.12':
-    resolution: {integrity: sha512-Bawm+2Cmw3Xrlr7ARzl2RLtKh0lNUdJ0eNqzWcyx4c0VHUAWtThmH5l+HRqFUGzzutFZVo89SAy40BAbd0gjVw==}
+  '@react-stately/table@3.12.2':
+    resolution: {integrity: sha512-dUcsrdALylhWz6exqIoqtR/dnrzjIAptMyAUPT378Y/mCYs4PxKkHSvtPEQrZhdQS1ALIIgfeg9KUVIempoXPw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-bootstrap/babel-preset@2.2.0':
-    resolution: {integrity: sha512-lJNNow6APKf1pH5/R60i7c/QGYbx/VCKdqzWWIMDyyXvNDGFwcM2T0DNOBqe9Rjz8rEROS/mKGLN3C1Im6+adQ==}
+  '@react-stately/table@3.12.3':
+    resolution: {integrity: sha512-8uGrLcNJYeMbFtzRQZFWCBj5kV+7v3jzwoKIL1j9TmYUKow1PTDMQbPJpAZLQhnC2wVMlaFVgDbedSlbBij7Zg==}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-hook/intersection-observer@3.1.1':
-    resolution: {integrity: sha512-OTDx8/wFaRvzFtKl1dEUEXSOqK2zVJHporiTTdC2xO++0e9FEx9wIrPis5q3lqtXeZH9zYGLbk+aB75qNFbbuw==}
+  '@react-stately/tabs@3.6.10':
+    resolution: {integrity: sha512-F7wfoiNsrBy7c02AYHyE1USGgj05HQ0hp7uXmQjp2LEa+AA0NKKi3HdswTHHySxb0ZRuoEE7E7vp/gXQYx2/Ow==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-hook/passive-layout-effect@1.2.1':
-    resolution: {integrity: sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==}
+  '@react-stately/toggle@3.7.8':
+    resolution: {integrity: sha512-ySOtkByvIY54yIu8IZ4lnvomQA0H+/mkZnd6T5fKN3tjvIzHmkUk3TAPmNInUxHX148tSW6mWwec0xvjYqEd6w==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/calendar@3.5.1':
-    resolution: {integrity: sha512-7l7QhqGUJ5AzWHfvZzbTe3J4t72Ht5BmhW4hlVI7flQXtfrmYkVtl3ZdytEZkkHmWGYZRW9b4IQTQGZxhtlElA==}
+  '@react-stately/toggle@3.8.0':
+    resolution: {integrity: sha512-pyt/k/J8BwE/2g6LL6Z6sMSWRx9HEJB83Sm/MtovXnI66sxJ2EfQ1OaXB7Su5PEL9OMdoQF6Mb+N1RcW3zAoPw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/checkbox@3.6.5':
-    resolution: {integrity: sha512-IXV3f9k+LtmfQLE+DKIN41Q5QB/YBLDCB1YVx5PEdRp52S9+EACD5683rjVm8NVRDwjMi2SP6RnFRk7fVb5Azg==}
+  '@react-stately/tooltip@3.4.13':
+    resolution: {integrity: sha512-zQ+8FQ7Pi0Cz852dltXb6yaryjE18K3byK4tIO3e5vnrZHEGvfdxowc+v9ak5UV93kVrYoOVmfZHRcEaTXTBNA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/collections@3.10.7':
-    resolution: {integrity: sha512-KRo5O2MWVL8n3aiqb+XR3vP6akmHLhLWYZEmPKjIv0ghQaEebBTrN3wiEjtd6dzllv0QqcWvDLM1LntNfJ2TsA==}
+  '@react-stately/tree@3.8.1':
+    resolution: {integrity: sha512-LOdkkruJWch3W89h4B/bXhfr0t0t1aRfEp+IMrrwdRAl23NaPqwl5ILHs4Xu5XDHqqhg8co73pHrJwUyiTWEjw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/combobox@3.8.4':
-    resolution: {integrity: sha512-iLVGvKRRz0TeJXZhZyK783hveHpYA6xovOSdzSD+WGYpiPXo1QrcrNoH3AE0Z2sHtorU+8nc0j58vh5PB+m2AA==}
+  '@react-stately/tree@3.8.5':
+    resolution: {integrity: sha512-0/tYhsKWQQJTOZFDwh8hY3Qk6ejNFRldGrLeK5kS22UZdvsMFyh7WAi40FTCJy561/VoB0WqQI4oyNPOa9lYWg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/data@3.11.4':
-    resolution: {integrity: sha512-PbnUQxeE6AznSuEWYnRmrYQ9t5z1Asx98Jtrl96EeA6Iapt9kOjTN9ySqCxtPxMKleb1NIqG3+uHU3veIqmLsg==}
+  '@react-stately/utils@3.10.1':
+    resolution: {integrity: sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/datepicker@3.9.4':
-    resolution: {integrity: sha512-yBdX01jn6gq4NIVvHIqdjBUPo+WN8Bujc4OnPw+ZnfA4jI0eIgq04pfZ84cp1LVXW0IB0VaCu1AlQ/kvtZjfGA==}
+  '@react-stately/utils@3.10.3':
+    resolution: {integrity: sha512-moClv7MlVSHpbYtQIkm0Cx+on8Pgt1XqtPx6fy9rQFb2DNc9u1G3AUVnqA17buOkH1vLxAtX4MedlxMWyRCYYA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/flags@3.0.3':
-    resolution: {integrity: sha512-/ha7XFA0RZTQsbzSPwu3KkbNMgbvuM0GuMTYLTBWpgBrovBNTM+QqI/PfZTdHg8PwCYF4H5Y8gjdSpdulCvJFw==}
+  '@react-stately/utils@3.10.4':
+    resolution: {integrity: sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-stately/form@3.0.3':
-    resolution: {integrity: sha512-92YYBvlHEWUGUpXgIaQ48J50jU9XrxfjYIN8BTvvhBHdD63oWgm8DzQnyT/NIAMzdLnhkg7vP+fjG8LjHeyIAg==}
+  '@react-stately/utils@3.10.5':
+    resolution: {integrity: sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/grid@3.8.7':
-    resolution: {integrity: sha512-he3TXCLAhF5C5z1/G4ySzcwyt7PEiWcVIupxebJQqRyFrNWemSuv+7tolnStmG8maMVIyV3P/3j4eRBbdSlOIg==}
+  '@react-stately/virtualizer@3.7.1':
+    resolution: {integrity: sha512-voHgE6EQ+oZaLv6u2umKxakvIKNkCQuUihqKACTjdslp7SJh4Mvs3oLBI0hf0JOh+rCcFIKDvQtFwy1fXFRYBA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/layout@3.13.9':
-    resolution: {integrity: sha512-JCj2cnvRbBjah9LFZbBXMdKkoKuEpzn6hvYBw7h0fNIhNGISpiI1TW4ya1X34kD2vcv/3dc31KV/UqmI4hJCQw==}
+  '@react-stately/virtualizer@4.1.0':
+    resolution: {integrity: sha512-MOaqpY3NloXrpCBvVUb3HL1p3Bh4YRtUq8D2ufC909u5vM6n6G5Swk1XPJ9KHfaftGhb5serwLkm2/Aha5CTbA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/list@3.10.5':
-    resolution: {integrity: sha512-fV9plO+6QDHiewsYIhboxcDhF17GO95xepC5ki0bKXo44gr14g/LSo/BMmsaMnV+1BuGdBunB05bO4QOIaigXA==}
+  '@react-types/accordion@3.0.0-alpha.24':
+    resolution: {integrity: sha512-hwDT4TJH7aHCG8m9QsTP+7xgW7x7k2TY+WHlMRr6qDS6WhTCwd41dCdagxC0SZtulzZuWqISBxZifVrh4Tynew==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/menu@3.7.1':
-    resolution: {integrity: sha512-mX1w9HHzt+xal1WIT2xGrTQsoLvDwuB2R1Er1MBABs//MsJzccycatcgV/J/28m6tO5M9iuFQQvLV+i1dCtodg==}
+  '@react-types/breadcrumbs@3.7.8':
+    resolution: {integrity: sha512-+BW2a+PrY8ArZ+pKecz13oJFrUAhthvXx17o3x0BhWUhRpAdtmTYt2hjw8zNanm2j0Kvgo1HYKgvtskCRxYcOA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/overlays@3.6.7':
-    resolution: {integrity: sha512-6zp8v/iNUm6YQap0loaFx6PlvN8C0DgWHNlrlzMtMmNuvjhjR0wYXVaTfNoUZBWj25tlDM81ukXOjpRXg9rLrw==}
+  '@react-types/button@3.10.0':
+    resolution: {integrity: sha512-rAyU+N9VaHLBdZop4zasn8IDwf9I5Q1EzHUKMtzIFf5aUlMUW+K460zI/l8UESWRSWAXK9/WPSXGxfcoCEjvAA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/radio@3.10.4':
-    resolution: {integrity: sha512-kCIc7tAl4L7Hu4Wt9l2jaa+MzYmAJm0qmC8G8yPMbExpWbLRu6J8Un80GZu+JxvzgDlqDyrVvyv9zFifwH/NkQ==}
+  '@react-types/calendar@3.4.10':
+    resolution: {integrity: sha512-PyjqxwJxSW2IpQx6y0D9O34fRCWn1gv9q0qFhgaIigIQrPg8zTE/CC7owHLxAtgCnnCt8exJ5rqi414csaHKlA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/select@3.6.4':
-    resolution: {integrity: sha512-whZgF1N53D0/dS8tOFdrswB0alsk5Q5620HC3z+5f2Hpi8gwgAZ8TYa+2IcmMYRiT+bxVuvEc/NirU9yPmqGbA==}
+  '@react-types/checkbox@3.8.4':
+    resolution: {integrity: sha512-fvZrlQmlFNsYHZpl7GVmyYQlKdUtO5MczMSf8z3TlSiCb5Kl3ha9PsZgLhJqGuVnzB2ArIBz0eZrYa3k0PhcpA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/selection@3.15.1':
-    resolution: {integrity: sha512-6TQnN9L0UY9w19B7xzb1P6mbUVBtW840Cw1SjgNXCB3NPaCf59SwqClYzoj8O2ZFzMe8F/nUJtfU1NS65/OLlw==}
+  '@react-types/checkbox@3.9.0':
+    resolution: {integrity: sha512-9hbHx0Oo2Hp5a8nV8Q75LQR0DHtvOIJbFaeqESSopqmV9EZoYjtY/h0NS7cZetgahQgnqYWQi44XGooMDCsmxA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/slider@3.5.4':
-    resolution: {integrity: sha512-Jsf7K17dr93lkNKL9ij8HUcoM1sPbq8TvmibD6DhrK9If2lje+OOL8y4n4qreUnfMT56HCAeS9wCO3fg3eMyrw==}
+  '@react-types/combobox@3.13.0':
+    resolution: {integrity: sha512-kH/a+Fjpr54M2JbHg9RXwMjZ9O+XVsdOuE5JCpWRibJP1Mfl1md8gY6y6zstmVY8COrSqFvMZWB+PzwaTWjTGw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/table@3.11.8':
-    resolution: {integrity: sha512-EdyRW3lT1/kAVDp5FkEIi1BQ7tvmD2YgniGdLuW/l9LADo0T+oxZqruv60qpUS6sQap+59Riaxl91ClDxrJnpg==}
+  '@react-types/datepicker@3.8.3':
+    resolution: {integrity: sha512-Y4qfPRBB6uzocosCOWSYMuwiZ3YXwLWQYiFB4KCglkvHyltbNz76LgoBEnclYA5HjwosIk4XywiXvHSYry8JnQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/tabs@3.6.6':
-    resolution: {integrity: sha512-sOLxorH2uqjAA+v1ppkMCc2YyjgqvSGeBDgtR/lyPSDd4CVMoTExszROX2dqG0c8il9RQvzFuufUtQWMY6PgSA==}
+  '@react-types/dialog@3.5.13':
+    resolution: {integrity: sha512-9k8daVcAqQsySkzDY6NIVlyGxtpEip4TKuLyzAehthbv78GQardD5fHdjQ6eXPRS4I2qZrmytrFFrlOnwWVGHw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/toggle@3.7.4':
-    resolution: {integrity: sha512-CoYFe9WrhLkDP4HGDpJYQKwfiYCRBAeoBQHv+JWl5eyK61S8xSwoHsveYuEZ3bowx71zyCnNAqWRrmNOxJ4CKA==}
+  '@react-types/form@3.7.8':
+    resolution: {integrity: sha512-0wOS97/X0ijTVuIqik1lHYTZnk13QkvMTKvIEhM7c6YMU3vPiirBwLbT2kJiAdwLiymwcCkrBdDF1NTRG6kPFA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/tooltip@3.4.9':
-    resolution: {integrity: sha512-P7CDJsdoKarz32qFwf3VNS01lyC+63gXpDZG31pUu+EO5BeQd4WKN/AH1Beuswpr4GWzxzFc1aXQgERFGVzraA==}
+  '@react-types/grid@3.2.8':
+    resolution: {integrity: sha512-6PJrpukwMqlv3IhJSDkJuVbhHM8Oe6hd2supWqd9adMXrlSP7QHt9a8SgFcFblCCTx8JzUaA0PvY5sTudcEtOQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/tree@3.8.1':
-    resolution: {integrity: sha512-LOdkkruJWch3W89h4B/bXhfr0t0t1aRfEp+IMrrwdRAl23NaPqwl5ILHs4Xu5XDHqqhg8co73pHrJwUyiTWEjw==}
+  '@react-types/grid@3.2.9':
+    resolution: {integrity: sha512-eMw0d2UIZ4QTzGgD1wGGPw0cv67KjAOCp4TcwWjgDV7Wa5SVV/UvOmpnIVDyfhkG/4KRI5OR9h+isy76B726qA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/utils@3.10.1':
-    resolution: {integrity: sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==}
+  '@react-types/link@3.5.7':
+    resolution: {integrity: sha512-2WyaVmm1qr9UrSG3Dq6iz+2ziuVp+DH8CsYZ9CA6aNNb6U18Hxju3LTPb4a5gM0eC7W0mQGNBmrgGlAdDZEJOw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-stately/virtualizer@3.7.1':
-    resolution: {integrity: sha512-voHgE6EQ+oZaLv6u2umKxakvIKNkCQuUihqKACTjdslp7SJh4Mvs3oLBI0hf0JOh+rCcFIKDvQtFwy1fXFRYBA==}
+  '@react-types/link@3.5.8':
+    resolution: {integrity: sha512-l/YGXddgAbLnIT7ekftXrK1D4n8NlLQwx0d4usyZpaxP1KwPzuwng20DxynamLc1atoKBqbUtZAnz32pe7vYgw==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/listbox@3.5.2':
+    resolution: {integrity: sha512-ML/Bt/MeO0FiixcuFQ+smpu1WguxTOqHDjSnhc1vcNxVQFWQOhyVy01LAY2J/T9TjfjyYGD41vyMTI0f6fcLEQ==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/menu@3.9.12':
+    resolution: {integrity: sha512-1SPnkHKJdvOfwv9fEgK1DI6DYRs4D3hW2XcWlLhVXSjaC68CzOHGwFhKIKvZiDTW/11L770PRSEloIxHR09uFQ==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/overlays@3.8.10':
+    resolution: {integrity: sha512-IcnB+VYfAJazRjWhBKZTmVMh3KTp/B1rRbcKkPx6t8djP9UQhKcohP7lAALxjJ56Jjz/GFC6rWyUcnYH0NFVRA==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/progress@3.5.7':
+    resolution: {integrity: sha512-EqMDHmlpoZUZzTjdejGIkSM0pS2LBI9NdadHf3bDNTycHv+5L1xpMHUg8RGOW8a3sRVLRvfN1aO9l75QZkyj+w==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/radio@3.8.4':
+    resolution: {integrity: sha512-GCuOwQL19iwKa74NAIk9hv4ivyI8oW1+ZCuc2fzyDdeQjzTIlv3qrIyShwpVy1IoI7/4DYTMZm/YXPoKhu5TTA==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/select@3.9.7':
+    resolution: {integrity: sha512-Jva4ixfB4EEdy+WmZkUoLiQI7vVfHPxM73VuL7XDxvAO+YKiIztDTcU720QVNhxTMmQvCxfRBXWar8aodCjLiw==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/shared@3.24.1':
+    resolution: {integrity: sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+
+  '@react-types/shared@3.25.0':
+    resolution: {integrity: sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-types/accordion@3.0.0-alpha.21':
-    resolution: {integrity: sha512-cbE06jH/ZoI+1898xd7ocQ/A/Rtkz8wTJAVOYgc8VRY1SYNQ/XZTGH5T6dD6aERAmiDwL/kjD7xhsE80DyaEKA==}
+  '@react-types/shared@3.26.0':
+    resolution: {integrity: sha512-6FuPqvhmjjlpEDLTiYx29IJCbCNWPlsyO+ZUmCUXzhUv2ttShOXfw8CmeHWHftT/b2KweAWuzqSlfeXPR76jpw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-types/breadcrumbs@3.7.5':
-    resolution: {integrity: sha512-lV9IDYsMiu2TgdMIjEmsOE0YWwjb3jhUNK1DCZZfq6uWuiHLgyx2EncazJBUWSjHJ4ta32j7xTuXch+8Ai6u/A==}
+  '@react-types/slider@3.7.6':
+    resolution: {integrity: sha512-z72wnEzSge6qTD9TUoUPp1A4j4jXk/MVii6rGE78XeE/Pq7HyyjU5bCagryMr9PC9MKa/oTiHcshKqWBDf57GA==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-types/button@3.9.4':
-    resolution: {integrity: sha512-raeQBJUxBp0axNF74TXB8/H50GY8Q3eV6cEKMbZFP1+Dzr09Ngv0tJBeW0ewAxAguNH5DRoMUAUGIXtSXskVdA==}
+  '@react-types/switch@3.5.6':
+    resolution: {integrity: sha512-gJ8t2yTCgcitz4ON4ELcLLmtlDkn2MUjjfu3ez/cwA1X/NUluPYkhXj5Z6H+KOlnveqrKCZDRoTgK74cQ6Cvfg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+
+  '@react-types/table@3.10.1':
+    resolution: {integrity: sha512-xsNh0Gm4GtNeSknZqkMsfGvc94fycmfhspGO+FzQKim2hB5k4yILwd+lHYQ2UKW6New9GVH/zN2Pd3v67IeZ2g==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/table@3.10.2':
+    resolution: {integrity: sha512-YzA4hcsYfnFFpA2UyGb1KKhLpWgaj5daApqjp126tCIosl8k1KxZmhKD50cwH0Jm19lALJseqo5VdlcJtcr4qg==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/tabs@3.3.10':
+    resolution: {integrity: sha512-s/Bw/HCIdWJPBw4O703ghKqhjGsIerRMIDxA88hbQYzfTDD6bkFDjCnsP2Tyy1G8Dg2rSPFUEE+k+PpLzqeEfQ==}
+    peerDependencies:
+      react: 18.2.0
+
+  '@react-types/textfield@3.9.3':
+    resolution: {integrity: sha512-DoAY6cYOL0pJhgNGI1Rosni7g72GAt4OVr2ltEx2S9ARmFZ0DBvdhA9lL2nywcnKMf27PEJcKMXzXc10qaHsJw==}
+    peerDependencies:
+      react: 18.2.0
 
-  '@react-types/calendar@3.4.6':
-    resolution: {integrity: sha512-WSntZPwtvsIYWvBQRAPvuCn55UTJBZroTvX0vQvWykJRQnPAI20G1hMQ3dNsnAL+gLZUYxBXn66vphmjUuSYew==}
+  '@react-types/textfield@3.9.7':
+    resolution: {integrity: sha512-vU5+QCOF9HgWGjAmmy+cpJibVW5voFomC5POmYHokm7kivYcMMjlonsgWwg/0xXrqE2qosH3tpz4jFoEuig1NQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-types/checkbox@3.8.1':
-    resolution: {integrity: sha512-5/oVByPw4MbR/8QSdHCaalmyWC71H/QGgd4aduTJSaNi825o+v/hsN2/CH7Fq9atkLKsC8fvKD00Bj2VGaKriQ==}
+  '@react-types/tooltip@3.4.12':
+    resolution: {integrity: sha512-FwsdSQ3UDIDORanQMGMLyzSUabw4AkKhwcRdPv4d5OT8GmJr7mBdZynfcsrKLJ0fzskIypMqspoutZidsI0MQg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-types/combobox@3.11.1':
-    resolution: {integrity: sha512-UNc3OHt5cUt5gCTHqhQIqhaWwKCpaNciD8R7eQazmHiA9fq8ROlV+7l3gdNgdhJbTf5Bu/V5ISnN7Y1xwL3zqQ==}
+  '@rehooks/local-storage@2.4.5':
+    resolution: {integrity: sha512-3Q4KtiUBaKoIDRK72BWfAy50ul6hbw29f/M7tyCzlMe2FbSsiQNok0WGeBLaYj4T2PJ7JMSJlSbUGY8RNsImmw==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  '@react-types/datepicker@3.7.4':
-    resolution: {integrity: sha512-ZfvgscvNzBJpYyVWg3nstJtA/VlWLwErwSkd1ivZYam859N30w8yH+4qoYLa6FzWLCFlrsRHyvtxlEM7lUAt5A==}
+  '@rollup/pluginutils@5.1.3':
+    resolution: {integrity: sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: ^18.2.0
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
+  '@rollup/rollup-android-arm-eabi@4.27.4':
+    resolution: {integrity: sha512-2Y3JT6f5MrQkICUyRVCw4oa0sutfAsgaSsb0Lmmy1Wi2y7X5vT9Euqw4gOsCyy0YfKURBg35nhUKZS4mDcfULw==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.27.4':
+    resolution: {integrity: sha512-wzKRQXISyi9UdCVRqEd0H4cMpzvHYt1f/C3CoIjES6cG++RHKhrBj2+29nPF0IB5kpy9MS71vs07fvrNGAl/iA==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.27.4':
+    resolution: {integrity: sha512-PlNiRQapift4LNS8DPUHuDX/IdXiLjf8mc5vdEmUR0fF/pyy2qWwzdLjB+iZquGr8LuN4LnUoSEvKRwjSVYz3Q==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.27.4':
+    resolution: {integrity: sha512-o9bH2dbdgBDJaXWJCDTNDYa171ACUdzpxSZt+u/AAeQ20Nk5x+IhA+zsGmrQtpkLiumRJEYef68gcpn2ooXhSQ==}
+    cpu: [x64]
+    os: [darwin]
 
-  '@react-types/dialog@3.5.10':
-    resolution: {integrity: sha512-S9ga+edOLNLZw7/zVOnZdT5T40etpzUYBXEKdFPbxyPYnERvRxJAsC1/ASuBU9fQAXMRgLZzADWV+wJoGS/X9g==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-freebsd-arm64@4.27.4':
+    resolution: {integrity: sha512-NBI2/i2hT9Q+HySSHTBh52da7isru4aAAo6qC3I7QFVsuhxi2gM8t/EI9EVcILiHLj1vfi+VGGPaLOUENn7pmw==}
+    cpu: [arm64]
+    os: [freebsd]
 
-  '@react-types/grid@3.2.6':
-    resolution: {integrity: sha512-XfHenL2jEBUYrhKiPdeM24mbLRXUn79wVzzMhrNYh24nBwhsPPpxF+gjFddT3Cy8dt6tRInfT6pMEu9nsXwaHw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-freebsd-x64@4.27.4':
+    resolution: {integrity: sha512-wYcC5ycW2zvqtDYrE7deary2P2UFmSh85PUpAx+dwTCO9uw3sgzD6Gv9n5X4vLaQKsrfTSZZ7Z7uynQozPVvWA==}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@react-types/link@3.5.3':
-    resolution: {integrity: sha512-yVafjW3IejyVnK3oMBNjFABCGG6J27EUG8rvkaGaI1uB6srGUEhpJ97XLv11aj1QkXHBy3VGXqxEV3S7wn4HTw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-arm-gnueabihf@4.27.4':
+    resolution: {integrity: sha512-9OwUnK/xKw6DyRlgx8UizeqRFOfi9mf5TYCw1uolDaJSbUmBxP85DE6T4ouCMoN6pXw8ZoTeZCSEfSaYo+/s1w==}
+    cpu: [arm]
+    os: [linux]
 
-  '@react-types/link@3.5.5':
-    resolution: {integrity: sha512-G6P5WagHDR87npN7sEuC5IIgL1GsoY4WFWKO4734i2CXRYx24G9P0Su3AX4GA3qpspz8sK1AWkaCzBMmvnunfw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-arm-musleabihf@4.27.4':
+    resolution: {integrity: sha512-Vgdo4fpuphS9V24WOV+KwkCVJ72u7idTgQaBoLRD0UxBAWTF9GWurJO9YD9yh00BzbkhpeXtm6na+MvJU7Z73A==}
+    cpu: [arm]
+    os: [linux]
 
-  '@react-types/listbox@3.4.9':
-    resolution: {integrity: sha512-S5G+WmNKUIOPZxZ4svWwWQupP3C6LmVfnf8QQmPDvwYXGzVc0WovkqUWyhhjJirFDswTXRCO9p0yaTHHIlkdwQ==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-arm64-gnu@4.27.4':
+    resolution: {integrity: sha512-pleyNgyd1kkBkw2kOqlBx+0atfIIkkExOTiifoODo6qKDSpnc6WzUY5RhHdmTdIJXBdSnh6JknnYTtmQyobrVg==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@react-types/menu@3.9.9':
-    resolution: {integrity: sha512-FamUaPVs1Fxr4KOMI0YcR2rYZHoN7ypGtgiEiJ11v/tEPjPPGgeKDxii0McCrdOkjheatLN1yd2jmMwYj6hTDg==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-arm64-musl@4.27.4':
+    resolution: {integrity: sha512-caluiUXvUuVyCHr5DxL8ohaaFFzPGmgmMvwmqAITMpV/Q+tPoaHZ/PWa3t8B2WyoRcIIuu1hkaW5KkeTDNSnMA==}
+    cpu: [arm64]
+    os: [linux]
 
-  '@react-types/overlays@3.8.7':
-    resolution: {integrity: sha512-zCOYvI4at2DkhVpviIClJ7bRrLXYhSg3Z3v9xymuPH3mkiuuP/dm8mUCtkyY4UhVeUTHmrQh1bzaOP00A+SSQA==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-powerpc64le-gnu@4.27.4':
+    resolution: {integrity: sha512-FScrpHrO60hARyHh7s1zHE97u0KlT/RECzCKAdmI+LEoC1eDh/RDji9JgFqyO+wPDb86Oa/sXkily1+oi4FzJQ==}
+    cpu: [ppc64]
+    os: [linux]
 
-  '@react-types/progress@3.5.4':
-    resolution: {integrity: sha512-JNc246sTjasPyx5Dp7/s0rp3Bz4qlu4LrZTulZlxWyb53WgBNL7axc26CCi+I20rWL9+c7JjhrRxnLl/1cLN5g==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-riscv64-gnu@4.27.4':
+    resolution: {integrity: sha512-qyyprhyGb7+RBfMPeww9FlHwKkCXdKHeGgSqmIXw9VSUtvyFZ6WZRtnxgbuz76FK7LyoN8t/eINRbPUcvXB5fw==}
+    cpu: [riscv64]
+    os: [linux]
 
-  '@react-types/radio@3.8.1':
-    resolution: {integrity: sha512-bK0gio/qj1+0Ldu/3k/s9BaOZvnnRgvFtL3u5ky479+aLG5qf1CmYed3SKz8ErZ70JkpuCSrSwSCFf0t1IHovw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-s390x-gnu@4.27.4':
+    resolution: {integrity: sha512-PFz+y2kb6tbh7m3A7nA9++eInGcDVZUACulf/KzDtovvdTizHpZaJty7Gp0lFwSQcrnebHOqxF1MaKZd7psVRg==}
+    cpu: [s390x]
+    os: [linux]
 
-  '@react-types/select@3.9.4':
-    resolution: {integrity: sha512-xI7dnOW2st91fPPcv6hdtrTdcfetYiqZuuVPZ5TRobY7Q10/Zqqe/KqtOw1zFKUj9xqNJe4Ov3xP5GSdcO60Eg==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-x64-gnu@4.27.4':
+    resolution: {integrity: sha512-Ni8mMtfo+o/G7DVtweXXV/Ol2TFf63KYjTtoZ5f078AUgJTmaIJnj4JFU7TK/9SVWTaSJGxPi5zMDgK4w+Ez7Q==}
+    cpu: [x64]
+    os: [linux]
 
-  '@react-types/shared@3.23.1':
-    resolution: {integrity: sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-linux-x64-musl@4.27.4':
+    resolution: {integrity: sha512-5AeeAF1PB9TUzD+3cROzFTnAJAcVUGLuR8ng0E0WXGkYhp6RD6L+6szYVX+64Rs0r72019KHZS1ka1q+zU/wUw==}
+    cpu: [x64]
+    os: [linux]
 
-  '@react-types/slider@3.7.3':
-    resolution: {integrity: sha512-F8qFQaD2mqug2D0XeWMmjGBikiwbdERFlhFzdvNGbypPLz3AZICBKp1ZLPWdl0DMuy03G/jy6Gl4mDobl7RT2g==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-win32-arm64-msvc@4.27.4':
+    resolution: {integrity: sha512-yOpVsA4K5qVwu2CaS3hHxluWIK5HQTjNV4tWjQXluMiiiu4pJj4BN98CvxohNCpcjMeTXk/ZMJBRbgRg8HBB6A==}
+    cpu: [arm64]
+    os: [win32]
 
-  '@react-types/switch@3.5.3':
-    resolution: {integrity: sha512-Nb6+J5MrPaFa8ZNFKGMzAsen/NNzl5UG/BbC65SLGPy7O0VDa/sUpn7dcu8V2xRpRwwIN/Oso4v63bt2sgdkgA==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-win32-ia32-msvc@4.27.4':
+    resolution: {integrity: sha512-KtwEJOaHAVJlxV92rNYiG9JQwQAdhBlrjNRp7P9L8Cb4Rer3in+0A+IPhJC9y68WAi9H0sX4AiG2NTsVlmqJeQ==}
+    cpu: [ia32]
+    os: [win32]
 
-  '@react-types/table@3.9.5':
-    resolution: {integrity: sha512-fgM2j9F/UR4Anmd28CueghCgBwOZoCVyN8fjaIFPd2MN4gCwUUfANwxLav65gZk4BpwUXGoQdsW+X50L3555mg==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rollup/rollup-win32-x64-msvc@4.27.4':
+    resolution: {integrity: sha512-3j4jx1TppORdTAoBJRd+/wJRGCPC0ETWkXOecJ6PPZLj6SptXkrXcNqdj0oclbKML6FkQltdz7bBA3rUSirZug==}
+    cpu: [x64]
+    os: [win32]
 
-  '@react-types/tabs@3.3.7':
-    resolution: {integrity: sha512-ZdLe5xOcFX6+/ni45Dl2jO0jFATpTnoSqj6kLIS/BYv8oh0n817OjJkLf+DS3CLfNjApJWrHqAk34xNh6nRnEg==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@react-types/textfield@3.9.3':
-    resolution: {integrity: sha512-DoAY6cYOL0pJhgNGI1Rosni7g72GAt4OVr2ltEx2S9ARmFZ0DBvdhA9lL2nywcnKMf27PEJcKMXzXc10qaHsJw==}
-    peerDependencies:
-      react: ^18.2.0
+  '@rushstack/eslint-patch@1.10.4':
+    resolution: {integrity: sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==}
 
-  '@react-types/tooltip@3.4.9':
-    resolution: {integrity: sha512-wZ+uF1+Zc43qG+cOJzioBmLUNjRa7ApdcT0LI1VvaYvH5GdfjzUJOorLX9V/vAci0XMJ50UZ+qsh79aUlw2yqg==}
-    peerDependencies:
-      react: ^18.2.0
+  '@shikijs/core@1.23.1':
+    resolution: {integrity: sha512-NuOVgwcHgVC6jBVH5V7iblziw6iQbWWHrj5IlZI3Fqu2yx9awH7OIQkXIcsHsUmY19ckwSgUMgrqExEyP5A0TA==}
 
-  '@rehooks/local-storage@2.4.5':
-    resolution: {integrity: sha512-3Q4KtiUBaKoIDRK72BWfAy50ul6hbw29f/M7tyCzlMe2FbSsiQNok0WGeBLaYj4T2PJ7JMSJlSbUGY8RNsImmw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      react: ^18.2.0
+  '@shikijs/engine-javascript@1.23.1':
+    resolution: {integrity: sha512-i/LdEwT5k3FVu07SiApRFwRcSJs5QM9+tod5vYCPig1Ywi8GR30zcujbxGQFJHwYD7A5BUqagi8o5KS+LEVgBg==}
 
-  '@rollup/pluginutils@5.1.0':
-    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
+  '@shikijs/engine-oniguruma@1.23.1':
+    resolution: {integrity: sha512-KQ+lgeJJ5m2ISbUZudLR1qHeH3MnSs2mjFg7bnencgs5jDVPeJ2NVDJ3N5ZHbcTsOIh0qIueyAJnwg7lg7kwXQ==}
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+  '@shikijs/types@1.23.1':
+    resolution: {integrity: sha512-98A5hGyEhzzAgQh2dAeHKrWW4HfCMeoFER2z16p5eJ+vmPeF6lZ/elEne6/UCU551F/WqkopqRsr1l2Yu6+A0g==}
 
-  '@rushstack/eslint-patch@1.10.2':
-    resolution: {integrity: sha512-hw437iINopmQuxWPSUEvqE56NCPsiU8N4AYtfHmJFckclktzK9YQJieD3XkDCDH4OjL+C7zgPUh73R/nrcHrqw==}
+  '@shikijs/vscode-textmate@9.3.0':
+    resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==}
 
   '@sideway/address@4.1.5':
     resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
@@ -7031,9 +7280,6 @@ packages:
     resolution: {integrity: sha512-2bRovzs0nJZFlCN3rXirE4gwxCn97JNjMmwpecqlbgV9WcxX7WRuIrgzx/X7Ib7MYRbyUTpBYE0s2x6AmZXnlg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  '@sinclair/typebox@0.24.51':
-    resolution: {integrity: sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==}
-
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -7041,290 +7287,255 @@ packages:
     resolution: {integrity: sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==}
     engines: {node: '>=14.16'}
 
-  '@sinonjs/commons@1.8.6':
-    resolution: {integrity: sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==}
+  '@sindresorhus/merge-streams@2.3.0':
+    resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
+    engines: {node: '>=18'}
 
-  '@sinonjs/fake-timers@9.1.2':
-    resolution: {integrity: sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==}
+  '@sinonjs/commons@3.0.1':
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
+
+  '@sinonjs/fake-timers@10.3.0':
+    resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
 
   '@stitches/core@1.2.8':
     resolution: {integrity: sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==}
 
-  '@storybook/addon-a11y@7.6.17':
-    resolution: {integrity: sha512-UYHJAKQpJMCu4X4O/325UqozYrkhPn2VyQdwPgC+uiOKZvrtni4uRbpOspeyjC0wXH1tDbY8WZvxwvwQryYkpA==}
+  '@storybook/addon-a11y@8.4.5':
+    resolution: {integrity: sha512-lqIOpWJZNR0Ur+2zUcnFAMvdOe7kYEDeXPv1TM7fwEGyzKPYoM/k5xPA2cJCrYwtydxOqqrmn1jUIw0Qdkhuhg==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addon-actions@7.6.17':
-    resolution: {integrity: sha512-TBphs4v6LRfyTpFo/WINF0TkMaE3rrNog7wW5mbz6n0j8o53kDN4o9ZEcygSL5zQX43CAaghQTeDCss7ueG7ZQ==}
+  '@storybook/addon-actions@8.4.5':
+    resolution: {integrity: sha512-rbB19uiGJ61XHbKIbS1a9bUS6re5L8rT5NMNeEJhCxXRpFUPrlTXMSoD/Pgcn3ENeEMVZsm8/eCzxAVgAP3Mgg==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addon-backgrounds@7.6.17':
-    resolution: {integrity: sha512-7dize7x8+37PH77kmt69b0xSaeDqOcZ4fpzW6+hk53hIaCVU26eGs4+j+743Xva31eOgZWNLupUhOpUDc6SqZw==}
+  '@storybook/addon-backgrounds@8.4.5':
+    resolution: {integrity: sha512-FeMt4qHCMYDQiLGGDKiRuSPXFup2WXOaZSdL137v1W36wEL/vGkK1A5iQt1qJ8MZzL5WZQuedox8rSybFy7eow==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addon-controls@7.6.17':
-    resolution: {integrity: sha512-zR0aLaUF7FtV/nMRyfniFbCls/e0DAAoXACuOAUAwNAv0lbIS8AyZZiHSmKucCvziUQ6WceeCC7+du3C+9y0rQ==}
+  '@storybook/addon-controls@8.4.5':
+    resolution: {integrity: sha512-RVTtDDuESLYc1+SJQv2kI7wzBddzAS9uoEe8P75quN6S4pC0GxAB6xirWZ2+WOcba4eHosY+PxMwuBXQfH78Ew==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addon-docs@7.6.17':
-    resolution: {integrity: sha512-FKa4Mdy7nhgvEVZJHpMkHriDzpVHbohn87zv9NCL+Ctjs1iAmzGwxEm0culszyDS1HN2ToVoY0h8CSi2RSSZqA==}
+  '@storybook/addon-docs@8.4.5':
+    resolution: {integrity: sha512-zPELIl7wXormOylVaaSpkUIuuCCxrO+OFPMKZnlENt6zSReyy0dJu4V0tzfV8FCw+V4D6Y4wrLRk/TIG951Ojw==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      storybook: ^8.4.5
 
-  '@storybook/addon-essentials@7.6.17':
-    resolution: {integrity: sha512-qlSpamxuYfT2taF953nC9QijGF2pSbg1ewMNpdwLTj16PTZvR/d8NCDMTJujI1bDwM2m18u8Yc43ibh5LEmxCw==}
+  '@storybook/addon-essentials@8.4.5':
+    resolution: {integrity: sha512-AxetQo/zSPIu3RZqWG2opwAz22Bb+jpf1nWbHp0kEpCrBemcWd8X2gonVmXNOC1PDKNl3jcWyc3lmg/+3mxjYg==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      storybook: ^8.4.5
 
-  '@storybook/addon-highlight@7.6.17':
-    resolution: {integrity: sha512-R1yBPUUqGn+60aJakn8q+5Zt34E/gU3n3VmgPdryP0LJUdZ5q1/RZShoVDV+yYQ40htMH6oaCv3OyyPzFAGJ6A==}
+  '@storybook/addon-highlight@8.4.5':
+    resolution: {integrity: sha512-sMA7v+4unaKY+5RDhow6lLncJqNX9ZLUnBIt3vzY1ntUsOYVwykAY1Hq4Ysj0luCBXjJJdJ6223ylrycnb7Ilw==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addon-links@7.6.17':
-    resolution: {integrity: sha512-iFUwKObRn0EKI0zMETsil2p9a/81rCuSMEWECsi+khkCAs1FUnD2cT6Ag5ydcNcBXsdtdfDJdtXQrkw+TSoStQ==}
+  '@storybook/addon-links@8.4.5':
+    resolution: {integrity: sha512-ac3OtplFdrPw/2jtLnteuVllwu2yCe3sgKJS9AbdYMT/65OW47M7oDnzcpRPsDGufrKlDMBJXXEv4SfTtlT+rg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+      storybook: ^8.4.5
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/addon-mdx-gfm@7.6.17':
-    resolution: {integrity: sha512-Dh1jcegykRMAhQCpAh5NZzRnJMtk+QzYrxKZlY/EbXNRmxrvhrrCDjovf9ntqFlA6vQjDtkwNu3ZVcMBKLXmiw==}
-
-  '@storybook/addon-measure@7.6.17':
-    resolution: {integrity: sha512-O5vnHZNkduvZ95jf1UssbOl6ivIxzl5tv+4EpScPYId7w700bxWsJH+QX7ip6KlrCf2o3iUhmPe8bm05ghG2KA==}
-
-  '@storybook/addon-outline@7.6.17':
-    resolution: {integrity: sha512-9o9JXDsYjNaDgz/cY5+jv694+aik/1aiRGGvsCv68e1p/ob0glkGKav4lnJe2VJqD+gCmaARoD8GOJlhoQl8JQ==}
-
-  '@storybook/addon-toolbars@7.6.17':
-    resolution: {integrity: sha512-UMrchbUHiyWrh6WuGnpy34Jqzkx/63B+MSgb3CW7YsQaXz64kE0Rol0TNSznnB+mYXplcqH+ndI4r4kFsmgwDg==}
-
-  '@storybook/addon-viewport@7.6.17':
-    resolution: {integrity: sha512-sA0QCcf4QAMixWvn8uvRYPfkKCSl6JajJaAspoPqXSxHEpK7uwOlpg3kqFU5XJJPXD0X957M+ONgNvBzYqSpEw==}
+  '@storybook/addon-measure@8.4.5':
+    resolution: {integrity: sha512-+sNjew991YaoXQyWWloFybjEGrDO40Jk6w8BgZs2X7oc3D5t/6oFzvyC862U++LGqKFA3quXDeBjEb92CI9cRA==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/addons@7.6.17':
-    resolution: {integrity: sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==}
+  '@storybook/addon-outline@8.4.5':
+    resolution: {integrity: sha512-XlpN98AUDnWQWNFSFVm+HkRUzm3xIUMjBGTkv6HsL6zt6XoJ+LsQMca+PPtYqlBJA+5CU41xMDaG8HC/p+sd3A==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/blocks@7.6.17':
-    resolution: {integrity: sha512-PsNVoe0bX1mMn4Kk3nbKZ0ItDZZ0YJnYAFJ6toAbsyBAbgzg1sce88sQinzvbn58/RT9MPKeWMPB45ZS7ggiNg==}
+  '@storybook/addon-toolbars@8.4.5':
+    resolution: {integrity: sha512-hOq5560ONOU/qrslrwosWzxnC4nrF8HZWD43ciKwtethm8HuptU2M+Jrui1CRsMScEZLopWWVE9o0vJMdKpIFQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      storybook: ^8.4.5
 
-  '@storybook/builder-manager@7.6.17':
-    resolution: {integrity: sha512-Sj8hcDYiPCCMfeLzus37czl0zdrAxAz4IyYam2jBjVymrIrcDAFyL1OCZvnq33ft179QYQWhUs9qwzVmlR/ZWg==}
+  '@storybook/addon-viewport@8.4.5':
+    resolution: {integrity: sha512-l7Y41gIbJAsIN/QCg1QJ9sr61FLz1C/imUotcDej41tOHxUTSQOlXpNtVnfhUM1vGQc0yNpP3pVxj8BpXi0cAw==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/builder-vite@7.6.17':
-    resolution: {integrity: sha512-2Q32qalI401EsKKr9Hkk8TAOcHEerqwsjCpQgTNJnCu6GgCVKoVUcb99oRbR9Vyg0xh+jb19XiWqqQujFtLYlQ==}
+  '@storybook/blocks@8.4.5':
+    resolution: {integrity: sha512-Z+LHauSqm3A4HBR9pUEf9KQhD3/3xYMt0FXgA+GHCAyDa6lFeD1C6r9Y2nlT+9dt8gv9B9oygTZvV6GqFVyRSQ==}
     peerDependencies:
-      '@preact/preset-vite': '*'
-      typescript: '>= 4.3.x'
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
-      vite-plugin-glimmerx: '*'
+      react: 18.2.0
+      react-dom: 18.2.0
+      storybook: ^8.4.5
     peerDependenciesMeta:
-      '@preact/preset-vite':
-        optional: true
-      typescript:
+      react:
         optional: true
-      vite-plugin-glimmerx:
+      react-dom:
         optional: true
 
-  '@storybook/channels@7.6.17':
-    resolution: {integrity: sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==}
+  '@storybook/builder-vite@8.4.5':
+    resolution: {integrity: sha512-fZXWQcG5ccHCAS8NbyUwu8/5aVlZr4zmWbvKxoyvcVeuxJIsWa9RUS8Mtu7hdi+r/Wk8AlpckqhHo6go0iaDcA==}
+    peerDependencies:
+      storybook: ^8.4.5
+      vite: ^4.0.0 || ^5.0.0
 
-  '@storybook/cli@7.6.17':
-    resolution: {integrity: sha512-1sCo+nCqyR+nKfTcEidVu8XzNoECC7Y1l+uW38/r7s2f/TdDorXaIGAVrpjbSaXSoQpx5DxYJVaKCcQuOgqwcA==}
+  '@storybook/cli@8.4.5':
+    resolution: {integrity: sha512-Avdk3beVf/pE3DpnG47ResDPWksX2R8e8SLKWkNk5aBpqKhfbBVeL18I0lj3td1mMYm/nXpEiPGkPYLyTxXC0A==}
     hasBin: true
 
-  '@storybook/client-logger@7.6.17':
-    resolution: {integrity: sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==}
+  '@storybook/codemod@8.4.5':
+    resolution: {integrity: sha512-aUl7TnBHwde2E1CzoCggdw54xCpzxFshySppWYUmpMt9YqKkpfhMpN6F5rBHGKeFFDhQnMTcvBedaqlRREenBw==}
 
-  '@storybook/codemod@7.6.17':
-    resolution: {integrity: sha512-JuTmf2u3C4fCnjO7o3dqRgrq3ozNYfWlrRP8xuIdvT7niMap7a396hJtSKqS10FxCgKFcMAOsRgrCalH1dWxUg==}
-
-  '@storybook/components@7.6.17':
-    resolution: {integrity: sha512-lbh7GynMidA+CZcJnstVku6Nhs+YkqjYaZ+mKPugvlVhGVWv0DaaeQFVuZ8cJtUGJ/5FFU4Y+n+gylYUHkGBMA==}
+  '@storybook/components@8.4.5':
+    resolution: {integrity: sha512-2PdnKfqNNv3sO7qILgWXiNvmLOi503oN9OMemNCQjTIvdvySc5JpS9/eClwcl/JfmE4qHdSHZr8dLLkBM9S7+Q==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
-  '@storybook/core-client@7.6.17':
-    resolution: {integrity: sha512-LuDbADK+DPNAOOCXOlvY09hdGVueXlDetsdOJ/DgYnSa9QSWv9Uv+F8QcEgR3QckZJbPlztKJIVLgP2n/Xkijw==}
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/core-common@7.6.17':
-    resolution: {integrity: sha512-me2TP3Q9/qzqCLoDHUSsUF+VS1MHxfHbTVF6vAz0D/COTxzsxLpu9TxTbzJoBCxse6XRb6wWI1RgF1mIcjic7g==}
-
-  '@storybook/core-events@7.6.17':
-    resolution: {integrity: sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==}
-
-  '@storybook/core-server@7.6.17':
-    resolution: {integrity: sha512-KWGhTTaL1Q14FolcoKKZgytlPJUbH6sbJ1Ptj/84EYWFewcnEgVs0Zlnh1VStRZg+Rd1WC1V4yVd/bbDzxrvQA==}
-
-  '@storybook/csf-plugin@7.6.17':
-    resolution: {integrity: sha512-xTHv9BUh3bkDVCvcbmdfVF0/e96BdrEgqPJ3G3RmKbSzWLOkQ2U9yiPfHzT0KJWPhVwj12fjfZp0zunu+pcS6Q==}
-
-  '@storybook/csf-tools@7.6.17':
-    resolution: {integrity: sha512-dAQtam0EBPeTJYcQPLxXgz4L9JFqD+HWbLFG9CmNIhMMjticrB0mpk1EFIS6vPXk/VsVWpBgMLD7dZlD6YMKcQ==}
+  '@storybook/core-events@8.4.5':
+    resolution: {integrity: sha512-+DeYpAuav9E/Q5x5BVrMpf+XBFbVQJuJbVXNiglZcJNH13D/G2WDToOYAbGviZ6CBvbUdjlqC7y9+/emwP78bA==}
+    peerDependencies:
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/csf@0.1.4':
-    resolution: {integrity: sha512-B9UI/lsQMjF+oEfZCI6YXNoeuBcGZoOP5x8yKbe2tIEmsMjSztFKkpPzi5nLCnBk/MBtl6QJeI3ksJnbsWPkOw==}
+  '@storybook/core@8.4.5':
+    resolution: {integrity: sha512-aB1sQNX5nRoUAqg5u1py0MuR/VPd6c6PhECa4rW6pmr7kZcfyP4PP6UFpXuN71ypTQlkRE3Vc5PQZ3gLhE9o3g==}
+    peerDependencies:
+      prettier: ^2 || ^3
+    peerDependenciesMeta:
+      prettier:
+        optional: true
 
-  '@storybook/docs-mdx@0.1.0':
-    resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==}
+  '@storybook/csf-plugin@8.4.5':
+    resolution: {integrity: sha512-qd2rQTglOTS+phQmTbNTXNjNyxdGvolaqHqDNMw3Vf6h9o3U+mLkwnDWNVnQ9oqvOoUEAqpBthgwzU9FhkIk+A==}
+    peerDependencies:
+      storybook: ^8.4.5
 
-  '@storybook/docs-tools@7.6.17':
-    resolution: {integrity: sha512-bYrLoj06adqklyLkEwD32C0Ww6t+9ZVvrJHiVT42bIhTRpFiFPAetl1a9KPHtFLnfduh4n2IxIr1jv32ThPDTA==}
+  '@storybook/csf@0.1.11':
+    resolution: {integrity: sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==}
 
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/manager-api@7.6.17':
-    resolution: {integrity: sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==}
-
-  '@storybook/manager@7.6.17':
-    resolution: {integrity: sha512-A1LDDIqMpwRzq/dqkbbiza0QI04o4ZHCl2a3UMDZUV/+QLc2nsr2DAaLk4CVL4/cIc5zGqmIcaOTvprx2YKVBw==}
-
-  '@storybook/mdx2-csf@1.1.0':
-    resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
-
-  '@storybook/node-logger@7.6.17':
-    resolution: {integrity: sha512-w59MQuXhhUNrUVmVkXhMwIg2nvFWjdDczLTwYLorhfsE36CWeUOY5QCZWQy0Qf/h+jz8Uo7Evy64qn18v9C4wA==}
-
-  '@storybook/postinstall@7.6.17':
-    resolution: {integrity: sha512-WaWqB8o9vUc9aaVls+povQSVirf1Xd1LZcVhUKfAocAF3mzYUsnJsVqvnbjRj/F96UFVihOyDt9Zjl/9OvrCvQ==}
-
-  '@storybook/preview-api@7.6.17':
-    resolution: {integrity: sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==}
-
-  '@storybook/preview@7.6.17':
-    resolution: {integrity: sha512-LvkMYK/y6alGjwRVNDIKL1lFlbyZ0H0c8iAbcQkiMoaFiujMQyVswMDKlWcj42Upfr/B1igydiruomc+eUt0mw==}
-
-  '@storybook/react-dom-shim@7.6.17':
-    resolution: {integrity: sha512-32Sa/G+WnvaPiQ1Wvjjw5UM9rr2c4GDohwCcWVv3/LJuiFPqNS6zglAtmnsrlIBnUwRBMLMh/ekCTdqMiUmfDw==}
+  '@storybook/icons@1.2.12':
+    resolution: {integrity: sha512-UxgyK5W3/UV4VrI3dl6ajGfHM4aOqMAkFLWe2KibeQudLf6NJpDrDMSHwZj+3iKC4jFU7dkKbbtH2h/al4sW3Q==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@storybook/react-vite@7.6.17':
-    resolution: {integrity: sha512-4dIm3CuRl44X1TLzN3WoZh/bChzJF7Ud28li9atj9C8db0bb/y0zl8cahrsRFoR7/LyfqdOVLqaztrnA5SsWfg==}
-    engines: {node: '>=16'}
+  '@storybook/manager-api@8.4.5':
+    resolution: {integrity: sha512-t39JaMy3UX4StbUH/tIDcaflBDxTcyIq853wQtBMhVL3e1+Dw3MIiiG/5bw79HU4R7kSmPVLXIIbV3FmXkq7KQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/react@7.6.17':
-    resolution: {integrity: sha512-lVqzQSU03rRJWYW+gK2gq6mSo3/qtnVICY8B8oP7gc36jVu4ksDIu45bTfukM618ODkUZy0vZe6T4engK3azjA==}
-    engines: {node: '>=16.0.0'}
+  '@storybook/preview-api@8.4.5':
+    resolution: {integrity: sha512-MKIZ2jQO/3cUdsT57eq8jRgB6inALo9BxrQ88f7mqzltOkMvADvTAY6y8JZqTUoDzWTH/ny/8SGGdtpqlxRuiQ==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@storybook/router@7.6.17':
-    resolution: {integrity: sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==}
-
-  '@storybook/telemetry@7.6.17':
-    resolution: {integrity: sha512-WOcOAmmengYnGInH98Px44F47DSpLyk20BM+Z/IIQDzfttGOLlxNqBBG1XTEhNRn+AYuk4aZ2JEed2lCjVIxcA==}
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@storybook/theming@7.6.17':
-    resolution: {integrity: sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==}
+  '@storybook/react-dom-shim@8.4.5':
+    resolution: {integrity: sha512-YTWTfPagptEYXJsnxAl3zP97Ev0zebtaEV0WgjGaEeumr+zsfgKKwzzHxgrtumBmDzwkuKlzFwlQB5A8keOIGA==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
-  '@storybook/types@7.6.17':
-    resolution: {integrity: sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==}
+      react: 18.2.0
+      react-dom: 18.2.0
+      storybook: ^8.4.5
 
-  '@swc-node/core@1.13.0':
-    resolution: {integrity: sha512-lFPD4nmy4ifAOVMChFjwlpXN5KQXvegqeyuzz1KQz42q1lf+cL3Qux1/GteGuZjh8HC+Rj1RdNrHpE/MCfJSTw==}
-    engines: {node: '>= 10'}
+  '@storybook/react-vite@8.4.5':
+    resolution: {integrity: sha512-b62gapvUmyfR8W4g/eDkqJUtgRDz28LdLyJMeAN+MpPiqZ6ethfJc8/GseVXapVtIaRmqcEQ+Ix99hYfVK4ksw==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      '@swc/core': '>= 1.3'
-      '@swc/types': '>= 0.1'
+      react: 18.2.0
+      react-dom: 18.2.0
+      storybook: ^8.4.5
+      vite: ^4.0.0 || ^5.0.0
 
-  '@swc-node/jest@1.8.0':
-    resolution: {integrity: sha512-kWNYj6ef9dOdyL+r7S/nyZnH+vX7csMWR80YlujA6O3XY1fNaDX4NE6OCgD2YeJkMjsm9im1aI2HfeVD6+vGyQ==}
+  '@storybook/react@8.4.5':
+    resolution: {integrity: sha512-2+p4aGEdGOnu2XNhnMi1B8GPeszm34P905HgqGD1cuz9gMt7x/bgZQaVxs6kpHZ3Hb6V9qp62La2dbAYatHdSw==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      '@swc/core': '>= 1.3'
-      '@swc/types': '>= 0.1'
-      typescript: '>= 5.0'
+      '@storybook/test': 8.4.5
+      react: 18.2.0
+      react-dom: 18.2.0
+      storybook: ^8.4.5
+      typescript: '>= 4.2.x'
+    peerDependenciesMeta:
+      '@storybook/test':
+        optional: true
+      typescript:
+        optional: true
 
-  '@swc-node/register@1.9.0':
-    resolution: {integrity: sha512-i0iYInD4q5v3xQC6bKvs0QtfUxu197CU5qKALmpxEqTYs7sIhQ7KFLe3kP+eAR4gRkJTvAgjQgrokXLN2jZrOw==}
+  '@storybook/theming@8.4.5':
+    resolution: {integrity: sha512-45e/jeG4iuqdZcHg3PbB6dwXQTwlnnEB7r/QcVExyC7ibrkTnjUfvxzyUw4mmU3CXETFGD5EcUobFkgK+/aPxQ==}
     peerDependencies:
-      '@swc/core': '>= 1.3'
-      typescript: '>= 4.3'
-
-  '@swc-node/sourcemap-support@0.5.0':
-    resolution: {integrity: sha512-fbhjL5G0YvFoWwNhWleuBUfotiX+USiA9oJqu9STFw+Hb0Cgnddn+HVS/K5fI45mn92e8V+cHD2jgFjk4w2T9Q==}
+      storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
 
-  '@swc/core-darwin-arm64@1.4.13':
-    resolution: {integrity: sha512-36P72FLpm5iq85IvoEjBvi22DiqkkEIanJ1M0E8bkxcFHUbjBrYfPY9T6cpPyK5oQqkaTBvNAc3j1BlVD6IH6w==}
+  '@swc/core-darwin-arm64@1.9.2':
+    resolution: {integrity: sha512-nETmsCoY29krTF2PtspEgicb3tqw7Ci5sInTI03EU5zpqYbPjoPH99BVTjj0OsF53jP5MxwnLI5Hm21lUn1d6A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.4.13':
-    resolution: {integrity: sha512-ye7OgKpDdyA8AMIVVdmD1ICDaFXgoEXORnVO8bBHyul0WN71yUBZMX+YxEx2lpWtiftA2vY/1MAuOR80vHkBCw==}
+  '@swc/core-darwin-x64@1.9.2':
+    resolution: {integrity: sha512-9gD+bwBz8ZByjP6nZTXe/hzd0tySIAjpDHgkFiUrc+5zGF+rdTwhcNrzxNHJmy6mw+PW38jqII4uspFHUqqxuQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.4.13':
-    resolution: {integrity: sha512-+x593Jlmu4c3lJtZUKRejWpV2MAij1Js5nmQLLdjo6ChR2D4B2rzj3iMiKn5gITew7fraF9t3fvXALdWh7HmUg==}
+  '@swc/core-linux-arm-gnueabihf@1.9.2':
+    resolution: {integrity: sha512-kYq8ief1Qrn+WmsTWAYo4r+Coul4dXN6cLFjiPZ29Cv5pyU+GFvSPAB4bEdMzwy99rCR0u2P10UExaeCjurjvg==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.4.13':
-    resolution: {integrity: sha512-0x8OVw4dfyNerrs/9eZX9wNnmvwbwXSMCi+LbE6Xt1pXOIwvoLtFIXcV3NsrlkFboO3sr5UAQIwDxKqbIZA9pQ==}
+  '@swc/core-linux-arm64-gnu@1.9.2':
+    resolution: {integrity: sha512-n0W4XiXlmEIVqxt+rD3ZpkogsEWUk1jJ+i5bQNgB+1JuWh0fBE8c/blDgTQXa0GB5lTPVDZQussgdNOCnAZwiA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-arm64-musl@1.4.13':
-    resolution: {integrity: sha512-Z9c4JiequtZvngPcxbCuAOkmWBxi2vInZbjjhD5I+Q9oiJdXUz1t2USGwsGPS41Xvk1BOA3ecK2Sn1ilY3titg==}
+  '@swc/core-linux-arm64-musl@1.9.2':
+    resolution: {integrity: sha512-8xzrOmsyCC1zrx2Wzx/h8dVsdewO1oMCwBTLc1gSJ/YllZYTb04pNm6NsVbzUX2tKddJVRgSJXV10j/NECLwpA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
 
-  '@swc/core-linux-x64-gnu@1.4.13':
-    resolution: {integrity: sha512-ChatHtk+vX0Ke5QG+jO+rIapw/KwZsi9MedCBHFXHH6iWF4z8d51cJeN68ykcn+vAXzjNeFNdlNy5Vbkd1zAqg==}
+  '@swc/core-linux-x64-gnu@1.9.2':
+    resolution: {integrity: sha512-kZrNz/PjRQKcchWF6W292jk3K44EoVu1ad5w+zbS4jekIAxsM8WwQ1kd+yjUlN9jFcF8XBat5NKIs9WphJCVXg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-linux-x64-musl@1.4.13':
-    resolution: {integrity: sha512-0Pz39YR530mXpsztwQkmEKdkkZy4fY4Smdh4pkm6Ly8Nndyo0te/l4bcAGqN24Jp7aVwF/QSy14SAtw4HRjU9g==}
+  '@swc/core-linux-x64-musl@1.9.2':
+    resolution: {integrity: sha512-TTIpR4rjMkhX1lnFR+PSXpaL83TrQzp9znRdp2TzYrODlUd/R20zOwSo9vFLCyH6ZoD47bccY7QeGZDYT3nlRg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
 
-  '@swc/core-win32-arm64-msvc@1.4.13':
-    resolution: {integrity: sha512-LVZfhlD+jHcAbz5NN+gAJ1BEasB0WpcvUzcsJt0nQSRsojgzPzFjJ+fzEBnvT7SMtqKkrnVJ0OmDYeh88bDRpw==}
+  '@swc/core-win32-arm64-msvc@1.9.2':
+    resolution: {integrity: sha512-+Eg2d4icItKC0PMjZxH7cSYFLWk0aIp94LNmOw6tPq0e69ax6oh10upeq0D1fjWsKLmOJAWEvnXlayZcijEXDw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.4.13':
-    resolution: {integrity: sha512-78hxHWUvUZtWsnhcf8DKwhBcNFJw+j4y4fN2B9ioXmBWX2tIyw+BqUHOrismOtjPihaZmwe/Ok2e4qmkawE2fw==}
+  '@swc/core-win32-ia32-msvc@1.9.2':
+    resolution: {integrity: sha512-nLWBi4vZDdM/LkiQmPCakof8Dh1/t5EM7eudue04V1lIcqx9YHVRS3KMwEaCoHLGg0c312Wm4YgrWQd9vwZ5zQ==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.4.13':
-    resolution: {integrity: sha512-WSfy1u2Xde6jU7UpHIInCUMW98Zw9iZglddKUAvmr1obkZji5U6EX0Oca3asEJdZPFb+2lMLjt0Mh5a1YisROg==}
+  '@swc/core-win32-x64-msvc@1.9.2':
+    resolution: {integrity: sha512-ik/k+JjRJBFkXARukdU82tSVx0CbExFQoQ78qTO682esbYXzjdB5eLVkoUbwen299pnfr88Kn4kyIqFPTje8Xw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.4.13':
-    resolution: {integrity: sha512-rOtusBE+2gaeRkAJn5E4zp5yzZekZOypzSOz5ZG6P1hFbd+Cc26fWEdK6sUSnrkkvTd0Oj33KXLB/4UkbK/UHA==}
+  '@swc/core@1.9.2':
+    resolution: {integrity: sha512-dYyEkO6mRYtZFpnOsnYzv9rY69fHAHoawYOjGOEcxk9WYtaJhowMdP/w6NcOKnz2G7GlZaenjkzkMa6ZeQeMsg==}
     engines: {node: '>=10'}
     peerDependencies:
-      '@swc/helpers': ^0.5.0
+      '@swc/helpers': '*'
     peerDependenciesMeta:
       '@swc/helpers':
         optional: true
@@ -7332,65 +7543,62 @@ packages:
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
-  '@swc/helpers@0.5.2':
-    resolution: {integrity: sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==}
+  '@swc/helpers@0.5.11':
+    resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==}
 
-  '@swc/helpers@0.5.9':
-    resolution: {integrity: sha512-XI76sLwMJoLjJTOK5RblBZkouOJG3X3hjxLCzLnyN1ifAiKQc6Hck3uvnU4Z/dV/Dyk36Ffj8FLvDLV2oWvKTw==}
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@swc/jest@0.2.36':
-    resolution: {integrity: sha512-8X80dp81ugxs4a11z1ka43FPhP+/e+mJNXJSxiNYk8gIX/jPBtY4gQTrKu/KIoco8bzKuPI5lUxjfLiGsfvnlw==}
+  '@swc/jest@0.2.37':
+    resolution: {integrity: sha512-CR2BHhmXKGxTiFr21DYPRHQunLkX3mNIFGFkxBGji6r9uyIR5zftTOVYj1e0sFNMV2H7mf/+vpaglqaryBtqfQ==}
     engines: {npm: '>= 7.0.0'}
     peerDependencies:
       '@swc/core': '*'
 
-  '@swc/types@0.1.6':
-    resolution: {integrity: sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==}
+  '@swc/types@0.1.17':
+    resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==}
 
   '@szmarczak/http-timer@5.0.1':
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
-  '@tailwindcss/typography@0.5.12':
-    resolution: {integrity: sha512-CNwpBpconcP7ppxmuq3qvaCxiRWnbhANpY/ruH4L5qs2GCiVDJXde/pjj2HWPV1+Q4G9+V/etrwUYopdcjAlyg==}
+  '@tailwindcss/typography@0.5.15':
+    resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
     peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
+      tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
 
-  '@testing-library/dom@8.20.1':
-    resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
-    engines: {node: '>=12'}
+  '@tanstack/react-virtual@3.10.9':
+    resolution: {integrity: sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
 
-  '@testing-library/dom@9.3.4':
-    resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
-    engines: {node: '>=14'}
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
 
-  '@testing-library/jest-dom@5.17.0':
-    resolution: {integrity: sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==}
-    engines: {node: '>=8', npm: '>=6', yarn: '>=1'}
+  '@testing-library/dom@10.4.0':
+    resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
+    engines: {node: '>=18'}
 
-  '@testing-library/react-hooks@8.0.1':
-    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
-    engines: {node: '>=12'}
+  '@testing-library/jest-dom@6.6.3':
+    resolution: {integrity: sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/react@16.0.1':
+    resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==}
+    engines: {node: '>=18'}
     peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      react-test-renderer: ^16.9.0 || ^17.0.0
+      '@testing-library/dom': ^10.0.0
+      '@types/react': ^18.0.0
+      '@types/react-dom': ^18.0.0
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      react-dom:
-        optional: true
-      react-test-renderer:
+      '@types/react-dom':
         optional: true
 
-  '@testing-library/react@14.3.1':
-    resolution: {integrity: sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   '@testing-library/user-event@14.5.2':
     resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
     engines: {node: '>=12', npm: '>=6'}
@@ -7401,10 +7609,6 @@ packages:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
 
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
@@ -7425,9 +7629,6 @@ packages:
     resolution: {integrity: sha512-qaGV9ltJP0EO25YfFUPhxRVK0evXFIAGicsVXuRim4Ed9cjPxYhNnNJ49SFmbeLgtxpslIkX317IgpfcHPVj/A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  '@tybys/wasm-util@0.8.1':
-    resolution: {integrity: sha512-GSsTwyBl4pIzsxAY5wroZdyQKyhXk0d8PCRZtrSZ2WEB1cBdrp2EgGBwHOGCZtIIPun/DL3+AykCv+J6fyRH4Q==}
-
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
 
@@ -7443,80 +7644,44 @@ packages:
   '@types/babel__template@7.4.4':
     resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
 
-  '@types/babel__traverse@7.20.5':
-    resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==}
-
-  '@types/body-parser@1.19.5':
-    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
-
-  '@types/buble@0.20.5':
-    resolution: {integrity: sha512-CNpql2WPrZloamMweLkyM42nPsUVa10NDurkhTB5+tGu8SstDd568dothJi7tFSAsbqJK0rSb83W9ZwGt8My/A==}
+  '@types/babel__traverse@7.20.6':
+    resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
   '@types/canvas-confetti@1.6.4':
     resolution: {integrity: sha512-fNyZ/Fdw/Y92X0vv7B+BD6ysHL4xVU5dJcgzgxLdGbn8O3PezZNIJpml44lKM0nsGur+o/6+NZbZeNTt00U1uA==}
 
-  '@types/color-convert@2.0.3':
-    resolution: {integrity: sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==}
+  '@types/color-convert@2.0.4':
+    resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
 
-  '@types/color-name@1.1.4':
-    resolution: {integrity: sha512-hulKeREDdLFesGQjl96+4aoJSHY5b2GRjagzzcqCfIrWhe5vkCqIvrLbqzBaI1q94Vg8DNJZZqTR5ocdWmWclg==}
+  '@types/color-name@1.1.5':
+    resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
 
   '@types/color@3.0.6':
     resolution: {integrity: sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==}
 
-  '@types/connect@3.4.38':
-    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
-
   '@types/cross-spawn@6.0.6':
     resolution: {integrity: sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==}
 
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
-  '@types/detect-port@1.3.5':
-    resolution: {integrity: sha512-Rf3/lB9WkDfIL9eEKaSYKc+1L/rNVYBjThk22JTqQw0YozXarX8YljFAz+HCoC6h4B4KwCMsBPZHaFezwT4BNA==}
-
-  '@types/doctrine@0.0.3':
-    resolution: {integrity: sha512-w5jZ0ee+HaPOaX25X2/2oGR/7rgAQSYII7X7pp0m9KgBfMP7uKfMfTvcpl5Dj+eDBbpxKGiqE+flqDr6XTd2RA==}
-
   '@types/doctrine@0.0.9':
     resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
 
-  '@types/ejs@3.1.5':
-    resolution: {integrity: sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==}
-
-  '@types/emscripten@1.39.10':
-    resolution: {integrity: sha512-TB/6hBkYQJxsZHSqyeuO1Jt0AB/bW6G7rHt9g7lML7SOF6lbgcHvw/Lr+69iqN0qxgXLhWKScAon73JNnptuDw==}
-
-  '@types/escodegen@0.0.6':
-    resolution: {integrity: sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==}
-
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
   '@types/eslint-visitor-keys@1.0.0':
     resolution: {integrity: sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==}
 
-  '@types/eslint@8.56.9':
-    resolution: {integrity: sha512-W4W3KcqzjJ0sHg2vAq9vfml6OhsJ53TcUjUqfzzZf/EChUtwspszj/S0pzMxnfRcO55/iGq47dscXw71Fxc4Zg==}
+  '@types/eslint@9.6.1':
+    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
 
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
-  '@types/estree@0.0.51':
-    resolution: {integrity: sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==}
-
-  '@types/estree@1.0.5':
-    resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-
-  '@types/express-serve-static-core@4.19.0':
-    resolution: {integrity: sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==}
-
-  '@types/express@4.17.21':
-    resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==}
-
-  '@types/find-cache-dir@3.2.1':
-    resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==}
+  '@types/estree@1.0.6':
+    resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==}
 
   '@types/fined@1.1.5':
     resolution: {integrity: sha512-2N93vadEGDFhASTIRbizbl4bNqpMOId5zZfj6hHqYZfEzEfO9onnU4Im8xvzo8uudySDveDHBOOSlTWf38ErfQ==}
@@ -7536,18 +7701,15 @@ packages:
   '@types/hast@2.3.10':
     resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
 
+  '@types/hast@3.0.4':
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+
   '@types/http-cache-semantics@4.0.4':
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
 
-  '@types/http-errors@2.0.4':
-    resolution: {integrity: sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==}
-
   '@types/inquirer@8.2.10':
     resolution: {integrity: sha512-IdD5NmHyVjWM8SHWo/kPBgtzXatwPkfwzyP3fN1jF2g9BWt5WO+8hL2F4o2GKIYsU40PpqeevuUWvkS/roXJkA==}
 
-  '@types/is-ci@3.0.4':
-    resolution: {integrity: sha512-AkCYCmwlXeuH89DagDCzvCAyltI2v9lh3U3DqSg/GrBYoReAaWwxfXCqMx9UV5MajLZ4ZFwZzV4cABGIxk2XRw==}
-
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -7557,11 +7719,11 @@ packages:
   '@types/istanbul-reports@3.0.4':
     resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
 
-  '@types/jest@28.1.8':
-    resolution: {integrity: sha512-8TJkV++s7B6XqnDrzR1m/TT0A0h948Pnl/097veySPN67VRAgQ4gZ7n2KfJo2rVq6njQjdxU3GCCyDvAeuHoiw==}
+  '@types/jest@29.5.14':
+    resolution: {integrity: sha512-ZN+4sdnLUbo8EVvVc2ao0GFW6oVrQRPn4K2lglySj7APvSrgzxHiNNK99us4WDMi57xxA2yggblIAMNhXOotLQ==}
 
-  '@types/jsdom@16.2.15':
-    resolution: {integrity: sha512-nwF87yjBKuX/roqGYerZZM0Nv1pZDMAT5YhOHYeM/72Fic+VEqJh4nyoqoapzJnW3pUlfxPY5FhgsJtM+dRnQQ==}
+  '@types/jsdom@20.0.1':
+    resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
 
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -7575,39 +7737,18 @@ packages:
   '@types/lodash.debounce@4.0.9':
     resolution: {integrity: sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==}
 
-  '@types/lodash.foreach@4.5.9':
-    resolution: {integrity: sha512-vmq0p/FK66PsALXRmK/qsnlLlCpnudvozWYrxJImHujHhXMADdeoPEY10zwmu26437w85wCvdxUqpFi+ALtkiQ==}
-
-  '@types/lodash.get@4.4.9':
-    resolution: {integrity: sha512-J5dvW98sxmGnamqf+/aLP87PYXyrha9xIgc2ZlHl6OHMFR2Ejdxep50QfU0abO1+CH6+ugx+8wEUN1toImAinA==}
-
-  '@types/lodash.kebabcase@4.1.9':
-    resolution: {integrity: sha512-kPrrmcVOhSsjAVRovN0lRfrbuidfg0wYsrQa5IYuoQO1fpHHGSme66oyiYA/5eQPVl8Z95OA3HG0+d2SvYC85w==}
-
-  '@types/lodash.mapkeys@4.6.9':
-    resolution: {integrity: sha512-6/ERBCabeDI656LsV+oopLjdnJ/x1PCAE6kkkssH8e4i0K7Pw307noxHCbUc6cAVfTo9vx0Z+k3QZwy1IrUZcA==}
-
-  '@types/lodash.omit@4.5.9':
-    resolution: {integrity: sha512-zuAVFLUPJMOzsw6yawshsYGgq2hWUHtsZgeXHZmSFhaQQFC6EQ021uDKHkSjOpNhSvtNSU9165/o3o/Q51GpTw==}
-
-  '@types/lodash@4.17.5':
-    resolution: {integrity: sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==}
+  '@types/lodash@4.17.13':
+    resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==}
 
   '@types/marked@5.0.2':
     resolution: {integrity: sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg==}
 
-  '@types/mdast@3.0.15':
-    resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
   '@types/mdx@2.0.13':
     resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
 
-  '@types/mime-types@2.1.4':
-    resolution: {integrity: sha512-lfU4b34HOri+kAY5UheuFMWPDOI+OPceBSHZKp69gEyTL/mmJ4cnU6Y/rlme3UL3GyOn6Y42hyIEw0/q8sWx5w==}
-
-  '@types/mime@1.3.5':
-    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
-
   '@types/minimatch@5.1.2':
     resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==}
 
@@ -7617,18 +7758,12 @@ packages:
   '@types/ms@0.7.34':
     resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
 
-  '@types/node-fetch@2.6.11':
-    resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
-
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
   '@types/node@15.14.9':
     resolution: {integrity: sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A==}
 
-  '@types/node@18.19.31':
-    resolution: {integrity: sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==}
-
   '@types/node@20.2.5':
     resolution: {integrity: sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==}
 
@@ -7644,29 +7779,11 @@ packages:
   '@types/parse-numeric-range@0.0.1':
     resolution: {integrity: sha512-nI3rPGKk8BxedokP2VilnW5JyZHYNjGCUDsAZ2JQgISgDflHNUO0wXMfGYP8CkihrKYDm5tilD52XfGhO/ZFCA==}
 
-  '@types/parse5@5.0.3':
-    resolution: {integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==}
+  '@types/prismjs@1.26.5':
+    resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
-  '@types/parse5@6.0.3':
-    resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
-
-  '@types/prettier@2.7.3':
-    resolution: {integrity: sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==}
-
-  '@types/pretty-hrtime@1.0.3':
-    resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==}
-
-  '@types/prismjs@1.26.3':
-    resolution: {integrity: sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==}
-
-  '@types/prop-types@15.7.12':
-    resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
-
-  '@types/qs@6.9.14':
-    resolution: {integrity: sha512-5khscbd3SwWMhFqylJBLQ0zIu7c1K6Vz0uBIt915BI3zV0q1nfjRQD3RqSBcPaO6PHEF4ov/t9y89fSiyThlPA==}
-
-  '@types/range-parser@1.2.7':
-    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
+  '@types/prop-types@15.7.13':
+    resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==}
 
   '@types/react-dom@18.2.4':
     resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==}
@@ -7674,14 +7791,17 @@ packages:
   '@types/react@18.2.8':
     resolution: {integrity: sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==}
 
+  '@types/react@18.3.12':
+    resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==}
+
   '@types/refractor@3.4.1':
     resolution: {integrity: sha512-wYuorIiCTSuvRT9srwt+taF6mH/ww+SyN2psM0sjef2qW+sS8GmshgDGTEDgWB1sTVGgYVE6EK7dBA2MxQxibg==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
-  '@types/rss@0.0.30':
-    resolution: {integrity: sha512-RnWs98qajbcAZqie6EWYraJ2N+1Q1Wy9KN7HcVPJ//sYJGVjLjvkChZdeQPwf88xAcNUCcLXt6Zz3kiid7s/yw==}
+  '@types/rss@0.0.32':
+    resolution: {integrity: sha512-2oKNqKyUY4RSdvl5eZR1n2Q9yvw3XTe3mQHsFPn9alaNBxfPnbXBtGP8R0SV8pK1PrVnLul0zx7izbm5/gF5Qw==}
 
   '@types/scheduler@0.23.0':
     resolution: {integrity: sha512-YIoDCTH3Af6XM5VuwGG/QL/CJqga1Zm3NkU3HZ4ZHK2fRMPYP1VczsTUqtsf43PH/iJNVlPHAo2oWX7BSdB2Hw==}
@@ -7689,35 +7809,26 @@ packages:
   '@types/semver-utils@1.1.3':
     resolution: {integrity: sha512-T+YwkslhsM+CeuhYUxyAjWm7mJ5am/K10UX40RuA6k6Lc7eGtq8iY2xOzy7Vq0GOqhl/xZl5l2FwURZMTPTUww==}
 
-  '@types/semver@6.2.7':
-    resolution: {integrity: sha512-blctEWbzUFzQx799RZjzzIdBJOXmE37YYEyDtKkx5Dg+V7o/zyyAxLPiI98A2jdTtDgxZleMdfV+7p8WbRJ1OQ==}
-
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
-  '@types/send@0.17.4':
-    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
-
-  '@types/serve-static@1.15.7':
-    resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
-
   '@types/shelljs@0.8.15':
     resolution: {integrity: sha512-vzmnCHl6hViPu9GNLQJ+DZFd6BQI2DBTUeOvYHqkWQLMfKAAQYMb/xAmZkTogZI/vqXHCWkqDRymDI5p0QTi5Q==}
 
   '@types/stack-utils@2.0.3':
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
 
-  '@types/testing-library__jest-dom@5.14.5':
-    resolution: {integrity: sha512-SBwbxYoyPIvxHbeHxTZX2Pe/74F/tX2/D3mMvzabdeJ25bBojfW0TyB8BHrbq/9zaaKICJZjLP+8r6AeZMFCuQ==}
-
   '@types/through@0.0.33':
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
 
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
-  '@types/unist@2.0.10':
-    resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
+  '@types/unist@2.0.11':
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+
+  '@types/unist@3.0.3':
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
   '@types/uuid@8.3.4':
     resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
@@ -7728,8 +7839,8 @@ packages:
   '@types/yargs-parser@21.0.3':
     resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
 
-  '@types/yargs@17.0.32':
-    resolution: {integrity: sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==}
+  '@types/yargs@17.0.33':
+    resolution: {integrity: sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==}
 
   '@typescript-eslint/eslint-plugin@5.62.0':
     resolution: {integrity: sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==}
@@ -7875,56 +7986,59 @@ packages:
     resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@vitejs/plugin-react@3.1.0':
-    resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==}
+  '@ungap/structured-clone@1.2.0':
+    resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+
+  '@vitejs/plugin-react@4.3.3':
+    resolution: {integrity: sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.1.0-beta.0
+      vite: ^4.2.0 || ^5.0.0
 
-  '@webassemblyjs/ast@1.12.1':
-    resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
-  '@webassemblyjs/floating-point-hex-parser@1.11.6':
-    resolution: {integrity: sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==}
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
 
-  '@webassemblyjs/helper-api-error@1.11.6':
-    resolution: {integrity: sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==}
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
 
-  '@webassemblyjs/helper-buffer@1.12.1':
-    resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==}
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
 
-  '@webassemblyjs/helper-numbers@1.11.6':
-    resolution: {integrity: sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==}
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
 
-  '@webassemblyjs/helper-wasm-bytecode@1.11.6':
-    resolution: {integrity: sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==}
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
 
-  '@webassemblyjs/helper-wasm-section@1.12.1':
-    resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==}
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
 
-  '@webassemblyjs/ieee754@1.11.6':
-    resolution: {integrity: sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==}
+  '@webassemblyjs/ieee754@1.13.2':
+    resolution: {integrity: sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==}
 
-  '@webassemblyjs/leb128@1.11.6':
-    resolution: {integrity: sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==}
+  '@webassemblyjs/leb128@1.13.2':
+    resolution: {integrity: sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==}
 
-  '@webassemblyjs/utf8@1.11.6':
-    resolution: {integrity: sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==}
+  '@webassemblyjs/utf8@1.13.2':
+    resolution: {integrity: sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==}
 
-  '@webassemblyjs/wasm-edit@1.12.1':
-    resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==}
+  '@webassemblyjs/wasm-edit@1.14.1':
+    resolution: {integrity: sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==}
 
-  '@webassemblyjs/wasm-gen@1.12.1':
-    resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==}
+  '@webassemblyjs/wasm-gen@1.14.1':
+    resolution: {integrity: sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==}
 
-  '@webassemblyjs/wasm-opt@1.12.1':
-    resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==}
+  '@webassemblyjs/wasm-opt@1.14.1':
+    resolution: {integrity: sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==}
 
-  '@webassemblyjs/wasm-parser@1.12.1':
-    resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==}
+  '@webassemblyjs/wasm-parser@1.14.1':
+    resolution: {integrity: sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==}
 
-  '@webassemblyjs/wast-printer@1.12.1':
-    resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==}
+  '@webassemblyjs/wast-printer@1.14.1':
+    resolution: {integrity: sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==}
 
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -7932,20 +8046,6 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  '@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15':
-    resolution: {integrity: sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      esbuild: '>=0.10.0'
-
-  '@yarnpkg/fslib@2.10.3':
-    resolution: {integrity: sha512-41H+Ga78xT9sHvWLlFOZLIhtU6mTGZ20pZ29EiZa97vnxdohJD2AF42rCoAoWfqUz486xY6fhjMH+DYEM9r14A==}
-    engines: {node: '>=12 <14 || 14.2 - 14.9 || >14.10.0'}
-
-  '@yarnpkg/libzip@2.3.0':
-    resolution: {integrity: sha512-6xm38yGVIa6mKm/DUCF2zFFJhERh/QWp1ufm4cNUvxsONBmfPg8uZ9pZBdOmF6qFGr/HlT6ABBkCSx/dlEtvWg==}
-    engines: {node: '>=12 <14 || 14.2 - 14.9 || >14.10.0'}
-
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
@@ -7957,20 +8057,8 @@ packages:
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
-  abortcontroller-polyfill@1.7.5:
-    resolution: {integrity: sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==}
-
-  accepts@1.3.8:
-    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
-    engines: {node: '>= 0.6'}
-
-  acorn-globals@6.0.0:
-    resolution: {integrity: sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==}
-
-  acorn-import-assertions@1.9.0:
-    resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==}
-    peerDependencies:
-      acorn: ^8
+  acorn-globals@7.0.1:
+    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
 
   acorn-jsx@3.0.1:
     resolution: {integrity: sha512-AU7pnZkguthwBjKgCg6998ByQNIMjbuDQZ8bb78QAFZwPfmKia8AIzgY/gWgqCjnht8JLdXmB4YxA0KaV60ncQ==}
@@ -7980,12 +8068,8 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@7.2.0:
-    resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
-    engines: {node: '>=0.4.0'}
-
-  acorn-walk@8.3.2:
-    resolution: {integrity: sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==}
+  acorn-walk@8.3.4:
+    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
     engines: {node: '>=0.4.0'}
 
   acorn@3.3.0:
@@ -8008,19 +8092,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.11.3:
-    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
+  acorn@8.14.0:
+    resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  address@1.2.2:
-    resolution: {integrity: sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==}
-    engines: {node: '>= 10.0.0'}
-
-  agent-base@5.1.1:
-    resolution: {integrity: sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==}
-    engines: {node: '>= 6.0.0'}
-
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -8041,14 +8117,14 @@ packages:
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
-  ajv@8.12.0:
-    resolution: {integrity: sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==}
+  ajv@8.17.1:
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  algoliasearch@4.23.3:
-    resolution: {integrity: sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==}
+  algoliasearch@4.24.0:
+    resolution: {integrity: sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==}
 
-  anser@2.1.1:
-    resolution: {integrity: sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==}
+  anser@2.3.0:
+    resolution: {integrity: sha512-pGGR7Nq1K/i9KGs29PvHDXA8AsfZ3OiYRMDClT3FIC085Kbns9CJ7ogq9MEiGnrjd9THOGoh7B+kWzePHzZyJQ==}
 
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
@@ -8069,6 +8145,10 @@ packages:
     resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
     engines: {node: '>=12'}
 
+  ansi-escapes@6.2.1:
+    resolution: {integrity: sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==}
+    engines: {node: '>=14.16'}
+
   ansi-red@0.1.1:
     resolution: {integrity: sha512-ewaIr5y+9CUTGFwZfpECUbFlGcC0GCw1oqR9RI6h1gQCd9Aj2GxSckCnPsVJnmfMZbwFYE+leZGASgkWl06Jow==}
     engines: {node: '>=0.10.0'}
@@ -8089,13 +8169,10 @@ packages:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
-  ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-sequence-parser@1.1.1:
-    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
-
   ansi-styles@2.2.1:
     resolution: {integrity: sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==}
     engines: {node: '>=0.10.0'}
@@ -8127,9 +8204,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  app-root-dir@1.0.2:
-    resolution: {integrity: sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==}
-
   aproba@2.0.0:
     resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
 
@@ -8154,12 +8228,13 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
 
-  aria-query@5.1.3:
-    resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
-
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
   arr-diff@4.0.0:
     resolution: {integrity: sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==}
     engines: {node: '>=0.10.0'}
@@ -8180,9 +8255,6 @@ packages:
     resolution: {integrity: sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==}
     engines: {node: '>=0.10.0'}
 
-  array-flatten@1.1.1:
-    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
-
   array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
@@ -8221,11 +8293,9 @@ packages:
     resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==}
     engines: {node: '>= 0.4'}
 
-  array.prototype.toreversed@1.1.2:
-    resolution: {integrity: sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==}
-
-  array.prototype.tosorted@1.1.3:
-    resolution: {integrity: sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==}
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
 
   arraybuffer.prototype.slice@1.0.3:
     resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==}
@@ -8239,9 +8309,6 @@ packages:
     resolution: {integrity: sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==}
     engines: {node: '>=8'}
 
-  assert@2.1.0:
-    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
-
   assign-symbols@1.0.0:
     resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
     engines: {node: '>=0.10.0'}
@@ -8261,16 +8328,10 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
-  astring@1.8.6:
-    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
 
-  async-limiter@1.0.1:
-    resolution: {integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==}
-
-  async@3.2.5:
-    resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
-
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -8282,8 +8343,8 @@ packages:
   autolinker@0.28.1:
     resolution: {integrity: sha512-zQAFO1Dlsn69eXaO6+7YZc+v84aquQKbwpzCE3L0stj56ERn9hutFxPopViLjo9G+rWwjozRhgS5KJ25Xy19cQ==}
 
-  autoprefixer@10.4.19:
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
+  autoprefixer@10.4.20:
+    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -8293,19 +8354,16 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axe-core@4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
-    engines: {node: '>=4'}
-
-  axe-core@4.9.0:
-    resolution: {integrity: sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==}
+  axe-core@4.10.2:
+    resolution: {integrity: sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==}
     engines: {node: '>=4'}
 
-  axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
 
-  b4a@1.6.6:
-    resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
+  b4a@1.6.7:
+    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
 
   babel-core@7.0.0-bridge.0:
     resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==}
@@ -8319,9 +8377,9 @@ packages:
     peerDependencies:
       eslint: '>= 4.12.1'
 
-  babel-jest@28.1.3:
-    resolution: {integrity: sha512-epUaPOEWMk3cWX0M/sPvCHHCe9fMFAa/9hXEgKP8nFfNl/jlGkE9ucq9NqkZGXLDduCJYS0UvSlPUwC0S+rH6Q==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  babel-jest@29.7.0:
+    resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.8.0
 
@@ -8337,12 +8395,12 @@ packages:
     resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==}
     engines: {node: '>=8'}
 
-  babel-plugin-jest-hoist@28.1.3:
-    resolution: {integrity: sha512-Ys3tUKAmfnkRUpPdpa98eYrAR0nV+sSFUZZEGuQ2EbFd1y4SOLtD5QDNHAq+bb9a+bbXvYQC4b+ID/THIMcU6Q==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  babel-plugin-jest-hoist@29.6.3:
+    resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  babel-plugin-polyfill-corejs2@0.4.10:
-    resolution: {integrity: sha512-rpIuu//y5OX6jVU+a5BCn1R5RSZYWAl2Nar76iwaOdycqb6JPxediskWFMMl7stfwNJR4b7eiQvh5fB5TEQJTQ==}
+  babel-plugin-polyfill-corejs2@0.4.12:
+    resolution: {integrity: sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
@@ -8351,13 +8409,13 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  babel-plugin-polyfill-corejs3@0.10.4:
-    resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==}
+  babel-plugin-polyfill-corejs3@0.10.6:
+    resolution: {integrity: sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  babel-plugin-polyfill-regenerator@0.6.1:
-    resolution: {integrity: sha512-JfTApdE++cgcTWjsiCQlLyFBMbTUft9ja17saCc93lgV33h4tuCVj7tlvu//qpLwaG+3yEz7/KhahGrUMkVq9g==}
+  babel-plugin-polyfill-regenerator@0.6.3:
+    resolution: {integrity: sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==}
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
@@ -8369,8 +8427,8 @@ packages:
   babel-plugin-transform-react-remove-prop-types@0.4.24:
     resolution: {integrity: sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==}
 
-  babel-preset-current-node-syntax@1.0.1:
-    resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
+  babel-preset-current-node-syntax@1.1.0:
+    resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==}
     peerDependencies:
       '@babel/core': ^7.0.0
 
@@ -8378,35 +8436,35 @@ packages:
     resolution: {integrity: sha512-TxbnZHb7p38jDRJh9clzCBqenyHjTkX5GX6SWwbcsW6UTMd912lbXJz7q3demciDI/BdbhjhNEirlgI9ov/JAg==}
     engines: {node: '>= v12.0.0'}
 
-  babel-preset-jest@28.1.3:
-    resolution: {integrity: sha512-L+fupJvlWAHbQfn74coNX3zf60LXMJsezNvvx8eIh7iOR1luJ1poxYgQk1F8PYtNq/6QODDHCqsSnTFSWC491A==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  babel-preset-jest@29.6.3:
+    resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  bail@1.0.5:
-    resolution: {integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==}
-
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  bare-events@2.2.2:
-    resolution: {integrity: sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==}
+  bare-events@2.5.0:
+    resolution: {integrity: sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==}
+
+  bare-fs@2.3.5:
+    resolution: {integrity: sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==}
 
-  bare-fs@2.2.3:
-    resolution: {integrity: sha512-amG72llr9pstfXOBOHve1WjiuKKAMnebcmMbPWDZ7BCevAoJLpugjuAPRsDINEyjT0a6tbaVx3DctkXIRbLuJw==}
+  bare-os@2.4.4:
+    resolution: {integrity: sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==}
 
-  bare-os@2.2.1:
-    resolution: {integrity: sha512-OwPyHgBBMkhC29Hl3O4/YfxW9n7mdTr2+SsO29XBWKKJsbgj3mnorDB80r5TiCQgQstgE5ga1qNYrpes6NvX2w==}
+  bare-path@2.1.3:
+    resolution: {integrity: sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==}
 
-  bare-path@2.1.1:
-    resolution: {integrity: sha512-OHM+iwRDRMDBsSW7kl3dO62JyHdBKO3B25FB9vNQBPcGHMo4+eA8Yj41Lfbk3pS/seDY+siNge0LdRTulAau/A==}
+  bare-stream@2.3.2:
+    resolution: {integrity: sha512-EFZHSIBkDgSHIwj2l2QZfP4U5OcD4xFAOwhSb/vlr9PIqyGJGvB/nfClJbcnh3EY4jtPE4zsb5ztae96bVF79A==}
 
-  base-x@3.0.9:
-    resolution: {integrity: sha512-H7JU6iBHTal1gp56aKoaa//YUxEaAOUiydvrV/pILqIHXTtqxSkATOnDA2u+jZ/61sD+L/412+7kzXRtWukhpQ==}
+  base-x@3.0.10:
+    resolution: {integrity: sha512-7d0s06rR9rYaIWHkpfLIFICM/tkSVdoPC9qYAQRpxn9DdKNWNsKC0uk++akckyLq16Tx2WIinnZ6WRriAt6njQ==}
 
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -8423,10 +8481,6 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
-  big-integer@1.6.52:
-    resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
-    engines: {node: '>=0.6'}
-
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
@@ -8440,13 +8494,6 @@ packages:
   bl@5.1.0:
     resolution: {integrity: sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==}
 
-  body-parser@1.20.2:
-    resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
-  boolbase@1.0.0:
-    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
-
   boolify@1.0.1:
     resolution: {integrity: sha512-ma2q0Tc760dW54CdOyJjhrg/a54317o1zYADQJFgperNGKIKgAUGIcKnuMiff8z57+yGlrGNEt4lPgZfCgTJgA==}
 
@@ -8454,10 +8501,6 @@ packages:
     resolution: {integrity: sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==}
     engines: {node: '>=14.16'}
 
-  bplist-parser@0.2.0:
-    resolution: {integrity: sha512-z0M+byMThzQmD9NILRniCUXYsYpjwnlO8N5uCFaCqIOpqRsJCrQL9NK3JsD67CN5a08nF5oIL2bD6loTdHOuKw==}
-    engines: {node: '>= 5.10.0'}
-
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -8468,37 +8511,21 @@ packages:
     resolution: {integrity: sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==}
     engines: {node: '>=0.10.0'}
 
-  braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  breakword@1.0.6:
-    resolution: {integrity: sha512-yjxDAYyK/pBvws9H4xKYpLDpYKEH6CzrBPAuXq3x18I+c/2MkVtT3qAr7Oloi6Dss9qNhPVueAAVU1CSeNDIXw==}
-
   browser-assert@1.2.1:
     resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==}
 
-  browser-process-hrtime@1.0.0:
-    resolution: {integrity: sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==}
-
-  browserify-zlib@0.1.4:
-    resolution: {integrity: sha512-19OEpq7vWgsH6WkvkBJQDFvJS1uPcbFOQ4v9CU839dO+ZZXUZO6XpE6hNCqvlIIj+4fZvRiJ6DsAQ382GwiyTQ==}
-
-  browserslist@4.23.0:
-    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+  browserslist@4.24.2:
+    resolution: {integrity: sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
-  buble@0.19.6:
-    resolution: {integrity: sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg==}
-    hasBin: true
-
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -8508,9 +8535,6 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  builtins@5.1.0:
-    resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
-
   bundle-require@3.1.2:
     resolution: {integrity: sha512-Of6l6JBAxiyQ5axFxUM6dYeP/W7X2Sozeo/4EYB9sJhL+dqL7TKjg+shwxp6jlu/6ZSERfsYtIpSJ1/x3XkAEA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -8521,14 +8545,6 @@ packages:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
-  bytes@3.0.0:
-    resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
-    engines: {node: '>= 0.8'}
-
-  bytes@3.1.2:
-    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
-    engines: {node: '>= 0.8'}
-
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -8584,18 +8600,15 @@ packages:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
     engines: {node: '>=14.16'}
 
-  caniuse-lite@1.0.30001609:
-    resolution: {integrity: sha512-JFPQs34lHKx1B5t1EpQpWH4c+29zIyn/haGsbpfq3suuV9v56enjFt23zqijxGTMwy1p/4H2tjnQMY+p1WoAyA==}
+  caniuse-lite@1.0.30001683:
+    resolution: {integrity: sha512-iqmNnThZ0n70mNwvxpEC2nBJ037ZHZUoBI5Gorh1Mw6IlEAZujEoU1tXA628iZfzm7R9FvFzxbfdgml82a3k8Q==}
 
-  canvas-confetti@1.9.2:
-    resolution: {integrity: sha512-6Xi7aHHzKwxZsem4mCKoqP6YwUG3HamaHHAlz1hTNQPCqXhARFpSXnkC9TWlahHY5CG6hSL5XexNjxK8irVErg==}
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
 
   capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
 
-  ccount@1.1.0:
-    resolution: {integrity: sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==}
-
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -8626,13 +8639,10 @@ packages:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
     engines: {node: '>=10'}
 
-  char-regex@2.0.1:
-    resolution: {integrity: sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==}
+  char-regex@2.0.2:
+    resolution: {integrity: sha512-cbGOjAptfM2LVmWhwRFHEKTPkLwNddVmuqYZQt895yXwAsWsXObCG+YN4DGQ/JBtT4GP1a1lPPdio2z413LmTg==}
     engines: {node: '>=12.20'}
 
-  character-entities-html4@1.1.4:
-    resolution: {integrity: sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==}
-
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
@@ -8668,8 +8678,8 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
-  chrome-trace-event@1.0.3:
-    resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
+  chrome-trace-event@1.0.4:
+    resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
   ci-info@3.9.0:
@@ -8679,8 +8689,8 @@ packages:
   citty@0.1.6:
     resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==}
 
-  cjs-module-lexer@1.2.3:
-    resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==}
+  cjs-module-lexer@1.4.1:
+    resolution: {integrity: sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==}
 
   class-utils@0.3.6:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
@@ -8717,8 +8727,8 @@ packages:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
 
-  cli-table3@0.6.4:
-    resolution: {integrity: sha512-Lm3L0p+/npIQWNIiyF/nAn7T5dnOwR3xNTHXYEBFBFVPXzCVNZ5lqEC/1eo/EVfpDsQ1I+TX4ORPQgp+UI0CRw==}
+  cli-table3@0.6.5:
+    resolution: {integrity: sha512-+W/5efTR7y5HRD7gACw9yQjqMVvEMLBHmboM/kPWam+H+Hmyrgjh6YncVKK122YZkXrLudzTuAukUw9FnMf7IQ==}
     engines: {node: 10.* || >= 12.*}
 
   cli-truncate@3.1.0:
@@ -8746,9 +8756,6 @@ packages:
   cliui@5.0.0:
     resolution: {integrity: sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==}
 
-  cliui@6.0.0:
-    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
-
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -8769,15 +8776,15 @@ packages:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
 
-  clsx@2.1.0:
-    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
   cmdk@0.2.1:
     resolution: {integrity: sha512-U6//9lQ6JvT47+6OF6Gi8BvkxYQ8SCRRSKIJkthIMsFsLZRG0cKvTtuTaefyIKMQb8rvvXy0wGdpTNq/jPtm+g==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
   co@4.6.0:
     resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==}
@@ -8789,6 +8796,9 @@ packages:
     deprecated: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
     hasBin: true
 
+  collapse-white-space@2.1.0:
+    resolution: {integrity: sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==}
+
   collect-v8-coverage@1.0.2:
     resolution: {integrity: sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==}
 
@@ -8844,6 +8854,10 @@ packages:
     resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
     engines: {node: '>=16'}
 
+  commander@12.1.0:
+    resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
+    engines: {node: '>=18'}
+
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
@@ -8863,8 +8877,8 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
-  comment-json@4.2.3:
-    resolution: {integrity: sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==}
+  comment-json@4.2.5:
+    resolution: {integrity: sha512-bKw/r35jR3HGt5PEPm1ljsQQGyCrR8sFGNiN5L+ykDHdpO8Smxkrkla9Yi6NkQyUrb8V54PGhfMs6NrIwtxtdw==}
     engines: {node: '>= 6'}
 
   commitlint-plugin-function-rules@1.7.1:
@@ -8886,20 +8900,6 @@ packages:
   component-emitter@1.3.1:
     resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==}
 
-  component-props@1.1.1:
-    resolution: {integrity: sha512-69pIRJs9fCCHRqCz3390YF2LV1Lu6iEMZ5zuVqqUn+G20V9BNXlMs0cWawWeW9g4Ynmg29JmkG6R7/lUJoGd1Q==}
-
-  component-xor@0.0.4:
-    resolution: {integrity: sha512-ZIt6sla8gfo+AFVRZoZOertcnD5LJaY2T9CKE2j13NJxQt/mUafD69Bl7/Y4AnpI2LGjiXH7cOfJDx/n2G9edA==}
-
-  compressible@2.0.18:
-    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
-    engines: {node: '>= 0.6'}
-
-  compression@1.7.4:
-    resolution: {integrity: sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==}
-    engines: {node: '>= 0.8.0'}
-
   compute-scroll-into-view@3.1.0:
     resolution: {integrity: sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==}
 
@@ -8918,6 +8918,9 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.0 || >=16.0.0}
     hasBin: true
 
+  confbox@0.1.8:
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
+
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
@@ -8938,17 +8941,9 @@ packages:
   constant-case@3.0.4:
     resolution: {integrity: sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==}
 
-  content-disposition@0.5.4:
-    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
-    engines: {node: '>= 0.6'}
-
-  content-type@1.0.5:
-    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
-    engines: {node: '>= 0.6'}
-
-  contentlayer@0.3.4:
-    resolution: {integrity: sha512-FYDdTUFaN4yqep0waswrhcXjmMJnPD5iXDTtxcUCGdklfuIrXM2xLx51xl748cHmGA6IsC+27YZFxU6Ym13QIA==}
-    engines: {node: '>=14.18'}
+  contentlayer2@0.5.3:
+    resolution: {integrity: sha512-0vHdTWsuTgY/dMKxhCc8wILoeaCK5ye42i1gRd1jOoKFXQ6q/eMnSp+gSE81V8wbBa2jv7cjP90xpiRfzaXTWw==}
+    engines: {node: '>=18'}
     hasBin: true
 
   conventional-changelog-angular@6.0.0:
@@ -8964,28 +8959,15 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
   convert-source-map@2.0.0:
-    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
-
-  cookie-signature@1.0.6:
-    resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==}
-
-  cookie@0.6.0:
-    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
-    engines: {node: '>= 0.6'}
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
   copy-descriptor@0.1.1:
     resolution: {integrity: sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==}
     engines: {node: '>=0.10.0'}
 
-  core-js-compat@3.36.1:
-    resolution: {integrity: sha512-Dk997v9ZCt3X/npqzyGdTlq6t7lDBhZwGvV94PKzDArjp7BTRm7WlDAXYd/OWdeFHO8OChQYRJNJvUCqCbrtKA==}
-
-  core-js@3.36.1:
-    resolution: {integrity: sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==}
+  core-js-compat@3.39.0:
+    resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
 
   core-js@3.39.0:
     resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==}
@@ -9011,12 +8993,30 @@ packages:
       typescript:
         optional: true
 
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  create-jest@29.7.0:
+    resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    hasBin: true
+
   create-react-class@15.7.0:
     resolution: {integrity: sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==}
 
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  create-storybook@8.4.5:
+    resolution: {integrity: sha512-wWEwHuiQk89UiJy4r4xjNOsSQwGfkqkMb5B9iT/NzyYe8RW9cMXyObi9nB53cpzO1AR+OMqLzUqqtkReKBOxGg==}
+    hasBin: true
+
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
@@ -9025,36 +9025,18 @@ packages:
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
     hasBin: true
 
-  cross-spawn@5.1.0:
-    resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
-
-  cross-spawn@6.0.5:
-    resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
+  cross-spawn@6.0.6:
+    resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
     engines: {node: '>=4.8'}
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crypto-random-string@2.0.0:
-    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
-    engines: {node: '>=8'}
-
   crypto-random-string@4.0.0:
     resolution: {integrity: sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==}
     engines: {node: '>=12'}
 
-  css-select@4.3.0:
-    resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
-
-  css-tree@1.1.3:
-    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
-    engines: {node: '>=8.0.0'}
-
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -9063,10 +9045,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  csso@4.2.0:
-    resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
-    engines: {node: '>=8.0.0'}
-
   cssom@0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
 
@@ -9080,19 +9058,6 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
-  csv-generate@3.4.3:
-    resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
-
-  csv-parse@4.16.3:
-    resolution: {integrity: sha512-cO1I/zmz4w2dcKHVvpCr7JVRu8/FymG5OEpmvsZYlccYolPBLoVGKUHgNoc4ZGkFeFlWGEDmMyBM+TTqRdW/wg==}
-
-  csv-stringify@5.6.5:
-    resolution: {integrity: sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==}
-
-  csv@5.5.3:
-    resolution: {integrity: sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==}
-    engines: {node: '>= 0.1.90'}
-
   d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
@@ -9131,6 +9096,9 @@ packages:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debounce@1.2.1:
     resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
 
@@ -9159,6 +9127,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.7:
+    resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decamelize-keys@1.1.1:
     resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
     engines: {node: '>=0.10.0'}
@@ -9181,12 +9158,13 @@ packages:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
 
-  dedent@0.7.0:
-    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
-
-  deep-equal@2.2.3:
-    resolution: {integrity: sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==}
-    engines: {node: '>= 0.4'}
+  dedent@1.5.3:
+    resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
 
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
@@ -9199,10 +9177,6 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
-  default-browser-id@3.0.0:
-    resolution: {integrity: sha512-OZ1y3y0SqSICtE8DE4S8YOE9UZOJ8wO16fKWVP5J1Qz42kV9jcnMVFrEE/noXb/ss3Q4pZIH79kxofzyNNtUNA==}
-    engines: {node: '>=12'}
-
   defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
@@ -9251,18 +9225,10 @@ packages:
   delegates@1.0.0:
     resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
 
-  depd@2.0.0:
-    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
-    engines: {node: '>= 0.8'}
-
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
-  destroy@1.2.0:
-    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
   detect-file@1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
     engines: {node: '>=0.10.0'}
@@ -9287,13 +9253,8 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  detect-package-manager@2.0.1:
-    resolution: {integrity: sha512-j/lJHyoLlWi6G1LDdLgvUtz60Zo5GEj+sVYtTVXnYLDPuzgC3llMxonXym9zIwhhUII8vjdw0LXxavpLqTbl1A==}
-    engines: {node: '>=12'}
-
-  detect-port@1.5.1:
-    resolution: {integrity: sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==}
-    hasBin: true
+  devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
   diacritics-map@0.1.0:
     resolution: {integrity: sha512-3omnDTYrGigU0i4cJjvaKwD52B8aoqyX/NEIkukFFkogBemsIbhSa1O414fpTp5nuszJG6lvQ5vBvDVNCbSsaQ==}
@@ -9302,18 +9263,14 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
-  diff-sequences@28.1.1:
-    resolution: {integrity: sha512-FU0iFaH/E23a+a718l8Qa/19bF9p06kgE0KipMOMadwa3SjnaElKzPaUC0vnibs6/B/9ni97s61mcejk8W1fQw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  diff-sequences@29.6.3:
+    resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
-  diff@5.2.0:
-    resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
-    engines: {node: '>=0.3.1'}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -9332,12 +9289,15 @@ packages:
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
-  dom-iterator@1.0.0:
-    resolution: {integrity: sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==}
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
   dom-serializer@1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
 
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
@@ -9350,9 +9310,16 @@ packages:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
 
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
+  domutils@3.1.0:
+    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
 
@@ -9364,21 +9331,14 @@ packages:
     resolution: {integrity: sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==}
     engines: {node: '>=10'}
 
-  dotenv-expand@10.0.0:
-    resolution: {integrity: sha512-GopVGCpVS1UKH75VKHGuQFqS1Gusej0z4FyQkPdwjil2gNIv+LNsqBlboOzpJFZKVT95GkCyWJbBSdFEFUWI2A==}
+  dotenv-expand@11.0.7:
+    resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
     engines: {node: '>=12'}
 
-  dotenv-expand@5.1.0:
-    resolution: {integrity: sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==}
-
   dotenv@16.4.5:
     resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
     engines: {node: '>=12'}
 
-  dotenv@7.0.0:
-    resolution: {integrity: sha512-M3NhsLbV1i6HuGzBUH8vXrtxOk+tWmzWKDMbAVSUp3Zsjm7ywFeuwrUXhmhQyRK1q5B5GGy7hcXPbj3bnfZg2g==}
-    engines: {node: '>=6'}
-
   dotenv@8.6.0:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
@@ -9386,27 +9346,19 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
-  duplexify@3.7.1:
-    resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
-
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
-  ee-first@1.1.1:
-    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
-
-  ejs@3.1.10:
-    resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-
-  electron-to-chromium@1.4.736:
-    resolution: {integrity: sha512-Rer6wc3ynLelKNM4lOCg7/zPQj8tPOCB2hzD32PX9wd3hgRRi9MxEbmkFCokzcEhRVMiOVLjnL9ig9cefJ+6+Q==}
+  electron-to-chromium@1.5.63:
+    resolution: {integrity: sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==}
 
-  emittery@0.10.2:
-    resolution: {integrity: sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==}
+  emittery@0.13.1:
+    resolution: {integrity: sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==}
     engines: {node: '>=12'}
 
+  emoji-regex-xs@1.0.0:
+    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
+
   emoji-regex@7.0.3:
     resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
 
@@ -9420,10 +9372,6 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
-  encodeurl@1.0.2:
-    resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
-    engines: {node: '>= 0.8'}
-
   encoding@0.1.13:
     resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
 
@@ -9434,8 +9382,8 @@ packages:
     resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==}
     engines: {node: '>=6.9.0'}
 
-  enhanced-resolve@5.16.0:
-    resolution: {integrity: sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==}
+  enhanced-resolve@5.17.1:
+    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.4.1:
@@ -9449,12 +9397,16 @@ packages:
     resolution: {integrity: sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==}
     engines: {node: '>=0.12'}
 
+  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'}
 
-  envinfo@7.12.0:
-    resolution: {integrity: sha512-Iw9rQJBGpJRd3rwXm9ft/JiGoAZmLxxJZELYDQoPRZ4USVhkKtIcNBPw6U+/K2mBpaqM25JSV6Yl4Az9vO2wJg==}
+  envinfo@7.14.0:
+    resolution: {integrity: sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==}
     engines: {node: '>=4'}
     hasBin: true
 
@@ -9468,8 +9420,8 @@ packages:
   error-ex@1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
 
-  es-abstract@1.23.3:
-    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
+  es-abstract@1.23.5:
+    resolution: {integrity: sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==}
     engines: {node: '>= 0.4'}
 
   es-define-property@1.0.0:
@@ -9480,18 +9432,12 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-get-iterator@1.1.3:
-    resolution: {integrity: sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==}
-
-  es-iterator-helpers@1.0.18:
-    resolution: {integrity: sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==}
+  es-iterator-helpers@1.2.0:
+    resolution: {integrity: sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@0.9.3:
-    resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
-
-  es-module-lexer@1.5.0:
-    resolution: {integrity: sha512-pqrTKmwEIgafsYZAGw9kszYzmagcE/n4dbgwGWLEXg7J4QFJVQRBld8j3Q3GNez79jzxZshq0bcT962QHOghjw==}
+  es-module-lexer@1.5.4:
+    resolution: {integrity: sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==}
 
   es-object-atoms@1.0.0:
     resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==}
@@ -9508,6 +9454,9 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
+  es-toolkit@1.27.0:
+    resolution: {integrity: sha512-ETSFA+ZJArcuSCpzD2TjAy6UHpx4E4uqFsoDg9F/nTLogrLmVVZQ+zNxco5h7cWnA1nNak07IXsLcaSMih+ZPQ==}
+
   es5-ext@0.10.64:
     resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
     engines: {node: '>=0.10'}
@@ -9519,6 +9468,12 @@ packages:
     resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
     engines: {node: '>=0.12'}
 
+  esast-util-from-estree@2.0.0:
+    resolution: {integrity: sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ==}
+
+  esast-util-from-js@2.0.1:
+    resolution: {integrity: sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw==}
+
   esbuild-android-64@0.15.18:
     resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
     engines: {node: '>=12'}
@@ -9615,11 +9570,13 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
-  esbuild-plugin-alias@0.2.1:
-    resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
+  esbuild-plugin-raw@0.1.8:
+    resolution: {integrity: sha512-RNLzkR9DZIDW5nLjtWoSHzECsVHwJf/pel8RFw0fF1AE/0Y7rsdayf1s23mJoXYAuw2rUDqm1hF7zXK++ABRMg==}
+    peerDependencies:
+      esbuild: ^0.14.36 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0 || ^0.20.0
 
-  esbuild-register@3.5.0:
-    resolution: {integrity: sha512-+4G/XmakeBAsvJuDugJvtyF1x+XJT4FMocynNpxrvEBViirpfUn2PgNpCHedfWhF4WokNsO/OvMKrmJOIJsI5A==}
+  esbuild-register@3.6.0:
+    resolution: {integrity: sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==}
     peerDependencies:
       esbuild: '>=0.12 <1'
 
@@ -9657,13 +9614,13 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  esbuild@0.20.2:
-    resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
+  esbuild@0.21.5:
+    resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
   escape-carriage@1.3.1:
@@ -9673,9 +9630,6 @@ packages:
     resolution: {integrity: sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==}
     engines: {node: '>=12'}
 
-  escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
-
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -9717,10 +9671,10 @@ packages:
       eslint-plugin-react: ^7.21.5
       eslint-plugin-react-hooks: ^4 || ^3 || ^2.3.0 || ^1.7.0
 
-  eslint-config-next@13.5.6:
-    resolution: {integrity: sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==}
+  eslint-config-next@15.0.3:
+    resolution: {integrity: sha512-IGP2DdQQrgjcr4mwFPve4DrCqo7CVVez1WoYY47XwKSrYO4hC0Dlb+iJA60i0YfICOzgNADIb8r28BpQ5Zs0wg==}
     peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
+      eslint: ^7.23.0 || ^8.0.0 || ^9.0.0
       typescript: '>=3.3.1'
     peerDependenciesMeta:
       typescript:
@@ -9774,12 +9728,18 @@ packages:
       eslint: '*'
       eslint-plugin-import: '*'
 
-  eslint-import-resolver-typescript@3.6.1:
-    resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
+  eslint-import-resolver-typescript@3.6.3:
+    resolution: {integrity: sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
       eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
 
   eslint-loader@4.0.2:
     resolution: {integrity: sha512-EDpXor6lsjtTzZpLUn7KmXs02+nIjGcgees9BYjNkWra3jVq5vVa8IoCKgzT2M7dNNeoMBtaSG83Bd40N3poLw==}
@@ -9810,27 +9770,6 @@ packages:
       eslint-import-resolver-webpack:
         optional: true
 
-  eslint-module-utils@2.8.1:
-    resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
   eslint-plugin-es@3.0.1:
     resolution: {integrity: sha512-GUmAsJaN4Fc7Gbtl8uOBlayo2DqhwWvEzykMHSCZHU3XdJ+NSzzZcVhXh3VxX5icqQ+oQdIEawXX8xkR3mIFmQ==}
     engines: {node: '>=8.10.0'}
@@ -9843,16 +9782,6 @@ packages:
     peerDependencies:
       eslint: ^7.1.0
 
-  eslint-plugin-import@2.29.1:
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-
   eslint-plugin-import@2.31.0:
     resolution: {integrity: sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==}
     engines: {node: '>=4'}
@@ -9873,11 +9802,11 @@ packages:
       '@typescript-eslint/eslint-plugin':
         optional: true
 
-  eslint-plugin-jsx-a11y@6.8.0:
-    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
     engines: {node: '>=4.0'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
   eslint-plugin-node@11.1.0:
     resolution: {integrity: sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==}
@@ -9896,23 +9825,29 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-promise@6.1.1:
-    resolution: {integrity: sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==}
+  eslint-plugin-promise@6.6.0:
+    resolution: {integrity: sha512-57Zzfw8G6+Gq7axm2Pdo3gW/Rx3h9Yywgn61uE/3elTCOePEHVrn2i5CdfBwA1BLK0Q0WqctICIUSqXZW/VprQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
+      eslint: ^7.0.0 || ^8.0.0 || ^9.0.0
 
-  eslint-plugin-react-hooks@4.6.0:
-    resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
+  eslint-plugin-react-hooks@4.6.2:
+    resolution: {integrity: sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==}
     engines: {node: '>=10'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
 
-  eslint-plugin-react@7.34.1:
-    resolution: {integrity: sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==}
+  eslint-plugin-react-hooks@5.0.0:
+    resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react@7.37.2:
+    resolution: {integrity: sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==}
     engines: {node: '>=4'}
     peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
   eslint-plugin-unused-imports@2.0.0:
     resolution: {integrity: sha512-3APeS/tQlTrFa167ThtP0Zm0vctjr4M44HMpeg1P4bK6wItarumq0Ma82xorMKdFsWpphQBlRPzw/pxiVELX1A==}
@@ -9969,11 +9904,13 @@ packages:
   eslint@5.16.0:
     resolution: {integrity: sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==}
     engines: {node: ^6.14.0 || ^8.10.0 || >=9.10.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   eslint@7.32.0:
     resolution: {integrity: sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==}
     engines: {node: ^10.12.0 || >=12.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
   esniff@2.0.1:
@@ -10001,8 +9938,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  esquery@1.5.0:
-    resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
   esrecurse@4.3.0:
@@ -10017,27 +9954,26 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
-  estree-util-attach-comments@2.1.1:
-    resolution: {integrity: sha512-+5Ba/xGGS6mnwFbXIuQiDPTbuTxuMCooq3arVv7gPZtYpjp+VXH/NkHAP35OOefPhNG/UGqU3vt/LTABwcHX0w==}
+  estree-util-attach-comments@3.0.0:
+    resolution: {integrity: sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==}
 
-  estree-util-build-jsx@2.2.2:
-    resolution: {integrity: sha512-m56vOXcOBuaF+Igpb9OPAy7f9w9OIkb5yhjsZuaPm7HoGi4oTOQi0h2+yZ+AtKklYFZ+rPC4n0wYCJCEU1ONqg==}
+  estree-util-build-jsx@3.0.1:
+    resolution: {integrity: sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==}
 
-  estree-util-is-identifier-name@1.1.0:
-    resolution: {integrity: sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==}
+  estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
 
-  estree-util-is-identifier-name@2.1.0:
-    resolution: {integrity: sha512-bEN9VHRyXAUOjkKVQVvArFym08BTWB0aJPppZZr0UNyAqWsLaVfAqP7hbaTJjzHifmB5ebnR8Wm7r7yGN/HonQ==}
+  estree-util-scope@1.0.0:
+    resolution: {integrity: sha512-2CAASclonf+JFWBNJPndcOpA8EMJwa0Q8LUFJEKqXLW6+qBvbFZuF5gItbQOs/umBUkjviCSDCbBwU2cXbmrhQ==}
 
-  estree-util-to-js@1.2.0:
-    resolution: {integrity: sha512-IzU74r1PK5IMMGZXUVZbmiu4A1uhiPgW5hm1GjcOfr4ZzHaMPpLNJjR7HjXiIOzi25nZDrgFTobHTkV5Q6ITjA==}
+  estree-util-to-js@2.0.0:
+    resolution: {integrity: sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==}
 
-  estree-util-value-to-estree@1.3.0:
-    resolution: {integrity: sha512-Y+ughcF9jSUJvncXwqRageavjrNPAI+1M/L3BI3PyLp1nmgYTGUXU6t5z1Y7OWuThoDdhPME07bQU+d5LxdJqw==}
-    engines: {node: '>=12.0.0'}
+  estree-util-value-to-estree@3.2.1:
+    resolution: {integrity: sha512-Vt2UOjyPbNQQgT5eJh+K5aATti0OjCIAGc9SgMdOFYbohuifsWclR74l0iZTJwePMgWYdX1hlVS+dedH9XV8kw==}
 
-  estree-util-visit@1.2.1:
-    resolution: {integrity: sha512-xbgqcrkIVbIG+lI/gzbvd9SGTJL4zqJKBFttUl5pP27KhAjtMKbX/mQXJ7qgyXpMgVy/zvpm0xoQQaGL8OloOw==}
+  estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
 
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
@@ -10049,10 +9985,6 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
-  etag@1.8.1:
-    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
-    engines: {node: '>= 0.6'}
-
   event-emitter@0.3.5:
     resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
@@ -10095,17 +10027,13 @@ packages:
     resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
     engines: {node: '>=0.10.0'}
 
-  expect@28.1.3:
-    resolution: {integrity: sha512-eEh0xn8HlsuOBxFgIss+2mX85VAS4Qy3OSkjV7rlBWljtA4oWH37glVGyOZSZvErDT/yBywZdPGwCXuTvSG85g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  expect@29.7.0:
+    resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   exponential-backoff@3.1.1:
     resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
 
-  express@4.19.2:
-    resolution: {integrity: sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==}
-    engines: {node: '>= 0.10.0'}
-
   ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
 
@@ -10131,10 +10059,6 @@ packages:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
     engines: {node: '>=0.10.0'}
 
-  extract-zip@1.7.0:
-    resolution: {integrity: sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==}
-    hasBin: true
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -10144,6 +10068,10 @@ packages:
   fast-fifo@1.3.2:
     resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
 
+  fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -10157,6 +10085,9 @@ packages:
   fast-memoize@2.5.2:
     resolution: {integrity: sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==}
 
+  fast-uri@3.0.3:
+    resolution: {integrity: sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==}
+
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
@@ -10166,16 +10097,13 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+  fd-package-json@1.2.0:
+    resolution: {integrity: sha512-45LSPmWf+gC5tdCQMNH4s9Sr00bIkiD9aN7dc5hqkrEw1geRYyDQS1v1oMHAW3ysfxfndqGsrDREHHjNNbKUfA==}
 
   fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
 
-  fetch-retry@5.0.6:
-    resolution: {integrity: sha512-3yurQZ2hD9VISAhJJP9bpYFNQrHHBXE2JxxjY5aLEcDi46RmAzJE2OC9FAde0yis5ElW0jTTzs0zfg/Cca4XqQ==}
-
   fflate@0.4.8:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
 
@@ -10195,12 +10123,6 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
-  file-system-cache@2.3.0:
-    resolution: {integrity: sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==}
-
-  filelist@1.0.4:
-    resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
-
   fill-range@2.2.4:
     resolution: {integrity: sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==}
     engines: {node: '>=0.10.0'}
@@ -10209,14 +10131,10 @@ packages:
     resolution: {integrity: sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==}
     engines: {node: '>=0.10.0'}
 
-  fill-range@7.0.1:
-    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  finalhandler@1.2.0:
-    resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==}
-    engines: {node: '>= 0.8'}
-
   find-cache-dir@2.1.0:
     resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
     engines: {node: '>=6'}
@@ -10241,9 +10159,6 @@ packages:
     resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  find-yarn-workspace-root2@1.2.16:
-    resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
-
   findup-sync@3.0.0:
     resolution: {integrity: sha512-YbffarhcicEhOrm4CtrwdKBdCuz576RLdhJDsIfvNtxUuhdRet1qZcsMjqbePtAseKdAnDyM/IyXbu7PRPRLYg==}
     engines: {node: '>= 0.10'}
@@ -10275,11 +10190,11 @@ packages:
   flatted@2.0.2:
     resolution: {integrity: sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==}
 
-  flatted@3.3.1:
-    resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
+  flatted@3.3.2:
+    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
 
-  flow-parser@0.233.0:
-    resolution: {integrity: sha512-E/mv51GYJfLuRX6fZnw4M52gBxYa8pkHUOgNEZOcQK2RTXS8YXeU5rlalkTcY99UpwbeNVCSUFKaavpOksi/pQ==}
+  flow-parser@0.254.0:
+    resolution: {integrity: sha512-FhO64nGWlkrCxMWRDL1Wbok+ep4iSw2t6EtuyYOFZRzBh902iynZ/GMDU/3RSbiKTmALkcmCmKQLe0eOWdMA8Q==}
     engines: {node: '>=0.4.0'}
 
   for-each@0.3.3:
@@ -10293,16 +10208,16 @@ packages:
     resolution: {integrity: sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==}
     engines: {node: '>=0.10.0'}
 
-  foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+  foreground-child@3.3.0:
+    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
     engines: {node: '>=14'}
 
   form-data-encoder@2.1.4:
     resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==}
     engines: {node: '>= 14.17'}
 
-  form-data@4.0.0:
-    resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
+  form-data@4.0.1:
+    resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
 
   format@0.2.2:
@@ -10313,10 +10228,6 @@ packages:
     resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
     engines: {node: '>=12.20.0'}
 
-  forwarded@0.2.0:
-    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
-    engines: {node: '>= 0.6'}
-
   fp-and-or@0.1.4:
     resolution: {integrity: sha512-+yRYRhpnFPWXSly/6V4Lw9IfOV26uu30kynGJ03PW+MnjOEQe45RZ141QcS0aJehYBYA50GfCDnsRbFJdhssRw==}
     engines: {node: '>=10'}
@@ -10328,23 +10239,26 @@ packages:
     resolution: {integrity: sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==}
     engines: {node: '>=0.10.0'}
 
-  framer-motion@10.18.0:
-    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
+  framer-motion@11.11.13:
+    resolution: {integrity: sha512-aoEA83gsqRRsnh4TN7S9YNcKVLrg+GtPNnxNMd9bGn23+pLmuKGQeccPnqffEKzlkgmy2MkMo0jRkK41S2LzWw==}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      '@emotion/is-prop-valid': '*'
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
       react:
         optional: true
       react-dom:
         optional: true
 
-  framer-motion@11.2.12:
-    resolution: {integrity: sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==}
+  framer-motion@11.9.0:
+    resolution: {integrity: sha512-nCfGxvsQecVLjjYDu35G2F5ls+ArE3FBfhxV0RSiisMaUKqteq5DMBFNRKwMyVj+VqKTNhawt+BV480YCHKFlQ==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
     peerDependenciesMeta:
       '@emotion/is-prop-valid':
         optional: true
@@ -10353,10 +10267,6 @@ packages:
       react-dom:
         optional: true
 
-  fresh@0.5.2:
-    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
-    engines: {node: '>= 0.6'}
-
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -10364,10 +10274,6 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
 
-  fs-extra@11.1.1:
-    resolution: {integrity: sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==}
-    engines: {node: '>=14.14'}
-
   fs-extra@11.2.0:
     resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
     engines: {node: '>=14.14'}
@@ -10388,9 +10294,6 @@ packages:
     resolution: {integrity: sha512-XUBA9XClHbnJWSfBzjkm6RvPsyg3sryZt06BEQoXcF7EK/xpGaQYJgQKDJSUH5SGZ76Y7pFx1QBnXz09rU5Fbw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  fs-monkey@1.0.5:
-    resolution: {integrity: sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==}
-
   fs-readdir-recursive@1.1.0:
     resolution: {integrity: sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==}
 
@@ -10420,6 +10323,11 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     deprecated: This package is no longer supported.
 
+  geist@1.3.1:
+    resolution: {integrity: sha512-Q4gC1pBVPN+D579pBaz0TRRnGA4p9UK6elDY/xizXdFk/g4EKR5g0I+4p/Kj6gM0SajDBZ/0FvDV9ey9ud7BWw==}
+    peerDependencies:
+      next: '>=13.2.0'
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -10436,10 +10344,6 @@ packages:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
 
-  get-npm-tarball-url@2.1.0:
-    resolution: {integrity: sha512-ro+DiMu5DXgRBabqXupW38h7WPZ9+Ad8UjwhvsmmN8w1sU7ab0nzAXvVZ4kqYg57OrqomRtJvepX5/xvFKNtjA==}
-    engines: {node: '>=12.17'}
-
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -10448,10 +10352,6 @@ packages:
     resolution: {integrity: sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw==}
     engines: {node: '>=6'}
 
-  get-port@5.1.1:
-    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
-    engines: {node: '>=8'}
-
   get-stdin@7.0.0:
     resolution: {integrity: sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==}
     engines: {node: '>=8'}
@@ -10472,8 +10372,8 @@ packages:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.7.3:
-    resolution: {integrity: sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==}
+  get-tsconfig@4.8.1:
+    resolution: {integrity: sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==}
 
   get-value@2.0.6:
     resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
@@ -10491,9 +10391,6 @@ packages:
   github-from-package@0.0.0:
     resolution: {integrity: sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==}
 
-  github-slugger@1.5.0:
-    resolution: {integrity: sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==}
-
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -10514,15 +10411,10 @@ packages:
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
-  glob@10.3.12:
-    resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
 
-  glob@7.1.7:
-    resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==}
-    deprecated: Glob versions prior to v9 are no longer supported
-
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
@@ -10564,8 +10456,8 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
-  globalthis@1.0.3:
-    resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
   globby@11.1.0:
@@ -10576,6 +10468,10 @@ packages:
     resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  globby@14.0.2:
+    resolution: {integrity: sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==}
+    engines: {node: '>=18'}
+
   good-listener@1.2.2:
     resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
 
@@ -10592,9 +10488,6 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  grapheme-splitter@1.0.4:
-    resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
-
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
@@ -10610,10 +10503,6 @@ packages:
     resolution: {integrity: sha512-lh9HLdb53sC7XIZOYzTXM4lFuXElv3EVkSDhsd7DoJBj7hm+Ni7D3qYbb+Rr8DuM8nRanBvkVO9d7askreXGnQ==}
     deprecated: Removed event-stream from gulp-header
 
-  gunzip-maybe@1.4.2:
-    resolution: {integrity: sha512-4haO1M4mLO91PW57BMsDFf75UmwoRX0GkdD+Faw+Lr+r/OZrOCS0pIBwOL1xCKQqnQzbNFGgK2V2CpBUPeFNTw==}
-    hasBin: true
-
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -10684,70 +10573,51 @@ packages:
     resolution: {integrity: sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  hash-obj@4.0.0:
-    resolution: {integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==}
-    engines: {node: '>=12'}
-
-  hash-wasm@4.11.0:
-    resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==}
+  hash-wasm@4.12.0:
+    resolution: {integrity: sha512-+/2B2rYLb48I/evdOIhP+K/DD2ca2fgBjp6O+GBEnCDk2e4rpeXIK8GvIyRPjTezgmWn9gmKwkQjjx6BtqDHVQ==}
 
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-parse5@6.0.1:
-    resolution: {integrity: sha512-jeJUWiN5pSxW12Rh01smtVkZgZr33wBokLzKLwinYOUfSzm1Nl/c3GUGebDyOKjdsRgMvoVbV0VpAcpjF4NrJA==}
-
-  hast-util-from-parse5@7.1.2:
-    resolution: {integrity: sha512-Nz7FfPBuljzsN3tCQ4kCBKqdNhQE2l0Tn+X1ubgKBPRoiDIu1mL08Cfw4k7q71+Duyaw7DXDN+VTAp4Vh3oCOw==}
-
-  hast-util-has-property@2.0.1:
-    resolution: {integrity: sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==}
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
 
-  hast-util-heading-rank@2.1.1:
-    resolution: {integrity: sha512-iAuRp+ESgJoRFJbSyaqsfvJDY6zzmFoEnL1gtz1+U8gKtGGj1p0CVlysuUAUjq95qlZESHINLThwJzNGmgGZxA==}
+  hast-util-from-parse5@8.0.2:
+    resolution: {integrity: sha512-SfMzfdAi/zAoZ1KkFEyyeXBn7u/ShQrfd675ZEE9M3qj+PMFX05xubzRyF76CCSJu8au9jgVxDV1+okFvgZU4A==}
 
-  hast-util-is-element@1.1.0:
-    resolution: {integrity: sha512-oUmNua0bFbdrD/ELDSSEadRVtWZOf3iF6Lbv81naqsIV99RnSCieTbWuWCY8BAeEfKJTKl0gRdokv+dELutHGQ==}
+  hast-util-heading-rank@3.0.0:
+    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
 
   hast-util-parse-selector@2.2.5:
     resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
 
-  hast-util-parse-selector@3.1.1:
-    resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
-  hast-util-raw@7.2.3:
-    resolution: {integrity: sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==}
+  hast-util-to-estree@3.1.0:
+    resolution: {integrity: sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==}
 
-  hast-util-to-estree@2.3.3:
-    resolution: {integrity: sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==}
+  hast-util-to-html@9.0.3:
+    resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==}
 
-  hast-util-to-html@7.1.2:
-    resolution: {integrity: sha512-pu73bvORzdF6XZgwl9eID/0RjBb/jtRfoGRRSykpR1+o9rCdiAHpgkSukZsQBRlIqMg6ylAcd7F0F7myJUb09Q==}
-
-  hast-util-to-html@8.0.4:
-    resolution: {integrity: sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==}
-
-  hast-util-to-parse5@7.1.0:
-    resolution: {integrity: sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==}
+  hast-util-to-jsx-runtime@2.3.2:
+    resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==}
 
   hast-util-to-string@1.0.4:
     resolution: {integrity: sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w==}
 
-  hast-util-to-string@2.0.0:
-    resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
 
-  hast-util-whitespace@1.0.4:
-    resolution: {integrity: sha512-I5GTdSfhYfAPNztx2xJRQpG8cuDSNt599/7YUn7Gx/WxNMsG+a835k97TDkFgk123cwjfwINaZknkKkphx/f2A==}
-
-  hast-util-whitespace@2.0.1:
-    resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
   hastscript@6.0.0:
     resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
 
-  hastscript@7.2.0:
-    resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
+  hastscript@9.0.0:
+    resolution: {integrity: sha512-jzaLBGavEDKHrc5EfFImKN7nZKKBdSLIdGvCwDZ9TfzbF2ffXiov8CKE445L2Z1Ek2t/m4SKQ2j6Ipv7NyUolw==}
 
   header-case@2.0.4:
     resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
@@ -10778,24 +10648,17 @@ packages:
   html-escaper@2.0.2:
     resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
 
-  html-tags@3.3.1:
-    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
-    engines: {node: '>=8'}
-
-  html-void-elements@1.0.5:
-    resolution: {integrity: sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==}
-
-  html-void-elements@2.0.1:
-    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  htmlnano@2.1.0:
-    resolution: {integrity: sha512-jVGRE0Ep9byMBKEu0Vxgl8dhXYOUk0iNQ2pjsG+BcRB0u0oDF5A9p/iBGMg/PGKYUyMD0OAGu8dVT5Lzj8S58g==}
+  htmlnano@2.1.1:
+    resolution: {integrity: sha512-kAERyg/LuNZYmdqgCdYvugyLWNFAm8MWXpQMz1pLpetmCbFwoMxvkSoaAMlFrOC4OKTWI4KlZGT/RsNxg4ghOw==}
     peerDependencies:
-      cssnano: ^6.0.0
+      cssnano: ^7.0.0
       postcss: ^8.3.11
-      purgecss: ^5.0.0
+      purgecss: ^6.0.0
       relateurl: ^0.2.7
-      srcset: 4.0.0
+      srcset: 5.0.1
       svgo: ^3.0.2
       terser: ^5.10.0
       uncss: ^0.17.3
@@ -10820,13 +10683,12 @@ packages:
   htmlparser2@7.2.0:
     resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==}
 
+  htmlparser2@9.1.0:
+    resolution: {integrity: sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==}
+
   http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
 
-  http-errors@2.0.0:
-    resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
-    engines: {node: '>= 0.8'}
-
   http-proxy-agent@5.0.0:
     resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
     engines: {node: '>= 6'}
@@ -10835,10 +10697,6 @@ packages:
     resolution: {integrity: sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==}
     engines: {node: '>=10.19.0'}
 
-  https-proxy-agent@4.0.0:
-    resolution: {integrity: sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==}
-    engines: {node: '>= 6.0.0'}
-
   https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -10866,6 +10724,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  hyperdyperid@1.2.0:
+    resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
+    engines: {node: '>=10.18'}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -10877,16 +10739,16 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore-walk@6.0.4:
-    resolution: {integrity: sha512-t7sv42WkwFkyKbivUCglsQW5YWMskWtbEf4MNKX5u/CCWHKSPzN4FtBQGsQZgCLbxOzpVlcbWVK5KB3auIOjSw==}
+  ignore-walk@6.0.5:
+    resolution: {integrity: sha512-VuuG0wCnjhnylG1ABXT3dAuIpTNDs/G8jlpmwXY03fXoXy/8ZK8/T+hMzt8L4WnrLCJgdybqgPagnF/f97cg3A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   ignore@4.0.6:
     resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
     engines: {node: '>= 4'}
 
-  ignore@5.3.1:
-    resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
   imagescript@1.3.0:
@@ -10906,8 +10768,8 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  import-local@3.1.0:
-    resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
+  import-local@3.2.0:
+    resolution: {integrity: sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==}
     engines: {node: '>=8'}
     hasBin: true
 
@@ -10922,9 +10784,9 @@ packages:
   infer-owner@1.0.4:
     resolution: {integrity: sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==}
 
-  inflection@2.0.1:
-    resolution: {integrity: sha512-wzkZHqpb4eGrOKBl34xy3umnYHx8Si5R1U4fwmdxLo5gdH6mEK8gclckTj/qWqy4Je0bsDYe/qazZYuO7xe3XQ==}
-    engines: {node: '>=14.0.0'}
+  inflection@3.0.0:
+    resolution: {integrity: sha512-1zEJU1l19SgJlmwqsEyFTbScw/tkMHFenUo//Y0i+XEP83gDFdMvPizAD/WGcE+l1ku12PcTVHQhO6g5E0UCMw==}
+    engines: {node: '>=18.0.0'}
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -10940,13 +10802,22 @@ packages:
     resolution: {integrity: sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==}
     engines: {node: '>=10'}
 
-  ini@4.1.2:
-    resolution: {integrity: sha512-AMB1mvwR1pyBFY/nSevUX6y8nJWS63/SzUKD3JyQn97s4xgIdgQPT75IRouIiBAN4yLQBUShNYVW0+UG25daCw==}
+  ini@4.1.3:
+    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   inline-style-parser@0.1.1:
     resolution: {integrity: sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
+  input-otp@1.4.1:
+    resolution: {integrity: sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==}
+    peerDependencies:
+      react: 18.2.0
+      react-dom: 18.2.0
+
   inquirer@6.5.2:
     resolution: {integrity: sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==}
     engines: {node: '>=6.0.0'}
@@ -10970,8 +10841,8 @@ packages:
   intersection-observer@0.10.0:
     resolution: {integrity: sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==}
 
-  intl-messageformat@10.5.11:
-    resolution: {integrity: sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==}
+  intl-messageformat@10.7.7:
+    resolution: {integrity: sha512-F134jIoeYMro/3I0h08D0Yt4N9o9pjddU/4IIxMMURqbAtI2wu70X8hvG1V48W49zXHXv3RKSF/po+0fDfsGjA==}
 
   invariant@2.2.4:
     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
@@ -10980,17 +10851,6 @@ packages:
     resolution: {integrity: sha512-zHtQzGojZXTwZTHQqra+ETKd4Sn3vgi7uBmlPoXVWZqYvuKmtI0l/VZTjqGmJY9x88GGOaZ9+G9ES8hC4T4X8g==}
     engines: {node: '>= 12'}
 
-  ip@2.0.1:
-    resolution: {integrity: sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==}
-
-  ipaddr.js@1.9.1:
-    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
-    engines: {node: '>= 0.10'}
-
-  is-absolute-url@3.0.3:
-    resolution: {integrity: sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==}
-    engines: {node: '>=8'}
-
   is-absolute@1.0.0:
     resolution: {integrity: sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==}
     engines: {node: '>=0.10.0'}
@@ -11043,9 +10903,8 @@ packages:
   is-buffer@1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
 
-  is-buffer@2.0.5:
-    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
-    engines: {node: '>=4'}
+  is-bun-module@1.2.1:
+    resolution: {integrity: sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==}
 
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
@@ -11055,9 +10914,6 @@ packages:
     resolution: {integrity: sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==}
     hasBin: true
 
-  is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
-
   is-core-module@2.15.1:
     resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==}
     engines: {node: '>= 0.4'}
@@ -11080,9 +10936,6 @@ packages:
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
-  is-deflate@1.0.0:
-    resolution: {integrity: sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==}
-
   is-descriptor@0.1.7:
     resolution: {integrity: sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==}
     engines: {node: '>= 0.4'}
@@ -11135,10 +10988,6 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
-  is-gzip@1.0.0:
-    resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==}
-    engines: {node: '>=0.10.0'}
-
   is-hexadecimal@1.0.4:
     resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
 
@@ -11167,10 +11016,6 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
-  is-nan@1.3.2:
-    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
-    engines: {node: '>= 0.4'}
-
   is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -11203,10 +11048,6 @@ packages:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
     engines: {node: '>=8'}
 
-  is-obj@3.0.0:
-    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
-    engines: {node: '>=12'}
-
   is-path-cwd@2.2.0:
     resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
     engines: {node: '>=6'}
@@ -11219,14 +11060,6 @@ packages:
     resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
     engines: {node: '>=0.10.0'}
 
-  is-plain-obj@2.1.0:
-    resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
-    engines: {node: '>=8'}
-
-  is-plain-obj@3.0.0:
-    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
-    engines: {node: '>=10'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
@@ -11242,9 +11075,6 @@ packages:
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
-  is-reference@3.0.2:
-    resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
-
   is-regex@1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
     engines: {node: '>= 0.4'}
@@ -11356,6 +11186,10 @@ packages:
     resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==}
     engines: {node: '>=8'}
 
+  istanbul-lib-instrument@6.0.3:
+    resolution: {integrity: sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==}
+    engines: {node: '>=10'}
+
   istanbul-lib-report@3.0.1:
     resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
     engines: {node: '>=10'}
@@ -11368,29 +11202,24 @@ packages:
     resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
 
-  iterator.prototype@1.1.2:
-    resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
-
-  jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
+  iterator.prototype@1.1.3:
+    resolution: {integrity: sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==}
+    engines: {node: '>= 0.4'}
 
-  jake@10.8.7:
-    resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
-    engines: {node: '>=10'}
-    hasBin: true
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jest-changed-files@28.1.3:
-    resolution: {integrity: sha512-esaOfUWJXk2nfZt9SPyC8gA1kNfdKLkQWyzsMlqq8msYSlNKfmZxfRgZn4Cd4MGVUF+7v6dBs0d5TOAKa7iIiA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-changed-files@29.7.0:
+    resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-circus@28.1.3:
-    resolution: {integrity: sha512-cZ+eS5zc79MBwt+IhQhiEp0OeBddpc1n8MBo1nMB8A7oPMKEO+Sre+wHaLJexQUj9Ya/8NOBY0RESUgYjB6fow==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-circus@29.7.0:
+    resolution: {integrity: sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-cli@28.1.3:
-    resolution: {integrity: sha512-roY3kvrv57Azn1yPgdTebPAXvdR2xfezaKKYzVxZ6It/5NCxzJym6tUI5P1zkdWhfUYkxEI9uZWcQdaFLo8mJQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-cli@29.7.0:
+    resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -11398,9 +11227,9 @@ packages:
       node-notifier:
         optional: true
 
-  jest-config@28.1.3:
-    resolution: {integrity: sha512-MG3INjByJ0J4AsNBm7T3hsuxKQqFIiRo/AUqb1q9LRKI5UU6Aar9JHbr9Ivn1TVwfUD9KirRoM/T6u8XlcQPHQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-config@29.7.0:
+    resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
       '@types/node': '*'
       ts-node: '>=9.0.0'
@@ -11410,53 +11239,54 @@ packages:
       ts-node:
         optional: true
 
-  jest-diff@28.1.3:
-    resolution: {integrity: sha512-8RqP1B/OXzjjTWkqMX67iqgwBVJRgCyKD3L9nq+6ZqJMdvjE8RgHktqZ6jNrkdMT+dJuYNI3rhQpxaz7drJHfw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
-  jest-docblock@28.1.1:
-    resolution: {integrity: sha512-3wayBVNiOYx0cwAbl9rwm5kKFP8yHH3d/fkEaL02NPTkDojPtheGB7HZSFY4wzX+DxyrvhXz0KSCVksmCknCuA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-diff@29.7.0:
+    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-each@28.1.3:
-    resolution: {integrity: sha512-arT1z4sg2yABU5uogObVPvSlSMQlDA48owx07BDPAiasW0yYpYHYOo4HHLz9q0BVzDVU4hILFjzJw0So9aCL/g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-docblock@29.7.0:
+    resolution: {integrity: sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-environment-jsdom@28.1.3:
-    resolution: {integrity: sha512-HnlGUmZRdxfCByd3GM2F100DgQOajUBzEitjGqIREcb45kGjZvRrKUdlaF6escXBdcXNl0OBh+1ZrfeZT3GnAg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-each@29.7.0:
+    resolution: {integrity: sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-environment-node@28.1.3:
-    resolution: {integrity: sha512-ugP6XOhEpjAEhGYvp5Xj989ns5cB1K6ZdjBYuS30umT4CQEETaxSiPcZ/E1kFktX4GkrcM4qu07IIlDYX1gp+A==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-environment-jsdom@29.7.0:
+    resolution: {integrity: sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
+    peerDependencies:
+      canvas: ^2.5.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
 
-  jest-get-type@28.0.2:
-    resolution: {integrity: sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-environment-node@29.7.0:
+    resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-haste-map@28.1.3:
-    resolution: {integrity: sha512-3S+RQWDXccXDKSWnkHa/dPwt+2qwA8CJzR61w3FoYCvoo3Pn8tvGcysmMF0Bj0EX5RYvAI2EIvC57OmotfdtKA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-get-type@29.6.3:
+    resolution: {integrity: sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   jest-haste-map@29.7.0:
     resolution: {integrity: sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-leak-detector@28.1.3:
-    resolution: {integrity: sha512-WFVJhnQsiKtDEo5lG2mM0v40QWnBM+zMdHHyJs8AWZ7J0QZJS59MsyKeJHWhpBZBH32S48FOVvGyOFT1h0DlqA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-leak-detector@29.7.0:
+    resolution: {integrity: sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-matcher-utils@28.1.3:
-    resolution: {integrity: sha512-kQeJ7qHemKfbzKoGjHHrRKH6atgxMk8Enkk2iPQ3XwO6oE/KYD8lMYOziCkeSB9G4adPM4nR1DE8Tf5JeWH6Bw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-matcher-utils@29.7.0:
+    resolution: {integrity: sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-message-util@28.1.3:
-    resolution: {integrity: sha512-PFdn9Iewbt575zKPf1286Ht9EPoJmYT7P0kY+RibeYZ2XtOr53pDLEFoTWXbd1h4JiGiWpTBC84fc8xMXQMb7g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-message-util@29.7.0:
+    resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-mock@28.1.3:
-    resolution: {integrity: sha512-o3J2jr6dMMWYVH4Lh/NKmDXdosrsJgi4AviS8oXLujcjpCMBb1FMsblDnOXKZKfSiHLxYub1eS0IHuRXsio9eA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-mock@29.7.0:
+    resolution: {integrity: sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   jest-pnp-resolver@1.2.3:
     resolution: {integrity: sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==}
@@ -11467,71 +11297,59 @@ packages:
       jest-resolve:
         optional: true
 
-  jest-regex-util@28.0.2:
-    resolution: {integrity: sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
   jest-regex-util@29.6.3:
     resolution: {integrity: sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-resolve-dependencies@28.1.3:
-    resolution: {integrity: sha512-qa0QO2Q0XzQoNPouMbCc7Bvtsem8eQgVPNkwn9LnS+R2n8DaVDPL/U1gngC0LTl1RYXJU0uJa2BMC2DbTfFrHA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
-  jest-resolve@28.1.3:
-    resolution: {integrity: sha512-Z1W3tTjE6QaNI90qo/BJpfnvpxtaFTFw5CDgwpyE/Kz8U/06N1Hjf4ia9quUhCh39qIGWF1ZuxFiBiJQwSEYKQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-resolve-dependencies@29.7.0:
+    resolution: {integrity: sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-runner@28.1.3:
-    resolution: {integrity: sha512-GkMw4D/0USd62OVO0oEgjn23TM+YJa2U2Wu5zz9xsQB1MxWKDOlrnykPxnMsN0tnJllfLPinHTka61u0QhaxBA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-resolve@29.7.0:
+    resolution: {integrity: sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-runtime@28.1.3:
-    resolution: {integrity: sha512-NU+881ScBQQLc1JHG5eJGU7Ui3kLKrmwCPPtYsJtBykixrM2OhVQlpMmFWJjMyDfdkGgBMNjXCGB/ebzsgNGQw==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-runner@29.7.0:
+    resolution: {integrity: sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-snapshot@28.1.3:
-    resolution: {integrity: sha512-4lzMgtiNlc3DU/8lZfmqxN3AYD6GGLbl+72rdBpXvcV+whX7mDrREzkPdp2RnmfIiWBg1YbuFSkXduF2JcafJg==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-runtime@29.7.0:
+    resolution: {integrity: sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-util@28.1.3:
-    resolution: {integrity: sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-snapshot@29.7.0:
+    resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-validate@28.1.3:
-    resolution: {integrity: sha512-SZbOGBWEsaTxBGCOpsRWlXlvNkvTkY0XxRfh7zYmvd8uL5Qzyg0CHAXiXKROflh801quA6+/DsT4ODDthOC/OA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-validate@29.7.0:
+    resolution: {integrity: sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-watch-typeahead@1.1.0:
-    resolution: {integrity: sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  jest-watch-typeahead@2.2.2:
+    resolution: {integrity: sha512-+QgOFW4o5Xlgd6jGS5X37i08tuuXNW8X0CV9WNFi+3n8ExCIP+E1melYhvYLjv5fE6D0yyzk74vsSO8I6GqtvQ==}
+    engines: {node: ^14.17.0 || ^16.10.0 || >=18.0.0}
     peerDependencies:
-      jest: ^27.0.0 || ^28.0.0
+      jest: ^27.0.0 || ^28.0.0 || ^29.0.0
 
-  jest-watcher@28.1.3:
-    resolution: {integrity: sha512-t4qcqj9hze+jviFPUN3YAtAEeFnr/azITXQEMARf5cMwKY2SMBRnCQTXLixTl20OR6mLh9KLMrgVJgJISym+1g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest-watcher@29.7.0:
+    resolution: {integrity: sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
-  jest-worker@28.1.3:
-    resolution: {integrity: sha512-CqRA220YV/6jCo8VWvAt1KKx6eek1VIHMPeLEbpcfSfkEeWyBNppynM/o6q+Wmw+sOhos2ml34wZbSX3G13//g==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
   jest-worker@29.7.0:
     resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest@28.1.3:
-    resolution: {integrity: sha512-N4GT5on8UkZgH0O5LUavMRV1EDEhNTL0KEfRmDIeZHSV7p2XgLoY9t9VDUgL6o+yfdgYHVxuz81G8oB9VG5uyA==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+  jest@29.7.0:
+    resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     hasBin: true
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -11539,15 +11357,15 @@ packages:
       node-notifier:
         optional: true
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
 
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  joi@17.12.3:
-    resolution: {integrity: sha512-2RRziagf555owrm9IRVtdKynOBeITiDpuZqIpgwqXShPncPKNiRQoiGsl/T8SQdq+8ugRzH2LqY67irr2y/d+g==}
+  joi@17.13.3:
+    resolution: {integrity: sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==}
 
   joycon@3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
@@ -11579,22 +11397,22 @@ packages:
       '@babel/preset-env':
         optional: true
 
-  jsdom@19.0.0:
-    resolution: {integrity: sha512-RYAyjCbxy/vri/CfnjUWJQQtZ3LKlLnDqj+9XLNnJPgEGeirZs3hllKR20re8LUZ6o1b1X4Jat+Qd26zmP41+A==}
-    engines: {node: '>=12'}
+  jsdoc-type-pratt-parser@4.1.0:
+    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
+    engines: {node: '>=12.0.0'}
+
+  jsdom@20.0.3:
+    resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==}
+    engines: {node: '>=14'}
     peerDependencies:
       canvas: ^2.5.0
     peerDependenciesMeta:
       canvas:
         optional: true
 
-  jsesc@0.5.0:
-    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
-    hasBin: true
-
-  jsesc@2.5.2:
-    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
-    engines: {node: '>=4'}
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
     hasBin: true
 
   json-buffer@3.0.1:
@@ -11606,8 +11424,8 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-parse-even-better-errors@3.0.1:
-    resolution: {integrity: sha512-aatBvbL26wVUCLmbWdCpeu9iF5wOyWpagiKkInA+kfws3sWdBrTnsvN2CKcyCYyUrc7rebNBlK6+kteg7ksecg==}
+  json-parse-even-better-errors@3.0.2:
+    resolution: {integrity: sha512-fi0NG4bPjCHunUJffmLd0gxssIgkNmArMvis4iNah6Owg1MCJjWhEcDLmsK6iGkJq3tHwbDkTlce70/tmXN4cQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   json-parse-helpfulerror@1.0.3:
@@ -11631,8 +11449,8 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  jsonc-parser@3.2.1:
-    resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==}
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
@@ -11674,8 +11492,8 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
   language-tags@1.0.9:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
@@ -11689,10 +11507,6 @@ packages:
     resolution: {integrity: sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==}
     engines: {node: '>=0.10.0'}
 
-  lazy-universal-dotenv@4.0.0:
-    resolution: {integrity: sha512-aXpZJRnTkpK6gQ/z4nk+ZBLd/Qdp118cvPruLSIQzQNRhKwEcdXCOzXuF55VDqIiuAaY3UGZ10DJtvZzDcvsxg==}
-    engines: {node: '>=14.0.0'}
-
   leven@3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -11709,70 +11523,76 @@ packages:
     resolution: {integrity: sha512-rMGwYF8q7g2XhG2ulBmmJgWv25qBsqRbDn5gH0+wnuyeFt7QBJlHJmtg5qEdn4pN6WVAUMgXnIxytMFRX9c1aA==}
     engines: {node: '>=10.13.0'}
 
-  lightningcss-darwin-arm64@1.24.1:
-    resolution: {integrity: sha512-1jQ12jBy+AE/73uGQWGSafK5GoWgmSiIQOGhSEXiFJSZxzV+OXIx+a9h2EYHxdJfX864M+2TAxWPWb0Vv+8y4w==}
+  lightningcss-darwin-arm64@1.28.1:
+    resolution: {integrity: sha512-VG3vvzM0m/rguCdm76DdobNeNJnHK+jWcdkNLFWHLh9YCotRvbRIt45JxwcHlIF8TDqWStVLTdghq5NaigVCBQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.24.1:
-    resolution: {integrity: sha512-R4R1d7VVdq2mG4igMU+Di8GPf0b64ZLnYVkubYnGG0Qxq1KaXQtAzcLI43EkpnoWvB/kUg8JKCWH4S13NfiLcQ==}
+  lightningcss-darwin-x64@1.28.1:
+    resolution: {integrity: sha512-O7ORdislvKfMohFl4Iq7fxKqdJOuuxArcglVI3amuFO5DJ0wfV3Gxgi1JRo49slfr7OVzJQEHLG4muTWYM5cTQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.24.1:
-    resolution: {integrity: sha512-z6NberUUw5ALES6Ixn2shmjRRrM1cmEn1ZQPiM5IrZ6xHHL5a1lPin9pRv+w6eWfcrEo+qGG6R9XfJrpuY3e4g==}
+  lightningcss-freebsd-x64@1.28.1:
+    resolution: {integrity: sha512-b7sF89B31kYYijxVcFO7l5u6UNA862YstNu+3YbLl/IQKzveL4a5cwR5cdpG+OOhErg/c2u9WCmzZoX2I5GBvw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.24.1:
-    resolution: {integrity: sha512-NLQLnBQW/0sSg74qLNI8F8QKQXkNg4/ukSTa+XhtkO7v3BnK19TS1MfCbDHt+TTdSgNEBv0tubRuapcKho2EWw==}
+  lightningcss-linux-arm-gnueabihf@1.28.1:
+    resolution: {integrity: sha512-p61kXwvhUDLLzkWHjzSFfUBW/F0iy3jr3CWi3k8SKULtJEsJXTI9DqRm9EixxMSe2AMBQBt4auTYiQL4B1N51A==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.24.1:
-    resolution: {integrity: sha512-AQxWU8c9E9JAjAi4Qw9CvX2tDIPjgzCTrZCSXKELfs4mCwzxRkHh2RCxX8sFK19RyJoJAjA/Kw8+LMNRHS5qEg==}
+  lightningcss-linux-arm64-gnu@1.28.1:
+    resolution: {integrity: sha512-iO+fN9hOMmzfwqcG2/BgUtMKD48H2JO/SXU44fyIwpY2veb65QF5xiRrQ9l1FwIxbGK3231KBYCtAqv+xf+NsQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.24.1:
-    resolution: {integrity: sha512-JCgH/SrNrhqsguUA0uJUM1PvN5+dVuzPIlXcoWDHSv2OU/BWlj2dUYr3XNzEw748SmNZPfl2NjQrAdzaPOn1lA==}
+  lightningcss-linux-arm64-musl@1.28.1:
+    resolution: {integrity: sha512-dnMHeXEmCUzHHZjaDpQBYuBKcN9nPC3nPFKl70bcj5Bkn5EmkcgEqm5p035LKOgvAwk1XwLpQCML6pXmCwz0NQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.24.1:
-    resolution: {integrity: sha512-TYdEsC63bHV0h47aNRGN3RiK7aIeco3/keN4NkoSQ5T8xk09KHuBdySltWAvKLgT8JvR+ayzq8ZHnL1wKWY0rw==}
+  lightningcss-linux-x64-gnu@1.28.1:
+    resolution: {integrity: sha512-7vWDISaMUn+oo2TwRdf2hl/BLdPxvywv9JKEqNZB/0K7bXwV4XE9wN/C2sAp1gGuh6QBA8lpjF4JIPt3HNlCHA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.24.1:
-    resolution: {integrity: sha512-HLfzVik3RToot6pQ2Rgc3JhfZkGi01hFetHt40HrUMoeKitLoqUUT5owM6yTZPTytTUW9ukLBJ1pc3XNMSvlLw==}
+  lightningcss-linux-x64-musl@1.28.1:
+    resolution: {integrity: sha512-IHCu9tVGP+x5BCpA2rF3D04DBokcBza/a8AuHQU+1AiMKubuMegPwcL7RatBgK4ztFHeYnnD5NdhwhRfYMAtNA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-x64-msvc@1.24.1:
-    resolution: {integrity: sha512-joEupPjYJ7PjZtDsS5lzALtlAudAbgIBMGJPNeFe5HfdmJXFd13ECmEM+5rXNxYVMRHua2w8132R6ab5Z6K9Ow==}
+  lightningcss-win32-arm64-msvc@1.28.1:
+    resolution: {integrity: sha512-Erm72kHmMg/3h350PTseskz+eEGBM17Fuu79WW2Qqt0BfWSF1jHHc12lkJCWMYl5jcBHPs5yZdgNHtJ7IJS3Uw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.28.1:
+    resolution: {integrity: sha512-ZPQtvx+uQBzrSdHH8p4H3M9Alue+x369TPZAA3b4K3d92FPhpZCuBG04+HQzspam9sVeID9mI6f3VRAs2ezaEA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.24.1:
-    resolution: {integrity: sha512-kUpHOLiH5GB0ERSv4pxqlL0RYKnOXtgGtVe7shDGfhS0AZ4D1ouKFYAcLcZhql8aMspDNzaUCumGHZ78tb2fTg==}
+  lightningcss@1.28.1:
+    resolution: {integrity: sha512-KRDkHlLlNj3DWh79CDt93fPlRJh2W1AuHV0ZSZAMMuN7lqlsZTV5842idfS1urWG8q9tc17velp1gCXhY7sLnQ==}
     engines: {node: '>= 12.0.0'}
 
   lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
 
-  lilconfig@3.1.1:
-    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==}
     engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
@@ -11808,10 +11628,6 @@ packages:
     resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  load-yaml-file@0.2.0:
-    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
-    engines: {node: '>=6'}
-
   loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
@@ -11852,9 +11668,6 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
-  lodash.foreach@4.5.0:
-    resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
-
   lodash.get@4.4.2:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
 
@@ -11867,9 +11680,6 @@ packages:
   lodash.kebabcase@4.1.1:
     resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
 
-  lodash.mapkeys@4.6.0:
-    resolution: {integrity: sha512-0Al+hxpYvONWtg+ZqHpa/GaVzxuN3V7Xeo2p+bY06EaK/n+Y9R7nBePPN2o1LxmL0TWQSwP8LYZ008/hc9JzhA==}
-
   lodash.memoize@4.1.2:
     resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
 
@@ -11879,9 +11689,6 @@ packages:
   lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
 
-  lodash.omit@4.5.0:
-    resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==}
-
   lodash.snakecase@4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
 
@@ -11927,8 +11734,8 @@ packages:
   loglevel-colored-level-prefix@1.0.0:
     resolution: {integrity: sha512-u45Wcxxc+SdAlh4yeF/uKlC1SPUPCy0gullSNKXod5I4bmifzk+Q4lSLExNEVn19tGaJipbZ4V4jbFn79/6mVA==}
 
-  loglevel@1.9.1:
-    resolution: {integrity: sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==}
+  loglevel@1.9.2:
+    resolution: {integrity: sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==}
     engines: {node: '>= 0.6.0'}
 
   long@5.2.3:
@@ -11952,12 +11759,8 @@ packages:
     resolution: {integrity: sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  lru-cache@10.2.0:
-    resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
-    engines: {node: 14 || >=16.14}
-
-  lru-cache@4.1.5:
-    resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -11974,16 +11777,12 @@ packages:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
 
-  magic-string@0.25.9:
-    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
-
   magic-string@0.27.0:
     resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==}
     engines: {node: '>=12'}
 
-  magic-string@0.30.9:
-    resolution: {integrity: sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==}
-    engines: {node: '>=12'}
+  magic-string@0.30.13:
+    resolution: {integrity: sha512-8rYBO+MsWkgjDSOvLomYnzhdwEG51olQ4zL5KXnNJWV5MNmrb4rTZdrtkhxjnD/QyZUqR/Z/XDsUs/4ej2nx0g==}
 
   make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -12038,22 +11837,16 @@ packages:
     resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
     engines: {node: '>=0.10.0'}
 
-  markdown-extensions@1.1.1:
-    resolution: {integrity: sha512-WWC0ZuMzCyDHYCasEGs4IPvLyTGftYwh6wIEOULOF0HXcqZlhwRzrK0w2VUlxWA98xnvb/jszw4ZSkJ6ADpM6Q==}
-    engines: {node: '>=0.10.0'}
+  markdown-extensions@2.0.0:
+    resolution: {integrity: sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==}
+    engines: {node: '>=16'}
 
   markdown-link@0.1.1:
     resolution: {integrity: sha512-TurLymbyLyo+kAUUAV9ggR9EPcDjP/ctlv9QAFiqUH7c+t6FlsbivPo9OKTU8xdOx9oNd2drW/Fi5RRElQbUqA==}
     engines: {node: '>=0.10.0'}
 
-  markdown-table@3.0.3:
-    resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
-
-  markdown-to-jsx@7.4.7:
-    resolution: {integrity: sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==}
-    engines: {node: '>= 10'}
-    peerDependencies:
-      react: ^18.2.0
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
   markdown-toc@1.2.0:
     resolution: {integrity: sha512-eOsq7EGd3asV0oBfmyqngeEIhrbkc7XVP63OwcJBIhH2EpG2PzFcbZdhy1jutXSlRBBVMNXHvMtSr5LAxSUvUg==}
@@ -12065,87 +11858,71 @@ packages:
     engines: {node: '>= 16'}
     hasBin: true
 
-  match-sorter@6.3.4:
-    resolution: {integrity: sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==}
+  match-sorter@8.0.0:
+    resolution: {integrity: sha512-bGJ6Zb+OhzXe+ptP5d80OLVx7AkqfRbtGEh30vNSfjNwllu+hHI+tcbMIT/fbkx/FKN1PmKuDb65+Oofg+XUxw==}
 
   math-random@1.0.4:
     resolution: {integrity: sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==}
 
-  mdast-util-definitions@4.0.0:
-    resolution: {integrity: sha512-k8AJ6aNnUkB7IE+5azR9h81O5EQ/cTDXtWdMq9Kk5KcEW/8ritU5CeLg/9HhOC++nALHBlaogJ5jz0Ybk3kPMQ==}
-
-  mdast-util-definitions@5.1.2:
-    resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
-
-  mdast-util-find-and-replace@2.2.2:
-    resolution: {integrity: sha512-MTtdFRz/eMDHXzeK6W3dO7mXUlF82Gom4y0oOgvHhh/HXZAGvIQDUvQ0SuUx+j2tv44b8xTHOm8K/9OoRFnXKw==}
-
-  mdast-util-from-markdown@1.3.1:
-    resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
-
-  mdast-util-frontmatter@1.0.1:
-    resolution: {integrity: sha512-JjA2OjxRqAa8wEG8hloD0uTU0kdn8kbtOWpPP94NBkfAlbxn4S8gCGf/9DwFtEeGPXrDcNXdiDjVaRdUFqYokw==}
+  mdast-util-find-and-replace@3.0.1:
+    resolution: {integrity: sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==}
 
-  mdast-util-gfm-autolink-literal@1.0.3:
-    resolution: {integrity: sha512-My8KJ57FYEy2W2LyNom4n3E7hKTuQk/0SES0u16tjA9Z3oFkF4RrC/hPAPgjlSpezsOvI8ObcXcElo92wn5IGA==}
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
 
-  mdast-util-gfm-footnote@1.0.2:
-    resolution: {integrity: sha512-56D19KOGbE00uKVj3sgIykpwKL179QsVFwx/DCW0u/0+URsryacI4MAdNJl0dh+u2PSsD9FtxPFbHCzJ78qJFQ==}
+  mdast-util-frontmatter@2.0.1:
+    resolution: {integrity: sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==}
 
-  mdast-util-gfm-strikethrough@1.0.3:
-    resolution: {integrity: sha512-DAPhYzTYrRcXdMjUtUjKvW9z/FNAMTdU0ORyMcbmkwYNbKocDpdk+PX1L1dQgOID/+vVs1uBQ7ElrBQfZ0cuiQ==}
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
 
-  mdast-util-gfm-table@1.0.7:
-    resolution: {integrity: sha512-jjcpmNnQvrmN5Vx7y7lEc2iIOEytYv7rTvu+MeyAsSHTASGCCRA79Igg2uKssgOs1i1po8s3plW0sTu1wkkLGg==}
+  mdast-util-gfm-footnote@2.0.0:
+    resolution: {integrity: sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==}
 
-  mdast-util-gfm-task-list-item@1.0.2:
-    resolution: {integrity: sha512-PFTA1gzfp1B1UaiJVyhJZA1rm0+Tzn690frc/L8vNX1Jop4STZgOE6bxUhnzdVSB+vm2GU1tIsuQcA9bxTQpMQ==}
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
 
-  mdast-util-gfm@2.0.2:
-    resolution: {integrity: sha512-qvZ608nBppZ4icQlhQQIAdc6S3Ffj9RGmzwUKUWuEICFnd1LVkN3EktF7ZHAgfcEdvZB5owU9tQgt99e2TlLjg==}
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
 
-  mdast-util-mdx-expression@1.3.2:
-    resolution: {integrity: sha512-xIPmR5ReJDu/DHH1OoIT1HkuybIfRGYRywC+gJtI7qHjCJp/M9jrmBEJW22O8lskDWm562BX2W8TiAwRTb0rKA==}
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
 
-  mdast-util-mdx-jsx@2.1.4:
-    resolution: {integrity: sha512-DtMn9CmVhVzZx3f+optVDF8yFgQVt7FghCRNdlIaS3X5Bnym3hZwPbg/XW86vdpKjlc1PVj26SpnLGeJBXD3JA==}
+  mdast-util-gfm@3.0.0:
+    resolution: {integrity: sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==}
 
-  mdast-util-mdx@2.0.1:
-    resolution: {integrity: sha512-38w5y+r8nyKlGvNjSEqWrhG0w5PmnRA+wnBvm+ulYCct7nsGYhFVb0lljS9bQav4psDAS1eGkP2LMVcZBi/aqw==}
+  mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
 
-  mdast-util-mdxjs-esm@1.3.1:
-    resolution: {integrity: sha512-SXqglS0HrEvSdUEfoXFtcg7DRl7S2cwOXc7jkuusG472Mmjag34DUDeOJUZtl+BVnyeO1frIgVpHlNRWc2gk/w==}
+  mdast-util-mdx-jsx@3.1.3:
+    resolution: {integrity: sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==}
 
-  mdast-util-phrasing@3.0.1:
-    resolution: {integrity: sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==}
+  mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
 
-  mdast-util-to-hast@12.3.0:
-    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
+  mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
 
-  mdast-util-to-markdown@1.5.0:
-    resolution: {integrity: sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==}
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
 
-  mdast-util-to-string@1.1.0:
-    resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==}
+  mdast-util-to-hast@13.2.0:
+    resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
-  mdast-util-to-string@3.2.0:
-    resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
-  mdn-data@2.0.14:
-    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  mdx-bundler@9.2.1:
-    resolution: {integrity: sha512-hWEEip1KU9MCNqeH2rqwzAZ1pdqPPbfkx9OTJjADqGPQz4t9BO85fhI7AP9gVYrpmfArf9/xJZUN0yBErg/G/Q==}
-    engines: {node: '>=14', npm: '>=6'}
+  mdx-bundler@10.0.3:
+    resolution: {integrity: sha512-vRtVZ5t+nUP0QtoRVgjDFO10YDjRgKe/19ie0IR8FqE8SugNn5RP4sCWBPzKoEwoGbqfQOrgHy+PHCVyfaCDQQ==}
+    engines: {node: '>=18', npm: '>=6'}
     peerDependencies:
       esbuild: 0.*
 
-  media-typer@0.3.0:
-    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
-    engines: {node: '>= 0.6'}
-
-  memfs@3.5.3:
-    resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==}
+  memfs@4.14.0:
+    resolution: {integrity: sha512-JUeY0F/fQZgIod31Ja1eJgiSxLn7BfQlCnqhwXFBzFHEw63OdLK7VJUJ7bnzNsWgCyoUP5tEp1VRY8rDaYzqOA==}
     engines: {node: '>= 4.0.0'}
 
   memoizerific@1.11.3:
@@ -12159,17 +11936,10 @@ packages:
     resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==}
     engines: {node: '>= 0.10.0'}
 
-  meow@6.1.1:
-    resolution: {integrity: sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==}
-    engines: {node: '>=8'}
-
   meow@8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
 
-  merge-descriptors@1.0.1:
-    resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==}
-
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -12187,117 +11957,113 @@ packages:
     resolution: {integrity: sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==}
     deprecated: Package renamed as '@messageformat/core', see messageformat.github.io for more details. 'messageformat@4' will eventually provide a polyfill for Intl.MessageFormat, once it's been defined by Unicode & ECMA.
 
-  methods@1.1.2:
-    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
-    engines: {node: '>= 0.6'}
-
-  micromark-core-commonmark@1.1.0:
-    resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
+  micromark-core-commonmark@2.0.2:
+    resolution: {integrity: sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==}
 
-  micromark-extension-frontmatter@1.1.1:
-    resolution: {integrity: sha512-m2UH9a7n3W8VAH9JO9y01APpPKmNNNs71P0RbknEmYSaZU5Ghogv38BYO94AI5Xw6OYfxZRdHZZ2nYjs/Z+SZQ==}
+  micromark-extension-frontmatter@2.0.0:
+    resolution: {integrity: sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==}
 
-  micromark-extension-gfm-autolink-literal@1.0.5:
-    resolution: {integrity: sha512-z3wJSLrDf8kRDOh2qBtoTRD53vJ+CWIyo7uyZuxf/JAbNJjiHsOpG1y5wxk8drtv3ETAHutCu6N3thkOOgueWg==}
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
 
-  micromark-extension-gfm-footnote@1.1.2:
-    resolution: {integrity: sha512-Yxn7z7SxgyGWRNa4wzf8AhYYWNrwl5q1Z8ii+CSTTIqVkmGZF1CElX2JI8g5yGoM3GAman9/PVCUFUSJ0kB/8Q==}
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
 
-  micromark-extension-gfm-strikethrough@1.0.7:
-    resolution: {integrity: sha512-sX0FawVE1o3abGk3vRjOH50L5TTLr3b5XMqnP9YDRb34M0v5OoZhG+OHFz1OffZ9dlwgpTBKaT4XW/AsUVnSDw==}
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
 
-  micromark-extension-gfm-table@1.0.7:
-    resolution: {integrity: sha512-3ZORTHtcSnMQEKtAOsBQ9/oHp9096pI/UvdPtN7ehKvrmZZ2+bbWhi0ln+I9drmwXMt5boocn6OlwQzNXeVeqw==}
+  micromark-extension-gfm-table@2.1.0:
+    resolution: {integrity: sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==}
 
-  micromark-extension-gfm-tagfilter@1.0.2:
-    resolution: {integrity: sha512-5XWB9GbAUSHTn8VPU8/1DBXMuKYT5uOgEjJb8gN3mW0PNW5OPHpSdojoqf+iq1xo7vWzw/P8bAHY0n6ijpXF7g==}
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
 
-  micromark-extension-gfm-task-list-item@1.0.5:
-    resolution: {integrity: sha512-RMFXl2uQ0pNQy6Lun2YBYT9g9INXtWJULgbt01D/x8/6yJ2qpKyzdZD3pi6UIkzF++Da49xAelVKUeUMqd5eIQ==}
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
 
-  micromark-extension-gfm@2.0.3:
-    resolution: {integrity: sha512-vb9OoHqrhCmbRidQv/2+Bc6pkP0FrtlhurxZofvOEy5o8RtuuvTq+RQ1Vw5ZDNrVraQZu3HixESqbG+0iKk/MQ==}
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
 
-  micromark-extension-mdx-expression@1.0.8:
-    resolution: {integrity: sha512-zZpeQtc5wfWKdzDsHRBY003H2Smg+PUi2REhqgIhdzAa5xonhP03FcXxqFSerFiNUr5AWmHpaNPQTBVOS4lrXw==}
+  micromark-extension-mdx-expression@3.0.0:
+    resolution: {integrity: sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==}
 
-  micromark-extension-mdx-jsx@1.0.5:
-    resolution: {integrity: sha512-gPH+9ZdmDflbu19Xkb8+gheqEDqkSpdCEubQyxuz/Hn8DOXiXvrXeikOoBA71+e8Pfi0/UYmU3wW3H58kr7akA==}
+  micromark-extension-mdx-jsx@3.0.1:
+    resolution: {integrity: sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==}
 
-  micromark-extension-mdx-md@1.0.1:
-    resolution: {integrity: sha512-7MSuj2S7xjOQXAjjkbjBsHkMtb+mDGVW6uI2dBL9snOBCbZmoNgDAeZ0nSn9j3T42UE/g2xVNMn18PJxZvkBEA==}
+  micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
 
-  micromark-extension-mdxjs-esm@1.0.5:
-    resolution: {integrity: sha512-xNRBw4aoURcyz/S69B19WnZAkWJMxHMT5hE36GtDAyhoyn/8TuAeqjFJQlwk+MKQsUD7b3l7kFX+vlfVWgcX1w==}
+  micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
 
-  micromark-extension-mdxjs@1.0.1:
-    resolution: {integrity: sha512-7YA7hF6i5eKOfFUzZ+0z6avRG52GpWR8DL+kN47y3f2KhxbBZMhmxe7auOeaTBrW2DenbbZTf1ea9tA2hDpC2Q==}
+  micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
 
-  micromark-factory-destination@1.1.0:
-    resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
 
-  micromark-factory-label@1.1.0:
-    resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
 
-  micromark-factory-mdx-expression@1.0.9:
-    resolution: {integrity: sha512-jGIWzSmNfdnkJq05c7b0+Wv0Kfz3NJ3N4cBjnbO4zjXIlxJr+f8lk+5ZmwFvqdAbUy2q6B5rCY//g0QAAaXDWA==}
+  micromark-factory-mdx-expression@2.0.2:
+    resolution: {integrity: sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==}
 
-  micromark-factory-space@1.1.0:
-    resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
 
-  micromark-factory-title@1.1.0:
-    resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
 
-  micromark-factory-whitespace@1.1.0:
-    resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
 
-  micromark-util-character@1.2.0:
-    resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
-  micromark-util-chunked@1.1.0:
-    resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
 
-  micromark-util-classify-character@1.1.0:
-    resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
 
-  micromark-util-combine-extensions@1.1.0:
-    resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
 
-  micromark-util-decode-numeric-character-reference@1.1.0:
-    resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
 
-  micromark-util-decode-string@1.1.0:
-    resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
 
-  micromark-util-encode@1.1.0:
-    resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
 
-  micromark-util-events-to-acorn@1.2.3:
-    resolution: {integrity: sha512-ij4X7Wuc4fED6UoLWkmo0xJQhsktfNh1J0m8g4PbIMPlx+ek/4YdW5mvbye8z/aZvAPUoxgXHrwVlXAPKMRp1w==}
+  micromark-util-events-to-acorn@2.0.2:
+    resolution: {integrity: sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==}
 
-  micromark-util-html-tag-name@1.2.0:
-    resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
 
-  micromark-util-normalize-identifier@1.1.0:
-    resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
 
-  micromark-util-resolve-all@1.1.0:
-    resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
 
-  micromark-util-sanitize-uri@1.2.0:
-    resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
 
-  micromark-util-subtokenize@1.1.0:
-    resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
+  micromark-util-subtokenize@2.0.3:
+    resolution: {integrity: sha512-VXJJuNxYWSoYL6AJ6OQECCFGhIU2GGHMw8tahogePBrjkG8aCCas3ibkp7RnVOSTClg2is05/R7maAhF1XyQMg==}
 
-  micromark-util-symbol@1.1.0:
-    resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
 
-  micromark-util-types@1.1.0:
-    resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
+  micromark-util-types@2.0.1:
+    resolution: {integrity: sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==}
 
-  micromark@3.2.0:
-    resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
+  micromark@4.0.1:
+    resolution: {integrity: sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==}
 
   micromatch@3.1.10:
     resolution: {integrity: sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==}
@@ -12307,6 +12073,10 @@ packages:
     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
     engines: {node: '>=8.6'}
 
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
   mime-db@1.25.0:
     resolution: {integrity: sha512-5k547tI4Cy+Lddr/hdjNbBEWBwSl8EBc5aSdKvedav8DReADgWJzcYiktaRIw3GtGC1jjwldXtTzvqJZmtvC7w==}
     engines: {node: '>= 0.6'}
@@ -12315,6 +12085,10 @@ packages:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
+  mime-db@1.53.0:
+    resolution: {integrity: sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.13:
     resolution: {integrity: sha512-ryBDp1Z/6X90UvjUK3RksH0IBPM137T7cmg4OgD5wQBojlAiUwuok0QeELkim/72EtcYuNlmbkrcGuxj3Kl0YQ==}
     engines: {node: '>= 0.6'}
@@ -12323,16 +12097,6 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
-  mime@1.6.0:
-    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
-  mime@2.6.0:
-    resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
-    engines: {node: '>=4.0.0'}
-    hasBin: true
-
   mimic-fn@1.2.0:
     resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
     engines: {node: '>=4'}
@@ -12368,8 +12132,8 @@ packages:
     resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
     engines: {node: '>=10'}
 
-  minimatch@9.0.4:
-    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist-options@4.1.0:
@@ -12387,16 +12151,16 @@ packages:
     resolution: {integrity: sha512-LT49Zi2/WMROHYoqGgdlQIZh8mLPZmOrN2NdJjMXxYe4nkN6FUyuPuOAOedNJDrx0IRGg9+4guZewtp8hE6TxA==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
-  minipass-fetch@3.0.4:
-    resolution: {integrity: sha512-jHAqnA728uUpIaFm7NWsCnqKT6UqZz7GcI/bDpPATuwYyKwJwW0remxSCxUlKiEty+eopHGa3oc8WxgQ1FFJqg==}
+  minipass-fetch@3.0.5:
+    resolution: {integrity: sha512-2N8elDQAtSnFV0Dk7gt15KHsS0Fyz6CbYZ360h0WTYV1Ty46li3rAXVOQj1THMNLdmrD9Vt5pBPtWtVkpwGBqg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   minipass-flush@1.0.5:
     resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
     engines: {node: '>= 8'}
 
-  minipass-json-stream@1.0.1:
-    resolution: {integrity: sha512-ODqY18UZt/I8k+b7rl2AENgbWE8IDYam+undIJONvigAz8KR5GWblsFTEfQs0WODsjbSXWlm+JHEv8Gr6Tfdbg==}
+  minipass-json-stream@1.0.2:
+    resolution: {integrity: sha512-myxeeTm57lYs8pH2nxPzmEEg8DGIgW+9mv6D4JZD2pa81I/OBjeU7PtICXV6c9eRGTA5JMDsuIPUZRCyBMYNhg==}
 
   minipass-pipeline@1.2.4:
     resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
@@ -12414,25 +12178,21 @@ packages:
     resolution: {integrity: sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==}
     engines: {node: '>=8'}
 
-  minipass@7.0.4:
-    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
     engines: {node: '>= 8'}
 
-  mitt@3.0.0:
-    resolution: {integrity: sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==}
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
   mixin-deep@1.3.2:
     resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
     engines: {node: '>=0.10.0'}
 
-  mixme@0.5.10:
-    resolution: {integrity: sha512-5H76ANWinB1H3twpJ6JY8uvAtpmFvHNArpilJAjXRKXSDDLPIMoZArw5SH0q9z+lLs8IrMw7Q2VWpWimFKFT1Q==}
-    engines: {node: '>= 8.0.0'}
-
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
@@ -12445,14 +12205,13 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  mlly@1.7.3:
+    resolution: {integrity: sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
 
-  mrmime@1.0.1:
-    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
-    engines: {node: '>=10'}
-
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -12466,12 +12225,12 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  msgpackr-extract@3.0.2:
-    resolution: {integrity: sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==}
+  msgpackr-extract@3.0.3:
+    resolution: {integrity: sha512-P0efT1C9jIdVRefqjzOQ9Xml57zpOXnIuS+csaB4MdZbTdmGDLo8XhzBG1N7aO11gKDDkJvBLULeFTo46wwreA==}
     hasBin: true
 
-  msgpackr@1.10.1:
-    resolution: {integrity: sha512-r5VRLv9qouXuLiIBrLpl2d5ZvPt8svdQTl5/vMvE4nzDMyEX4sgW5yWhuBBj5UmgwOTWj8CIdSXn5sAfsHAWIQ==}
+  msgpackr@1.11.2:
+    resolution: {integrity: sha512-F9UngXRlPyWCDEASDpTf6c9uNhGPTqnTeLVt7bN+bU1eajoR/8V9ys2BRaV5C/e5ihE6sJ9uPIKaYt6bFuO32g==}
 
   mute-stream@0.0.7:
     resolution: {integrity: sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==}
@@ -12500,20 +12259,20 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
-  negotiator@0.6.3:
-    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
     engines: {node: '>= 0.6'}
 
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  next-contentlayer@0.3.4:
-    resolution: {integrity: sha512-UtUCwgAl159KwfhNaOwyiI7Lg6sdioyKMeh+E7jxx0CJ29JuXGxBEYmCI6+72NxFGIFZKx8lvttbbQhbnYWYSw==}
+  next-contentlayer2@0.5.3:
+    resolution: {integrity: sha512-xNuiAJxeQOABiWsjJ6hFv/Ovb9vRujBgamaEjvYXiVecrBtCIyCDF3WpdDx4krfAd9WJRW8TN6OLpyZsG2ApjA==}
     peerDependencies:
-      contentlayer: 0.3.4
-      next: ^12 || ^13
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      contentlayer2: 0.5.3
+      next: '>=12.0.0'
+      react: 18.2.0
+      react-dom: 18.2.0
 
   next-sitemap@4.2.3:
     resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==}
@@ -12522,28 +12281,30 @@ packages:
     peerDependencies:
       next: '*'
 
-  next-themes@0.2.1:
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+  next-themes@0.4.3:
+    resolution: {integrity: sha512-nG84VPkTdUHR2YeD89YchvV4I9RbiMAql3GiLEQlPvq1ioaqPaIReK+yMRdg/zgiXws620qS1rU30TiWmmG9lA==}
     peerDependencies:
-      next: '*'
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
   next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
 
-  next@13.5.1:
-    resolution: {integrity: sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==}
-    engines: {node: '>=16.14.0'}
+  next@14.3.0-canary.43:
+    resolution: {integrity: sha512-d+Finbm5QXDN43SAkpqkinjRAU6o5tlJYsrKiWJqKmJYQ9/zB9WxjTeRuHVV1YJmLMSueO1zft88k+4cogJ/Ig==}
+    engines: {node: '>=18.17.0'}
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      '@playwright/test': ^1.41.2
+      react: 18.2.0
+      react-dom: 18.2.0
       sass: ^1.3.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
+      '@playwright/test':
+        optional: true
       sass:
         optional: true
 
@@ -12553,16 +12314,15 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@3.57.0:
-    resolution: {integrity: sha512-Dp+A9JWxRaKuHP35H77I4kCKesDy5HUDEmScia2FyncMTOXASMyg251F5PhFoDA5uqBrDDffiLpbqnrZmNXW+g==}
+  node-abi@3.71.0:
+    resolution: {integrity: sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==}
     engines: {node: '>=10'}
 
   node-addon-api@6.1.0:
     resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
 
-  node-addon-api@7.1.0:
-    resolution: {integrity: sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==}
-    engines: {node: ^16 || ^18 || >= 20}
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
   node-dir@0.1.17:
     resolution: {integrity: sha512-tmPX422rYgofd4epzrNoOXiE8XFZYOcCq1vD7MAXCDO+O+zndlA2ztdKKMa+EeuBG5tHETpr4ml4RGgpqDCCAg==}
@@ -12575,27 +12335,22 @@ packages:
   node-fetch-native@1.6.4:
     resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
 
-  node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
+  node-fetch@2.5.0:
+    resolution: {integrity: sha512-YuZKluhWGJwCcUu4RlZstdAxr8bFfOVHakc1mplwHkk8J+tqM1Y5yraYvIUpeX8aY7+crCwiELJq7Vl0o0LWXw==}
     engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
 
   node-fetch@3.3.2:
     resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  node-gyp-build-optional-packages@5.0.7:
-    resolution: {integrity: sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==}
-    hasBin: true
-
   node-gyp-build-optional-packages@5.1.1:
     resolution: {integrity: sha512-+P72GAjVAbTxjjwUmwjVrqrdZROD4nf8KgpBoDxqXXTiYZZt/ud60dE5yvCSr9lRO8e8yv6kgJIC0K0PfZFVQw==}
     hasBin: true
 
+  node-gyp-build-optional-packages@5.2.2:
+    resolution: {integrity: sha512-s+w+rBWnpTMwSFbaE0UXsRlg7hU4FjekKU4eyAih5T8nJuNZT1nNsskXpxmeqSK9UzkBl6UgRlnKc8hz8IEqOw==}
+    hasBin: true
+
   node-gyp@9.4.1:
     resolution: {integrity: sha512-OQkWKbjQKbGkMf/xqI1jjy3oCTgMKJac58G2+bjZb3fza6gW2YrCSdMQYaoTb70crvE//Gngr4f0AgVHmqHvBQ==}
     engines: {node: ^12.13 || ^14.13 || >=16}
@@ -12608,8 +12363,8 @@ packages:
     resolution: {integrity: sha512-qmXJJt3YETFt/e0dtMADVpvck6EvN01Jig086o+J3M6G++mWA7iJ3Pqz4m4kvlynh73Iz2/rcZzxq7xTiF+aIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  node-releases@2.0.14:
-    resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
+  node-releases@2.0.18:
+    resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
   nopt@6.0.0:
     resolution: {integrity: sha512-ZwLpbTgdhuZUnZzjd7nb1ZV+4DoiC6/sfiVKok72ym/4Tlf+DFdlHYmT2JPmcNNWV6Pi3SDf1kT+A4r9RTuT9g==}
@@ -12639,12 +12394,12 @@ packages:
     resolution: {integrity: sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==}
     engines: {node: '>=14.16'}
 
-  npm-bundled@3.0.0:
-    resolution: {integrity: sha512-Vq0eyEQy+elFpzsKjMss9kxqb9tG3YHg4dsyWuUENuzvSUWe1TCnW/vV9FkhvBk/brEDoDiVd+M1Btosa6ImdQ==}
+  npm-bundled@3.0.1:
+    resolution: {integrity: sha512-+AvaheE/ww1JEwRHOrn4WHNzOxGtVp+adrg2AeZS/7KuxGUYFuBta98wYpfHBbJp6Tg6j1NKSEVHNcfZzJHQwQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  npm-check-updates@16.14.18:
-    resolution: {integrity: sha512-9iaRe9ohx9ykdbLjPRIYcq1A0RkrPYUx9HmQK1JIXhfxtJCNE/+497H9Z4PGH6GWRALbz5KF+1iZoySK2uSEpQ==}
+  npm-check-updates@16.14.20:
+    resolution: {integrity: sha512-sYbIhun4DrjO7NFOTdvs11nCar0etEhZTsEjL47eM0TuiGMhmYughRCxG2SpGRmGAQ7AkwN7bw2lWzoE7q6yOQ==}
     engines: {node: '>=14.14'}
     hasBin: true
 
@@ -12693,17 +12448,14 @@ packages:
   nprogress@0.2.0:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
 
-  nth-check@2.1.1:
-    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
-
   nullthrows@1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
 
-  nwsapi@2.2.7:
-    resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
+  nwsapi@2.2.13:
+    resolution: {integrity: sha512-cTGB9ptp9dY9A5VbMSe7fQBcl/tt22Vcqdq8+eN93rblOuE0aCFu4aZ2vMwct/2t+lFnosm8RkQW1I0Omb1UtQ==}
 
-  nypm@0.3.8:
-    resolution: {integrity: sha512-IGWlC6So2xv6V4cIDmoV0SwwWx7zLG086gyqkyumteH2fIgCAM4nDVFB2iDRszDvmdSVW9xb1N+2KjQ6C7d4og==}
+  nypm@0.3.12:
+    resolution: {integrity: sha512-D3pzNDWIvgA+7IORhD/IuWzEk4uXv6GsgOxiid4UU3h9oq5IqV1KtPDi63n4sZJ/xcWlr88c0QM2RgN5VbOhFA==}
     engines: {node: ^14.16.0 || >=16.10.0}
     hasBin: true
 
@@ -12723,11 +12475,8 @@ packages:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
 
-  object-inspect@1.13.1:
-    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
-
-  object-is@1.1.6:
-    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
+  object-inspect@1.13.3:
+    resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
 
   object-keys@1.1.1:
@@ -12758,10 +12507,6 @@ packages:
     resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
     engines: {node: '>= 0.4'}
 
-  object.hasown@1.1.4:
-    resolution: {integrity: sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==}
-    engines: {node: '>= 0.4'}
-
   object.map@1.0.1:
     resolution: {integrity: sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==}
     engines: {node: '>=0.10.0'}
@@ -12774,16 +12519,8 @@ packages:
     resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==}
     engines: {node: '>= 0.4'}
 
-  ohash@1.1.3:
-    resolution: {integrity: sha512-zuHHiGTYTA1sYJ/wZN+t5HKZaH23i4yI1HMwbuXm24Nid7Dv0KcuRlKoNKS9UNfAVSBlnGLcuQrnOKWOZoEGaw==}
-
-  on-finished@2.4.1:
-    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
-    engines: {node: '>= 0.8'}
-
-  on-headers@1.0.2:
-    resolution: {integrity: sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==}
-    engines: {node: '>= 0.8'}
+  ohash@1.1.4:
+    resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==}
 
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -12800,8 +12537,11 @@ packages:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
 
-  oo-ascii-tree@1.97.0:
-    resolution: {integrity: sha512-LVwQ1J6icSJ2buccnLCWdDtxxTwB0HXoB7PLPap4u90T9pAs2HqE35DpV6nV/6O1aVEO4OzwDeE2gLCUCkoGWQ==}
+  oniguruma-to-es@0.4.1:
+    resolution: {integrity: sha512-rNcEohFz095QKGRovP/yqPIKc+nP+Sjs4YTHMv33nMePGKrq/r2eu9Yh4646M5XluGJsUnmwoXuiXE69KDs+fQ==}
+
+  oo-ascii-tree@1.105.0:
+    resolution: {integrity: sha512-fz4QixX/ImVEMbABqCJxxSwvJGfw9vfq2121RMq/qtCv7BiarY4ZPpheHheOTBvEnhqy81dyMpxiXAY8U3rPjA==}
     engines: {node: '>= 14.17.0'}
 
   open@8.4.2:
@@ -12816,8 +12556,8 @@ packages:
     resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
     engines: {node: '>= 0.8.0'}
 
-  optionator@0.9.3:
-    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
   ora@5.4.1:
@@ -12828,12 +12568,8 @@ packages:
     resolution: {integrity: sha512-ERAyNnZOfqM+Ao3RAvIXkYh5joP220yf59gVe2X/cI6SiCxIdi4c9HZKZD8R6q/RDXEje1THBju6iExiSsgJaQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  ordered-binary@1.5.1:
-    resolution: {integrity: sha512-5VyHfHY3cd0iza71JepYG50My+YUbrFtGoUz2ooEydPyPM7Aai/JW098juLr+RG6+rDJuzNNTsEQu2DZa1A41A==}
-
-  os-homedir@1.0.2:
-    resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==}
-    engines: {node: '>=0.10.0'}
+  ordered-binary@1.5.3:
+    resolution: {integrity: sha512-oGFr3T+pYdTGJ+YFEILMpS3es+GiIbs9h/XQrclBXUtd44ey7XwfsMzM31f64I1SQOawDoDr/D823kNCADI8TA==}
 
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
@@ -12897,24 +12633,27 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
   package-json@8.1.1:
     resolution: {integrity: sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==}
     engines: {node: '>=14.16'}
 
+  package-manager-detector@0.2.6:
+    resolution: {integrity: sha512-9vPH3qooBlYRJdmdYP00nvjZOulm40r5dhtal8st18ctf+6S1k7pi5yIHLvI4w5D70x0Y+xdVD9qITH0QO/A8A==}
+
   pacote@15.2.0:
     resolution: {integrity: sha512-rJVZeIwHTUta23sIZgEIM62WYwbmGbThdbnkt81ravBplQv+HjyroqnLRNH2+sLJHcGZmLRmhPwACqhfTcOmnA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
-  pako@0.2.9:
-    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
-
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
 
-  parcel@2.12.0:
-    resolution: {integrity: sha512-W+gxAq7aQ9dJIg/XLKGcRT0cvnStFAQHPaI0pvD0U2l6IVLueUAm3nwN7lkY62zZNmlvNx6jNtE4wlbS+CyqSg==}
-    engines: {node: '>= 12.0.0'}
+  parcel@2.13.0:
+    resolution: {integrity: sha512-3IsoqffuH7H/RLrvz3nS6UezJb+iE/L0xTukDTkZNOLUhwI3EW75S6FLCPs+UGTlzqvoCgf7IkyTSRFln9C4rA==}
+    engines: {node: '>= 16.0.0'}
     hasBin: true
 
   parent-module@1.0.1:
@@ -12931,9 +12670,9 @@ packages:
     resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
     engines: {node: '>=0.8'}
 
-  parse-github-url@1.0.2:
-    resolution: {integrity: sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw==}
-    engines: {node: '>=0.10.0'}
+  parse-github-url@1.0.3:
+    resolution: {integrity: sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==}
+    engines: {node: '>= 0.10'}
     hasBin: true
 
   parse-json@4.0.0:
@@ -12954,12 +12693,8 @@ packages:
     resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
     engines: {node: '>=0.10.0'}
 
-  parse5@6.0.1:
-    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
-
-  parseurl@1.3.3:
-    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
-    engines: {node: '>= 0.8'}
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
 
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
@@ -13013,12 +12748,9 @@ packages:
     resolution: {integrity: sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==}
     engines: {node: '>=0.10.0'}
 
-  path-scurry@1.10.2:
-    resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  path-to-regexp@0.1.7:
-    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
 
   path-type@3.0.0:
     resolution: {integrity: sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==}
@@ -13028,25 +12760,24 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
+  path-type@5.0.0:
+    resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
+    engines: {node: '>=12'}
+
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
-  peek-stream@1.1.3:
-    resolution: {integrity: sha512-FhJ+YbOSBb9/rIl2ZeE/QHEsWn7PqNYt8ARAY3kIgNGOk13g9FGyIY6JIl/xB/3TFRVoTv5as0l11weORrTekA==}
-
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
-  periscopic@3.1.0:
-    resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
-
-  picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   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'}
+
   pidtree@0.3.1:
     resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
     engines: {node: '>=0.10'}
@@ -13081,9 +12812,8 @@ packages:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
 
-  pkg-dir@5.0.0:
-    resolution: {integrity: sha512-NPE8TDbzl/3YQYY7CSS228s3g2ollTFnc+Qi3tqmqJp9Vg2ovUpixcJEo2HJScN2Ez+kEaal6y70c0ehqJBJeA==}
-    engines: {node: '>=10'}
+  pkg-types@1.2.1:
+    resolution: {integrity: sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==}
 
   plop@3.1.1:
     resolution: {integrity: sha512-NuctKmuNUACXBQn25bBr5oj/75nHxdKGwjA/+b7cVoj1sp+gTVqcc8eAr4QcNJgMPsZWRJBN2kMkgmsqbqV9gg==}
@@ -13138,8 +12868,8 @@ packages:
       ts-node:
         optional: true
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
@@ -13148,32 +12878,32 @@ packages:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.0.16:
-    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.14:
-    resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+  postcss@8.4.49:
+    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
     engines: {node: ^10 || ^12 || >=14}
 
-  posthog-js@1.187.1:
-    resolution: {integrity: sha512-d2oNtdqXWqTVGmJf131xmVepcI/waYn9L+dM7CKm/58p89ua6ABY699UJpKlAZ9YT0UBE09QsVjrDHYCK2F5Rw==}
-
-  posthtml-parser@0.10.2:
-    resolution: {integrity: sha512-PId6zZ/2lyJi9LiKfe+i2xv57oEjJgWbsHGGANwos5AvdQp98i6AtamAl8gzSVFGfQ43Glb5D614cvZf012VKg==}
-    engines: {node: '>=12'}
+  posthog-js@1.184.1:
+    resolution: {integrity: sha512-q/1Kdard5SZnL2smrzeKcD+RuUi2PnbidiN4D3ThK20bNrhy5Z2heIy9SnRMvEiARY5lcQ7zxmDCAKPBKGSOtQ==}
 
   posthtml-parser@0.11.0:
     resolution: {integrity: sha512-QecJtfLekJbWVo/dMAA+OSwY79wpRmbqS5TeXvXSX+f0c6pW4/SE6inzZ2qkU7oAMCPqIDkZDvd/bQsSFUnKyw==}
     engines: {node: '>=12'}
 
+  posthtml-parser@0.12.1:
+    resolution: {integrity: sha512-rYFmsDLfYm+4Ts2Oh4DCDSZPtdC1BLnRXAobypVzX9alj28KGl65dIFtgDY9zB57D0TC4Qxqrawuq/2et1P0GA==}
+    engines: {node: '>=16'}
+
   posthtml-render@3.0.0:
     resolution: {integrity: sha512-z+16RoxK3fUPgwaIgH9NGnK1HKY9XIDpydky5eQGgAFVXTCSezalv9U2jQuNV+Z9qV1fDWNzldcw4eK0SSbqKA==}
     engines: {node: '>=12'}
@@ -13190,10 +12920,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  preferred-pm@3.1.3:
-    resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==}
-    engines: {node: '>=10'}
-
   prelude-ls@1.1.2:
     resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==}
     engines: {node: '>= 0.8.0'}
@@ -13229,6 +12955,11 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   pretty-format@23.6.0:
     resolution: {integrity: sha512-zf9NV1NSlDLDjycnwm6hpFATCGl/K1lt0R/GdkAK2O5LN/rwJoB+Mh93gGJjut4YbmecbfgLWVGSTCr0Ewvvbw==}
 
@@ -13236,18 +12967,19 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-format@28.1.3:
-    resolution: {integrity: sha512-8gFb/To0OmxHR9+ZTb14Df2vNxdGCX8g1xWGUTqUw5TiZvcQf5sHKObd5UcPyLLyowNwDAMTF3XWOG1B6mxl1Q==}
-    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
-
-  pretty-hrtime@1.0.3:
-    resolution: {integrity: sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==}
-    engines: {node: '>= 0.8'}
+  pretty-format@29.7.0:
+    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
+    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   prism-react-renderer@1.3.5:
     resolution: {integrity: sha512-IJ+MSwBWKG+SM3b2SUfdrhC+gu01QkV2KmRQgREThBfSQRoufqRfxfHUxpG1WcaFjP+kojcFyO9Qqtpgt3qLCg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+
+  prism-react-renderer@2.4.0:
+    resolution: {integrity: sha512-327BsVCD/unU4CNLZTWVHyUHKnsqcvj2qbPlQ8MiBE2eq2rgctjigPA1Gp9HLF83kZ20zNN6jgizHJeEsyFYOw==}
+    peerDependencies:
+      react: 18.2.0
 
   prismjs@1.23.0:
     resolution: {integrity: sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==}
@@ -13279,8 +13011,8 @@ packages:
     resolution: {integrity: sha512-y+WKFlBR8BGXnsNlIHFGPZmyDf3DFMoLhaflAnyZgV6rG6xu+JwesTo2Q9R6XwYmtmwAFCkAk3e35jEdoeh/3g==}
     engines: {node: '>=10'}
 
-  prompts-ncu@3.0.0:
-    resolution: {integrity: sha512-qyz9UxZ5MlPKWVhWrCmSZ1ahm2GVYdjLb8og2sg0IPth1KRuhcggHGuijz0e41dkx35p1t1q3GRISGH7QGALFA==}
+  prompts-ncu@3.0.1:
+    resolution: {integrity: sha512-2OjeOtQciLYeNPIXCLDxw2CdwlpnTcxKLtc/5iDJ6usMiOzj77FcLjGwx2qQ3+VerLsilzCnGntDeYBp06OZsQ==}
     engines: {node: '>= 14'}
 
   prompts@2.4.2:
@@ -13299,34 +13031,18 @@ packages:
   proto-list@1.2.4:
     resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
-  protobufjs@7.2.6:
-    resolution: {integrity: sha512-dgJaEDDL6x8ASUZ1YqWciTRrdOuYNzoOf27oHNfdyvKqHr5i0FV7FSLU+aIeFjyFgVxrpTOtQUi0BLLBymZaBw==}
+  protobufjs@7.4.0:
+    resolution: {integrity: sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==}
     engines: {node: '>=12.0.0'}
 
-  proxy-addr@2.0.7:
-    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
-    engines: {node: '>= 0.10'}
-
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
-  pseudomap@1.0.2:
-    resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
-
-  psl@1.9.0:
-    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+  psl@1.11.0:
+    resolution: {integrity: sha512-pjFdcBXT4g061k/SQkzNCRnav+1RdIOgrcX8hs5eL3CEQcFZP9qT8T1RWYxGKT11rH1DdIW+kJRfCYykBJuerQ==}
 
-  pump@2.0.1:
-    resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==}
-
-  pump@3.0.0:
-    resolution: {integrity: sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==}
-
-  pumpify@1.5.1:
-    resolution: {integrity: sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==}
+  pump@3.0.2:
+    resolution: {integrity: sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
@@ -13336,17 +13052,8 @@ packages:
     resolution: {integrity: sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==}
     engines: {node: '>=12.20'}
 
-  puppeteer-core@2.1.1:
-    resolution: {integrity: sha512-n13AWriBMPYxnpbb6bnaY5YoY6rGj8vPLrz6CZF3o0qJNEwlcfJVxBzYZ0NJsQ21UbdJoijPCDrM++SUVEz7+w==}
-    engines: {node: '>=8.16.0'}
-
-  qs@6.11.0:
-    resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==}
-    engines: {node: '>=0.6'}
-
-  qs@6.12.1:
-    resolution: {integrity: sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==}
-    engines: {node: '>=0.6'}
+  pure-rand@6.1.0:
+    resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
   querystring@0.2.0:
     resolution: {integrity: sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==}
@@ -13375,9 +13082,6 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
-  ramda@0.29.0:
-    resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==}
-
   randomatic@3.1.1:
     resolution: {integrity: sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==}
     engines: {node: '>= 0.10.0'}
@@ -13385,14 +13089,6 @@ packages:
   randombytes@2.1.0:
     resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==}
 
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
-    engines: {node: '>= 0.6'}
-
-  raw-body@2.5.2:
-    resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==}
-    engines: {node: '>= 0.8'}
-
   rc-config-loader@4.1.3:
     resolution: {integrity: sha512-kD7FqML7l800i6pS6pvLyIE2ncbk9Du8Q0gp/4hMPhJU6ZxApkoLcGD8ZeqgiAlfwZ6BlETq6qqe+12DUL207w==}
 
@@ -13400,12 +13096,6 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-colorful@5.6.1:
-    resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   react-devtools-inline@4.4.0:
     resolution: {integrity: sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==}
 
@@ -13414,40 +13104,33 @@ packages:
     peerDependencies:
       typescript: '>= 4.3.x'
 
-  react-docgen@7.0.3:
-    resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==}
+  react-docgen@7.1.0:
+    resolution: {integrity: sha512-APPU8HB2uZnpl6Vt/+0AFoVYgSRtfiP6FLrZgPPTDmqSb2R4qZRbgd0A3VzIFxDt5e+Fozjx79WjLWnF69DK8g==}
     engines: {node: '>=16.14.0'}
 
   react-dom@18.2.0:
     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
     peerDependencies:
-      react: ^18.2.0
-
-  react-element-to-jsx-string@15.0.0:
-    resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
 
-  react-error-boundary@3.1.4:
-    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
-    engines: {node: '>=10', npm: '>=6'}
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   react-error-overlay@6.0.9:
     resolution: {integrity: sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==}
 
-  react-hook-form@7.51.3:
-    resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==}
-    engines: {node: '>=12.22.0'}
+  react-hook-form@7.53.2:
+    resolution: {integrity: sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   react-icons@4.12.0:
     resolution: {integrity: sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -13455,33 +13138,26 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.1.0:
-    resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
-
-  react-is@18.2.0:
-    resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-live@2.4.1:
-    resolution: {integrity: sha512-r+32f7oV/kBs3QZBRvaT+9vOkQW47UZrDpgwUe5FiIMOl7sdo5pmISgb7Zpj5PGHgY6XQaiXs3FEh+IWw3KbRg==}
+  react-live@4.1.8:
+    resolution: {integrity: sha512-B2SgNqwPuS2ekqj4lcxi5TibEcjWkdVyYykBEUBshPAPDQ527x2zPEZg560n8egNtAjUpwXFQm7pcXV65aAYmg==}
     engines: {node: '>= 0.12.0', npm: '>= 2.0.0'}
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      react: 18.2.0
+      react-dom: 18.2.0
 
   react-lorem-component@0.13.0:
     resolution: {integrity: sha512-4mWjxmcG/DJJwdxdKwXWyP2N9zohbJg/yYaC+7JffQNrKj3LYDpA/A4u/Dju1v1ZF6Jew2gbFKGb5Z6CL+UNTw==}
     peerDependencies:
-      react: ^18.2.0
-
-  react-multi-ref@1.0.1:
-    resolution: {integrity: sha512-zgQKmduv95vtXIkze6583pRW7Y+mNj7R0bYgxIRWOrsEfxBQaK+MZ6yjTiZ/qcFV4bYGM74nE9isb+YRBNIw2g==}
+      react: 18.2.0
 
-  react-refresh@0.14.0:
-    resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
-    engines: {node: '>=0.10.0'}
+  react-multi-ref@1.0.2:
+    resolution: {integrity: sha512-6oS5yzrZ4UrdMHbF6QAnnaoIe9h8R+Xv4m8uJWVK8/Q4RCc6RTT0XJ/LZ7llVgFcVbnDHeUAcVIhtRgFyzjJpA==}
 
-  react-refresh@0.9.0:
-    resolution: {integrity: sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==}
+  react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
   react-remove-scroll-bar@2.3.6:
@@ -13489,7 +13165,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -13499,57 +13175,31 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.5.5:
-    resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  react-remove-scroll@2.5.9:
-    resolution: {integrity: sha512-bvHCLBrFfM2OgcrpPY2YW84sPdS2o2HKWJUf1xGyGLnSoEnOTOBpahIarjRuYtN0ryahCeP242yf+5TrBX/pZA==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-simple-code-editor@0.11.3:
-    resolution: {integrity: sha512-7bVI4Yd1aNCeuldErXUt8ksaAG5Fi+GZ6vp3mtFBnckKdzsQtrgkDvdwMFXIhwTGG+mUYmk5ZpMo0axSW9JBzA==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  react-textarea-autosize@8.5.3:
-    resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==}
+  react-textarea-autosize@8.5.5:
+    resolution: {integrity: sha512-CVA94zmfp8m4bSHtWwmANaBR8EPsKy2aZ7KwqhoS4Ftib87F9Kvi7XQhOixypPLMc6kVYgOXvKFuuzZDpHGRPg==}
     engines: {node: '>=10'}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
-  react-wrap-balancer@1.1.0:
-    resolution: {integrity: sha512-EhF3jOZm5Fjx+Cx41e423qOv2c2aOvXAtym2OHqrGeMUnwERIyNsRBgnfT3plB170JmuYvts8K2KSPEIerKr5A==}
+  react-wrap-balancer@1.1.1:
+    resolution: {integrity: sha512-AB+l7FPRWl6uZ28VcJ8skkwLn2+UC62bjiw8tQUrZPlEWDVnR9MG0lghyn7EyxuJSsFEpht4G+yh2WikEqQ/5Q==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
@@ -13594,8 +13244,8 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  recast@0.23.6:
-    resolution: {integrity: sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==}
+  recast@0.23.9:
+    resolution: {integrity: sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==}
     engines: {node: '>= 4'}
 
   rechoir@0.6.2:
@@ -13606,6 +13256,18 @@ packages:
     resolution: {integrity: sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==}
     engines: {node: '>= 10.13.0'}
 
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.0:
+    resolution: {integrity: sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q==}
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -13617,20 +13279,13 @@ packages:
   refractor@3.3.1:
     resolution: {integrity: sha512-vaN6R56kLMuBszHSWlwTpcZ8KTMG6aUCok4GrxYDT20UIOXxOc5o6oDc8tNTzSlH3m2sI+Eu9Jo2kVdDcUTWYw==}
 
-  regenerate-unicode-properties@10.1.1:
-    resolution: {integrity: sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==}
-    engines: {node: '>=4'}
-
-  regenerate-unicode-properties@9.0.0:
-    resolution: {integrity: sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==}
+  regenerate-unicode-properties@10.2.0:
+    resolution: {integrity: sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==}
     engines: {node: '>=4'}
 
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
-  regenerator-runtime@0.13.11:
-    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
-
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -13641,8 +13296,17 @@ packages:
     resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==}
     engines: {node: '>=0.10.0'}
 
-  regexp.prototype.flags@1.5.2:
-    resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
+  regex-recursion@4.3.0:
+    resolution: {integrity: sha512-5LcLnizwjcQ2ALfOj95MjcatxyqF5RPySx9yT+PaXu3Gox2vyAtLDjHB8NTJLtMGkvyau6nI3CfpwFCjPUIs/A==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@5.0.2:
+    resolution: {integrity: sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==}
+
+  regexp.prototype.flags@1.5.3:
+    resolution: {integrity: sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==}
     engines: {node: '>= 0.4'}
 
   regexpp@2.0.1:
@@ -13653,12 +13317,8 @@ packages:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
 
-  regexpu-core@4.8.0:
-    resolution: {integrity: sha512-1F6bYsoYiz6is+oz70NWur2Vlh9KWtswuRuzJOfeYUrfPX2o8n74AnUVaOGDbUqVGO9fNHu48/pjJO4sNVwsOg==}
-    engines: {node: '>=4'}
-
-  regexpu-core@5.3.2:
-    resolution: {integrity: sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==}
+  regexpu-core@6.1.1:
+    resolution: {integrity: sha512-k67Nb9jvwJcJmVpw0jPttR1/zVfnKf8Km0IPatrU/zJ5XeG3+Slx0xLXs9HByJSzXzrlz5EDvN6yLNMDc2qdnw==}
     engines: {node: '>=4'}
 
   registry-auth-token@5.0.2:
@@ -13669,74 +13329,57 @@ packages:
     resolution: {integrity: sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==}
     engines: {node: '>=12'}
 
-  regjsgen@0.5.2:
-    resolution: {integrity: sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==}
-
-  regjsparser@0.7.0:
-    resolution: {integrity: sha512-A4pcaORqmNMDVwUjWoTzuhwMGpP+NykpfqAsEgI1FSH/EzC7lrN5TMd+kN8YCovX+jMpu8eaqXgXPCa0g8FQNQ==}
-    hasBin: true
+  regjsgen@0.8.0:
+    resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
 
-  regjsparser@0.9.1:
-    resolution: {integrity: sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==}
+  regjsparser@0.11.2:
+    resolution: {integrity: sha512-3OGZZ4HoLJkkAZx/48mTXJNlmqTGOzc0o9OWQPuWpkOlXXPbyN6OafCcoXUnBqE2D3f/T5L+pWc1kdEmnfnRsA==}
     hasBin: true
 
-  rehype-parse@7.0.1:
-    resolution: {integrity: sha512-fOiR9a9xH+Le19i4fGzIEowAbwG7idy2Jzs4mOrFWBSJ0sNUgy0ev871dwWnbOo371SjgjG4pwzrbgSVrKxecw==}
-
-  rehype-parse@8.0.5:
-    resolution: {integrity: sha512-Ds3RglaY/+clEX2U2mHflt7NlMA72KspZ0JLUJgBBLpRddBcEw3H8uYZQliQriku22NZpYMfjDdSgHcjxue24A==}
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
-  rehype-pretty-code@0.10.2:
-    resolution: {integrity: sha512-yBgk3S4yXtkAWVrkoN1DqDihjsaP0ReuN9Du4Dtkl/wsgwyqGNGuIUGi2etVHAOsi40e2KRHoOulQqnKPuscPA==}
-    engines: {node: '>=16'}
+  rehype-pretty-code@0.14.0:
+    resolution: {integrity: sha512-hBeKF/Wkkf3zyUS8lal9RCUuhypDWLQc+h9UrP9Pav25FUm/AQAVh4m5gdvJxh4Oz+U+xKvdsV01p1LdvsZTiQ==}
+    engines: {node: '>=18'}
     peerDependencies:
-      shiki: 0.x
-
-  rehype-slug@5.1.0:
-    resolution: {integrity: sha512-Gf91dJoXneiorNEnn+Phx97CO7oRMrpi+6r155tTxzGuLtm+QrI4cTwCa9e1rtePdL4i9tSO58PeSS6HWfgsiw==}
-
-  rehype-stringify@8.0.0:
-    resolution: {integrity: sha512-VkIs18G0pj2xklyllrPSvdShAV36Ff3yE5PUO9u36f6+2qJFnn22Z5gKwBOwgXviux4UC7K+/j13AnZfPICi/g==}
-
-  rehype-stringify@9.0.4:
-    resolution: {integrity: sha512-Uk5xu1YKdqobe5XpSskwPvo1XeHUUucWEQSl8hTrXt5selvca1e8K1EZ37E6YoZ4BT8BCqCdVfQW7OfHfthtVQ==}
+      shiki: ^1.3.0
 
-  rehype@11.0.0:
-    resolution: {integrity: sha512-qXqRqiCFJD5CJ61CSJuNImTFrm3zVkOU9XywHDwrUuvWN74MWt72KJ67c5CM5x8g0vGcOkRVCrYj85vqkmHulQ==}
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
-  remark-autolink-headings@6.1.0:
-    resolution: {integrity: sha512-oeMSIfjaNboWPDVKahQAjF8iJ8hsz5aI8KFzAmmBdznir7zBvkgUjYE/BrpWvd02DCf/mSQ1IklznLkl3dVvZQ==}
+  rehype-slug@6.0.0:
+    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
 
-  remark-external-links@8.0.0:
-    resolution: {integrity: sha512-5vPSX0kHoSsqtdftSHhIYofVINC8qmp0nctkeU9YoJwV3YfiBRiI6cbFRJ0oI/1F9xS+bopXG0m2KS8VFscuKA==}
+  rehype-stringify@10.0.1:
+    resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
-  remark-frontmatter@4.0.1:
-    resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==}
+  rehype@13.0.2:
+    resolution: {integrity: sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==}
 
-  remark-gfm@3.0.1:
-    resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
+  remark-frontmatter@5.0.0:
+    resolution: {integrity: sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==}
 
-  remark-mdx-frontmatter@1.1.1:
-    resolution: {integrity: sha512-7teX9DW4tI2WZkXS4DBxneYSY7NHiXl4AKdWDO9LXVweULlCT8OPWsOjLEnMIXViN1j+QcY8mfbq3k0EK6x3uA==}
-    engines: {node: '>=12.2.0'}
+  remark-gfm@4.0.0:
+    resolution: {integrity: sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==}
 
-  remark-mdx@2.3.0:
-    resolution: {integrity: sha512-g53hMkpM0I98MU266IzDFMrTD980gNF3BJnkyFcmN+dD873mQeD5rdMO3Y2X+x8umQfbSE0PcoEDl7ledSA+2g==}
+  remark-mdx-frontmatter@4.0.0:
+    resolution: {integrity: sha512-PZzAiDGOEfv1Ua7exQ8S5kKxkD8CDaSb4nM+1Mprs6u8dyvQifakh+kCj6NovfGXW+bTvrhjaR3srzjS2qJHKg==}
 
-  remark-parse@10.0.2:
-    resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
+  remark-mdx@3.1.0:
+    resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
 
-  remark-rehype@10.1.0:
-    resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
-  remark-slug@6.1.0:
-    resolution: {integrity: sha512-oGCxDF9deA8phWvxFuyr3oSJsdyUAxMFbA0mZ7Y1Sas+emILtO+e5WutF9564gDsEN4IXaQXm5pFo6MLH+YmwQ==}
+  remark-rehype@11.1.1:
+    resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==}
 
-  remark-stringify@10.0.3:
-    resolution: {integrity: sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==}
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
-  remark@14.0.3:
-    resolution: {integrity: sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==}
+  remark@15.0.1:
+    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
 
   remarkable@1.7.4:
     resolution: {integrity: sha512-e6NKUXgX95whv7IgddywbeN/ItCkWbISmc2DiqHJb0wTrqZIexqdco5b8Z3XZoo/48IdNVKM9ZCvTPJ4F5uvhg==}
@@ -13816,8 +13459,8 @@ packages:
     resolution: {integrity: sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==}
     deprecated: https://github.com/lydell/resolve-url#deprecated
 
-  resolve.exports@1.1.1:
-    resolution: {integrity: sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==}
+  resolve.exports@2.0.2:
+    resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==}
     engines: {node: '>=10'}
 
   resolve@1.22.8:
@@ -13856,34 +13499,33 @@ packages:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rfdc@1.3.1:
-    resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==}
+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
   rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rimraf@2.7.1:
-    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
-    deprecated: Rimraf versions prior to v4 are no longer supported
-    hasBin: true
-
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rimraf@5.0.5:
-    resolution: {integrity: sha512-CqDakW+hMe/Bz202FPEymy68P+G50RfMQK+Qo5YUqc9SPipvbGjCGKd0RSKEelbsfQuw3g5NZDSrlZZAJurH1A==}
-    engines: {node: '>=14'}
+  rimraf@5.0.10:
+    resolution: {integrity: sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==}
     hasBin: true
 
-  rollup@3.29.4:
-    resolution: {integrity: sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==}
+  rollup@3.29.5:
+    resolution: {integrity: sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rollup@4.27.4:
+    resolution: {integrity: sha512-RLKxqHEMjh/RGLsDxAEsaLO3mWgyoU6x9w6n1ikAzet4B3gI2/3yP6PWY2p9QzRTh6MfEIXB3MwsOY0Iv3vNrw==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   rss@1.2.2:
     resolution: {integrity: sha512-xUhRTgslHeCBeHAqaWSbOYTydN2f0tAzNXvzh3stjz7QDhQMzdgHf3pfgNIngeytQflrFPfy6axHilTETr6gDg==}
 
@@ -13901,10 +13543,6 @@ packages:
   rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
 
-  sade@1.8.1:
-    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
-    engines: {node: '>=6'}
-
   safe-array-concat@1.1.2:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
     engines: {node: '>=0.4'}
@@ -13925,12 +13563,12 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  saxes@5.0.1:
-    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
-    engines: {node: '>=10'}
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
 
-  scheduler@0.23.0:
-    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
   schema-utils@2.7.1:
     resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
@@ -13943,6 +13581,9 @@ packages:
   scroll-into-view-if-needed@3.0.10:
     resolution: {integrity: sha512-t44QCeDKAPf1mtQH3fYpWz8IM/DyvHLjs8wUvvwMYxk5moOqCzrMSxK6HQVD0QVmVjXFavoFIPRVrMuJPKAvtg==}
 
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
+
   section-matter@1.0.0:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
@@ -13977,25 +13618,17 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.6.0:
-    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
     hasBin: true
 
-  send@0.18.0:
-    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
-    engines: {node: '>= 0.8.0'}
-
   sentence-case@3.0.4:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
 
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
-  serve-static@1.15.0:
-    resolution: {integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==}
-    engines: {node: '>= 0.8.0'}
-
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -14015,9 +13648,6 @@ packages:
     resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
     engines: {node: '>=0.10.0'}
 
-  setprototypeof@1.2.0:
-    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
-
   shallow-clone@3.0.1:
     resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
     engines: {node: '>=8'}
@@ -14026,6 +13656,10 @@ packages:
     resolution: {integrity: sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==}
     engines: {node: '>=14.15.0'}
 
+  sharp@0.33.5:
+    resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
+    engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
+
   shebang-command@1.2.0:
     resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
     engines: {node: '>=0.10.0'}
@@ -14050,8 +13684,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  shiki@0.14.7:
-    resolution: {integrity: sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==}
+  shiki@1.23.1:
+    resolution: {integrity: sha512-8kxV9TH4pXgdKGxNOkrSMydn1Xf6It8lsle0fiqxf7a1149K1WGtdOu3Zb91T5r1JpvRPxqxU3C2XdZZXQnrig==}
 
   side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -14078,10 +13712,6 @@ packages:
   simple-swizzle@0.2.2:
     resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
 
-  sirv@1.0.19:
-    resolution: {integrity: sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==}
-    engines: {node: '>= 10'}
-
   sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -14101,6 +13731,10 @@ packages:
     resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
     engines: {node: '>=12'}
 
+  slash@5.1.0:
+    resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
+    engines: {node: '>=14.16'}
+
   slice-ansi@2.1.0:
     resolution: {integrity: sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==}
     engines: {node: '>=6'}
@@ -14117,11 +13751,6 @@ packages:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
 
-  smartwrap@2.0.2:
-    resolution: {integrity: sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==}
-    engines: {node: '>=6'}
-    hasBin: true
-
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
@@ -14145,12 +13774,8 @@ packages:
     resolution: {integrity: sha512-l5x7VUUWbjVFbafGLxPWkYsHIhEvmF85tbIeFZWc8ZPtoMyybuEhL7Jye/ooC4/d48FgOjSJXgsF/AJPYCW8Zw==}
     engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
 
-  sort-keys@5.0.0:
-    resolution: {integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==}
-    engines: {node: '>=12'}
-
-  source-map-js@1.2.0:
-    resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
   source-map-resolve@0.5.3:
@@ -14183,25 +13808,21 @@ packages:
     resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==}
     engines: {node: '>= 8'}
 
-  sourcemap-codec@1.4.8:
-    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
-    deprecated: Please use @jridgewell/sourcemap-codec instead
-
   space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
 
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spawn-command@0.0.2-1:
-    resolution: {integrity: sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==}
+  spawn-command@0.0.2:
+    resolution: {integrity: sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==}
 
   spawn-please@2.0.2:
     resolution: {integrity: sha512-KM8coezO6ISQ89c1BzyWNtcn2V2kAVtwIXd3cN/V5a0xPYc1F/vydrRc01wsKFEQ/p+V1a4sw4z2yMITIXrgGw==}
     engines: {node: '>=14'}
 
-  spawndamnit@2.0.0:
-    resolution: {integrity: sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==}
+  spawndamnit@3.0.1:
+    resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
 
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
@@ -14212,8 +13833,8 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-license-ids@3.0.17:
-    resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}
+  spdx-license-ids@3.0.20:
+    resolution: {integrity: sha512-jg25NiDV/1fLtSgEgyvVyDunvaNHbuwF9lfNV17gSmPFAlYzdfNBlLtLzXTevwkPj7DhGbmN9VnmJIgLnhvaBw==}
 
   split-string@3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
@@ -14232,18 +13853,14 @@ packages:
     resolution: {integrity: sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==}
     engines: {node: '>=12'}
 
-  ssri@10.0.5:
-    resolution: {integrity: sha512-bSf16tAFkGeRlUNDjXu8FzaMQt6g2HZJrun7mtMbIPOddxt3GLMSz5VWUWcqTJUPfLEaDIepGxv+bYQW49596A==}
+  ssri@10.0.6:
+    resolution: {integrity: sha512-MGrFH9Z4NP9Iyhqn16sDtBpRRNJ0Y2hNa6D65h736fVSaPCHr4DM4sWUNvVaSuC+0OBGhwsrydQwmgfg5LncqQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   ssri@9.0.1:
     resolution: {integrity: sha512-o57Wcn66jMQvfHG1FlYbWeZWW/dHZhJXjpIcTfXldXEk5nz5lStPo3mK0OJQfGR3RbZUlbISexbljkJzuEj/8Q==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
 
-  stable@0.1.8:
-    resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
-    deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
-
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -14255,48 +13872,28 @@ packages:
     resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
     engines: {node: '>=0.10.0'}
 
-  statuses@2.0.1:
-    resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
-    engines: {node: '>= 0.8'}
-
   stdin-discarder@0.1.0:
     resolution: {integrity: sha512-xhV7w8S+bUwlPTb4bAOUQhv8/cSS5offJuX8GQGq32ONF0ZtDWKfkdomM3HMRA+LhX6um/FZ0COqlwsjD53LeQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  stop-iteration-iterator@1.0.0:
-    resolution: {integrity: sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==}
-    engines: {node: '>= 0.4'}
-
-  store2@2.14.3:
-    resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==}
+  storybook-dark-mode@4.0.2:
+    resolution: {integrity: sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==}
 
-  storybook-dark-mode@3.0.3:
-    resolution: {integrity: sha512-ZLBLVpkuKTdtUv3DTuOjeP/bE7DHhOxVpDROKc0NtEYq9JHLUu6z05LLZinE3v6QPXQZ9TMQPm3Xe/0BcLEZlw==}
+  storybook@8.4.5:
+    resolution: {integrity: sha512-9tfgabXnMibYp3SvoaJXXMD63Pw0SA9Hnf5v6TxysCYZs4DZ/04fAkK+9RW+K4C5JkV83qXMMlrsPj766R47fg==}
+    hasBin: true
     peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
+      prettier: ^2 || ^3
     peerDependenciesMeta:
-      react:
-        optional: true
-      react-dom:
+      prettier:
         optional: true
 
-  storybook@7.6.17:
-    resolution: {integrity: sha512-8+EIo91bwmeFWPg1eysrxXlhIYv3OsXrznTr4+4Eq0NikqAoq6oBhtlN5K2RGS2lBVF537eN+9jTCNbR+WrzDA==}
-    hasBin: true
-
-  stream-shift@1.0.3:
-    resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==}
-
-  stream-transform@2.1.3:
-    resolution: {integrity: sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==}
-
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
 
-  streamx@2.16.1:
-    resolution: {integrity: sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==}
+  streamx@2.20.2:
+    resolution: {integrity: sha512-aDGDLU+j9tJcUdPGOaHmVF1u/hhI+CsGkT02V3OKlHDV7IukOI+nTWAGkiZEKCO35rWN1wIr4tS7YFr1f4qSvA==}
 
   strict-event-emitter@0.4.6:
     resolution: {integrity: sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==}
@@ -14332,6 +13929,10 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
   string.prototype.matchall@4.0.11:
     resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
     engines: {node: '>= 0.4'}
@@ -14340,6 +13941,9 @@ packages:
     resolution: {integrity: sha512-XZpspuSB7vJWhvJc9DLSlrXl1mcA2BdoY5jjnS135ydXqLoqhs96JjDtCkjJEQHvfqZIp9hBuBMgI589peyx9Q==}
     engines: {node: '>= 0.4'}
 
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
   string.prototype.trim@1.2.9:
     resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==}
     engines: {node: '>= 0.4'}
@@ -14357,9 +13961,6 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
-  stringify-entities@3.1.0:
-    resolution: {integrity: sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==}
-
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
@@ -14433,13 +14034,16 @@ packages:
   style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   styled-jsx@5.1.1:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'
       babel-plugin-macros: '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@babel/core':
         optional: true
@@ -14471,30 +14075,18 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
-  supports-hyperlinks@2.3.0:
-    resolution: {integrity: sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==}
-    engines: {node: '>=8'}
-
   supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svgo@2.8.0:
-    resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==}
-    engines: {node: '>=10.13.0'}
-    hasBin: true
-
   swr@2.2.5:
     resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
-  synchronous-promise@2.0.17:
-    resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==}
-
   table@5.4.6:
     resolution: {integrity: sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==}
     engines: {node: '>=6.0.0'}
@@ -14506,14 +14098,22 @@ packages:
   tailwind-merge@1.14.0:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
 
+  tailwind-merge@2.5.4:
+    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+
   tailwind-variants@0.1.20:
     resolution: {integrity: sha512-AMh7x313t/V+eTySKB0Dal08RHY7ggYK0MSn/ad8wKWOrDUIzyiWNayRUm2PIJ4VRkvRnfNuyRuKbLV3EN+ewQ==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}
     peerDependencies:
       tailwindcss: '*'
 
-  tailwindcss@3.4.3:
-    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
+  tailwindcss@3.4.14:
+    resolution: {integrity: sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
+  tailwindcss@3.4.15:
+    resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -14528,8 +14128,8 @@ packages:
   tar-fs@2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
 
-  tar-fs@3.0.5:
-    resolution: {integrity: sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==}
+  tar-fs@3.0.6:
+    resolution: {integrity: sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==}
 
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
@@ -14542,29 +14142,14 @@ packages:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
 
-  telejson@7.2.0:
-    resolution: {integrity: sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==}
-
-  temp-dir@2.0.0:
-    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
-    engines: {node: '>=8'}
-
   temp@0.8.4:
     resolution: {integrity: sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==}
     engines: {node: '>=6.0.0'}
 
-  tempy@1.0.1:
-    resolution: {integrity: sha512-biM9brNqxSc04Ee71hzFbryD11nX7VPhQQY32AdDmjFvodsRFz/3ufeoTZ6uYkRFfGo188tENcASNs3vTdsM0w==}
-    engines: {node: '>=10'}
-
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
 
-  terminal-link@2.1.1:
-    resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
-    engines: {node: '>=8'}
-
   terser-webpack-plugin@5.3.10:
     resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
     engines: {node: '>= 10.13.0'}
@@ -14581,8 +14166,8 @@ packages:
       uglify-js:
         optional: true
 
-  terser@5.30.3:
-    resolution: {integrity: sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==}
+  terser@5.36.0:
+    resolution: {integrity: sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -14590,6 +14175,9 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
+  text-decoder@1.2.1:
+    resolution: {integrity: sha512-x9v3H/lTKIJKQQe7RPQkLfKAnc9lUTkWDypIQgTzPJAq+5/GCDHonmshfvlsNSj58yyshbIJJDLmU15qNERrXQ==}
+
   text-extensions@1.9.0:
     resolution: {integrity: sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==}
     engines: {node: '>=0.10'}
@@ -14604,6 +14192,12 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  thingies@1.21.0:
+    resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==}
+    engines: {node: '>=10.18'}
+    peerDependencies:
+      tslib: ^2
+
   through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
 
@@ -14632,10 +14226,6 @@ packages:
   tmpl@1.0.5:
     resolution: {integrity: sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==}
 
-  to-fast-properties@2.0.0:
-    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
-    engines: {node: '>=4'}
-
   to-object-path@0.3.0:
     resolution: {integrity: sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==}
     engines: {node: '>=0.10.0'}
@@ -14652,34 +14242,20 @@ packages:
     resolution: {integrity: sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==}
     engines: {node: '>=0.10.0'}
 
-  tocbot@4.25.0:
-    resolution: {integrity: sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==}
-
-  toidentifier@1.0.1:
-    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
-    engines: {node: '>=0.6'}
-
   toml@2.3.6:
     resolution: {integrity: sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ==}
 
   toml@3.0.0:
     resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
 
-  totalist@1.1.0:
-    resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==}
-    engines: {node: '>=6'}
-
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
-  tough-cookie@4.1.3:
-    resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==}
+  tough-cookie@4.1.4:
+    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
 
-  tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-
   tr46@1.0.1:
     resolution: {integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==}
 
@@ -14687,6 +14263,12 @@ packages:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
 
+  tree-dump@1.0.2:
+    resolution: {integrity: sha512-dpev9ABuLWdEubk+cIaI9cHwRNNDjkBBLXTwI4UCUFdQ5xXKqNXoK4FEciw/vxf+NQ7Cb7sGUyeUtORvHIdRXQ==}
+    engines: {node: '>=10.0'}
+    peerDependencies:
+      tslib: '2'
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -14698,9 +14280,6 @@ packages:
     resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
     engines: {node: '>=8'}
 
-  trough@1.0.5:
-    resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==}
-
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
@@ -14725,17 +14304,21 @@ packages:
       '@swc/wasm':
         optional: true
 
-  ts-pattern@4.3.0:
-    resolution: {integrity: sha512-pefrkcd4lmIVR0LA49Imjf9DYLK8vtWhqBPA3Ya1ir8xCW0O2yjL9dsCVvI7pCodLC5q7smNpEtDR2yVulQxOg==}
+  ts-pattern@5.5.0:
+    resolution: {integrity: sha512-jqbIpTsa/KKTJYWgPNsFNbLVpwCgzXfFJ1ukNn4I8hMwyQzHMJnk/BqWzggB0xpkILuKzaO/aMYhS0SkaJyKXg==}
 
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
-  tslib@2.6.2:
-    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tsup@6.4.0:
     resolution: {integrity: sha512-4OlbqIK/SF+cJp0mMqPM2pKULvgj/1S2Gm3I1aFoFGIryUOyIqPZBoqKkqVQT6uFtWJ5AHftIv0riXKfHox1zQ==}
@@ -14763,11 +14346,6 @@ packages:
     resolution: {integrity: sha512-xHtFaKtHxM9LOklMmJdI3BEnQq/D5F73Of2E1GDrITi9sgoVkvIsrQUTY1G8FlmGtA+awCI4EBlTRRYxkL2sRg==}
     hasBin: true
 
-  tty-table@4.2.3:
-    resolution: {integrity: sha512-Fs15mu0vGzCrj8fmJNP7Ynxt5J7praPXqFN0leZeZBXJwkMxv9cb2D454k1ltrtUSJbZ4yH4e0CynsHLxmUfFA==}
-    engines: {node: '>=8.0.0'}
-    hasBin: true
-
   tuf-js@1.1.7:
     resolution: {integrity: sha512-i3P9Kgw3ytjELUfpuKVDNBJvk4u5bXL6gskv572mcevPbSKCV3zt3djhmlEQ65yERjIbOSncy7U4cQJaB1CBCg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -14824,14 +14402,6 @@ packages:
     resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
     engines: {node: '>=4'}
 
-  type-fest@0.13.1:
-    resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
-    engines: {node: '>=10'}
-
-  type-fest@0.16.0:
-    resolution: {integrity: sha512-eaBzG6MxNzEn9kiwvtre90cXaNLkmadMWa1zQMs3XORCXNbsH/OewwbxC5ia9dCxIxnTAsSxXJaa/p5y8DlvJg==}
-    engines: {node: '>=10'}
-
   type-fest@0.18.1:
     resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
     engines: {node: '>=10'}
@@ -14860,16 +14430,12 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
 
-  type-fest@3.13.1:
-    resolution: {integrity: sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==}
-    engines: {node: '>=14.16'}
-
-  type-is@1.6.18:
-    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
-    engines: {node: '>= 0.6'}
+  type-fest@4.27.0:
+    resolution: {integrity: sha512-3IMSWgP7C5KSQqmo1wjhKrwsvXAtF33jO3QY+Uy++ia7hqvgSK6iXbbg5PbDBc1P2ZbNEDgejOrN4YooXvhwCw==}
+    engines: {node: '>=16'}
 
-  type@2.7.2:
-    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+  type@2.7.3:
+    resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
 
   typed-array-buffer@1.0.2:
     resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==}
@@ -14903,11 +14469,16 @@ packages:
     engines: {node: '>=4.2.0'}
     hasBin: true
 
-  ufo@1.5.3:
-    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+  typescript@5.6.3:
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.5.4:
+    resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
-  uglify-js@3.17.4:
-    resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==}
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
     engines: {node: '>=0.8.0'}
     hasBin: true
 
@@ -14918,34 +14489,28 @@ packages:
     resolution: {integrity: sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==}
     engines: {node: '>=0.10.0'}
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
-
-  unescape@1.0.1:
-    resolution: {integrity: sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==}
-    engines: {node: '>=0.10.0'}
-
-  unicode-canonical-property-names-ecmascript@2.0.0:
-    resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
+  unicode-canonical-property-names-ecmascript@2.0.1:
+    resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
     engines: {node: '>=4'}
 
   unicode-match-property-ecmascript@2.0.0:
     resolution: {integrity: sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==}
     engines: {node: '>=4'}
 
-  unicode-match-property-value-ecmascript@2.1.0:
-    resolution: {integrity: sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==}
+  unicode-match-property-value-ecmascript@2.2.0:
+    resolution: {integrity: sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==}
     engines: {node: '>=4'}
 
   unicode-property-aliases-ecmascript@2.1.0:
     resolution: {integrity: sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==}
     engines: {node: '>=4'}
 
-  unified@10.1.2:
-    resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
+  unicorn-magic@0.1.0:
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
 
-  unified@9.2.2:
-    resolution: {integrity: sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==}
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
   union-value@1.0.1:
     resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
@@ -14967,49 +14532,36 @@ packages:
     resolution: {integrity: sha512-WrcA6AyEfqDX5bWige/4NQfPZMtASNVxdmWR76WESYQVAACSgWcR6e9i0mofqqBxYFtL4oAxPIptY73/0YE1DQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  unique-string@2.0.0:
-    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
-    engines: {node: '>=8'}
-
   unique-string@3.0.0:
     resolution: {integrity: sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==}
     engines: {node: '>=12'}
 
-  unist-util-generated@2.0.1:
-    resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
-
   unist-util-is@4.1.0:
     resolution: {integrity: sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==}
 
-  unist-util-is@5.2.1:
-    resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
-
-  unist-util-position-from-estree@1.1.2:
-    resolution: {integrity: sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==}
-
-  unist-util-position@4.0.4:
-    resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
 
-  unist-util-remove-position@4.0.2:
-    resolution: {integrity: sha512-TkBb0HABNmxzAcfLf4qsIbFbaPDvMO6wa3b3j4VcEzFVaw1LBKwnW4/sRJ/atSLSzoIg41JWEdnE7N6DIhGDGQ==}
+  unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
 
-  unist-util-stringify-position@2.0.3:
-    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
-  unist-util-stringify-position@3.0.3:
-    resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
   unist-util-visit-parents@3.1.1:
     resolution: {integrity: sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==}
 
-  unist-util-visit-parents@5.1.3:
-    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
   unist-util-visit@2.0.3:
     resolution: {integrity: sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==}
 
-  unist-util-visit@4.1.2:
-    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
   universalify@0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
@@ -15023,12 +14575,8 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
-  unpipe@1.0.0:
-    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
-    engines: {node: '>= 0.8'}
-
-  unplugin@1.10.1:
-    resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
+  unplugin@1.16.0:
+    resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
     engines: {node: '>=14.0.0'}
 
   unset-value@1.0.0:
@@ -15039,8 +14587,8 @@ packages:
     resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
     engines: {node: '>=8'}
 
-  update-browserslist-db@1.0.13:
-    resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
+  update-browserslist-db@1.1.1:
+    resolution: {integrity: sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -15070,7 +14618,7 @@ packages:
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -15078,13 +14626,18 @@ packages:
   use-composed-ref@1.3.0:
     resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
+
+  use-editable@2.3.3:
+    resolution: {integrity: sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==}
+    peerDependencies:
+      react: 18.2.0
 
   use-isomorphic-layout-effect@1.1.2:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -15093,41 +14646,35 @@ packages:
     resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
     peerDependencies:
       '@types/react': '*'
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-resize-observer@9.1.0:
-    resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==}
-    peerDependencies:
-      react: ^18.2.0
-      react-dom: ^18.2.0
-
   use-sidecar@1.1.2:
     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
     engines: {node: '>=10'}
     peerDependencies:
       '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
-      react: ^18.2.0
+      react: 18.2.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.2.0:
-    resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==}
+  use-sync-external-store@1.2.2:
+    resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   use@3.1.1:
     resolution: {integrity: sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==}
     engines: {node: '>=0.10.0'}
 
-  usehooks-ts@2.16.0:
-    resolution: {integrity: sha512-bez95WqYujxp6hFdM/CpRDiVPirZPxlMzOH2QB8yopoKQMXpscyZoxOjpEdaxvV+CAWUDSM62cWnqHE0E/MZ7w==}
+  usehooks-ts@3.1.0:
+    resolution: {integrity: sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==}
     engines: {node: '>=16.15.0'}
     peerDependencies:
-      react: ^18.2.0
+      react: 18.2.0
 
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -15139,10 +14686,6 @@ packages:
     resolution: {integrity: sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==}
     engines: {node: '>= 4'}
 
-  utils-merge@1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
-    engines: {node: '>= 0.4.0'}
-
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -15151,19 +14694,14 @@ packages:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
 
-  uvu@0.5.6:
-    resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}
-    engines: {node: '>=8'}
-    hasBin: true
-
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
   v8-compile-cache@2.4.0:
     resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
 
-  v8-to-istanbul@9.2.0:
-    resolution: {integrity: sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==}
+  v8-to-istanbul@9.3.0:
+    resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
   v8flags@4.0.1:
@@ -15173,41 +14711,29 @@ packages:
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
-  validate-npm-package-name@5.0.0:
-    resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==}
+  validate-npm-package-name@5.0.1:
+    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  vary@1.1.2:
-    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
-    engines: {node: '>= 0.8'}
-
-  vfile-location@3.2.0:
-    resolution: {integrity: sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==}
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
-  vfile-location@4.1.0:
-    resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
+  vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
-  vfile-message@2.0.4:
-    resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vfile-message@3.1.4:
-    resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
-
-  vfile@4.2.1:
-    resolution: {integrity: sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==}
-
-  vfile@5.3.7:
-    resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
-
-  vite@4.5.3:
-    resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  vite@5.4.11:
+    resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': '>= 14'
+      '@types/node': ^18.0.0 || >=20.0.0
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
+      sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
       terser: ^5.4.0
@@ -15220,6 +14746,8 @@ packages:
         optional: true
       sass:
         optional: true
+      sass-embedded:
+        optional: true
       stylus:
         optional: true
       sugarss:
@@ -15227,15 +14755,6 @@ packages:
       terser:
         optional: true
 
-  vlq@1.0.1:
-    resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
-
-  vscode-oniguruma@1.7.0:
-    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
-
-  vscode-textmate@8.0.0:
-    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
-
   vue-eslint-parser@2.0.3:
     resolution: {integrity: sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==}
     engines: {node: '>=4'}
@@ -15248,26 +14767,21 @@ packages:
     peerDependencies:
       eslint: '>=5.0.0'
 
-  w3c-hr-time@1.0.2:
-    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
-    deprecated: Use your platform's native performance.now() and performance.timeOrigin.
-
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
-  w3c-xmlserializer@3.0.0:
-    resolution: {integrity: sha512-3WFqGEgSXIyGhOmAFtlicJNMjEps8b1MG31NCA0/vOF9+nKMUW1ckhi9cnNHmf88Rzw5V+dwIwsm2C7X8k9aQg==}
-    engines: {node: '>=12'}
+  w3c-xmlserializer@4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+
+  walk-up-path@3.0.1:
+    resolution: {integrity: sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==}
 
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
-  watchpack@2.4.0:
-    resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
-    engines: {node: '>=10.13.0'}
-
-  watchpack@2.4.1:
-    resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==}
+  watchpack@2.4.2:
+    resolution: {integrity: sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==}
     engines: {node: '>=10.13.0'}
 
   wcwidth@1.0.1:
@@ -15276,9 +14790,6 @@ packages:
   weak-lru-cache@1.2.2:
     resolution: {integrity: sha512-DEAoo25RfSYMuTGc9vPJzZcZullwIqRDSI9LOy+fkCJPi6hykCnfKaXTuPBDuXAUcqHXyOgFtHNp/kB2FjYHbw==}
 
-  web-namespaces@1.1.4:
-    resolution: {integrity: sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==}
-
   web-namespaces@2.0.1:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
 
@@ -15289,9 +14800,6 @@ packages:
   web-vitals@4.2.4:
     resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
 
-  webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
@@ -15299,13 +14807,13 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
-  webpack-bundle-analyzer@4.10.2:
-    resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==}
+  webpack-bundle-analyzer@4.10.1:
+    resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==}
     engines: {node: '>= 10.13.0'}
     hasBin: true
 
-  webpack-bundle-analyzer@4.7.0:
-    resolution: {integrity: sha512-j9b8ynpJS4K+zfO5GGwsAcQX4ZHpWV+yRiHDiL+bE0XHJ8NiPYLTNVQdlFYWxtpg9lfAQNlwJg16J9AJtFSXRg==}
+  webpack-bundle-analyzer@4.10.2:
+    resolution: {integrity: sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==}
     engines: {node: '>= 10.13.0'}
     hasBin: true
 
@@ -15324,11 +14832,11 @@ packages:
     resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
     engines: {node: '>=10.13.0'}
 
-  webpack-virtual-modules@0.6.1:
-    resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.91.0:
-    resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==}
+  webpack@5.96.1:
+    resolution: {integrity: sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -15345,25 +14853,18 @@ packages:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
-  whatwg-url@10.0.0:
-    resolution: {integrity: sha512-CLxxCmdUby142H5FZzn4D8ikO1cmypvXVQktsgosNy4a4BHrDHeciBBGZhb0bNoR5/MltoCatso+vFjjGx8t0w==}
-    engines: {node: '>=12'}
-
   whatwg-url@11.0.0:
     resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
     engines: {node: '>=12'}
 
-  whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
-  which-builtin-type@1.1.3:
-    resolution: {integrity: sha512-YmjsSMDBYsM1CaFiayOVT06+KJeXf0o5M/CAd4o1lTadFAtacTUM49zoYxr/oroopFDfhvN6iEcBxUyc3gvKmw==}
+  which-builtin-type@1.1.4:
+    resolution: {integrity: sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==}
     engines: {node: '>= 0.4'}
 
   which-collection@1.0.2:
@@ -15373,10 +14874,6 @@ packages:
   which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
 
-  which-pm@2.0.0:
-    resolution: {integrity: sha512-Lhs9Pmyph0p5n5Z3mVnN0yWcbQYUAD7rbQUiMsQxOJ3T57k7RFe35SUwWMf7dsbDZks1uOmw4AecB/JMDj3v/w==}
-    engines: {node: '>=8.15'}
-
   which-typed-array@1.1.15:
     resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==}
     engines: {node: '>= 0.4'}
@@ -15445,19 +14942,8 @@ packages:
     resolution: {integrity: sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==}
     engines: {node: '>=4'}
 
-  ws@6.2.2:
-    resolution: {integrity: sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: ^5.0.2
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
-  ws@7.5.9:
-    resolution: {integrity: sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==}
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
     engines: {node: '>=8.3.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -15468,8 +14954,8 @@ packages:
       utf-8-validate:
         optional: true
 
-  ws@8.16.0:
-    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -15505,9 +14991,6 @@ packages:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
 
-  yallist@2.1.2:
-    resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
@@ -15522,18 +15005,14 @@ packages:
     resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
     engines: {node: '>= 14'}
 
-  yaml@2.4.1:
-    resolution: {integrity: sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==}
+  yaml@2.6.1:
+    resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
     engines: {node: '>= 14'}
     hasBin: true
 
   yargs-parser@13.1.2:
     resolution: {integrity: sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==}
 
-  yargs-parser@18.1.3:
-    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
-    engines: {node: '>=6'}
-
   yargs-parser@20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
@@ -15545,17 +15024,10 @@ packages:
   yargs@13.3.2:
     resolution: {integrity: sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==}
 
-  yargs@15.4.1:
-    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
-    engines: {node: '>=8'}
-
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
-
   yn@3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
@@ -15564,23 +15036,21 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.0.0:
-    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+  yocto-queue@1.1.1:
+    resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
     engines: {node: '>=12.20'}
 
-  zod@3.21.4:
-    resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
-
-  zod@3.22.4:
-    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+  zod@3.23.8:
+    resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
-  zustand@4.5.2:
-    resolution: {integrity: sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==}
-    engines: {node: '>=12.7.0'}
+  zustand@5.0.1:
+    resolution: {integrity: sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==}
+    engines: {node: '>=12.20.0'}
     peerDependencies:
-      '@types/react': '>=16.8'
+      '@types/react': '>=18.0.0'
       immer: '>=9.0.6'
-      react: ^18.2.0
+      react: 18.2.0
+      use-sync-external-store: '>=1.2.0'
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -15588,91 +15058,91 @@ packages:
         optional: true
       react:
         optional: true
+      use-sync-external-store:
+        optional: true
 
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
 snapshots:
 
-  '@aashutoshrathi/word-wrap@1.2.6': {}
-
-  '@adobe/css-tools@4.3.3': {}
+  '@adobe/css-tools@4.4.1': {}
 
-  '@algolia/cache-browser-local-storage@4.23.3':
+  '@algolia/cache-browser-local-storage@4.24.0':
     dependencies:
-      '@algolia/cache-common': 4.23.3
+      '@algolia/cache-common': 4.24.0
 
-  '@algolia/cache-common@4.23.3': {}
+  '@algolia/cache-common@4.24.0': {}
 
-  '@algolia/cache-in-memory@4.23.3':
+  '@algolia/cache-in-memory@4.24.0':
     dependencies:
-      '@algolia/cache-common': 4.23.3
+      '@algolia/cache-common': 4.24.0
 
-  '@algolia/client-account@4.23.3':
+  '@algolia/client-account@4.24.0':
     dependencies:
-      '@algolia/client-common': 4.23.3
-      '@algolia/client-search': 4.23.3
-      '@algolia/transporter': 4.23.3
+      '@algolia/client-common': 4.24.0
+      '@algolia/client-search': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/client-analytics@4.23.3':
+  '@algolia/client-analytics@4.24.0':
     dependencies:
-      '@algolia/client-common': 4.23.3
-      '@algolia/client-search': 4.23.3
-      '@algolia/requester-common': 4.23.3
-      '@algolia/transporter': 4.23.3
+      '@algolia/client-common': 4.24.0
+      '@algolia/client-search': 4.24.0
+      '@algolia/requester-common': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/client-common@4.23.3':
+  '@algolia/client-common@4.24.0':
     dependencies:
-      '@algolia/requester-common': 4.23.3
-      '@algolia/transporter': 4.23.3
+      '@algolia/requester-common': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/client-personalization@4.23.3':
+  '@algolia/client-personalization@4.24.0':
     dependencies:
-      '@algolia/client-common': 4.23.3
-      '@algolia/requester-common': 4.23.3
-      '@algolia/transporter': 4.23.3
+      '@algolia/client-common': 4.24.0
+      '@algolia/requester-common': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/client-search@4.23.3':
+  '@algolia/client-search@4.24.0':
     dependencies:
-      '@algolia/client-common': 4.23.3
-      '@algolia/requester-common': 4.23.3
-      '@algolia/transporter': 4.23.3
+      '@algolia/client-common': 4.24.0
+      '@algolia/requester-common': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/logger-common@4.23.3': {}
+  '@algolia/logger-common@4.24.0': {}
 
-  '@algolia/logger-console@4.23.3':
+  '@algolia/logger-console@4.24.0':
     dependencies:
-      '@algolia/logger-common': 4.23.3
+      '@algolia/logger-common': 4.24.0
 
-  '@algolia/recommend@4.23.3':
+  '@algolia/recommend@4.24.0':
     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
+      '@algolia/cache-browser-local-storage': 4.24.0
+      '@algolia/cache-common': 4.24.0
+      '@algolia/cache-in-memory': 4.24.0
+      '@algolia/client-common': 4.24.0
+      '@algolia/client-search': 4.24.0
+      '@algolia/logger-common': 4.24.0
+      '@algolia/logger-console': 4.24.0
+      '@algolia/requester-browser-xhr': 4.24.0
+      '@algolia/requester-common': 4.24.0
+      '@algolia/requester-node-http': 4.24.0
+      '@algolia/transporter': 4.24.0
 
-  '@algolia/requester-browser-xhr@4.23.3':
+  '@algolia/requester-browser-xhr@4.24.0':
     dependencies:
-      '@algolia/requester-common': 4.23.3
+      '@algolia/requester-common': 4.24.0
 
-  '@algolia/requester-common@4.23.3': {}
+  '@algolia/requester-common@4.24.0': {}
 
-  '@algolia/requester-node-http@4.23.3':
+  '@algolia/requester-node-http@4.24.0':
     dependencies:
-      '@algolia/requester-common': 4.23.3
+      '@algolia/requester-common': 4.24.0
 
-  '@algolia/transporter@4.23.3':
+  '@algolia/transporter@4.24.0':
     dependencies:
-      '@algolia/cache-common': 4.23.3
-      '@algolia/logger-common': 4.23.3
-      '@algolia/requester-common': 4.23.3
+      '@algolia/cache-common': 4.24.0
+      '@algolia/logger-common': 4.24.0
+      '@algolia/requester-common': 4.24.0
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -15681,15 +15151,11 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@aw-web-design/x-default-browser@1.4.126':
+  '@babel/cli@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      default-browser-id: 3.0.0
-
-  '@babel/cli@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
       '@jridgewell/trace-mapping': 0.3.25
-      commander: 4.1.1
+      commander: 6.2.1
       convert-source-map: 2.0.0
       fs-readdir-recursive: 1.1.0
       glob: 7.2.3
@@ -15701,890 +15167,925 @@ snapshots:
 
   '@babel/code-frame@7.12.11':
     dependencies:
-      '@babel/highlight': 7.24.2
+      '@babel/highlight': 7.25.9
 
-  '@babel/code-frame@7.24.2':
+  '@babel/code-frame@7.26.2':
     dependencies:
-      '@babel/highlight': 7.24.2
-      picocolors: 1.0.0
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@babel/compat-data@7.24.4': {}
+  '@babel/compat-data@7.26.2': {}
 
-  '@babel/core@7.24.4':
+  '@babel/core@7.26.0':
     dependencies:
       '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4)
-      '@babel/helpers': 7.24.4
-      '@babel/parser': 7.24.4
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helpers': 7.26.0
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       convert-source-map: 2.0.0
-      debug: 4.3.4
+      debug: 4.3.7
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.24.4':
+  '@babel/generator@7.26.2':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 2.5.2
+      jsesc: 3.0.2
 
-  '@babel/helper-annotate-as-pure@7.22.5':
+  '@babel/helper-annotate-as-pure@7.25.9':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.26.0
 
-  '@babel/helper-builder-binary-assignment-operator-visitor@7.22.15':
+  '@babel/helper-builder-binary-assignment-operator-visitor@7.25.9':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-compilation-targets@7.23.6':
+  '@babel/helper-compilation-targets@7.25.9':
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/helper-validator-option': 7.23.5
-      browserslist: 4.23.0
+      '@babel/compat-data': 7.26.2
+      '@babel/helper-validator-option': 7.25.9
+      browserslist: 4.24.2
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.24.4(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@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.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
+  '@babel/helper-create-class-features-plugin@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/traverse': 7.25.9
       semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.4)':
+  '@babel/helper-create-regexp-features-plugin@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      regexpu-core: 5.3.2
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      regexpu-core: 6.1.1
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.1.5(@babel/core@7.24.4)':
+  '@babel/helper-define-polyfill-provider@0.1.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/traverse': 7.24.1
-      debug: 4.3.4
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/traverse': 7.25.9
+      debug: 4.3.7
       lodash.debounce: 4.0.8
       resolve: 1.22.8
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.4)':
+  '@babel/helper-define-polyfill-provider@0.6.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      debug: 4.3.4
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      debug: 4.3.7
       lodash.debounce: 4.0.8
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-environment-visitor@7.22.20': {}
+  '@babel/helper-member-expression-to-functions@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.25.9':
+    dependencies:
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-function-name@7.23.0':
+  '@babel/helper-module-transforms@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-hoist-variables@7.22.5':
+  '@babel/helper-optimise-call-expression@7.25.9':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.26.0
 
-  '@babel/helper-member-expression-to-functions@7.23.0':
+  '@babel/helper-plugin-utils@7.25.9': {}
+
+  '@babel/helper-remap-async-to-generator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-wrap-function': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-module-imports@7.24.3':
+  '@babel/helper-replace-supers@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-member-expression-to-functions': 7.25.9
+      '@babel/helper-optimise-call-expression': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-module-transforms@7.23.3(@babel/core@7.24.4)':
+  '@babel/helper-simple-access@7.25.9':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-simple-access': 7.22.5
-      '@babel/helper-split-export-declaration': 7.22.6
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-optimise-call-expression@7.22.5':
+  '@babel/helper-skip-transparent-expression-wrappers@7.25.9':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.25.9': {}
 
-  '@babel/helper-plugin-utils@7.24.0': {}
+  '@babel/helper-validator-identifier@7.25.9': {}
 
-  '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.4)':
+  '@babel/helper-validator-option@7.25.9': {}
+
+  '@babel/helper-wrap-function@7.25.9':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-wrap-function': 7.22.20
+      '@babel/template': 7.25.9
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-replace-supers@7.24.1(@babel/core@7.24.4)':
+  '@babel/helpers@7.26.0':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-member-expression-to-functions': 7.23.0
-      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
 
-  '@babel/helper-simple-access@7.22.5':
+  '@babel/highlight@7.25.9':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/helper-validator-identifier': 7.25.9
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.22.5':
+  '@babel/parser@7.26.2':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.26.0
 
-  '@babel/helper-split-export-declaration@7.22.6':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-string-parser@7.24.1': {}
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/helper-validator-identifier@7.22.20': {}
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/helper-validator-option@7.23.5': {}
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helper-wrap-function@7.22.20':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/helper-function-name': 7.23.0
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/helpers@7.24.4':
+  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.26.0)':
     dependencies:
-      '@babel/template': 7.24.0
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/highlight@7.24.2':
+  '@babel/plugin-proposal-export-default-from@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/helper-validator-identifier': 7.22.20
-      chalk: 2.4.2
-      js-tokens: 4.0.0
-      picocolors: 1.0.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/parser@7.24.4':
+  '@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.26.0)
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.4)':
+  '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/compat-data': 7.26.2
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.0)
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-proposal-export-default-from@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-export-default-from': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-proposal-object-rest-spread@7.20.7(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-flow@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-import-assertions@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-import-attributes@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-jsx@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-export-default-from@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-typescript@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.4)':
+  '@babel/plugin-transform-arrow-functions@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-transform-async-generator-functions@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.0)
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-transform-async-to-generator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-remap-async-to-generator': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.4)':
+  '@babel/plugin-transform-block-scoped-functions@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.4)':
+  '@babel/plugin-transform-block-scoping@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.4)':
+  '@babel/plugin-transform-class-properties@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-class-static-block@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.4)':
+  '@babel/plugin-transform-classes@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.26.0)
+      '@babel/traverse': 7.25.9
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/template': 7.25.9
 
-  '@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.4)':
+  '@babel/plugin-transform-destructuring@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-dotall-regex@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.24.4)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.4)':
+  '@babel/plugin-transform-exponentiation-operator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-builder-binary-assignment-operator-visitor': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-environment-visitor': 7.22.20
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4)
-      '@babel/helper-split-export-declaration': 7.22.6
-      globals: 11.12.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-flow-strip-types@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/template': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-flow': 7.26.0(@babel/core@7.26.0)
 
-  '@babel/plugin-transform-destructuring@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-for-of@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-function-name@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-json-strings@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-literals@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-logical-assignment-operators@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-member-expression-literals@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-modules-amd@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-modules-commonjs@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/core': 7.26.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-simple-access': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-modules-systemjs@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-function-name': 7.23.0
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+      '@babel/traverse': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-modules-umd@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-new-target@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-object-rest-spread@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-simple-access': 7.22.5
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.0)
 
-  '@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-object-super@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-hoist-variables': 7.22.5
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-identifier': 7.22.20
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-replace-supers': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-optional-catch-binding@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.4)':
+  '@babel/plugin-transform-optional-chaining@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-parameters@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-display-name@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-jsx-development@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-jsx-self@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-jsx-source@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-jsx@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-react-pure-annotations@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-regenerator@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      regenerator-transform: 0.15.2
 
-  '@babel/plugin-transform-react-display-name@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-regexp-modifiers@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.4)':
+  '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-runtime@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.0)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.0)
+      babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.0)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-shorthand-properties@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-react-jsx@7.23.4(@babel/core@7.24.4)':
+  '@babel/plugin-transform-spread@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4)
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-react-pure-annotations@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-template-literals@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      regenerator-transform: 0.15.2
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.4)':
+  '@babel/plugin-transform-typeof-symbol@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
 
-  '@babel/plugin-transform-runtime@7.24.3(@babel/core@7.24.4)':
+  '@babel/plugin-transform-typescript@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-module-imports': 7.24.3
-      '@babel/helper-plugin-utils': 7.24.0
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.4)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.4)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.4)
-      semver: 6.3.1
+      '@babel/core': 7.26.0
+      '@babel/helper-annotate-as-pure': 7.25.9
+      '@babel/helper-create-class-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-skip-transparent-expression-wrappers': 7.25.9
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
-
-  '@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-typescript@7.24.4(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-annotate-as-pure': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4)
-
-  '@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4)
-      '@babel/helper-plugin-utils': 7.24.0
-
-  '@babel/preset-env@7.24.4(@babel/core@7.24.4)':
-    dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.4
-      '@babel/helper-compilation-targets': 7.23.6
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.24.4)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.4)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.4)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.4)
-      '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.4)
-      '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.24.4)
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.24.4)
-      '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.4)
-      '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.4)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.4)
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.4)
-      babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.4)
-      babel-plugin-polyfill-regenerator: 0.6.1(@babel/core@7.24.4)
-      core-js-compat: 3.36.1
+  '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/plugin-transform-unicode-regex@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/helper-create-regexp-features-plugin': 7.25.9(@babel/core@7.26.0)
+      '@babel/helper-plugin-utils': 7.25.9
+
+  '@babel/preset-env@7.26.0(@babel/core@7.26.0)':
+    dependencies:
+      '@babel/compat-data': 7.26.2
+      '@babel/core': 7.26.0
+      '@babel/helper-compilation-targets': 7.25.9
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-assertions': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.26.0)
+      '@babel/plugin-transform-arrow-functions': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-async-generator-functions': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-async-to-generator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-block-scoped-functions': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-block-scoping': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-class-static-block': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-transform-classes': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-destructuring': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-dotall-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-exponentiation-operator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-for-of': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-function-name': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-json-strings': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-logical-assignment-operators': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-member-expression-literals': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-amd': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-systemjs': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-umd': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-new-target': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-object-rest-spread': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-object-super': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-parameters': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-regenerator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-regexp-modifiers': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-shorthand-properties': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-template-literals': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-typeof-symbol': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-unicode-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.26.0)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.26.0)
+      babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.0)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.0)
+      babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.0)
+      core-js-compat: 3.39.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-flow@7.24.1(@babel/core@7.24.4)':
+  '@babel/preset-flow@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-transform-flow-strip-types': 7.25.9(@babel/core@7.26.0)
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.4)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/types': 7.26.0
       esutils: 2.0.3
 
-  '@babel/preset-react@7.24.1(@babel/core@7.24.4)':
+  '@babel/preset-react@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-transform-react-display-name': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-react-jsx': 7.23.4(@babel/core@7.24.4)
-      '@babel/plugin-transform-react-jsx-development': 7.22.5(@babel/core@7.24.4)
-      '@babel/plugin-transform-react-pure-annotations': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-transform-react-display-name': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-react-jsx-development': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-react-pure-annotations': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/preset-typescript@7.24.1(@babel/core@7.24.4)':
+  '@babel/preset-typescript@7.26.0(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-plugin-utils': 7.24.0
-      '@babel/helper-validator-option': 7.23.5
-      '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-plugin-utils': 7.25.9
+      '@babel/helper-validator-option': 7.25.9
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-typescript': 7.25.9(@babel/core@7.26.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/register@7.23.7(@babel/core@7.24.4)':
+  '@babel/register@7.25.9(@babel/core@7.26.0)':
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
       clone-deep: 4.0.1
       find-cache-dir: 2.1.0
       make-dir: 2.1.0
       pirates: 4.0.6
       source-map-support: 0.5.21
 
-  '@babel/regjsgen@0.8.0': {}
-
-  '@babel/runtime@7.24.4':
+  '@babel/runtime@7.26.0':
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.24.0':
+  '@babel/template@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.24.0
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
 
-  '@babel/traverse@7.24.1':
+  '@babel/traverse@7.25.9':
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/generator': 7.24.4
-      '@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.22.6
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.24.0
-      debug: 4.3.4
+      '@babel/code-frame': 7.26.2
+      '@babel/generator': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
+      debug: 4.3.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.24.0':
+  '@babel/types@7.26.0':
     dependencies:
-      '@babel/helper-string-parser': 7.24.1
-      '@babel/helper-validator-identifier': 7.22.20
-      to-fast-properties: 2.0.0
-
-  '@base2/pretty-print-object@1.0.1': {}
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
 
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@changesets/apply-release-plan@6.1.4':
+  '@changesets/apply-release-plan@7.0.6':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/config': 2.3.1
-      '@changesets/get-version-range-type': 0.3.2
-      '@changesets/git': 2.0.0
-      '@changesets/types': 5.2.1
+      '@changesets/config': 3.0.4
+      '@changesets/get-version-range-type': 0.4.0
+      '@changesets/git': 3.0.2
+      '@changesets/should-skip-package': 0.1.1
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       detect-indent: 6.1.0
       fs-extra: 7.0.1
@@ -16592,231 +16093,209 @@ snapshots:
       outdent: 0.5.0
       prettier: 2.8.8
       resolve-from: 5.0.0
-      semver: 7.6.0
+      semver: 7.6.3
 
-  '@changesets/assemble-release-plan@5.2.4':
+  '@changesets/assemble-release-plan@6.0.5':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/should-skip-package': 0.1.1
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
-      semver: 7.6.0
+      semver: 7.6.3
 
-  '@changesets/changelog-git@0.1.14':
+  '@changesets/changelog-git@0.2.0':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
 
-  '@changesets/changelog-github@0.4.6(encoding@0.1.13)':
+  '@changesets/changelog-github@0.5.0':
     dependencies:
-      '@changesets/get-github-info': 0.5.2(encoding@0.1.13)
-      '@changesets/types': 5.1.0
+      '@changesets/get-github-info': 0.6.0
+      '@changesets/types': 6.0.0
       dotenv: 8.6.0
-    transitivePeerDependencies:
-      - encoding
-
-  '@changesets/cli@2.24.1':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/apply-release-plan': 6.1.4
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/changelog-git': 0.1.14
-      '@changesets/config': 2.3.1
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/get-release-plan': 3.0.12
-      '@changesets/git': 1.5.0
-      '@changesets/logger': 0.0.5
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.1.0
-      '@changesets/write': 0.1.9
+
+  '@changesets/cli@2.27.10':
+    dependencies:
+      '@changesets/apply-release-plan': 7.0.6
+      '@changesets/assemble-release-plan': 6.0.5
+      '@changesets/changelog-git': 0.2.0
+      '@changesets/config': 3.0.4
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/get-release-plan': 4.0.5
+      '@changesets/git': 3.0.2
+      '@changesets/logger': 0.1.1
+      '@changesets/pre': 2.0.1
+      '@changesets/read': 0.6.2
+      '@changesets/should-skip-package': 0.1.1
+      '@changesets/types': 6.0.0
+      '@changesets/write': 0.3.2
       '@manypkg/get-packages': 1.1.3
-      '@types/is-ci': 3.0.4
-      '@types/semver': 6.2.7
       ansi-colors: 4.1.3
-      chalk: 2.4.2
+      ci-info: 3.9.0
       enquirer: 2.4.1
       external-editor: 3.1.0
       fs-extra: 7.0.1
-      human-id: 1.0.2
-      is-ci: 3.0.1
-      meow: 6.1.1
-      outdent: 0.5.0
+      mri: 1.2.0
       p-limit: 2.3.0
-      preferred-pm: 3.1.3
+      package-manager-detector: 0.2.6
+      picocolors: 1.1.1
       resolve-from: 5.0.0
-      semver: 5.7.2
-      spawndamnit: 2.0.0
+      semver: 7.6.3
+      spawndamnit: 3.0.1
       term-size: 2.2.1
-      tty-table: 4.2.3
 
-  '@changesets/config@2.3.1':
+  '@changesets/config@3.0.4':
     dependencies:
-      '@changesets/errors': 0.1.4
-      '@changesets/get-dependents-graph': 1.3.6
-      '@changesets/logger': 0.0.5
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/get-dependents-graph': 2.1.2
+      '@changesets/logger': 0.1.1
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
-      micromatch: 4.0.5
+      micromatch: 4.0.8
 
-  '@changesets/errors@0.1.4':
+  '@changesets/errors@0.2.0':
     dependencies:
       extendable-error: 0.1.7
 
-  '@changesets/get-dependents-graph@1.3.6':
+  '@changesets/get-dependents-graph@2.1.2':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
-      chalk: 2.4.2
-      fs-extra: 7.0.1
-      semver: 7.6.0
+      picocolors: 1.1.1
+      semver: 7.6.3
 
-  '@changesets/get-github-info@0.5.2(encoding@0.1.13)':
+  '@changesets/get-github-info@0.6.0':
     dependencies:
       dataloader: 1.4.0
-      node-fetch: 2.7.0(encoding@0.1.13)
-    transitivePeerDependencies:
-      - encoding
+      node-fetch: 2.5.0
 
-  '@changesets/get-release-plan@3.0.12':
+  '@changesets/get-release-plan@4.0.5':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/assemble-release-plan': 5.2.4
-      '@changesets/config': 2.3.1
-      '@changesets/pre': 1.0.14
-      '@changesets/read': 0.5.9
-      '@changesets/types': 5.1.0
+      '@changesets/assemble-release-plan': 6.0.5
+      '@changesets/config': 3.0.4
+      '@changesets/pre': 2.0.1
+      '@changesets/read': 0.6.2
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
 
-  '@changesets/get-version-range-type@0.3.2': {}
-
-  '@changesets/git@1.5.0':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
-      '@manypkg/get-packages': 1.1.3
-      is-subdir: 1.2.0
-      spawndamnit: 2.0.0
+  '@changesets/get-version-range-type@0.4.0': {}
 
-  '@changesets/git@2.0.0':
+  '@changesets/git@3.0.2':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
       '@manypkg/get-packages': 1.1.3
       is-subdir: 1.2.0
-      micromatch: 4.0.5
-      spawndamnit: 2.0.0
+      micromatch: 4.0.8
+      spawndamnit: 3.0.1
 
-  '@changesets/logger@0.0.5':
+  '@changesets/logger@0.1.1':
     dependencies:
-      chalk: 2.4.2
+      picocolors: 1.1.1
 
-  '@changesets/parse@0.3.16':
+  '@changesets/parse@0.4.0':
     dependencies:
-      '@changesets/types': 5.2.1
+      '@changesets/types': 6.0.0
       js-yaml: 3.14.1
 
-  '@changesets/pre@1.0.14':
+  '@changesets/pre@2.0.1':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/errors': 0.1.4
-      '@changesets/types': 5.2.1
+      '@changesets/errors': 0.2.0
+      '@changesets/types': 6.0.0
       '@manypkg/get-packages': 1.1.3
       fs-extra: 7.0.1
 
-  '@changesets/read@0.5.9':
+  '@changesets/read@0.6.2':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/git': 2.0.0
-      '@changesets/logger': 0.0.5
-      '@changesets/parse': 0.3.16
-      '@changesets/types': 5.2.1
-      chalk: 2.4.2
+      '@changesets/git': 3.0.2
+      '@changesets/logger': 0.1.1
+      '@changesets/parse': 0.4.0
+      '@changesets/types': 6.0.0
       fs-extra: 7.0.1
       p-filter: 2.1.0
+      picocolors: 1.1.1
 
-  '@changesets/types@4.1.0': {}
+  '@changesets/should-skip-package@0.1.1':
+    dependencies:
+      '@changesets/types': 6.0.0
+      '@manypkg/get-packages': 1.1.3
 
-  '@changesets/types@5.1.0': {}
+  '@changesets/types@4.1.0': {}
 
-  '@changesets/types@5.2.1': {}
+  '@changesets/types@6.0.0': {}
 
-  '@changesets/write@0.1.9':
+  '@changesets/write@0.3.2':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@changesets/types': 5.1.0
+      '@changesets/types': 6.0.0
       fs-extra: 7.0.1
       human-id: 1.0.2
-      prettier: 1.19.1
+      prettier: 2.8.8
 
-  '@codemirror/autocomplete@6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)':
+  '@codemirror/autocomplete@6.18.3(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.0)(@lezer/common@1.2.3)':
     dependencies:
-      '@codemirror/language': 6.10.1
+      '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@lezer/common': 1.2.1
+      '@codemirror/view': 6.35.0
+      '@lezer/common': 1.2.3
 
-  '@codemirror/commands@6.3.3':
+  '@codemirror/commands@6.7.1':
     dependencies:
-      '@codemirror/language': 6.10.1
+      '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@lezer/common': 1.2.1
+      '@codemirror/view': 6.35.0
+      '@lezer/common': 1.2.3
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.26.3)':
+  '@codemirror/lang-css@6.3.0(@codemirror/view@6.35.0)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
-      '@codemirror/language': 6.10.1
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.0)(@lezer/common@1.2.3)
+      '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@lezer/common': 1.2.1
-      '@lezer/css': 1.1.8
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.9
     transitivePeerDependencies:
       - '@codemirror/view'
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.26.3)
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.0)(@lezer/common@1.2.3)
+      '@codemirror/lang-css': 6.3.0(@codemirror/view@6.35.0)
       '@codemirror/lang-javascript': 6.2.2
-      '@codemirror/language': 6.10.1
+      '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@lezer/common': 1.2.1
-      '@lezer/css': 1.1.8
-      '@lezer/html': 1.3.9
+      '@codemirror/view': 6.35.0
+      '@lezer/common': 1.2.3
+      '@lezer/css': 1.1.9
+      '@lezer/html': 1.3.10
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
-      '@codemirror/language': 6.10.1
-      '@codemirror/lint': 6.5.0
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.0)(@lezer/common@1.2.3)
+      '@codemirror/language': 6.10.3
+      '@codemirror/lint': 6.8.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@lezer/common': 1.2.1
-      '@lezer/javascript': 1.4.14
+      '@codemirror/view': 6.35.0
+      '@lezer/common': 1.2.3
+      '@lezer/javascript': 1.4.19
 
-  '@codemirror/language@6.10.1':
+  '@codemirror/language@6.10.3':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
-      '@lezer/lr': 1.4.0
+      '@codemirror/view': 6.35.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
       style-mod: 4.1.2
 
-  '@codemirror/lint@6.5.0':
+  '@codemirror/lint@6.8.3':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
+      '@codemirror/view': 6.35.0
       crelt: 1.0.6
 
   '@codemirror/state@6.4.1': {}
 
-  '@codemirror/view@6.26.3':
+  '@codemirror/view@6.35.0':
     dependencies:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
@@ -16827,29 +16306,30 @@ snapshots:
       outvariant: 1.4.0
       strict-event-emitter: 0.4.6
 
-  '@codesandbox/sandpack-client@2.13.8':
+  '@codesandbox/sandpack-client@2.19.8':
     dependencies:
       '@codesandbox/nodebox': 0.1.8
       buffer: 6.0.3
       dequal: 2.0.3
+      mime-db: 1.53.0
       outvariant: 1.4.0
       static-browser-server: 1.0.3
 
-  '@codesandbox/sandpack-react@2.13.8(@lezer/common@1.2.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@codesandbox/sandpack-react@2.19.9(@lezer/common@1.2.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@codemirror/autocomplete': 6.16.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.1)(@codemirror/view@6.26.3)(@lezer/common@1.2.1)
-      '@codemirror/commands': 6.3.3
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.26.3)
+      '@codemirror/autocomplete': 6.18.3(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.35.0)(@lezer/common@1.2.3)
+      '@codemirror/commands': 6.7.1
+      '@codemirror/lang-css': 6.3.0(@codemirror/view@6.35.0)
       '@codemirror/lang-html': 6.4.9
       '@codemirror/lang-javascript': 6.2.2
-      '@codemirror/language': 6.10.1
+      '@codemirror/language': 6.10.3
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.26.3
-      '@codesandbox/sandpack-client': 2.13.8
-      '@lezer/highlight': 1.2.0
-      '@react-hook/intersection-observer': 3.1.1(react@18.2.0)
+      '@codemirror/view': 6.35.0
+      '@codesandbox/sandpack-client': 2.19.8
+      '@lezer/highlight': 1.2.1
+      '@react-hook/intersection-observer': 3.1.2(react@18.2.0)
       '@stitches/core': 1.2.8
-      anser: 2.1.1
+      anser: 2.3.0
       clean-set: 1.1.2
       dequal: 2.0.3
       escape-carriage: 1.3.1
@@ -16864,11 +16344,11 @@ snapshots:
   '@colors/colors@1.5.0':
     optional: true
 
-  '@commitlint/cli@17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))':
+  '@commitlint/cli@17.8.1(@swc/core@1.9.2(@swc/helpers@0.5.15))':
     dependencies:
       '@commitlint/format': 17.8.1
       '@commitlint/lint': 17.8.1
-      '@commitlint/load': 17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))
+      '@commitlint/load': 17.8.1(@swc/core@1.9.2(@swc/helpers@0.5.15))
       '@commitlint/read': 17.8.1
       '@commitlint/types': 17.8.1
       execa: 5.1.1
@@ -16887,7 +16367,7 @@ snapshots:
   '@commitlint/config-validator@17.8.1':
     dependencies:
       '@commitlint/types': 17.8.1
-      ajv: 8.12.0
+      ajv: 8.17.1
 
   '@commitlint/ensure@17.8.1':
     dependencies:
@@ -16917,7 +16397,7 @@ snapshots:
       '@commitlint/rules': 17.8.1
       '@commitlint/types': 17.8.1
 
-  '@commitlint/load@17.8.1(@swc/core@1.4.13(@swc/helpers@0.5.9))':
+  '@commitlint/load@17.8.1(@swc/core@1.9.2(@swc/helpers@0.5.15))':
     dependencies:
       '@commitlint/config-validator': 17.8.1
       '@commitlint/execute-rule': 17.8.1
@@ -16926,12 +16406,12 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@4.9.5)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
       typescript: 4.9.5
     transitivePeerDependencies:
       - '@swc/core'
@@ -16980,98 +16460,102 @@ snapshots:
     dependencies:
       chalk: 4.1.2
 
-  '@contentlayer/cli@0.3.4(esbuild@0.20.2)':
+  '@contentlayer2/cli@0.5.3(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/utils': 0.3.4
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/utils': 0.5.3
       clipanion: 3.2.1(typanion@3.14.0)
       typanion: 3.14.0
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer/client@0.3.4(esbuild@0.20.2)':
+  '@contentlayer2/client@0.5.3(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer/core@0.3.4(esbuild@0.20.2)':
+  '@contentlayer2/core@0.5.3(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@contentlayer/utils': 0.3.4
+      '@contentlayer2/utils': 0.5.3
       camel-case: 4.1.2
-      comment-json: 4.2.3
+      comment-json: 4.2.5
       gray-matter: 4.0.3
-      mdx-bundler: 9.2.1(esbuild@0.20.2)
-      rehype-stringify: 9.0.4
-      remark-frontmatter: 4.0.1
-      remark-parse: 10.0.2
-      remark-rehype: 10.1.0
+      mdx-bundler: 10.0.3(acorn@8.14.0)(esbuild@0.21.5)
+      rehype-stringify: 10.0.1
+      remark-frontmatter: 5.0.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
       source-map-support: 0.5.21
-      type-fest: 3.13.1
-      unified: 10.1.2
+      type-fest: 4.27.0
+      unified: 11.0.5
     optionalDependencies:
-      esbuild: 0.20.2
+      esbuild: 0.21.5
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - supports-color
 
-  '@contentlayer/source-files@0.3.4(esbuild@0.20.2)':
+  '@contentlayer2/source-files@0.5.3(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/utils': 0.3.4
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/utils': 0.5.3
       chokidar: 3.6.0
       fast-glob: 3.3.2
       gray-matter: 4.0.3
       imagescript: 1.3.0
-      micromatch: 4.0.5
-      ts-pattern: 4.3.0
-      unified: 10.1.2
-      yaml: 2.4.1
-      zod: 3.22.4
+      micromatch: 4.0.8
+      ts-pattern: 5.5.0
+      unified: 11.0.5
+      yaml: 2.6.1
+      zod: 3.23.8
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer/source-remote-files@0.3.4(esbuild@0.20.2)':
+  '@contentlayer2/source-remote-files@0.5.3(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/source-files': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/utils': 0.3.4
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/source-files': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/utils': 0.5.3
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  '@contentlayer/utils@0.3.4':
+  '@contentlayer2/utils@0.5.3':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
-      '@effect-ts/otel-exporter-trace-otlp-grpc': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/exporter-trace-otlp-grpc@0.39.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
-      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.23.0(@opentelemetry/api@1.8.0))
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))
+      '@effect-ts/otel-sdk-trace-node': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-node@1.28.0(@opentelemetry/api@1.9.0))
       '@js-temporal/polyfill': 0.4.4
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/exporter-trace-otlp-grpc': 0.39.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-node': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.23.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/exporter-trace-otlp-grpc': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-node': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.28.0
       chokidar: 3.6.0
-      hash-wasm: 4.11.0
-      inflection: 2.0.1
-      memfs: 3.5.3
-      oo-ascii-tree: 1.97.0
-      ts-pattern: 4.3.0
-      type-fest: 3.13.1
+      hash-wasm: 4.12.0
+      inflection: 3.0.0
+      memfs: 4.14.0
+      oo-ascii-tree: 1.105.0
+      ts-pattern: 5.5.0
+      type-fest: 4.27.0
 
   '@corex/deepmerge@4.0.43': {}
 
@@ -17081,12 +16565,12 @@ snapshots:
 
   '@discoveryjs/json-ext@0.5.7': {}
 
-  '@docusaurus/types@2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))':
+  '@docusaurus/types@2.0.0-beta.3(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))':
     dependencies:
       commander: 5.1.0
-      joi: 17.12.3
+      joi: 17.13.3
       querystring: 0.2.0
-      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
       webpack-merge: 5.10.0
     transitivePeerDependencies:
       - '@swc/core'
@@ -17094,9 +16578,9 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@docusaurus/utils@2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))':
+  '@docusaurus/utils@2.0.0-beta.3(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))':
     dependencies:
-      '@docusaurus/types': 2.0.0-beta.3(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
+      '@docusaurus/types': 2.0.0-beta.3(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
       '@types/github-slugger': 1.3.0
       chalk: 4.1.2
       escape-string-regexp: 4.0.0
@@ -17104,7 +16588,7 @@ snapshots:
       gray-matter: 4.0.3
       lodash: 4.17.21
       resolve-pathname: 3.0.0
-      tslib: 2.6.2
+      tslib: 2.8.1
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -17115,72 +16599,52 @@ snapshots:
     dependencies:
       '@effect-ts/system': 0.57.5
 
-  '@effect-ts/otel-exporter-trace-otlp-grpc@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/exporter-trace-otlp-grpc@0.39.1(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))':
+  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-node@1.28.0(@opentelemetry/api@1.9.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/exporter-trace-otlp-grpc': 0.39.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
+      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-node': 1.28.0(@opentelemetry/api@1.9.0)
 
-  '@effect-ts/otel-sdk-trace-node@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-node@1.23.0(@opentelemetry/api@1.8.0))':
+  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))':
     dependencies:
       '@effect-ts/core': 0.60.5
-      '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-node': 1.23.0(@opentelemetry/api@1.8.0)
-
-  '@effect-ts/otel@0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.8.0)(@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0))(@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0))':
-    dependencies:
-      '@effect-ts/core': 0.60.5
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
 
   '@effect-ts/system@0.57.5': {}
 
-  '@emnapi/core@1.1.1':
-    dependencies:
-      tslib: 2.6.2
-    optional: true
-
-  '@emnapi/runtime@1.1.1':
+  '@emnapi/runtime@1.3.1':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     optional: true
 
-  '@emotion/is-prop-valid@0.8.8':
+  '@emotion/is-prop-valid@1.3.1':
     dependencies:
-      '@emotion/memoize': 0.7.4
-    optional: true
-
-  '@emotion/memoize@0.7.4':
-    optional: true
+      '@emotion/memoize': 0.9.0
 
-  '@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0)':
-    dependencies:
-      react: 18.2.0
+  '@emotion/memoize@0.9.0': {}
 
-  '@esbuild-plugins/node-resolve@0.1.4(esbuild@0.20.2)':
+  '@esbuild-plugins/node-resolve@0.2.2(esbuild@0.21.5)':
     dependencies:
       '@types/resolve': 1.20.6
-      debug: 4.3.4
-      esbuild: 0.20.2
+      debug: 4.3.7
+      esbuild: 0.21.5
       escape-string-regexp: 4.0.0
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  '@esbuild/aix-ppc64@0.20.2':
+  '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
   '@esbuild/android-arm64@0.18.20':
     optional: true
 
-  '@esbuild/android-arm64@0.20.2':
+  '@esbuild/android-arm64@0.21.5':
     optional: true
 
   '@esbuild/android-arm@0.15.18':
@@ -17189,55 +16653,55 @@ snapshots:
   '@esbuild/android-arm@0.18.20':
     optional: true
 
-  '@esbuild/android-arm@0.20.2':
+  '@esbuild/android-arm@0.21.5':
     optional: true
 
   '@esbuild/android-x64@0.18.20':
     optional: true
 
-  '@esbuild/android-x64@0.20.2':
+  '@esbuild/android-x64@0.21.5':
     optional: true
 
   '@esbuild/darwin-arm64@0.18.20':
     optional: true
 
-  '@esbuild/darwin-arm64@0.20.2':
+  '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
   '@esbuild/darwin-x64@0.18.20':
     optional: true
 
-  '@esbuild/darwin-x64@0.20.2':
+  '@esbuild/darwin-x64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-arm64@0.18.20':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.20.2':
+  '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
   '@esbuild/freebsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/freebsd-x64@0.20.2':
+  '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
   '@esbuild/linux-arm64@0.18.20':
     optional: true
 
-  '@esbuild/linux-arm64@0.20.2':
+  '@esbuild/linux-arm64@0.21.5':
     optional: true
 
   '@esbuild/linux-arm@0.18.20':
     optional: true
 
-  '@esbuild/linux-arm@0.20.2':
+  '@esbuild/linux-arm@0.21.5':
     optional: true
 
   '@esbuild/linux-ia32@0.18.20':
     optional: true
 
-  '@esbuild/linux-ia32@0.20.2':
+  '@esbuild/linux-ia32@0.21.5':
     optional: true
 
   '@esbuild/linux-loong64@0.15.18':
@@ -17246,86 +16710,86 @@ snapshots:
   '@esbuild/linux-loong64@0.18.20':
     optional: true
 
-  '@esbuild/linux-loong64@0.20.2':
+  '@esbuild/linux-loong64@0.21.5':
     optional: true
 
   '@esbuild/linux-mips64el@0.18.20':
     optional: true
 
-  '@esbuild/linux-mips64el@0.20.2':
+  '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
   '@esbuild/linux-ppc64@0.18.20':
     optional: true
 
-  '@esbuild/linux-ppc64@0.20.2':
+  '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
   '@esbuild/linux-riscv64@0.18.20':
     optional: true
 
-  '@esbuild/linux-riscv64@0.20.2':
+  '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
   '@esbuild/linux-s390x@0.18.20':
     optional: true
 
-  '@esbuild/linux-s390x@0.20.2':
+  '@esbuild/linux-s390x@0.21.5':
     optional: true
 
   '@esbuild/linux-x64@0.18.20':
     optional: true
 
-  '@esbuild/linux-x64@0.20.2':
+  '@esbuild/linux-x64@0.21.5':
     optional: true
 
   '@esbuild/netbsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/netbsd-x64@0.20.2':
+  '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/openbsd-x64@0.18.20':
     optional: true
 
-  '@esbuild/openbsd-x64@0.20.2':
+  '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
   '@esbuild/sunos-x64@0.18.20':
     optional: true
 
-  '@esbuild/sunos-x64@0.20.2':
+  '@esbuild/sunos-x64@0.21.5':
     optional: true
 
   '@esbuild/win32-arm64@0.18.20':
     optional: true
 
-  '@esbuild/win32-arm64@0.20.2':
+  '@esbuild/win32-arm64@0.21.5':
     optional: true
 
   '@esbuild/win32-ia32@0.18.20':
     optional: true
 
-  '@esbuild/win32-ia32@0.20.2':
+  '@esbuild/win32-ia32@0.21.5':
     optional: true
 
   '@esbuild/win32-x64@0.18.20':
     optional: true
 
-  '@esbuild/win32-x64@0.20.2':
+  '@esbuild/win32-x64@0.21.5':
     optional: true
 
-  '@eslint-community/eslint-utils@4.4.0(eslint@7.32.0)':
+  '@eslint-community/eslint-utils@4.4.1(eslint@7.32.0)':
     dependencies:
       eslint: 7.32.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.10.0': {}
+  '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint/eslintrc@0.4.3':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4
+      debug: 4.3.7
       espree: 7.3.1
       globals: 13.24.0
       ignore: 4.0.6
@@ -17338,104 +16802,163 @@ snapshots:
 
   '@fal-works/esbuild-plugin-global-externals@2.1.2': {}
 
-  '@floating-ui/core@1.6.0':
+  '@formatjs/ecma402-abstract@2.2.4':
     dependencies:
-      '@floating-ui/utils': 0.2.1
+      '@formatjs/fast-memoize': 2.2.3
+      '@formatjs/intl-localematcher': 0.5.8
+      tslib: 2.8.1
 
-  '@floating-ui/dom@1.6.3':
+  '@formatjs/fast-memoize@2.2.3':
     dependencies:
-      '@floating-ui/core': 1.6.0
-      '@floating-ui/utils': 0.2.1
+      tslib: 2.8.1
 
-  '@floating-ui/react-dom@2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@formatjs/icu-messageformat-parser@2.9.4':
     dependencies:
-      '@floating-ui/dom': 1.6.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+      '@formatjs/ecma402-abstract': 2.2.4
+      '@formatjs/icu-skeleton-parser': 1.8.8
+      tslib: 2.8.1
 
-  '@floating-ui/utils@0.2.1': {}
+  '@formatjs/icu-skeleton-parser@1.8.8':
+    dependencies:
+      '@formatjs/ecma402-abstract': 2.2.4
+      tslib: 2.8.1
 
-  '@formatjs/ecma402-abstract@1.18.2':
+  '@formatjs/intl-localematcher@0.5.8':
     dependencies:
-      '@formatjs/intl-localematcher': 0.5.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  '@formatjs/fast-memoize@2.2.0':
+  '@gar/promisify@1.1.3': {}
+
+  '@grpc/grpc-js@1.12.2':
     dependencies:
-      tslib: 2.6.2
+      '@grpc/proto-loader': 0.7.13
+      '@js-sdsl/ordered-map': 4.4.2
 
-  '@formatjs/icu-messageformat-parser@2.7.6':
+  '@grpc/proto-loader@0.7.13':
     dependencies:
-      '@formatjs/ecma402-abstract': 1.18.2
-      '@formatjs/icu-skeleton-parser': 1.8.0
-      tslib: 2.6.2
+      lodash.camelcase: 4.3.0
+      long: 5.2.3
+      protobufjs: 7.4.0
+      yargs: 17.7.2
+
+  '@hapi/hoek@9.3.0': {}
 
-  '@formatjs/icu-skeleton-parser@1.8.0':
+  '@hapi/topo@5.1.0':
     dependencies:
-      '@formatjs/ecma402-abstract': 1.18.2
-      tslib: 2.6.2
+      '@hapi/hoek': 9.3.0
 
-  '@formatjs/intl-localematcher@0.5.4':
+  '@humanwhocodes/config-array@0.5.0':
     dependencies:
-      tslib: 2.6.2
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.3.7
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  '@gar/promisify@1.1.3': {}
+  '@humanwhocodes/object-schema@1.2.1': {}
 
-  '@grpc/grpc-js@1.10.6':
+  '@iconify/icons-solar@1.2.3':
     dependencies:
-      '@grpc/proto-loader': 0.7.12
-      '@js-sdsl/ordered-map': 4.4.2
+      '@iconify/types': 2.0.0
+
+  '@iconify/react@5.0.2(react@18.2.0)':
+    dependencies:
+      '@iconify/types': 2.0.0
+      react: 18.2.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@img/sharp-darwin-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+    optional: true
+
+  '@img/sharp-darwin-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+    optional: true
+
+  '@img/sharp-libvips-darwin-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-darwin-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-arm@1.0.5':
+    optional: true
+
+  '@img/sharp-libvips-linux-s390x@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linux-x64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
+    optional: true
+
+  '@img/sharp-libvips-linuxmusl-x64@1.0.4':
+    optional: true
 
-  '@grpc/proto-loader@0.7.12':
-    dependencies:
-      lodash.camelcase: 4.3.0
-      long: 5.2.3
-      protobufjs: 7.2.6
-      yargs: 17.7.2
+  '@img/sharp-linux-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+    optional: true
 
-  '@hapi/hoek@9.3.0': {}
+  '@img/sharp-linux-arm@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-arm': 1.0.5
+    optional: true
 
-  '@hapi/topo@5.1.0':
-    dependencies:
-      '@hapi/hoek': 9.3.0
+  '@img/sharp-linux-s390x@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+    optional: true
 
-  '@humanwhocodes/config-array@0.5.0':
-    dependencies:
-      '@humanwhocodes/object-schema': 1.2.1
-      debug: 4.3.4
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+  '@img/sharp-linux-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linux-x64': 1.0.4
+    optional: true
 
-  '@humanwhocodes/object-schema@1.2.1': {}
+  '@img/sharp-linuxmusl-arm64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+    optional: true
 
-  '@iconify/icons-solar@1.2.3':
-    dependencies:
-      '@iconify/types': 2.0.0
+  '@img/sharp-linuxmusl-x64@0.33.5':
+    optionalDependencies:
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+    optional: true
 
-  '@iconify/react@4.1.1(react@18.2.0)':
+  '@img/sharp-wasm32@0.33.5':
     dependencies:
-      '@iconify/types': 2.0.0
-      react: 18.2.0
+      '@emnapi/runtime': 1.3.1
+    optional: true
 
-  '@iconify/types@2.0.0': {}
+  '@img/sharp-win32-ia32@0.33.5':
+    optional: true
 
-  '@internationalized/date@3.5.4':
+  '@img/sharp-win32-x64@0.33.5':
+    optional: true
+
+  '@internationalized/date@3.5.6':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
 
-  '@internationalized/message@3.1.4':
+  '@internationalized/message@3.1.5':
     dependencies:
-      '@swc/helpers': 0.5.9
-      intl-messageformat: 10.5.11
+      '@swc/helpers': 0.5.15
+      intl-messageformat: 10.7.7
 
-  '@internationalized/number@3.5.3':
+  '@internationalized/number@3.5.4':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
 
-  '@internationalized/string@3.2.3':
+  '@internationalized/string@3.2.4':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -17456,47 +16979,47 @@ snapshots:
 
   '@istanbuljs/schema@0.1.3': {}
 
-  '@jest/console@28.1.3':
+  '@jest/console@29.7.0':
     dependencies:
-      '@jest/types': 28.1.3
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
       chalk: 4.1.2
-      jest-message-util: 28.1.3
-      jest-util: 28.1.3
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
       slash: 3.0.0
 
-  '@jest/core@28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))':
+  '@jest/core@29.7.0(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))':
     dependencies:
-      '@jest/console': 28.1.3
-      '@jest/reporters': 28.1.3
-      '@jest/test-result': 28.1.3
-      '@jest/transform': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/console': 29.7.0
+      '@jest/reporters': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 3.9.0
       exit: 0.1.2
       graceful-fs: 4.2.11
-      jest-changed-files: 28.1.3
-      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      jest-haste-map: 28.1.3
-      jest-message-util: 28.1.3
-      jest-regex-util: 28.0.2
-      jest-resolve: 28.1.3
-      jest-resolve-dependencies: 28.1.3
-      jest-runner: 28.1.3
-      jest-runtime: 28.1.3
-      jest-snapshot: 28.1.3
-      jest-util: 28.1.3
-      jest-validate: 28.1.3
-      jest-watcher: 28.1.3
-      micromatch: 4.0.5
-      pretty-format: 28.1.3
-      rimraf: 3.0.2
+      jest-changed-files: 29.7.0
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-resolve-dependencies: 29.7.0
+      jest-runner: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      jest-watcher: 29.7.0
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
       slash: 3.0.0
       strip-ansi: 6.0.1
     transitivePeerDependencies:
+      - babel-plugin-macros
       - supports-color
       - ts-node
 
@@ -17504,48 +17027,49 @@ snapshots:
     dependencies:
       '@jest/types': 29.6.3
 
-  '@jest/environment@28.1.3':
+  '@jest/environment@29.7.0':
     dependencies:
-      '@jest/fake-timers': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
-      jest-mock: 28.1.3
+      jest-mock: 29.7.0
 
-  '@jest/expect-utils@28.1.3':
+  '@jest/expect-utils@29.7.0':
     dependencies:
-      jest-get-type: 28.0.2
+      jest-get-type: 29.6.3
 
-  '@jest/expect@28.1.3':
+  '@jest/expect@29.7.0':
     dependencies:
-      expect: 28.1.3
-      jest-snapshot: 28.1.3
+      expect: 29.7.0
+      jest-snapshot: 29.7.0
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/fake-timers@28.1.3':
+  '@jest/fake-timers@29.7.0':
     dependencies:
-      '@jest/types': 28.1.3
-      '@sinonjs/fake-timers': 9.1.2
+      '@jest/types': 29.6.3
+      '@sinonjs/fake-timers': 10.3.0
       '@types/node': 15.14.9
-      jest-message-util: 28.1.3
-      jest-mock: 28.1.3
-      jest-util: 28.1.3
+      jest-message-util: 29.7.0
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
 
-  '@jest/globals@28.1.3':
+  '@jest/globals@29.7.0':
     dependencies:
-      '@jest/environment': 28.1.3
-      '@jest/expect': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/environment': 29.7.0
+      '@jest/expect': 29.7.0
+      '@jest/types': 29.6.3
+      jest-mock: 29.7.0
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/reporters@28.1.3':
+  '@jest/reporters@29.7.0':
     dependencies:
       '@bcoe/v8-coverage': 0.2.3
-      '@jest/console': 28.1.3
-      '@jest/test-result': 28.1.3
-      '@jest/transform': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/console': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
       '@types/node': 15.14.9
       chalk: 4.1.2
@@ -17554,72 +17078,47 @@ snapshots:
       glob: 7.2.3
       graceful-fs: 4.2.11
       istanbul-lib-coverage: 3.2.2
-      istanbul-lib-instrument: 5.2.1
+      istanbul-lib-instrument: 6.0.3
       istanbul-lib-report: 3.0.1
       istanbul-lib-source-maps: 4.0.1
       istanbul-reports: 3.1.7
-      jest-message-util: 28.1.3
-      jest-util: 28.1.3
-      jest-worker: 28.1.3
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+      jest-worker: 29.7.0
       slash: 3.0.0
       string-length: 4.0.2
       strip-ansi: 6.0.1
-      terminal-link: 2.1.1
-      v8-to-istanbul: 9.2.0
+      v8-to-istanbul: 9.3.0
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/schemas@28.1.3':
-    dependencies:
-      '@sinclair/typebox': 0.24.51
-
   '@jest/schemas@29.6.3':
     dependencies:
       '@sinclair/typebox': 0.27.8
 
-  '@jest/source-map@28.1.2':
+  '@jest/source-map@29.6.3':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       callsites: 3.1.0
       graceful-fs: 4.2.11
 
-  '@jest/test-result@28.1.3':
+  '@jest/test-result@29.7.0':
     dependencies:
-      '@jest/console': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/console': 29.7.0
+      '@jest/types': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       collect-v8-coverage: 1.0.2
 
-  '@jest/test-sequencer@28.1.3':
-    dependencies:
-      '@jest/test-result': 28.1.3
-      graceful-fs: 4.2.11
-      jest-haste-map: 28.1.3
-      slash: 3.0.0
-
-  '@jest/transform@28.1.3':
+  '@jest/test-sequencer@29.7.0':
     dependencies:
-      '@babel/core': 7.24.4
-      '@jest/types': 28.1.3
-      '@jridgewell/trace-mapping': 0.3.25
-      babel-plugin-istanbul: 6.1.1
-      chalk: 4.1.2
-      convert-source-map: 1.9.0
-      fast-json-stable-stringify: 2.1.0
+      '@jest/test-result': 29.7.0
       graceful-fs: 4.2.11
-      jest-haste-map: 28.1.3
-      jest-regex-util: 28.0.2
-      jest-util: 28.1.3
-      micromatch: 4.0.5
-      pirates: 4.0.6
+      jest-haste-map: 29.7.0
       slash: 3.0.0
-      write-file-atomic: 4.0.2
-    transitivePeerDependencies:
-      - supports-color
 
   '@jest/transform@29.7.0':
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
       '@jest/types': 29.6.3
       '@jridgewell/trace-mapping': 0.3.25
       babel-plugin-istanbul: 6.1.1
@@ -17630,45 +17129,36 @@ snapshots:
       jest-haste-map: 29.7.0
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       pirates: 4.0.6
       slash: 3.0.0
       write-file-atomic: 4.0.2
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/types@28.1.3':
-    dependencies:
-      '@jest/schemas': 28.1.3
-      '@types/istanbul-lib-coverage': 2.0.6
-      '@types/istanbul-reports': 3.0.4
-      '@types/node': 15.14.9
-      '@types/yargs': 17.0.32
-      chalk: 4.1.2
-
   '@jest/types@29.6.3':
     dependencies:
       '@jest/schemas': 29.6.3
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.2.5
-      '@types/yargs': 17.0.32
+      '@types/node': 15.14.9
+      '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@5.6.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))':
     dependencies:
       glob: 7.2.3
       glob-promise: 4.2.2(glob@7.2.3)
       magic-string: 0.27.0
-      react-docgen-typescript: 2.2.2(typescript@4.9.5)
-      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+      react-docgen-typescript: 2.2.2(typescript@5.6.3)
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0)
     optionalDependencies:
-      typescript: 4.9.5
+      typescript: 5.6.3
 
   '@jridgewell/gen-mapping@0.3.5':
     dependencies:
       '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
   '@jridgewell/resolve-uri@3.1.2': {}
@@ -17680,54 +17170,68 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@jridgewell/sourcemap-codec@1.4.15': {}
+  '@jridgewell/sourcemap-codec@1.5.0': {}
 
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@jridgewell/trace-mapping@0.3.9':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   '@js-sdsl/ordered-map@4.4.2': {}
 
   '@js-temporal/polyfill@0.4.4':
     dependencies:
       jsbi: 4.3.0
-      tslib: 2.6.2
+      tslib: 2.8.1
+
+  '@jsonjoy.com/base64@1.1.2(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
+
+  '@jsonjoy.com/json-pack@1.1.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/base64': 1.1.2(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.5.0(tslib@2.8.1)
+      hyperdyperid: 1.2.0
+      thingies: 1.21.0(tslib@2.8.1)
+      tslib: 2.8.1
 
-  '@juggle/resize-observer@3.4.0': {}
+  '@jsonjoy.com/util@1.5.0(tslib@2.8.1)':
+    dependencies:
+      tslib: 2.8.1
 
-  '@lezer/common@1.2.1': {}
+  '@lezer/common@1.2.3': {}
 
-  '@lezer/css@1.1.8':
+  '@lezer/css@1.1.9':
     dependencies:
-      '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
-      '@lezer/lr': 1.4.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
 
-  '@lezer/highlight@1.2.0':
+  '@lezer/highlight@1.2.1':
     dependencies:
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.3
 
-  '@lezer/html@1.3.9':
+  '@lezer/html@1.3.10':
     dependencies:
-      '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
-      '@lezer/lr': 1.4.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
 
-  '@lezer/javascript@1.4.14':
+  '@lezer/javascript@1.4.19':
     dependencies:
-      '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
-      '@lezer/lr': 1.4.0
+      '@lezer/common': 1.2.3
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
 
-  '@lezer/lr@1.4.0':
+  '@lezer/lr@1.4.2':
     dependencies:
-      '@lezer/common': 1.2.1
+      '@lezer/common': 1.2.3
 
   '@lmdb/lmdb-darwin-arm64@2.8.5':
     optional: true
@@ -17749,14 +17253,14 @@ snapshots:
 
   '@manypkg/find-root@1.1.0':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@types/node': 12.20.55
       find-up: 4.1.0
       fs-extra: 8.1.0
 
   '@manypkg/get-packages@1.1.3':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@changesets/types': 4.1.0
       '@manypkg/find-root': 1.1.0
       fs-extra: 8.1.0
@@ -17769,186 +17273,123 @@ snapshots:
       refractor: 3.3.1
       unist-util-visit: 2.0.3
 
-  '@mdx-js/esbuild@2.3.0(esbuild@0.20.2)':
+  '@mdx-js/esbuild@3.1.0(acorn@8.14.0)(esbuild@0.21.5)':
     dependencies:
-      '@mdx-js/mdx': 2.3.0
-      esbuild: 0.20.2
-      node-fetch: 3.3.2
-      vfile: 5.3.7
+      '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
+      '@types/unist': 3.0.3
+      esbuild: 0.21.5
+      source-map: 0.7.4
+      vfile: 6.0.3
+      vfile-message: 4.0.2
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  '@mdx-js/mdx@2.3.0':
+  '@mdx-js/mdx@3.1.0(acorn@8.14.0)':
     dependencies:
+      '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
       '@types/mdx': 2.0.13
-      estree-util-build-jsx: 2.2.2
-      estree-util-is-identifier-name: 2.1.0
-      estree-util-to-js: 1.2.0
+      collapse-white-space: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-scope: 1.0.0
       estree-walker: 3.0.3
-      hast-util-to-estree: 2.3.3
-      markdown-extensions: 1.1.1
-      periscopic: 3.1.0
-      remark-mdx: 2.3.0
-      remark-parse: 10.0.2
-      remark-rehype: 10.1.0
-      unified: 10.1.2
-      unist-util-position-from-estree: 1.1.2
-      unist-util-stringify-position: 3.0.3
-      unist-util-visit: 4.1.2
-      vfile: 5.3.7
+      hast-util-to-jsx-runtime: 2.3.2
+      markdown-extensions: 2.0.0
+      recma-build-jsx: 1.0.0
+      recma-jsx: 1.0.0(acorn@8.14.0)
+      recma-stringify: 1.0.0
+      rehype-recma: 1.0.0
+      remark-mdx: 3.1.0
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.1
+      source-map: 0.7.4
+      unified: 11.0.5
+      unist-util-position-from-estree: 2.0.0
+      unist-util-stringify-position: 4.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  '@mdx-js/react@2.3.0(react@18.2.0)':
+  '@mdx-js/react@3.1.0(@types/react@18.3.12)(react@18.2.0)':
     dependencies:
       '@types/mdx': 2.0.13
-      '@types/react': 18.2.8
+      '@types/react': 18.3.12
       react: 18.2.0
 
   '@mischnic/json-sourcemap@0.1.1':
     dependencies:
-      '@lezer/common': 1.2.1
-      '@lezer/lr': 1.4.0
+      '@lezer/common': 1.2.3
+      '@lezer/lr': 1.4.2
       json5: 2.2.3
 
-  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.3':
     optional: true
 
-  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.3':
     optional: true
 
-  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.3':
     optional: true
 
-  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-linux-arm@3.0.3':
     optional: true
 
-  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-linux-x64@3.0.3':
     optional: true
 
-  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2':
+  '@msgpackr-extract/msgpackr-extract-win32-x64@3.0.3':
     optional: true
 
-  '@napi-rs/wasm-runtime@0.1.2':
-    dependencies:
-      '@emnapi/core': 1.1.1
-      '@emnapi/runtime': 1.1.1
-      '@tybys/wasm-util': 0.8.1
-    optional: true
-
-  '@ndelangen/get-tarball@3.0.9':
-    dependencies:
-      gunzip-maybe: 1.4.2
-      pump: 3.0.0
-      tar-fs: 2.1.1
-
-  '@next/bundle-analyzer@13.5.6':
+  '@next/bundle-analyzer@14.3.0-canary.43':
     dependencies:
-      webpack-bundle-analyzer: 4.7.0
+      webpack-bundle-analyzer: 4.10.1
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  '@next/env@13.5.1': {}
+  '@next/env@13.5.7': {}
 
-  '@next/env@13.5.6': {}
+  '@next/env@14.3.0-canary.43': {}
 
-  '@next/eslint-plugin-next@13.5.6':
+  '@next/eslint-plugin-next@15.0.3':
     dependencies:
-      glob: 7.1.7
+      fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@13.5.1':
+  '@next/swc-darwin-arm64@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-darwin-x64@13.5.1':
+  '@next/swc-darwin-x64@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@13.5.1':
+  '@next/swc-linux-arm64-gnu@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-arm64-musl@13.5.1':
+  '@next/swc-linux-arm64-musl@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-x64-gnu@13.5.1':
+  '@next/swc-linux-x64-gnu@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-linux-x64-musl@13.5.1':
+  '@next/swc-linux-x64-musl@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@13.5.1':
+  '@next/swc-win32-arm64-msvc@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-ia32-msvc@13.5.1':
+  '@next/swc-win32-ia32-msvc@14.3.0-canary.43':
     optional: true
 
-  '@next/swc-win32-x64-msvc@13.5.1':
+  '@next/swc-win32-x64-msvc@14.3.0-canary.43':
     optional: true
 
   '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
     optional: true
 
-  '@node-rs/xxhash-android-arm-eabi@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-android-arm64@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-darwin-arm64@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-darwin-x64@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-freebsd-x64@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-linux-arm-gnueabihf@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-linux-arm64-gnu@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-linux-arm64-musl@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-linux-x64-gnu@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-linux-x64-musl@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-wasm32-wasi@1.7.0':
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.1.2
-    optional: true
-
-  '@node-rs/xxhash-win32-arm64-msvc@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-win32-ia32-msvc@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash-win32-x64-msvc@1.7.0':
-    optional: true
-
-  '@node-rs/xxhash@1.7.0':
-    optionalDependencies:
-      '@node-rs/xxhash-android-arm-eabi': 1.7.0
-      '@node-rs/xxhash-android-arm64': 1.7.0
-      '@node-rs/xxhash-darwin-arm64': 1.7.0
-      '@node-rs/xxhash-darwin-x64': 1.7.0
-      '@node-rs/xxhash-freebsd-x64': 1.7.0
-      '@node-rs/xxhash-linux-arm-gnueabihf': 1.7.0
-      '@node-rs/xxhash-linux-arm64-gnu': 1.7.0
-      '@node-rs/xxhash-linux-arm64-musl': 1.7.0
-      '@node-rs/xxhash-linux-x64-gnu': 1.7.0
-      '@node-rs/xxhash-linux-x64-musl': 1.7.0
-      '@node-rs/xxhash-wasm32-wasi': 1.7.0
-      '@node-rs/xxhash-win32-arm64-msvc': 1.7.0
-      '@node-rs/xxhash-win32-ia32-msvc': 1.7.0
-      '@node-rs/xxhash-win32-x64-msvc': 1.7.0
-
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -17961,14 +17402,16 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
 
+  '@nolyfill/is-core-module@1.0.39': {}
+
   '@npmcli/fs@2.1.2':
     dependencies:
       '@gar/promisify': 1.1.3
-      semver: 7.6.0
+      semver: 7.6.3
 
-  '@npmcli/fs@3.1.0':
+  '@npmcli/fs@3.1.1':
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   '@npmcli/git@4.1.0':
     dependencies:
@@ -17978,14 +17421,14 @@ snapshots:
       proc-log: 3.0.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.6.0
+      semver: 7.6.3
       which: 3.0.1
     transitivePeerDependencies:
       - bluebird
 
-  '@npmcli/installed-package-contents@2.0.2':
+  '@npmcli/installed-package-contents@2.1.0':
     dependencies:
-      npm-bundled: 3.0.0
+      npm-bundled: 3.0.1
       npm-normalize-package-bin: 3.0.1
 
   '@npmcli/move-file@2.0.1':
@@ -18012,188 +17455,188 @@ snapshots:
 
   '@open-draft/deferred-promise@2.2.0': {}
 
-  '@opentelemetry/api-logs@0.39.1':
+  '@opentelemetry/api-logs@0.51.1':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/api@1.8.0': {}
+  '@opentelemetry/api@1.9.0': {}
 
-  '@opentelemetry/context-async-hooks@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/context-async-hooks@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
+      '@opentelemetry/api': 1.9.0
 
-  '@opentelemetry/core@1.13.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/core@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/semantic-conventions': 1.13.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/core@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/semantic-conventions': 1.23.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/semantic-conventions': 1.27.0
 
-  '@opentelemetry/exporter-trace-otlp-grpc@0.39.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/exporter-trace-otlp-grpc@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@grpc/grpc-js': 1.10.6
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-grpc-exporter-base': 0.39.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-transformer': 0.39.1(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.13.0(@opentelemetry/api@1.8.0)
+      '@grpc/grpc-js': 1.12.2
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-grpc-exporter-base': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-transformer': 0.51.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/otlp-exporter-base@0.39.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-exporter-base@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/otlp-grpc-exporter-base@0.39.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-grpc-exporter-base@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@grpc/grpc-js': 1.10.6
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/otlp-exporter-base': 0.39.1(@opentelemetry/api@1.8.0)
-      protobufjs: 7.2.6
+      '@grpc/grpc-js': 1.12.2
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/otlp-exporter-base': 0.51.1(@opentelemetry/api@1.9.0)
+      protobufjs: 7.4.0
 
-  '@opentelemetry/otlp-transformer@0.39.1(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/otlp-transformer@0.51.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/api-logs': 0.39.1
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-logs': 0.39.1(@opentelemetry/api-logs@0.39.1)(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-metrics': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.13.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.51.1
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-logs': 0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-metrics': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/propagator-b3@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/propagator-b3@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/propagator-jaeger@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/propagator-jaeger@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/resources@1.13.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/resources@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.13.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/resources@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/resources@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.23.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.27.0
 
-  '@opentelemetry/sdk-logs@0.39.1(@opentelemetry/api-logs@0.39.1)(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-logs@0.51.1(@opentelemetry/api-logs@0.51.1)(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/api-logs': 0.39.1
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.13.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/api-logs': 0.51.1
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/sdk-metrics@1.13.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-metrics@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.13.0(@opentelemetry/api@1.8.0)
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
       lodash.merge: 4.6.2
 
-  '@opentelemetry/sdk-trace-base@1.13.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-trace-base@1.24.1(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.13.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.13.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.24.1(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.24.1
 
-  '@opentelemetry/sdk-trace-base@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/resources': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/semantic-conventions': 1.23.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/resources': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.27.0
 
-  '@opentelemetry/sdk-trace-node@1.23.0(@opentelemetry/api@1.8.0)':
+  '@opentelemetry/sdk-trace-node@1.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
-      '@opentelemetry/api': 1.8.0
-      '@opentelemetry/context-async-hooks': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/core': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/propagator-b3': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/propagator-jaeger': 1.23.0(@opentelemetry/api@1.8.0)
-      '@opentelemetry/sdk-trace-base': 1.23.0(@opentelemetry/api@1.8.0)
-      semver: 7.6.0
+      '@opentelemetry/api': 1.9.0
+      '@opentelemetry/context-async-hooks': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/core': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/propagator-b3': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/propagator-jaeger': 1.28.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/sdk-trace-base': 1.28.0(@opentelemetry/api@1.9.0)
+      semver: 7.6.3
 
-  '@opentelemetry/semantic-conventions@1.13.0': {}
+  '@opentelemetry/semantic-conventions@1.24.1': {}
 
-  '@opentelemetry/semantic-conventions@1.23.0': {}
+  '@opentelemetry/semantic-conventions@1.27.0': {}
 
-  '@parcel/bundler-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@opentelemetry/semantic-conventions@1.28.0': {}
+
+  '@parcel/bundler-default@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/graph': 3.2.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
-      '@parcel/utils': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/graph': 3.3.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/cache@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
+  '@parcel/cache@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/logger': 2.12.0
-      '@parcel/utils': 2.12.0
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/fs': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/logger': 2.13.0
+      '@parcel/utils': 2.13.0
       lmdb: 2.8.5
-    transitivePeerDependencies:
-      - '@swc/helpers'
 
-  '@parcel/codeframe@2.12.0':
+  '@parcel/codeframe@2.13.0':
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/compressor-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/compressor-raw@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/config-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)':
-    dependencies:
-      '@parcel/bundler-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/compressor-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/namer-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/optimizer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/optimizer-htmlnano': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
-      '@parcel/optimizer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/optimizer-svgo': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/optimizer-swc': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/packager-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/packager-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/packager-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/packager-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/packager-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/packager-wasm': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/resolver-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/runtime-browser-hmr': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/runtime-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/runtime-react-refresh': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/runtime-service-worker': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-babel': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-css': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-html': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-image': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-js': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-json': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-postcss': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-posthtml': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-raw': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-react-refresh-wrap': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/transformer-svg': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+  '@parcel/config-default@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)':
+    dependencies:
+      '@parcel/bundler-default': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/compressor-raw': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/namer-default': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/optimizer-css': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/optimizer-htmlnano': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)
+      '@parcel/optimizer-image': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/optimizer-svgo': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/optimizer-swc': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)
+      '@parcel/packager-css': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/packager-html': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/packager-js': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/packager-raw': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/packager-svg': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/packager-wasm': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/reporter-dev-server': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/resolver-default': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/runtime-browser-hmr': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/runtime-js': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/runtime-react-refresh': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/runtime-service-worker': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-babel': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-css': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-html': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-image': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-js': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-json': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-postcss': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-posthtml': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-raw': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-react-refresh-wrap': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/transformer-svg': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@swc/helpers'
       - cssnano
@@ -18201,110 +17644,114 @@ snapshots:
       - purgecss
       - relateurl
       - srcset
+      - svgo
       - terser
       - typescript
       - uncss
 
-  '@parcel/core@2.12.0(@swc/helpers@0.5.9)':
+  '@parcel/core@2.13.0(@swc/helpers@0.5.15)':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/events': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/graph': 3.2.0
-      '@parcel/logger': 2.12.0
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/profiler': 2.12.0
-      '@parcel/rust': 2.12.0
+      '@parcel/cache': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/events': 2.13.0
+      '@parcel/feature-flags': 2.13.0
+      '@parcel/fs': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/graph': 3.3.0
+      '@parcel/logger': 2.13.0
+      '@parcel/package-manager': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/profiler': 2.13.0
+      '@parcel/rust': 2.13.0
       '@parcel/source-map': 2.1.1
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      abortcontroller-polyfill: 1.7.5
-      base-x: 3.0.9
-      browserslist: 4.23.0
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      base-x: 3.0.10
+      browserslist: 4.24.2
       clone: 2.1.2
-      dotenv: 7.0.0
-      dotenv-expand: 5.1.0
+      dotenv: 16.4.5
+      dotenv-expand: 11.0.7
       json5: 2.2.3
-      msgpackr: 1.10.1
+      msgpackr: 1.11.2
       nullthrows: 1.1.1
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@parcel/diagnostic@2.12.0':
+  '@parcel/diagnostic@2.13.0':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
       nullthrows: 1.1.1
 
-  '@parcel/events@2.12.0': {}
+  '@parcel/events@2.13.0': {}
 
-  '@parcel/fs@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
+  '@parcel/feature-flags@2.13.0': {}
+
+  '@parcel/fs@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/rust': 2.12.0
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
-      '@parcel/watcher': 2.4.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-    transitivePeerDependencies:
-      - '@swc/helpers'
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/feature-flags': 2.13.0
+      '@parcel/rust': 2.13.0
+      '@parcel/types-internal': 2.13.0
+      '@parcel/utils': 2.13.0
+      '@parcel/watcher': 2.5.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
 
-  '@parcel/graph@3.2.0':
+  '@parcel/graph@3.3.0':
     dependencies:
+      '@parcel/feature-flags': 2.13.0
       nullthrows: 1.1.1
 
-  '@parcel/logger@2.12.0':
+  '@parcel/logger@2.13.0':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/events': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/events': 2.13.0
 
-  '@parcel/markdown-ansi@2.12.0':
+  '@parcel/markdown-ansi@2.13.0':
     dependencies:
       chalk: 4.1.2
 
-  '@parcel/namer-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/namer-default@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/node-resolver-core@3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/node-resolver-core@3.4.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
       '@mischnic/json-sourcemap': 0.1.1
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/rust': 2.12.0
-      '@parcel/utils': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/fs': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/optimizer-css@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      browserslist: 4.23.0
-      lightningcss: 1.24.1
+      '@parcel/utils': 2.13.0
+      browserslist: 4.24.2
+      lightningcss: 1.28.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-htmlnano@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)':
+  '@parcel/optimizer-htmlnano@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      htmlnano: 2.1.0(postcss@8.4.38)(srcset@4.0.0)(svgo@2.8.0)(terser@5.30.3)(typescript@4.9.5)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      htmlnano: 2.1.1(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)
       nullthrows: 1.1.1
       posthtml: 0.16.6
-      svgo: 2.8.0
     transitivePeerDependencies:
       - '@parcel/core'
       - cssnano
@@ -18312,403 +17759,409 @@ snapshots:
       - purgecss
       - relateurl
       - srcset
+      - svgo
       - terser
       - typescript
       - uncss
 
-  '@parcel/optimizer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/optimizer-image@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
-      '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
+      '@parcel/utils': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
 
-  '@parcel/optimizer-svgo@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/optimizer-svgo@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
-      svgo: 2.8.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/optimizer-swc@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
+  '@parcel/optimizer-swc@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@parcel/utils': 2.13.0
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
       - '@swc/helpers'
 
-  '@parcel/package-manager@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
-    dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/logger': 2.12.0
-      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      semver: 7.6.0
+  '@parcel/package-manager@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)':
+    dependencies:
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/fs': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/logger': 2.13.0
+      '@parcel/node-resolver-core': 3.4.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@swc/helpers'
 
-  '@parcel/packager-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-css@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      lightningcss: 1.24.1
+      '@parcel/utils': 2.13.0
+      lightningcss: 1.28.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/packager-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-html@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/packager-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-js@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
       '@parcel/source-map': 2.1.1
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       globals: 13.24.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/packager-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-raw@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/packager-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-svg@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       posthtml: 0.16.6
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/packager-wasm@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/packager-wasm@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/plugin@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/plugin@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/profiler@2.12.0':
+  '@parcel/profiler@2.13.0':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/events': 2.12.0
-      chrome-trace-event: 1.0.3
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/events': 2.13.0
+      '@parcel/types-internal': 2.13.0
+      chrome-trace-event: 1.0.4
 
-  '@parcel/reporter-cli@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/reporter-cli@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/types': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       chalk: 4.1.2
       term-size: 2.2.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/reporter-dev-server@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/reporter-dev-server@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/reporter-tracer@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/reporter-tracer@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
-      chrome-trace-event: 1.0.3
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      chrome-trace-event: 1.0.4
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/resolver-default@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/resolver-default@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/node-resolver-core': 3.3.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/node-resolver-core': 3.4.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/runtime-browser-hmr@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/runtime-browser-hmr@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/runtime-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/runtime-js@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/runtime-react-refresh@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/runtime-react-refresh@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       react-error-overlay: 6.0.9
-      react-refresh: 0.9.0
+      react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/runtime-service-worker@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/runtime-service-worker@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/rust@2.12.0': {}
+  '@parcel/rust@2.13.0': {}
 
   '@parcel/source-map@2.1.1':
     dependencies:
       detect-libc: 1.0.3
 
-  '@parcel/transformer-babel@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-babel@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      browserslist: 4.23.0
+      '@parcel/utils': 2.13.0
+      browserslist: 4.24.2
       json5: 2.2.3
       nullthrows: 1.1.1
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-css@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-css@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      browserslist: 4.23.0
-      lightningcss: 1.24.1
+      '@parcel/utils': 2.13.0
+      browserslist: 4.24.2
+      lightningcss: 1.28.1
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-html@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-html@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
-      posthtml-parser: 0.10.2
+      posthtml-parser: 0.12.1
       posthtml-render: 3.0.0
-      semver: 7.6.0
+      semver: 7.6.3
       srcset: 4.0.0
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-image@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-image@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       nullthrows: 1.1.1
 
-  '@parcel/transformer-js@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-js@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
       '@parcel/source-map': 2.1.1
-      '@parcel/utils': 2.12.0
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@swc/helpers': 0.5.9
-      browserslist: 4.23.0
+      '@parcel/utils': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@swc/helpers': 0.5.15
+      browserslist: 4.24.2
       nullthrows: 1.1.1
-      regenerator-runtime: 0.13.11
-      semver: 7.6.0
+      regenerator-runtime: 0.14.1
+      semver: 7.6.3
 
-  '@parcel/transformer-json@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-json@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
       json5: 2.2.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-postcss@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-postcss@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
-      '@parcel/utils': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
+      '@parcel/utils': 2.13.0
       clone: 2.1.2
       nullthrows: 1.1.1
       postcss-value-parser: 4.2.0
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-posthtml@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-posthtml@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
-      posthtml-parser: 0.10.2
+      posthtml-parser: 0.12.1
       posthtml-render: 3.0.0
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-raw@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-raw@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-react-refresh-wrap@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-react-refresh-wrap@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
-      react-refresh: 0.9.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
+      react-refresh: 0.14.2
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/transformer-svg@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
+  '@parcel/transformer-svg@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
     dependencies:
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/plugin': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/rust': 2.12.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/plugin': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/rust': 2.13.0
       nullthrows: 1.1.1
       posthtml: 0.16.6
-      posthtml-parser: 0.10.2
+      posthtml-parser: 0.12.1
       posthtml-render: 3.0.0
-      semver: 7.6.0
+      semver: 7.6.3
     transitivePeerDependencies:
       - '@parcel/core'
 
-  '@parcel/types@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)':
+  '@parcel/types-internal@2.13.0':
     dependencies:
-      '@parcel/cache': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/feature-flags': 2.13.0
       '@parcel/source-map': 2.1.1
-      '@parcel/workers': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
       utility-types: 3.11.0
+
+  '@parcel/types@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
+    dependencies:
+      '@parcel/types-internal': 2.13.0
+      '@parcel/workers': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
     transitivePeerDependencies:
       - '@parcel/core'
-      - '@swc/helpers'
 
-  '@parcel/utils@2.12.0':
+  '@parcel/utils@2.13.0':
     dependencies:
-      '@parcel/codeframe': 2.12.0
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/logger': 2.12.0
-      '@parcel/markdown-ansi': 2.12.0
-      '@parcel/rust': 2.12.0
+      '@parcel/codeframe': 2.13.0
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/logger': 2.13.0
+      '@parcel/markdown-ansi': 2.13.0
+      '@parcel/rust': 2.13.0
       '@parcel/source-map': 2.1.1
       chalk: 4.1.2
       nullthrows: 1.1.1
 
-  '@parcel/watcher-android-arm64@2.4.1':
+  '@parcel/watcher-android-arm64@2.5.0':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.0':
     optional: true
 
-  '@parcel/watcher-darwin-arm64@2.4.1':
+  '@parcel/watcher-darwin-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher-darwin-x64@2.4.1':
+  '@parcel/watcher-freebsd-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher-freebsd-x64@2.4.1':
+  '@parcel/watcher-linux-arm-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm-glibc@2.4.1':
+  '@parcel/watcher-linux-arm-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-glibc@2.4.1':
+  '@parcel/watcher-linux-arm64-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-arm64-musl@2.4.1':
+  '@parcel/watcher-linux-arm64-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-glibc@2.4.1':
+  '@parcel/watcher-linux-x64-glibc@2.5.0':
     optional: true
 
-  '@parcel/watcher-linux-x64-musl@2.4.1':
+  '@parcel/watcher-linux-x64-musl@2.5.0':
     optional: true
 
-  '@parcel/watcher-win32-arm64@2.4.1':
+  '@parcel/watcher-win32-arm64@2.5.0':
     optional: true
 
-  '@parcel/watcher-win32-ia32@2.4.1':
+  '@parcel/watcher-win32-ia32@2.5.0':
     optional: true
 
-  '@parcel/watcher-win32-x64@2.4.1':
+  '@parcel/watcher-win32-x64@2.5.0':
     optional: true
 
-  '@parcel/watcher@2.4.1':
+  '@parcel/watcher@2.5.0':
     dependencies:
       detect-libc: 1.0.3
       is-glob: 4.0.3
-      micromatch: 4.0.5
-      node-addon-api: 7.1.0
+      micromatch: 4.0.8
+      node-addon-api: 7.1.1
     optionalDependencies:
-      '@parcel/watcher-android-arm64': 2.4.1
-      '@parcel/watcher-darwin-arm64': 2.4.1
-      '@parcel/watcher-darwin-x64': 2.4.1
-      '@parcel/watcher-freebsd-x64': 2.4.1
-      '@parcel/watcher-linux-arm-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-glibc': 2.4.1
-      '@parcel/watcher-linux-arm64-musl': 2.4.1
-      '@parcel/watcher-linux-x64-glibc': 2.4.1
-      '@parcel/watcher-linux-x64-musl': 2.4.1
-      '@parcel/watcher-win32-arm64': 2.4.1
-      '@parcel/watcher-win32-ia32': 2.4.1
-      '@parcel/watcher-win32-x64': 2.4.1
-
-  '@parcel/workers@2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))':
-    dependencies:
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/logger': 2.12.0
-      '@parcel/profiler': 2.12.0
-      '@parcel/types': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/utils': 2.12.0
+      '@parcel/watcher-android-arm64': 2.5.0
+      '@parcel/watcher-darwin-arm64': 2.5.0
+      '@parcel/watcher-darwin-x64': 2.5.0
+      '@parcel/watcher-freebsd-x64': 2.5.0
+      '@parcel/watcher-linux-arm-glibc': 2.5.0
+      '@parcel/watcher-linux-arm-musl': 2.5.0
+      '@parcel/watcher-linux-arm64-glibc': 2.5.0
+      '@parcel/watcher-linux-arm64-musl': 2.5.0
+      '@parcel/watcher-linux-x64-glibc': 2.5.0
+      '@parcel/watcher-linux-x64-musl': 2.5.0
+      '@parcel/watcher-win32-arm64': 2.5.0
+      '@parcel/watcher-win32-ia32': 2.5.0
+      '@parcel/watcher-win32-x64': 2.5.0
+
+  '@parcel/workers@2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))':
+    dependencies:
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/logger': 2.13.0
+      '@parcel/profiler': 2.13.0
+      '@parcel/types-internal': 2.13.0
+      '@parcel/utils': 2.13.0
       nullthrows: 1.1.1
 
   '@pkgjs/parseargs@0.11.0':
@@ -18720,13 +18173,13 @@ snapshots:
     dependencies:
       graceful-fs: 4.2.10
 
-  '@pnpm/npm-conf@2.2.2':
+  '@pnpm/npm-conf@2.3.1':
     dependencies:
       '@pnpm/config.env-replace': 1.1.0
       '@pnpm/network.ca-file': 1.0.2
       config-chain: 1.1.13
 
-  '@polka/url@1.0.0-next.25': {}
+  '@polka/url@1.0.0-next.28': {}
 
   '@protobufjs/aspromise@1.1.2': {}
 
@@ -18751,68 +18204,39 @@ snapshots:
 
   '@protobufjs/utf8@1.1.0': {}
 
-  '@radix-ui/number@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.4
+  '@radix-ui/number@1.1.0': {}
 
   '@radix-ui/primitive@1.0.0':
     dependencies:
-      '@babel/runtime': 7.24.4
-
-  '@radix-ui/primitive@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.4
-
-  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+      '@babel/runtime': 7.26.0
 
-  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
+  '@radix-ui/primitive@1.1.0': {}
 
   '@radix-ui/react-compose-refs@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       react: 18.2.0
 
-  '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-compose-refs@1.1.0(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.8
 
   '@radix-ui/react-context@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       react: 18.2.0
 
-  '@radix-ui/react-context@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-context@1.1.1(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.8
 
   '@radix-ui/react-dialog@1.0.0(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
       '@radix-ui/react-context': 1.0.0(react@18.2.0)
@@ -18832,799 +18256,630 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@radix-ui/react-direction@1.0.1(@types/react@18.2.8)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
-
-  '@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.0
-      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.8)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
-
-  '@radix-ui/react-focus-guards@1.0.0(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      react: 18.2.0
-
-  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.8)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
-
-  '@radix-ui/react-focus-scope@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
-
-  '@radix-ui/react-id@1.0.0(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
-      react: 18.2.0
-
-  '@radix-ui/react-id@1.0.1(@types/react@18.2.8)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
-
-  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/rect': 1.0.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
-
-  '@radix-ui/react-portal@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
-
-  '@radix-ui/react-presence@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
-
-  '@radix-ui/react-primitive@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-slot': 1.0.0(react@18.2.0)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-direction@1.1.0(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@babel/runtime': 7.26.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-focus-guards@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@babel/runtime': 7.26.0
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-select@1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/number': 1.0.1
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      aria-hidden: 1.2.4
+  '@radix-ui/react-focus-scope@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-remove-scroll: 2.5.5(@types/react@18.2.8)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-id@1.0.0(react@18.2.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
+      react: 18.2.0
+
+  '@radix-ui/react-portal@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-slot@1.0.0(react@18.2.0)':
+  '@radix-ui/react-presence@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-slot@1.0.2(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-presence@1.1.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
+      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-primitive@1.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-slot': 1.0.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@radix-ui/react-primitive@2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
       '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-toolbar@1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.8)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-separator': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+  '@radix-ui/react-scroll-area@1.2.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.0
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-presence': 1.1.1(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.8)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
       '@types/react-dom': 18.2.4
 
-  '@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0)':
+  '@radix-ui/react-slot@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
       react: 18.2.0
 
-  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-slot@1.1.0(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.8
 
-  '@radix-ui/react-use-controllable-state@1.0.0(react@18.2.0)':
+  '@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      '@babel/runtime': 7.26.0
       react: 18.2.0
 
-  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-use-callback-ref@1.1.0(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.8
 
-  '@radix-ui/react-use-escape-keydown@1.0.0(react@18.2.0)':
+  '@radix-ui/react-use-controllable-state@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       react: 18.2.0
 
-  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-use-escape-keydown@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@babel/runtime': 7.26.0
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
       react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
 
   '@radix-ui/react-use-layout-effect@1.0.0(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      react: 18.2.0
-
-  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.8)(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
 
-  '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@radix-ui/react-use-layout-effect@1.1.0(@types/react@18.2.8)(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
       react: 18.2.0
     optionalDependencies:
       '@types/react': 18.2.8
 
-  '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@react-aria/breadcrumbs@3.5.18(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/rect': 1.0.1
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/link': 3.7.6(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/breadcrumbs': 3.7.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
 
-  '@radix-ui/react-use-size@1.0.1(@types/react@18.2.8)(react@18.2.0)':
+  '@react-aria/button@3.10.1(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.8)(react@18.2.0)
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/toggle': 3.7.8(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
-    optionalDependencies:
-      '@types/react': 18.2.8
 
-  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+  '@react-aria/calendar@3.5.13(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@internationalized/date': 3.5.6
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/live-announcer': 3.4.0
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/calendar': 3.5.5(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/calendar': 3.4.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-      '@types/react-dom': 18.2.4
 
-  '@radix-ui/rect@1.0.1':
-    dependencies:
-      '@babel/runtime': 7.24.4
-
-  '@react-aria/breadcrumbs@3.5.13(react@18.2.0)':
-    dependencies:
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/link': 3.7.1(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/breadcrumbs': 3.7.5(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
-      react: 18.2.0
-
-  '@react-aria/button@3.9.5(react@18.2.0)':
-    dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/toggle': 3.7.4(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/checkbox@3.14.8(react@18.2.0)':
+    dependencies:
+      '@react-aria/form': 3.0.10(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/toggle': 3.10.10(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/checkbox': 3.6.9(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/toggle': 3.7.8(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/calendar@3.5.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@internationalized/date': 3.5.4
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/live-announcer': 3.3.4
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/calendar': 3.5.1(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/calendar': 3.4.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/combobox@3.10.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/listbox': 3.13.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/live-announcer': 3.4.0
+      '@react-aria/menu': 3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/overlays': 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/selection': 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/textfield': 3.14.10(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/combobox': 3.10.0(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/combobox': 3.13.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/checkbox@3.14.3(react@18.2.0)':
-    dependencies:
-      '@react-aria/form': 3.0.5(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/toggle': 3.10.4(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/checkbox': 3.6.5(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/toggle': 3.7.4(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
-      react: 18.2.0
-
-  '@react-aria/combobox@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/listbox': 3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/live-announcer': 3.3.4
-      '@react-aria/menu': 3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/textfield': 3.14.5(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/combobox': 3.8.4(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/combobox': 3.11.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/datepicker@3.11.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@internationalized/date': 3.5.6
+      '@internationalized/number': 3.5.4
+      '@internationalized/string': 3.2.4
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/form': 3.0.10(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/spinbutton': 3.6.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/datepicker': 3.10.3(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/calendar': 3.4.10(react@18.2.0)
+      '@react-types/datepicker': 3.8.3(react@18.2.0)
+      '@react-types/dialog': 3.5.13(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/datepicker@3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@internationalized/date': 3.5.4
-      '@internationalized/number': 3.5.3
-      '@internationalized/string': 3.2.3
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/form': 3.0.5(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/spinbutton': 3.6.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/datepicker': 3.9.4(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/calendar': 3.4.6(react@18.2.0)
-      '@react-types/datepicker': 3.7.4(react@18.2.0)
-      '@react-types/dialog': 3.5.10(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/dialog@3.5.19(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/overlays': 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/dialog': 3.5.13(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/dialog@3.5.14(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/focus@3.18.4(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/dialog': 3.5.10(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/focus@3.17.1(react@18.2.0)':
+  '@react-aria/focus@3.19.0(react@18.2.0)':
     dependencies:
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
-      clsx: 2.1.0
+      '@react-aria/interactions': 3.22.5(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
       react: 18.2.0
 
-  '@react-aria/form@3.0.5(react@18.2.0)':
+  '@react-aria/form@3.0.10(react@18.2.0)':
     dependencies:
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/grid@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/form@3.0.8(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/live-announcer': 3.3.4
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/grid': 3.8.7(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-stately/virtualizer': 3.7.1(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-aria/grid@3.10.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/live-announcer': 3.4.0
+      '@react-aria/selection': 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/grid': 3.9.3(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/i18n@3.11.1(react@18.2.0)':
+  '@react-aria/i18n@3.12.3(react@18.2.0)':
     dependencies:
-      '@internationalized/date': 3.5.4
-      '@internationalized/message': 3.1.4
-      '@internationalized/number': 3.5.3
-      '@internationalized/string': 3.2.3
-      '@react-aria/ssr': 3.9.4(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@internationalized/date': 3.5.6
+      '@internationalized/message': 3.1.5
+      '@internationalized/number': 3.5.4
+      '@internationalized/string': 3.2.4
+      '@react-aria/ssr': 3.9.6(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/interactions@3.21.3(react@18.2.0)':
+  '@react-aria/interactions@3.22.4(react@18.2.0)':
     dependencies:
-      '@react-aria/ssr': 3.9.4(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/ssr': 3.9.6(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/label@3.7.8(react@18.2.0)':
+  '@react-aria/interactions@3.22.5(react@18.2.0)':
     dependencies:
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/ssr': 3.9.7(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/link@3.7.1(react@18.2.0)':
+  '@react-aria/label@3.7.12(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/link': 3.5.5(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/listbox@3.12.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/link@3.7.6(react@18.2.0)':
     dependencies:
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/list': 3.10.5(react@18.2.0)
-      '@react-types/listbox': 3.4.9(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/link': 3.5.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/live-announcer@3.3.4':
-    dependencies:
-      '@swc/helpers': 0.5.9
+  '@react-aria/listbox@3.13.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/selection': 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/list': 3.11.0(react@18.2.0)
+      '@react-types/listbox': 3.5.2(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/menu@3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/overlays': 3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/menu': 3.7.1(react@18.2.0)
-      '@react-stately/tree': 3.8.1(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/menu': 3.9.9(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/live-announcer@3.4.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@react-aria/menu@3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/overlays': 3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/selection': 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/menu': 3.8.3(react@18.2.0)
+      '@react-stately/tree': 3.8.5(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/menu': 3.9.12(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/overlays@3.22.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/ssr': 3.9.4(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-aria/visually-hidden': 3.8.12(react@18.2.0)
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/overlays@3.23.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/ssr': 3.9.6(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-aria/visually-hidden': 3.8.17(react@18.2.0)
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/progress@3.4.13(react@18.2.0)':
+  '@react-aria/progress@3.4.17(react@18.2.0)':
     dependencies:
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/progress': 3.5.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/progress': 3.5.7(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/radio@3.10.4(react@18.2.0)':
-    dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/form': 3.0.5(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/radio': 3.10.4(react@18.2.0)
-      '@react-types/radio': 3.8.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+  '@react-aria/radio@3.10.9(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/form': 3.0.10(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/radio': 3.10.8(react@18.2.0)
+      '@react-types/radio': 3.8.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/selection@3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/selection@3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/slider@3.7.8(react@18.2.0)':
+  '@react-aria/selection@3.20.1(react-dom@18.3.1(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/slider': 3.5.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/slider': 3.7.3(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+      react-dom: 18.3.1(react@18.2.0)
+
+  '@react-aria/slider@3.7.13(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/slider': 3.5.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/slider': 3.7.6(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/spinbutton@3.6.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/spinbutton@3.6.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/live-announcer': 3.3.4
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/button': 3.9.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/live-announcer': 3.4.0
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/button': 3.10.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/ssr@3.9.4(react@18.2.0)':
+  '@react-aria/ssr@3.9.6(react@18.2.0)':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/switch@3.6.4(react@18.2.0)':
+  '@react-aria/ssr@3.9.7(react@18.2.0)':
     dependencies:
-      '@react-aria/toggle': 3.10.4(react@18.2.0)
-      '@react-stately/toggle': 3.7.4(react@18.2.0)
-      '@react-types/switch': 3.5.3(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/table@3.14.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/switch@3.6.9(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/grid': 3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/live-announcer': 3.3.4
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-aria/visually-hidden': 3.8.12(react@18.2.0)
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/flags': 3.0.3
-      '@react-stately/table': 3.11.8(react@18.2.0)
-      '@react-stately/virtualizer': 3.7.1(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/table': 3.9.5(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/toggle': 3.10.9(react@18.2.0)
+      '@react-stately/toggle': 3.7.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/switch': 3.5.6(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-aria/table@3.15.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/grid': 3.10.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/live-announcer': 3.4.0
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-aria/visually-hidden': 3.8.17(react@18.2.0)
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/flags': 3.0.4
+      '@react-stately/table': 3.12.3(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/table': 3.10.2(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/tabs@3.9.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@react-aria/tabs@3.9.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/selection': 3.18.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/tabs': 3.6.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/tabs': 3.3.7(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/selection': 3.20.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/tabs': 3.6.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/tabs': 3.3.10(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/textfield@3.14.5(react@18.2.0)':
+  '@react-aria/textfield@3.14.10(react@18.2.0)':
+    dependencies:
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/form': 3.0.10(react@18.2.0)
+      '@react-aria/label': 3.7.12(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/textfield': 3.9.7(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-aria/toggle@3.10.10(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/form': 3.0.5(react@18.2.0)
-      '@react-aria/label': 3.7.8(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/textfield': 3.9.3(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.19.0(react@18.2.0)
+      '@react-aria/interactions': 3.22.5(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/toggle': 3.8.0(react@18.2.0)
+      '@react-types/checkbox': 3.9.0(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/toggle@3.10.4(react@18.2.0)':
+  '@react-aria/toggle@3.10.9(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/toggle': 3.7.4(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/toggle': 3.7.8(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-aria/tooltip@3.7.4(react@18.2.0)':
+  '@react-aria/tooltip@3.7.9(react@18.2.0)':
     dependencies:
-      '@react-aria/focus': 3.17.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-stately/tooltip': 3.4.9(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/tooltip': 3.4.9(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/focus': 3.18.4(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-stately/tooltip': 3.4.13(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/tooltip': 3.4.12(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-aria/utils@3.24.1(react@18.2.0)':
     dependencies:
-      '@react-aria/ssr': 3.9.4(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
-      clsx: 2.1.0
+      '@react-aria/ssr': 3.9.6(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
+      react: 18.2.0
+
+  '@react-aria/utils@3.26.0(react@18.2.0)':
+    dependencies:
+      '@react-aria/ssr': 3.9.7(react@18.2.0)
+      '@react-stately/utils': 3.10.5(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      clsx: 2.1.1
       react: 18.2.0
 
   '@react-aria/virtualizer@3.10.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@react-aria/i18n': 3.11.1(react@18.2.0)
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
+      '@react-aria/i18n': 3.12.3(react@18.2.0)
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
       '@react-stately/virtualizer': 3.7.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@react-aria/visually-hidden@3.8.12(react@18.2.0)':
+  '@react-aria/visually-hidden@3.8.17(react@18.2.0)':
     dependencies:
-      '@react-aria/interactions': 3.21.3(react@18.2.0)
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/interactions': 3.22.4(react@18.2.0)
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-bootstrap/babel-preset@2.2.0':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.24.4)
-      '@babel/plugin-proposal-export-default-from': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.24.4)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-transform-runtime': 7.24.3(@babel/core@7.24.4)
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
-      '@babel/preset-react': 7.24.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.26.0)
+      '@babel/plugin-proposal-export-default-from': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.26.0)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-transform-runtime': 7.25.9(@babel/core@7.26.0)
+      '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
+      '@babel/preset-react': 7.25.9(@babel/core@7.26.0)
       babel-plugin-add-module-exports: 1.0.4
-      babel-plugin-dev-expression: 0.2.3(@babel/core@7.24.4)
-      babel-plugin-transform-next-use-client: 1.1.1(@babel/core@7.24.4)
+      babel-plugin-dev-expression: 0.2.3(@babel/core@7.26.0)
+      babel-plugin-transform-next-use-client: 1.1.1(@babel/core@7.26.0)
       babel-plugin-transform-react-remove-prop-types: 0.4.24
       babel-preset-env-modules: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@react-hook/intersection-observer@3.1.1(react@18.2.0)':
+  '@react-hook/intersection-observer@3.1.2(react@18.2.0)':
     dependencies:
       '@react-hook/passive-layout-effect': 1.2.1(react@18.2.0)
       intersection-observer: 0.10.0
@@ -19634,349 +18889,534 @@ snapshots:
     dependencies:
       react: 18.2.0
 
-  '@react-stately/calendar@3.5.1(react@18.2.0)':
+  '@react-stately/calendar@3.5.5(react@18.2.0)':
     dependencies:
-      '@internationalized/date': 3.5.4
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/calendar': 3.4.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@internationalized/date': 3.5.6
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/calendar': 3.4.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/checkbox@3.6.5(react@18.2.0)':
+  '@react-stately/checkbox@3.6.9(react@18.2.0)':
     dependencies:
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/collections@3.10.7(react@18.2.0)':
+  '@react-stately/collections@3.10.9(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/combobox@3.8.4(react@18.2.0)':
+  '@react-stately/collections@3.11.0(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/list': 3.10.5(react@18.2.0)
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-stately/select': 3.6.4(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/combobox': 3.11.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/combobox@3.10.0(react@18.2.0)':
+    dependencies:
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/list': 3.11.0(react@18.2.0)
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-stately/select': 3.6.8(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/combobox': 3.13.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-stately/data@3.11.4(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/data@3.11.7(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/datepicker@3.9.4(react@18.2.0)':
+  '@react-stately/datepicker@3.10.3(react@18.2.0)':
     dependencies:
-      '@internationalized/date': 3.5.4
-      '@internationalized/string': 3.2.3
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/datepicker': 3.7.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@internationalized/date': 3.5.6
+      '@internationalized/string': 3.2.4
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/datepicker': 3.8.3(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/flags@3.0.3':
+  '@react-stately/flags@3.0.4':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@react-stately/form@3.0.5(react@18.2.0)':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
 
-  '@react-stately/form@3.0.3(react@18.2.0)':
+  '@react-stately/form@3.0.6(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/grid@3.8.7(react@18.2.0)':
+  '@react-stately/grid@3.9.3(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-stately/layout@3.13.9(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/table': 3.11.8(react@18.2.0)
+      '@react-stately/collections': 3.10.9(react@18.2.0)
+      '@react-stately/table': 3.12.2(react@18.2.0)
       '@react-stately/virtualizer': 3.7.1(react@18.2.0)
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/table': 3.9.5(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-types/grid': 3.2.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/table': 3.10.1(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/list@3.10.5(react@18.2.0)':
+  '@react-stately/list@3.11.0(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/menu@3.7.1(react@18.2.0)':
+  '@react-stately/menu@3.8.3(react@18.2.0)':
     dependencies:
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-types/menu': 3.9.9(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-types/menu': 3.9.12(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/overlays@3.6.7(react@18.2.0)':
+  '@react-stately/overlays@3.6.11(react@18.2.0)':
     dependencies:
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/radio@3.10.4(react@18.2.0)':
+  '@react-stately/radio@3.10.8(react@18.2.0)':
     dependencies:
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/radio': 3.8.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/radio': 3.8.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/select@3.6.4(react@18.2.0)':
+  '@react-stately/select@3.6.8(react@18.2.0)':
     dependencies:
-      '@react-stately/form': 3.0.3(react@18.2.0)
-      '@react-stately/list': 3.10.5(react@18.2.0)
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-types/select': 3.9.4(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/form': 3.0.6(react@18.2.0)
+      '@react-stately/list': 3.11.0(react@18.2.0)
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-types/select': 3.9.7(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/selection@3.15.1(react@18.2.0)':
+  '@react-stately/selection@3.17.0(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/slider@3.5.4(react@18.2.0)':
+  '@react-stately/slider@3.5.8(react@18.2.0)':
     dependencies:
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/slider': 3.7.3(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/slider': 3.7.6(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/table@3.12.2(react@18.2.0)':
+    dependencies:
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/flags': 3.0.4
+      '@react-stately/grid': 3.9.3(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/table': 3.10.2(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/table@3.12.3(react@18.2.0)':
+    dependencies:
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/flags': 3.0.4
+      '@react-stately/grid': 3.9.3(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/table': 3.10.2(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/table@3.11.8(react@18.2.0)':
+  '@react-stately/tabs@3.6.10(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/flags': 3.0.3
-      '@react-stately/grid': 3.8.7(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/table': 3.9.5(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/list': 3.11.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@react-types/tabs': 3.3.10(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/tabs@3.6.6(react@18.2.0)':
+  '@react-stately/toggle@3.7.8(react@18.2.0)':
     dependencies:
-      '@react-stately/list': 3.10.5(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@react-types/tabs': 3.3.7(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/checkbox': 3.8.4(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/toggle@3.7.4(react@18.2.0)':
+  '@react-stately/toggle@3.8.0(react@18.2.0)':
     dependencies:
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/checkbox': 3.8.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/utils': 3.10.5(react@18.2.0)
+      '@react-types/checkbox': 3.9.0(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
-  '@react-stately/tooltip@3.4.9(react@18.2.0)':
+  '@react-stately/tooltip@3.4.13(react@18.2.0)':
     dependencies:
-      '@react-stately/overlays': 3.6.7(react@18.2.0)
-      '@react-types/tooltip': 3.4.9(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/overlays': 3.6.11(react@18.2.0)
+      '@react-types/tooltip': 3.4.12(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-stately/tree@3.8.1(react@18.2.0)':
     dependencies:
-      '@react-stately/collections': 3.10.7(react@18.2.0)
-      '@react-stately/selection': 3.15.1(react@18.2.0)
-      '@react-stately/utils': 3.10.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-stately/collections': 3.10.9(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-stately/utils': 3.10.3(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/tree@3.8.5(react@18.2.0)':
+    dependencies:
+      '@react-stately/collections': 3.11.0(react@18.2.0)
+      '@react-stately/selection': 3.17.0(react@18.2.0)
+      '@react-stately/utils': 3.10.4(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-stately/utils@3.10.1(react@18.2.0)':
     dependencies:
-      '@swc/helpers': 0.5.9
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/utils@3.10.3(react@18.2.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/utils@3.10.4(react@18.2.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/utils@3.10.5(react@18.2.0)':
+    dependencies:
+      '@swc/helpers': 0.5.15
       react: 18.2.0
 
   '@react-stately/virtualizer@3.7.1(react@18.2.0)':
     dependencies:
-      '@react-aria/utils': 3.24.1(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
-      '@swc/helpers': 0.5.9
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-stately/virtualizer@4.1.0(react@18.2.0)':
+    dependencies:
+      '@react-aria/utils': 3.26.0(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      '@swc/helpers': 0.5.15
+      react: 18.2.0
+
+  '@react-types/accordion@3.0.0-alpha.24(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/breadcrumbs@3.7.8(react@18.2.0)':
+    dependencies:
+      '@react-types/link': 3.5.8(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/button@3.10.0(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/calendar@3.4.10(react@18.2.0)':
+    dependencies:
+      '@internationalized/date': 3.5.6
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/checkbox@3.8.4(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/checkbox@3.9.0(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.26.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/accordion@3.0.0-alpha.21(react@18.2.0)':
+  '@react-types/combobox@3.13.0(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/breadcrumbs@3.7.5(react@18.2.0)':
+  '@react-types/datepicker@3.8.3(react@18.2.0)':
     dependencies:
-      '@react-types/link': 3.5.5(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@internationalized/date': 3.5.6
+      '@react-types/calendar': 3.4.10(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/button@3.9.4(react@18.2.0)':
+  '@react-types/dialog@3.5.13(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/calendar@3.4.6(react@18.2.0)':
+  '@react-types/form@3.7.8(react@18.2.0)':
     dependencies:
-      '@internationalized/date': 3.5.4
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.26.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/checkbox@3.8.1(react@18.2.0)':
+  '@react-types/grid@3.2.8(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/combobox@3.11.1(react@18.2.0)':
+  '@react-types/grid@3.2.9(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/datepicker@3.7.4(react@18.2.0)':
+  '@react-types/link@3.5.7(react@18.2.0)':
     dependencies:
-      '@internationalized/date': 3.5.4
-      '@react-types/calendar': 3.4.6(react@18.2.0)
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/dialog@3.5.10(react@18.2.0)':
+  '@react-types/link@3.5.8(react@18.2.0)':
     dependencies:
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/grid@3.2.6(react@18.2.0)':
+  '@react-types/listbox@3.5.2(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/link@3.5.3(react@18.2.0)':
+  '@react-types/menu@3.9.12(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/link@3.5.5(react@18.2.0)':
+  '@react-types/overlays@3.8.10(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/listbox@3.4.9(react@18.2.0)':
+  '@react-types/progress@3.5.7(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/menu@3.9.9(react@18.2.0)':
+  '@react-types/radio@3.8.4(react@18.2.0)':
     dependencies:
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/overlays@3.8.7(react@18.2.0)':
+  '@react-types/select@3.9.7(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/progress@3.5.4(react@18.2.0)':
+  '@react-types/shared@3.24.1(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/radio@3.8.1(react@18.2.0)':
+  '@react-types/shared@3.25.0(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/select@3.9.4(react@18.2.0)':
+  '@react-types/shared@3.26.0(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/shared@3.23.1(react@18.2.0)':
+  '@react-types/slider@3.7.6(react@18.2.0)':
     dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/slider@3.7.3(react@18.2.0)':
+  '@react-types/switch@3.5.6(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/switch@3.5.3(react@18.2.0)':
+  '@react-types/table@3.10.1(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/table@3.9.5(react@18.2.0)':
+  '@react-types/table@3.10.2(react@18.2.0)':
     dependencies:
-      '@react-types/grid': 3.2.6(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/grid': 3.2.9(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/tabs@3.3.7(react@18.2.0)':
+  '@react-types/tabs@3.3.10(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
   '@react-types/textfield@3.9.3(react@18.2.0)':
     dependencies:
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/shared': 3.24.1(react@18.2.0)
+      react: 18.2.0
+
+  '@react-types/textfield@3.9.7(react@18.2.0)':
+    dependencies:
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
-  '@react-types/tooltip@3.4.9(react@18.2.0)':
+  '@react-types/tooltip@3.4.12(react@18.2.0)':
     dependencies:
-      '@react-types/overlays': 3.8.7(react@18.2.0)
-      '@react-types/shared': 3.23.1(react@18.2.0)
+      '@react-types/overlays': 3.8.10(react@18.2.0)
+      '@react-types/shared': 3.25.0(react@18.2.0)
       react: 18.2.0
 
   '@rehooks/local-storage@2.4.5(react@18.2.0)':
     dependencies:
       react: 18.2.0
 
-  '@rollup/pluginutils@5.1.0(rollup@3.29.4)':
+  '@rollup/pluginutils@5.1.3(rollup@4.27.4)':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       estree-walker: 2.0.2
-      picomatch: 2.3.1
+      picomatch: 4.0.2
     optionalDependencies:
-      rollup: 3.29.4
+      rollup: 4.27.4
+
+  '@rollup/rollup-android-arm-eabi@4.27.4':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.27.4':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.27.4':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.27.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.27.4':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-powerpc64le-gnu@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.27.4':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.27.4':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.27.4':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.27.4':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.27.4':
+    optional: true
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/eslint-patch@1.10.2': {}
+  '@rushstack/eslint-patch@1.10.4': {}
+
+  '@shikijs/core@1.23.1':
+    dependencies:
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
+
+  '@shikijs/engine-javascript@1.23.1':
+    dependencies:
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      oniguruma-to-es: 0.4.1
+
+  '@shikijs/engine-oniguruma@1.23.1':
+    dependencies:
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+
+  '@shikijs/types@1.23.1':
+    dependencies:
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@9.3.0': {}
 
   '@sideway/address@4.1.5':
     dependencies:
@@ -20007,699 +19447,400 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sinclair/typebox@0.24.51': {}
-
   '@sinclair/typebox@0.27.8': {}
 
   '@sindresorhus/is@5.6.0': {}
 
-  '@sinonjs/commons@1.8.6':
+  '@sindresorhus/merge-streams@2.3.0': {}
+
+  '@sinonjs/commons@3.0.1':
     dependencies:
       type-detect: 4.0.8
 
-  '@sinonjs/fake-timers@9.1.2':
+  '@sinonjs/fake-timers@10.3.0':
     dependencies:
-      '@sinonjs/commons': 1.8.6
+      '@sinonjs/commons': 3.0.1
 
   '@stitches/core@1.2.8': {}
 
-  '@storybook/addon-a11y@7.6.17':
+  '@storybook/addon-a11y@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/addon-highlight': 7.6.17
-      axe-core: 4.9.0
+      '@storybook/addon-highlight': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      axe-core: 4.10.2
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/addon-actions@7.6.17':
+  '@storybook/addon-actions@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/core-events': 7.6.17
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
+      storybook: 8.4.5(prettier@3.3.3)
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@7.6.17':
+  '@storybook/addon-backgrounds@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/addon-controls@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      lodash: 4.17.21
+      '@storybook/global': 5.0.0
+      dequal: 2.0.3
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - react
-      - react-dom
-      - supports-color
 
-  '@storybook/addon-docs@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/addon-docs@8.4.5(@types/react@18.3.12)(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@jest/transform': 29.7.0
-      '@mdx-js/react': 2.3.0(react@18.2.0)
-      '@storybook/blocks': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/client-logger': 7.6.17
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/csf-plugin': 7.6.17
-      '@storybook/csf-tools': 7.6.17
-      '@storybook/global': 5.0.0
-      '@storybook/mdx2-csf': 1.1.0
-      '@storybook/node-logger': 7.6.17
-      '@storybook/postinstall': 7.6.17
-      '@storybook/preview-api': 7.6.17
-      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/types': 7.6.17
-      fs-extra: 11.2.0
+      '@mdx-js/react': 3.1.0(@types/react@18.3.12)(react@18.2.0)
+      '@storybook/blocks': 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/csf-plugin': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/react-dom-shim': 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      remark-external-links: 8.0.0
-      remark-slug: 6.1.0
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
 
-  '@storybook/addon-essentials@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@storybook/addon-actions': 7.6.17
-      '@storybook/addon-backgrounds': 7.6.17
-      '@storybook/addon-controls': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/addon-docs': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/addon-highlight': 7.6.17
-      '@storybook/addon-measure': 7.6.17
-      '@storybook/addon-outline': 7.6.17
-      '@storybook/addon-toolbars': 7.6.17
-      '@storybook/addon-viewport': 7.6.17
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/node-logger': 7.6.17
-      '@storybook/preview-api': 7.6.17
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
+  '@storybook/addon-essentials@8.4.5(@types/react@18.3.12)(storybook@8.4.5(prettier@3.3.3))':
+    dependencies:
+      '@storybook/addon-actions': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-backgrounds': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-controls': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-docs': 8.4.5(@types/react@18.3.12)(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-highlight': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-measure': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-outline': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-toolbars': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/addon-viewport': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
 
-  '@storybook/addon-highlight@7.6.17':
+  '@storybook/addon-highlight@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/addon-links@7.6.17(react@18.2.0)':
+  '@storybook/addon-links@8.4.5(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/csf': 0.1.4
+      '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.2.0
 
-  '@storybook/addon-mdx-gfm@7.6.17':
-    dependencies:
-      '@storybook/node-logger': 7.6.17
-      remark-gfm: 3.0.1
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@storybook/addon-measure@7.6.17':
+  '@storybook/addon-measure@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
+      storybook: 8.4.5(prettier@3.3.3)
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-outline@7.6.17':
+  '@storybook/addon-outline@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
       '@storybook/global': 5.0.0
+      storybook: 8.4.5(prettier@3.3.3)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@7.6.17': {}
-
-  '@storybook/addon-viewport@7.6.17':
+  '@storybook/addon-toolbars@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      memoizerific: 1.11.3
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/addons@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/addon-viewport@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/preview-api': 7.6.17
-      '@storybook/types': 7.6.17
-    transitivePeerDependencies:
-      - react
-      - react-dom
+      memoizerific: 1.11.3
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/blocks@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/blocks@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/channels': 7.6.17
-      '@storybook/client-logger': 7.6.17
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-events': 7.6.17
-      '@storybook/csf': 0.1.4
-      '@storybook/docs-tools': 7.6.17(encoding@0.1.13)
-      '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/preview-api': 7.6.17
-      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/types': 7.6.17
-      '@types/lodash': 4.17.5
-      color-convert: 2.0.1
-      dequal: 2.0.3
-      lodash: 4.17.21
-      markdown-to-jsx: 7.4.7(react@18.2.0)
-      memoizerific: 1.11.3
-      polished: 4.3.1
+      '@storybook/csf': 0.1.11
+      '@storybook/icons': 1.2.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      storybook: 8.4.5(prettier@3.3.3)
+      ts-dedent: 2.2.0
+    optionalDependencies:
       react: 18.2.0
-      react-colorful: 5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react-dom: 18.2.0(react@18.2.0)
-      telejson: 7.2.0
-      tocbot: 4.25.0
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-      - encoding
-      - supports-color
 
-  '@storybook/builder-manager@7.6.17(encoding@0.1.13)':
+  '@storybook/builder-vite@8.4.5(storybook@8.4.5(prettier@3.3.3))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))':
     dependencies:
-      '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/manager': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@types/ejs': 3.1.5
-      '@types/find-cache-dir': 3.2.1
-      '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.18.20)
-      browser-assert: 1.2.1
-      ejs: 3.1.10
-      esbuild: 0.18.20
-      esbuild-plugin-alias: 0.2.1
-      express: 4.19.2
-      find-cache-dir: 3.3.2
-      fs-extra: 11.2.0
-      process: 0.11.10
-      util: 0.12.5
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@storybook/builder-vite@7.6.17(encoding@0.1.13)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
-    dependencies:
-      '@storybook/channels': 7.6.17
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/csf-plugin': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@storybook/preview': 7.6.17
-      '@storybook/preview-api': 7.6.17
-      '@storybook/types': 7.6.17
-      '@types/find-cache-dir': 3.2.1
+      '@storybook/csf-plugin': 8.4.5(storybook@8.4.5(prettier@3.3.3))
       browser-assert: 1.2.1
-      es-module-lexer: 0.9.3
-      express: 4.19.2
-      find-cache-dir: 3.3.2
-      fs-extra: 11.2.0
-      magic-string: 0.30.9
-      rollup: 3.29.4
-      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
-    optionalDependencies:
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@storybook/channels@7.6.17':
-    dependencies:
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-events': 7.6.17
-      '@storybook/global': 5.0.0
-      qs: 6.12.1
-      telejson: 7.2.0
-      tiny-invariant: 1.3.3
+      storybook: 8.4.5(prettier@3.3.3)
+      ts-dedent: 2.2.0
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0)
 
-  '@storybook/cli@7.6.17(encoding@0.1.13)':
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
-      '@babel/types': 7.24.0
-      '@ndelangen/get-tarball': 3.0.9
-      '@storybook/codemod': 7.6.17
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/core-events': 7.6.17
-      '@storybook/core-server': 7.6.17(encoding@0.1.13)
-      '@storybook/csf-tools': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@storybook/telemetry': 7.6.17(encoding@0.1.13)
-      '@storybook/types': 7.6.17
+  '@storybook/cli@8.4.5(@babel/preset-env@7.26.0(@babel/core@7.26.0))(prettier@3.3.3)':
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/types': 7.26.0
+      '@storybook/codemod': 8.4.5
       '@types/semver': 7.5.8
-      '@yarnpkg/fslib': 2.10.3
-      '@yarnpkg/libzip': 2.3.0
-      chalk: 4.1.2
-      commander: 6.2.1
-      cross-spawn: 7.0.3
-      detect-indent: 6.1.0
-      envinfo: 7.12.0
-      execa: 5.1.1
-      express: 4.19.2
+      commander: 12.1.0
+      create-storybook: 8.4.5
+      cross-spawn: 7.0.6
+      envinfo: 7.14.0
+      fd-package-json: 1.2.0
       find-up: 5.0.0
-      fs-extra: 11.2.0
-      get-npm-tarball-url: 2.1.0
-      get-port: 5.1.1
       giget: 1.2.3
-      globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4))
+      glob: 10.4.5
+      globby: 14.0.2
+      jscodeshift: 0.15.2(@babel/preset-env@7.26.0(@babel/core@7.26.0))
       leven: 3.1.0
-      ora: 5.4.1
-      prettier: 2.8.8
       prompts: 2.4.2
-      puppeteer-core: 2.1.1
-      read-pkg-up: 7.0.1
-      semver: 7.6.0
-      strip-json-comments: 3.1.1
-      tempy: 1.0.1
+      semver: 7.6.3
+      storybook: 8.4.5(prettier@3.3.3)
+      tiny-invariant: 1.3.3
       ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
     transitivePeerDependencies:
+      - '@babel/preset-env'
       - bufferutil
-      - encoding
+      - prettier
       - supports-color
       - utf-8-validate
 
-  '@storybook/client-logger@7.6.17':
-    dependencies:
-      '@storybook/global': 5.0.0
-
-  '@storybook/codemod@7.6.17':
+  '@storybook/codemod@8.4.5':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
-      '@babel/types': 7.24.0
-      '@storybook/csf': 0.1.4
-      '@storybook/csf-tools': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@storybook/types': 7.6.17
+      '@babel/core': 7.26.0
+      '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
+      '@storybook/core': 8.4.5(prettier@3.3.3)
+      '@storybook/csf': 0.1.11
       '@types/cross-spawn': 6.0.6
-      cross-spawn: 7.0.3
-      globby: 11.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4))
-      lodash: 4.17.21
-      prettier: 2.8.8
-      recast: 0.23.6
+      cross-spawn: 7.0.6
+      es-toolkit: 1.27.0
+      globby: 14.0.2
+      jscodeshift: 0.15.2(@babel/preset-env@7.26.0(@babel/core@7.26.0))
+      prettier: 3.3.3
+      recast: 0.23.9
+      tiny-invariant: 1.3.3
     transitivePeerDependencies:
+      - bufferutil
       - supports-color
+      - utf-8-validate
 
-  '@storybook/components@7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@radix-ui/react-select': 1.2.2(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@radix-ui/react-toolbar': 1.0.4(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/client-logger': 7.6.17
-      '@storybook/csf': 0.1.4
-      '@storybook/global': 5.0.0
-      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/types': 7.6.17
-      memoizerific: 1.11.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-resize-observer: 9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      util-deprecate: 1.0.2
-    transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
-
-  '@storybook/core-client@7.6.17':
+  '@storybook/components@8.4.5(storybook@8.4.5(prettier@2.8.8))':
     dependencies:
-      '@storybook/client-logger': 7.6.17
-      '@storybook/preview-api': 7.6.17
+      storybook: 8.4.5(prettier@2.8.8)
 
-  '@storybook/core-common@7.6.17(encoding@0.1.13)':
+  '@storybook/components@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/core-events': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@storybook/types': 7.6.17
-      '@types/find-cache-dir': 3.2.1
-      '@types/node': 18.19.31
-      '@types/node-fetch': 2.6.11
-      '@types/pretty-hrtime': 1.0.3
-      chalk: 4.1.2
-      esbuild: 0.18.20
-      esbuild-register: 3.5.0(esbuild@0.18.20)
-      file-system-cache: 2.3.0
-      find-cache-dir: 3.3.2
-      find-up: 5.0.0
-      fs-extra: 11.2.0
-      glob: 10.3.12
-      handlebars: 4.7.8
-      lazy-universal-dotenv: 4.0.0
-      node-fetch: 2.7.0(encoding@0.1.13)
-      picomatch: 2.3.1
-      pkg-dir: 5.0.0
-      pretty-hrtime: 1.0.3
-      resolve-from: 5.0.0
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/core-events@7.6.17':
+  '@storybook/core-events@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      ts-dedent: 2.2.0
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/core-server@7.6.17(encoding@0.1.13)':
+  '@storybook/core@8.4.5(prettier@2.8.8)':
     dependencies:
-      '@aw-web-design/x-default-browser': 1.4.126
-      '@discoveryjs/json-ext': 0.5.7
-      '@storybook/builder-manager': 7.6.17(encoding@0.1.13)
-      '@storybook/channels': 7.6.17
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/core-events': 7.6.17
-      '@storybook/csf': 0.1.4
-      '@storybook/csf-tools': 7.6.17
-      '@storybook/docs-mdx': 0.1.0
-      '@storybook/global': 5.0.0
-      '@storybook/manager': 7.6.17
-      '@storybook/node-logger': 7.6.17
-      '@storybook/preview-api': 7.6.17
-      '@storybook/telemetry': 7.6.17(encoding@0.1.13)
-      '@storybook/types': 7.6.17
-      '@types/detect-port': 1.3.5
-      '@types/node': 18.19.31
-      '@types/pretty-hrtime': 1.0.3
-      '@types/semver': 7.5.8
+      '@storybook/csf': 0.1.11
       better-opn: 3.0.2
-      chalk: 4.1.2
-      cli-table3: 0.6.4
-      compression: 1.7.4
-      detect-port: 1.5.1
-      express: 4.19.2
-      fs-extra: 11.2.0
-      globby: 11.1.0
-      ip: 2.0.1
-      lodash: 4.17.21
-      open: 8.4.2
-      pretty-hrtime: 1.0.3
-      prompts: 2.4.2
-      read-pkg-up: 7.0.1
-      semver: 7.6.0
-      telejson: 7.2.0
-      tiny-invariant: 1.3.3
-      ts-dedent: 2.2.0
+      browser-assert: 1.2.1
+      esbuild: 0.21.5
+      esbuild-register: 3.6.0(esbuild@0.21.5)
+      jsdoc-type-pratt-parser: 4.1.0
+      process: 0.11.10
+      recast: 0.23.9
+      semver: 7.6.3
       util: 0.12.5
-      util-deprecate: 1.0.2
-      watchpack: 2.4.1
-      ws: 8.16.0
+      ws: 8.18.0
+    optionalDependencies:
+      prettier: 2.8.8
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@7.6.17':
+  '@storybook/core@8.4.5(prettier@3.3.3)':
     dependencies:
-      '@storybook/csf-tools': 7.6.17
-      unplugin: 1.10.1
+      '@storybook/csf': 0.1.11
+      better-opn: 3.0.2
+      browser-assert: 1.2.1
+      esbuild: 0.21.5
+      esbuild-register: 3.6.0(esbuild@0.21.5)
+      jsdoc-type-pratt-parser: 4.1.0
+      process: 0.11.10
+      recast: 0.23.9
+      semver: 7.6.3
+      util: 0.12.5
+      ws: 8.18.0
+    optionalDependencies:
+      prettier: 3.3.3
     transitivePeerDependencies:
+      - bufferutil
       - supports-color
+      - utf-8-validate
 
-  '@storybook/csf-tools@7.6.17':
+  '@storybook/csf-plugin@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@babel/generator': 7.24.4
-      '@babel/parser': 7.24.4
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
-      '@storybook/csf': 0.1.4
-      '@storybook/types': 7.6.17
-      fs-extra: 11.2.0
-      recast: 0.23.6
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - supports-color
+      storybook: 8.4.5(prettier@3.3.3)
+      unplugin: 1.16.0
 
-  '@storybook/csf@0.1.4':
+  '@storybook/csf@0.1.11':
     dependencies:
       type-fest: 2.19.0
 
-  '@storybook/docs-mdx@0.1.0': {}
-
-  '@storybook/docs-tools@7.6.17(encoding@0.1.13)':
-    dependencies:
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/preview-api': 7.6.17
-      '@storybook/types': 7.6.17
-      '@types/doctrine': 0.0.3
-      assert: 2.1.0
-      doctrine: 3.0.0
-      lodash: 4.17.21
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
   '@storybook/global@5.0.0': {}
 
-  '@storybook/manager-api@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/icons@1.2.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@storybook/channels': 7.6.17
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-events': 7.6.17
-      '@storybook/csf': 0.1.4
-      '@storybook/global': 5.0.0
-      '@storybook/router': 7.6.17
-      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/types': 7.6.17
-      dequal: 2.0.3
-      lodash: 4.17.21
-      memoizerific: 1.11.3
-      store2: 2.14.3
-      telejson: 7.2.0
-      ts-dedent: 2.2.0
-    transitivePeerDependencies:
-      - react
-      - react-dom
-
-  '@storybook/manager@7.6.17': {}
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
 
-  '@storybook/mdx2-csf@1.1.0': {}
+  '@storybook/manager-api@8.4.5(storybook@8.4.5(prettier@2.8.8))':
+    dependencies:
+      storybook: 8.4.5(prettier@2.8.8)
 
-  '@storybook/node-logger@7.6.17': {}
+  '@storybook/manager-api@8.4.5(storybook@8.4.5(prettier@3.3.3))':
+    dependencies:
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/postinstall@7.6.17': {}
+  '@storybook/preview-api@8.4.5(storybook@8.4.5(prettier@2.8.8))':
+    dependencies:
+      storybook: 8.4.5(prettier@2.8.8)
 
-  '@storybook/preview-api@7.6.17':
+  '@storybook/preview-api@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      '@storybook/channels': 7.6.17
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-events': 7.6.17
-      '@storybook/csf': 0.1.4
-      '@storybook/global': 5.0.0
-      '@storybook/types': 7.6.17
-      '@types/qs': 6.9.14
-      dequal: 2.0.3
-      lodash: 4.17.21
-      memoizerific: 1.11.3
-      qs: 6.12.1
-      synchronous-promise: 2.0.17
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/preview@7.6.17': {}
+  '@storybook/react-dom-shim@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@2.8.8))':
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      storybook: 8.4.5(prettier@2.8.8)
 
-  '@storybook/react-dom-shim@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/react-dom-shim@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@storybook/react-vite@7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@3.29.4)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
+  '@storybook/react-vite@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(rollup@4.27.4)(storybook@8.4.5(prettier@3.3.3))(typescript@5.6.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      '@storybook/builder-vite': 7.6.17(encoding@0.1.13)(typescript@4.9.5)(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
-      '@storybook/react': 7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)
-      '@vitejs/plugin-react': 3.1.0(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))
-      magic-string: 0.30.9
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@5.6.3)(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))
+      '@rollup/pluginutils': 5.1.3(rollup@4.27.4)
+      '@storybook/builder-vite': 8.4.5(storybook@8.4.5(prettier@3.3.3))(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))
+      '@storybook/react': 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))(typescript@5.6.3)
+      find-up: 5.0.0
+      magic-string: 0.30.13
       react: 18.2.0
-      react-docgen: 7.0.3
+      react-docgen: 7.1.0
       react-dom: 18.2.0(react@18.2.0)
-      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+      resolve: 1.22.8
+      storybook: 8.4.5(prettier@3.3.3)
+      tsconfig-paths: 4.2.0
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0)
     transitivePeerDependencies:
-      - '@preact/preset-vite'
-      - encoding
+      - '@storybook/test'
       - rollup
       - supports-color
       - typescript
-      - vite-plugin-glimmerx
 
-  '@storybook/react@7.6.17(encoding@0.1.13)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@4.9.5)':
+  '@storybook/react@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@2.8.8))(typescript@4.9.5)':
     dependencies:
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-client': 7.6.17
-      '@storybook/docs-tools': 7.6.17(encoding@0.1.13)
+      '@storybook/components': 8.4.5(storybook@8.4.5(prettier@2.8.8))
       '@storybook/global': 5.0.0
-      '@storybook/preview-api': 7.6.17
-      '@storybook/react-dom-shim': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/types': 7.6.17
-      '@types/escodegen': 0.0.6
-      '@types/estree': 0.0.51
-      '@types/node': 18.19.31
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      acorn-walk: 7.2.0
-      escodegen: 2.1.0
-      html-tags: 3.3.1
-      lodash: 4.17.21
-      prop-types: 15.8.1
+      '@storybook/manager-api': 8.4.5(storybook@8.4.5(prettier@2.8.8))
+      '@storybook/preview-api': 8.4.5(storybook@8.4.5(prettier@2.8.8))
+      '@storybook/react-dom-shim': 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@2.8.8))
+      '@storybook/theming': 8.4.5(storybook@8.4.5(prettier@2.8.8))
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      ts-dedent: 2.2.0
-      type-fest: 2.19.0
-      util-deprecate: 1.0.2
+      storybook: 8.4.5(prettier@2.8.8)
     optionalDependencies:
       typescript: 4.9.5
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
-
-  '@storybook/router@7.6.17':
-    dependencies:
-      '@storybook/client-logger': 7.6.17
-      memoizerific: 1.11.3
-      qs: 6.12.1
-
-  '@storybook/telemetry@7.6.17(encoding@0.1.13)':
-    dependencies:
-      '@storybook/client-logger': 7.6.17
-      '@storybook/core-common': 7.6.17(encoding@0.1.13)
-      '@storybook/csf-tools': 7.6.17
-      chalk: 4.1.2
-      detect-package-manager: 2.0.1
-      fetch-retry: 5.0.6
-      fs-extra: 11.2.0
-      read-pkg-up: 7.0.1
-    transitivePeerDependencies:
-      - encoding
-      - supports-color
 
-  '@storybook/theming@7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@storybook/react@8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))(typescript@5.6.3)':
     dependencies:
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@storybook/client-logger': 7.6.17
+      '@storybook/components': 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/global': 5.0.0
-      memoizerific: 1.11.3
+      '@storybook/manager-api': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/preview-api': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/react-dom-shim': 8.4.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/theming': 8.4.5(storybook@8.4.5(prettier@3.3.3))
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
+      storybook: 8.4.5(prettier@3.3.3)
+    optionalDependencies:
+      typescript: 5.6.3
 
-  '@storybook/types@7.6.17':
-    dependencies:
-      '@storybook/channels': 7.6.17
-      '@types/babel__core': 7.20.5
-      '@types/express': 4.17.21
-      file-system-cache: 2.3.0
-
-  '@swc-node/core@1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)':
-    dependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      '@swc/types': 0.1.6
-
-  '@swc-node/jest@1.8.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)':
-    dependencies:
-      '@node-rs/xxhash': 1.7.0
-      '@swc-node/core': 1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)
-      '@swc-node/register': 1.9.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      '@swc/types': 0.1.6
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@swc-node/register@1.9.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)(typescript@4.9.5)':
+  '@storybook/theming@8.4.5(storybook@8.4.5(prettier@2.8.8))':
     dependencies:
-      '@swc-node/core': 1.13.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(@swc/types@0.1.6)
-      '@swc-node/sourcemap-support': 0.5.0
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      colorette: 2.0.20
-      debug: 4.3.4
-      pirates: 4.0.6
-      tslib: 2.6.2
-      typescript: 4.9.5
-    transitivePeerDependencies:
-      - '@swc/types'
-      - supports-color
+      storybook: 8.4.5(prettier@2.8.8)
 
-  '@swc-node/sourcemap-support@0.5.0':
+  '@storybook/theming@8.4.5(storybook@8.4.5(prettier@3.3.3))':
     dependencies:
-      source-map-support: 0.5.21
-      tslib: 2.6.2
+      storybook: 8.4.5(prettier@3.3.3)
 
-  '@swc/core-darwin-arm64@1.4.13':
+  '@swc/core-darwin-arm64@1.9.2':
     optional: true
 
-  '@swc/core-darwin-x64@1.4.13':
+  '@swc/core-darwin-x64@1.9.2':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.4.13':
+  '@swc/core-linux-arm-gnueabihf@1.9.2':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.4.13':
+  '@swc/core-linux-arm64-gnu@1.9.2':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.4.13':
+  '@swc/core-linux-arm64-musl@1.9.2':
     optional: true
 
-  '@swc/core-linux-x64-gnu@1.4.13':
+  '@swc/core-linux-x64-gnu@1.9.2':
     optional: true
 
-  '@swc/core-linux-x64-musl@1.4.13':
+  '@swc/core-linux-x64-musl@1.9.2':
     optional: true
 
-  '@swc/core-win32-arm64-msvc@1.4.13':
+  '@swc/core-win32-arm64-msvc@1.9.2':
     optional: true
 
-  '@swc/core-win32-ia32-msvc@1.4.13':
+  '@swc/core-win32-ia32-msvc@1.9.2':
     optional: true
 
-  '@swc/core-win32-x64-msvc@1.4.13':
+  '@swc/core-win32-x64-msvc@1.9.2':
     optional: true
 
-  '@swc/core@1.4.13(@swc/helpers@0.5.9)':
+  '@swc/core@1.9.2(@swc/helpers@0.5.15)':
     dependencies:
       '@swc/counter': 0.1.3
-      '@swc/types': 0.1.6
+      '@swc/types': 0.1.17
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.4.13
-      '@swc/core-darwin-x64': 1.4.13
-      '@swc/core-linux-arm-gnueabihf': 1.4.13
-      '@swc/core-linux-arm64-gnu': 1.4.13
-      '@swc/core-linux-arm64-musl': 1.4.13
-      '@swc/core-linux-x64-gnu': 1.4.13
-      '@swc/core-linux-x64-musl': 1.4.13
-      '@swc/core-win32-arm64-msvc': 1.4.13
-      '@swc/core-win32-ia32-msvc': 1.4.13
-      '@swc/core-win32-x64-msvc': 1.4.13
-      '@swc/helpers': 0.5.9
+      '@swc/core-darwin-arm64': 1.9.2
+      '@swc/core-darwin-x64': 1.9.2
+      '@swc/core-linux-arm-gnueabihf': 1.9.2
+      '@swc/core-linux-arm64-gnu': 1.9.2
+      '@swc/core-linux-arm64-musl': 1.9.2
+      '@swc/core-linux-x64-gnu': 1.9.2
+      '@swc/core-linux-x64-musl': 1.9.2
+      '@swc/core-win32-arm64-msvc': 1.9.2
+      '@swc/core-win32-ia32-msvc': 1.9.2
+      '@swc/core-win32-x64-msvc': 1.9.2
+      '@swc/helpers': 0.5.15
 
   '@swc/counter@0.1.3': {}
 
-  '@swc/helpers@0.5.2':
+  '@swc/helpers@0.5.11':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  '@swc/helpers@0.5.9':
+  '@swc/helpers@0.5.15':
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  '@swc/jest@0.2.36(@swc/core@1.4.13(@swc/helpers@0.5.9))':
+  '@swc/jest@0.2.37(@swc/core@1.9.2(@swc/helpers@0.5.15))':
     dependencies:
       '@jest/create-cache-key-function': 29.7.0
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       '@swc/counter': 0.1.3
-      jsonc-parser: 3.2.1
+      jsonc-parser: 3.3.1
 
-  '@swc/types@0.1.6':
+  '@swc/types@0.1.17':
     dependencies:
       '@swc/counter': 0.1.3
 
@@ -20707,73 +19848,59 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/typography@0.5.12(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)))':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)))':
     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(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
+      tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  '@testing-library/dom@8.20.1':
+  '@tanstack/react-virtual@3.10.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/runtime': 7.24.4
-      '@types/aria-query': 5.0.4
-      aria-query: 5.1.3
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
+      '@tanstack/virtual-core': 3.10.9
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
+  '@tanstack/virtual-core@3.10.9': {}
 
-  '@testing-library/dom@9.3.4':
+  '@testing-library/dom@10.4.0':
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/runtime': 7.24.4
+      '@babel/code-frame': 7.26.2
+      '@babel/runtime': 7.26.0
       '@types/aria-query': 5.0.4
-      aria-query: 5.1.3
+      aria-query: 5.3.0
       chalk: 4.1.2
       dom-accessibility-api: 0.5.16
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/jest-dom@5.17.0':
+  '@testing-library/jest-dom@6.6.3':
     dependencies:
-      '@adobe/css-tools': 4.3.3
-      '@babel/runtime': 7.24.4
-      '@types/testing-library__jest-dom': 5.14.5
-      aria-query: 5.3.0
+      '@adobe/css-tools': 4.4.1
+      aria-query: 5.3.2
       chalk: 3.0.0
       css.escape: 1.5.1
-      dom-accessibility-api: 0.5.16
+      dom-accessibility-api: 0.6.3
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react-hooks@8.0.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
+  '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
+      '@testing-library/dom': 10.4.0
       react: 18.2.0
-      react-error-boundary: 3.1.4(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
-      react-dom: 18.2.0(react@18.2.0)
-
-  '@testing-library/react@14.3.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
-    dependencies:
-      '@babel/runtime': 7.24.4
-      '@testing-library/dom': 9.3.4
       '@types/react-dom': 18.2.4
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
 
-  '@testing-library/user-event@14.5.2(@testing-library/dom@8.20.1)':
+  '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
-      '@testing-library/dom': 8.20.1
+      '@testing-library/dom': 10.4.0
 
   '@tootallnate/once@2.0.0': {}
 
-  '@trysound/sax@0.2.0': {}
-
   '@tsconfig/node10@1.0.11': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -20787,120 +19914,74 @@ snapshots:
   '@tufjs/models@1.0.4':
     dependencies:
       '@tufjs/canonical-json': 1.0.0
-      minimatch: 9.0.4
-
-  '@tybys/wasm-util@0.8.1':
-    dependencies:
-      tslib: 2.6.2
-    optional: true
+      minimatch: 9.0.5
 
   '@types/acorn@4.0.6':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.24.0
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
-      '@types/babel__traverse': 7.20.5
+      '@types/babel__traverse': 7.20.6
 
   '@types/babel__generator@7.6.8':
     dependencies:
-      '@babel/types': 7.24.0
+      '@babel/types': 7.26.0
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.24.4
-      '@babel/types': 7.24.0
-
-  '@types/babel__traverse@7.20.5':
-    dependencies:
-      '@babel/types': 7.24.0
-
-  '@types/body-parser@1.19.5':
-    dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 15.14.9
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
 
-  '@types/buble@0.20.5':
+  '@types/babel__traverse@7.20.6':
     dependencies:
-      magic-string: 0.25.9
+      '@babel/types': 7.26.0
 
   '@types/canvas-confetti@1.6.4': {}
 
-  '@types/color-convert@2.0.3':
+  '@types/color-convert@2.0.4':
     dependencies:
-      '@types/color-name': 1.1.4
+      '@types/color-name': 1.1.5
 
-  '@types/color-name@1.1.4': {}
+  '@types/color-name@1.1.5': {}
 
   '@types/color@3.0.6':
     dependencies:
-      '@types/color-convert': 2.0.3
-
-  '@types/connect@3.4.38':
-    dependencies:
-      '@types/node': 15.14.9
+      '@types/color-convert': 2.0.4
 
   '@types/cross-spawn@6.0.6':
     dependencies:
-      '@types/node': 20.2.5
+      '@types/node': 15.14.9
 
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 0.7.34
 
-  '@types/detect-port@1.3.5': {}
-
-  '@types/doctrine@0.0.3': {}
-
   '@types/doctrine@0.0.9': {}
 
-  '@types/ejs@3.1.5': {}
-
-  '@types/emscripten@1.39.10': {}
-
-  '@types/escodegen@0.0.6': {}
-
   '@types/eslint-scope@3.7.7':
     dependencies:
-      '@types/eslint': 8.56.9
-      '@types/estree': 1.0.5
+      '@types/eslint': 9.6.1
+      '@types/estree': 1.0.6
 
   '@types/eslint-visitor-keys@1.0.0': {}
 
-  '@types/eslint@8.56.9':
+  '@types/eslint@9.6.1':
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
 
   '@types/estree-jsx@1.0.5':
     dependencies:
-      '@types/estree': 1.0.5
-
-  '@types/estree@0.0.51': {}
-
-  '@types/estree@1.0.5': {}
-
-  '@types/express-serve-static-core@4.19.0':
-    dependencies:
-      '@types/node': 15.14.9
-      '@types/qs': 6.9.14
-      '@types/range-parser': 1.2.7
-      '@types/send': 0.17.4
-
-  '@types/express@4.17.21':
-    dependencies:
-      '@types/body-parser': 1.19.5
-      '@types/express-serve-static-core': 4.19.0
-      '@types/qs': 6.9.14
-      '@types/serve-static': 1.15.7
+      '@types/estree': 1.0.6
 
-  '@types/find-cache-dir@3.2.1': {}
+  '@types/estree@1.0.6': {}
 
   '@types/fined@1.1.5': {}
 
@@ -20919,21 +20000,19 @@ snapshots:
 
   '@types/hast@2.3.10':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
 
-  '@types/http-cache-semantics@4.0.4': {}
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
 
-  '@types/http-errors@2.0.4': {}
+  '@types/http-cache-semantics@4.0.4': {}
 
   '@types/inquirer@8.2.10':
     dependencies:
       '@types/through': 0.0.33
       rxjs: 7.8.1
 
-  '@types/is-ci@3.0.4':
-    dependencies:
-      ci-info: 3.9.0
-
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -20944,16 +20023,16 @@ snapshots:
     dependencies:
       '@types/istanbul-lib-report': 3.0.3
 
-  '@types/jest@28.1.8':
+  '@types/jest@29.5.14':
     dependencies:
-      expect: 28.1.3
-      pretty-format: 28.1.3
+      expect: 29.7.0
+      pretty-format: 29.7.0
 
-  '@types/jsdom@16.2.15':
+  '@types/jsdom@20.0.1':
     dependencies:
       '@types/node': 15.14.9
-      '@types/parse5': 6.0.3
       '@types/tough-cookie': 4.0.5
+      parse5: 7.2.1
 
   '@types/json-schema@7.0.15': {}
 
@@ -20966,61 +20045,28 @@ snapshots:
 
   '@types/lodash.debounce@4.0.9':
     dependencies:
-      '@types/lodash': 4.17.5
-
-  '@types/lodash.foreach@4.5.9':
-    dependencies:
-      '@types/lodash': 4.17.5
-
-  '@types/lodash.get@4.4.9':
-    dependencies:
-      '@types/lodash': 4.17.5
-
-  '@types/lodash.kebabcase@4.1.9':
-    dependencies:
-      '@types/lodash': 4.17.5
-
-  '@types/lodash.mapkeys@4.6.9':
-    dependencies:
-      '@types/lodash': 4.17.5
-
-  '@types/lodash.omit@4.5.9':
-    dependencies:
-      '@types/lodash': 4.17.5
+      '@types/lodash': 4.17.13
 
-  '@types/lodash@4.17.5': {}
+  '@types/lodash@4.17.13': {}
 
   '@types/marked@5.0.2': {}
 
-  '@types/mdast@3.0.15':
+  '@types/mdast@4.0.4':
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
   '@types/mdx@2.0.13': {}
 
-  '@types/mime-types@2.1.4': {}
-
-  '@types/mime@1.3.5': {}
-
   '@types/minimatch@5.1.2': {}
 
   '@types/minimist@1.2.5': {}
 
   '@types/ms@0.7.34': {}
 
-  '@types/node-fetch@2.6.11':
-    dependencies:
-      '@types/node': 20.2.5
-      form-data: 4.0.0
-
   '@types/node@12.20.55': {}
 
   '@types/node@15.14.9': {}
 
-  '@types/node@18.19.31':
-    dependencies:
-      undici-types: 5.26.5
-
   '@types/node@20.2.5': {}
 
   '@types/node@20.5.1': {}
@@ -21031,21 +20077,9 @@ snapshots:
 
   '@types/parse-numeric-range@0.0.1': {}
 
-  '@types/parse5@5.0.3': {}
+  '@types/prismjs@1.26.5': {}
 
-  '@types/parse5@6.0.3': {}
-
-  '@types/prettier@2.7.3': {}
-
-  '@types/pretty-hrtime@1.0.3': {}
-
-  '@types/prismjs@1.26.3': {}
-
-  '@types/prop-types@15.7.12': {}
-
-  '@types/qs@6.9.14': {}
-
-  '@types/range-parser@1.2.7': {}
+  '@types/prop-types@15.7.13': {}
 
   '@types/react-dom@18.2.4':
     dependencies:
@@ -21053,37 +20087,29 @@ snapshots:
 
   '@types/react@18.2.8':
     dependencies:
-      '@types/prop-types': 15.7.12
+      '@types/prop-types': 15.7.13
       '@types/scheduler': 0.23.0
       csstype: 3.1.3
 
+  '@types/react@18.3.12':
+    dependencies:
+      '@types/prop-types': 15.7.13
+      csstype: 3.1.3
+
   '@types/refractor@3.4.1':
     dependencies:
-      '@types/prismjs': 1.26.3
+      '@types/prismjs': 1.26.5
 
   '@types/resolve@1.20.6': {}
 
-  '@types/rss@0.0.30': {}
+  '@types/rss@0.0.32': {}
 
   '@types/scheduler@0.23.0': {}
 
   '@types/semver-utils@1.1.3': {}
 
-  '@types/semver@6.2.7': {}
-
   '@types/semver@7.5.8': {}
 
-  '@types/send@0.17.4':
-    dependencies:
-      '@types/mime': 1.3.5
-      '@types/node': 15.14.9
-
-  '@types/serve-static@1.15.7':
-    dependencies:
-      '@types/http-errors': 2.0.4
-      '@types/node': 15.14.9
-      '@types/send': 0.17.4
-
   '@types/shelljs@0.8.15':
     dependencies:
       '@types/glob': 7.2.0
@@ -21091,17 +20117,15 @@ snapshots:
 
   '@types/stack-utils@2.0.3': {}
 
-  '@types/testing-library__jest-dom@5.14.5':
-    dependencies:
-      '@types/jest': 28.1.8
-
   '@types/through@0.0.33':
     dependencies:
       '@types/node': 15.14.9
 
   '@types/tough-cookie@4.0.5': {}
 
-  '@types/unist@2.0.10': {}
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
 
   '@types/uuid@8.3.4': {}
 
@@ -21109,29 +20133,48 @@ snapshots:
 
   '@types/yargs-parser@21.0.3': {}
 
-  '@types/yargs@17.0.32':
+  '@types/yargs@17.0.33':
     dependencies:
       '@types/yargs-parser': 21.0.3
 
   '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)':
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
+      '@eslint-community/regexpp': 4.12.1
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/type-utils': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/utils': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
-      debug: 4.3.4
+      debug: 4.3.7
       eslint: 7.32.0
       graphemer: 1.4.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       natural-compare-lite: 1.4.0
-      semver: 7.6.0
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint@7.32.0)(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/type-utils': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
+      debug: 4.3.7
+      eslint: 7.32.0
+      graphemer: 1.4.0
+      ignore: 5.3.2
+      natural-compare-lite: 1.4.0
+      semver: 7.6.3
+      tsutils: 3.21.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/experimental-utils@1.13.0(eslint@5.16.0)':
     dependencies:
       '@types/json-schema': 7.0.15
@@ -21190,7 +20233,7 @@ snapshots:
       '@typescript-eslint/scope-manager': 4.33.0
       '@typescript-eslint/types': 4.33.0
       '@typescript-eslint/typescript-estree': 4.33.0(typescript@4.9.5)
-      debug: 4.3.4
+      debug: 4.3.7
       eslint: 7.32.0
     optionalDependencies:
       typescript: 4.9.5
@@ -21202,13 +20245,25 @@ snapshots:
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
-      debug: 4.3.4
+      debug: 4.3.7
       eslint: 7.32.0
     optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
+      debug: 4.3.7
+      eslint: 7.32.0
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/scope-manager@4.33.0':
     dependencies:
       '@typescript-eslint/types': 4.33.0
@@ -21223,11 +20278,23 @@ snapshots:
     dependencies:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
       '@typescript-eslint/utils': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
-      debug: 4.3.4
+      debug: 4.3.7
+      eslint: 7.32.0
+      tsutils: 3.21.0(typescript@4.9.5)
+    optionalDependencies:
+      typescript: 4.9.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/type-utils@5.62.0(eslint@7.32.0)(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
+      debug: 4.3.7
       eslint: 7.32.0
-      tsutils: 3.21.0(typescript@4.9.5)
+      tsutils: 3.21.0(typescript@5.6.3)
     optionalDependencies:
-      typescript: 4.9.5
+      typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
 
@@ -21246,11 +20313,11 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 3.10.1
       '@typescript-eslint/visitor-keys': 3.10.1
-      debug: 4.3.4
+      debug: 4.3.7
       glob: 7.2.3
       is-glob: 4.0.3
       lodash: 4.17.21
-      semver: 7.6.0
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@3.9.10)
     optionalDependencies:
       typescript: 3.9.10
@@ -21261,10 +20328,10 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 4.33.0
       '@typescript-eslint/visitor-keys': 4.33.0
-      debug: 4.3.4
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.0
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
@@ -21275,19 +20342,33 @@ snapshots:
     dependencies:
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/visitor-keys': 5.62.0
-      debug: 4.3.4
+      debug: 4.3.7
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.6.0
+      semver: 7.6.3
       tsutils: 3.21.0(typescript@4.9.5)
     optionalDependencies:
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@5.62.0(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.3.7
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.6.3
+      tsutils: 3.21.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@5.62.0(eslint@7.32.0)(typescript@4.9.5)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@7.32.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@7.32.0)
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
@@ -21295,7 +20376,22 @@ snapshots:
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5)
       eslint: 7.32.0
       eslint-scope: 5.1.1
-      semver: 7.6.0
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@typescript-eslint/utils@5.62.0(eslint@7.32.0)(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@7.32.0)
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
+      eslint: 7.32.0
+      eslint-scope: 5.1.1
+      semver: 7.6.3
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -21314,112 +20410,99 @@ snapshots:
       '@typescript-eslint/types': 5.62.0
       eslint-visitor-keys: 3.4.3
 
-  '@vitejs/plugin-react@3.1.0(vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3))':
+  '@ungap/structured-clone@1.2.0': {}
+
+  '@vitejs/plugin-react@4.3.3(vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0))':
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4)
-      magic-string: 0.27.0
-      react-refresh: 0.14.0
-      vite: 4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3)
+      '@babel/core': 7.26.0
+      '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.0)
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.14.2
+      vite: 5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@webassemblyjs/ast@1.12.1':
+  '@webassemblyjs/ast@1.14.1':
     dependencies:
-      '@webassemblyjs/helper-numbers': 1.11.6
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
+      '@webassemblyjs/helper-numbers': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
 
-  '@webassemblyjs/floating-point-hex-parser@1.11.6': {}
+  '@webassemblyjs/floating-point-hex-parser@1.13.2': {}
 
-  '@webassemblyjs/helper-api-error@1.11.6': {}
+  '@webassemblyjs/helper-api-error@1.13.2': {}
 
-  '@webassemblyjs/helper-buffer@1.12.1': {}
+  '@webassemblyjs/helper-buffer@1.14.1': {}
 
-  '@webassemblyjs/helper-numbers@1.11.6':
+  '@webassemblyjs/helper-numbers@1.13.2':
     dependencies:
-      '@webassemblyjs/floating-point-hex-parser': 1.11.6
-      '@webassemblyjs/helper-api-error': 1.11.6
+      '@webassemblyjs/floating-point-hex-parser': 1.13.2
+      '@webassemblyjs/helper-api-error': 1.13.2
       '@xtuc/long': 4.2.2
 
-  '@webassemblyjs/helper-wasm-bytecode@1.11.6': {}
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2': {}
 
-  '@webassemblyjs/helper-wasm-section@1.12.1':
+  '@webassemblyjs/helper-wasm-section@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/wasm-gen': 1.12.1
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/wasm-gen': 1.14.1
 
-  '@webassemblyjs/ieee754@1.11.6':
+  '@webassemblyjs/ieee754@1.13.2':
     dependencies:
       '@xtuc/ieee754': 1.2.0
 
-  '@webassemblyjs/leb128@1.11.6':
+  '@webassemblyjs/leb128@1.13.2':
     dependencies:
       '@xtuc/long': 4.2.2
 
-  '@webassemblyjs/utf8@1.11.6': {}
+  '@webassemblyjs/utf8@1.13.2': {}
 
-  '@webassemblyjs/wasm-edit@1.12.1':
+  '@webassemblyjs/wasm-edit@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/helper-wasm-section': 1.12.1
-      '@webassemblyjs/wasm-gen': 1.12.1
-      '@webassemblyjs/wasm-opt': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-      '@webassemblyjs/wast-printer': 1.12.1
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/helper-wasm-section': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-opt': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      '@webassemblyjs/wast-printer': 1.14.1
 
-  '@webassemblyjs/wasm-gen@1.12.1':
+  '@webassemblyjs/wasm-gen@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/ieee754': 1.11.6
-      '@webassemblyjs/leb128': 1.11.6
-      '@webassemblyjs/utf8': 1.11.6
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
 
-  '@webassemblyjs/wasm-opt@1.12.1':
+  '@webassemblyjs/wasm-opt@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-buffer': 1.12.1
-      '@webassemblyjs/wasm-gen': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-buffer': 1.14.1
+      '@webassemblyjs/wasm-gen': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
 
-  '@webassemblyjs/wasm-parser@1.12.1':
+  '@webassemblyjs/wasm-parser@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/helper-api-error': 1.11.6
-      '@webassemblyjs/helper-wasm-bytecode': 1.11.6
-      '@webassemblyjs/ieee754': 1.11.6
-      '@webassemblyjs/leb128': 1.11.6
-      '@webassemblyjs/utf8': 1.11.6
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/helper-api-error': 1.13.2
+      '@webassemblyjs/helper-wasm-bytecode': 1.13.2
+      '@webassemblyjs/ieee754': 1.13.2
+      '@webassemblyjs/leb128': 1.13.2
+      '@webassemblyjs/utf8': 1.13.2
 
-  '@webassemblyjs/wast-printer@1.12.1':
+  '@webassemblyjs/wast-printer@1.14.1':
     dependencies:
-      '@webassemblyjs/ast': 1.12.1
+      '@webassemblyjs/ast': 1.14.1
       '@xtuc/long': 4.2.2
 
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
 
-  '@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.18.20)':
-    dependencies:
-      esbuild: 0.18.20
-      tslib: 2.6.2
-
-  '@yarnpkg/fslib@2.10.3':
-    dependencies:
-      '@yarnpkg/libzip': 2.3.0
-      tslib: 1.14.1
-
-  '@yarnpkg/libzip@2.3.0':
-    dependencies:
-      '@types/emscripten': 1.39.10
-      tslib: 1.14.1
-
   JSONStream@1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -21429,21 +20512,10 @@ snapshots:
 
   abbrev@1.1.1: {}
 
-  abortcontroller-polyfill@1.7.5: {}
-
-  accepts@1.3.8:
-    dependencies:
-      mime-types: 2.1.35
-      negotiator: 0.6.3
-
-  acorn-globals@6.0.0:
-    dependencies:
-      acorn: 7.4.1
-      acorn-walk: 7.2.0
-
-  acorn-import-assertions@1.9.0(acorn@8.11.3):
+  acorn-globals@7.0.1:
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
 
   acorn-jsx@3.0.1:
     dependencies:
@@ -21457,13 +20529,13 @@ snapshots:
     dependencies:
       acorn: 7.4.1
 
-  acorn-jsx@5.3.2(acorn@8.11.3):
+  acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
-      acorn: 8.11.3
+      acorn: 8.14.0
 
-  acorn-walk@7.2.0: {}
-
-  acorn-walk@8.3.2: {}
+  acorn-walk@8.3.4:
+    dependencies:
+      acorn: 8.14.0
 
   acorn@3.3.0: {}
 
@@ -21473,15 +20545,11 @@ snapshots:
 
   acorn@7.4.1: {}
 
-  acorn@8.11.3: {}
-
-  address@1.2.2: {}
-
-  agent-base@5.1.1: {}
+  acorn@8.14.0: {}
 
   agent-base@6.0.2:
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -21505,32 +20573,32 @@ snapshots:
       json-schema-traverse: 0.4.1
       uri-js: 4.4.1
 
-  ajv@8.12.0:
+  ajv@8.17.1:
     dependencies:
       fast-deep-equal: 3.1.3
+      fast-uri: 3.0.3
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
-      uri-js: 4.4.1
 
-  algoliasearch@4.23.3:
-    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
-
-  anser@2.1.1: {}
+  algoliasearch@4.24.0:
+    dependencies:
+      '@algolia/cache-browser-local-storage': 4.24.0
+      '@algolia/cache-common': 4.24.0
+      '@algolia/cache-in-memory': 4.24.0
+      '@algolia/client-account': 4.24.0
+      '@algolia/client-analytics': 4.24.0
+      '@algolia/client-common': 4.24.0
+      '@algolia/client-personalization': 4.24.0
+      '@algolia/client-search': 4.24.0
+      '@algolia/logger-common': 4.24.0
+      '@algolia/logger-console': 4.24.0
+      '@algolia/recommend': 4.24.0
+      '@algolia/requester-browser-xhr': 4.24.0
+      '@algolia/requester-common': 4.24.0
+      '@algolia/requester-node-http': 4.24.0
+      '@algolia/transporter': 4.24.0
+
+  anser@2.3.0: {}
 
   ansi-align@3.0.1:
     dependencies:
@@ -21548,6 +20616,8 @@ snapshots:
     dependencies:
       type-fest: 1.4.0
 
+  ansi-escapes@6.2.1: {}
+
   ansi-red@0.1.1:
     dependencies:
       ansi-wrap: 0.1.0
@@ -21560,9 +20630,7 @@ snapshots:
 
   ansi-regex@5.0.1: {}
 
-  ansi-regex@6.0.1: {}
-
-  ansi-sequence-parser@1.1.1: {}
+  ansi-regex@6.1.0: {}
 
   ansi-styles@2.2.1: {}
 
@@ -21587,8 +20655,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  app-root-dir@1.0.2: {}
-
   aproba@2.0.0: {}
 
   are-we-there-yet@3.0.1:
@@ -21608,16 +20674,14 @@ snapshots:
 
   aria-hidden@1.2.4:
     dependencies:
-      tslib: 2.6.2
-
-  aria-query@5.1.3:
-    dependencies:
-      deep-equal: 2.2.3
+      tslib: 2.8.1
 
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
 
+  aria-query@5.3.2: {}
+
   arr-diff@4.0.0: {}
 
   arr-flatten@1.1.0: {}
@@ -21631,15 +20695,13 @@ snapshots:
 
   array-each@1.0.1: {}
 
-  array-flatten@1.1.1: {}
-
   array-ify@1.0.0: {}
 
   array-includes@3.1.8:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
       is-string: 1.0.7
@@ -21656,7 +20718,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
@@ -21665,7 +20727,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       es-shim-unscopables: 1.0.2
@@ -21674,28 +20736,21 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-shim-unscopables: 1.0.2
 
   array.prototype.flatmap@1.3.2:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-shim-unscopables: 1.0.2
-
-  array.prototype.toreversed@1.1.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-shim-unscopables: 1.0.2
 
-  array.prototype.tosorted@1.1.3:
+  array.prototype.tosorted@1.1.4:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-shim-unscopables: 1.0.2
 
@@ -21704,7 +20759,7 @@ snapshots:
       array-buffer-byte-length: 1.0.1
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
       is-array-buffer: 3.0.4
@@ -21714,31 +20769,19 @@ snapshots:
 
   arrify@2.0.1: {}
 
-  assert@2.1.0:
-    dependencies:
-      call-bind: 1.0.7
-      is-nan: 1.3.2
-      object-is: 1.1.6
-      object.assign: 4.1.5
-      util: 0.12.5
-
   assign-symbols@1.0.0: {}
 
   ast-types-flow@0.0.8: {}
 
   ast-types@0.16.1:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   astral-regex@1.0.0: {}
 
   astral-regex@2.0.0: {}
 
-  astring@1.8.6: {}
-
-  async-limiter@1.0.1: {}
-
-  async@3.2.5: {}
+  astring@1.9.0: {}
 
   asynckit@0.4.0: {}
 
@@ -21748,53 +20791,49 @@ snapshots:
     dependencies:
       gulp-header: 1.8.12
 
-  autoprefixer@10.4.19(postcss@8.4.38):
+  autoprefixer@10.4.20(postcss@8.4.49):
     dependencies:
-      browserslist: 4.23.0
-      caniuse-lite: 1.0.30001609
+      browserslist: 4.24.2
+      caniuse-lite: 1.0.30001683
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss: 8.4.38
+      picocolors: 1.1.1
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.0.0
 
-  axe-core@4.7.0: {}
-
-  axe-core@4.9.0: {}
+  axe-core@4.10.2: {}
 
-  axobject-query@3.2.1:
-    dependencies:
-      dequal: 2.0.3
+  axobject-query@4.1.0: {}
 
-  b4a@1.6.6: {}
+  b4a@1.6.7: {}
 
-  babel-core@7.0.0-bridge.0(@babel/core@7.24.4):
+  babel-core@7.0.0-bridge.0(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
 
   babel-eslint@10.1.0(eslint@7.32.0):
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/parser': 7.24.4
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/code-frame': 7.26.2
+      '@babel/parser': 7.26.2
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       eslint: 7.32.0
       eslint-visitor-keys: 1.3.0
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  babel-jest@28.1.3(@babel/core@7.24.4):
+  babel-jest@29.7.0(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
-      '@jest/transform': 28.1.3
+      '@babel/core': 7.26.0
+      '@jest/transform': 29.7.0
       '@types/babel__core': 7.20.5
       babel-plugin-istanbul: 6.1.1
-      babel-preset-jest: 28.1.3(@babel/core@7.24.4)
+      babel-preset-jest: 29.6.3(@babel/core@7.26.0)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
@@ -21803,13 +20842,13 @@ snapshots:
 
   babel-plugin-add-module-exports@1.0.4: {}
 
-  babel-plugin-dev-expression@0.2.3(@babel/core@7.24.4):
+  babel-plugin-dev-expression@0.2.3(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
-      '@babel/helper-plugin-utils': 7.24.0
+      '@babel/helper-plugin-utils': 7.25.9
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-instrument: 5.2.1
@@ -21817,108 +20856,114 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-jest-hoist@28.1.3:
+  babel-plugin-jest-hoist@29.6.3:
     dependencies:
-      '@babel/template': 7.24.0
-      '@babel/types': 7.24.0
+      '@babel/template': 7.25.9
+      '@babel/types': 7.26.0
       '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.20.5
+      '@types/babel__traverse': 7.20.6
 
-  babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.4):
+  babel-plugin-polyfill-corejs2@0.4.12(@babel/core@7.26.0):
     dependencies:
-      '@babel/compat-data': 7.24.4
-      '@babel/core': 7.24.4
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4)
+      '@babel/compat-data': 7.26.2
+      '@babel/core': 7.26.0
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.0)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.1.7(@babel/core@7.24.4):
+  babel-plugin-polyfill-corejs3@0.1.7(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-define-polyfill-provider': 0.1.5(@babel/core@7.24.4)
-      core-js-compat: 3.36.1
+      '@babel/core': 7.26.0
+      '@babel/helper-define-polyfill-provider': 0.1.5(@babel/core@7.26.0)
+      core-js-compat: 3.39.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.4):
+  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4)
-      core-js-compat: 3.36.1
+      '@babel/core': 7.26.0
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.0)
+      core-js-compat: 3.39.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.1(@babel/core@7.24.4):
+  babel-plugin-polyfill-regenerator@0.6.3(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-transform-next-use-client@1.1.1(@babel/core@7.24.4):
+  babel-plugin-transform-next-use-client@1.1.1(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
 
   babel-plugin-transform-react-remove-prop-types@0.4.24: {}
 
-  babel-preset-current-node-syntax@1.0.1(@babel/core@7.24.4):
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.4)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.4)
+  babel-preset-current-node-syntax@1.1.0(@babel/core@7.26.0):
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.26.0)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-attributes': 7.26.0(@babel/core@7.26.0)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.26.0)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.26.0)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.26.0)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.26.0)
 
   babel-preset-env-modules@1.0.1:
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
-      babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.24.4)
-      browserslist: 4.23.0
+      '@babel/core': 7.26.0
+      '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
+      babel-plugin-polyfill-corejs3: 0.1.7(@babel/core@7.26.0)
+      browserslist: 4.24.2
       lodash: 4.17.21
     transitivePeerDependencies:
       - supports-color
 
-  babel-preset-jest@28.1.3(@babel/core@7.24.4):
+  babel-preset-jest@29.6.3(@babel/core@7.26.0):
     dependencies:
-      '@babel/core': 7.24.4
-      babel-plugin-jest-hoist: 28.1.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.4)
-
-  bail@1.0.5: {}
+      '@babel/core': 7.26.0
+      babel-plugin-jest-hoist: 29.6.3
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
 
   bail@2.0.2: {}
 
   balanced-match@1.0.2: {}
 
-  bare-events@2.2.2:
+  bare-events@2.5.0:
     optional: true
 
-  bare-fs@2.2.3:
+  bare-fs@2.3.5:
     dependencies:
-      bare-events: 2.2.2
-      bare-path: 2.1.1
-      streamx: 2.16.1
+      bare-events: 2.5.0
+      bare-path: 2.1.3
+      bare-stream: 2.3.2
+    optional: true
+
+  bare-os@2.4.4:
     optional: true
 
-  bare-os@2.2.1:
+  bare-path@2.1.3:
+    dependencies:
+      bare-os: 2.4.4
     optional: true
 
-  bare-path@2.1.1:
+  bare-stream@2.3.2:
     dependencies:
-      bare-os: 2.2.1
+      streamx: 2.20.2
     optional: true
 
-  base-x@3.0.9:
+  base-x@3.0.10:
     dependencies:
       safe-buffer: 5.2.1
 
@@ -21942,8 +20987,6 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
-  big-integer@1.6.52: {}
-
   big.js@5.2.2: {}
 
   binary-extensions@2.3.0: {}
@@ -21960,25 +21003,6 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  body-parser@1.20.2:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 2.6.9(supports-color@6.1.0)
-      depd: 2.0.0
-      destroy: 1.2.0
-      http-errors: 2.0.0
-      iconv-lite: 0.4.24
-      on-finished: 2.4.1
-      qs: 6.11.0
-      raw-body: 2.5.2
-      type-is: 1.6.18
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  boolbase@1.0.0: {}
-
   boolify@1.0.1: {}
 
   boxen@7.1.1:
@@ -21992,10 +21016,6 @@ snapshots:
       widest-line: 4.0.1
       wrap-ansi: 8.1.0
 
-  bplist-parser@0.2.0:
-    dependencies:
-      big-integer: 1.6.52
-
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -22020,44 +21040,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  braces@3.0.2:
-    dependencies:
-      fill-range: 7.0.1
-
-  breakword@1.0.6:
+  braces@3.0.3:
     dependencies:
-      wcwidth: 1.0.1
+      fill-range: 7.1.1
 
   browser-assert@1.2.1: {}
 
-  browser-process-hrtime@1.0.0: {}
-
-  browserify-zlib@0.1.4:
-    dependencies:
-      pako: 0.2.9
-
-  browserslist@4.23.0:
+  browserslist@4.24.2:
     dependencies:
-      caniuse-lite: 1.0.30001609
-      electron-to-chromium: 1.4.736
-      node-releases: 2.0.14
-      update-browserslist-db: 1.0.13(browserslist@4.23.0)
+      caniuse-lite: 1.0.30001683
+      electron-to-chromium: 1.5.63
+      node-releases: 2.0.18
+      update-browserslist-db: 1.1.1(browserslist@4.24.2)
 
   bser@2.1.1:
     dependencies:
       node-int64: 0.4.0
 
-  buble@0.19.6:
-    dependencies:
-      chalk: 2.4.2
-      magic-string: 0.25.9
-      minimist: 1.2.8
-      os-homedir: 1.0.2
-      regexpu-core: 4.8.0
-      vlq: 1.0.1
-
-  buffer-crc32@0.2.13: {}
-
   buffer-from@1.1.2: {}
 
   buffer@5.7.1:
@@ -22070,10 +21069,6 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  builtins@5.1.0:
-    dependencies:
-      semver: 7.6.0
-
   bundle-require@3.1.2(esbuild@0.15.18):
     dependencies:
       esbuild: 0.15.18
@@ -22083,10 +21078,6 @@ snapshots:
     dependencies:
       streamsearch: 1.1.0
 
-  bytes@3.0.0: {}
-
-  bytes@3.1.2: {}
-
   cac@6.7.14: {}
 
   cacache@16.1.3:
@@ -22114,16 +21105,16 @@ snapshots:
 
   cacache@17.1.4:
     dependencies:
-      '@npmcli/fs': 3.1.0
+      '@npmcli/fs': 3.1.1
       fs-minipass: 3.0.3
-      glob: 10.3.12
+      glob: 10.4.5
       lru-cache: 7.18.3
-      minipass: 7.0.4
+      minipass: 7.1.2
       minipass-collect: 1.0.2
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
       p-map: 4.0.0
-      ssri: 10.0.5
+      ssri: 10.0.6
       tar: 6.2.1
       unique-filename: 3.0.0
 
@@ -22164,7 +21155,7 @@ snapshots:
   camel-case@4.1.2:
     dependencies:
       pascal-case: 3.1.2
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   camelcase-css@2.0.1: {}
 
@@ -22180,18 +21171,16 @@ snapshots:
 
   camelcase@7.0.1: {}
 
-  caniuse-lite@1.0.30001609: {}
+  caniuse-lite@1.0.30001683: {}
 
-  canvas-confetti@1.9.2: {}
+  canvas-confetti@1.9.3: {}
 
   capital-case@1.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
-  ccount@1.1.0: {}
-
   ccount@2.0.1: {}
 
   chalk@1.1.3:
@@ -22233,13 +21222,11 @@ snapshots:
       path-case: 3.0.4
       sentence-case: 3.0.4
       snake-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   char-regex@1.0.2: {}
 
-  char-regex@2.0.1: {}
-
-  character-entities-html4@1.1.4: {}
+  char-regex@2.0.2: {}
 
   character-entities-html4@2.1.0: {}
 
@@ -22260,7 +21247,7 @@ snapshots:
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
       is-glob: 4.0.3
@@ -22273,7 +21260,7 @@ snapshots:
 
   chownr@2.0.0: {}
 
-  chrome-trace-event@1.0.3: {}
+  chrome-trace-event@1.0.4: {}
 
   ci-info@3.9.0: {}
 
@@ -22281,7 +21268,7 @@ snapshots:
     dependencies:
       consola: 3.2.3
 
-  cjs-module-lexer@1.2.3: {}
+  cjs-module-lexer@1.4.1: {}
 
   class-utils@0.3.6:
     dependencies:
@@ -22314,7 +21301,7 @@ snapshots:
 
   cli-spinners@2.9.2: {}
 
-  cli-table3@0.6.4:
+  cli-table3@0.6.5:
     dependencies:
       string-width: 4.2.3
     optionalDependencies:
@@ -22348,12 +21335,6 @@ snapshots:
       strip-ansi: 5.2.0
       wrap-ansi: 5.1.0
 
-  cliui@6.0.0:
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -22372,7 +21353,7 @@ snapshots:
 
   clsx@1.2.1: {}
 
-  clsx@2.1.0: {}
+  clsx@2.1.1: {}
 
   cmdk@0.2.1(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
@@ -22386,6 +21367,8 @@ snapshots:
 
   coffee-script@1.12.7: {}
 
+  collapse-white-space@2.1.0: {}
+
   collect-v8-coverage@1.0.2: {}
 
   collection-visit@1.0.0:
@@ -22433,6 +21416,8 @@ snapshots:
 
   commander@11.0.0: {}
 
+  commander@12.1.0: {}
+
   commander@2.20.3: {}
 
   commander@4.1.1: {}
@@ -22443,7 +21428,7 @@ snapshots:
 
   commander@7.2.0: {}
 
-  comment-json@4.2.3:
+  comment-json@4.2.5:
     dependencies:
       array-timsort: 1.0.3
       core-util-is: 1.0.3
@@ -22466,26 +21451,6 @@ snapshots:
 
   component-emitter@1.3.1: {}
 
-  component-props@1.1.1: {}
-
-  component-xor@0.0.4: {}
-
-  compressible@2.0.18:
-    dependencies:
-      mime-db: 1.52.0
-
-  compression@1.7.4:
-    dependencies:
-      accepts: 1.3.8
-      bytes: 3.0.0
-      compressible: 2.0.18
-      debug: 2.6.9(supports-color@6.1.0)
-      on-headers: 1.0.2
-      safe-buffer: 5.1.2
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   compute-scroll-into-view@3.1.0: {}
 
   concat-map@0.0.1: {}
@@ -22508,11 +21473,13 @@ snapshots:
       lodash: 4.17.21
       rxjs: 7.8.1
       shell-quote: 1.8.1
-      spawn-command: 0.0.2-1
+      spawn-command: 0.0.2
       supports-color: 8.1.1
       tree-kill: 1.2.2
       yargs: 17.7.2
 
+  confbox@0.1.8: {}
+
   config-chain@1.1.13:
     dependencies:
       ini: 1.3.8
@@ -22535,25 +21502,20 @@ snapshots:
   constant-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
       upper-case: 2.0.2
 
-  content-disposition@0.5.4:
-    dependencies:
-      safe-buffer: 5.2.1
-
-  content-type@1.0.5: {}
-
-  contentlayer@0.3.4(esbuild@0.20.2):
+  contentlayer2@0.5.3(acorn@8.14.0)(esbuild@0.21.5):
     dependencies:
-      '@contentlayer/cli': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/client': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/source-files': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/source-remote-files': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/utils': 0.3.4
+      '@contentlayer2/cli': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/client': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/source-files': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/source-remote-files': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/utils': 0.5.3
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
@@ -22573,31 +21535,23 @@ snapshots:
       meow: 8.1.2
       split2: 3.2.2
 
-  convert-source-map@1.9.0: {}
-
   convert-source-map@2.0.0: {}
 
-  cookie-signature@1.0.6: {}
-
-  cookie@0.6.0: {}
-
   copy-descriptor@0.1.1: {}
 
-  core-js-compat@3.36.1:
+  core-js-compat@3.39.0:
     dependencies:
-      browserslist: 4.23.0
-
-  core-js@3.36.1: {}
+      browserslist: 4.24.2
 
   core-js@3.39.0: {}
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.9.5))(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@4.9.5)
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
       typescript: 4.9.5
 
   cosmiconfig@8.3.6(typescript@4.9.5):
@@ -22609,6 +21563,30 @@ snapshots:
     optionalDependencies:
       typescript: 4.9.5
 
+  cosmiconfig@9.0.0(typescript@4.9.5):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 4.9.5
+
+  create-jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)):
+    dependencies:
+      '@jest/types': 29.6.3
+      chalk: 4.1.2
+      exit: 0.1.2
+      graceful-fs: 4.2.11
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      jest-util: 29.7.0
+      prompts: 2.4.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - ts-node
+
   create-react-class@15.7.0:
     dependencies:
       loose-envify: 1.4.0
@@ -22616,19 +21594,32 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  create-storybook@8.4.5:
+    dependencies:
+      '@types/semver': 7.5.8
+      commander: 12.1.0
+      execa: 5.1.1
+      fd-package-json: 1.2.0
+      find-up: 5.0.0
+      ora: 5.4.1
+      prettier: 3.3.3
+      prompts: 2.4.2
+      semver: 7.6.3
+      storybook: 8.4.5(prettier@3.3.3)
+      tiny-invariant: 1.3.3
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   crelt@1.0.6: {}
 
   cross-env@7.0.3:
     dependencies:
-      cross-spawn: 7.0.3
-
-  cross-spawn@5.1.0:
-    dependencies:
-      lru-cache: 4.1.5
-      shebang-command: 1.2.0
-      which: 1.3.1
+      cross-spawn: 7.0.6
 
-  cross-spawn@6.0.5:
+  cross-spawn@6.0.6:
     dependencies:
       nice-try: 1.0.5
       path-key: 2.0.1
@@ -22636,41 +21627,20 @@ snapshots:
       shebang-command: 1.2.0
       which: 1.3.1
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crypto-random-string@2.0.0: {}
-
   crypto-random-string@4.0.0:
     dependencies:
       type-fest: 1.4.0
 
-  css-select@4.3.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 4.3.1
-      domutils: 2.8.0
-      nth-check: 2.1.1
-
-  css-tree@1.1.3:
-    dependencies:
-      mdn-data: 2.0.14
-      source-map: 0.6.1
-
-  css-what@6.1.0: {}
-
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
 
-  csso@4.2.0:
-    dependencies:
-      css-tree: 1.1.3
-
   cssom@0.3.8: {}
 
   cssom@0.5.0: {}
@@ -22681,23 +21651,10 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  csv-generate@3.4.3: {}
-
-  csv-parse@4.16.3: {}
-
-  csv-stringify@5.6.5: {}
-
-  csv@5.5.3:
-    dependencies:
-      csv-generate: 3.4.3
-      csv-parse: 4.16.3
-      csv-stringify: 5.6.5
-      stream-transform: 2.1.3
-
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
-      type: 2.7.2
+      type: 2.7.3
 
   damerau-levenshtein@1.0.8: {}
 
@@ -22733,7 +21690,9 @@ snapshots:
 
   date-fns@2.30.0:
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
+
+  date-fns@4.1.0: {}
 
   debounce@1.2.1: {}
 
@@ -22751,6 +21710,10 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.3.7:
+    dependencies:
+      ms: 2.1.3
+
   decamelize-keys@1.1.1:
     dependencies:
       decamelize: 1.2.0
@@ -22770,28 +21733,7 @@ snapshots:
     dependencies:
       mimic-response: 3.1.0
 
-  dedent@0.7.0: {}
-
-  deep-equal@2.2.3:
-    dependencies:
-      array-buffer-byte-length: 1.0.1
-      call-bind: 1.0.7
-      es-get-iterator: 1.1.3
-      get-intrinsic: 1.2.4
-      is-arguments: 1.1.1
-      is-array-buffer: 3.0.4
-      is-date-object: 1.0.5
-      is-regex: 1.1.4
-      is-shared-array-buffer: 1.0.3
-      isarray: 2.0.5
-      object-is: 1.1.6
-      object-keys: 1.1.1
-      object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
-      side-channel: 1.0.6
-      which-boxed-primitive: 1.0.2
-      which-collection: 1.0.2
-      which-typed-array: 1.1.15
+  dedent@1.5.3: {}
 
   deep-extend@0.6.0: {}
 
@@ -22799,11 +21741,6 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
-  default-browser-id@3.0.0:
-    dependencies:
-      bplist-parser: 0.2.0
-      untildify: 4.0.0
-
   defaults@1.0.4:
     dependencies:
       clone: 1.0.4
@@ -22857,12 +21794,8 @@ snapshots:
 
   delegates@1.0.0: {}
 
-  depd@2.0.0: {}
-
   dequal@2.0.3: {}
 
-  destroy@1.2.0: {}
-
   detect-file@1.0.0: {}
 
   detect-indent@6.1.0: {}
@@ -22875,27 +21808,18 @@ snapshots:
 
   detect-node-es@1.1.0: {}
 
-  detect-package-manager@2.0.1:
-    dependencies:
-      execa: 5.1.1
-
-  detect-port@1.5.1:
+  devlop@1.1.0:
     dependencies:
-      address: 1.2.2
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
+      dequal: 2.0.3
 
   diacritics-map@0.1.0: {}
 
   didyoumean@1.2.2: {}
 
-  diff-sequences@28.1.1: {}
+  diff-sequences@29.6.3: {}
 
   diff@4.0.2: {}
 
-  diff@5.2.0: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -22912,10 +21836,7 @@ snapshots:
 
   dom-accessibility-api@0.5.16: {}
 
-  dom-iterator@1.0.0:
-    dependencies:
-      component-props: 1.1.1
-      component-xor: 0.0.4
+  dom-accessibility-api@0.6.3: {}
 
   dom-serializer@1.4.1:
     dependencies:
@@ -22923,6 +21844,12 @@ snapshots:
       domhandler: 4.3.1
       entities: 2.2.0
 
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
   domelementtype@2.3.0: {}
 
   domexception@4.0.0:
@@ -22933,16 +21860,26 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
       domelementtype: 2.3.0
       domhandler: 4.3.1
 
+  domutils@3.1.0:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
   dot-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   dot-prop@5.3.0:
     dependencies:
@@ -22952,36 +21889,23 @@ snapshots:
     dependencies:
       is-obj: 2.0.0
 
-  dotenv-expand@10.0.0: {}
-
-  dotenv-expand@5.1.0: {}
+  dotenv-expand@11.0.7:
+    dependencies:
+      dotenv: 16.4.5
 
   dotenv@16.4.5: {}
 
-  dotenv@7.0.0: {}
-
   dotenv@8.6.0: {}
 
   duplexer@0.1.2: {}
 
-  duplexify@3.7.1:
-    dependencies:
-      end-of-stream: 1.4.4
-      inherits: 2.0.4
-      readable-stream: 2.3.8
-      stream-shift: 1.0.3
-
   eastasianwidth@0.2.0: {}
 
-  ee-first@1.1.1: {}
-
-  ejs@3.1.10:
-    dependencies:
-      jake: 10.8.7
+  electron-to-chromium@1.5.63: {}
 
-  electron-to-chromium@1.4.736: {}
+  emittery@0.13.1: {}
 
-  emittery@0.10.2: {}
+  emoji-regex-xs@1.0.0: {}
 
   emoji-regex@7.0.3: {}
 
@@ -22991,8 +21915,6 @@ snapshots:
 
   emojis-list@3.0.0: {}
 
-  encodeurl@1.0.2: {}
-
   encoding@0.1.13:
     dependencies:
       iconv-lite: 0.6.3
@@ -23008,7 +21930,7 @@ snapshots:
       memory-fs: 0.5.0
       tapable: 1.1.3
 
-  enhanced-resolve@5.16.0:
+  enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.1
@@ -23022,9 +21944,11 @@ snapshots:
 
   entities@3.0.1: {}
 
+  entities@4.5.0: {}
+
   env-paths@2.2.1: {}
 
-  envinfo@7.12.0: {}
+  envinfo@7.14.0: {}
 
   err-code@2.0.3: {}
 
@@ -23036,7 +21960,7 @@ snapshots:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.23.3:
+  es-abstract@1.23.5:
     dependencies:
       array-buffer-byte-length: 1.0.1
       arraybuffer.prototype.slice: 1.0.3
@@ -23053,7 +21977,7 @@ snapshots:
       function.prototype.name: 1.1.6
       get-intrinsic: 1.2.4
       get-symbol-description: 1.0.2
-      globalthis: 1.0.3
+      globalthis: 1.0.4
       gopd: 1.0.1
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
@@ -23069,10 +21993,10 @@ snapshots:
       is-string: 1.0.7
       is-typed-array: 1.1.13
       is-weakref: 1.0.2
-      object-inspect: 1.13.1
+      object-inspect: 1.13.3
       object-keys: 1.1.1
       object.assign: 4.1.5
-      regexp.prototype.flags: 1.5.2
+      regexp.prototype.flags: 1.5.3
       safe-array-concat: 1.1.2
       safe-regex-test: 1.0.3
       string.prototype.trim: 1.2.9
@@ -23086,43 +22010,30 @@ snapshots:
       which-typed-array: 1.1.15
 
   es-define-property@1.0.0:
-    dependencies:
-      get-intrinsic: 1.2.4
-
-  es-errors@1.3.0: {}
-
-  es-get-iterator@1.1.3:
-    dependencies:
-      call-bind: 1.0.7
-      get-intrinsic: 1.2.4
-      has-symbols: 1.0.3
-      is-arguments: 1.1.1
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-string: 1.0.7
-      isarray: 2.0.5
-      stop-iteration-iterator: 1.0.0
+    dependencies:
+      get-intrinsic: 1.2.4
+
+  es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.0.18:
+  es-iterator-helpers@1.2.0:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-set-tostringtag: 2.0.3
       function-bind: 1.1.2
       get-intrinsic: 1.2.4
-      globalthis: 1.0.3
+      globalthis: 1.0.4
+      gopd: 1.0.1
       has-property-descriptors: 1.0.2
       has-proto: 1.0.3
       has-symbols: 1.0.3
       internal-slot: 1.0.7
-      iterator.prototype: 1.1.2
+      iterator.prototype: 1.1.3
       safe-array-concat: 1.1.2
 
-  es-module-lexer@0.9.3: {}
-
-  es-module-lexer@1.5.0: {}
+  es-module-lexer@1.5.4: {}
 
   es-object-atoms@1.0.0:
     dependencies:
@@ -23144,6 +22055,8 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  es-toolkit@1.27.0: {}
+
   es5-ext@0.10.64:
     dependencies:
       es6-iterator: 2.0.3
@@ -23162,6 +22075,20 @@ snapshots:
       d: 1.0.2
       ext: 1.7.0
 
+  esast-util-from-estree@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
+
+  esast-util-from-js@2.0.1:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.14.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.2
+
   esbuild-android-64@0.15.18:
     optional: true
 
@@ -23210,12 +22137,14 @@ snapshots:
   esbuild-openbsd-64@0.15.18:
     optional: true
 
-  esbuild-plugin-alias@0.2.1: {}
+  esbuild-plugin-raw@0.1.8(esbuild@0.21.5):
+    dependencies:
+      esbuild: 0.21.5
 
-  esbuild-register@3.5.0(esbuild@0.18.20):
+  esbuild-register@3.6.0(esbuild@0.21.5):
     dependencies:
-      debug: 4.3.4
-      esbuild: 0.18.20
+      debug: 4.3.7
+      esbuild: 0.21.5
     transitivePeerDependencies:
       - supports-color
 
@@ -23281,40 +22210,38 @@ snapshots:
       '@esbuild/win32-ia32': 0.18.20
       '@esbuild/win32-x64': 0.18.20
 
-  esbuild@0.20.2:
+  esbuild@0.21.5:
     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
-
-  escalade@3.1.2: {}
+      '@esbuild/aix-ppc64': 0.21.5
+      '@esbuild/android-arm': 0.21.5
+      '@esbuild/android-arm64': 0.21.5
+      '@esbuild/android-x64': 0.21.5
+      '@esbuild/darwin-arm64': 0.21.5
+      '@esbuild/darwin-x64': 0.21.5
+      '@esbuild/freebsd-arm64': 0.21.5
+      '@esbuild/freebsd-x64': 0.21.5
+      '@esbuild/linux-arm': 0.21.5
+      '@esbuild/linux-arm64': 0.21.5
+      '@esbuild/linux-ia32': 0.21.5
+      '@esbuild/linux-loong64': 0.21.5
+      '@esbuild/linux-mips64el': 0.21.5
+      '@esbuild/linux-ppc64': 0.21.5
+      '@esbuild/linux-riscv64': 0.21.5
+      '@esbuild/linux-s390x': 0.21.5
+      '@esbuild/linux-x64': 0.21.5
+      '@esbuild/netbsd-x64': 0.21.5
+      '@esbuild/openbsd-x64': 0.21.5
+      '@esbuild/sunos-x64': 0.21.5
+      '@esbuild/win32-arm64': 0.21.5
+      '@esbuild/win32-ia32': 0.21.5
+      '@esbuild/win32-x64': 0.21.5
+
+  escalade@3.2.0: {}
 
   escape-carriage@1.3.1: {}
 
   escape-goat@4.0.0: {}
 
-  escape-html@1.0.3: {}
-
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@2.0.0: {}
@@ -23331,19 +22258,19 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0):
+  eslint-config-airbnb-base@14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 7.32.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       object.assign: 4.1.5
       object.entries: 1.1.8
 
-  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-airbnb-typescript@12.3.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
       '@typescript-eslint/parser': 4.33.0(eslint@7.32.0)(typescript@4.9.5)
-      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-config-airbnb: 18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
     transitivePeerDependencies:
       - eslint
       - eslint-plugin-import
@@ -23353,40 +22280,42 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0):
+  eslint-config-airbnb@18.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
-      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
-      eslint-plugin-react: 7.34.1(eslint@7.32.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
+      eslint-config-airbnb-base: 14.2.1(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
+      eslint-plugin-react: 7.37.2(eslint@7.32.0)
+      eslint-plugin-react-hooks: 4.6.2(eslint@7.32.0)
       object.assign: 4.1.5
       object.entries: 1.1.8
 
-  eslint-config-next@13.5.6(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-next@15.0.3(eslint@7.32.0)(typescript@5.6.3):
     dependencies:
-      '@next/eslint-plugin-next': 13.5.6
-      '@rushstack/eslint-patch': 1.10.2
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
+      '@next/eslint-plugin-next': 15.0.3
+      '@rushstack/eslint-patch': 1.10.4
+      '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint@7.32.0)(typescript@5.6.3)
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
-      eslint-plugin-react: 7.34.1(eslint@7.32.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
+      eslint-plugin-react: 7.37.2(eslint@7.32.0)
+      eslint-plugin-react-hooks: 5.0.0(eslint@7.32.0)
     optionalDependencies:
-      typescript: 4.9.5
+      typescript: 5.6.3
     transitivePeerDependencies:
       - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
       - supports-color
 
   eslint-config-prettier@8.10.0(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
 
-  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.0(eslint@7.32.0))(eslint-plugin-react@7.34.1(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
+  eslint-config-react-app@6.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(babel-eslint@10.1.0(eslint@7.32.0))(eslint-plugin-flowtype@5.10.0(eslint@7.32.0))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0))(eslint-plugin-jest@24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0))(eslint-plugin-react-hooks@4.6.2(eslint@7.32.0))(eslint-plugin-react@7.37.2(eslint@7.32.0))(eslint@7.32.0)(typescript@4.9.5):
     dependencies:
       '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
@@ -23394,10 +22323,10 @@ snapshots:
       confusing-browser-globals: 1.0.11
       eslint: 7.32.0
       eslint-plugin-flowtype: 5.10.0(eslint@7.32.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@7.32.0)
-      eslint-plugin-react: 7.34.1(eslint@7.32.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@7.32.0)
+      eslint-plugin-react: 7.37.2(eslint@7.32.0)
+      eslint-plugin-react-hooks: 4.6.2(eslint@7.32.0)
     optionalDependencies:
       eslint-plugin-jest: 24.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5)
       typescript: 4.9.5
@@ -23412,16 +22341,16 @@ snapshots:
   eslint-import-resolver-node@0.3.9:
     dependencies:
       debug: 3.2.7
-      is-core-module: 2.13.1
+      is-core-module: 2.15.1
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0):
+  eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       eslint: 7.32.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0)
       glob: 7.2.3
       is-glob: 4.0.3
       resolve: 1.22.8
@@ -23429,24 +22358,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0):
     dependencies:
-      debug: 4.3.4
-      enhanced-resolve: 5.16.0
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.3.7
+      enhanced-resolve: 5.17.1
       eslint: 7.32.0
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
       fast-glob: 3.3.2
-      get-tsconfig: 4.7.3
-      is-core-module: 2.13.1
+      get-tsconfig: 4.8.1
+      is-bun-module: 1.2.1
       is-glob: 4.0.3
+    optionalDependencies:
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)):
+  eslint-loader@4.0.2(eslint@7.32.0)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       eslint: 7.32.0
       find-cache-dir: 3.3.2
@@ -23454,38 +22385,38 @@ snapshots:
       loader-utils: 2.0.4
       object-hash: 2.2.0
       schema-utils: 2.7.1
-      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0)
+      eslint-import-resolver-typescript: 2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@7.32.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -23501,8 +22432,9 @@ snapshots:
       lodash: 4.17.21
       string-natural-compare: 3.0.1
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1)(eslint@7.32.0):
     dependencies:
+      '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
       array.prototype.flat: 1.3.2
@@ -23511,15 +22443,16 @@ snapshots:
       doctrine: 2.1.0
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
       hasown: 2.0.2
-      is-core-module: 2.13.1
+      is-core-module: 2.15.1
       is-glob: 4.0.3
       minimatch: 3.1.2
       object.fromentries: 2.0.8
       object.groupby: 1.0.3
       object.values: 1.2.0
       semver: 6.3.1
+      string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
@@ -23528,7 +22461,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -23539,7 +22472,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 7.32.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.29.1)(eslint@7.32.0))(eslint@7.32.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@2.7.1(eslint-plugin-import@2.31.0)(eslint@7.32.0))(eslint@7.32.0)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -23551,7 +22484,7 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.62.0(eslint@7.32.0)(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -23567,32 +22500,31 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-jsx-a11y@6.8.0(eslint@7.32.0):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@7.32.0):
     dependencies:
-      '@babel/runtime': 7.24.4
-      aria-query: 5.3.0
+      aria-query: 5.3.2
       array-includes: 3.1.8
       array.prototype.flatmap: 1.3.2
       ast-types-flow: 0.0.8
-      axe-core: 4.7.0
-      axobject-query: 3.2.1
+      axe-core: 4.10.2
+      axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      es-iterator-helpers: 1.0.18
       eslint: 7.32.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
       minimatch: 3.1.2
-      object.entries: 1.1.8
       object.fromentries: 2.0.8
+      safe-regex-test: 1.0.3
+      string.prototype.includes: 2.0.1
 
   eslint-plugin-node@11.1.0(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
       eslint-plugin-es: 3.0.1(eslint@7.32.0)
       eslint-utils: 2.1.0
-      ignore: 5.3.1
+      ignore: 5.3.2
       minimatch: 3.1.2
       resolve: 1.22.8
       semver: 6.3.1
@@ -23605,35 +22537,39 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 8.10.0(eslint@7.32.0)
 
-  eslint-plugin-promise@6.1.1(eslint@7.32.0):
+  eslint-plugin-promise@6.6.0(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
 
-  eslint-plugin-react-hooks@4.6.0(eslint@7.32.0):
+  eslint-plugin-react-hooks@4.6.2(eslint@7.32.0):
     dependencies:
       eslint: 7.32.0
 
-  eslint-plugin-react@7.34.1(eslint@7.32.0):
+  eslint-plugin-react-hooks@5.0.0(eslint@7.32.0):
+    dependencies:
+      eslint: 7.32.0
+
+  eslint-plugin-react@7.37.2(eslint@7.32.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlast: 1.2.5
       array.prototype.flatmap: 1.3.2
-      array.prototype.toreversed: 1.1.2
-      array.prototype.tosorted: 1.1.3
+      array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
-      es-iterator-helpers: 1.0.18
+      es-iterator-helpers: 1.2.0
       eslint: 7.32.0
       estraverse: 5.3.0
+      hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       minimatch: 3.1.2
       object.entries: 1.1.8
       object.fromentries: 2.0.8
-      object.hasown: 1.1.4
       object.values: 1.2.0
       prop-types: 15.8.1
       resolve: 2.0.0-next.5
       semver: 6.3.1
       string.prototype.matchall: 4.0.11
+      string.prototype.repeat: 1.0.0
 
   eslint-plugin-unused-imports@2.0.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0)(typescript@4.9.5))(eslint@7.32.0):
     dependencies:
@@ -23680,17 +22616,17 @@ snapshots:
 
   eslint@5.16.0:
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.26.2
       ajv: 6.12.6
       chalk: 2.4.2
-      cross-spawn: 6.0.5
-      debug: 4.3.4
+      cross-spawn: 6.0.6
+      debug: 4.3.7
       doctrine: 3.0.0
       eslint-scope: 4.0.3
       eslint-utils: 1.4.3
       eslint-visitor-keys: 1.3.0
       espree: 5.0.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       file-entry-cache: 5.0.1
       functional-red-black-tree: 1.0.1
@@ -23726,8 +22662,8 @@ snapshots:
       '@humanwhocodes/config-array': 0.5.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
-      debug: 4.3.4
+      cross-spawn: 7.0.6
+      debug: 4.3.7
       doctrine: 3.0.0
       enquirer: 2.4.1
       escape-string-regexp: 4.0.0
@@ -23735,7 +22671,7 @@ snapshots:
       eslint-utils: 2.1.0
       eslint-visitor-keys: 2.1.0
       espree: 7.3.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
       file-entry-cache: 6.0.1
@@ -23752,10 +22688,10 @@ snapshots:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.3
+      optionator: 0.9.4
       progress: 2.0.3
       regexpp: 3.2.0
-      semver: 7.6.0
+      semver: 7.6.3
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
       table: 6.8.2
@@ -23769,7 +22705,7 @@ snapshots:
       d: 1.0.2
       es5-ext: 0.10.64
       event-emitter: 0.3.5
-      type: 2.7.2
+      type: 2.7.3
 
   espree@3.5.4:
     dependencies:
@@ -23796,7 +22732,7 @@ snapshots:
 
   esprima@4.0.1: {}
 
-  esquery@1.5.0:
+  esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
 
@@ -23808,45 +22744,47 @@ snapshots:
 
   estraverse@5.3.0: {}
 
-  estree-util-attach-comments@2.1.1:
+  estree-util-attach-comments@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
-  estree-util-build-jsx@2.2.2:
+  estree-util-build-jsx@3.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      estree-util-is-identifier-name: 2.1.0
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
       estree-walker: 3.0.3
 
-  estree-util-is-identifier-name@1.1.0: {}
+  estree-util-is-identifier-name@3.0.0: {}
 
-  estree-util-is-identifier-name@2.1.0: {}
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
 
-  estree-util-to-js@1.2.0:
+  estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      astring: 1.8.6
+      astring: 1.9.0
       source-map: 0.7.4
 
-  estree-util-value-to-estree@1.3.0:
+  estree-util-value-to-estree@3.2.1:
     dependencies:
-      is-plain-obj: 3.0.0
+      '@types/estree': 1.0.6
 
-  estree-util-visit@1.2.1:
+  estree-util-visit@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   esutils@2.0.3: {}
 
-  etag@1.8.1: {}
-
   event-emitter@0.3.5:
     dependencies:
       d: 1.0.2
@@ -23858,7 +22796,7 @@ snapshots:
 
   execa@5.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -23870,7 +22808,7 @@ snapshots:
 
   execa@7.2.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 4.3.1
       is-stream: 3.0.0
@@ -23882,7 +22820,7 @@ snapshots:
 
   execa@8.0.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 8.0.1
       human-signals: 5.0.0
       is-stream: 3.0.0
@@ -23916,55 +22854,19 @@ snapshots:
     dependencies:
       homedir-polyfill: 1.0.3
 
-  expect@28.1.3:
+  expect@29.7.0:
     dependencies:
-      '@jest/expect-utils': 28.1.3
-      jest-get-type: 28.0.2
-      jest-matcher-utils: 28.1.3
-      jest-message-util: 28.1.3
-      jest-util: 28.1.3
+      '@jest/expect-utils': 29.7.0
+      jest-get-type: 29.6.3
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
 
   exponential-backoff@3.1.1: {}
 
-  express@4.19.2:
-    dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.2
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.6.0
-      cookie-signature: 1.0.6
-      debug: 2.6.9(supports-color@6.1.0)
-      depd: 2.0.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.2.0
-      fresh: 0.5.2
-      http-errors: 2.0.0
-      merge-descriptors: 1.0.1
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.7
-      proxy-addr: 2.0.7
-      qs: 6.11.0
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.18.0
-      serve-static: 1.15.0
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   ext@1.7.0:
     dependencies:
-      type: 2.7.2
+      type: 2.7.3
 
   extend-shallow@2.0.1:
     dependencies:
@@ -23998,28 +22900,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  extract-zip@1.7.0:
-    dependencies:
-      concat-stream: 1.6.2
-      debug: 2.6.9(supports-color@6.1.0)
-      mkdirp: 0.5.6
-      yauzl: 2.10.0
-    transitivePeerDependencies:
-      - supports-color
-
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
 
   fast-fifo@1.3.2: {}
 
+  fast-glob@3.3.1:
+    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.8
+
   fast-glob@3.3.2:
     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
+      micromatch: 4.0.8
 
   fast-json-stable-stringify@2.1.0: {}
 
@@ -24027,6 +22928,8 @@ snapshots:
 
   fast-memoize@2.5.2: {}
 
+  fast-uri@3.0.3: {}
+
   fastq@1.17.1:
     dependencies:
       reusify: 1.0.4
@@ -24039,17 +22942,15 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
-  fd-slicer@1.1.0:
+  fd-package-json@1.2.0:
     dependencies:
-      pend: 1.2.0
+      walk-up-path: 3.0.1
 
   fetch-blob@3.2.0:
     dependencies:
       node-domexception: 1.0.0
       web-streams-polyfill: 3.3.3
 
-  fetch-retry@5.0.6: {}
-
   fflate@0.4.8: {}
 
   figures@2.0.0:
@@ -24068,15 +22969,6 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
-  file-system-cache@2.3.0:
-    dependencies:
-      fs-extra: 11.1.1
-      ramda: 0.29.0
-
-  filelist@1.0.4:
-    dependencies:
-      minimatch: 5.1.6
-
   fill-range@2.2.4:
     dependencies:
       is-number: 2.1.0
@@ -24092,22 +22984,10 @@ snapshots:
       repeat-string: 1.6.1
       to-regex-range: 2.1.1
 
-  fill-range@7.0.1:
+  fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
-  finalhandler@1.2.0:
-    dependencies:
-      debug: 2.6.9(supports-color@6.1.0)
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.1
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   find-cache-dir@2.1.0:
     dependencies:
       commondir: 1.0.1
@@ -24139,11 +23019,6 @@ snapshots:
       locate-path: 7.2.0
       path-exists: 5.0.0
 
-  find-yarn-workspace-root2@1.2.16:
-    dependencies:
-      micromatch: 4.0.5
-      pkg-dir: 4.2.0
-
   findup-sync@3.0.0(supports-color@6.1.0):
     dependencies:
       detect-file: 1.0.0
@@ -24157,7 +23032,7 @@ snapshots:
     dependencies:
       detect-file: 1.0.0
       is-glob: 4.0.3
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       resolve-dir: 1.0.1
 
   fined@2.0.0:
@@ -24178,7 +23053,7 @@ snapshots:
 
   flat-cache@3.2.0:
     dependencies:
-      flatted: 3.3.1
+      flatted: 3.3.2
       keyv: 4.5.4
       rimraf: 3.0.2
 
@@ -24186,9 +23061,9 @@ snapshots:
 
   flatted@2.0.2: {}
 
-  flatted@3.3.1: {}
+  flatted@3.3.2: {}
 
-  flow-parser@0.233.0: {}
+  flow-parser@0.254.0: {}
 
   for-each@0.3.3:
     dependencies:
@@ -24200,14 +23075,14 @@ snapshots:
     dependencies:
       for-in: 1.0.2
 
-  foreground-child@3.1.1:
+  foreground-child@3.3.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   form-data-encoder@2.1.4: {}
 
-  form-data@4.0.0:
+  form-data@4.0.1:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
@@ -24219,8 +23094,6 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
-  forwarded@0.2.0: {}
-
   fp-and-or@0.1.4: {}
 
   fraction.js@4.3.7: {}
@@ -24229,24 +23102,22 @@ snapshots:
     dependencies:
       map-cache: 0.2.2
 
-  framer-motion@10.18.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  framer-motion@11.11.13(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
+      '@emotion/is-prop-valid': 1.3.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  framer-motion@11.2.12(@emotion/is-prop-valid@0.8.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  framer-motion@11.9.0(@emotion/is-prop-valid@1.3.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
-      '@emotion/is-prop-valid': 0.8.8
+      '@emotion/is-prop-valid': 1.3.1
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  fresh@0.5.2: {}
-
   fs-constants@1.0.0: {}
 
   fs-extra@10.1.0:
@@ -24255,12 +23126,6 @@ snapshots:
       jsonfile: 6.1.0
       universalify: 2.0.1
 
-  fs-extra@11.1.1:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
-
   fs-extra@11.2.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -24285,9 +23150,7 @@ snapshots:
 
   fs-minipass@3.0.3:
     dependencies:
-      minipass: 7.0.4
-
-  fs-monkey@1.0.5: {}
+      minipass: 7.1.2
 
   fs-readdir-recursive@1.1.0: {}
 
@@ -24302,7 +23165,7 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       functions-have-names: 1.2.3
 
   functional-red-black-tree@1.0.1: {}
@@ -24320,6 +23183,10 @@ snapshots:
       strip-ansi: 6.0.1
       wide-align: 1.1.5
 
+  geist@1.3.1(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)):
+    dependencies:
+      next: 14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+
   gensync@1.0.0-beta.2: {}
 
   get-caller-file@2.0.5: {}
@@ -24334,14 +23201,10 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
-  get-npm-tarball-url@2.1.0: {}
-
   get-package-type@0.1.0: {}
 
   get-port@4.2.0: {}
 
-  get-port@5.1.1: {}
-
   get-stdin@7.0.0: {}
 
   get-stdin@8.0.0: {}
@@ -24356,7 +23219,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
-  get-tsconfig@4.7.3:
+  get-tsconfig@4.8.1:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -24368,8 +23231,8 @@ snapshots:
       consola: 3.2.3
       defu: 6.1.4
       node-fetch-native: 1.6.4
-      nypm: 0.3.8
-      ohash: 1.1.3
+      nypm: 0.3.12
+      ohash: 1.1.4
       pathe: 1.1.2
       tar: 6.2.1
 
@@ -24383,8 +23246,6 @@ snapshots:
 
   github-from-package@0.0.0: {}
 
-  github-slugger@1.5.0: {}
-
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -24402,22 +23263,14 @@ snapshots:
 
   glob-to-regexp@0.4.1: {}
 
-  glob@10.3.12:
-    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.1.7:
+  glob@10.4.5:
     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
+      foreground-child: 3.3.0
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
 
   glob@7.2.3:
     dependencies:
@@ -24474,16 +23327,17 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
-  globalthis@1.0.3:
+  globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
+      gopd: 1.0.1
 
   globby@11.1.0:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 3.0.0
 
@@ -24491,10 +23345,19 @@ snapshots:
     dependencies:
       dir-glob: 3.0.1
       fast-glob: 3.3.2
-      ignore: 5.3.1
+      ignore: 5.3.2
       merge2: 1.4.1
       slash: 4.0.0
 
+  globby@14.0.2:
+    dependencies:
+      '@sindresorhus/merge-streams': 2.3.0
+      fast-glob: 3.3.2
+      ignore: 5.3.2
+      path-type: 5.0.0
+      slash: 5.1.0
+      unicorn-magic: 0.1.0
+
   good-listener@1.2.2:
     dependencies:
       delegate: 3.2.0
@@ -24522,8 +23385,6 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  grapheme-splitter@1.0.4: {}
-
   graphemer@1.4.0: {}
 
   gray-matter@2.1.1:
@@ -24547,15 +23408,6 @@ snapshots:
       lodash.template: 4.5.0
       through2: 2.0.5
 
-  gunzip-maybe@1.4.2:
-    dependencies:
-      browserify-zlib: 0.1.4
-      is-deflate: 1.0.0
-      is-gzip: 1.0.0
-      peek-stream: 1.1.3
-      pumpify: 1.5.1
-      through2: 2.0.5
-
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -24567,7 +23419,7 @@ snapshots:
       source-map: 0.6.1
       wordwrap: 1.0.0
     optionalDependencies:
-      uglify-js: 3.17.4
+      uglify-js: 3.19.3
 
   hard-rejection@2.1.0: {}
 
@@ -24618,130 +23470,106 @@ snapshots:
 
   has-yarn@3.0.0: {}
 
-  hash-obj@4.0.0:
-    dependencies:
-      is-obj: 3.0.0
-      sort-keys: 5.0.0
-      type-fest: 1.4.0
-
-  hash-wasm@4.11.0: {}
+  hash-wasm@4.12.0: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-parse5@6.0.1:
+  hast-util-from-html@2.0.3:
     dependencies:
-      '@types/parse5': 5.0.3
-      hastscript: 6.0.0
-      property-information: 5.6.0
-      vfile: 4.2.1
-      vfile-location: 3.2.0
-      web-namespaces: 1.1.4
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.2
+      parse5: 7.2.1
+      vfile: 6.0.3
+      vfile-message: 4.0.2
 
-  hast-util-from-parse5@7.1.2:
+  hast-util-from-parse5@8.0.2:
     dependencies:
-      '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
-      hastscript: 7.2.0
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.0
       property-information: 6.5.0
-      vfile: 5.3.7
-      vfile-location: 4.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
-  hast-util-has-property@2.0.1: {}
-
-  hast-util-heading-rank@2.1.1:
+  hast-util-heading-rank@3.0.0:
     dependencies:
-      '@types/hast': 2.3.10
-
-  hast-util-is-element@1.1.0: {}
+      '@types/hast': 3.0.4
 
   hast-util-parse-selector@2.2.5: {}
 
-  hast-util-parse-selector@3.1.1:
+  hast-util-parse-selector@4.0.0:
     dependencies:
-      '@types/hast': 2.3.10
-
-  hast-util-raw@7.2.3:
-    dependencies:
-      '@types/hast': 2.3.10
-      '@types/parse5': 6.0.3
-      hast-util-from-parse5: 7.1.2
-      hast-util-to-parse5: 7.1.0
-      html-void-elements: 2.0.1
-      parse5: 6.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
-      vfile: 5.3.7
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
+      '@types/hast': 3.0.4
 
-  hast-util-to-estree@2.3.3:
+  hast-util-to-estree@3.1.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@types/estree-jsx': 1.0.5
-      '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
+      '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
-      estree-util-attach-comments: 2.1.1
-      estree-util-is-identifier-name: 2.1.0
-      hast-util-whitespace: 2.0.1
-      mdast-util-mdx-expression: 1.3.2
-      mdast-util-mdxjs-esm: 1.3.1
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdxjs-esm: 2.0.1
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
       style-to-object: 0.4.4
-      unist-util-position: 4.0.4
+      unist-util-position: 5.0.0
       zwitch: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  hast-util-to-html@7.1.2:
-    dependencies:
-      ccount: 1.1.0
-      comma-separated-tokens: 1.0.8
-      hast-util-is-element: 1.1.0
-      hast-util-whitespace: 1.0.4
-      html-void-elements: 1.0.5
-      property-information: 5.6.0
-      space-separated-tokens: 1.1.5
-      stringify-entities: 3.1.0
-      unist-util-is: 4.1.0
-      xtend: 4.0.2
-
-  hast-util-to-html@8.0.4:
+  hast-util-to-html@9.0.3:
     dependencies:
-      '@types/hast': 2.3.10
-      '@types/unist': 2.0.10
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
       ccount: 2.0.1
       comma-separated-tokens: 2.0.3
-      hast-util-raw: 7.2.3
-      hast-util-whitespace: 2.0.1
-      html-void-elements: 2.0.1
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
-  hast-util-to-parse5@7.1.0:
+  hast-util-to-jsx-runtime@2.3.2:
     dependencies:
-      '@types/hast': 2.3.10
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
       comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdxjs-esm: 2.0.1
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
-      web-namespaces: 2.0.1
-      zwitch: 2.0.4
+      style-to-object: 1.0.8
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   hast-util-to-string@1.0.4: {}
 
-  hast-util-to-string@2.0.0:
+  hast-util-to-string@3.0.1:
     dependencies:
-      '@types/hast': 2.3.10
-
-  hast-util-whitespace@1.0.4: {}
+      '@types/hast': 3.0.4
 
-  hast-util-whitespace@2.0.1: {}
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
 
   hastscript@6.0.0:
     dependencies:
@@ -24751,18 +23579,18 @@ snapshots:
       property-information: 5.6.0
       space-separated-tokens: 1.1.5
 
-  hastscript@7.2.0:
+  hastscript@9.0.0:
     dependencies:
-      '@types/hast': 2.3.10
+      '@types/hast': 3.0.4
       comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 3.1.1
+      hast-util-parse-selector: 4.0.0
       property-information: 6.5.0
       space-separated-tokens: 2.0.2
 
   header-case@2.0.4:
     dependencies:
       capital-case: 1.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   homedir-polyfill@1.0.3:
     dependencies:
@@ -24788,22 +23616,16 @@ snapshots:
 
   html-escaper@2.0.2: {}
 
-  html-tags@3.3.1: {}
+  html-void-elements@3.0.0: {}
 
-  html-void-elements@1.0.5: {}
-
-  html-void-elements@2.0.1: {}
-
-  htmlnano@2.1.0(postcss@8.4.38)(srcset@4.0.0)(svgo@2.8.0)(terser@5.30.3)(typescript@4.9.5):
+  htmlnano@2.1.1(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5):
     dependencies:
-      cosmiconfig: 8.3.6(typescript@4.9.5)
+      cosmiconfig: 9.0.0(typescript@4.9.5)
       posthtml: 0.16.6
       timsort: 0.3.0
     optionalDependencies:
-      postcss: 8.4.38
-      srcset: 4.0.0
-      svgo: 2.8.0
-      terser: 5.30.3
+      postcss: 8.4.49
+      terser: 5.36.0
     transitivePeerDependencies:
       - typescript
 
@@ -24814,21 +23636,20 @@ snapshots:
       domutils: 2.8.0
       entities: 3.0.1
 
-  http-cache-semantics@4.1.1: {}
-
-  http-errors@2.0.0:
+  htmlparser2@9.1.0:
     dependencies:
-      depd: 2.0.0
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 2.0.1
-      toidentifier: 1.0.1
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.1.0
+      entities: 4.5.0
+
+  http-cache-semantics@4.1.1: {}
 
   http-proxy-agent@5.0.0:
     dependencies:
       '@tootallnate/once': 2.0.0
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -24837,17 +23658,10 @@ snapshots:
       quick-lru: 5.1.1
       resolve-alpn: 1.2.1
 
-  https-proxy-agent@4.0.0:
-    dependencies:
-      agent-base: 5.1.1
-      debug: 4.3.4
-    transitivePeerDependencies:
-      - supports-color
-
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
     transitivePeerDependencies:
       - supports-color
 
@@ -24865,6 +23679,8 @@ snapshots:
 
   husky@8.0.3: {}
 
+  hyperdyperid@1.2.0: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -24875,13 +23691,13 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore-walk@6.0.4:
+  ignore-walk@6.0.5:
     dependencies:
-      minimatch: 9.0.4
+      minimatch: 9.0.5
 
   ignore@4.0.6: {}
 
-  ignore@5.3.1: {}
+  ignore@5.3.2: {}
 
   imagescript@1.3.0: {}
 
@@ -24897,7 +23713,7 @@ snapshots:
       pkg-dir: 3.0.0
       resolve-cwd: 2.0.0
 
-  import-local@3.1.0:
+  import-local@3.2.0:
     dependencies:
       pkg-dir: 4.2.0
       resolve-cwd: 3.0.0
@@ -24908,7 +23724,7 @@ snapshots:
 
   infer-owner@1.0.4: {}
 
-  inflection@2.0.1: {}
+  inflection@3.0.0: {}
 
   inflight@1.0.6:
     dependencies:
@@ -24921,10 +23737,17 @@ snapshots:
 
   ini@2.0.0: {}
 
-  ini@4.1.2: {}
+  ini@4.1.3: {}
 
   inline-style-parser@0.1.1: {}
 
+  inline-style-parser@0.2.4: {}
+
+  input-otp@1.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+
   inquirer@6.5.2:
     dependencies:
       ansi-escapes: 3.2.0
@@ -24971,12 +23794,12 @@ snapshots:
 
   intersection-observer@0.10.0: {}
 
-  intl-messageformat@10.5.11:
+  intl-messageformat@10.7.7:
     dependencies:
-      '@formatjs/ecma402-abstract': 1.18.2
-      '@formatjs/fast-memoize': 2.2.0
-      '@formatjs/icu-messageformat-parser': 2.7.6
-      tslib: 2.6.2
+      '@formatjs/ecma402-abstract': 2.2.4
+      '@formatjs/fast-memoize': 2.2.3
+      '@formatjs/icu-messageformat-parser': 2.9.4
+      tslib: 2.8.1
 
   invariant@2.2.4:
     dependencies:
@@ -24987,12 +23810,6 @@ snapshots:
       jsbn: 1.1.0
       sprintf-js: 1.1.3
 
-  ip@2.0.1: {}
-
-  ipaddr.js@1.9.1: {}
-
-  is-absolute-url@3.0.3: {}
-
   is-absolute@1.0.0:
     dependencies:
       is-relative: 1.0.0
@@ -25049,7 +23866,9 @@ snapshots:
 
   is-buffer@1.1.6: {}
 
-  is-buffer@2.0.5: {}
+  is-bun-module@1.2.1:
+    dependencies:
+      semver: 7.6.3
 
   is-callable@1.2.7: {}
 
@@ -25057,10 +23876,6 @@ snapshots:
     dependencies:
       ci-info: 3.9.0
 
-  is-core-module@2.13.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-core-module@2.15.1:
     dependencies:
       hasown: 2.0.2
@@ -25081,8 +23896,6 @@ snapshots:
 
   is-decimal@2.0.1: {}
 
-  is-deflate@1.0.0: {}
-
   is-descriptor@0.1.7:
     dependencies:
       is-accessor-descriptor: 1.0.1
@@ -25123,8 +23936,6 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
-  is-gzip@1.0.0: {}
-
   is-hexadecimal@1.0.4: {}
 
   is-hexadecimal@2.0.1: {}
@@ -25144,11 +23955,6 @@ snapshots:
 
   is-map@2.0.3: {}
 
-  is-nan@1.3.2:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
-
   is-negative-zero@2.0.3: {}
 
   is-npm@6.0.0: {}
@@ -25171,18 +23977,12 @@ snapshots:
 
   is-obj@2.0.0: {}
 
-  is-obj@3.0.0: {}
-
   is-path-cwd@2.2.0: {}
 
   is-path-inside@3.0.3: {}
 
   is-plain-obj@1.1.0: {}
 
-  is-plain-obj@2.1.0: {}
-
-  is-plain-obj@3.0.0: {}
-
   is-plain-obj@4.1.0: {}
 
   is-plain-object@2.0.4:
@@ -25193,10 +23993,6 @@ snapshots:
 
   is-potential-custom-element-name@1.0.1: {}
 
-  is-reference@3.0.2:
-    dependencies:
-      '@types/estree': 1.0.5
-
   is-regex@1.1.4:
     dependencies:
       call-bind: 1.0.7
@@ -25283,14 +24079,24 @@ snapshots:
 
   istanbul-lib-instrument@5.2.1:
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/parser': 7.24.4
+      '@babel/core': 7.26.0
+      '@babel/parser': 7.26.2
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.2
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
+  istanbul-lib-instrument@6.0.3:
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/parser': 7.26.2
+      '@istanbuljs/schema': 0.1.3
+      istanbul-lib-coverage: 3.2.2
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   istanbul-lib-report@3.0.1:
     dependencies:
       istanbul-lib-coverage: 3.2.2
@@ -25299,7 +24105,7 @@ snapshots:
 
   istanbul-lib-source-maps@4.0.1:
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       istanbul-lib-coverage: 3.2.2
       source-map: 0.6.1
     transitivePeerDependencies:
@@ -25310,7 +24116,7 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  iterator.prototype@1.1.2:
+  iterator.prototype@1.1.3:
     dependencies:
       define-properties: 1.2.1
       get-intrinsic: 1.2.4
@@ -25318,158 +24124,138 @@ snapshots:
       reflect.getprototypeof: 1.0.6
       set-function-name: 2.0.2
 
-  jackspeak@2.3.6:
+  jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jake@10.8.7:
-    dependencies:
-      async: 3.2.5
-      chalk: 4.1.2
-      filelist: 1.0.4
-      minimatch: 3.1.2
-
-  jest-changed-files@28.1.3:
+  jest-changed-files@29.7.0:
     dependencies:
       execa: 5.1.1
+      jest-util: 29.7.0
       p-limit: 3.1.0
 
-  jest-circus@28.1.3:
+  jest-circus@29.7.0:
     dependencies:
-      '@jest/environment': 28.1.3
-      '@jest/expect': 28.1.3
-      '@jest/test-result': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/environment': 29.7.0
+      '@jest/expect': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
       chalk: 4.1.2
       co: 4.6.0
-      dedent: 0.7.0
+      dedent: 1.5.3
       is-generator-fn: 2.1.0
-      jest-each: 28.1.3
-      jest-matcher-utils: 28.1.3
-      jest-message-util: 28.1.3
-      jest-runtime: 28.1.3
-      jest-snapshot: 28.1.3
-      jest-util: 28.1.3
+      jest-each: 29.7.0
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-runtime: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
       p-limit: 3.1.0
-      pretty-format: 28.1.3
+      pretty-format: 29.7.0
+      pure-rand: 6.1.0
       slash: 3.0.0
       stack-utils: 2.0.6
     transitivePeerDependencies:
+      - babel-plugin-macros
       - supports-color
 
-  jest-cli@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  jest-cli@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      '@jest/test-result': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
       chalk: 4.1.2
+      create-jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
       exit: 0.1.2
-      graceful-fs: 4.2.11
-      import-local: 3.1.0
-      jest-config: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      jest-util: 28.1.3
-      jest-validate: 28.1.3
-      prompts: 2.4.2
+      import-local: 3.2.0
+      jest-config: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
       yargs: 17.7.2
     transitivePeerDependencies:
       - '@types/node'
+      - babel-plugin-macros
       - supports-color
       - ts-node
 
-  jest-config@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  jest-config@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
-      '@babel/core': 7.24.4
-      '@jest/test-sequencer': 28.1.3
-      '@jest/types': 28.1.3
-      babel-jest: 28.1.3(@babel/core@7.24.4)
+      '@babel/core': 7.26.0
+      '@jest/test-sequencer': 29.7.0
+      '@jest/types': 29.6.3
+      babel-jest: 29.7.0(@babel/core@7.26.0)
       chalk: 4.1.2
       ci-info: 3.9.0
       deepmerge: 4.3.1
       glob: 7.2.3
       graceful-fs: 4.2.11
-      jest-circus: 28.1.3
-      jest-environment-node: 28.1.3
-      jest-get-type: 28.0.2
-      jest-regex-util: 28.0.2
-      jest-resolve: 28.1.3
-      jest-runner: 28.1.3
-      jest-util: 28.1.3
-      jest-validate: 28.1.3
-      micromatch: 4.0.5
+      jest-circus: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-get-type: 29.6.3
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-runner: 29.7.0
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
+      micromatch: 4.0.8
       parse-json: 5.2.0
-      pretty-format: 28.1.3
+      pretty-format: 29.7.0
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
       '@types/node': 15.14.9
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
     transitivePeerDependencies:
+      - babel-plugin-macros
       - supports-color
 
-  jest-diff@28.1.3:
+  jest-diff@29.7.0:
     dependencies:
       chalk: 4.1.2
-      diff-sequences: 28.1.1
-      jest-get-type: 28.0.2
-      pretty-format: 28.1.3
+      diff-sequences: 29.6.3
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
 
-  jest-docblock@28.1.1:
+  jest-docblock@29.7.0:
     dependencies:
       detect-newline: 3.1.0
 
-  jest-each@28.1.3:
+  jest-each@29.7.0:
     dependencies:
-      '@jest/types': 28.1.3
+      '@jest/types': 29.6.3
       chalk: 4.1.2
-      jest-get-type: 28.0.2
-      jest-util: 28.1.3
-      pretty-format: 28.1.3
+      jest-get-type: 29.6.3
+      jest-util: 29.7.0
+      pretty-format: 29.7.0
 
-  jest-environment-jsdom@28.1.3:
+  jest-environment-jsdom@29.7.0:
     dependencies:
-      '@jest/environment': 28.1.3
-      '@jest/fake-timers': 28.1.3
-      '@jest/types': 28.1.3
-      '@types/jsdom': 16.2.15
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/jsdom': 20.0.1
       '@types/node': 15.14.9
-      jest-mock: 28.1.3
-      jest-util: 28.1.3
-      jsdom: 19.0.0
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
+      jsdom: 20.0.3
     transitivePeerDependencies:
       - bufferutil
-      - canvas
       - supports-color
       - utf-8-validate
 
-  jest-environment-node@28.1.3:
+  jest-environment-node@29.7.0:
     dependencies:
-      '@jest/environment': 28.1.3
-      '@jest/fake-timers': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
-      jest-mock: 28.1.3
-      jest-util: 28.1.3
-
-  jest-get-type@28.0.2: {}
+      jest-mock: 29.7.0
+      jest-util: 29.7.0
 
-  jest-haste-map@28.1.3:
-    dependencies:
-      '@jest/types': 28.1.3
-      '@types/graceful-fs': 4.1.9
-      '@types/node': 15.14.9
-      anymatch: 3.1.3
-      fb-watchman: 2.0.2
-      graceful-fs: 4.2.11
-      jest-regex-util: 28.0.2
-      jest-util: 28.1.3
-      jest-worker: 28.1.3
-      micromatch: 4.0.5
-      walker: 1.0.8
-    optionalDependencies:
-      fsevents: 2.3.3
+  jest-get-type@29.6.3: {}
 
   jest-haste-map@29.7.0:
     dependencies:
@@ -25482,195 +24268,182 @@ snapshots:
       jest-regex-util: 29.6.3
       jest-util: 29.7.0
       jest-worker: 29.7.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.3
 
-  jest-leak-detector@28.1.3:
+  jest-leak-detector@29.7.0:
     dependencies:
-      jest-get-type: 28.0.2
-      pretty-format: 28.1.3
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
 
-  jest-matcher-utils@28.1.3:
+  jest-matcher-utils@29.7.0:
     dependencies:
       chalk: 4.1.2
-      jest-diff: 28.1.3
-      jest-get-type: 28.0.2
-      pretty-format: 28.1.3
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      pretty-format: 29.7.0
 
-  jest-message-util@28.1.3:
+  jest-message-util@29.7.0:
     dependencies:
-      '@babel/code-frame': 7.24.2
-      '@jest/types': 28.1.3
+      '@babel/code-frame': 7.26.2
+      '@jest/types': 29.6.3
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      micromatch: 4.0.5
-      pretty-format: 28.1.3
+      micromatch: 4.0.8
+      pretty-format: 29.7.0
       slash: 3.0.0
       stack-utils: 2.0.6
 
-  jest-mock@28.1.3:
+  jest-mock@29.7.0:
     dependencies:
-      '@jest/types': 28.1.3
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
+      jest-util: 29.7.0
 
-  jest-pnp-resolver@1.2.3(jest-resolve@28.1.3):
+  jest-pnp-resolver@1.2.3(jest-resolve@29.7.0):
     optionalDependencies:
-      jest-resolve: 28.1.3
-
-  jest-regex-util@28.0.2: {}
+      jest-resolve: 29.7.0
 
   jest-regex-util@29.6.3: {}
 
-  jest-resolve-dependencies@28.1.3:
+  jest-resolve-dependencies@29.7.0:
     dependencies:
-      jest-regex-util: 28.0.2
-      jest-snapshot: 28.1.3
+      jest-regex-util: 29.6.3
+      jest-snapshot: 29.7.0
     transitivePeerDependencies:
       - supports-color
 
-  jest-resolve@28.1.3:
+  jest-resolve@29.7.0:
     dependencies:
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      jest-haste-map: 28.1.3
-      jest-pnp-resolver: 1.2.3(jest-resolve@28.1.3)
-      jest-util: 28.1.3
-      jest-validate: 28.1.3
+      jest-haste-map: 29.7.0
+      jest-pnp-resolver: 1.2.3(jest-resolve@29.7.0)
+      jest-util: 29.7.0
+      jest-validate: 29.7.0
       resolve: 1.22.8
-      resolve.exports: 1.1.1
+      resolve.exports: 2.0.2
       slash: 3.0.0
 
-  jest-runner@28.1.3:
+  jest-runner@29.7.0:
     dependencies:
-      '@jest/console': 28.1.3
-      '@jest/environment': 28.1.3
-      '@jest/test-result': 28.1.3
-      '@jest/transform': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/console': 29.7.0
+      '@jest/environment': 29.7.0
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
       chalk: 4.1.2
-      emittery: 0.10.2
+      emittery: 0.13.1
       graceful-fs: 4.2.11
-      jest-docblock: 28.1.1
-      jest-environment-node: 28.1.3
-      jest-haste-map: 28.1.3
-      jest-leak-detector: 28.1.3
-      jest-message-util: 28.1.3
-      jest-resolve: 28.1.3
-      jest-runtime: 28.1.3
-      jest-util: 28.1.3
-      jest-watcher: 28.1.3
-      jest-worker: 28.1.3
+      jest-docblock: 29.7.0
+      jest-environment-node: 29.7.0
+      jest-haste-map: 29.7.0
+      jest-leak-detector: 29.7.0
+      jest-message-util: 29.7.0
+      jest-resolve: 29.7.0
+      jest-runtime: 29.7.0
+      jest-util: 29.7.0
+      jest-watcher: 29.7.0
+      jest-worker: 29.7.0
       p-limit: 3.1.0
       source-map-support: 0.5.13
     transitivePeerDependencies:
       - supports-color
 
-  jest-runtime@28.1.3:
+  jest-runtime@29.7.0:
     dependencies:
-      '@jest/environment': 28.1.3
-      '@jest/fake-timers': 28.1.3
-      '@jest/globals': 28.1.3
-      '@jest/source-map': 28.1.2
-      '@jest/test-result': 28.1.3
-      '@jest/transform': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/environment': 29.7.0
+      '@jest/fake-timers': 29.7.0
+      '@jest/globals': 29.7.0
+      '@jest/source-map': 29.6.3
+      '@jest/test-result': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      '@types/node': 15.14.9
       chalk: 4.1.2
-      cjs-module-lexer: 1.2.3
+      cjs-module-lexer: 1.4.1
       collect-v8-coverage: 1.0.2
-      execa: 5.1.1
       glob: 7.2.3
       graceful-fs: 4.2.11
-      jest-haste-map: 28.1.3
-      jest-message-util: 28.1.3
-      jest-mock: 28.1.3
-      jest-regex-util: 28.0.2
-      jest-resolve: 28.1.3
-      jest-snapshot: 28.1.3
-      jest-util: 28.1.3
+      jest-haste-map: 29.7.0
+      jest-message-util: 29.7.0
+      jest-mock: 29.7.0
+      jest-regex-util: 29.6.3
+      jest-resolve: 29.7.0
+      jest-snapshot: 29.7.0
+      jest-util: 29.7.0
       slash: 3.0.0
       strip-bom: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  jest-snapshot@28.1.3:
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/generator': 7.24.4
-      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4)
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
-      '@jest/expect-utils': 28.1.3
-      '@jest/transform': 28.1.3
-      '@jest/types': 28.1.3
-      '@types/babel__traverse': 7.20.5
-      '@types/prettier': 2.7.3
-      babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.4)
-      chalk: 4.1.2
-      expect: 28.1.3
-      graceful-fs: 4.2.11
-      jest-diff: 28.1.3
-      jest-get-type: 28.0.2
-      jest-haste-map: 28.1.3
-      jest-matcher-utils: 28.1.3
-      jest-message-util: 28.1.3
-      jest-util: 28.1.3
-      natural-compare: 1.4.0
-      pretty-format: 28.1.3
-      semver: 7.6.0
-    transitivePeerDependencies:
-      - supports-color
-
-  jest-util@28.1.3:
+  jest-snapshot@29.7.0:
     dependencies:
-      '@jest/types': 28.1.3
-      '@types/node': 15.14.9
+      '@babel/core': 7.26.0
+      '@babel/generator': 7.26.2
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-syntax-typescript': 7.25.9(@babel/core@7.26.0)
+      '@babel/types': 7.26.0
+      '@jest/expect-utils': 29.7.0
+      '@jest/transform': 29.7.0
+      '@jest/types': 29.6.3
+      babel-preset-current-node-syntax: 1.1.0(@babel/core@7.26.0)
       chalk: 4.1.2
-      ci-info: 3.9.0
+      expect: 29.7.0
       graceful-fs: 4.2.11
-      picomatch: 2.3.1
+      jest-diff: 29.7.0
+      jest-get-type: 29.6.3
+      jest-matcher-utils: 29.7.0
+      jest-message-util: 29.7.0
+      jest-util: 29.7.0
+      natural-compare: 1.4.0
+      pretty-format: 29.7.0
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
 
   jest-util@29.7.0:
     dependencies:
       '@jest/types': 29.6.3
-      '@types/node': 20.2.5
+      '@types/node': 15.14.9
       chalk: 4.1.2
       ci-info: 3.9.0
       graceful-fs: 4.2.11
       picomatch: 2.3.1
 
-  jest-validate@28.1.3:
+  jest-validate@29.7.0:
     dependencies:
-      '@jest/types': 28.1.3
+      '@jest/types': 29.6.3
       camelcase: 6.3.0
       chalk: 4.1.2
-      jest-get-type: 28.0.2
+      jest-get-type: 29.6.3
       leven: 3.1.0
-      pretty-format: 28.1.3
+      pretty-format: 29.7.0
 
-  jest-watch-typeahead@1.1.0(jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))):
+  jest-watch-typeahead@2.2.2(jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))):
     dependencies:
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      jest: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      jest-regex-util: 28.0.2
-      jest-watcher: 28.1.3
-      slash: 4.0.0
+      ansi-escapes: 6.2.1
+      chalk: 5.3.0
+      jest: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      jest-regex-util: 29.6.3
+      jest-watcher: 29.7.0
+      slash: 5.1.0
       string-length: 5.0.1
       strip-ansi: 7.1.0
 
-  jest-watcher@28.1.3:
+  jest-watcher@29.7.0:
     dependencies:
-      '@jest/test-result': 28.1.3
-      '@jest/types': 28.1.3
+      '@jest/test-result': 29.7.0
+      '@jest/types': 29.6.3
       '@types/node': 15.14.9
       ansi-escapes: 4.3.2
       chalk: 4.1.2
-      emittery: 0.10.2
-      jest-util: 28.1.3
+      emittery: 0.13.1
+      jest-util: 29.7.0
       string-length: 4.0.2
 
   jest-worker@27.5.1:
@@ -25679,12 +24452,6 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest-worker@28.1.3:
-    dependencies:
-      '@types/node': 15.14.9
-      merge-stream: 2.0.0
-      supports-color: 8.1.1
-
   jest-worker@29.7.0:
     dependencies:
       '@types/node': 20.2.5
@@ -25692,22 +24459,23 @@ snapshots:
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  jest@29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
-      '@jest/core': 28.1.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      '@jest/types': 28.1.3
-      import-local: 3.1.0
-      jest-cli: 28.1.3(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
+      '@jest/core': 29.7.0(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
+      '@jest/types': 29.6.3
+      import-local: 3.2.0
+      jest-cli: 29.7.0(@types/node@15.14.9)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
     transitivePeerDependencies:
       - '@types/node'
+      - babel-plugin-macros
       - supports-color
       - ts-node
 
-  jiti@1.21.0: {}
+  jiti@1.21.6: {}
 
   jju@1.4.0: {}
 
-  joi@17.12.3:
+  joi@17.13.3:
     dependencies:
       '@hapi/hoek': 9.3.0
       '@hapi/topo': 5.1.0
@@ -25732,70 +24500,69 @@ snapshots:
 
   jsbn@1.1.0: {}
 
-  jscodeshift@0.15.2(@babel/preset-env@7.24.4(@babel/core@7.24.4)):
-    dependencies:
-      '@babel/core': 7.24.4
-      '@babel/parser': 7.24.4
-      '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4)
-      '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4)
-      '@babel/preset-flow': 7.24.1(@babel/core@7.24.4)
-      '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4)
-      '@babel/register': 7.23.7(@babel/core@7.24.4)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.24.4)
+  jscodeshift@0.15.2(@babel/preset-env@7.26.0(@babel/core@7.26.0)):
+    dependencies:
+      '@babel/core': 7.26.0
+      '@babel/parser': 7.26.2
+      '@babel/plugin-transform-class-properties': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-optional-chaining': 7.25.9(@babel/core@7.26.0)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.26.0)
+      '@babel/preset-flow': 7.25.9(@babel/core@7.26.0)
+      '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
+      '@babel/register': 7.25.9(@babel/core@7.26.0)
+      babel-core: 7.0.0-bridge.0(@babel/core@7.26.0)
       chalk: 4.1.2
-      flow-parser: 0.233.0
+      flow-parser: 0.254.0
       graceful-fs: 4.2.11
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       neo-async: 2.6.2
       node-dir: 0.1.17
-      recast: 0.23.6
+      recast: 0.23.9
       temp: 0.8.4
       write-file-atomic: 2.4.3
     optionalDependencies:
-      '@babel/preset-env': 7.24.4(@babel/core@7.24.4)
+      '@babel/preset-env': 7.26.0(@babel/core@7.26.0)
     transitivePeerDependencies:
       - supports-color
 
-  jsdom@19.0.0:
+  jsdoc-type-pratt-parser@4.1.0: {}
+
+  jsdom@20.0.3:
     dependencies:
       abab: 2.0.6
-      acorn: 8.11.3
-      acorn-globals: 6.0.0
+      acorn: 8.14.0
+      acorn-globals: 7.0.1
       cssom: 0.5.0
       cssstyle: 2.3.0
       data-urls: 3.0.2
       decimal.js: 10.4.3
       domexception: 4.0.0
       escodegen: 2.1.0
-      form-data: 4.0.0
+      form-data: 4.0.1
       html-encoding-sniffer: 3.0.0
       http-proxy-agent: 5.0.0
       https-proxy-agent: 5.0.1
       is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.7
-      parse5: 6.0.1
-      saxes: 5.0.1
+      nwsapi: 2.2.13
+      parse5: 7.2.1
+      saxes: 6.0.0
       symbol-tree: 3.2.4
-      tough-cookie: 4.1.3
-      w3c-hr-time: 1.0.2
-      w3c-xmlserializer: 3.0.0
+      tough-cookie: 4.1.4
+      w3c-xmlserializer: 4.0.0
       webidl-conversions: 7.0.0
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
-      whatwg-url: 10.0.0
-      ws: 8.16.0
+      whatwg-url: 11.0.0
+      ws: 8.18.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  jsesc@0.5.0: {}
-
-  jsesc@2.5.2: {}
+  jsesc@3.0.2: {}
 
   json-buffer@3.0.1: {}
 
@@ -25803,7 +24570,7 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-parse-even-better-errors@3.0.1: {}
+  json-parse-even-better-errors@3.0.2: {}
 
   json-parse-helpfulerror@1.0.3:
     dependencies:
@@ -25821,7 +24588,7 @@ snapshots:
 
   json5@2.2.3: {}
 
-  jsonc-parser@3.2.1: {}
+  jsonc-parser@3.3.1: {}
 
   jsonfile@4.0.0:
     optionalDependencies:
@@ -25862,11 +24629,11 @@ snapshots:
 
   kleur@4.1.5: {}
 
-  language-subtag-registry@0.3.22: {}
+  language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
     dependencies:
-      language-subtag-registry: 0.3.22
+      language-subtag-registry: 0.3.23
 
   latest-version@7.0.0:
     dependencies:
@@ -25876,12 +24643,6 @@ snapshots:
     dependencies:
       set-getter: 0.1.1
 
-  lazy-universal-dotenv@4.0.0:
-    dependencies:
-      app-root-dir: 1.0.2
-      dotenv: 16.4.5
-      dotenv-expand: 10.0.0
-
   leven@3.1.0: {}
 
   levn@0.3.0:
@@ -25905,50 +24666,54 @@ snapshots:
       rechoir: 0.8.0
       resolve: 1.22.8
 
-  lightningcss-darwin-arm64@1.24.1:
+  lightningcss-darwin-arm64@1.28.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.28.1:
     optional: true
 
-  lightningcss-darwin-x64@1.24.1:
+  lightningcss-freebsd-x64@1.28.1:
     optional: true
 
-  lightningcss-freebsd-x64@1.24.1:
+  lightningcss-linux-arm-gnueabihf@1.28.1:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.24.1:
+  lightningcss-linux-arm64-gnu@1.28.1:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.24.1:
+  lightningcss-linux-arm64-musl@1.28.1:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.24.1:
+  lightningcss-linux-x64-gnu@1.28.1:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.24.1:
+  lightningcss-linux-x64-musl@1.28.1:
     optional: true
 
-  lightningcss-linux-x64-musl@1.24.1:
+  lightningcss-win32-arm64-msvc@1.28.1:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.24.1:
+  lightningcss-win32-x64-msvc@1.28.1:
     optional: true
 
-  lightningcss@1.24.1:
+  lightningcss@1.28.1:
     dependencies:
       detect-libc: 1.0.3
     optionalDependencies:
-      lightningcss-darwin-arm64: 1.24.1
-      lightningcss-darwin-x64: 1.24.1
-      lightningcss-freebsd-x64: 1.24.1
-      lightningcss-linux-arm-gnueabihf: 1.24.1
-      lightningcss-linux-arm64-gnu: 1.24.1
-      lightningcss-linux-arm64-musl: 1.24.1
-      lightningcss-linux-x64-gnu: 1.24.1
-      lightningcss-linux-x64-musl: 1.24.1
-      lightningcss-win32-x64-msvc: 1.24.1
+      lightningcss-darwin-arm64: 1.28.1
+      lightningcss-darwin-x64: 1.28.1
+      lightningcss-freebsd-x64: 1.28.1
+      lightningcss-linux-arm-gnueabihf: 1.28.1
+      lightningcss-linux-arm64-gnu: 1.28.1
+      lightningcss-linux-arm64-musl: 1.28.1
+      lightningcss-linux-x64-gnu: 1.28.1
+      lightningcss-linux-x64-musl: 1.28.1
+      lightningcss-win32-arm64-msvc: 1.28.1
+      lightningcss-win32-x64-msvc: 1.28.1
 
   lilconfig@2.1.0: {}
 
-  lilconfig@3.1.1: {}
+  lilconfig@3.1.2: {}
 
   lines-and-columns@1.2.4: {}
 
@@ -25981,17 +24746,17 @@ snapshots:
       colorette: 2.0.20
       eventemitter3: 5.0.1
       log-update: 5.0.1
-      rfdc: 1.3.1
+      rfdc: 1.4.1
       wrap-ansi: 8.1.0
     optionalDependencies:
       enquirer: 2.4.1
 
   lmdb@2.8.5:
     dependencies:
-      msgpackr: 1.10.1
+      msgpackr: 1.11.2
       node-addon-api: 6.1.0
       node-gyp-build-optional-packages: 5.1.1
-      ordered-binary: 1.5.1
+      ordered-binary: 1.5.3
       weak-lru-cache: 1.2.2
     optionalDependencies:
       '@lmdb/lmdb-darwin-arm64': 2.8.5
@@ -26010,13 +24775,6 @@ snapshots:
 
   load-tsconfig@0.2.5: {}
 
-  load-yaml-file@0.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
-
   loader-runner@4.3.0: {}
 
   loader-utils@1.4.2:
@@ -26056,8 +24814,6 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
-  lodash.foreach@4.5.0: {}
-
   lodash.get@4.4.2: {}
 
   lodash.isfunction@3.0.9: {}
@@ -26066,16 +24822,12 @@ snapshots:
 
   lodash.kebabcase@4.1.1: {}
 
-  lodash.mapkeys@4.6.0: {}
-
   lodash.memoize@4.1.2: {}
 
   lodash.merge@4.6.2: {}
 
   lodash.mergewith@4.6.2: {}
 
-  lodash.omit@4.5.0: {}
-
   lodash.snakecase@4.1.1: {}
 
   lodash.sortby@4.7.0: {}
@@ -26122,9 +24874,9 @@ snapshots:
   loglevel-colored-level-prefix@1.0.0:
     dependencies:
       chalk: 1.1.3
-      loglevel: 1.9.1
+      loglevel: 1.9.2
 
-  loglevel@1.9.1: {}
+  loglevel@1.9.2: {}
 
   long@5.2.3: {}
 
@@ -26140,16 +24892,11 @@ snapshots:
 
   lower-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   lowercase-keys@3.0.0: {}
 
-  lru-cache@10.2.0: {}
-
-  lru-cache@4.1.5:
-    dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
+  lru-cache@10.4.3: {}
 
   lru-cache@5.1.1:
     dependencies:
@@ -26163,17 +24910,13 @@ snapshots:
 
   lz-string@1.5.0: {}
 
-  magic-string@0.25.9:
-    dependencies:
-      sourcemap-codec: 1.4.8
-
   magic-string@0.27.0:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
-  magic-string@0.30.9:
+  magic-string@0.30.13:
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/sourcemap-codec': 1.5.0
 
   make-dir@2.1.0:
     dependencies:
@@ -26186,7 +24929,7 @@ snapshots:
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   make-error@1.3.6: {}
 
@@ -26204,7 +24947,7 @@ snapshots:
       minipass-fetch: 2.1.2
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
-      negotiator: 0.6.3
+      negotiator: 0.6.4
       promise-retry: 2.0.1
       socks-proxy-agent: 7.0.0
       ssri: 9.0.1
@@ -26222,13 +24965,13 @@ snapshots:
       is-lambda: 1.0.1
       lru-cache: 7.18.3
       minipass: 5.0.0
-      minipass-fetch: 3.0.4
+      minipass-fetch: 3.0.5
       minipass-flush: 1.0.5
       minipass-pipeline: 1.2.4
-      negotiator: 0.6.3
+      negotiator: 0.6.4
       promise-retry: 2.0.1
       socks-proxy-agent: 7.0.0
-      ssri: 10.0.5
+      ssri: 10.0.6
     transitivePeerDependencies:
       - supports-color
 
@@ -26256,15 +24999,11 @@ snapshots:
     dependencies:
       object-visit: 1.0.1
 
-  markdown-extensions@1.1.1: {}
+  markdown-extensions@2.0.0: {}
 
   markdown-link@0.1.1: {}
 
-  markdown-table@3.0.3: {}
-
-  markdown-to-jsx@7.4.7(react@18.2.0):
-    dependencies:
-      react: 18.2.0
+  markdown-table@3.0.4: {}
 
   markdown-toc@1.2.0:
     dependencies:
@@ -26283,199 +25022,209 @@ snapshots:
 
   marked@5.1.2: {}
 
-  match-sorter@6.3.4:
+  match-sorter@8.0.0:
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       remove-accents: 0.5.0
 
   math-random@1.0.4: {}
 
-  mdast-util-definitions@4.0.0:
-    dependencies:
-      unist-util-visit: 2.0.3
-
-  mdast-util-definitions@5.1.2:
+  mdast-util-find-and-replace@3.0.1:
     dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
-      unist-util-visit: 4.1.2
-
-  mdast-util-find-and-replace@2.2.2:
-    dependencies:
-      '@types/mdast': 3.0.15
+      '@types/mdast': 4.0.4
       escape-string-regexp: 5.0.0
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
 
-  mdast-util-from-markdown@1.3.1:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
       decode-named-character-reference: 1.0.2
-      mdast-util-to-string: 3.2.0
-      micromark: 3.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-decode-string: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      unist-util-stringify-position: 3.0.3
-      uvu: 0.5.6
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+      unist-util-stringify-position: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-frontmatter@1.0.1:
+  mdast-util-frontmatter@2.0.1:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-markdown: 1.5.0
-      micromark-extension-frontmatter: 1.1.1
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      escape-string-regexp: 5.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-extension-frontmatter: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
 
-  mdast-util-gfm-autolink-literal@1.0.3:
+  mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
-      '@types/mdast': 3.0.15
+      '@types/mdast': 4.0.4
       ccount: 2.0.1
-      mdast-util-find-and-replace: 2.2.2
-      micromark-util-character: 1.2.0
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.1
+      micromark-util-character: 2.1.1
 
-  mdast-util-gfm-footnote@1.0.2:
+  mdast-util-gfm-footnote@2.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-markdown: 1.5.0
-      micromark-util-normalize-identifier: 1.1.0
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
 
-  mdast-util-gfm-strikethrough@1.0.3:
+  mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-markdown: 1.5.0
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  mdast-util-gfm-table@1.0.7:
+  mdast-util-gfm-table@2.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      markdown-table: 3.0.3
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-to-markdown: 1.5.0
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-gfm-task-list-item@1.0.2:
+  mdast-util-gfm-task-list-item@2.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-markdown: 1.5.0
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  mdast-util-gfm@2.0.2:
+  mdast-util-gfm@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-gfm-autolink-literal: 1.0.3
-      mdast-util-gfm-footnote: 1.0.2
-      mdast-util-gfm-strikethrough: 1.0.3
-      mdast-util-gfm-table: 1.0.7
-      mdast-util-gfm-task-list-item: 1.0.2
-      mdast-util-to-markdown: 1.5.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.0.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx-expression@1.3.2:
+  mdast-util-mdx-expression@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-to-markdown: 1.5.0
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx-jsx@2.1.4:
+  mdast-util-mdx-jsx@3.1.3:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
       ccount: 2.0.1
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-to-markdown: 1.5.0
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
       parse-entities: 4.0.1
       stringify-entities: 4.0.4
-      unist-util-remove-position: 4.0.2
-      unist-util-stringify-position: 3.0.3
-      vfile-message: 3.1.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdx@2.0.1:
+  mdast-util-mdx@3.0.0:
     dependencies:
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-mdx-expression: 1.3.2
-      mdast-util-mdx-jsx: 2.1.4
-      mdast-util-mdxjs-esm: 1.3.1
-      mdast-util-to-markdown: 1.5.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.1.3
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-mdxjs-esm@1.3.1:
+  mdast-util-mdxjs-esm@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-from-markdown: 1.3.1
-      mdast-util-to-markdown: 1.5.0
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-phrasing@3.0.1:
+  mdast-util-phrasing@4.1.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      unist-util-is: 5.2.1
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
 
-  mdast-util-to-hast@12.3.0:
+  mdast-util-to-hast@13.2.0:
     dependencies:
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-definitions: 5.1.2
-      micromark-util-sanitize-uri: 1.2.0
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.2.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
-      unist-util-generated: 2.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
 
-  mdast-util-to-markdown@1.5.0:
+  mdast-util-to-markdown@2.1.2:
     dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.10
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
       longest-streak: 3.1.0
-      mdast-util-phrasing: 3.0.1
-      mdast-util-to-string: 3.2.0
-      micromark-util-decode-string: 1.1.0
-      unist-util-visit: 4.1.2
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
-  mdast-util-to-string@1.1.0: {}
-
-  mdast-util-to-string@3.2.0:
+  mdast-util-to-string@4.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
+      '@types/mdast': 4.0.4
 
-  mdn-data@2.0.14: {}
-
-  mdx-bundler@9.2.1(esbuild@0.20.2):
+  mdx-bundler@10.0.3(acorn@8.14.0)(esbuild@0.21.5):
     dependencies:
-      '@babel/runtime': 7.24.4
-      '@esbuild-plugins/node-resolve': 0.1.4(esbuild@0.20.2)
+      '@babel/runtime': 7.26.0
+      '@esbuild-plugins/node-resolve': 0.2.2(esbuild@0.21.5)
       '@fal-works/esbuild-plugin-global-externals': 2.1.2
-      '@mdx-js/esbuild': 2.3.0(esbuild@0.20.2)
-      esbuild: 0.20.2
+      '@mdx-js/esbuild': 3.1.0(acorn@8.14.0)(esbuild@0.21.5)
+      esbuild: 0.21.5
       gray-matter: 4.0.3
-      remark-frontmatter: 4.0.1
-      remark-mdx-frontmatter: 1.1.1
-      uuid: 8.3.2
-      vfile: 5.3.7
+      remark-frontmatter: 5.0.0
+      remark-mdx-frontmatter: 4.0.0
+      uuid: 9.0.1
+      vfile: 6.0.3
     transitivePeerDependencies:
+      - acorn
       - supports-color
 
-  media-typer@0.3.0: {}
-
-  memfs@3.5.3:
+  memfs@4.14.0:
     dependencies:
-      fs-monkey: 1.0.5
+      '@jsonjoy.com/json-pack': 1.1.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 1.5.0(tslib@2.8.1)
+      tree-dump: 1.0.2(tslib@2.8.1)
+      tslib: 2.8.1
 
   memoizerific@1.11.3:
     dependencies:
@@ -26488,20 +25237,6 @@ snapshots:
 
   memorystream@0.3.1: {}
 
-  meow@6.1.1:
-    dependencies:
-      '@types/minimist': 1.2.5
-      camelcase-keys: 6.2.2
-      decamelize-keys: 1.1.1
-      hard-rejection: 2.1.0
-      minimist-options: 4.1.0
-      normalize-package-data: 2.5.0
-      read-pkg-up: 7.0.1
-      redent: 3.0.0
-      trim-newlines: 3.0.1
-      type-fest: 0.13.1
-      yargs-parser: 18.1.3
-
   meow@8.1.2:
     dependencies:
       '@types/minimist': 1.2.5
@@ -26516,8 +25251,6 @@ snapshots:
       type-fest: 0.18.1
       yargs-parser: 20.2.9
 
-  merge-descriptors@1.0.1: {}
-
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -26532,276 +25265,276 @@ snapshots:
       messageformat-formatters: 2.0.1
       messageformat-parser: 4.1.3
 
-  methods@1.1.2: {}
-
-  micromark-core-commonmark@1.1.0:
+  micromark-core-commonmark@2.0.2:
     dependencies:
       decode-named-character-reference: 1.0.2
-      micromark-factory-destination: 1.1.0
-      micromark-factory-label: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-factory-title: 1.1.0
-      micromark-factory-whitespace: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-classify-character: 1.1.0
-      micromark-util-html-tag-name: 1.2.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-
-  micromark-extension-frontmatter@1.1.1:
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+
+  micromark-extension-frontmatter@2.0.0:
     dependencies:
       fault: 2.0.1
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-autolink-literal@1.0.5:
+  micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-sanitize-uri: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-footnote@1.1.2:
+  micromark-extension-gfm-footnote@2.1.0:
     dependencies:
-      micromark-core-commonmark: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-sanitize-uri: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-strikethrough@1.0.7:
+  micromark-extension-gfm-strikethrough@2.1.0:
     dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-classify-character: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-table@1.0.7:
+  micromark-extension-gfm-table@2.1.0:
     dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-tagfilter@1.0.2:
+  micromark-extension-gfm-tagfilter@2.0.0:
     dependencies:
-      micromark-util-types: 1.1.0
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm-task-list-item@1.0.5:
+  micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-gfm@2.0.3:
+  micromark-extension-gfm@3.0.0:
     dependencies:
-      micromark-extension-gfm-autolink-literal: 1.0.5
-      micromark-extension-gfm-footnote: 1.1.2
-      micromark-extension-gfm-strikethrough: 1.0.7
-      micromark-extension-gfm-table: 1.0.7
-      micromark-extension-gfm-tagfilter: 1.0.2
-      micromark-extension-gfm-task-list-item: 1.0.5
-      micromark-util-combine-extensions: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.0
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-mdx-expression@1.0.8:
+  micromark-extension-mdx-expression@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
-      micromark-factory-mdx-expression: 1.0.9
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-events-to-acorn: 1.2.3
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-extension-mdx-jsx@1.0.5:
+  micromark-extension-mdx-jsx@3.0.1:
     dependencies:
       '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
-      estree-util-is-identifier-name: 2.1.0
-      micromark-factory-mdx-expression: 1.0.9
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-      vfile-message: 3.1.4
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+      vfile-message: 4.0.2
 
-  micromark-extension-mdx-md@1.0.1:
+  micromark-extension-mdx-md@2.0.0:
     dependencies:
-      micromark-util-types: 1.1.0
+      micromark-util-types: 2.0.1
 
-  micromark-extension-mdxjs-esm@1.0.5:
+  micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
-      '@types/estree': 1.0.5
-      micromark-core-commonmark: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-events-to-acorn: 1.2.3
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      unist-util-position-from-estree: 1.1.2
-      uvu: 0.5.6
-      vfile-message: 3.1.4
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.2
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
 
-  micromark-extension-mdxjs@1.0.1:
+  micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.11.3
-      acorn-jsx: 5.3.2(acorn@8.11.3)
-      micromark-extension-mdx-expression: 1.0.8
-      micromark-extension-mdx-jsx: 1.0.5
-      micromark-extension-mdx-md: 1.0.1
-      micromark-extension-mdxjs-esm: 1.0.5
-      micromark-util-combine-extensions: 1.1.0
-      micromark-util-types: 1.1.0
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      micromark-extension-mdx-expression: 3.0.0
+      micromark-extension-mdx-jsx: 3.0.1
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-destination@1.1.0:
+  micromark-factory-destination@2.0.1:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-label@1.1.0:
+  micromark-factory-label@2.0.1:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-mdx-expression@1.0.9:
+  micromark-factory-mdx-expression@2.0.2:
     dependencies:
-      '@types/estree': 1.0.5
-      micromark-util-character: 1.2.0
-      micromark-util-events-to-acorn: 1.2.3
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      unist-util-position-from-estree: 1.1.2
-      uvu: 0.5.6
-      vfile-message: 3.1.4
+      '@types/estree': 1.0.6
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.2
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
 
-  micromark-factory-space@1.1.0:
+  micromark-factory-space@2.0.1:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-types: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-title@1.1.0:
+  micromark-factory-title@2.0.1:
     dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-factory-whitespace@1.1.0:
+  micromark-factory-whitespace@2.0.1:
     dependencies:
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-character@1.2.0:
+  micromark-util-character@2.1.1:
     dependencies:
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-chunked@1.1.0:
+  micromark-util-chunked@2.0.1:
     dependencies:
-      micromark-util-symbol: 1.1.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-classify-character@1.1.0:
+  micromark-util-classify-character@2.0.1:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-combine-extensions@1.1.0:
+  micromark-util-combine-extensions@2.0.1:
     dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-types: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-decode-numeric-character-reference@1.1.0:
+  micromark-util-decode-numeric-character-reference@2.0.2:
     dependencies:
-      micromark-util-symbol: 1.1.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-decode-string@1.1.0:
+  micromark-util-decode-string@2.0.1:
     dependencies:
       decode-named-character-reference: 1.0.2
-      micromark-util-character: 1.2.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-symbol: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-encode@1.1.0: {}
+  micromark-util-encode@2.0.1: {}
 
-  micromark-util-events-to-acorn@1.2.3:
+  micromark-util-events-to-acorn@2.0.2:
     dependencies:
       '@types/acorn': 4.0.6
-      '@types/estree': 1.0.5
-      '@types/unist': 2.0.10
-      estree-util-visit: 1.2.1
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
-      vfile-message: 3.1.4
+      '@types/estree': 1.0.6
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
+      vfile-message: 4.0.2
 
-  micromark-util-html-tag-name@1.2.0: {}
+  micromark-util-html-tag-name@2.0.1: {}
 
-  micromark-util-normalize-identifier@1.1.0:
+  micromark-util-normalize-identifier@2.0.1:
     dependencies:
-      micromark-util-symbol: 1.1.0
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-resolve-all@1.1.0:
+  micromark-util-resolve-all@2.0.1:
     dependencies:
-      micromark-util-types: 1.1.0
+      micromark-util-types: 2.0.1
 
-  micromark-util-sanitize-uri@1.2.0:
+  micromark-util-sanitize-uri@2.0.1:
     dependencies:
-      micromark-util-character: 1.2.0
-      micromark-util-encode: 1.1.0
-      micromark-util-symbol: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
 
-  micromark-util-subtokenize@1.1.0:
+  micromark-util-subtokenize@2.0.3:
     dependencies:
-      micromark-util-chunked: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
 
-  micromark-util-symbol@1.1.0: {}
+  micromark-util-symbol@2.0.1: {}
 
-  micromark-util-types@1.1.0: {}
+  micromark-util-types@2.0.1: {}
 
-  micromark@3.2.0:
+  micromark@4.0.1:
     dependencies:
       '@types/debug': 4.1.12
-      debug: 4.3.4
+      debug: 4.3.7
       decode-named-character-reference: 1.0.2
-      micromark-core-commonmark: 1.1.0
-      micromark-factory-space: 1.1.0
-      micromark-util-character: 1.2.0
-      micromark-util-chunked: 1.1.0
-      micromark-util-combine-extensions: 1.1.0
-      micromark-util-decode-numeric-character-reference: 1.1.0
-      micromark-util-encode: 1.1.0
-      micromark-util-normalize-identifier: 1.1.0
-      micromark-util-resolve-all: 1.1.0
-      micromark-util-sanitize-uri: 1.2.0
-      micromark-util-subtokenize: 1.1.0
-      micromark-util-symbol: 1.1.0
-      micromark-util-types: 1.1.0
-      uvu: 0.5.6
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.2
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
@@ -26825,13 +25558,20 @@ snapshots:
 
   micromatch@4.0.5:
     dependencies:
-      braces: 3.0.2
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
       picomatch: 2.3.1
 
   mime-db@1.25.0: {}
 
   mime-db@1.52.0: {}
 
+  mime-db@1.53.0: {}
+
   mime-types@2.1.13:
     dependencies:
       mime-db: 1.25.0
@@ -26840,10 +25580,6 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
-  mime@1.6.0: {}
-
-  mime@2.6.0: {}
-
   mimic-fn@1.2.0: {}
 
   mimic-fn@2.1.0: {}
@@ -26866,7 +25602,7 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.1
 
-  minimatch@9.0.4:
+  minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.1
 
@@ -26890,9 +25626,9 @@ snapshots:
     optionalDependencies:
       encoding: 0.1.13
 
-  minipass-fetch@3.0.4:
+  minipass-fetch@3.0.5:
     dependencies:
-      minipass: 7.0.4
+      minipass: 7.1.2
       minipass-sized: 1.0.3
       minizlib: 2.1.2
     optionalDependencies:
@@ -26902,7 +25638,7 @@ snapshots:
     dependencies:
       minipass: 3.3.6
 
-  minipass-json-stream@1.0.1:
+  minipass-json-stream@1.0.2:
     dependencies:
       jsonparse: 1.3.1
       minipass: 3.3.6
@@ -26921,22 +25657,20 @@ snapshots:
 
   minipass@5.0.0: {}
 
-  minipass@7.0.4: {}
+  minipass@7.1.2: {}
 
   minizlib@2.1.2:
     dependencies:
       minipass: 3.3.6
       yallist: 4.0.0
 
-  mitt@3.0.0: {}
+  mitt@3.0.1: {}
 
   mixin-deep@1.3.2:
     dependencies:
       for-in: 1.0.2
       is-extendable: 1.0.1
 
-  mixme@0.5.10: {}
-
   mkdirp-classic@0.5.3: {}
 
   mkdirp@0.5.6:
@@ -26945,9 +25679,14 @@ snapshots:
 
   mkdirp@1.0.4: {}
 
-  mri@1.2.0: {}
+  mlly@1.7.3:
+    dependencies:
+      acorn: 8.14.0
+      pathe: 1.1.2
+      pkg-types: 1.2.1
+      ufo: 1.5.4
 
-  mrmime@1.0.1: {}
+  mri@1.2.0: {}
 
   mrmime@2.0.0: {}
 
@@ -26957,21 +25696,21 @@ snapshots:
 
   ms@2.1.3: {}
 
-  msgpackr-extract@3.0.2:
+  msgpackr-extract@3.0.3:
     dependencies:
-      node-gyp-build-optional-packages: 5.0.7
+      node-gyp-build-optional-packages: 5.2.2
     optionalDependencies:
-      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.2
-      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.2
-      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.2
-      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.2
-      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.2
-      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.3
+      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.3
     optional: true
 
-  msgpackr@1.10.1:
+  msgpackr@1.11.2:
     optionalDependencies:
-      msgpackr-extract: 3.0.2
+      msgpackr-extract: 3.0.3
 
   mute-stream@0.0.7: {}
 
@@ -27007,63 +25746,63 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
-  negotiator@0.6.3: {}
+  negotiator@0.6.4: {}
 
   neo-async@2.6.2: {}
 
-  next-contentlayer@0.3.4(contentlayer@0.3.4(esbuild@0.20.2))(esbuild@0.20.2)(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-contentlayer2@0.5.3(acorn@8.14.0)(contentlayer2@0.5.3(acorn@8.14.0)(esbuild@0.21.5))(esbuild@0.21.5)(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@contentlayer/core': 0.3.4(esbuild@0.20.2)
-      '@contentlayer/utils': 0.3.4
-      contentlayer: 0.3.4(esbuild@0.20.2)
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@contentlayer2/core': 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      '@contentlayer2/utils': 0.5.3
+      contentlayer2: 0.5.3(acorn@8.14.0)(esbuild@0.21.5)
+      next: 14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
+      - acorn
       - esbuild
       - markdown-wasm
       - supports-color
 
-  next-sitemap@4.2.3(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)):
+  next-sitemap@4.2.3(next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)):
     dependencies:
       '@corex/deepmerge': 4.0.43
-      '@next/env': 13.5.6
+      '@next/env': 13.5.7
       fast-glob: 3.3.2
       minimist: 1.2.8
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      next: 14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
 
-  next-themes@0.2.1(next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0))(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next-themes@0.4.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      next: 13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
   next-tick@1.1.0: {}
 
-  next@13.5.1(@babel/core@7.24.4)(@opentelemetry/api@1.8.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  next@14.3.0-canary.43(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@next/env': 13.5.1
-      '@swc/helpers': 0.5.2
+      '@next/env': 14.3.0-canary.43
+      '@swc/helpers': 0.5.11
       busboy: 1.6.0
-      caniuse-lite: 1.0.30001609
-      postcss: 8.4.14
+      caniuse-lite: 1.0.30001683
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      styled-jsx: 5.1.1(@babel/core@7.24.4)(react@18.2.0)
-      watchpack: 2.4.0
-      zod: 3.21.4
+      styled-jsx: 5.1.1(@babel/core@7.26.0)(react@18.2.0)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 13.5.1
-      '@next/swc-darwin-x64': 13.5.1
-      '@next/swc-linux-arm64-gnu': 13.5.1
-      '@next/swc-linux-arm64-musl': 13.5.1
-      '@next/swc-linux-x64-gnu': 13.5.1
-      '@next/swc-linux-x64-musl': 13.5.1
-      '@next/swc-win32-arm64-msvc': 13.5.1
-      '@next/swc-win32-ia32-msvc': 13.5.1
-      '@next/swc-win32-x64-msvc': 13.5.1
-      '@opentelemetry/api': 1.8.0
+      '@next/swc-darwin-arm64': 14.3.0-canary.43
+      '@next/swc-darwin-x64': 14.3.0-canary.43
+      '@next/swc-linux-arm64-gnu': 14.3.0-canary.43
+      '@next/swc-linux-arm64-musl': 14.3.0-canary.43
+      '@next/swc-linux-x64-gnu': 14.3.0-canary.43
+      '@next/swc-linux-x64-musl': 14.3.0-canary.43
+      '@next/swc-win32-arm64-msvc': 14.3.0-canary.43
+      '@next/swc-win32-ia32-msvc': 14.3.0-canary.43
+      '@next/swc-win32-x64-msvc': 14.3.0-canary.43
+      '@opentelemetry/api': 1.9.0
+      sharp: 0.33.5
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -27073,15 +25812,15 @@ snapshots:
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
-      tslib: 2.6.2
+      tslib: 2.8.1
 
-  node-abi@3.57.0:
+  node-abi@3.71.0:
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   node-addon-api@6.1.0: {}
 
-  node-addon-api@7.1.0: {}
+  node-addon-api@7.1.1: {}
 
   node-dir@0.1.17:
     dependencies:
@@ -27091,11 +25830,7 @@ snapshots:
 
   node-fetch-native@1.6.4: {}
 
-  node-fetch@2.7.0(encoding@0.1.13):
-    dependencies:
-      whatwg-url: 5.0.0
-    optionalDependencies:
-      encoding: 0.1.13
+  node-fetch@2.5.0: {}
 
   node-fetch@3.3.2:
     dependencies:
@@ -27103,13 +25838,15 @@ snapshots:
       fetch-blob: 3.2.0
       formdata-polyfill: 4.0.10
 
-  node-gyp-build-optional-packages@5.0.7:
-    optional: true
-
   node-gyp-build-optional-packages@5.1.1:
     dependencies:
       detect-libc: 2.0.3
 
+  node-gyp-build-optional-packages@5.2.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optional: true
+
   node-gyp@9.4.1:
     dependencies:
       env-paths: 2.2.1
@@ -27120,7 +25857,7 @@ snapshots:
       nopt: 6.0.0
       npmlog: 6.0.2
       rimraf: 3.0.2
-      semver: 7.6.0
+      semver: 7.6.3
       tar: 6.2.1
       which: 2.0.2
     transitivePeerDependencies:
@@ -27145,7 +25882,7 @@ snapshots:
       title-case: 3.0.3
       upper-case: 2.0.2
 
-  node-releases@2.0.14: {}
+  node-releases@2.0.18: {}
 
   nopt@6.0.0:
     dependencies:
@@ -27161,15 +25898,15 @@ snapshots:
   normalize-package-data@3.0.3:
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.13.1
-      semver: 7.6.0
+      is-core-module: 2.15.1
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
 
   normalize-package-data@5.0.0:
     dependencies:
       hosted-git-info: 6.1.1
-      is-core-module: 2.13.1
-      semver: 7.6.0
+      is-core-module: 2.15.1
+      semver: 7.6.3
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -27178,15 +25915,15 @@ snapshots:
 
   normalize-url@8.0.1: {}
 
-  npm-bundled@3.0.0:
+  npm-bundled@3.0.1:
     dependencies:
       npm-normalize-package-bin: 3.0.1
 
-  npm-check-updates@16.14.18:
+  npm-check-updates@16.14.20:
     dependencies:
       '@types/semver-utils': 1.1.3
       chalk: 5.3.0
-      cli-table3: 0.6.4
+      cli-table3: 0.6.5
       commander: 10.0.1
       fast-memoize: 2.5.2
       find-up: 5.0.0
@@ -27194,22 +25931,22 @@ snapshots:
       get-stdin: 8.0.0
       globby: 11.1.0
       hosted-git-info: 5.2.1
-      ini: 4.1.2
+      ini: 4.1.3
       js-yaml: 4.1.0
       json-parse-helpfulerror: 1.0.3
       jsonlines: 0.1.1
       lodash: 4.17.21
       make-fetch-happen: 11.1.1
-      minimatch: 9.0.4
+      minimatch: 9.0.5
       p-map: 4.0.0
       pacote: 15.2.0
-      parse-github-url: 1.0.2
+      parse-github-url: 1.0.3
       progress: 2.0.3
-      prompts-ncu: 3.0.0
+      prompts-ncu: 3.0.1
       rc-config-loader: 4.1.3
       remote-git-tags: 3.0.0
-      rimraf: 5.0.5
-      semver: 7.6.0
+      rimraf: 5.0.10
+      semver: 7.6.3
       semver-utils: 1.1.4
       source-map-support: 0.5.21
       spawn-please: 2.0.2
@@ -27223,7 +25960,7 @@ snapshots:
 
   npm-install-checks@6.3.0:
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   npm-normalize-package-bin@3.0.1: {}
 
@@ -27231,26 +25968,26 @@ snapshots:
     dependencies:
       hosted-git-info: 6.1.1
       proc-log: 3.0.0
-      semver: 7.6.0
-      validate-npm-package-name: 5.0.0
+      semver: 7.6.3
+      validate-npm-package-name: 5.0.1
 
   npm-packlist@7.0.4:
     dependencies:
-      ignore-walk: 6.0.4
+      ignore-walk: 6.0.5
 
   npm-pick-manifest@8.0.2:
     dependencies:
       npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 10.1.0
-      semver: 7.6.0
+      semver: 7.6.3
 
   npm-registry-fetch@14.0.5:
     dependencies:
       make-fetch-happen: 11.1.1
       minipass: 5.0.0
-      minipass-fetch: 3.0.4
-      minipass-json-stream: 1.0.1
+      minipass-fetch: 3.0.5
+      minipass-json-stream: 1.0.2
       minizlib: 2.1.2
       npm-package-arg: 10.1.0
       proc-log: 3.0.0
@@ -27261,7 +25998,7 @@ snapshots:
     dependencies:
       ansi-styles: 3.2.1
       chalk: 2.4.2
-      cross-spawn: 6.0.5
+      cross-spawn: 6.0.6
       memorystream: 0.3.1
       minimatch: 3.1.2
       pidtree: 0.3.1
@@ -27286,21 +26023,18 @@ snapshots:
 
   nprogress@0.2.0: {}
 
-  nth-check@2.1.1:
-    dependencies:
-      boolbase: 1.0.0
-
   nullthrows@1.1.1: {}
 
-  nwsapi@2.2.7: {}
+  nwsapi@2.2.13: {}
 
-  nypm@0.3.8:
+  nypm@0.3.12:
     dependencies:
       citty: 0.1.6
       consola: 3.2.3
       execa: 8.0.1
       pathe: 1.1.2
-      ufo: 1.5.3
+      pkg-types: 1.2.1
+      ufo: 1.5.4
 
   object-assign@4.1.1: {}
 
@@ -27314,12 +26048,7 @@ snapshots:
 
   object-hash@3.0.0: {}
 
-  object-inspect@1.13.1: {}
-
-  object-is@1.1.6:
-    dependencies:
-      call-bind: 1.0.7
-      define-properties: 1.2.1
+  object-inspect@1.13.3: {}
 
   object-keys@1.1.1: {}
 
@@ -27351,20 +26080,14 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
 
   object.groupby@1.0.3:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
-
-  object.hasown@1.1.4:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.23.3
-      es-object-atoms: 1.0.0
+      es-abstract: 1.23.5
 
   object.map@1.0.1:
     dependencies:
@@ -27381,13 +26104,7 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.0.0
 
-  ohash@1.1.3: {}
-
-  on-finished@2.4.1:
-    dependencies:
-      ee-first: 1.1.1
-
-  on-headers@1.0.2: {}
+  ohash@1.1.4: {}
 
   once@1.4.0:
     dependencies:
@@ -27405,7 +26122,13 @@ snapshots:
     dependencies:
       mimic-fn: 4.0.0
 
-  oo-ascii-tree@1.97.0: {}
+  oniguruma-to-es@0.4.1:
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      regex: 5.0.2
+      regex-recursion: 4.3.0
+
+  oo-ascii-tree@1.105.0: {}
 
   open@8.4.2:
     dependencies:
@@ -27424,14 +26147,14 @@ snapshots:
       type-check: 0.3.2
       word-wrap: 1.2.5
 
-  optionator@0.9.3:
+  optionator@0.9.4:
     dependencies:
-      '@aashutoshrathi/word-wrap': 1.2.6
       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
 
   ora@5.4.1:
     dependencies:
@@ -27457,9 +26180,7 @@ snapshots:
       strip-ansi: 7.1.0
       wcwidth: 1.0.1
 
-  ordered-binary@1.5.1: {}
-
-  os-homedir@1.0.2: {}
+  ordered-binary@1.5.3: {}
 
   os-tmpdir@1.0.2: {}
 
@@ -27485,7 +26206,7 @@ snapshots:
 
   p-limit@4.0.0:
     dependencies:
-      yocto-queue: 1.0.0
+      yocto-queue: 1.1.1
 
   p-locate@3.0.0:
     dependencies:
@@ -27511,17 +26232,21 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  package-json-from-dist@1.0.1: {}
+
   package-json@8.1.1:
     dependencies:
       got: 12.6.1
       registry-auth-token: 5.0.2
       registry-url: 6.0.1
-      semver: 7.6.0
+      semver: 7.6.3
+
+  package-manager-detector@0.2.6: {}
 
   pacote@15.2.0:
     dependencies:
       '@npmcli/git': 4.1.0
-      '@npmcli/installed-package-contents': 2.0.2
+      '@npmcli/installed-package-contents': 2.1.0
       '@npmcli/promise-spawn': 6.0.2
       '@npmcli/run-script': 6.0.2
       cacache: 17.1.4
@@ -27536,34 +26261,33 @@ snapshots:
       read-package-json: 6.0.4
       read-package-json-fast: 3.0.2
       sigstore: 1.9.0
-      ssri: 10.0.5
+      ssri: 10.0.6
       tar: 6.2.1
     transitivePeerDependencies:
       - bluebird
       - supports-color
 
-  pako@0.2.9: {}
-
   param-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
-
-  parcel@2.12.0(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5):
-    dependencies:
-      '@parcel/config-default': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)(postcss@8.4.38)(srcset@4.0.0)(terser@5.30.3)(typescript@4.9.5)
-      '@parcel/core': 2.12.0(@swc/helpers@0.5.9)
-      '@parcel/diagnostic': 2.12.0
-      '@parcel/events': 2.12.0
-      '@parcel/fs': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/logger': 2.12.0
-      '@parcel/package-manager': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))(@swc/helpers@0.5.9)
-      '@parcel/reporter-cli': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/reporter-dev-server': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/reporter-tracer': 2.12.0(@parcel/core@2.12.0(@swc/helpers@0.5.9))
-      '@parcel/utils': 2.12.0
+      tslib: 2.8.1
+
+  parcel@2.13.0(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5):
+    dependencies:
+      '@parcel/config-default': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)(postcss@8.4.49)(terser@5.36.0)(typescript@4.9.5)
+      '@parcel/core': 2.13.0(@swc/helpers@0.5.15)
+      '@parcel/diagnostic': 2.13.0
+      '@parcel/events': 2.13.0
+      '@parcel/feature-flags': 2.13.0
+      '@parcel/fs': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/logger': 2.13.0
+      '@parcel/package-manager': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))(@swc/helpers@0.5.15)
+      '@parcel/reporter-cli': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/reporter-dev-server': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/reporter-tracer': 2.13.0(@parcel/core@2.13.0(@swc/helpers@0.5.15))
+      '@parcel/utils': 2.13.0
       chalk: 4.1.2
-      commander: 7.2.0
+      commander: 12.1.0
       get-port: 4.2.0
     transitivePeerDependencies:
       - '@swc/helpers'
@@ -27572,6 +26296,7 @@ snapshots:
       - purgecss
       - relateurl
       - srcset
+      - svgo
       - terser
       - typescript
       - uncss
@@ -27591,7 +26316,7 @@ snapshots:
 
   parse-entities@4.0.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       character-entities: 2.0.2
       character-entities-legacy: 3.0.0
       character-reference-invalid: 2.0.1
@@ -27606,7 +26331,7 @@ snapshots:
       map-cache: 0.2.2
       path-root: 0.1.1
 
-  parse-github-url@1.0.2: {}
+  parse-github-url@1.0.3: {}
 
   parse-json@4.0.0:
     dependencies:
@@ -27615,7 +26340,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.24.2
+      '@babel/code-frame': 7.26.2
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -27626,21 +26351,21 @@ snapshots:
 
   parse-passwd@1.0.0: {}
 
-  parse5@6.0.1: {}
-
-  parseurl@1.3.3: {}
+  parse5@7.2.1:
+    dependencies:
+      entities: 4.5.0
 
   pascal-case@3.1.2:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   pascalcase@0.1.1: {}
 
   path-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   path-exists@3.0.0: {}
 
@@ -27666,12 +26391,10 @@ snapshots:
     dependencies:
       path-root-regex: 0.1.2
 
-  path-scurry@1.10.2:
+  path-scurry@1.11.1:
     dependencies:
-      lru-cache: 10.2.0
-      minipass: 7.0.4
-
-  path-to-regexp@0.1.7: {}
+      lru-cache: 10.4.3
+      minipass: 7.1.2
 
   path-type@3.0.0:
     dependencies:
@@ -27679,26 +26402,16 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  pathe@1.1.2: {}
-
-  peek-stream@1.1.3:
-    dependencies:
-      buffer-from: 1.1.2
-      duplexify: 3.7.1
-      through2: 2.0.5
-
-  pend@1.2.0: {}
+  path-type@5.0.0: {}
 
-  periscopic@3.1.0:
-    dependencies:
-      '@types/estree': 1.0.5
-      estree-walker: 3.0.3
-      is-reference: 3.0.2
+  pathe@1.1.2: {}
 
-  picocolors@1.0.0: {}
+  picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.2: {}
+
   pidtree@0.3.1: {}
 
   pidtree@0.6.0: {}
@@ -27719,9 +26432,11 @@ snapshots:
     dependencies:
       find-up: 4.1.0
 
-  pkg-dir@5.0.0:
+  pkg-types@1.2.1:
     dependencies:
-      find-up: 5.0.0
+      confbox: 0.1.8
+      mlly: 1.7.3
+      pathe: 1.1.2
 
   plop@3.1.1:
     dependencies:
@@ -27736,99 +26451,99 @@ snapshots:
 
   polished@4.3.1:
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
 
   posix-character-classes@0.1.1: {}
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.4.38):
+  postcss-import@15.1.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.38
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.4.38):
+  postcss-js@4.0.1(postcss@8.4.49):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.38
+      postcss: 8.4.49
 
-  postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  postcss-load-config@3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5)):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)):
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.1
+      lilconfig: 3.1.2
+      yaml: 2.6.1
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)):
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.1
+      lilconfig: 3.1.2
+      yaml: 2.6.1
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)
 
-  postcss-load-config@4.0.2(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
-      lilconfig: 3.1.1
-      yaml: 2.4.1
+      lilconfig: 3.1.2
+      yaml: 2.6.1
     optionalDependencies:
-      postcss: 8.4.38
-      ts-node: 10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)
+      postcss: 8.4.49
+      ts-node: 10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)
 
-  postcss-nested@6.0.1(postcss@8.4.38):
+  postcss-nested@6.2.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.16
+      postcss: 8.4.49
+      postcss-selector-parser: 6.1.2
 
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.0.16:
+  postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.14:
+  postcss@8.4.31:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.2.0
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
-  postcss@8.4.38:
+  postcss@8.4.49:
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
-      source-map-js: 1.2.0
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
 
-  posthog-js@1.187.1:
+  posthog-js@1.184.1:
     dependencies:
       core-js: 3.39.0
       fflate: 0.4.8
       preact: 10.24.3
       web-vitals: 4.2.4
 
-  posthtml-parser@0.10.2:
+  posthtml-parser@0.11.0:
     dependencies:
       htmlparser2: 7.2.0
 
-  posthtml-parser@0.11.0:
+  posthtml-parser@0.12.1:
     dependencies:
-      htmlparser2: 7.2.0
+      htmlparser2: 9.1.0
 
   posthtml-render@3.0.0:
     dependencies:
@@ -27849,20 +26564,13 @@ snapshots:
       minimist: 1.2.8
       mkdirp-classic: 0.5.3
       napi-build-utils: 1.0.2
-      node-abi: 3.57.0
-      pump: 3.0.0
+      node-abi: 3.71.0
+      pump: 3.0.2
       rc: 1.2.8
       simple-get: 4.0.1
       tar-fs: 2.1.1
       tunnel-agent: 0.6.0
 
-  preferred-pm@3.1.3:
-    dependencies:
-      find-up: 5.0.0
-      find-yarn-workspace-root2: 1.2.16
-      path-exists: 4.0.0
-      which-pm: 2.0.0
-
   prelude-ls@1.1.2: {}
 
   prelude-ls@1.2.1: {}
@@ -27874,12 +26582,12 @@ snapshots:
       camelcase-keys: 6.2.2
       chalk: 2.4.2
       common-tags: 1.8.2
-      core-js: 3.36.1
+      core-js: 3.39.0
       eslint: 5.16.0
       find-up: 4.1.0
       get-stdin: 7.0.0
       glob: 7.2.3
-      ignore: 5.3.1
+      ignore: 5.3.2
       lodash.memoize: 4.1.2
       loglevel-colored-level-prefix: 1.0.0
       messageformat: 2.3.0
@@ -27910,7 +26618,7 @@ snapshots:
     dependencies:
       '@typescript-eslint/parser': 1.13.0(eslint@5.16.0)
       common-tags: 1.8.2
-      core-js: 3.36.1
+      core-js: 3.39.0
       dlv: 1.1.3
       eslint: 5.16.0
       indent-string: 4.0.0
@@ -27932,6 +26640,8 @@ snapshots:
 
   prettier@2.8.8: {}
 
+  prettier@3.3.3: {}
+
   pretty-format@23.6.0:
     dependencies:
       ansi-regex: 3.0.1
@@ -27943,19 +26653,22 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-format@28.1.3:
+  pretty-format@29.7.0:
     dependencies:
-      '@jest/schemas': 28.1.3
-      ansi-regex: 5.0.1
+      '@jest/schemas': 29.6.3
       ansi-styles: 5.2.0
-      react-is: 18.2.0
-
-  pretty-hrtime@1.0.3: {}
+      react-is: 18.3.1
 
   prism-react-renderer@1.3.5(react@18.2.0):
     dependencies:
       react: 18.2.0
 
+  prism-react-renderer@2.4.0(react@18.2.0):
+    dependencies:
+      '@types/prismjs': 1.26.5
+      clsx: 2.1.1
+      react: 18.2.0
+
   prismjs@1.23.0:
     optionalDependencies:
       clipboard: 2.0.11
@@ -27975,7 +26688,7 @@ snapshots:
       err-code: 2.0.3
       retry: 0.12.0
 
-  prompts-ncu@3.0.0:
+  prompts-ncu@3.0.1:
     dependencies:
       kleur: 4.1.5
       sisteransi: 1.0.5
@@ -27999,7 +26712,7 @@ snapshots:
 
   proto-list@1.2.4: {}
 
-  protobufjs@7.2.6:
+  protobufjs@7.4.0:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
       '@protobufjs/base64': 1.1.2
@@ -28014,65 +26727,24 @@ snapshots:
       '@types/node': 15.14.9
       long: 5.2.3
 
-  proxy-addr@2.0.7:
-    dependencies:
-      forwarded: 0.2.0
-      ipaddr.js: 1.9.1
-
-  proxy-from-env@1.1.0: {}
-
   prr@1.0.1: {}
 
-  pseudomap@1.0.2: {}
-
-  psl@1.9.0: {}
-
-  pump@2.0.1:
+  psl@1.11.0:
     dependencies:
-      end-of-stream: 1.4.4
-      once: 1.4.0
+      punycode: 2.3.1
 
-  pump@3.0.0:
+  pump@3.0.2:
     dependencies:
       end-of-stream: 1.4.4
       once: 1.4.0
 
-  pumpify@1.5.1:
-    dependencies:
-      duplexify: 3.7.1
-      inherits: 2.0.4
-      pump: 2.0.1
-
   punycode@2.3.1: {}
 
   pupa@3.1.0:
     dependencies:
       escape-goat: 4.0.0
 
-  puppeteer-core@2.1.1:
-    dependencies:
-      '@types/mime-types': 2.1.4
-      debug: 4.3.4
-      extract-zip: 1.7.0
-      https-proxy-agent: 4.0.0
-      mime: 2.6.0
-      mime-types: 2.1.35
-      progress: 2.0.3
-      proxy-from-env: 1.1.0
-      rimraf: 2.7.1
-      ws: 6.2.2
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
-  qs@6.11.0:
-    dependencies:
-      side-channel: 1.0.6
-
-  qs@6.12.1:
-    dependencies:
-      side-channel: 1.0.6
+  pure-rand@6.1.0: {}
 
   querystring@0.2.0: {}
 
@@ -28088,8 +26760,6 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
-  ramda@0.29.0: {}
-
   randomatic@3.1.1:
     dependencies:
       is-number: 4.0.0
@@ -28100,18 +26770,9 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  range-parser@1.2.1: {}
-
-  raw-body@2.5.2:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.0
-      iconv-lite: 0.4.24
-      unpipe: 1.0.0
-
   rc-config-loader@4.1.3:
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       js-yaml: 4.1.0
       json5: 2.2.3
       require-from-string: 2.0.2
@@ -28125,26 +26786,21 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-colorful@5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
   react-devtools-inline@4.4.0:
     dependencies:
       es6-symbol: 3.1.4
 
-  react-docgen-typescript@2.2.2(typescript@4.9.5):
+  react-docgen-typescript@2.2.2(typescript@5.6.3):
     dependencies:
-      typescript: 4.9.5
+      typescript: 5.6.3
 
-  react-docgen@7.0.3:
+  react-docgen@7.1.0:
     dependencies:
-      '@babel/core': 7.24.4
-      '@babel/traverse': 7.24.1
-      '@babel/types': 7.24.0
+      '@babel/core': 7.26.0
+      '@babel/traverse': 7.25.9
+      '@babel/types': 7.26.0
       '@types/babel__core': 7.20.5
-      '@types/babel__traverse': 7.20.5
+      '@types/babel__traverse': 7.20.6
       '@types/doctrine': 0.0.9
       '@types/resolve': 1.20.6
       doctrine: 3.0.0
@@ -28157,24 +26813,17 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
       react: 18.2.0
-      scheduler: 0.23.0
+      scheduler: 0.23.2
 
-  react-element-to-jsx-string@15.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-dom@18.3.1(react@18.2.0):
     dependencies:
-      '@base2/pretty-print-object': 1.0.1
-      is-plain-object: 5.0.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-is: 18.1.0
-
-  react-error-boundary@3.1.4(react@18.2.0):
-    dependencies:
-      '@babel/runtime': 7.24.4
+      loose-envify: 1.4.0
       react: 18.2.0
+      scheduler: 0.23.2
 
   react-error-overlay@6.0.9: {}
 
-  react-hook-form@7.51.3(react@18.2.0):
+  react-hook-form@7.53.2(react@18.2.0):
     dependencies:
       react: 18.2.0
 
@@ -28186,22 +26835,15 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-is@18.1.0: {}
+  react-is@18.3.1: {}
 
-  react-is@18.2.0: {}
-
-  react-live@2.4.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  react-live@4.1.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
-      '@types/buble': 0.20.5
-      buble: 0.19.6
-      core-js: 3.36.1
-      dom-iterator: 1.0.0
-      prism-react-renderer: 1.3.5(react@18.2.0)
-      prop-types: 15.8.1
+      prism-react-renderer: 2.4.0(react@18.2.0)
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-      react-simple-code-editor: 0.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      unescape: 1.0.1
+      sucrase: 3.35.0
+      use-editable: 2.3.3(react@18.2.0)
 
   react-lorem-component@0.13.0(react@18.2.0):
     dependencies:
@@ -28211,19 +26853,17 @@ snapshots:
       react: 18.2.0
       seedable-random: 0.0.1
 
-  react-multi-ref@1.0.1:
+  react-multi-ref@1.0.2:
     dependencies:
-      '@babel/runtime': 7.24.4
-
-  react-refresh@0.14.0: {}
+      '@babel/runtime': 7.26.0
 
-  react-refresh@0.9.0: {}
+  react-refresh@0.14.2: {}
 
   react-remove-scroll-bar@2.3.6(@types/react@18.2.8)(react@18.2.0):
     dependencies:
       react: 18.2.0
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.2.8
 
@@ -28232,58 +26872,31 @@ snapshots:
       react: 18.2.0
       react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
       react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-
-  react-remove-scroll@2.5.5(@types/react@18.2.8)(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
-      tslib: 2.6.2
-      use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
-      use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.8
-
-  react-remove-scroll@2.5.9(@types/react@18.2.8)(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-remove-scroll-bar: 2.3.6(@types/react@18.2.8)(react@18.2.0)
-      react-style-singleton: 2.2.1(@types/react@18.2.8)(react@18.2.0)
-      tslib: 2.6.2
+      tslib: 2.8.1
       use-callback-ref: 1.3.2(@types/react@18.2.8)(react@18.2.0)
       use-sidecar: 1.1.2(@types/react@18.2.8)(react@18.2.0)
     optionalDependencies:
       '@types/react': 18.2.8
 
-  react-simple-code-editor@0.11.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
   react-style-singleton@2.2.1(@types/react@18.2.8)(react@18.2.0):
     dependencies:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.2.8
 
-  react-textarea-autosize@8.5.3(@types/react@18.2.8)(react@18.2.0):
+  react-textarea-autosize@8.5.5(@types/react@18.2.8)(react@18.2.0):
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
       react: 18.2.0
       use-composed-ref: 1.3.0(react@18.2.0)
       use-latest: 1.2.1(@types/react@18.2.8)(react@18.2.0)
     transitivePeerDependencies:
       - '@types/react'
 
-  react-wrap-balancer@1.1.0(react@18.2.0):
+  react-wrap-balancer@1.1.1(react@18.2.0):
     dependencies:
       react: 18.2.0
 
@@ -28297,13 +26910,13 @@ snapshots:
 
   read-package-json-fast@3.0.2:
     dependencies:
-      json-parse-even-better-errors: 3.0.1
+      json-parse-even-better-errors: 3.0.2
       npm-normalize-package-bin: 3.0.1
 
   read-package-json@6.0.4:
     dependencies:
-      glob: 10.3.12
-      json-parse-even-better-errors: 3.0.1
+      glob: 10.4.5
+      json-parse-even-better-errors: 3.0.2
       normalize-package-data: 5.0.0
       npm-normalize-package-bin: 3.0.1
 
@@ -28353,13 +26966,13 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  recast@0.23.6:
+  recast@0.23.9:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
       source-map: 0.6.1
       tiny-invariant: 1.3.3
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   rechoir@0.6.2:
     dependencies:
@@ -28369,6 +26982,36 @@ snapshots:
     dependencies:
       resolve: 1.22.8
 
+  recma-build-jsx@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-util-build-jsx: 3.0.1
+      vfile: 6.0.3
+
+  recma-jsx@1.0.0(acorn@8.14.0):
+    dependencies:
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      estree-util-to-js: 2.0.0
+      recma-parse: 1.0.0
+      recma-stringify: 1.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - acorn
+
+  recma-parse@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      esast-util-from-js: 2.0.1
+      unified: 11.0.5
+      vfile: 6.0.3
+
+  recma-stringify@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.6
+      estree-util-to-js: 2.0.0
+      unified: 11.0.5
+      vfile: 6.0.3
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -28378,11 +27021,11 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      globalthis: 1.0.3
-      which-builtin-type: 1.1.3
+      globalthis: 1.0.4
+      which-builtin-type: 1.1.4
 
   refractor@3.3.1:
     dependencies:
@@ -28390,30 +27033,34 @@ snapshots:
       parse-entities: 2.0.0
       prismjs: 1.23.0
 
-  regenerate-unicode-properties@10.1.1:
-    dependencies:
-      regenerate: 1.4.2
-
-  regenerate-unicode-properties@9.0.0:
+  regenerate-unicode-properties@10.2.0:
     dependencies:
       regenerate: 1.4.2
 
   regenerate@1.4.2: {}
 
-  regenerator-runtime@0.13.11: {}
-
   regenerator-runtime@0.14.1: {}
 
   regenerator-transform@0.15.2:
     dependencies:
-      '@babel/runtime': 7.24.4
+      '@babel/runtime': 7.26.0
 
   regex-not@1.0.2:
     dependencies:
       extend-shallow: 3.0.2
       safe-regex: 1.1.0
 
-  regexp.prototype.flags@1.5.2:
+  regex-recursion@4.3.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regex-utilities@2.3.0: {}
+
+  regex@5.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
+  regexp.prototype.flags@1.5.3:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
@@ -28424,168 +27071,139 @@ snapshots:
 
   regexpp@3.2.0: {}
 
-  regexpu-core@4.8.0:
-    dependencies:
-      regenerate: 1.4.2
-      regenerate-unicode-properties: 9.0.0
-      regjsgen: 0.5.2
-      regjsparser: 0.7.0
-      unicode-match-property-ecmascript: 2.0.0
-      unicode-match-property-value-ecmascript: 2.1.0
-
-  regexpu-core@5.3.2:
+  regexpu-core@6.1.1:
     dependencies:
-      '@babel/regjsgen': 0.8.0
       regenerate: 1.4.2
-      regenerate-unicode-properties: 10.1.1
-      regjsparser: 0.9.1
+      regenerate-unicode-properties: 10.2.0
+      regjsgen: 0.8.0
+      regjsparser: 0.11.2
       unicode-match-property-ecmascript: 2.0.0
-      unicode-match-property-value-ecmascript: 2.1.0
+      unicode-match-property-value-ecmascript: 2.2.0
 
   registry-auth-token@5.0.2:
     dependencies:
-      '@pnpm/npm-conf': 2.2.2
+      '@pnpm/npm-conf': 2.3.1
 
   registry-url@6.0.1:
     dependencies:
       rc: 1.2.8
 
-  regjsgen@0.5.2: {}
-
-  regjsparser@0.7.0:
-    dependencies:
-      jsesc: 0.5.0
-
-  regjsparser@0.9.1:
-    dependencies:
-      jsesc: 0.5.0
-
-  rehype-parse@7.0.1:
-    dependencies:
-      hast-util-from-parse5: 6.0.1
-      parse5: 6.0.1
-
-  rehype-parse@8.0.5:
-    dependencies:
-      '@types/hast': 2.3.10
-      hast-util-from-parse5: 7.1.2
-      parse5: 6.0.1
-      unified: 10.1.2
-
-  rehype-pretty-code@0.10.2(shiki@0.14.7):
+  regjsgen@0.8.0: {}
+
+  regjsparser@0.11.2:
     dependencies:
-      hash-obj: 4.0.0
-      hast-util-to-string: 2.0.0
-      parse-numeric-range: 1.3.0
-      rehype-parse: 8.0.5
-      shiki: 0.14.7
-      unified: 10.1.2
-      unist-util-visit: 4.1.2
+      jsesc: 3.0.2
 
-  rehype-slug@5.1.0:
+  rehype-parse@9.0.1:
     dependencies:
-      '@types/hast': 2.3.10
-      github-slugger: 2.0.0
-      hast-util-has-property: 2.0.1
-      hast-util-heading-rank: 2.1.1
-      hast-util-to-string: 2.0.0
-      unified: 10.1.2
-      unist-util-visit: 4.1.2
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
 
-  rehype-stringify@8.0.0:
+  rehype-pretty-code@0.14.0(shiki@1.23.1):
     dependencies:
-      hast-util-to-html: 7.1.2
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      parse-numeric-range: 1.3.0
+      rehype-parse: 9.0.1
+      shiki: 1.23.1
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
 
-  rehype-stringify@9.0.4:
+  rehype-recma@1.0.0:
     dependencies:
-      '@types/hast': 2.3.10
-      hast-util-to-html: 8.0.4
-      unified: 10.1.2
+      '@types/estree': 1.0.6
+      '@types/hast': 3.0.4
+      hast-util-to-estree: 3.1.0
+    transitivePeerDependencies:
+      - supports-color
 
-  rehype@11.0.0:
+  rehype-slug@6.0.0:
     dependencies:
-      rehype-parse: 7.0.1
-      rehype-stringify: 8.0.0
-      unified: 9.2.2
+      '@types/hast': 3.0.4
+      github-slugger: 2.0.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-to-string: 3.0.1
+      unist-util-visit: 5.0.0
 
-  remark-autolink-headings@6.1.0:
+  rehype-stringify@10.0.1:
     dependencies:
-      '@types/hast': 2.3.10
-      extend: 3.0.2
-      unified: 9.2.2
-      unist-util-visit: 2.0.3
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.3
+      unified: 11.0.5
 
-  remark-external-links@8.0.0:
+  rehype@13.0.2:
     dependencies:
-      extend: 3.0.2
-      is-absolute-url: 3.0.3
-      mdast-util-definitions: 4.0.0
-      space-separated-tokens: 1.1.5
-      unist-util-visit: 2.0.3
+      '@types/hast': 3.0.4
+      rehype-parse: 9.0.1
+      rehype-stringify: 10.0.1
+      unified: 11.0.5
 
-  remark-frontmatter@4.0.1:
+  remark-frontmatter@5.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-frontmatter: 1.0.1
-      micromark-extension-frontmatter: 1.1.1
-      unified: 10.1.2
+      '@types/mdast': 4.0.4
+      mdast-util-frontmatter: 2.0.1
+      micromark-extension-frontmatter: 2.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
 
-  remark-gfm@3.0.1:
+  remark-gfm@4.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-gfm: 2.0.2
-      micromark-extension-gfm: 2.0.3
-      unified: 10.1.2
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.0.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
-  remark-mdx-frontmatter@1.1.1:
+  remark-mdx-frontmatter@4.0.0:
     dependencies:
-      estree-util-is-identifier-name: 1.1.0
-      estree-util-value-to-estree: 1.3.0
-      js-yaml: 4.1.0
+      '@types/mdast': 4.0.4
+      estree-util-is-identifier-name: 3.0.0
+      estree-util-value-to-estree: 3.2.1
       toml: 3.0.0
+      unified: 11.0.5
+      yaml: 2.6.1
 
-  remark-mdx@2.3.0:
+  remark-mdx@3.1.0:
     dependencies:
-      mdast-util-mdx: 2.0.1
-      micromark-extension-mdxjs: 1.0.1
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
     transitivePeerDependencies:
       - supports-color
 
-  remark-parse@10.0.2:
+  remark-parse@11.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-from-markdown: 1.3.1
-      unified: 10.1.2
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.1
+      unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
-  remark-rehype@10.1.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-to-hast: 12.3.0
-      unified: 10.1.2
-
-  remark-slug@6.1.0:
+  remark-rehype@11.1.1:
     dependencies:
-      github-slugger: 1.5.0
-      mdast-util-to-string: 1.1.0
-      unist-util-visit: 2.0.3
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      mdast-util-to-hast: 13.2.0
+      unified: 11.0.5
+      vfile: 6.0.3
 
-  remark-stringify@10.0.3:
+  remark-stringify@11.0.0:
     dependencies:
-      '@types/mdast': 3.0.15
-      mdast-util-to-markdown: 1.5.0
-      unified: 10.1.2
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
 
-  remark@14.0.3:
+  remark@15.0.1:
     dependencies:
-      '@types/mdast': 3.0.15
-      remark-parse: 10.0.2
-      remark-stringify: 10.0.3
-      unified: 10.1.2
+      '@types/mdast': 4.0.4
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
     transitivePeerDependencies:
       - supports-color
 
@@ -28643,17 +27261,17 @@ snapshots:
 
   resolve-url@0.2.1: {}
 
-  resolve.exports@1.1.1: {}
+  resolve.exports@2.0.2: {}
 
   resolve@1.22.8:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.15.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
   resolve@2.0.0-next.5:
     dependencies:
-      is-core-module: 2.13.1
+      is-core-module: 2.15.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
@@ -28682,26 +27300,46 @@ snapshots:
 
   reusify@1.0.4: {}
 
-  rfdc@1.3.1: {}
+  rfdc@1.4.1: {}
 
   rimraf@2.6.3:
     dependencies:
       glob: 7.2.3
 
-  rimraf@2.7.1:
-    dependencies:
-      glob: 7.2.3
-
   rimraf@3.0.2:
     dependencies:
       glob: 7.2.3
 
-  rimraf@5.0.5:
+  rimraf@5.0.10:
     dependencies:
-      glob: 10.3.12
+      glob: 10.4.5
+
+  rollup@3.29.5:
+    optionalDependencies:
+      fsevents: 2.3.3
 
-  rollup@3.29.4:
+  rollup@4.27.4:
+    dependencies:
+      '@types/estree': 1.0.6
     optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.27.4
+      '@rollup/rollup-android-arm64': 4.27.4
+      '@rollup/rollup-darwin-arm64': 4.27.4
+      '@rollup/rollup-darwin-x64': 4.27.4
+      '@rollup/rollup-freebsd-arm64': 4.27.4
+      '@rollup/rollup-freebsd-x64': 4.27.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.27.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.27.4
+      '@rollup/rollup-linux-arm64-gnu': 4.27.4
+      '@rollup/rollup-linux-arm64-musl': 4.27.4
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.27.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.27.4
+      '@rollup/rollup-linux-s390x-gnu': 4.27.4
+      '@rollup/rollup-linux-x64-gnu': 4.27.4
+      '@rollup/rollup-linux-x64-musl': 4.27.4
+      '@rollup/rollup-win32-arm64-msvc': 4.27.4
+      '@rollup/rollup-win32-ia32-msvc': 4.27.4
+      '@rollup/rollup-win32-x64-msvc': 4.27.4
       fsevents: 2.3.3
 
   rss@1.2.2:
@@ -28721,11 +27359,7 @@ snapshots:
 
   rxjs@7.8.1:
     dependencies:
-      tslib: 2.6.2
-
-  sade@1.8.1:
-    dependencies:
-      mri: 1.2.0
+      tslib: 2.8.1
 
   safe-array-concat@1.1.2:
     dependencies:
@@ -28750,11 +27384,11 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  saxes@5.0.1:
+  saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.23.0:
+  scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
 
@@ -28774,6 +27408,10 @@ snapshots:
     dependencies:
       compute-scroll-into-view: 3.1.0
 
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.0
+
   section-matter@1.0.0:
     dependencies:
       extend-shallow: 2.0.1
@@ -28786,7 +27424,7 @@ snapshots:
 
   semver-diff@4.0.0:
     dependencies:
-      semver: 7.6.0
+      semver: 7.6.3
 
   semver-utils@1.1.4: {}
 
@@ -28800,47 +27438,18 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  semver@7.6.0:
-    dependencies:
-      lru-cache: 6.0.0
-
-  send@0.18.0:
-    dependencies:
-      debug: 2.6.9(supports-color@6.1.0)
-      depd: 2.0.0
-      destroy: 1.2.0
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 0.5.2
-      http-errors: 2.0.0
-      mime: 1.6.0
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.1
-    transitivePeerDependencies:
-      - supports-color
+  semver@7.6.3: {}
 
   sentence-case@3.0.4:
     dependencies:
       no-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
       upper-case-first: 2.0.2
 
   serialize-javascript@6.0.2:
     dependencies:
       randombytes: 2.1.0
 
-  serve-static@1.15.0:
-    dependencies:
-      encodeurl: 1.0.2
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 0.18.0
-    transitivePeerDependencies:
-      - supports-color
-
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -28870,8 +27479,6 @@ snapshots:
       is-plain-object: 2.0.4
       split-string: 3.1.0
 
-  setprototypeof@1.2.0: {}
-
   shallow-clone@3.0.1:
     dependencies:
       kind-of: 6.0.3
@@ -28882,11 +27489,38 @@ snapshots:
       detect-libc: 2.0.3
       node-addon-api: 6.1.0
       prebuild-install: 7.1.2
-      semver: 7.6.0
+      semver: 7.6.3
       simple-get: 4.0.1
-      tar-fs: 3.0.5
+      tar-fs: 3.0.6
       tunnel-agent: 0.6.0
 
+  sharp@0.33.5:
+    dependencies:
+      color: 4.2.3
+      detect-libc: 2.0.3
+      semver: 7.6.3
+    optionalDependencies:
+      '@img/sharp-darwin-arm64': 0.33.5
+      '@img/sharp-darwin-x64': 0.33.5
+      '@img/sharp-libvips-darwin-arm64': 1.0.4
+      '@img/sharp-libvips-darwin-x64': 1.0.4
+      '@img/sharp-libvips-linux-arm': 1.0.5
+      '@img/sharp-libvips-linux-arm64': 1.0.4
+      '@img/sharp-libvips-linux-s390x': 1.0.4
+      '@img/sharp-libvips-linux-x64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-arm64': 1.0.4
+      '@img/sharp-libvips-linuxmusl-x64': 1.0.4
+      '@img/sharp-linux-arm': 0.33.5
+      '@img/sharp-linux-arm64': 0.33.5
+      '@img/sharp-linux-s390x': 0.33.5
+      '@img/sharp-linux-x64': 0.33.5
+      '@img/sharp-linuxmusl-arm64': 0.33.5
+      '@img/sharp-linuxmusl-x64': 0.33.5
+      '@img/sharp-wasm32': 0.33.5
+      '@img/sharp-win32-ia32': 0.33.5
+      '@img/sharp-win32-x64': 0.33.5
+    optional: true
+
   shebang-command@1.2.0:
     dependencies:
       shebang-regex: 1.0.0
@@ -28907,19 +27541,21 @@ snapshots:
       interpret: 1.4.0
       rechoir: 0.6.2
 
-  shiki@0.14.7:
+  shiki@1.23.1:
     dependencies:
-      ansi-sequence-parser: 1.1.1
-      jsonc-parser: 3.2.1
-      vscode-oniguruma: 1.7.0
-      vscode-textmate: 8.0.0
+      '@shikijs/core': 1.23.1
+      '@shikijs/engine-javascript': 1.23.1
+      '@shikijs/engine-oniguruma': 1.23.1
+      '@shikijs/types': 1.23.1
+      '@shikijs/vscode-textmate': 9.3.0
+      '@types/hast': 3.0.4
 
   side-channel@1.0.6:
     dependencies:
       call-bind: 1.0.7
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
-      object-inspect: 1.13.1
+      object-inspect: 1.13.3
 
   signal-exit@3.0.7: {}
 
@@ -28947,15 +27583,9 @@ snapshots:
     dependencies:
       is-arrayish: 0.3.2
 
-  sirv@1.0.19:
-    dependencies:
-      '@polka/url': 1.0.0-next.25
-      mrmime: 1.0.1
-      totalist: 1.1.0
-
   sirv@2.0.4:
     dependencies:
-      '@polka/url': 1.0.0-next.25
+      '@polka/url': 1.0.0-next.28
       mrmime: 2.0.0
       totalist: 3.0.1
 
@@ -28967,6 +27597,8 @@ snapshots:
 
   slash@4.0.0: {}
 
+  slash@5.1.0: {}
+
   slice-ansi@2.1.0:
     dependencies:
       ansi-styles: 3.2.1
@@ -28986,19 +27618,10 @@ snapshots:
 
   smart-buffer@4.2.0: {}
 
-  smartwrap@2.0.2:
-    dependencies:
-      array.prototype.flat: 1.3.2
-      breakword: 1.0.6
-      grapheme-splitter: 1.0.4
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 15.4.1
-
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   snapdragon-node@2.1.1:
     dependencies:
@@ -29026,7 +27649,7 @@ snapshots:
   socks-proxy-agent@7.0.0:
     dependencies:
       agent-base: 6.0.2
-      debug: 4.3.4
+      debug: 4.3.7
       socks: 2.8.3
     transitivePeerDependencies:
       - supports-color
@@ -29036,11 +27659,7 @@ snapshots:
       ip-address: 9.0.5
       smart-buffer: 4.2.0
 
-  sort-keys@5.0.0:
-    dependencies:
-      is-plain-obj: 4.1.0
-
-  source-map-js@1.2.0: {}
+  source-map-js@1.2.1: {}
 
   source-map-resolve@0.5.3:
     dependencies:
@@ -29072,36 +27691,34 @@ snapshots:
     dependencies:
       whatwg-url: 7.1.0
 
-  sourcemap-codec@1.4.8: {}
-
   space-separated-tokens@1.1.5: {}
 
   space-separated-tokens@2.0.2: {}
 
-  spawn-command@0.0.2-1: {}
+  spawn-command@0.0.2: {}
 
   spawn-please@2.0.2:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
 
-  spawndamnit@2.0.0:
+  spawndamnit@3.0.1:
     dependencies:
-      cross-spawn: 5.1.0
-      signal-exit: 3.0.7
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
 
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.17
+      spdx-license-ids: 3.0.20
 
   spdx-exceptions@2.5.0: {}
 
   spdx-expression-parse@3.0.1:
     dependencies:
       spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.17
+      spdx-license-ids: 3.0.20
 
-  spdx-license-ids@3.0.17: {}
+  spdx-license-ids@3.0.20: {}
 
   split-string@3.1.0:
     dependencies:
@@ -29117,16 +27734,14 @@ snapshots:
 
   srcset@4.0.0: {}
 
-  ssri@10.0.5:
+  ssri@10.0.6:
     dependencies:
-      minipass: 7.0.4
+      minipass: 7.1.2
 
   ssri@9.0.1:
     dependencies:
       minipass: 3.3.6
 
-  stable@0.1.8: {}
-
   stack-utils@2.0.6:
     dependencies:
       escape-string-regexp: 2.0.0
@@ -29135,7 +27750,7 @@ snapshots:
     dependencies:
       '@open-draft/deferred-promise': 2.2.0
       dotenv: 16.4.5
-      mime-db: 1.52.0
+      mime-db: 1.53.0
       outvariant: 1.4.0
 
   static-extend@0.1.2:
@@ -29143,58 +27758,54 @@ snapshots:
       define-property: 0.2.5
       object-copy: 0.1.0
 
-  statuses@2.0.1: {}
-
   stdin-discarder@0.1.0:
     dependencies:
       bl: 5.1.0
 
-  stop-iteration-iterator@1.0.0:
-    dependencies:
-      internal-slot: 1.0.7
-
-  store2@2.14.3: {}
-
-  storybook-dark-mode@3.0.3(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  storybook-dark-mode@4.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.4.5(prettier@3.3.3)):
     dependencies:
-      '@storybook/addons': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/components': 7.6.17(@types/react-dom@18.2.4)(@types/react@18.2.8)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/core-events': 7.6.17
+      '@storybook/components': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/core-events': 8.4.5(storybook@8.4.5(prettier@3.3.3))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/theming': 7.6.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/icons': 1.2.12(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/manager-api': 8.4.5(storybook@8.4.5(prettier@3.3.3))
+      '@storybook/theming': 8.4.5(storybook@8.4.5(prettier@3.3.3))
       fast-deep-equal: 3.1.3
       memoizerific: 1.11.3
-    optionalDependencies:
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
     transitivePeerDependencies:
-      - '@types/react'
-      - '@types/react-dom'
+      - react
+      - react-dom
+      - storybook
 
-  storybook@7.6.17(encoding@0.1.13):
+  storybook@8.4.5(prettier@2.8.8):
     dependencies:
-      '@storybook/cli': 7.6.17(encoding@0.1.13)
+      '@storybook/core': 8.4.5(prettier@2.8.8)
+    optionalDependencies:
+      prettier: 2.8.8
     transitivePeerDependencies:
       - bufferutil
-      - encoding
       - supports-color
       - utf-8-validate
 
-  stream-shift@1.0.3: {}
-
-  stream-transform@2.1.3:
+  storybook@8.4.5(prettier@3.3.3):
     dependencies:
-      mixme: 0.5.10
+      '@storybook/core': 8.4.5(prettier@3.3.3)
+    optionalDependencies:
+      prettier: 3.3.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
 
   streamsearch@1.1.0: {}
 
-  streamx@2.16.1:
+  streamx@2.20.2:
     dependencies:
       fast-fifo: 1.3.2
       queue-tick: 1.0.1
+      text-decoder: 1.2.1
     optionalDependencies:
-      bare-events: 2.2.2
+      bare-events: 2.5.0
 
   strict-event-emitter@0.4.6: {}
 
@@ -29207,7 +27818,7 @@ snapshots:
 
   string-length@5.0.1:
     dependencies:
-      char-regex: 2.0.1
+      char-regex: 2.0.2
       strip-ansi: 7.1.0
 
   string-natural-compare@3.0.1: {}
@@ -29235,18 +27846,24 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
 
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.7
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+
   string.prototype.matchall@4.0.11:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-errors: 1.3.0
       es-object-atoms: 1.0.0
       get-intrinsic: 1.2.4
       gopd: 1.0.1
       has-symbols: 1.0.3
       internal-slot: 1.0.7
-      regexp.prototype.flags: 1.5.2
+      regexp.prototype.flags: 1.5.3
       set-function-name: 2.0.2
       side-channel: 1.0.6
 
@@ -29254,14 +27871,19 @@ snapshots:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
 
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.23.5
+
   string.prototype.trim@1.2.9:
     dependencies:
       call-bind: 1.0.7
       define-properties: 1.2.1
-      es-abstract: 1.23.3
+      es-abstract: 1.23.5
       es-object-atoms: 1.0.0
 
   string.prototype.trimend@1.0.8:
@@ -29284,12 +27906,6 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  stringify-entities@3.1.0:
-    dependencies:
-      character-entities-html4: 1.1.4
-      character-entities-legacy: 1.1.4
-      xtend: 4.0.2
-
   stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0
@@ -29313,7 +27929,7 @@ snapshots:
 
   strip-ansi@7.1.0:
     dependencies:
-      ansi-regex: 6.0.1
+      ansi-regex: 6.1.0
 
   strip-bom-string@1.0.0: {}
 
@@ -29347,18 +27963,22 @@ snapshots:
     dependencies:
       inline-style-parser: 0.1.1
 
-  styled-jsx@5.1.1(@babel/core@7.24.4)(react@18.2.0):
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
+  styled-jsx@5.1.1(@babel/core@7.26.0)(react@18.2.0):
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
     optionalDependencies:
-      '@babel/core': 7.24.4
+      '@babel/core': 7.26.0
 
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       commander: 4.1.1
-      glob: 10.3.12
+      glob: 10.4.5
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
@@ -29382,33 +28002,16 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-hyperlinks@2.3.0:
-    dependencies:
-      has-flag: 4.0.0
-      supports-color: 7.2.0
-
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svgo@2.8.0:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 4.3.0
-      css-tree: 1.1.3
-      csso: 4.2.0
-      picocolors: 1.0.0
-      stable: 0.1.8
-
   swr@2.2.5(react@18.2.0):
     dependencies:
       client-only: 0.0.1
       react: 18.2.0
-      use-sync-external-store: 1.2.0(react@18.2.0)
+      use-sync-external-store: 1.2.2(react@18.2.0)
 
   symbol-tree@3.2.4: {}
 
-  synchronous-promise@2.0.17: {}
-
   table@5.4.6:
     dependencies:
       ajv: 6.12.6
@@ -29418,7 +28021,7 @@ snapshots:
 
   table@6.8.2:
     dependencies:
-      ajv: 8.12.0
+      ajv: 8.17.1
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
       string-width: 4.2.3
@@ -29426,17 +28029,19 @@ snapshots:
 
   tailwind-merge@1.14.0: {}
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))):
+  tailwind-merge@2.5.4: {}
+
+  tailwind-variants@0.1.20(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
+      tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
 
-  tailwind-variants@0.1.20(tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))):
+  tailwind-variants@0.1.20(tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))):
     dependencies:
       tailwind-merge: 1.14.0
-      tailwindcss: 3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
+      tailwindcss: 3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
 
-  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5)):
+  tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -29446,24 +28051,24 @@ snapshots:
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       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)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.0.16
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -29473,24 +28078,24 @@ snapshots:
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       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)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.0.16
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.3(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5)):
+  tailwindcss@3.4.15(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -29500,18 +28105,18 @@ snapshots:
       fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
-      jiti: 1.21.0
+      jiti: 1.21.6
       lilconfig: 2.1.0
-      micromatch: 4.0.5
+      micromatch: 4.0.8
       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)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.0.16
+      picocolors: 1.1.1
+      postcss: 8.4.49
+      postcss-import: 15.1.0(postcss@8.4.49)
+      postcss-js: 4.0.1(postcss@8.4.49)
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3))
+      postcss-nested: 6.2.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0
     transitivePeerDependencies:
@@ -29525,16 +28130,16 @@ snapshots:
     dependencies:
       chownr: 1.1.4
       mkdirp-classic: 0.5.3
-      pump: 3.0.0
+      pump: 3.0.2
       tar-stream: 2.2.0
 
-  tar-fs@3.0.5:
+  tar-fs@3.0.6:
     dependencies:
-      pump: 3.0.0
+      pump: 3.0.2
       tar-stream: 3.1.7
     optionalDependencies:
-      bare-fs: 2.2.3
-      bare-path: 2.1.1
+      bare-fs: 2.3.5
+      bare-path: 2.1.3
 
   tar-stream@2.2.0:
     dependencies:
@@ -29546,9 +28151,9 @@ snapshots:
 
   tar-stream@3.1.7:
     dependencies:
-      b4a: 1.6.6
+      b4a: 1.6.7
       fast-fifo: 1.3.2
-      streamx: 2.16.1
+      streamx: 2.20.2
 
   tar@6.2.1:
     dependencies:
@@ -29559,59 +28164,40 @@ snapshots:
       mkdirp: 1.0.4
       yallist: 4.0.0
 
-  telejson@7.2.0:
-    dependencies:
-      memoizerific: 1.11.3
-
-  temp-dir@2.0.0: {}
-
   temp@0.8.4:
     dependencies:
       rimraf: 2.6.3
 
-  tempy@1.0.1:
-    dependencies:
-      del: 6.1.1
-      is-stream: 2.0.1
-      temp-dir: 2.0.0
-      type-fest: 0.16.0
-      unique-string: 2.0.0
-
   term-size@2.2.1: {}
 
-  terminal-link@2.1.1:
-    dependencies:
-      ansi-escapes: 4.3.2
-      supports-hyperlinks: 2.3.0
-
-  terser-webpack-plugin@5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
-      terser: 5.30.3
-      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
+      terser: 5.36.0
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
       esbuild: 0.15.18
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))):
+  terser-webpack-plugin@5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
-      terser: 5.30.3
-      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0))
+      terser: 5.36.0
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1))
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      esbuild: 0.20.2
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
+      esbuild: 0.21.5
 
-  terser@5.30.3:
+  terser@5.36.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.11.3
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -29621,6 +28207,8 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.2
 
+  text-decoder@1.2.1: {}
+
   text-extensions@1.9.0: {}
 
   text-table@0.2.0: {}
@@ -29633,6 +28221,10 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  thingies@1.21.0(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
   through2@2.0.5:
     dependencies:
       readable-stream: 2.3.8
@@ -29653,7 +28245,7 @@ snapshots:
 
   title-case@3.0.3:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   tmp@0.0.33:
     dependencies:
@@ -29661,8 +28253,6 @@ snapshots:
 
   tmpl@1.0.5: {}
 
-  to-fast-properties@2.0.0: {}
-
   to-object-path@0.3.0:
     dependencies:
       kind-of: 3.2.2
@@ -29683,27 +28273,19 @@ snapshots:
       regex-not: 1.0.2
       safe-regex: 1.1.0
 
-  tocbot@4.25.0: {}
-
-  toidentifier@1.0.1: {}
-
   toml@2.3.6: {}
 
   toml@3.0.0: {}
 
-  totalist@1.1.0: {}
-
   totalist@3.0.1: {}
 
-  tough-cookie@4.1.3:
+  tough-cookie@4.1.4:
     dependencies:
-      psl: 1.9.0
+      psl: 1.11.0
       punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
 
-  tr46@0.0.3: {}
-
   tr46@1.0.1:
     dependencies:
       punycode: 2.3.1
@@ -29712,21 +28294,23 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  tree-dump@1.0.2(tslib@2.8.1):
+    dependencies:
+      tslib: 2.8.1
+
   tree-kill@1.2.2: {}
 
   trim-lines@3.0.1: {}
 
   trim-newlines@3.0.1: {}
 
-  trough@1.0.5: {}
-
   trough@2.2.0: {}
 
   ts-dedent@2.2.0: {}
 
   ts-interface-checker@0.1.13: {}
 
-  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@15.14.9)(typescript@4.9.5):
+  ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@15.14.9)(typescript@4.9.5):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -29734,8 +28318,8 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 15.14.9
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
@@ -29744,9 +28328,9 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
 
-  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.2.5)(typescript@4.9.5):
+  ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.2.5)(typescript@5.6.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -29754,20 +28338,20 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 20.2.5
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.6.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
     optional: true
 
-  ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5):
+  ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@5.6.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -29775,20 +28359,20 @@ snapshots:
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
       '@types/node': 20.5.1
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
       arg: 4.1.3
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.9.5
+      typescript: 5.6.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
     optional: true
 
-  ts-pattern@4.3.0: {}
+  ts-pattern@5.5.0: {}
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -29797,29 +28381,35 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@1.14.1: {}
 
-  tslib@2.6.2: {}
+  tslib@2.8.1: {}
 
-  tsup@6.4.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
+  tsup@6.4.0(@swc/core@1.9.2(@swc/helpers@0.5.15))(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))(typescript@4.9.5):
     dependencies:
       bundle-require: 3.1.2(esbuild@0.15.18)
       cac: 6.7.14
       chokidar: 3.6.0
-      debug: 4.3.4
+      debug: 4.3.7
       esbuild: 0.15.18
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
-      postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.2(@swc/core@1.4.13(@swc/helpers@0.5.9))(@types/node@20.5.1)(typescript@4.9.5))
+      postcss-load-config: 3.1.4(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.9.2(@swc/helpers@0.5.15))(@types/node@20.5.1)(typescript@4.9.5))
       resolve-from: 5.0.0
-      rollup: 3.29.4
+      rollup: 3.29.5
       source-map: 0.8.0-beta.0
       sucrase: 3.35.0
       tree-kill: 1.2.2
     optionalDependencies:
-      '@swc/core': 1.4.13(@swc/helpers@0.5.9)
-      postcss: 8.4.38
+      '@swc/core': 1.9.2(@swc/helpers@0.5.15)
+      postcss: 8.4.49
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -29835,28 +28425,23 @@ snapshots:
       tslib: 1.14.1
       typescript: 4.9.5
 
+  tsutils@3.21.0(typescript@5.6.3):
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.6.3
+
   tsx@3.14.0:
     dependencies:
       esbuild: 0.18.20
-      get-tsconfig: 4.7.3
+      get-tsconfig: 4.8.1
       source-map-support: 0.5.21
     optionalDependencies:
       fsevents: 2.3.3
 
-  tty-table@4.2.3:
-    dependencies:
-      chalk: 4.1.2
-      csv: 5.5.3
-      kleur: 4.1.5
-      smartwrap: 2.0.2
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-      yargs: 17.7.2
-
   tuf-js@1.1.7:
     dependencies:
       '@tufjs/models': 1.0.4
-      debug: 4.3.4
+      debug: 4.3.7
       make-fetch-happen: 11.1.1
     transitivePeerDependencies:
       - supports-color
@@ -29904,10 +28489,6 @@ snapshots:
 
   type-detect@4.0.8: {}
 
-  type-fest@0.13.1: {}
-
-  type-fest@0.16.0: {}
-
   type-fest@0.18.1: {}
 
   type-fest@0.20.2: {}
@@ -29922,14 +28503,9 @@ snapshots:
 
   type-fest@2.19.0: {}
 
-  type-fest@3.13.1: {}
+  type-fest@4.27.0: {}
 
-  type-is@1.6.18:
-    dependencies:
-      media-typer: 0.3.0
-      mime-types: 2.1.35
-
-  type@2.7.2: {}
+  type@2.7.3: {}
 
   typed-array-buffer@1.0.2:
     dependencies:
@@ -29973,9 +28549,11 @@ snapshots:
 
   typescript@4.9.5: {}
 
-  ufo@1.5.3: {}
+  typescript@5.6.3: {}
+
+  ufo@1.5.4: {}
 
-  uglify-js@3.17.4:
+  uglify-js@3.19.3:
     optional: true
 
   unbox-primitive@1.0.2:
@@ -29987,42 +28565,28 @@ snapshots:
 
   unc-path-regex@0.1.2: {}
 
-  undici-types@5.26.5: {}
-
-  unescape@1.0.1:
-    dependencies:
-      extend-shallow: 2.0.1
-
-  unicode-canonical-property-names-ecmascript@2.0.0: {}
+  unicode-canonical-property-names-ecmascript@2.0.1: {}
 
   unicode-match-property-ecmascript@2.0.0:
     dependencies:
-      unicode-canonical-property-names-ecmascript: 2.0.0
+      unicode-canonical-property-names-ecmascript: 2.0.1
       unicode-property-aliases-ecmascript: 2.1.0
 
-  unicode-match-property-value-ecmascript@2.1.0: {}
+  unicode-match-property-value-ecmascript@2.2.0: {}
 
   unicode-property-aliases-ecmascript@2.1.0: {}
 
-  unified@10.1.2:
+  unicorn-magic@0.1.0: {}
+
+  unified@11.0.5:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
       bail: 2.0.2
+      devlop: 1.1.0
       extend: 3.0.2
-      is-buffer: 2.0.5
       is-plain-obj: 4.1.0
       trough: 2.2.0
-      vfile: 5.3.7
-
-  unified@9.2.2:
-    dependencies:
-      '@types/unist': 2.0.10
-      bail: 1.0.5
-      extend: 3.0.2
-      is-buffer: 2.0.5
-      is-plain-obj: 2.1.0
-      trough: 1.0.5
-      vfile: 4.2.1
+      vfile: 6.0.3
 
   union-value@1.0.1:
     dependencies:
@@ -30047,64 +28611,49 @@ snapshots:
     dependencies:
       imurmurhash: 0.1.4
 
-  unique-string@2.0.0:
-    dependencies:
-      crypto-random-string: 2.0.0
-
   unique-string@3.0.0:
     dependencies:
       crypto-random-string: 4.0.0
 
-  unist-util-generated@2.0.1: {}
-
   unist-util-is@4.1.0: {}
 
-  unist-util-is@5.2.1:
-    dependencies:
-      '@types/unist': 2.0.10
-
-  unist-util-position-from-estree@1.1.2:
-    dependencies:
-      '@types/unist': 2.0.10
-
-  unist-util-position@4.0.4:
+  unist-util-is@6.0.0:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
-  unist-util-remove-position@4.0.2:
+  unist-util-position-from-estree@2.0.0:
     dependencies:
-      '@types/unist': 2.0.10
-      unist-util-visit: 4.1.2
+      '@types/unist': 3.0.3
 
-  unist-util-stringify-position@2.0.3:
+  unist-util-position@5.0.0:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
-  unist-util-stringify-position@3.0.3:
+  unist-util-stringify-position@4.0.0:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 3.0.3
 
   unist-util-visit-parents@3.1.1:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 4.1.0
 
-  unist-util-visit-parents@5.1.3:
+  unist-util-visit-parents@6.0.1:
     dependencies:
-      '@types/unist': 2.0.10
-      unist-util-is: 5.2.1
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
 
   unist-util-visit@2.0.3:
     dependencies:
-      '@types/unist': 2.0.10
+      '@types/unist': 2.0.11
       unist-util-is: 4.1.0
       unist-util-visit-parents: 3.1.1
 
-  unist-util-visit@4.1.2:
+  unist-util-visit@5.0.0:
     dependencies:
-      '@types/unist': 2.0.10
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
 
   universalify@0.1.2: {}
 
@@ -30112,14 +28661,10 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unpipe@1.0.0: {}
-
-  unplugin@1.10.1:
+  unplugin@1.16.0:
     dependencies:
-      acorn: 8.11.3
-      chokidar: 3.6.0
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.6.1
+      acorn: 8.14.0
+      webpack-virtual-modules: 0.6.2
 
   unset-value@1.0.0:
     dependencies:
@@ -30128,11 +28673,11 @@ snapshots:
 
   untildify@4.0.0: {}
 
-  update-browserslist-db@1.0.13(browserslist@4.23.0):
+  update-browserslist-db@1.1.1(browserslist@4.24.2):
     dependencies:
-      browserslist: 4.23.0
-      escalade: 3.1.2
-      picocolors: 1.0.0
+      browserslist: 4.24.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
 
   update-notifier@6.0.2:
     dependencies:
@@ -30147,17 +28692,17 @@ snapshots:
       is-yarn-global: 0.4.1
       latest-version: 7.0.0
       pupa: 3.1.0
-      semver: 7.6.0
+      semver: 7.6.3
       semver-diff: 4.0.0
       xdg-basedir: 5.1.0
 
   upper-case-first@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   upper-case@2.0.2:
     dependencies:
-      tslib: 2.6.2
+      tslib: 2.8.1
 
   uri-js@4.4.1:
     dependencies:
@@ -30173,7 +28718,7 @@ snapshots:
   use-callback-ref@1.3.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
       react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.2.8
 
@@ -30181,6 +28726,10 @@ snapshots:
     dependencies:
       react: 18.2.0
 
+  use-editable@2.3.3(react@18.2.0):
+    dependencies:
+      react: 18.2.0
+
   use-isomorphic-layout-effect@1.1.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -30194,27 +28743,21 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.8
 
-  use-resize-observer@9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
-    dependencies:
-      '@juggle/resize-observer': 3.4.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-
   use-sidecar@1.1.2(@types/react@18.2.8)(react@18.2.0):
     dependencies:
       detect-node-es: 1.1.0
       react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1
     optionalDependencies:
       '@types/react': 18.2.8
 
-  use-sync-external-store@1.2.0(react@18.2.0):
+  use-sync-external-store@1.2.2(react@18.2.0):
     dependencies:
       react: 18.2.0
 
   use@3.1.1: {}
 
-  usehooks-ts@2.16.0(react@18.2.0):
+  usehooks-ts@3.1.0(react@18.2.0):
     dependencies:
       lodash.debounce: 4.0.8
       react: 18.2.0
@@ -30231,24 +28774,15 @@ snapshots:
 
   utility-types@3.11.0: {}
 
-  utils-merge@1.0.1: {}
-
   uuid@8.3.2: {}
 
   uuid@9.0.1: {}
 
-  uvu@0.5.6:
-    dependencies:
-      dequal: 2.0.3
-      diff: 5.2.0
-      kleur: 4.1.5
-      sade: 1.8.1
-
   v8-compile-cache-lib@3.0.1: {}
 
   v8-compile-cache@2.4.0: {}
 
-  v8-to-istanbul@9.2.0:
+  v8-to-istanbul@9.3.0:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       '@types/istanbul-lib-coverage': 2.0.6
@@ -30261,59 +28795,33 @@ snapshots:
       spdx-correct: 3.2.0
       spdx-expression-parse: 3.0.1
 
-  validate-npm-package-name@5.0.0:
-    dependencies:
-      builtins: 5.1.0
-
-  vary@1.1.2: {}
-
-  vfile-location@3.2.0: {}
-
-  vfile-location@4.1.0:
-    dependencies:
-      '@types/unist': 2.0.10
-      vfile: 5.3.7
-
-  vfile-message@2.0.4:
-    dependencies:
-      '@types/unist': 2.0.10
-      unist-util-stringify-position: 2.0.3
+  validate-npm-package-name@5.0.1: {}
 
-  vfile-message@3.1.4:
+  vfile-location@5.0.3:
     dependencies:
-      '@types/unist': 2.0.10
-      unist-util-stringify-position: 3.0.3
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
 
-  vfile@4.2.1:
+  vfile-message@4.0.2:
     dependencies:
-      '@types/unist': 2.0.10
-      is-buffer: 2.0.5
-      unist-util-stringify-position: 2.0.3
-      vfile-message: 2.0.4
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
 
-  vfile@5.3.7:
+  vfile@6.0.3:
     dependencies:
-      '@types/unist': 2.0.10
-      is-buffer: 2.0.5
-      unist-util-stringify-position: 3.0.3
-      vfile-message: 3.1.4
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
 
-  vite@4.5.3(@types/node@20.5.1)(lightningcss@1.24.1)(terser@5.30.3):
+  vite@5.4.11(@types/node@20.5.1)(lightningcss@1.28.1)(terser@5.36.0):
     dependencies:
-      esbuild: 0.18.20
-      postcss: 8.4.38
-      rollup: 3.29.4
+      esbuild: 0.21.5
+      postcss: 8.4.49
+      rollup: 4.27.4
     optionalDependencies:
       '@types/node': 20.5.1
       fsevents: 2.3.3
-      lightningcss: 1.24.1
-      terser: 5.30.3
-
-  vlq@1.0.1: {}
-
-  vscode-oniguruma@1.7.0: {}
-
-  vscode-textmate@8.0.0: {}
+      lightningcss: 1.28.1
+      terser: 5.36.0
 
   vue-eslint-parser@2.0.3(eslint@5.16.0):
     dependencies:
@@ -30322,43 +28830,36 @@ snapshots:
       eslint-scope: 3.7.3
       eslint-visitor-keys: 1.3.0
       espree: 3.5.4
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
     transitivePeerDependencies:
       - supports-color
 
   vue-eslint-parser@7.1.1(eslint@7.32.0):
     dependencies:
-      debug: 4.3.4
+      debug: 4.3.7
       eslint: 7.32.0
       eslint-scope: 5.1.1
       eslint-visitor-keys: 1.3.0
       espree: 6.2.1
-      esquery: 1.5.0
+      esquery: 1.6.0
       lodash: 4.17.21
     transitivePeerDependencies:
       - supports-color
 
-  w3c-hr-time@1.0.2:
-    dependencies:
-      browser-process-hrtime: 1.0.0
-
   w3c-keyname@2.2.8: {}
 
-  w3c-xmlserializer@3.0.0:
+  w3c-xmlserializer@4.0.0:
     dependencies:
       xml-name-validator: 4.0.0
 
+  walk-up-path@3.0.1: {}
+
   walker@1.0.8:
     dependencies:
       makeerror: 1.0.12
 
-  watchpack@2.4.0:
-    dependencies:
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-
-  watchpack@2.4.1:
+  watchpack@2.4.2:
     dependencies:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
@@ -30369,57 +28870,57 @@ snapshots:
 
   weak-lru-cache@1.2.2: {}
 
-  web-namespaces@1.1.4: {}
-
   web-namespaces@2.0.1: {}
 
   web-streams-polyfill@3.3.3: {}
 
   web-vitals@4.2.4: {}
 
-  webidl-conversions@3.0.1: {}
-
   webidl-conversions@4.0.2: {}
 
   webidl-conversions@7.0.0: {}
 
-  webpack-bundle-analyzer@4.10.2:
+  webpack-bundle-analyzer@4.10.1:
     dependencies:
       '@discoveryjs/json-ext': 0.5.7
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
       commander: 7.2.0
       debounce: 1.2.1
       escape-string-regexp: 4.0.0
       gzip-size: 6.0.0
       html-escaper: 2.0.2
+      is-plain-object: 5.0.0
       opener: 1.5.2
-      picocolors: 1.0.0
+      picocolors: 1.1.1
       sirv: 2.0.4
-      ws: 7.5.9
+      ws: 7.5.10
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  webpack-bundle-analyzer@4.7.0:
+  webpack-bundle-analyzer@4.10.2:
     dependencies:
-      acorn: 8.11.3
-      acorn-walk: 8.3.2
-      chalk: 4.1.2
+      '@discoveryjs/json-ext': 0.5.7
+      acorn: 8.14.0
+      acorn-walk: 8.3.4
       commander: 7.2.0
+      debounce: 1.2.1
+      escape-string-regexp: 4.0.0
       gzip-size: 6.0.0
-      lodash: 4.17.21
+      html-escaper: 2.0.2
       opener: 1.5.2
-      sirv: 1.0.19
-      ws: 7.5.9
+      picocolors: 1.1.1
+      sirv: 2.0.4
+      ws: 7.5.10
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  webpack-cli@3.3.12(webpack@5.91.0):
+  webpack-cli@3.3.12(webpack@5.96.1):
     dependencies:
       chalk: 2.4.2
-      cross-spawn: 6.0.5
+      cross-spawn: 6.0.6
       enhanced-resolve: 4.5.0
       findup-sync: 3.0.0(supports-color@6.1.0)
       global-modules: 2.0.0
@@ -30428,7 +28929,7 @@ snapshots:
       loader-utils: 1.4.2
       supports-color: 6.1.0
       v8-compile-cache: 2.4.0
-      webpack: 5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12)
+      webpack: 5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12)
       yargs: 13.3.2
 
   webpack-merge@5.10.0:
@@ -30439,21 +28940,20 @@ snapshots:
 
   webpack-sources@3.2.3: {}
 
-  webpack-virtual-modules@0.6.1: {}
+  webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12):
+  webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12):
     dependencies:
       '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.5
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/wasm-edit': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-      acorn: 8.11.3
-      acorn-import-assertions: 1.9.0(acorn@8.11.3)
-      browserslist: 4.23.0
-      chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.16.0
-      es-module-lexer: 1.5.0
+      '@types/estree': 1.0.6
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.14.0
+      browserslist: 4.24.2
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -30464,29 +28964,28 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.15.18)(webpack-cli@3.3.12))
-      watchpack: 2.4.1
+      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.15.18)(webpack-cli@3.3.12))
+      watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies:
-      webpack-cli: 3.3.12(webpack@5.91.0)
+      webpack-cli: 3.3.12(webpack@5.96.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
       - uglify-js
 
-  webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0)):
+  webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1)):
     dependencies:
       '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.5
-      '@webassemblyjs/ast': 1.12.1
-      '@webassemblyjs/wasm-edit': 1.12.1
-      '@webassemblyjs/wasm-parser': 1.12.1
-      acorn: 8.11.3
-      acorn-import-assertions: 1.9.0(acorn@8.11.3)
-      browserslist: 4.23.0
-      chrome-trace-event: 1.0.3
-      enhanced-resolve: 5.16.0
-      es-module-lexer: 1.5.0
+      '@types/estree': 1.0.6
+      '@webassemblyjs/ast': 1.14.1
+      '@webassemblyjs/wasm-edit': 1.14.1
+      '@webassemblyjs/wasm-parser': 1.14.1
+      acorn: 8.14.0
+      browserslist: 4.24.2
+      chrome-trace-event: 1.0.4
+      enhanced-resolve: 5.17.1
+      es-module-lexer: 1.5.4
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -30497,11 +28996,11 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack@5.91.0(@swc/core@1.4.13(@swc/helpers@0.5.9))(esbuild@0.20.2)(webpack-cli@3.3.12(webpack@5.91.0)))
-      watchpack: 2.4.1
+      terser-webpack-plugin: 5.3.10(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack@5.96.1(@swc/core@1.9.2(@swc/helpers@0.5.15))(esbuild@0.21.5)(webpack-cli@3.3.12(webpack@5.96.1)))
+      watchpack: 2.4.2
       webpack-sources: 3.2.3
     optionalDependencies:
-      webpack-cli: 3.3.12(webpack@5.91.0)
+      webpack-cli: 3.3.12(webpack@5.96.1)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -30513,21 +29012,11 @@ snapshots:
 
   whatwg-mimetype@3.0.0: {}
 
-  whatwg-url@10.0.0:
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-
   whatwg-url@11.0.0:
     dependencies:
       tr46: 3.0.0
       webidl-conversions: 7.0.0
 
-  whatwg-url@5.0.0:
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-
   whatwg-url@7.1.0:
     dependencies:
       lodash.sortby: 4.7.0
@@ -30542,7 +29031,7 @@ snapshots:
       is-string: 1.0.7
       is-symbol: 1.0.4
 
-  which-builtin-type@1.1.3:
+  which-builtin-type@1.1.4:
     dependencies:
       function.prototype.name: 1.1.6
       has-tostringtag: 1.0.2
@@ -30566,11 +29055,6 @@ snapshots:
 
   which-module@2.0.1: {}
 
-  which-pm@2.0.0:
-    dependencies:
-      load-yaml-file: 0.2.0
-      path-exists: 4.0.0
-
   which-typed-array@1.1.15:
     dependencies:
       available-typed-arrays: 1.0.7
@@ -30653,13 +29137,9 @@ snapshots:
     dependencies:
       mkdirp: 0.5.6
 
-  ws@6.2.2:
-    dependencies:
-      async-limiter: 1.0.1
-
-  ws@7.5.9: {}
+  ws@7.5.10: {}
 
-  ws@8.16.0: {}
+  ws@8.18.0: {}
 
   xdg-basedir@5.1.0: {}
 
@@ -30675,8 +29155,6 @@ snapshots:
 
   y18n@5.0.8: {}
 
-  yallist@2.1.2: {}
-
   yallist@3.1.1: {}
 
   yallist@4.0.0: {}
@@ -30685,18 +29163,13 @@ snapshots:
 
   yaml@2.3.1: {}
 
-  yaml@2.4.1: {}
+  yaml@2.6.1: {}
 
   yargs-parser@13.1.2:
     dependencies:
       camelcase: 5.3.1
       decamelize: 1.2.0
 
-  yargs-parser@18.1.3:
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-
   yargs-parser@20.2.9: {}
 
   yargs-parser@21.1.1: {}
@@ -30714,50 +29187,28 @@ snapshots:
       y18n: 4.0.3
       yargs-parser: 13.1.2
 
-  yargs@15.4.1:
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.1
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
-      escalade: 3.1.2
+      escalade: 3.2.0
       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
 
-  yauzl@2.10.0:
-    dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
-
   yn@3.1.1: {}
 
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.0.0: {}
+  yocto-queue@1.1.1: {}
 
-  zod@3.21.4: {}
+  zod@3.23.8: {}
 
-  zod@3.22.4: {}
-
-  zustand@4.5.2(@types/react@18.2.8)(react@18.2.0):
-    dependencies:
-      use-sync-external-store: 1.2.0(react@18.2.0)
+  zustand@5.0.1(@types/react@18.2.8)(react@18.2.0)(use-sync-external-store@1.2.2(react@18.2.0)):
     optionalDependencies:
       '@types/react': 18.2.8
       react: 18.2.0
+      use-sync-external-store: 1.2.2(react@18.2.0)
 
   zwitch@2.0.4: {}
diff --git a/scripts/setup-test.ts b/scripts/setup-test.ts
index 7f8af3fedf..a1061ef86e 100644
--- a/scripts/setup-test.ts
+++ b/scripts/setup-test.ts
@@ -1,4 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import { configure } from "@testing-library/react";
 
 const {getComputedStyle} = window;
diff --git a/tsconfig.json b/tsconfig.json
index d9d59f63cf..3a55c68d08 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
+    "types": ["@testing-library/jest-dom", "node"],
     "lib": ["dom", "esnext"],
     "declaration": true,
     "sourceMap": true,