diff --git a/app/(app)/themes/blocks/revenue-chart.tsx b/app/(app)/themes/blocks/revenue-chart.tsx
index 631cdaaa..629ff4b4 100644
--- a/app/(app)/themes/blocks/revenue-chart.tsx
+++ b/app/(app)/themes/blocks/revenue-chart.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -91,7 +91,7 @@ export function RevenueChart() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Profit increased by 5.2% this year <IconTrendingChart3 />
+              Profit increased by 5.2% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January - December {new Date().getFullYear() - 1}
diff --git a/app/(app)/themes/blocks/subscription-chart.tsx b/app/(app)/themes/blocks/subscription-chart.tsx
index af6291cd..950b6514 100644
--- a/app/(app)/themes/blocks/subscription-chart.tsx
+++ b/app/(app)/themes/blocks/subscription-chart.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Label, Pie, PieChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -91,7 +91,7 @@ export function SubscriptionChart() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Growth by 8.5% this month <IconTrendingChart3 />
+          Growth by 8.5% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total subscribers for the last 9 months
diff --git a/app/(app)/themes/blocks/traffic-chart.tsx b/app/(app)/themes/blocks/traffic-chart.tsx
index bade9fa0..421c2b73 100644
--- a/app/(app)/themes/blocks/traffic-chart.tsx
+++ b/app/(app)/themes/blocks/traffic-chart.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, Rectangle, XAxis, YAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -88,7 +88,7 @@ export function TrafficChart() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Trending up by 5.2% this month <IconTrendingChart3 />
+              Trending up by 5.2% this month <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               August - October 2024
diff --git a/bun.lockb b/bun.lockb
index 49906305..746036ff 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/doc-refs.tsx b/components/doc-refs.tsx
index 04ceb007..5cc0eb60 100644
--- a/components/doc-refs.tsx
+++ b/components/doc-refs.tsx
@@ -10,7 +10,7 @@ import {
   IconBrandFramer,
   IconBrandGithub,
   IconBrandJustd,
-  IconChart2,
+  IconChartBar,
   IconCommandFill
 } from "justd-icons"
 import { Menu, MenuItem } from "react-aria-components"
@@ -32,7 +32,7 @@ export function DocRefs({ references }: { references: string[] }) {
         break
       case url.includes("recharts"):
         title = "Recharts"
-        icon = IconChart2
+        icon = IconChartBar
         break
       case url.includes("framer"):
         title = "Framer Motion"
diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
index 3bed4cfa..84293814 100644
--- a/components/docs/generated/previews.ts
+++ b/components/docs/generated/previews.ts
@@ -5,1465 +5,1465 @@
 import React from 'react';
 
 export const previews: Record<string, any> = {
-  "date-and-time/date-field/date-field-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-demo")),
+  "anatomies/avatar-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/avatar-anatomy")),
   },
-  "date-and-time/date-field/date-field-prefix-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-prefix-demo")),
+  "anatomies/breadcrumbs-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/breadcrumbs-anatomy")),
   },
-  "date-and-time/date-field/date-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-controlled-demo")),
+  "anatomies/button-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/button-anatomy")),
   },
-  "date-and-time/date-field/date-field-suffix-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-suffix-demo")),
+  "anatomies/card-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/card-anatomy")),
   },
-  "date-and-time/date-field/date-field-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-uncontrolled-demo")),
+  "anatomies/carousel-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/carousel-anatomy")),
   },
-  "date-and-time/date-field/date-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-disabled-demo")),
+  "anatomies/chart-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/chart-anatomy")),
   },
-  "date-and-time/date-field/date-field-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-readonly-demo")),
+  "anatomies/checkbox-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/checkbox-anatomy")),
   },
-  "date-and-time/date-field/date-time-field-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-time-field-demo")),
+  "anatomies/checkbox-group-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/checkbox-group-anatomy")),
   },
-  "date-and-time/date-field/date-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-validation-demo")),
+  "anatomies/choicebox-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/choicebox-anatomy")),
   },
-  "date-and-time/calendar/range-calendar-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/calendar/range-calendar-demo")),
+  "anatomies/color-area-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-area-anatomy")),
   },
-  "date-and-time/calendar/calendar-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/calendar/calendar-demo")),
+  "anatomies/color-field-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-field-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-disabled-demo")),
+  "anatomies/color-picker-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-picker-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-controlled-demo")),
+  "anatomies/color-slider-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-slider-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-time-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-time-demo")),
+  "anatomies/color-swatch-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-swatch-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-custom-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-custom-validation-demo")),
+  "anatomies/color-swatch-picker-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-swatch-picker-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-demo")),
+  "anatomies/color-wheel-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/color-wheel-anatomy")),
   },
-  "date-and-time/date-range-picker/date-range-picker-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-validation-demo")),
+  "anatomies/combo-box-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/combo-box-anatomy")),
   },
-  "date-and-time/time-field/date-field-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/date-field-demo")),
+  "anatomies/command-menu-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/command-menu-anatomy")),
   },
-  "date-and-time/time-field/time-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-disabled-demo")),
+  "anatomies/description-list-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/description-list-anatomy")),
   },
-  "date-and-time/time-field/time-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-validation-demo")),
+  "anatomies/disclosure-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/disclosure-anatomy")),
   },
-  "date-and-time/time-field/time-field-suffix-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-suffix-demo")),
+  "anatomies/disclosure-group-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/disclosure-group-anatomy")),
   },
-  "date-and-time/time-field/time-field-hc-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-hc-demo")),
+  "anatomies/drawer-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/drawer-anatomy")),
   },
-  "date-and-time/time-field/time-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-controlled-demo")),
+  "anatomies/drop-zone-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/drop-zone-anatomy")),
   },
-  "date-and-time/time-field/time-field-prefix-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-prefix-demo")),
+  "anatomies/file-trigger-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/file-trigger-anatomy")),
   },
-  "date-and-time/time-field/time-field-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-readonly-demo")),
+  "anatomies/grid-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/grid-anatomy")),
   },
-  "date-and-time/time-field/time-field-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-demo")),
+  "anatomies/grid-list-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/grid-list-anatomy")),
   },
-  "date-and-time/date-picker/date-picker-custom-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-custom-validation-demo")),
+  "anatomies/heading-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/heading-anatomy")),
   },
-  "date-and-time/date-picker/date-picker-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-demo")),
+  "anatomies/input-otp-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/input-otp-anatomy")),
   },
-  "date-and-time/date-picker/date-time-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-time-demo")),
+  "anatomies/link-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/link-anatomy")),
   },
-  "date-and-time/date-picker/date-picker-required-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-required-demo")),
+  "anatomies/list-box-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/list-box-anatomy")),
   },
-  "date-and-time/date-picker/date-picker-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-disabled-demo")),
+  "anatomies/loader-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/loader-anatomy")),
   },
-  "date-and-time/date-picker/date-picker-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-controlled-demo")),
+  "anatomies/menu-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/menu-anatomy")),
   },
-  "forms/input-otp/input-otp-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-controlled-demo")),
+  "anatomies/meter-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/meter-anatomy")),
   },
-  "forms/input-otp/input-otp-separator-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-separator-demo")),
+  "anatomies/modal-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/modal-anatomy")),
   },
-  "forms/input-otp/input-otp-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-demo")),
+  "anatomies/multiple-select-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/multiple-select-anatomy")),
   },
-  "forms/form-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/form-validation-demo")),
+  "anatomies/navbar-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/navbar-anatomy")),
   },
-  "forms/number-field/number-field-invalid-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-invalid-demo")),
+  "anatomies/note-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/note-anatomy")),
   },
-  "forms/number-field/number-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-disabled-demo")),
+  "anatomies/number-field-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/number-field-anatomy")),
   },
-  "forms/number-field/number-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-controlled-demo")),
+  "anatomies/pagination-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/pagination-anatomy")),
   },
-  "forms/number-field/number-field-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-uncontrolled-demo")),
+  "anatomies/popover-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/popover-anatomy")),
   },
-  "forms/number-field/number-field-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-demo")),
+  "anatomies/progress-bar-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/progress-bar-anatomy")),
   },
-  "forms/checkbox/checkbox-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-demo")),
+  "anatomies/progress-circle-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/progress-circle-anatomy")),
   },
-  "forms/checkbox/checkbox-group-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-demo")),
+  "anatomies/radio-group-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/radio-group-anatomy")),
   },
-  "forms/checkbox/checkbox-group-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-validation-demo")),
+  "anatomies/search-field-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/search-field-anatomy")),
   },
-  "forms/checkbox/checkbox-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-uncontrolled-demo")),
+  "anatomies/select-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/select-anatomy")),
   },
-  "forms/checkbox/checkbox-indeterminate-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-indeterminate-demo")),
+  "anatomies/separator-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/separator-anatomy")),
   },
-  "forms/checkbox/checkbox-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-description-demo")),
+  "anatomies/sheet-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/sheet-anatomy")),
   },
-  "forms/checkbox/checkbox-group-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-description-demo")),
+  "anatomies/sidebar-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/sidebar-anatomy")),
   },
-  "forms/checkbox/checkbox-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-controlled-demo")),
+  "anatomies/skeleton-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/skeleton-anatomy")),
   },
-  "forms/checkbox/checkbox-invalid-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-invalid-demo")),
+  "anatomies/table-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/table-anatomy")),
   },
-  "forms/checkbox/checkbox-group-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-uncontrolled-demo")),
+  "anatomies/tabs-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/tabs-anatomy")),
   },
-  "forms/checkbox/checkbox-group-indeterminate-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-indeterminate-demo")),
+  "anatomies/tag-group-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/tag-group-anatomy")),
   },
-  "forms/checkbox/checkbox-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-disabled-demo")),
+  "anatomies/text-field-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/text-field-anatomy")),
   },
-  "forms/checkbox/checkbox-group-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-disabled-demo")),
+  "anatomies/textarea-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/textarea-anatomy")),
   },
-  "forms/checkbox/checkbox-group-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-controlled-demo")),
+  "anatomies/toggle-group-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/toggle-group-anatomy")),
   },
-  "forms/textarea/textarea-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-demo")),
+  "anatomies/toolbar-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/toolbar-anatomy")),
   },
-  "forms/textarea/textarea-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-controlled-demo")),
+  "anatomies/tooltip-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/tooltip-anatomy")),
   },
-  "forms/textarea/textarea-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-uncontrolled-demo")),
+  "anatomies/tree-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/tree-anatomy")),
   },
-  "forms/textarea/textarea-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-readonly-demo")),
+  "anatomies/visually-hidden-anatomy": {
+    component: React.lazy(() => import("@/components/docs/anatomies/visually-hidden-anatomy")),
   },
-  "forms/textarea/textarea-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-description-demo")),
+  "buttons/button/button-appearance-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-appearance-demo")),
   },
-  "forms/textarea/textarea-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-disabled-demo")),
+  "buttons/button/button-basic-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-basic-demo")),
   },
-  "forms/textarea/textarea-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-validation-demo")),
+  "buttons/button/button-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-disabled-demo")),
   },
-  "forms/form-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/form-demo")),
+  "buttons/button/button-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-icon-demo")),
   },
-  "forms/text-field/text-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-validation-demo")),
+  "buttons/button/button-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-intent-demo")),
   },
-  "forms/text-field/text-field-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-readonly-demo")),
+  "buttons/button/button-link-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-link-demo")),
   },
-  "forms/text-field/text-field-prefix-suffix-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-prefix-suffix-demo")),
+  "buttons/button/button-loader-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-loader-demo")),
   },
-  "forms/text-field/text-field-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-uncontrolled-demo")),
+  "buttons/button/button-only-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-only-icon-demo")),
   },
-  "forms/text-field/text-field-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-description-demo")),
+  "buttons/button/button-pending-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-pending-demo")),
   },
-  "forms/text-field/text-field-revealable-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-revealable-demo")),
+  "buttons/button/button-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-shape-demo")),
   },
-  "forms/text-field/text-field-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-demo")),
+  "buttons/button/button-size-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/button/button-size-demo")),
   },
-  "forms/text-field/text-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-disabled-demo")),
+  "buttons/file-trigger/file-trigger-avatar-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-avatar-demo")),
   },
-  "forms/text-field/text-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-controlled-demo")),
+  "buttons/file-trigger/file-trigger-camera-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-camera-demo")),
   },
-  "forms/text-field/text-field-suffix-button-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-suffix-button-demo")),
+  "buttons/file-trigger/file-trigger-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-controlled-demo")),
   },
-  "forms/text-field/text-field-pending-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-pending-demo")),
+  "buttons/file-trigger/file-trigger-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-demo")),
   },
-  "forms/radio-group/radio-group-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-demo")),
+  "buttons/file-trigger/file-trigger-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-disabled-demo")),
   },
-  "forms/radio-group/radio-group-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-controlled-demo")),
+  "buttons/file-trigger/file-trigger-folder-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-folder-demo")),
   },
-  "forms/radio-group/radio-group-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-uncontrolled-demo")),
+  "buttons/file-trigger/file-trigger-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-multiple-demo")),
   },
-  "forms/radio-group/radio-group-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-orientation-demo")),
+  "buttons/toggle/toggle-appearance-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-appearance-demo")),
   },
-  "forms/radio-group/radio-group-invalid-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-invalid-demo")),
+  "buttons/toggle/toggle-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-controlled-demo")),
   },
-  "forms/radio-group/radio-group-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-disabled-demo")),
+  "buttons/toggle/toggle-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-demo")),
   },
-  "forms/radio-group/radio-group-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-description-demo")),
+  "buttons/toggle/toggle-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-disabled-demo")),
   },
-  "forms/radio-group/radio-group-children-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-children-description-demo")),
+  "buttons/toggle/toggle-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-shape-demo")),
   },
-  "forms/search-field/search-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-controlled-demo")),
+  "buttons/toggle/toggle-size-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-size-demo")),
   },
-  "forms/search-field/search-field-pending-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-pending-demo")),
+  "buttons/toggle-group/toggle-group-appearance-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-appearance-demo")),
   },
-  "forms/search-field/search-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-disabled-demo")),
+  "buttons/toggle-group/toggle-group-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-controlled-demo")),
   },
-  "forms/search-field/search-field-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-demo")),
+  "buttons/toggle-group/toggle-group-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-demo")),
   },
-  "forms/search-field/search-field-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-readonly-demo")),
+  "buttons/toggle-group/toggle-group-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-disabled-demo")),
   },
-  "forms/search-field/search-field-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-uncontrolled-demo")),
+  "buttons/toggle-group/toggle-group-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-orientation-demo")),
   },
-  "forms/search-field/search-field-with-label-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-with-label-demo")),
+  "buttons/toggle-group/toggle-group-selection-mode-demo": {
+    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-selection-mode-demo")),
   },
-  "forms/search-field/search-field-description-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-description-demo")),
+  "collections/choicebox/choicebox-columns-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-columns-demo")),
   },
-  "forms/search-field/search-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-validation-demo")),
+  "collections/choicebox/choicebox-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-controlled-demo")),
   },
-  "forms/tag-field/tag-field-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-intent-demo")),
+  "collections/choicebox/choicebox-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-demo")),
   },
-  "forms/tag-field/tag-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-disabled-demo")),
+  "collections/choicebox/choicebox-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-disabled-demo")),
   },
-  "forms/tag-field/tag-field-max-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-max-demo")),
+  "collections/choicebox/choicebox-single-selection-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-single-selection-demo")),
   },
-  "forms/tag-field/tag-field-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-shape-demo")),
+  "collections/grid-list/grid-list-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-controlled-demo")),
   },
-  "forms/tag-field/tag-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-controlled-demo")),
+  "collections/grid-list/grid-list-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-demo")),
   },
-  "forms/tag-field/tag-field-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-demo")),
+  "collections/grid-list/grid-list-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-disabled-demo")),
   },
-  "forms/tag-field/tag-field-appearance-demo": {
-    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-appearance-demo")),
+  "collections/grid-list/grid-list-drag-between-item-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-drag-between-item-demo")),
+  },
+  "collections/grid-list/grid-list-drag-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-drag-demo")),
+  },
+  "collections/grid-list/grid-list-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-multiple-demo")),
   },
-  "buttons/file-trigger/file-trigger-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-disabled-demo")),
+  "collections/grid-list/grid-list-render-empty-state-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-render-empty-state-demo")),
   },
-  "buttons/file-trigger/file-trigger-folder-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-folder-demo")),
+  "collections/list-box/list-box-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-controlled-demo")),
   },
-  "buttons/file-trigger/file-trigger-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-demo")),
+  "collections/list-box/list-box-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-demo")),
   },
-  "buttons/file-trigger/file-trigger-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-controlled-demo")),
+  "collections/list-box/list-box-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-disabled-demo")),
   },
-  "buttons/file-trigger/file-trigger-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-multiple-demo")),
+  "collections/list-box/list-box-item-details-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-item-details-demo")),
   },
-  "buttons/file-trigger/file-trigger-camera-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-camera-demo")),
+  "collections/list-box/list-box-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-multiple-demo")),
   },
-  "buttons/file-trigger/file-trigger-avatar-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/file-trigger/file-trigger-avatar-demo")),
+  "collections/list-box/list-box-rearrange-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-rearrange-demo")),
   },
-  "buttons/toggle-group/toggle-group-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-controlled-demo")),
+  "collections/list-box/list-box-section-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-section-demo")),
   },
-  "buttons/toggle-group/toggle-group-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-demo")),
+  "collections/menu/menu-basic-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-basic-demo")),
   },
-  "buttons/toggle-group/toggle-group-selection-mode-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-selection-mode-demo")),
+  "collections/menu/menu-collection-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-collection-demo")),
   },
-  "buttons/toggle-group/toggle-group-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-disabled-demo")),
+  "collections/menu/menu-danger-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-danger-demo")),
   },
-  "buttons/toggle-group/toggle-group-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-orientation-demo")),
+  "collections/menu/menu-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-disabled-demo")),
   },
-  "buttons/toggle-group/toggle-group-appearance-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle-group/toggle-group-appearance-demo")),
+  "collections/menu/menu-item-details-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-item-details-demo")),
   },
-  "buttons/toggle/toggle-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-disabled-demo")),
+  "collections/menu/menu-respect-screen-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-respect-screen-demo")),
   },
-  "buttons/toggle/toggle-appearance-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-appearance-demo")),
+  "collections/menu/menu-section-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-demo")),
   },
-  "buttons/toggle/toggle-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-shape-demo")),
+  "collections/menu/menu-section-level-selection": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-level-selection")),
   },
-  "buttons/toggle/toggle-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-demo")),
+  "collections/menu/menu-sub-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-sub-demo")),
   },
-  "buttons/toggle/toggle-size-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-size-demo")),
+  "collections/menu/menu-with-arrow-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-with-arrow-demo")),
   },
-  "buttons/toggle/toggle-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/toggle/toggle-controlled-demo")),
+  "collections/menu/menu-with-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/menu-with-icon-demo")),
   },
-  "buttons/button/button-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-intent-demo")),
+  "collections/menu/multiple-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/multiple-menu-demo")),
   },
-  "buttons/button/button-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-icon-demo")),
+  "collections/menu/single-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/menu/single-menu-demo")),
   },
-  "buttons/button/button-loader-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-loader-demo")),
+  "collections/table/table-bulk-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/table/table-bulk-demo")),
   },
-  "buttons/button/button-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-disabled-demo")),
+  "collections/table/table-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/table/table-demo")),
   },
-  "buttons/button/button-only-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-only-icon-demo")),
+  "collections/table/table-drag-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/table/table-drag-demo")),
   },
-  "buttons/button/button-size-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-size-demo")),
+  "collections/table/table-resize-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/table/table-resize-demo")),
   },
-  "buttons/button/button-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-shape-demo")),
+  "collections/table/table-sorting-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/table/table-sorting-demo")),
   },
-  "buttons/button/button-basic-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-basic-demo")),
+  "collections/tag-group/tag-group-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-controlled-demo")),
   },
-  "buttons/button/button-pending-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-pending-demo")),
+  "collections/tag-group/tag-group-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-demo")),
   },
-  "buttons/button/button-appearance-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-appearance-demo")),
+  "collections/tag-group/tag-group-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-disabled-demo")),
   },
-  "buttons/button/button-link-demo": {
-    component: React.lazy(() => import("@/components/docs/buttons/button/button-link-demo")),
+  "collections/tag-group/tag-group-href-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-href-demo")),
   },
-  "overlays/drawer/drawer-nested-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-nested-demo")),
+  "collections/tag-group/tag-group-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-intent-demo")),
   },
-  "overlays/drawer/drawer-basic-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-basic-demo")),
+  "collections/tag-group/tag-group-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-shape-demo")),
   },
-  "overlays/drawer/drawer-sticky-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-sticky-demo")),
+  "collections/tag-group/tag-group-with-remove-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-with-remove-demo")),
   },
-  "overlays/drawer/drawer-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-controlled-demo")),
+  "collections/tree/tree-demo": {
+    component: React.lazy(() => import("@/components/docs/collections/tree/tree-demo")),
   },
-  "overlays/drawer/drawer-without-notch-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-without-notch-demo")),
+  "colors/color-area/color-area-channel-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-channel-demo")),
   },
-  "overlays/tooltip/tooltip-delay-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-delay-demo")),
+  "colors/color-area/color-area-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-controlled-demo")),
   },
-  "overlays/tooltip/tooltip-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-demo")),
+  "colors/color-area/color-area-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-demo")),
   },
-  "overlays/tooltip/tooltip-placement-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-placement-demo")),
+  "colors/color-area/color-area-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-disabled-demo")),
   },
-  "overlays/tooltip/tooltip-without-arrow-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-without-arrow-demo")),
+  "colors/color-area/color-area-space-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-space-demo")),
   },
-  "overlays/tooltip/tooltip-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-intent-demo")),
+  "colors/color-area/color-area-with-slider-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-with-slider-demo")),
   },
-  "overlays/popover/popover-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-controlled-demo")),
+  "colors/color-field/color-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-controlled-demo")),
   },
-  "overlays/popover/popover-placement-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-placement-demo")),
+  "colors/color-field/color-field-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-demo")),
   },
-  "overlays/popover/popover-arrow-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-arrow-demo")),
+  "colors/color-field/color-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-disabled-demo")),
   },
-  "overlays/popover/popover-custom-close": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-custom-close")),
+  "colors/color-field/color-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-validation-demo")),
   },
-  "overlays/popover/popover-trigger-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-trigger-demo")),
+  "colors/color-field/color-field-with-prefix-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-prefix-demo")),
   },
-  "overlays/popover/popover-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-demo")),
+  "colors/color-field/color-field-with-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-suffix-demo")),
   },
-  "overlays/modal/modal-triggered-by-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-triggered-by-menu-demo")),
+  "colors/color-picker/color-picker-combination-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-combination-demo")),
   },
-  "overlays/modal/modal-custom-classnames-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-custom-classnames-demo")),
+  "colors/color-picker/color-picker-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-controlled-demo")),
   },
-  "overlays/modal/modal-nested-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-nested-demo")),
+  "colors/color-picker/color-picker-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-demo")),
   },
-  "overlays/modal/modal-size-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-size-demo")),
+  "colors/color-picker/color-picker-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-disabled-demo")),
   },
-  "overlays/modal/modal-sticky-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-sticky-demo")),
+  "colors/color-picker/color-picker-enable-selection-format-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-enable-selection-format-demo")),
   },
-  "overlays/modal/alert-dialog-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/alert-dialog-demo")),
+  "colors/color-picker/color-picker-enable-swatch-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-enable-swatch-demo")),
   },
-  "overlays/modal/modal-blur-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-blur-demo")),
+  "colors/color-picker/color-picker-with-description-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-with-description-demo")),
   },
-  "overlays/modal/modal-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-controlled-demo")),
+  "colors/color-picker/color-picker-with-label-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-with-label-demo")),
   },
-  "overlays/modal/modal-custom-style-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-custom-style-demo")),
+  "colors/color-slider/color-slider-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-controlled-demo")),
   },
-  "overlays/modal/modal-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-demo")),
+  "colors/color-slider/color-slider-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-demo")),
   },
-  "overlays/sheet/sheet-custom-style-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-custom-style-demo")),
+  "colors/color-slider/color-slider-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-disabled-demo")),
   },
-  "overlays/sheet/sheet-custom-close-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-custom-close-demo")),
+  "colors/color-slider/color-slider-vertical-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-vertical-demo")),
   },
-  "overlays/sheet/sheet-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-menu-demo")),
+  "colors/color-slider/color-slider-with-label-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-with-label-demo")),
   },
-  "overlays/sheet/sheet-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-controlled-demo")),
+  "colors/color-swatch/color-swatch-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-controlled-demo")),
   },
-  "overlays/sheet/sheet-position-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-position-demo")),
+  "colors/color-swatch/color-swatch-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-demo")),
   },
-  "overlays/sheet/sheet-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-demo")),
+  "colors/color-swatch/color-swatch-picker-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-picker-demo")),
   },
-  "overlays/sheet/sheet-stack-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-stack-demo")),
+  "colors/color-swatch/color-swatch-picker-item-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-picker-item-disabled-demo")),
   },
-  "overlays/sheet/sheet-sticky-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-sticky-demo")),
+  "colors/color-wheel/color-wheel-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-controlled-demo")),
   },
-  "overlays/sheet/sheet-classnames-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-classnames-demo")),
+  "colors/color-wheel/color-wheel-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-demo")),
   },
-  "navigation/disclosure/disclosure-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-demo")),
+  "colors/color-wheel/color-wheel-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-disabled-demo")),
   },
-  "navigation/disclosure/disclosure-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-controlled-demo")),
+  "colors/controlled-values": {
+    component: React.lazy(() => import("@/components/docs/colors/controlled-values")),
   },
-  "navigation/disclosure/disclosure-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-disabled-demo")),
+  "controls/command-menu/command-menu-blur-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-blur-demo")),
   },
-  "navigation/tabs/tabs-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-demo")),
+  "controls/command-menu/command-menu-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-controlled-demo")),
   },
-  "navigation/tabs/tabs-icons-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-icons-demo")),
+  "controls/command-menu/command-menu-danger-item-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-danger-item-demo")),
   },
-  "navigation/tabs/tabs-link-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-link-demo")),
+  "controls/command-menu/command-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-demo")),
   },
-  "navigation/tabs/tabs-collections-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-collections-demo")),
+  "controls/command-menu/command-menu-description-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-description-demo")),
   },
-  "navigation/tabs/tabs-responsive-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-responsive-demo")),
+  "controls/command-menu/command-menu-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-disabled-demo")),
   },
-  "navigation/tabs/tabs-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-orientation-demo")),
+  "controls/command-menu/command-menu-keyboard-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-keyboard-demo")),
   },
-  "navigation/tabs/tabs-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-disabled-demo")),
+  "controls/command-menu/command-menu-section-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-section-demo")),
   },
-  "navigation/pagination/pagination-dynamic-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/pagination/pagination-dynamic-demo")),
+  "controls/command-menu/command-menu-separator-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-separator-demo")),
   },
-  "navigation/pagination/pagination-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/pagination/pagination-demo")),
+  "controls/command-menu/command-menu-trigger-by-keyboard-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-trigger-by-keyboard-demo")),
   },
-  "navigation/pagination/simple-pagination-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/pagination/simple-pagination-demo")),
+  "controls/context-menu/context-menu-danger-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-danger-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-hide-indicator-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-hide-indicator-demo")),
+  "controls/context-menu/context-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-disabled-demo")),
+  "controls/context-menu/context-menu-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-disabled-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-border-hidden-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-border-hidden-demo")),
+  "controls/context-menu/context-menu-item-details-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-item-details-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-demo")),
+  "controls/context-menu/context-menu-separator-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-separator-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-hide-everything-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-hide-everything-demo")),
+  "controls/context-menu/context-menu-with-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-with-icon-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-allow-multiple-expand-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-allow-multiple-expand-demo")),
+  "controls/slider/slider-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-controlled-demo")),
   },
-  "navigation/disclosure-group/disclosure-group-default-expand-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-default-expand-demo")),
+  "controls/slider/slider-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-demo")),
   },
-  "navigation/link/link-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/link/link-intent-demo")),
+  "controls/slider/slider-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-disabled-demo")),
   },
-  "navigation/link/link-unstyled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/link/link-unstyled-demo")),
+  "controls/slider/slider-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-orientation-demo")),
   },
-  "navigation/link/link-button-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/link/link-button-demo")),
+  "controls/slider/slider-prefix-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-prefix-suffix-demo")),
   },
-  "navigation/link/link-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/link/link-demo")),
+  "controls/slider/slider-range-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-range-demo")),
   },
-  "navigation/link/link-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/link/link-disabled-demo")),
+  "controls/slider/slider-step-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/slider/slider-step-demo")),
   },
-  "navigation/breadcrumbs/breadcrumbs-collections-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-collections-demo")),
+  "controls/switch/switch-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/switch/switch-controlled-demo")),
   },
-  "navigation/breadcrumbs/breadcrumbs-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-menu-demo")),
+  "controls/switch/switch-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/switch/switch-demo")),
   },
-  "navigation/breadcrumbs/breadcrumbs-current-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-current-demo")),
+  "controls/switch/switch-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/switch/switch-disabled-demo")),
   },
-  "navigation/breadcrumbs/breadcrumbs-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-demo")),
+  "controls/switch/switch-variant-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/switch/switch-variant-demo")),
   },
-  "navigation/breadcrumbs/breadcrumbs-separator-demo": {
-    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-separator-demo")),
+  "controls/toolbar/toolbar-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-demo")),
   },
-  "anatomies/pagination-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/pagination-anatomy")),
+  "controls/toolbar/toolbar-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-disabled-demo")),
   },
-  "anatomies/table-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/table-anatomy")),
+  "controls/toolbar/toolbar-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-orientation-demo")),
   },
-  "anatomies/radio-group-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/radio-group-anatomy")),
+  "date-and-time/calendar/calendar-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/calendar/calendar-demo")),
   },
-  "anatomies/list-box-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/list-box-anatomy")),
+  "date-and-time/calendar/range-calendar-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/calendar/range-calendar-demo")),
   },
-  "anatomies/file-trigger-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/file-trigger-anatomy")),
+  "date-and-time/date-field/date-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-controlled-demo")),
   },
-  "anatomies/chart-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/chart-anatomy")),
+  "date-and-time/date-field/date-field-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-demo")),
   },
-  "anatomies/progress-circle-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/progress-circle-anatomy")),
+  "date-and-time/date-field/date-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-disabled-demo")),
   },
-  "anatomies/number-field-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/number-field-anatomy")),
+  "date-and-time/date-field/date-field-prefix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-prefix-demo")),
   },
-  "anatomies/color-field-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-field-anatomy")),
+  "date-and-time/date-field/date-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-readonly-demo")),
   },
-  "anatomies/sidebar-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/sidebar-anatomy")),
+  "date-and-time/date-field/date-field-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-suffix-demo")),
   },
-  "anatomies/color-swatch-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-swatch-anatomy")),
+  "date-and-time/date-field/date-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-uncontrolled-demo")),
   },
-  "anatomies/tooltip-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/tooltip-anatomy")),
+  "date-and-time/date-field/date-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-field-validation-demo")),
   },
-  "anatomies/breadcrumbs-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/breadcrumbs-anatomy")),
+  "date-and-time/date-field/date-time-field-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-field/date-time-field-demo")),
   },
-  "anatomies/description-list-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/description-list-anatomy")),
+  "date-and-time/date-picker/date-picker-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-controlled-demo")),
   },
-  "anatomies/modal-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/modal-anatomy")),
+  "date-and-time/date-picker/date-picker-custom-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-custom-validation-demo")),
   },
-  "anatomies/color-area-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-area-anatomy")),
+  "date-and-time/date-picker/date-picker-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-demo")),
   },
-  "anatomies/carousel-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/carousel-anatomy")),
+  "date-and-time/date-picker/date-picker-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-disabled-demo")),
   },
-  "anatomies/color-swatch-picker-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-swatch-picker-anatomy")),
+  "date-and-time/date-picker/date-picker-required-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-picker-required-demo")),
   },
-  "anatomies/note-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/note-anatomy")),
+  "date-and-time/date-picker/date-time-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-picker/date-time-demo")),
   },
-  "anatomies/drop-zone-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/drop-zone-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-controlled-demo")),
   },
-  "anatomies/tag-group-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/tag-group-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-custom-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-custom-validation-demo")),
   },
-  "anatomies/toolbar-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/toolbar-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-demo")),
   },
-  "anatomies/toggle-group-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/toggle-group-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-disabled-demo")),
   },
-  "anatomies/heading-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/heading-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-time-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-time-demo")),
   },
-  "anatomies/disclosure-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/disclosure-anatomy")),
+  "date-and-time/date-range-picker/date-range-picker-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/date-range-picker/date-range-picker-validation-demo")),
   },
-  "anatomies/tabs-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/tabs-anatomy")),
+  "date-and-time/time-field/date-field-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/date-field-demo")),
   },
-  "anatomies/grid-list-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/grid-list-anatomy")),
+  "date-and-time/time-field/time-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-controlled-demo")),
   },
-  "anatomies/sheet-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/sheet-anatomy")),
+  "date-and-time/time-field/time-field-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-demo")),
   },
-  "anatomies/skeleton-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/skeleton-anatomy")),
+  "date-and-time/time-field/time-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-disabled-demo")),
   },
-  "anatomies/color-picker-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-picker-anatomy")),
+  "date-and-time/time-field/time-field-hc-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-hc-demo")),
   },
-  "anatomies/drawer-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/drawer-anatomy")),
+  "date-and-time/time-field/time-field-prefix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-prefix-demo")),
   },
-  "anatomies/grid-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/grid-anatomy")),
+  "date-and-time/time-field/time-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-readonly-demo")),
   },
-  "anatomies/checkbox-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/checkbox-anatomy")),
+  "date-and-time/time-field/time-field-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-suffix-demo")),
   },
-  "anatomies/tree-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/tree-anatomy")),
+  "date-and-time/time-field/time-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/date-and-time/time-field/time-field-validation-demo")),
   },
-  "anatomies/disclosure-group-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/disclosure-group-anatomy")),
+  "drag-and-drop/drop-zone-and-file-trigger-demo": {
+    component: React.lazy(() => import("@/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo")),
   },
-  "anatomies/avatar-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/avatar-anatomy")),
+  "drag-and-drop/drop-zone-demo": {
+    component: React.lazy(() => import("@/components/docs/drag-and-drop/drop-zone-demo")),
   },
-  "anatomies/choicebox-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/choicebox-anatomy")),
+  "forms/checkbox/checkbox-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-controlled-demo")),
   },
-  "anatomies/loader-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/loader-anatomy")),
+  "forms/checkbox/checkbox-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-demo")),
   },
-  "anatomies/visually-hidden-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/visually-hidden-anatomy")),
+  "forms/checkbox/checkbox-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-description-demo")),
   },
-  "anatomies/color-wheel-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-wheel-anatomy")),
+  "forms/checkbox/checkbox-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-disabled-demo")),
   },
-  "anatomies/search-field-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/search-field-anatomy")),
+  "forms/checkbox/checkbox-group-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-controlled-demo")),
   },
-  "anatomies/checkbox-group-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/checkbox-group-anatomy")),
+  "forms/checkbox/checkbox-group-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-demo")),
   },
-  "anatomies/textarea-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/textarea-anatomy")),
+  "forms/checkbox/checkbox-group-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-description-demo")),
   },
-  "anatomies/color-slider-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/color-slider-anatomy")),
+  "forms/checkbox/checkbox-group-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-disabled-demo")),
   },
-  "anatomies/select-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/select-anatomy")),
+  "forms/checkbox/checkbox-group-indeterminate-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-indeterminate-demo")),
   },
-  "anatomies/input-otp-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/input-otp-anatomy")),
+  "forms/checkbox/checkbox-group-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-uncontrolled-demo")),
   },
-  "anatomies/card-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/card-anatomy")),
+  "forms/checkbox/checkbox-group-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-group-validation-demo")),
   },
-  "anatomies/multiple-select-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/multiple-select-anatomy")),
+  "forms/checkbox/checkbox-indeterminate-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-indeterminate-demo")),
   },
-  "anatomies/menu-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/menu-anatomy")),
+  "forms/checkbox/checkbox-invalid-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-invalid-demo")),
   },
-  "anatomies/command-menu-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/command-menu-anatomy")),
+  "forms/checkbox/checkbox-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/checkbox/checkbox-uncontrolled-demo")),
   },
-  "anatomies/meter-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/meter-anatomy")),
+  "forms/form-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/form-demo")),
   },
-  "anatomies/combo-box-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/combo-box-anatomy")),
+  "forms/form-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/form-validation-demo")),
   },
-  "anatomies/navbar-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/navbar-anatomy")),
+  "forms/input-otp/input-otp-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-controlled-demo")),
   },
-  "anatomies/text-field-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/text-field-anatomy")),
+  "forms/input-otp/input-otp-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-demo")),
   },
-  "anatomies/button-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/button-anatomy")),
+  "forms/input-otp/input-otp-separator-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/input-otp/input-otp-separator-demo")),
   },
-  "anatomies/progress-bar-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/progress-bar-anatomy")),
+  "forms/number-field/number-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-controlled-demo")),
   },
-  "anatomies/link-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/link-anatomy")),
+  "forms/number-field/number-field-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-demo")),
   },
-  "anatomies/separator-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/separator-anatomy")),
+  "forms/number-field/number-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-disabled-demo")),
   },
-  "anatomies/popover-anatomy": {
-    component: React.lazy(() => import("@/components/docs/anatomies/popover-anatomy")),
+  "forms/number-field/number-field-invalid-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-invalid-demo")),
   },
-  "controls/toolbar/toolbar-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-disabled-demo")),
+  "forms/number-field/number-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/number-field/number-field-uncontrolled-demo")),
   },
-  "controls/toolbar/toolbar-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-demo")),
+  "forms/radio-group/radio-group-children-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-children-description-demo")),
   },
-  "controls/toolbar/toolbar-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/toolbar/toolbar-orientation-demo")),
+  "forms/radio-group/radio-group-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-controlled-demo")),
   },
-  "controls/slider/slider-range-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-range-demo")),
+  "forms/radio-group/radio-group-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-demo")),
   },
-  "controls/slider/slider-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-orientation-demo")),
+  "forms/radio-group/radio-group-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-description-demo")),
   },
-  "controls/slider/slider-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-controlled-demo")),
+  "forms/radio-group/radio-group-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-disabled-demo")),
   },
-  "controls/slider/slider-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-demo")),
+  "forms/radio-group/radio-group-invalid-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-invalid-demo")),
   },
-  "controls/slider/slider-prefix-suffix-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-prefix-suffix-demo")),
+  "forms/radio-group/radio-group-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-orientation-demo")),
   },
-  "controls/slider/slider-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-disabled-demo")),
+  "forms/radio-group/radio-group-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/radio-group/radio-group-uncontrolled-demo")),
   },
-  "controls/slider/slider-step-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/slider/slider-step-demo")),
+  "forms/search-field/search-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-controlled-demo")),
   },
-  "controls/context-menu/context-menu-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-disabled-demo")),
+  "forms/search-field/search-field-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-demo")),
   },
-  "controls/context-menu/context-menu-separator-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-separator-demo")),
+  "forms/search-field/search-field-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-description-demo")),
   },
-  "controls/context-menu/context-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-demo")),
+  "forms/search-field/search-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-disabled-demo")),
   },
-  "controls/context-menu/context-menu-danger-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-danger-demo")),
+  "forms/search-field/search-field-pending-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-pending-demo")),
   },
-  "controls/context-menu/context-menu-item-details-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-item-details-demo")),
+  "forms/search-field/search-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-readonly-demo")),
   },
-  "controls/context-menu/context-menu-with-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/context-menu/context-menu-with-icon-demo")),
+  "forms/search-field/search-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-uncontrolled-demo")),
   },
-  "controls/command-menu/command-menu-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-disabled-demo")),
+  "forms/search-field/search-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-validation-demo")),
   },
-  "controls/command-menu/command-menu-section-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-section-demo")),
+  "forms/search-field/search-field-with-label-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/search-field/search-field-with-label-demo")),
   },
-  "controls/command-menu/command-menu-trigger-by-keyboard-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-trigger-by-keyboard-demo")),
+  "forms/tag-field/tag-field-appearance-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-appearance-demo")),
   },
-  "controls/command-menu/command-menu-blur-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-blur-demo")),
+  "forms/tag-field/tag-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-controlled-demo")),
   },
-  "controls/command-menu/command-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-demo")),
+  "forms/tag-field/tag-field-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-demo")),
   },
-  "controls/command-menu/command-menu-separator-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-separator-demo")),
+  "forms/tag-field/tag-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-disabled-demo")),
   },
-  "controls/command-menu/command-menu-keyboard-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-keyboard-demo")),
+  "forms/tag-field/tag-field-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-intent-demo")),
   },
-  "controls/command-menu/command-menu-description-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-description-demo")),
+  "forms/tag-field/tag-field-max-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-max-demo")),
   },
-  "controls/command-menu/command-menu-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-controlled-demo")),
+  "forms/tag-field/tag-field-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/tag-field/tag-field-shape-demo")),
   },
-  "controls/command-menu/command-menu-danger-item-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-danger-item-demo")),
+  "forms/text-field/text-field-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-controlled-demo")),
   },
-  "controls/switch/switch-variant-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/switch/switch-variant-demo")),
+  "forms/text-field/text-field-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-demo")),
   },
-  "controls/switch/switch-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/switch/switch-demo")),
+  "forms/text-field/text-field-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-description-demo")),
   },
-  "controls/switch/switch-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/switch/switch-controlled-demo")),
+  "forms/text-field/text-field-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-disabled-demo")),
   },
-  "controls/switch/switch-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/controls/switch/switch-disabled-demo")),
+  "forms/text-field/text-field-pending-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-pending-demo")),
   },
-  "drag-and-drop/drop-zone-and-file-trigger-demo": {
-    component: React.lazy(() => import("@/components/docs/drag-and-drop/drop-zone-and-file-trigger-demo")),
+  "forms/text-field/text-field-prefix-suffix-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-prefix-suffix-demo")),
   },
-  "drag-and-drop/drop-zone-demo": {
-    component: React.lazy(() => import("@/components/docs/drag-and-drop/drop-zone-demo")),
+  "forms/text-field/text-field-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-readonly-demo")),
   },
-  "layouts/navbar/navbar-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-icon-demo")),
+  "forms/text-field/text-field-revealable-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-revealable-demo")),
   },
-  "layouts/navbar/navbar-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-disabled-demo")),
+  "forms/text-field/text-field-suffix-button-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-suffix-button-demo")),
   },
-  "layouts/navbar/navbar-current-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-current-demo")),
+  "forms/text-field/text-field-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-uncontrolled-demo")),
   },
-  "layouts/navbar/navbar-floating-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-floating-demo")),
+  "forms/text-field/text-field-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/text-field/text-field-validation-demo")),
   },
-  "layouts/navbar/navbar-logo-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-logo-demo")),
+  "forms/textarea/textarea-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-controlled-demo")),
   },
-  "layouts/navbar/navbar-creating-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-creating-demo")),
+  "forms/textarea/textarea-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-demo")),
   },
-  "layouts/navbar/navbar-basic-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-basic-demo")),
+  "forms/textarea/textarea-description-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-description-demo")),
   },
-  "layouts/navbar/navbar-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-intent-demo")),
+  "forms/textarea/textarea-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-disabled-demo")),
   },
-  "colors/controlled-values": {
-    component: React.lazy(() => import("@/components/docs/colors/controlled-values")),
+  "forms/textarea/textarea-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-readonly-demo")),
   },
-  "colors/color-slider/color-slider-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-disabled-demo")),
+  "forms/textarea/textarea-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-uncontrolled-demo")),
   },
-  "colors/color-slider/color-slider-vertical-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-vertical-demo")),
+  "forms/textarea/textarea-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/forms/textarea/textarea-validation-demo")),
   },
-  "colors/color-slider/color-slider-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-demo")),
+  "layouts/navbar/navbar-basic-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-basic-demo")),
   },
-  "colors/color-slider/color-slider-with-label-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-with-label-demo")),
+  "layouts/navbar/navbar-creating-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-creating-demo")),
   },
-  "colors/color-slider/color-slider-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-slider/color-slider-controlled-demo")),
+  "layouts/navbar/navbar-current-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-current-demo")),
   },
-  "colors/color-area/color-area-channel-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-channel-demo")),
+  "layouts/navbar/navbar-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-disabled-demo")),
   },
-  "colors/color-area/color-area-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-demo")),
+  "layouts/navbar/navbar-floating-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-floating-demo")),
   },
-  "colors/color-area/color-area-space-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-space-demo")),
+  "layouts/navbar/navbar-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-icon-demo")),
   },
-  "colors/color-area/color-area-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-controlled-demo")),
+  "layouts/navbar/navbar-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-intent-demo")),
   },
-  "colors/color-area/color-area-with-slider-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-with-slider-demo")),
+  "layouts/navbar/navbar-logo-demo": {
+    component: React.lazy(() => import("@/components/docs/layouts/navbar/navbar-logo-demo")),
   },
-  "colors/color-area/color-area-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-area/color-area-disabled-demo")),
+  "media/avatar-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-demo")),
   },
-  "colors/color-field/color-field-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-disabled-demo")),
+  "media/avatar-fallback-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-fallback-demo")),
   },
-  "colors/color-field/color-field-with-prefix-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-prefix-demo")),
+  "media/avatar-group-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-group-demo")),
   },
-  "colors/color-field/color-field-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-validation-demo")),
+  "media/avatar-initials-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-initials-demo")),
   },
-  "colors/color-field/color-field-with-suffix-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-with-suffix-demo")),
+  "media/avatar-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-shape-demo")),
   },
-  "colors/color-field/color-field-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-demo")),
+  "media/avatar-size-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-size-demo")),
   },
-  "colors/color-field/color-field-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-field/color-field-controlled-demo")),
+  "media/avatar-status-demo": {
+    component: React.lazy(() => import("@/components/docs/media/avatar-status-demo")),
   },
-  "colors/color-swatch/color-swatch-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-demo")),
+  "media/carousel-api-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-api-demo")),
   },
-  "colors/color-swatch/color-swatch-picker-item-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-picker-item-disabled-demo")),
+  "media/carousel-autoplay-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-autoplay-demo")),
   },
-  "colors/color-swatch/color-swatch-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-controlled-demo")),
+  "media/carousel-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-demo")),
   },
-  "colors/color-swatch/color-swatch-picker-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-swatch/color-swatch-picker-demo")),
+  "media/carousel-options-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-options-demo")),
   },
-  "colors/color-picker/color-picker-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-controlled-demo")),
+  "media/carousel-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-orientation-demo")),
   },
-  "colors/color-picker/color-picker-with-description-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-with-description-demo")),
+  "media/carousel-with-collection-demo": {
+    component: React.lazy(() => import("@/components/docs/media/carousel-with-collection-demo")),
   },
-  "colors/color-picker/color-picker-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-demo")),
+  "navigation/breadcrumbs/breadcrumbs-collections-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-collections-demo")),
   },
-  "colors/color-picker/color-picker-enable-swatch-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-enable-swatch-demo")),
+  "navigation/breadcrumbs/breadcrumbs-current-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-current-demo")),
   },
-  "colors/color-picker/color-picker-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-disabled-demo")),
+  "navigation/breadcrumbs/breadcrumbs-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-demo")),
   },
-  "colors/color-picker/color-picker-with-label-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-with-label-demo")),
+  "navigation/breadcrumbs/breadcrumbs-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-menu-demo")),
   },
-  "colors/color-picker/color-picker-enable-selection-format-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-enable-selection-format-demo")),
+  "navigation/breadcrumbs/breadcrumbs-separator-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/breadcrumbs/breadcrumbs-separator-demo")),
   },
-  "colors/color-picker/color-picker-combination-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-picker/color-picker-combination-demo")),
+  "navigation/disclosure/disclosure-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-controlled-demo")),
   },
-  "colors/color-wheel/color-wheel-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-controlled-demo")),
+  "navigation/disclosure/disclosure-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-demo")),
   },
-  "colors/color-wheel/color-wheel-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-disabled-demo")),
+  "navigation/disclosure/disclosure-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure/disclosure-disabled-demo")),
   },
-  "colors/color-wheel/color-wheel-demo": {
-    component: React.lazy(() => import("@/components/docs/colors/color-wheel/color-wheel-demo")),
+  "navigation/disclosure-group/disclosure-group-allow-multiple-expand-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-allow-multiple-expand-demo")),
   },
-  "pickers/multiple-select/multiple-select-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-disabled-demo")),
+  "navigation/disclosure-group/disclosure-group-border-hidden-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-border-hidden-demo")),
   },
-  "pickers/multiple-select/multiple-select-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-demo")),
+  "navigation/disclosure-group/disclosure-group-default-expand-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-default-expand-demo")),
   },
-  "pickers/multiple-select/multiple-select-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-controlled-demo")),
+  "navigation/disclosure-group/disclosure-group-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-demo")),
   },
-  "pickers/multiple-select/multiple-select-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-intent-demo")),
+  "navigation/disclosure-group/disclosure-group-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-disabled-demo")),
   },
-  "pickers/multiple-select/multiple-select-invalid-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-invalid-demo")),
+  "navigation/disclosure-group/disclosure-group-hide-everything-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-hide-everything-demo")),
   },
-  "pickers/multiple-select/multiple-select-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-shape-demo")),
+  "navigation/disclosure-group/disclosure-group-hide-indicator-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/disclosure-group/disclosure-group-hide-indicator-demo")),
   },
-  "pickers/combo-box/combo-box-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-controlled-demo")),
+  "navigation/link/link-button-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/link/link-button-demo")),
   },
-  "pickers/combo-box/combo-box-readonly-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-readonly-demo")),
+  "navigation/link/link-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/link/link-demo")),
   },
-  "pickers/combo-box/combo-box-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-demo")),
+  "navigation/link/link-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/link/link-disabled-demo")),
   },
-  "pickers/combo-box/combo-box-controlled-selection-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-controlled-selection-demo")),
+  "navigation/link/link-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/link/link-intent-demo")),
   },
-  "pickers/combo-box/combo-box-avatar-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-avatar-demo")),
+  "navigation/link/link-unstyled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/link/link-unstyled-demo")),
   },
-  "pickers/combo-box/combo-box-section-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-section-demo")),
+  "navigation/pagination/pagination-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/pagination/pagination-demo")),
   },
-  "pickers/combo-box/combo-box-invalid-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-invalid-demo")),
+  "navigation/pagination/pagination-dynamic-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/pagination/pagination-dynamic-demo")),
   },
-  "pickers/combo-box/combo-box-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-disabled-demo")),
+  "navigation/pagination/simple-pagination-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/pagination/simple-pagination-demo")),
   },
-  "pickers/combo-box/combo-box-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-validation-demo")),
+  "navigation/tabs/tabs-collections-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-collections-demo")),
   },
-  "pickers/select/select-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-disabled-demo")),
+  "navigation/tabs/tabs-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-demo")),
   },
-  "pickers/select/select-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-demo")),
+  "navigation/tabs/tabs-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-disabled-demo")),
   },
-  "pickers/select/select-validation-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-validation-demo")),
+  "navigation/tabs/tabs-icons-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-icons-demo")),
   },
-  "pickers/select/select-with-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-with-icon-demo")),
+  "navigation/tabs/tabs-link-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-link-demo")),
   },
-  "pickers/select/select-item-details-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-item-details-demo")),
+  "navigation/tabs/tabs-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-orientation-demo")),
   },
-  "pickers/select/select-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-controlled-demo")),
+  "navigation/tabs/tabs-responsive-demo": {
+    component: React.lazy(() => import("@/components/docs/navigation/tabs/tabs-responsive-demo")),
   },
-  "pickers/select/select-uncontrolled-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-uncontrolled-demo")),
+  "overlays/drawer/drawer-basic-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-basic-demo")),
   },
-  "pickers/select/select-section-demo": {
-    component: React.lazy(() => import("@/components/docs/pickers/select/select-section-demo")),
+  "overlays/drawer/drawer-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-controlled-demo")),
   },
-  "surfaces/show-more/show-more-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-controlled-demo")),
+  "overlays/drawer/drawer-nested-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-nested-demo")),
   },
-  "surfaces/show-more/show-more-as-text-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-as-text-demo")),
+  "overlays/drawer/drawer-sticky-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-sticky-demo")),
   },
-  "surfaces/show-more/show-more-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-orientation-demo")),
+  "overlays/drawer/drawer-without-notch-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-without-notch-demo")),
   },
-  "surfaces/show-more/show-more-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-demo")),
+  "overlays/modal/alert-dialog-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/alert-dialog-demo")),
   },
-  "surfaces/card/card-login-form-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/card/card-login-form-demo")),
+  "overlays/modal/modal-blur-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-blur-demo")),
   },
-  "surfaces/card/card-table-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/card/card-table-demo")),
+  "overlays/modal/modal-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-controlled-demo")),
   },
-  "surfaces/card/card-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/card/card-demo")),
+  "overlays/modal/modal-custom-classnames-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-custom-classnames-demo")),
   },
-  "surfaces/separator/separator-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/separator/separator-demo")),
+  "overlays/modal/modal-custom-style-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-custom-style-demo")),
   },
-  "surfaces/separator/separator-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/separator/separator-orientation-demo")),
+  "overlays/modal/modal-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-demo")),
   },
-  "surfaces/heading/heading-tracking-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-tracking-demo")),
+  "overlays/modal/modal-nested-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-nested-demo")),
   },
-  "surfaces/heading/heading-level-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-level-demo")),
+  "overlays/modal/modal-size-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-size-demo")),
   },
-  "surfaces/heading/heading-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-demo")),
+  "overlays/modal/modal-sticky-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-sticky-demo")),
   },
-  "surfaces/chart/area/area-chart-linear-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-linear-demo")),
+  "overlays/modal/modal-triggered-by-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/modal/modal-triggered-by-menu-demo")),
   },
-  "surfaces/chart/area/area-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-demo")),
+  "overlays/popover/popover-arrow-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-arrow-demo")),
   },
-  "surfaces/chart/area/area-chart-gradient-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-gradient-demo")),
+  "overlays/popover/popover-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-controlled-demo")),
   },
-  "surfaces/chart/area/area-chart-stacked-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-stacked-demo")),
+  "overlays/popover/popover-custom-close": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-custom-close")),
   },
-  "surfaces/chart/pie/pie-chart-interactive-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-interactive-demo")),
+  "overlays/popover/popover-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-demo")),
   },
-  "surfaces/chart/pie/pie-chart-legend-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-legend-demo")),
+  "overlays/popover/popover-placement-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-placement-demo")),
   },
-  "surfaces/chart/pie/pie-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-demo")),
+  "overlays/popover/popover-trigger-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/popover/popover-trigger-demo")),
   },
-  "surfaces/chart/pie/pie-chart-stacked-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-stacked-demo")),
+  "overlays/sheet/sheet-classnames-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-classnames-demo")),
   },
-  "surfaces/chart/pie/pie-chart-label-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-label-demo")),
+  "overlays/sheet/sheet-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-controlled-demo")),
   },
-  "surfaces/chart/line/line-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-demo")),
+  "overlays/sheet/sheet-custom-close-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-custom-close-demo")),
   },
-  "surfaces/chart/line/line-chart-dots-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-dots-demo")),
+  "overlays/sheet/sheet-custom-style-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-custom-style-demo")),
   },
-  "surfaces/chart/line/line-chart-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-multiple-demo")),
+  "overlays/sheet/sheet-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-demo")),
   },
-  "surfaces/chart/line/line-chart-label-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-label-demo")),
+  "overlays/sheet/sheet-menu-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-menu-demo")),
   },
-  "surfaces/chart/line/line-chart-dots-color-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-dots-color-demo")),
+  "overlays/sheet/sheet-position-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-position-demo")),
   },
-  "surfaces/chart/line/line-chart-linear-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-linear-demo")),
+  "overlays/sheet/sheet-stack-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-stack-demo")),
   },
-  "surfaces/chart/radial/radial-chart-text-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-text-demo")),
+  "overlays/sheet/sheet-sticky-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/sheet/sheet-sticky-demo")),
   },
-  "surfaces/chart/radial/radial-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-demo")),
+  "overlays/tooltip/tooltip-delay-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-delay-demo")),
   },
-  "surfaces/chart/radial/radial-chart-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-shape-demo")),
+  "overlays/tooltip/tooltip-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-demo")),
   },
-  "surfaces/chart/radial/radial-chart-stacked-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-stacked-demo")),
+  "overlays/tooltip/tooltip-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-intent-demo")),
   },
-  "surfaces/chart/radial/radial-chart-grid-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-grid-demo")),
+  "overlays/tooltip/tooltip-placement-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-placement-demo")),
   },
-  "surfaces/chart/bar/bar-chart-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-multiple-demo")),
+  "overlays/tooltip/tooltip-without-arrow-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-without-arrow-demo")),
   },
-  "surfaces/chart/bar/bar-chart-analytic-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-analytic-demo")),
+  "pickers/combo-box/combo-box-avatar-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-avatar-demo")),
   },
-  "surfaces/chart/bar/bar-chart-mixed-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-mixed-demo")),
+  "pickers/combo-box/combo-box-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-controlled-demo")),
   },
-  "surfaces/chart/bar/bar-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-demo")),
+  "pickers/combo-box/combo-box-controlled-selection-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-controlled-selection-demo")),
   },
-  "surfaces/chart/bar/bar-chart-horizontal-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo")),
+  "pickers/combo-box/combo-box-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-demo")),
   },
-  "surfaces/chart/radar/radar-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-demo")),
+  "pickers/combo-box/combo-box-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-disabled-demo")),
   },
-  "surfaces/chart/radar/radar-chart-line-only-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-line-only-demo")),
+  "pickers/combo-box/combo-box-invalid-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-invalid-demo")),
   },
-  "surfaces/chart/radar/radar-chart-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-icon-demo")),
+  "pickers/combo-box/combo-box-readonly-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-readonly-demo")),
   },
-  "surfaces/chart/radar/radar-chart-dots-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-dots-demo")),
+  "pickers/combo-box/combo-box-section-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-section-demo")),
   },
-  "surfaces/chart/radar/radar-chart-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-multiple-demo")),
+  "pickers/combo-box/combo-box-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/combo-box/combo-box-validation-demo")),
   },
-  "surfaces/chart/basic-chart-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/chart/basic-chart-demo")),
+  "pickers/multiple-select/multiple-select-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-controlled-demo")),
   },
-  "surfaces/description-list/description-list-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-demo")),
+  "pickers/multiple-select/multiple-select-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-demo")),
   },
-  "surfaces/description-list/description-list-heading-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-heading-demo")),
+  "pickers/multiple-select/multiple-select-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-disabled-demo")),
   },
-  "surfaces/description-list/description-list-card-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-card-demo")),
+  "pickers/multiple-select/multiple-select-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-intent-demo")),
   },
-  "surfaces/grid/grid-gap-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-gap-demo")),
+  "pickers/multiple-select/multiple-select-invalid-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-invalid-demo")),
   },
-  "surfaces/grid/grid-collections-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-collections-demo")),
+  "pickers/multiple-select/multiple-select-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/multiple-select/multiple-select-shape-demo")),
   },
-  "surfaces/grid/grid-basic-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-basic-demo")),
+  "pickers/select/select-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-controlled-demo")),
   },
-  "surfaces/grid/grid-responsive-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-responsive-demo")),
+  "pickers/select/select-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-demo")),
   },
-  "surfaces/grid/grid-item-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-item-demo")),
+  "pickers/select/select-disabled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-disabled-demo")),
   },
-  "surfaces/grid/grid-debug-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-debug-demo")),
+  "pickers/select/select-item-details-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-item-details-demo")),
   },
-  "surfaces/grid/grid-gap-x-y-demo": {
-    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-gap-x-y-demo")),
+  "pickers/select/select-section-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-section-demo")),
   },
-  "statuses/toast-description-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/toast-description-demo")),
+  "pickers/select/select-uncontrolled-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-uncontrolled-demo")),
   },
-  "statuses/meter-decimal-format-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/meter-decimal-format-demo")),
+  "pickers/select/select-validation-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-validation-demo")),
+  },
+  "pickers/select/select-with-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/pickers/select/select-with-icon-demo")),
   },
   "statuses/badge-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/badge-demo")),
   },
-  "statuses/progress-circle-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-controlled-demo")),
+  "statuses/badge-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/badge-intent-demo")),
   },
-  "statuses/skeleton-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/skeleton-shape-demo")),
+  "statuses/badge-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/badge-shape-demo")),
   },
-  "statuses/progress-bar-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/progress-bar-demo")),
+  "statuses/indeterminate-progress-bar-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/indeterminate-progress-bar-demo")),
   },
   "statuses/loader-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/loader-demo")),
   },
-  "statuses/skeleton-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/skeleton-intent-demo")),
+  "statuses/loader-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/loader-intent-demo")),
+  },
+  "statuses/loader-size-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/loader-size-demo")),
   },
   "statuses/loader-variant-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/loader-variant-demo")),
   },
-  "statuses/progress-circle-indeterminate-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-indeterminate-demo")),
-  },
-  "statuses/indeterminate-progress-bar-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/indeterminate-progress-bar-demo")),
-  },
-  "statuses/skeleton-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/skeleton-demo")),
-  },
-  "statuses/loader-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/loader-intent-demo")),
+  "statuses/meter-currency-format-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/meter-currency-format-demo")),
   },
-  "statuses/toast-action-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/toast-action-demo")),
+  "statuses/meter-decimal-format-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/meter-decimal-format-demo")),
   },
-  "statuses/badge-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/badge-shape-demo")),
+  "statuses/meter-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/meter-demo")),
   },
   "statuses/note-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/note-demo")),
   },
-  "statuses/progress-circle-color-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-color-demo")),
-  },
-  "statuses/toast-status-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/toast-status-demo")),
+  "statuses/note-hide-indicator-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/note-hide-indicator-demo")),
   },
   "statuses/note-intent-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/note-intent-demo")),
   },
-  "statuses/progress-circle-custom-size-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-custom-size-demo")),
-  },
-  "statuses/meter-currency-format-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/meter-currency-format-demo")),
+  "statuses/progress-bar-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/progress-bar-demo")),
   },
-  "statuses/toast-positions-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/toast-positions-demo")),
+  "statuses/progress-circle-color-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-color-demo")),
   },
-  "statuses/note-hide-indicator-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/note-hide-indicator-demo")),
+  "statuses/progress-circle-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-controlled-demo")),
   },
-  "statuses/badge-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/badge-intent-demo")),
+  "statuses/progress-circle-custom-size-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-custom-size-demo")),
   },
   "statuses/progress-circle-demo": {
     component: React.lazy(() => import("@/components/docs/statuses/progress-circle-demo")),
   },
-  "statuses/toast-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/toast-demo")),
+  "statuses/progress-circle-indeterminate-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/progress-circle-indeterminate-demo")),
   },
-  "statuses/meter-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/meter-demo")),
+  "statuses/skeleton-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/skeleton-demo")),
   },
-  "statuses/loader-size-demo": {
-    component: React.lazy(() => import("@/components/docs/statuses/loader-size-demo")),
+  "statuses/skeleton-intent-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/skeleton-intent-demo")),
   },
-  "collections/tree/tree-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tree/tree-demo")),
+  "statuses/skeleton-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/skeleton-shape-demo")),
   },
-  "collections/choicebox/choicebox-single-selection-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-single-selection-demo")),
+  "statuses/toast-action-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/toast-action-demo")),
   },
-  "collections/choicebox/choicebox-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-controlled-demo")),
+  "statuses/toast-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/toast-demo")),
   },
-  "collections/choicebox/choicebox-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-disabled-demo")),
+  "statuses/toast-description-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/toast-description-demo")),
   },
-  "collections/choicebox/choicebox-columns-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-columns-demo")),
+  "statuses/toast-positions-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/toast-positions-demo")),
   },
-  "collections/choicebox/choicebox-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/choicebox/choicebox-demo")),
+  "statuses/toast-status-demo": {
+    component: React.lazy(() => import("@/components/docs/statuses/toast-status-demo")),
   },
-  "collections/table/table-resize-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/table/table-resize-demo")),
+  "surfaces/card/card-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/card/card-demo")),
   },
-  "collections/table/table-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/table/table-demo")),
+  "surfaces/card/card-login-form-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/card/card-login-form-demo")),
   },
-  "collections/table/table-sorting-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/table/table-sorting-demo")),
+  "surfaces/card/card-table-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/card/card-table-demo")),
   },
-  "collections/table/table-bulk-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/table/table-bulk-demo")),
+  "surfaces/chart/area/area-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-demo")),
   },
-  "collections/table/table-drag-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/table/table-drag-demo")),
+  "surfaces/chart/area/area-chart-gradient-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-gradient-demo")),
   },
-  "collections/menu/menu-collection-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-collection-demo")),
+  "surfaces/chart/area/area-chart-linear-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-linear-demo")),
   },
-  "collections/menu/single-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/single-menu-demo")),
+  "surfaces/chart/area/area-chart-stacked-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/area/area-chart-stacked-demo")),
   },
-  "collections/menu/multiple-menu-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/multiple-menu-demo")),
+  "surfaces/chart/bar/bar-chart-analytic-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-analytic-demo")),
   },
-  "collections/menu/menu-section-level-selection": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-level-selection")),
+  "surfaces/chart/bar/bar-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-demo")),
   },
-  "collections/menu/menu-respect-screen-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-respect-screen-demo")),
+  "surfaces/chart/bar/bar-chart-horizontal-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo")),
   },
-  "collections/menu/menu-danger-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-danger-demo")),
+  "surfaces/chart/bar/bar-chart-mixed-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-mixed-demo")),
   },
-  "collections/menu/menu-section-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-section-demo")),
+  "surfaces/chart/bar/bar-chart-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/bar/bar-chart-multiple-demo")),
   },
-  "collections/menu/menu-with-arrow-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-with-arrow-demo")),
+  "surfaces/chart/basic-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/basic-chart-demo")),
   },
-  "collections/menu/menu-with-icon-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-with-icon-demo")),
+  "surfaces/chart/line/line-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-demo")),
   },
-  "collections/menu/menu-item-details-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-item-details-demo")),
+  "surfaces/chart/line/line-chart-dots-color-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-dots-color-demo")),
   },
-  "collections/menu/menu-sub-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-sub-demo")),
+  "surfaces/chart/line/line-chart-dots-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-dots-demo")),
   },
-  "collections/menu/menu-basic-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-basic-demo")),
+  "surfaces/chart/line/line-chart-label-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-label-demo")),
   },
-  "collections/menu/menu-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/menu/menu-disabled-demo")),
+  "surfaces/chart/line/line-chart-linear-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-linear-demo")),
   },
-  "collections/grid-list/grid-list-drag-between-item-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-drag-between-item-demo")),
+  "surfaces/chart/line/line-chart-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/line/line-chart-multiple-demo")),
   },
-  "collections/grid-list/grid-list-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-multiple-demo")),
+  "surfaces/chart/pie/pie-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-demo")),
   },
-  "collections/grid-list/grid-list-render-empty-state-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-render-empty-state-demo")),
+  "surfaces/chart/pie/pie-chart-interactive-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-interactive-demo")),
   },
-  "collections/grid-list/grid-list-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-controlled-demo")),
+  "surfaces/chart/pie/pie-chart-label-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-label-demo")),
   },
-  "collections/grid-list/grid-list-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-disabled-demo")),
+  "surfaces/chart/pie/pie-chart-legend-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-legend-demo")),
   },
-  "collections/grid-list/grid-list-drag-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-drag-demo")),
+  "surfaces/chart/pie/pie-chart-stacked-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/pie/pie-chart-stacked-demo")),
   },
-  "collections/grid-list/grid-list-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/grid-list/grid-list-demo")),
+  "surfaces/chart/radar/radar-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-demo")),
   },
-  "collections/list-box/list-box-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-demo")),
+  "surfaces/chart/radar/radar-chart-dots-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-dots-demo")),
   },
-  "collections/list-box/list-box-multiple-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-multiple-demo")),
+  "surfaces/chart/radar/radar-chart-icon-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-icon-demo")),
   },
-  "collections/list-box/list-box-item-details-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-item-details-demo")),
+  "surfaces/chart/radar/radar-chart-line-only-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-line-only-demo")),
   },
-  "collections/list-box/list-box-section-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-section-demo")),
+  "surfaces/chart/radar/radar-chart-multiple-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radar/radar-chart-multiple-demo")),
   },
-  "collections/list-box/list-box-rearrange-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-rearrange-demo")),
+  "surfaces/chart/radial/radial-chart-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-demo")),
   },
-  "collections/list-box/list-box-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-controlled-demo")),
+  "surfaces/chart/radial/radial-chart-grid-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-grid-demo")),
   },
-  "collections/list-box/list-box-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/list-box/list-box-disabled-demo")),
+  "surfaces/chart/radial/radial-chart-shape-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-shape-demo")),
   },
-  "collections/tag-group/tag-group-disabled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-disabled-demo")),
+  "surfaces/chart/radial/radial-chart-stacked-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-stacked-demo")),
   },
-  "collections/tag-group/tag-group-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-demo")),
+  "surfaces/chart/radial/radial-chart-text-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/chart/radial/radial-chart-text-demo")),
   },
-  "collections/tag-group/tag-group-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-shape-demo")),
+  "surfaces/description-list/description-list-card-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-card-demo")),
   },
-  "collections/tag-group/tag-group-controlled-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-controlled-demo")),
+  "surfaces/description-list/description-list-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-demo")),
   },
-  "collections/tag-group/tag-group-with-remove-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-with-remove-demo")),
+  "surfaces/description-list/description-list-heading-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/description-list/description-list-heading-demo")),
   },
-  "collections/tag-group/tag-group-href-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-href-demo")),
+  "surfaces/grid/grid-basic-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-basic-demo")),
   },
-  "collections/tag-group/tag-group-intent-demo": {
-    component: React.lazy(() => import("@/components/docs/collections/tag-group/tag-group-intent-demo")),
+  "surfaces/grid/grid-collections-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-collections-demo")),
   },
-  "media/avatar-size-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-size-demo")),
+  "surfaces/grid/grid-debug-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-debug-demo")),
   },
-  "media/carousel-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-demo")),
+  "surfaces/grid/grid-gap-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-gap-demo")),
   },
-  "media/avatar-initials-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-initials-demo")),
+  "surfaces/grid/grid-gap-x-y-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-gap-x-y-demo")),
   },
-  "media/carousel-with-collection-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-with-collection-demo")),
+  "surfaces/grid/grid-item-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-item-demo")),
   },
-  "media/carousel-api-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-api-demo")),
+  "surfaces/grid/grid-responsive-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/grid/grid-responsive-demo")),
   },
-  "media/avatar-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-demo")),
+  "surfaces/heading/heading-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-demo")),
   },
-  "media/avatar-shape-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-shape-demo")),
+  "surfaces/heading/heading-level-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-level-demo")),
   },
-  "media/carousel-options-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-options-demo")),
+  "surfaces/heading/heading-tracking-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/heading/heading-tracking-demo")),
   },
-  "media/avatar-group-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-group-demo")),
+  "surfaces/separator/separator-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/separator/separator-demo")),
   },
-  "media/avatar-fallback-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-fallback-demo")),
+  "surfaces/separator/separator-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/separator/separator-orientation-demo")),
   },
-  "media/avatar-status-demo": {
-    component: React.lazy(() => import("@/components/docs/media/avatar-status-demo")),
+  "surfaces/show-more/show-more-as-text-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-as-text-demo")),
   },
-  "media/carousel-autoplay-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-autoplay-demo")),
+  "surfaces/show-more/show-more-controlled-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-controlled-demo")),
   },
-  "media/carousel-orientation-demo": {
-    component: React.lazy(() => import("@/components/docs/media/carousel-orientation-demo")),
+  "surfaces/show-more/show-more-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-demo")),
+  },
+  "surfaces/show-more/show-more-orientation-demo": {
+    component: React.lazy(() => import("@/components/docs/surfaces/show-more/show-more-orientation-demo")),
   },
 };
diff --git a/components/docs/layouts/navbar/navbar-icon-demo.tsx b/components/docs/layouts/navbar/navbar-icon-demo.tsx
index b3946567..c5e4e0cd 100644
--- a/components/docs/layouts/navbar/navbar-icon-demo.tsx
+++ b/components/docs/layouts/navbar/navbar-icon-demo.tsx
@@ -1,7 +1,7 @@
 import {
   IconBrandApple,
   IconBrandJustd,
-  IconChart3,
+  IconChartBar,
   IconChevronLgDown,
   IconColors,
   IconCommandRegular,
@@ -36,7 +36,7 @@ export default function NavbarIconDemo() {
             <IconColors /> Themes
           </Navbar.Item>
           <Navbar.Item href="https://getjustd.com/charts">
-            <IconChart3 /> Charts
+            <IconChartBar /> Charts
           </Navbar.Item>
         </Navbar.Section>
       </Navbar.Nav>
diff --git a/components/docs/overlays/sheet/sheet-menu-demo.tsx b/components/docs/overlays/sheet/sheet-menu-demo.tsx
index 7fe02452..840046ed 100644
--- a/components/docs/overlays/sheet/sheet-menu-demo.tsx
+++ b/components/docs/overlays/sheet/sheet-menu-demo.tsx
@@ -8,7 +8,7 @@ import {
   IconBrandCopilot,
   IconBrandGithub,
   IconBuilding,
-  IconChart,
+  IconChartBar,
   IconCodeBrackets,
   IconFilter,
   IconGear,
diff --git a/components/docs/surfaces/chart/area/area-chart-demo.tsx b/components/docs/surfaces/chart/area/area-chart-demo.tsx
index cb614043..1397320e 100644
--- a/components/docs/surfaces/chart/area/area-chart-demo.tsx
+++ b/components/docs/surfaces/chart/area/area-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -66,7 +66,7 @@ export default function AreaChartDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Sales increased by 8.4% this year <IconTrendingChart3 />
+              Sales increased by 8.4% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January - December 2023
diff --git a/components/docs/surfaces/chart/area/area-chart-gradient-demo.tsx b/components/docs/surfaces/chart/area/area-chart-gradient-demo.tsx
index c0891503..abad3ffc 100644
--- a/components/docs/surfaces/chart/area/area-chart-gradient-demo.tsx
+++ b/components/docs/surfaces/chart/area/area-chart-gradient-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -89,7 +89,7 @@ export default function AreaChartGradientDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Profit increased by 10.2% this year <IconTrendingChart3 />
+              Profit increased by 10.2% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January - December 2024
diff --git a/components/docs/surfaces/chart/area/area-chart-linear-demo.tsx b/components/docs/surfaces/chart/area/area-chart-linear-demo.tsx
index 97c7e3ce..2128d9c5 100644
--- a/components/docs/surfaces/chart/area/area-chart-linear-demo.tsx
+++ b/components/docs/surfaces/chart/area/area-chart-linear-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart5 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -69,7 +69,7 @@ export default function AreaChartLinearDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Revenue increased by 12.5% this year <IconTrendingChart5 />
+              Revenue increased by 12.5% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January - December 2024
diff --git a/components/docs/surfaces/chart/bar/bar-chart-analytic-demo.tsx b/components/docs/surfaces/chart/bar/bar-chart-analytic-demo.tsx
index 6437dc1d..b193f6de 100644
--- a/components/docs/surfaces/chart/bar/bar-chart-analytic-demo.tsx
+++ b/components/docs/surfaces/chart/bar/bar-chart-analytic-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, Rectangle, XAxis, YAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -100,7 +100,7 @@ export default function BarChartAnalyticDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Visitors increased by 5.2% this year <IconTrendingChart3 />
+              Visitors increased by 5.2% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               Showing total visitors for last year
diff --git a/components/docs/surfaces/chart/bar/bar-chart-demo.tsx b/components/docs/surfaces/chart/bar/bar-chart-demo.tsx
index 5df0476a..35f3f0eb 100644
--- a/components/docs/surfaces/chart/bar/bar-chart-demo.tsx
+++ b/components/docs/surfaces/chart/bar/bar-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -55,7 +55,7 @@ export default function BarChartDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Trending up by 10.5% this month <IconTrendingChart3 />
+          Trending up by 10.5% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">Showing total sales for the last 11 months</div>
       </Card.Footer>
diff --git a/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo.tsx b/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo.tsx
index 589fbab3..aa45ce2d 100644
--- a/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo.tsx
+++ b/components/docs/surfaces/chart/bar/bar-chart-horizontal-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -78,7 +78,7 @@ export default function BarChartHorizontalDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Sales increased by 5.2% this year <IconTrendingChart3 />
+          Sales increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 7 months
diff --git a/components/docs/surfaces/chart/bar/bar-chart-mixed-demo.tsx b/components/docs/surfaces/chart/bar/bar-chart-mixed-demo.tsx
index 9f600ead..2df69314 100644
--- a/components/docs/surfaces/chart/bar/bar-chart-mixed-demo.tsx
+++ b/components/docs/surfaces/chart/bar/bar-chart-mixed-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, XAxis, YAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -86,7 +86,7 @@ export default function BarChartMixedDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 9 months
diff --git a/components/docs/surfaces/chart/bar/bar-chart-multiple-demo.tsx b/components/docs/surfaces/chart/bar/bar-chart-multiple-demo.tsx
index d1fe0e45..4fa9bebd 100644
--- a/components/docs/surfaces/chart/bar/bar-chart-multiple-demo.tsx
+++ b/components/docs/surfaces/chart/bar/bar-chart-multiple-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -64,7 +64,7 @@ export default function BarChartMultipleDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Online courses increased by 15.2% this year <IconTrendingChart3 />
+          Online courses increased by 15.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total revenue for january 2023 to august 2024
diff --git a/components/docs/surfaces/chart/basic-chart-demo.tsx b/components/docs/surfaces/chart/basic-chart-demo.tsx
index 6d50d97f..b8e4b5fe 100644
--- a/components/docs/surfaces/chart/basic-chart-demo.tsx
+++ b/components/docs/surfaces/chart/basic-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -90,7 +90,7 @@ export default function BasicChartDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Profit increased by 10.2% this year <IconTrendingChart3 />
+              Profit increased by 10.2% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January - December 2024
diff --git a/components/docs/surfaces/chart/line/line-chart-demo.tsx b/components/docs/surfaces/chart/line/line-chart-demo.tsx
index 1fedf42b..e21bd6a3 100644
--- a/components/docs/surfaces/chart/line/line-chart-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -64,7 +64,7 @@ export default function LineChartDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Sales increased by 5.2% this year <IconTrendingChart3 />
+          Sales increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">Showing total visitors for one year</div>
       </Card.Footer>
diff --git a/components/docs/surfaces/chart/line/line-chart-dots-color-demo.tsx b/components/docs/surfaces/chart/line/line-chart-dots-color-demo.tsx
index 54d833f4..c845dd6a 100644
--- a/components/docs/surfaces/chart/line/line-chart-dots-color-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-dots-color-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, Dot, Line, LineChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -85,7 +85,7 @@ export default function LineChartDotsColorDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 10 months
diff --git a/components/docs/surfaces/chart/line/line-chart-dots-demo.tsx b/components/docs/surfaces/chart/line/line-chart-dots-demo.tsx
index 7fe698ea..eeff57c6 100644
--- a/components/docs/surfaces/chart/line/line-chart-dots-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-dots-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -73,7 +73,7 @@ export default function LineChartDotsDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Profit increased by 5.2% this year <IconTrendingChart3 />
+          Profit increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total profit for the last 10 months
diff --git a/components/docs/surfaces/chart/line/line-chart-label-demo.tsx b/components/docs/surfaces/chart/line/line-chart-label-demo.tsx
index 3b64edee..61e73de7 100644
--- a/components/docs/surfaces/chart/line/line-chart-label-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-label-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, LabelList, Line, LineChart, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -70,7 +70,7 @@ export default function LineChartLabelDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Revenue increased by 5.2% this year <IconTrendingChart3 />
+          Revenue increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total revenue for the last 10 months
diff --git a/components/docs/surfaces/chart/line/line-chart-linear-demo.tsx b/components/docs/surfaces/chart/line/line-chart-linear-demo.tsx
index f583d615..d2016364 100644
--- a/components/docs/surfaces/chart/line/line-chart-linear-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-linear-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -74,7 +74,7 @@ export default function LineChartLinearDemo() {
       </Card.Content>
       <Card.Footer className="flex-col items-start gap-2 text-sm">
         <div className="flex gap-2 font-medium leading-none">
-          Sales increased by 5.2% this year <IconTrendingChart3 />
+          Sales increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing sales for january 2023 to october 2024
diff --git a/components/docs/surfaces/chart/line/line-chart-multiple-demo.tsx b/components/docs/surfaces/chart/line/line-chart-multiple-demo.tsx
index 396cd3f5..35efb459 100644
--- a/components/docs/surfaces/chart/line/line-chart-multiple-demo.tsx
+++ b/components/docs/surfaces/chart/line/line-chart-multiple-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -81,7 +81,7 @@ export default function LineChartMultipleDemo() {
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2 font-medium leading-none">
-              Profit and sales increased by 12.5% this year <IconTrendingChart3 />
+              Profit and sales increased by 12.5% this year <IconChartTrending />
             </div>
             <div className="flex items-center gap-2 leading-none text-muted-fg">
               January 2023 - April 2024
diff --git a/components/docs/surfaces/chart/pie/pie-chart-demo.tsx b/components/docs/surfaces/chart/pie/pie-chart-demo.tsx
index 1afb4e8b..26fd183f 100644
--- a/components/docs/surfaces/chart/pie/pie-chart-demo.tsx
+++ b/components/docs/surfaces/chart/pie/pie-chart-demo.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Label, Pie, PieChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -83,7 +83,7 @@ export default function PieChartDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Subscribers increased by 8.5% this year <IconTrendingChart3 />
+          Subscribers increased by 8.5% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total subscribers for the last 3 months
diff --git a/components/docs/surfaces/chart/pie/pie-chart-label-demo.tsx b/components/docs/surfaces/chart/pie/pie-chart-label-demo.tsx
index a5e9833c..6cf7a9cd 100644
--- a/components/docs/surfaces/chart/pie/pie-chart-label-demo.tsx
+++ b/components/docs/surfaces/chart/pie/pie-chart-label-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Pie, PieChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -58,7 +58,7 @@ export default function PieChartLabelDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 6 months
diff --git a/components/docs/surfaces/chart/pie/pie-chart-stacked-demo.tsx b/components/docs/surfaces/chart/pie/pie-chart-stacked-demo.tsx
index 39749f81..75495d6b 100644
--- a/components/docs/surfaces/chart/pie/pie-chart-stacked-demo.tsx
+++ b/components/docs/surfaces/chart/pie/pie-chart-stacked-demo.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconTrendingChart4 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Pie, PieChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -86,7 +86,7 @@ export default function PieChartStackedDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart4 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 6 months
diff --git a/components/docs/surfaces/chart/radar/radar-chart-demo.tsx b/components/docs/surfaces/chart/radar/radar-chart-demo.tsx
index 1dc3169e..3800ed31 100644
--- a/components/docs/surfaces/chart/radar/radar-chart-demo.tsx
+++ b/components/docs/surfaces/chart/radar/radar-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -45,7 +45,7 @@ export default function RadarChartDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Sales increased by 5.2% this year <IconTrendingChart3 />
+          Sales increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="flex items-center gap-2 leading-none text-muted-fg">
           January - December 2023
diff --git a/components/docs/surfaces/chart/radar/radar-chart-dots-demo.tsx b/components/docs/surfaces/chart/radar/radar-chart-dots-demo.tsx
index 72921753..f7d77222 100644
--- a/components/docs/surfaces/chart/radar/radar-chart-dots-demo.tsx
+++ b/components/docs/surfaces/chart/radar/radar-chart-dots-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -53,7 +53,7 @@ export default function RadarChartDotsDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Sales increased by 5.2% this year <IconTrendingChart3 />
+          Sales increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="flex items-center gap-2 leading-none text-muted-fg">
           January - December 2023
diff --git a/components/docs/surfaces/chart/radar/radar-chart-icon-demo.tsx b/components/docs/surfaces/chart/radar/radar-chart-icon-demo.tsx
index e51b621f..bd243041 100644
--- a/components/docs/surfaces/chart/radar/radar-chart-icon-demo.tsx
+++ b/components/docs/surfaces/chart/radar/radar-chart-icon-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconArrowWall2Down, IconArrowWallUp, IconTrendingChart3 } from "justd-icons"
+import { IconArrowWall2Down, IconArrowWallUp, IconChartTrending } from "justd-icons"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -53,7 +53,7 @@ export default function RadarChartIconDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 pt-4 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="flex items-center gap-2 leading-none text-muted-fg">
           January - June 2024
diff --git a/components/docs/surfaces/chart/radar/radar-chart-line-only-demo.tsx b/components/docs/surfaces/chart/radar/radar-chart-line-only-demo.tsx
index e77cf100..639c3764 100644
--- a/components/docs/surfaces/chart/radar/radar-chart-line-only-demo.tsx
+++ b/components/docs/surfaces/chart/radar/radar-chart-line-only-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -62,7 +62,7 @@ export default function RadarChartLineOnlyDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Profit increased by 5.2% this year <IconTrendingChart3 />
+          Profit increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="flex items-center gap-2 leading-none text-muted-fg">
           January - December 2023
diff --git a/components/docs/surfaces/chart/radar/radar-chart-multiple-demo.tsx b/components/docs/surfaces/chart/radar/radar-chart-multiple-demo.tsx
index d54ce026..e7035fcd 100644
--- a/components/docs/surfaces/chart/radar/radar-chart-multiple-demo.tsx
+++ b/components/docs/surfaces/chart/radar/radar-chart-multiple-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -50,7 +50,7 @@ export default function RadarChartMultipleDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Profit increased by 5.2% this year <IconTrendingChart3 />
+          Profit increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="flex items-center gap-2 leading-none text-muted-fg">
           January - December 2023
diff --git a/components/docs/surfaces/chart/radial/radial-chart-demo.tsx b/components/docs/surfaces/chart/radial/radial-chart-demo.tsx
index 66f286bc..45c1278c 100644
--- a/components/docs/surfaces/chart/radial/radial-chart-demo.tsx
+++ b/components/docs/surfaces/chart/radial/radial-chart-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { RadialBar, RadialBarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -58,7 +58,7 @@ export default function RadialChartDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 6 months
diff --git a/components/docs/surfaces/chart/radial/radial-chart-grid-demo.tsx b/components/docs/surfaces/chart/radial/radial-chart-grid-demo.tsx
index e14986a0..d15268ed 100644
--- a/components/docs/surfaces/chart/radial/radial-chart-grid-demo.tsx
+++ b/components/docs/surfaces/chart/radial/radial-chart-grid-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { PolarGrid, RadialBar, RadialBarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -59,7 +59,7 @@ export default function RadialChartGridDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 6 months
diff --git a/components/docs/surfaces/chart/radial/radial-chart-shape-demo.tsx b/components/docs/surfaces/chart/radial/radial-chart-shape-demo.tsx
index 0630c1ef..20246a5c 100644
--- a/components/docs/surfaces/chart/radial/radial-chart-shape-demo.tsx
+++ b/components/docs/surfaces/chart/radial/radial-chart-shape-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Label, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -62,7 +62,7 @@ export default function RadialChartShapeDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Trending up by 5.2% this month <IconTrendingChart3 />
+          Trending up by 5.2% this month <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 6 months
diff --git a/components/docs/surfaces/chart/radial/radial-chart-stacked-demo.tsx b/components/docs/surfaces/chart/radial/radial-chart-stacked-demo.tsx
index 03405f00..3a708795 100644
--- a/components/docs/surfaces/chart/radial/radial-chart-stacked-demo.tsx
+++ b/components/docs/surfaces/chart/radial/radial-chart-stacked-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -71,7 +71,7 @@ export default function RadialChartStackedDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Profit increased by 5.2% this year <IconTrendingChart3 />
+          Profit increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total profit and sales for the last 3 months
diff --git a/components/docs/surfaces/chart/radial/radial-chart-text-demo.tsx b/components/docs/surfaces/chart/radial/radial-chart-text-demo.tsx
index ea529bd3..8491ee37 100644
--- a/components/docs/surfaces/chart/radial/radial-chart-text-demo.tsx
+++ b/components/docs/surfaces/chart/radial/radial-chart-text-demo.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconTrendingChart3 } from "justd-icons"
+import { IconChartTrending } from "justd-icons"
 import { Label, PolarGrid, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"
 import { Card, Chart, type ChartConfig } from "ui"
 
@@ -68,7 +68,7 @@ export default function RadialChartTextDemo() {
       </Card.Content>
       <Card.Footer className="flex-col gap-2 text-sm">
         <div className="flex items-center gap-2 font-medium leading-none">
-          Visitors increased by 5.2% this year <IconTrendingChart3 />
+          Visitors increased by 5.2% this year <IconChartTrending />
         </div>
         <div className="leading-none text-muted-fg">
           Showing total visitors for the last 3 months
diff --git a/components/ui/meter.tsx b/components/ui/meter.tsx
index 60eda47f..d2daac4d 100644
--- a/components/ui/meter.tsx
+++ b/components/ui/meter.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { motion } from "framer-motion"
-import { IconTriangleInfo } from "justd-icons"
+import { IconTriangleExclamation } from "justd-icons"
 import {
   Meter as MeterPrimitive,
   type MeterProps as MeterPrimitiveProps
@@ -27,7 +27,7 @@ const Meter = ({ label, ...props }: MeterProps) => {
               className={`text-sm tabular-nums ${percentage >= 80 ? "text-danger" : "text-muted-fg"}`}
             >
               {percentage >= 80 && (
-                <IconTriangleInfo
+                <IconTriangleExclamation
                   aria-label="Alert"
                   className="inline-block fill-danger/20 text-danger size-4 align-text-bottom"
                 />
diff --git a/components/ui/note.tsx b/components/ui/note.tsx
index 3307eb69..e6514c3b 100644
--- a/components/ui/note.tsx
+++ b/components/ui/note.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconCircleCheck, IconCircleInfo, IconTriangleInfo } from "justd-icons"
+import { IconCircleCheck, IconCircleInfo, IconTriangleExclamation } from "justd-icons"
 import { Text } from "react-aria-components"
 import { tv, type VariantProps } from "tailwind-variants"
 
@@ -47,7 +47,7 @@ const Note = ({ hideIndicator = false, intent = "info", className, ...props }: N
             ) : intent === "success" ? (
               <IconCircleCheck />
             ) : (
-              <IconTriangleInfo />
+              <IconTriangleExclamation />
             )}
           </div>
         )}
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index c9c9b43a..b2924766 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -3,7 +3,7 @@
 import React from "react"
 
 import { useTheme } from "@/components/theme-provider"
-import { IconCheck, IconCircleInfoFill, IconTriangleInfoFill } from "justd-icons"
+import { IconCheck, IconCircleExclamationFill, IconTriangleExclamationFill } from "justd-icons"
 import { Toaster as ToasterPrimitive, type ToasterProps } from "sonner"
 import { twJoin } from "tailwind-merge"
 
@@ -17,10 +17,10 @@ const Toast = ({ ...props }: ToasterProps) => {
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        info: <IconCircleInfoFill />,
+        info: <IconCircleExclamationFill />,
         success: <IconCheck />,
-        warning: <IconTriangleInfoFill />,
-        error: <IconTriangleInfoFill />,
+        warning: <IconTriangleExclamationFill />,
+        error: <IconTriangleExclamationFill />,
         loading: <Loader variant="spin" />
       }}
       toastOptions={{
diff --git a/package.json b/package.json
index 2b0a26ed..2dbb841e 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "embla-carousel-react": "^8.5.1",
     "framer-motion": "12.0.0-alpha.1",
     "input-otp": "^1.4.1",
-    "justd-icons": "^1.8.1",
+    "justd-icons": "^1.10.0",
     "next": "^15.0.3",
     "next-themes": "^0.2.1",
     "ntcjs": "^1.1.3",