diff --git a/.prettierignore b/.prettierignore
index bc42d43c6b..10d155ba31 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -16,3 +16,4 @@ apps/docs/pages/guides/integrations/*.mdx
 apps/studio/public
 apps/**/.turbo
 apps/docs/CONTRIBUTING.md
+apps/design-system/__registry__
\ No newline at end of file
diff --git a/apps/design-system/.eslintrc.json b/apps/design-system/.eslintrc.json
new file mode 100644
index 0000000000..bffb357a71
--- /dev/null
+++ b/apps/design-system/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/design-system/.gitignore b/apps/design-system/.gitignore
new file mode 100644
index 0000000000..57c2e5aba2
--- /dev/null
+++ b/apps/design-system/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.contentlayer
\ No newline at end of file
diff --git a/apps/design-system/README.md b/apps/design-system/README.md
new file mode 100644
index 0000000000..c4033664f8
--- /dev/null
+++ b/apps/design-system/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx
new file mode 100644
index 0000000000..c5e960a978
--- /dev/null
+++ b/apps/design-system/__registry__/index.tsx
@@ -0,0 +1,1593 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+  "default": {
+    "ConfirmationModal": {
+      name: "ConfirmationModal",
+      type: "components:fragment",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/../../packages/ui-patterns/Dialogs/ConfirmationModal")),
+      source: "",
+      files: ["registry/default//Dialogs/ConfirmationModal.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "TextConfirmModal": {
+      name: "TextConfirmModal",
+      type: "components:fragment",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/../../packages/ui-patterns/Dialogs/TextConfirmModal")),
+      source: "",
+      files: ["registry/default//Dialogs/TextConfirmModal.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "ConfirmDialog": {
+      name: "ConfirmDialog",
+      type: "components:fragment",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/../../packages/ui-patterns/Dialogs/ConfirmDialog")),
+      source: "",
+      files: ["registry/default//Dialogs/ConfirmDialog.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "accordion-demo": {
+      name: "accordion-demo",
+      type: "components:example",
+      registryDependencies: ["accordion"],
+      component: React.lazy(() => import("@/registry/default/example/accordion-demo")),
+      source: "",
+      files: ["registry/default/example/accordion-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "alert-demo": {
+      name: "alert-demo",
+      type: "components:example",
+      registryDependencies: ["alert"],
+      component: React.lazy(() => import("@/registry/default/example/alert-demo")),
+      source: "",
+      files: ["registry/default/example/alert-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "alert-destructive": {
+      name: "alert-destructive",
+      type: "components:example",
+      registryDependencies: ["alert"],
+      component: React.lazy(() => import("@/registry/default/example/alert-destructive")),
+      source: "",
+      files: ["registry/default/example/alert-destructive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "alert-dialog-demo": {
+      name: "alert-dialog-demo",
+      type: "components:example",
+      registryDependencies: ["alert-dialog","button"],
+      component: React.lazy(() => import("@/registry/default/example/alert-dialog-demo")),
+      source: "",
+      files: ["registry/default/example/alert-dialog-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "aspect-ratio-demo": {
+      name: "aspect-ratio-demo",
+      type: "components:example",
+      registryDependencies: ["aspect-ratio"],
+      component: React.lazy(() => import("@/registry/default/example/aspect-ratio-demo")),
+      source: "",
+      files: ["registry/default/example/aspect-ratio-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "avatar-demo": {
+      name: "avatar-demo",
+      type: "components:example",
+      registryDependencies: ["avatar"],
+      component: React.lazy(() => import("@/registry/default/example/avatar-demo")),
+      source: "",
+      files: ["registry/default/example/avatar-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "badge-demo": {
+      name: "badge-demo",
+      type: "components:example",
+      registryDependencies: ["badge"],
+      component: React.lazy(() => import("@/registry/default/example/badge-demo")),
+      source: "",
+      files: ["registry/default/example/badge-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "badge-destructive": {
+      name: "badge-destructive",
+      type: "components:example",
+      registryDependencies: ["badge"],
+      component: React.lazy(() => import("@/registry/default/example/badge-destructive")),
+      source: "",
+      files: ["registry/default/example/badge-destructive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "badge-outline": {
+      name: "badge-outline",
+      type: "components:example",
+      registryDependencies: ["badge"],
+      component: React.lazy(() => import("@/registry/default/example/badge-outline")),
+      source: "",
+      files: ["registry/default/example/badge-outline.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "badge-secondary": {
+      name: "badge-secondary",
+      type: "components:example",
+      registryDependencies: ["badge"],
+      component: React.lazy(() => import("@/registry/default/example/badge-secondary")),
+      source: "",
+      files: ["registry/default/example/badge-secondary.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-demo": {
+      name: "button-demo",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-demo")),
+      source: "",
+      files: ["registry/default/example/button-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-secondary": {
+      name: "button-secondary",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-secondary")),
+      source: "",
+      files: ["registry/default/example/button-secondary.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-destructive": {
+      name: "button-destructive",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-destructive")),
+      source: "",
+      files: ["registry/default/example/button-destructive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-outline": {
+      name: "button-outline",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-outline")),
+      source: "",
+      files: ["registry/default/example/button-outline.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-ghost": {
+      name: "button-ghost",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-ghost")),
+      source: "",
+      files: ["registry/default/example/button-ghost.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-link": {
+      name: "button-link",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-link")),
+      source: "",
+      files: ["registry/default/example/button-link.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-with-icon": {
+      name: "button-with-icon",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-with-icon")),
+      source: "",
+      files: ["registry/default/example/button-with-icon.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-loading": {
+      name: "button-loading",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-loading")),
+      source: "",
+      files: ["registry/default/example/button-loading.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-icon": {
+      name: "button-icon",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-icon")),
+      source: "",
+      files: ["registry/default/example/button-icon.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "button-as-child": {
+      name: "button-as-child",
+      type: "components:example",
+      registryDependencies: ["button"],
+      component: React.lazy(() => import("@/registry/default/example/button-as-child")),
+      source: "",
+      files: ["registry/default/example/button-as-child.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "calendar-demo": {
+      name: "calendar-demo",
+      type: "components:example",
+      registryDependencies: ["calendar"],
+      component: React.lazy(() => import("@/registry/default/example/calendar-demo")),
+      source: "",
+      files: ["registry/default/example/calendar-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "calendar-form": {
+      name: "calendar-form",
+      type: "components:example",
+      registryDependencies: ["calendar","form","popover"],
+      component: React.lazy(() => import("@/registry/default/example/calendar-form")),
+      source: "",
+      files: ["registry/default/example/calendar-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "checkbox-demo": {
+      name: "checkbox-demo",
+      type: "components:example",
+      registryDependencies: ["checkbox"],
+      component: React.lazy(() => import("@/registry/default/example/checkbox-demo")),
+      source: "",
+      files: ["registry/default/example/checkbox-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "checkbox-disabled": {
+      name: "checkbox-disabled",
+      type: "components:example",
+      registryDependencies: ["checkbox"],
+      component: React.lazy(() => import("@/registry/default/example/checkbox-disabled")),
+      source: "",
+      files: ["registry/default/example/checkbox-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "checkbox-form-multiple": {
+      name: "checkbox-form-multiple",
+      type: "components:example",
+      registryDependencies: ["checkbox","form"],
+      component: React.lazy(() => import("@/registry/default/example/checkbox-form-multiple")),
+      source: "",
+      files: ["registry/default/example/checkbox-form-multiple.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "checkbox-form-single": {
+      name: "checkbox-form-single",
+      type: "components:example",
+      registryDependencies: ["checkbox","form"],
+      component: React.lazy(() => import("@/registry/default/example/checkbox-form-single")),
+      source: "",
+      files: ["registry/default/example/checkbox-form-single.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "checkbox-with-text": {
+      name: "checkbox-with-text",
+      type: "components:example",
+      registryDependencies: ["checkbox"],
+      component: React.lazy(() => import("@/registry/default/example/checkbox-with-text")),
+      source: "",
+      files: ["registry/default/example/checkbox-with-text.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "collapsible-demo": {
+      name: "collapsible-demo",
+      type: "components:example",
+      registryDependencies: ["collapsible"],
+      component: React.lazy(() => import("@/registry/default/example/collapsible-demo")),
+      source: "",
+      files: ["registry/default/example/collapsible-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "combobox-demo": {
+      name: "combobox-demo",
+      type: "components:example",
+      registryDependencies: ["command"],
+      component: React.lazy(() => import("@/registry/default/example/combobox-demo")),
+      source: "",
+      files: ["registry/default/example/combobox-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "combobox-dropdown-menu": {
+      name: "combobox-dropdown-menu",
+      type: "components:example",
+      registryDependencies: ["command","dropdown-menu","button"],
+      component: React.lazy(() => import("@/registry/default/example/combobox-dropdown-menu")),
+      source: "",
+      files: ["registry/default/example/combobox-dropdown-menu.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "combobox-form": {
+      name: "combobox-form",
+      type: "components:example",
+      registryDependencies: ["command","form"],
+      component: React.lazy(() => import("@/registry/default/example/combobox-form")),
+      source: "",
+      files: ["registry/default/example/combobox-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "combobox-popover": {
+      name: "combobox-popover",
+      type: "components:example",
+      registryDependencies: ["combobox","popover"],
+      component: React.lazy(() => import("@/registry/default/example/combobox-popover")),
+      source: "",
+      files: ["registry/default/example/combobox-popover.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "combobox-responsive": {
+      name: "combobox-responsive",
+      type: "components:example",
+      registryDependencies: ["combobox","popover","drawer"],
+      component: React.lazy(() => import("@/registry/default/example/combobox-responsive")),
+      source: "",
+      files: ["registry/default/example/combobox-responsive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "command-demo": {
+      name: "command-demo",
+      type: "components:example",
+      registryDependencies: ["command"],
+      component: React.lazy(() => import("@/registry/default/example/command-demo")),
+      source: "",
+      files: ["registry/default/example/command-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "command-dialog": {
+      name: "command-dialog",
+      type: "components:example",
+      registryDependencies: ["command","dialog"],
+      component: React.lazy(() => import("@/registry/default/example/command-dialog")),
+      source: "",
+      files: ["registry/default/example/command-dialog.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "context-menu-demo": {
+      name: "context-menu-demo",
+      type: "components:example",
+      registryDependencies: ["context-menu"],
+      component: React.lazy(() => import("@/registry/default/example/context-menu-demo")),
+      source: "",
+      files: ["registry/default/example/context-menu-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "date-picker-demo": {
+      name: "date-picker-demo",
+      type: "components:example",
+      registryDependencies: ["button","calendar","popover"],
+      component: React.lazy(() => import("@/registry/default/example/date-picker-demo")),
+      source: "",
+      files: ["registry/default/example/date-picker-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "date-picker-form": {
+      name: "date-picker-form",
+      type: "components:example",
+      registryDependencies: ["button","calendar","form","popover"],
+      component: React.lazy(() => import("@/registry/default/example/date-picker-form")),
+      source: "",
+      files: ["registry/default/example/date-picker-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "date-picker-with-presets": {
+      name: "date-picker-with-presets",
+      type: "components:example",
+      registryDependencies: ["button","calendar","popover","select"],
+      component: React.lazy(() => import("@/registry/default/example/date-picker-with-presets")),
+      source: "",
+      files: ["registry/default/example/date-picker-with-presets.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "date-picker-with-range": {
+      name: "date-picker-with-range",
+      type: "components:example",
+      registryDependencies: ["button","calendar","popover"],
+      component: React.lazy(() => import("@/registry/default/example/date-picker-with-range")),
+      source: "",
+      files: ["registry/default/example/date-picker-with-range.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "dialog-demo": {
+      name: "dialog-demo",
+      type: "components:example",
+      registryDependencies: ["dialog"],
+      component: React.lazy(() => import("@/registry/default/example/dialog-demo")),
+      source: "",
+      files: ["registry/default/example/dialog-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "dialog-close-button": {
+      name: "dialog-close-button",
+      type: "components:example",
+      registryDependencies: ["dialog","button"],
+      component: React.lazy(() => import("@/registry/default/example/dialog-close-button")),
+      source: "",
+      files: ["registry/default/example/dialog-close-button.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "drawer-demo": {
+      name: "drawer-demo",
+      type: "components:example",
+      registryDependencies: ["drawer"],
+      component: React.lazy(() => import("@/registry/default/example/drawer-demo")),
+      source: "",
+      files: ["registry/default/example/drawer-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "drawer-dialog": {
+      name: "drawer-dialog",
+      type: "components:example",
+      registryDependencies: ["drawer","dialog"],
+      component: React.lazy(() => import("@/registry/default/example/drawer-dialog")),
+      source: "",
+      files: ["registry/default/example/drawer-dialog.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "dropdown-menu-demo": {
+      name: "dropdown-menu-demo",
+      type: "components:example",
+      registryDependencies: ["dropdown-menu"],
+      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-demo")),
+      source: "",
+      files: ["registry/default/example/dropdown-menu-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "dropdown-menu-checkboxes": {
+      name: "dropdown-menu-checkboxes",
+      type: "components:example",
+      registryDependencies: ["dropdown-menu","checkbox"],
+      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-checkboxes")),
+      source: "",
+      files: ["registry/default/example/dropdown-menu-checkboxes.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "dropdown-menu-radio-group": {
+      name: "dropdown-menu-radio-group",
+      type: "components:example",
+      registryDependencies: ["dropdown-menu","radio-group"],
+      component: React.lazy(() => import("@/registry/default/example/dropdown-menu-radio-group")),
+      source: "",
+      files: ["registry/default/example/dropdown-menu-radio-group.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "hover-card-demo": {
+      name: "hover-card-demo",
+      type: "components:example",
+      registryDependencies: ["hover-card"],
+      component: React.lazy(() => import("@/registry/default/example/hover-card-demo")),
+      source: "",
+      files: ["registry/default/example/hover-card-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-demo": {
+      name: "input-demo",
+      type: "components:example",
+      registryDependencies: ["input"],
+      component: React.lazy(() => import("@/registry/default/example/input-demo")),
+      source: "",
+      files: ["registry/default/example/input-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-disabled": {
+      name: "input-disabled",
+      type: "components:example",
+      registryDependencies: ["input"],
+      component: React.lazy(() => import("@/registry/default/example/input-disabled")),
+      source: "",
+      files: ["registry/default/example/input-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-file": {
+      name: "input-file",
+      type: "components:example",
+      registryDependencies: ["input"],
+      component: React.lazy(() => import("@/registry/default/example/input-file")),
+      source: "",
+      files: ["registry/default/example/input-file.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-form": {
+      name: "input-form",
+      type: "components:example",
+      registryDependencies: ["input","button","form"],
+      component: React.lazy(() => import("@/registry/default/example/input-form")),
+      source: "",
+      files: ["registry/default/example/input-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-with-button": {
+      name: "input-with-button",
+      type: "components:example",
+      registryDependencies: ["input","button"],
+      component: React.lazy(() => import("@/registry/default/example/input-with-button")),
+      source: "",
+      files: ["registry/default/example/input-with-button.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-with-label": {
+      name: "input-with-label",
+      type: "components:example",
+      registryDependencies: ["input","button","label"],
+      component: React.lazy(() => import("@/registry/default/example/input-with-label")),
+      source: "",
+      files: ["registry/default/example/input-with-label.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-with-text": {
+      name: "input-with-text",
+      type: "components:example",
+      registryDependencies: ["input","button","label"],
+      component: React.lazy(() => import("@/registry/default/example/input-with-text")),
+      source: "",
+      files: ["registry/default/example/input-with-text.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-otp-demo": {
+      name: "input-otp-demo",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-demo")),
+      source: "",
+      files: ["registry/default/example/input-otp-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-otp-pattern": {
+      name: "input-otp-pattern",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-pattern")),
+      source: "",
+      files: ["registry/default/example/input-otp-pattern.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-otp-separator": {
+      name: "input-otp-separator",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-separator")),
+      source: "",
+      files: ["registry/default/example/input-otp-separator.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-otp-controlled": {
+      name: "input-otp-controlled",
+      type: "components:example",
+      registryDependencies: ["input-otp"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-controlled")),
+      source: "",
+      files: ["registry/default/example/input-otp-controlled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "input-otp-form": {
+      name: "input-otp-form",
+      type: "components:example",
+      registryDependencies: ["input-otp","form"],
+      component: React.lazy(() => import("@/registry/default/example/input-otp-form")),
+      source: "",
+      files: ["registry/default/example/input-otp-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "label-demo": {
+      name: "label-demo",
+      type: "components:example",
+      registryDependencies: ["label"],
+      component: React.lazy(() => import("@/registry/default/example/label-demo")),
+      source: "",
+      files: ["registry/default/example/label-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "menubar-demo": {
+      name: "menubar-demo",
+      type: "components:example",
+      registryDependencies: ["menubar"],
+      component: React.lazy(() => import("@/registry/default/example/menubar-demo")),
+      source: "",
+      files: ["registry/default/example/menubar-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "navigation-menu-demo": {
+      name: "navigation-menu-demo",
+      type: "components:example",
+      registryDependencies: ["navigation-menu"],
+      component: React.lazy(() => import("@/registry/default/example/navigation-menu-demo")),
+      source: "",
+      files: ["registry/default/example/navigation-menu-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "popover-demo": {
+      name: "popover-demo",
+      type: "components:example",
+      registryDependencies: ["popover"],
+      component: React.lazy(() => import("@/registry/default/example/popover-demo")),
+      source: "",
+      files: ["registry/default/example/popover-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "progress-demo": {
+      name: "progress-demo",
+      type: "components:example",
+      registryDependencies: ["progress"],
+      component: React.lazy(() => import("@/registry/default/example/progress-demo")),
+      source: "",
+      files: ["registry/default/example/progress-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "radio-group-demo": {
+      name: "radio-group-demo",
+      type: "components:example",
+      registryDependencies: ["radio-group"],
+      component: React.lazy(() => import("@/registry/default/example/radio-group-demo")),
+      source: "",
+      files: ["registry/default/example/radio-group-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "radio-group-form": {
+      name: "radio-group-form",
+      type: "components:example",
+      registryDependencies: ["radio-group","form"],
+      component: React.lazy(() => import("@/registry/default/example/radio-group-form")),
+      source: "",
+      files: ["registry/default/example/radio-group-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "resizable-demo": {
+      name: "resizable-demo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: React.lazy(() => import("@/registry/default/example/resizable-demo")),
+      source: "",
+      files: ["registry/default/example/resizable-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "resizable-demo-with-handle": {
+      name: "resizable-demo-with-handle",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: React.lazy(() => import("@/registry/default/example/resizable-demo-with-handle")),
+      source: "",
+      files: ["registry/default/example/resizable-demo-with-handle.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "resizable-vertical": {
+      name: "resizable-vertical",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: React.lazy(() => import("@/registry/default/example/resizable-vertical")),
+      source: "",
+      files: ["registry/default/example/resizable-vertical.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "resizable-handle": {
+      name: "resizable-handle",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: React.lazy(() => import("@/registry/default/example/resizable-handle")),
+      source: "",
+      files: ["registry/default/example/resizable-handle.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "scroll-area-demo": {
+      name: "scroll-area-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")),
+      source: "",
+      files: ["registry/default/example/scroll-area-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo")),
+      source: "",
+      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "select-demo": {
+      name: "select-demo",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: React.lazy(() => import("@/registry/default/example/select-demo")),
+      source: "",
+      files: ["registry/default/example/select-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "select-scrollable": {
+      name: "select-scrollable",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: React.lazy(() => import("@/registry/default/example/select-scrollable")),
+      source: "",
+      files: ["registry/default/example/select-scrollable.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "select-form": {
+      name: "select-form",
+      type: "components:example",
+      registryDependencies: ["select"],
+      component: React.lazy(() => import("@/registry/default/example/select-form")),
+      source: "",
+      files: ["registry/default/example/select-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "separator-demo": {
+      name: "separator-demo",
+      type: "components:example",
+      registryDependencies: ["separator"],
+      component: React.lazy(() => import("@/registry/default/example/separator-demo")),
+      source: "",
+      files: ["registry/default/example/separator-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sheet-demo": {
+      name: "sheet-demo",
+      type: "components:example",
+      registryDependencies: ["sheet"],
+      component: React.lazy(() => import("@/registry/default/example/sheet-demo")),
+      source: "",
+      files: ["registry/default/example/sheet-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "sheet-side": {
+      name: "sheet-side",
+      type: "components:example",
+      registryDependencies: ["sheet"],
+      component: React.lazy(() => import("@/registry/default/example/sheet-side")),
+      source: "",
+      files: ["registry/default/example/sheet-side.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "skeleton-demo": {
+      name: "skeleton-demo",
+      type: "components:example",
+      registryDependencies: ["skeleton"],
+      component: React.lazy(() => import("@/registry/default/example/skeleton-demo")),
+      source: "",
+      files: ["registry/default/example/skeleton-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "skeleton-card": {
+      name: "skeleton-card",
+      type: "components:example",
+      registryDependencies: ["skeleton"],
+      component: React.lazy(() => import("@/registry/default/example/skeleton-card")),
+      source: "",
+      files: ["registry/default/example/skeleton-card.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "slider-demo": {
+      name: "slider-demo",
+      type: "components:example",
+      registryDependencies: ["slider"],
+      component: React.lazy(() => import("@/registry/default/example/slider-demo")),
+      source: "",
+      files: ["registry/default/example/slider-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "switch-demo": {
+      name: "switch-demo",
+      type: "components:example",
+      registryDependencies: ["switch"],
+      component: React.lazy(() => import("@/registry/default/example/switch-demo")),
+      source: "",
+      files: ["registry/default/example/switch-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "switch-form": {
+      name: "switch-form",
+      type: "components:example",
+      registryDependencies: ["switch","form"],
+      component: React.lazy(() => import("@/registry/default/example/switch-form")),
+      source: "",
+      files: ["registry/default/example/switch-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "table-demo": {
+      name: "table-demo",
+      type: "components:example",
+      registryDependencies: ["table"],
+      component: React.lazy(() => import("@/registry/default/example/table-demo")),
+      source: "",
+      files: ["registry/default/example/table-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "tabs-demo": {
+      name: "tabs-demo",
+      type: "components:example",
+      registryDependencies: ["tabs"],
+      component: React.lazy(() => import("@/registry/default/example/tabs-demo")),
+      source: "",
+      files: ["registry/default/example/tabs-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-demo": {
+      name: "textarea-demo",
+      type: "components:example",
+      registryDependencies: ["textarea"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-demo")),
+      source: "",
+      files: ["registry/default/example/textarea-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-disabled": {
+      name: "textarea-disabled",
+      type: "components:example",
+      registryDependencies: ["textarea"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-disabled")),
+      source: "",
+      files: ["registry/default/example/textarea-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-form": {
+      name: "textarea-form",
+      type: "components:example",
+      registryDependencies: ["textarea","form"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-form")),
+      source: "",
+      files: ["registry/default/example/textarea-form.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-with-button": {
+      name: "textarea-with-button",
+      type: "components:example",
+      registryDependencies: ["textarea","button"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-with-button")),
+      source: "",
+      files: ["registry/default/example/textarea-with-button.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-with-label": {
+      name: "textarea-with-label",
+      type: "components:example",
+      registryDependencies: ["textarea","label"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-with-label")),
+      source: "",
+      files: ["registry/default/example/textarea-with-label.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "textarea-with-text": {
+      name: "textarea-with-text",
+      type: "components:example",
+      registryDependencies: ["textarea","label"],
+      component: React.lazy(() => import("@/registry/default/example/textarea-with-text")),
+      source: "",
+      files: ["registry/default/example/textarea-with-text.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toast-demo": {
+      name: "toast-demo",
+      type: "components:example",
+      registryDependencies: ["toast"],
+      component: React.lazy(() => import("@/registry/default/example/toast-demo")),
+      source: "",
+      files: ["registry/default/example/toast-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toast-destructive": {
+      name: "toast-destructive",
+      type: "components:example",
+      registryDependencies: ["toast"],
+      component: React.lazy(() => import("@/registry/default/example/toast-destructive")),
+      source: "",
+      files: ["registry/default/example/toast-destructive.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toast-simple": {
+      name: "toast-simple",
+      type: "components:example",
+      registryDependencies: ["toast"],
+      component: React.lazy(() => import("@/registry/default/example/toast-simple")),
+      source: "",
+      files: ["registry/default/example/toast-simple.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toast-with-action": {
+      name: "toast-with-action",
+      type: "components:example",
+      registryDependencies: ["toast"],
+      component: React.lazy(() => import("@/registry/default/example/toast-with-action")),
+      source: "",
+      files: ["registry/default/example/toast-with-action.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toast-with-title": {
+      name: "toast-with-title",
+      type: "components:example",
+      registryDependencies: ["toast"],
+      component: React.lazy(() => import("@/registry/default/example/toast-with-title")),
+      source: "",
+      files: ["registry/default/example/toast-with-title.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-demo": {
+      name: "toggle-group-demo",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-demo")),
+      source: "",
+      files: ["registry/default/example/toggle-group-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-disabled": {
+      name: "toggle-group-disabled",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-disabled")),
+      source: "",
+      files: ["registry/default/example/toggle-group-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-lg": {
+      name: "toggle-group-lg",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-lg")),
+      source: "",
+      files: ["registry/default/example/toggle-group-lg.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-outline": {
+      name: "toggle-group-outline",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-outline")),
+      source: "",
+      files: ["registry/default/example/toggle-group-outline.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-sm": {
+      name: "toggle-group-sm",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-sm")),
+      source: "",
+      files: ["registry/default/example/toggle-group-sm.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-group-single": {
+      name: "toggle-group-single",
+      type: "components:example",
+      registryDependencies: ["toggle-group"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-group-single")),
+      source: "",
+      files: ["registry/default/example/toggle-group-single.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-demo": {
+      name: "toggle-demo",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-demo")),
+      source: "",
+      files: ["registry/default/example/toggle-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-disabled": {
+      name: "toggle-disabled",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-disabled")),
+      source: "",
+      files: ["registry/default/example/toggle-disabled.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-lg": {
+      name: "toggle-lg",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-lg")),
+      source: "",
+      files: ["registry/default/example/toggle-lg.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-outline": {
+      name: "toggle-outline",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-outline")),
+      source: "",
+      files: ["registry/default/example/toggle-outline.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-sm": {
+      name: "toggle-sm",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-sm")),
+      source: "",
+      files: ["registry/default/example/toggle-sm.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "toggle-with-text": {
+      name: "toggle-with-text",
+      type: "components:example",
+      registryDependencies: ["toggle"],
+      component: React.lazy(() => import("@/registry/default/example/toggle-with-text")),
+      source: "",
+      files: ["registry/default/example/toggle-with-text.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "tooltip-demo": {
+      name: "tooltip-demo",
+      type: "components:example",
+      registryDependencies: ["tooltip"],
+      component: React.lazy(() => import("@/registry/default/example/tooltip-demo")),
+      source: "",
+      files: ["registry/default/example/tooltip-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-blockquote": {
+      name: "typography-blockquote",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-blockquote")),
+      source: "",
+      files: ["registry/default/example/typography-blockquote.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-demo": {
+      name: "typography-demo",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-demo")),
+      source: "",
+      files: ["registry/default/example/typography-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-h1": {
+      name: "typography-h1",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-h1")),
+      source: "",
+      files: ["registry/default/example/typography-h1.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-h2": {
+      name: "typography-h2",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-h2")),
+      source: "",
+      files: ["registry/default/example/typography-h2.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-h3": {
+      name: "typography-h3",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-h3")),
+      source: "",
+      files: ["registry/default/example/typography-h3.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-h4": {
+      name: "typography-h4",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-h4")),
+      source: "",
+      files: ["registry/default/example/typography-h4.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-inline-code": {
+      name: "typography-inline-code",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-inline-code")),
+      source: "",
+      files: ["registry/default/example/typography-inline-code.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-large": {
+      name: "typography-large",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-large")),
+      source: "",
+      files: ["registry/default/example/typography-large.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-lead": {
+      name: "typography-lead",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-lead")),
+      source: "",
+      files: ["registry/default/example/typography-lead.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-list": {
+      name: "typography-list",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-list")),
+      source: "",
+      files: ["registry/default/example/typography-list.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-muted": {
+      name: "typography-muted",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-muted")),
+      source: "",
+      files: ["registry/default/example/typography-muted.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-p": {
+      name: "typography-p",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-p")),
+      source: "",
+      files: ["registry/default/example/typography-p.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-small": {
+      name: "typography-small",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-small")),
+      source: "",
+      files: ["registry/default/example/typography-small.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "typography-table": {
+      name: "typography-table",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/typography-table")),
+      source: "",
+      files: ["registry/default/example/typography-table.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mode-toggle": {
+      name: "mode-toggle",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/mode-toggle")),
+      source: "",
+      files: ["registry/default/example/mode-toggle.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-demo": {
+      name: "text-confirm-dialog-demo",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-demo")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-info-alert": {
+      name: "text-confirm-dialog-with-info-alert",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-info-alert")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-info-alert.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-warning-alert": {
+      name: "text-confirm-dialog-with-warning-alert",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-warning-alert")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-warning-alert.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-destructive-alert": {
+      name: "text-confirm-dialog-with-destructive-alert",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-destructive-alert")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-destructive-alert.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-size": {
+      name: "text-confirm-dialog-with-size",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-size")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-size.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-children": {
+      name: "text-confirm-dialog-with-children",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-children")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-children.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "text-confirm-dialog-with-cancel-button": {
+      name: "text-confirm-dialog-with-cancel-button",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/text-confirm-dialog-with-cancel-button")),
+      source: "",
+      files: ["registry/default/example/text-confirm-dialog-with-cancel-button.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-demo": {
+      name: "form-item-layout-demo",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-demo")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-with-select": {
+      name: "form-item-layout-with-select",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-with-select")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-with-select.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-with-horizontal": {
+      name: "form-item-layout-with-horizontal",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-with-horizontal")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-with-horizontal.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-with-switch": {
+      name: "form-item-layout-with-switch",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-with-switch")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-with-switch.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-with-checkbox": {
+      name: "form-item-layout-with-checkbox",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-with-checkbox")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-with-switch.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "form-item-layout-with-checkbox-list": {
+      name: "form-item-layout-with-checkbox-list",
+      type: "components:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/form-item-layout-with-checkbox-list")),
+      source: "",
+      files: ["registry/default/example/form-item-layout-with-switch.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "color-usage-surface-www-and-docs": {
+      name: "color-usage-surface-www-and-docs",
+      type: "docs:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/color-usage-surface-www-and-docs")),
+      source: "",
+      files: ["registry/default/example/color-usage-surface-www-and-docs.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "color-usage-surface-studio": {
+      name: "color-usage-surface-studio",
+      type: "docs:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/color-usage-surface-studio")),
+      source: "",
+      files: ["registry/default/example/color-usage-surface-studio.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "color-usage-surface-studio-frame": {
+      name: "color-usage-surface-studio-frame",
+      type: "docs:example",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/color-usage-surface-studio-frame")),
+      source: "",
+      files: ["registry/default/example/color-usage-surface-studio-frame.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+  },
+}
diff --git a/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
new file mode 100644
index 0000000000..efa2f74912
--- /dev/null
+++ b/apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
@@ -0,0 +1,119 @@
+import { Mdx } from '@/components/mdx-components'
+import { DocsPager } from '@/components/pager'
+import { SourcePanel } from '@/components/source-panel'
+import { DashboardTableOfContents } from '@/components/toc'
+import { siteConfig } from '@/config/site'
+import { getTableOfContents } from '@/lib/toc'
+import { absoluteUrl, cn } from '@/lib/utils'
+import '@/styles/code-block-variables.css'
+import '@/styles/mdx.css'
+import { allDocs } from 'contentlayer/generated'
+import { ChevronRight } from 'lucide-react'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import Balancer from 'react-wrap-balancer'
+import { ScrollArea, Separator } from 'ui'
+
+interface DocPageProps {
+  params: {
+    slug: string[]
+  }
+}
+
+async function getDocFromParams({ params }: DocPageProps) {
+  const slug = params.slug?.join('/') || ''
+  const doc = allDocs.find((doc) => doc.slugAsParams === slug)
+
+  if (!doc) {
+    return null
+  }
+
+  return doc
+}
+
+export async function generateMetadata({ params }: DocPageProps): Promise<Metadata> {
+  const doc = await getDocFromParams({ params })
+
+  if (!doc) {
+    return {}
+  }
+
+  return {
+    title: doc.title,
+    description: doc.description,
+    openGraph: {
+      title: doc.title,
+      description: doc.description,
+      type: 'article',
+      url: absoluteUrl(doc.slug),
+      images: [
+        {
+          url: siteConfig.ogImage,
+          width: 1200,
+          height: 630,
+          alt: siteConfig.name,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: doc.title,
+      description: doc.description,
+      images: [siteConfig.ogImage],
+      creator: '@shadcn',
+    },
+  }
+}
+
+export async function generateStaticParams(): Promise<DocPageProps['params'][]> {
+  return allDocs.map((doc) => ({
+    slug: doc.slugAsParams.split('/'),
+  }))
+}
+
+export default async function DocPage({ params }: DocPageProps) {
+  const doc = await getDocFromParams({ params })
+
+  if (!doc) {
+    notFound()
+  }
+
+  const toc = await getTableOfContents(doc.body.raw)
+
+  return (
+    <main className="relative lg:gap-10 xl:grid xl:grid-cols-[1fr_200px] pr-6 lg:py-8">
+      <div className="mx-auto w-full min-w-0 max-w-4xl">
+        <div className="mb-4 flex items-center space-x-1 text-sm text-foreground-muted">
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
+          <ChevronRight className="h-4 w-4 text-foreground-muted" />
+          <div className="text-foreground-lighter">{doc.title}</div>
+        </div>
+        <div className="space-y-2 mb-5">
+          <h1 className={cn('scroll-m-20 text-4xl tracking-tight')}>{doc.title}</h1>
+          {doc.description && (
+            <p className="text-lg text-foreground-light">
+              <Balancer>{doc.description}</Balancer>
+            </p>
+          )}
+        </div>
+        <Separator className="mb-6" />
+        <SourcePanel doc={doc} />
+        <div className="pb-12">
+          <Mdx code={doc.body.code} />
+        </div>
+        <DocsPager doc={doc} />
+      </div>
+      {doc.toc && (
+        <div className="hidden text-sm xl:block">
+          <div className="sticky top-16 -mt-10 pt-4">
+            <ScrollArea className="pb-10">
+              <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] py-12">
+                <DashboardTableOfContents toc={toc} />
+              </div>
+            </ScrollArea>
+          </div>
+        </div>
+      )}
+    </main>
+  )
+}
diff --git a/apps/design-system/app/(app)/layout.tsx b/apps/design-system/app/(app)/layout.tsx
new file mode 100644
index 0000000000..49b81a77a8
--- /dev/null
+++ b/apps/design-system/app/(app)/layout.tsx
@@ -0,0 +1,35 @@
+import SideNavigation from '@/components/side-navigation'
+import { SiteFooter } from '@/components/site-footer'
+// import ThemeSettings from '@/components/theme-settings'
+import TopNavigation from '@/components/top-navigation'
+import { ScrollArea } from 'ui'
+
+interface AppLayoutProps {
+  children: React.ReactNode
+}
+
+export default function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <>
+      <TopNavigation />
+      {/* main container */}
+      <div className="">
+        {/* main content */}
+        <main className="flex-1 max-w-site mx-auto w-full border-l border-r">
+          {/* {children} */}
+          <div className="border-b">
+            <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+              <aside className="fixed top-10 z-30 hidden h-[calc(100vh-3rem)] w-full shrink-0 md:sticky md:block border-r">
+                <ScrollArea className="h-full py-6 lg:py-8">
+                  <SideNavigation />
+                </ScrollArea>
+              </aside>
+              {children}
+            </div>
+          </div>
+        </main>
+      </div>
+      <SiteFooter />
+    </>
+  )
+}
diff --git a/apps/design-system/app/(app)/page.tsx b/apps/design-system/app/(app)/page.tsx
new file mode 100644
index 0000000000..7d22b66af8
--- /dev/null
+++ b/apps/design-system/app/(app)/page.tsx
@@ -0,0 +1,113 @@
+import { DesignSystemMarks } from '@/components/design-system-marks'
+import { HomepageSvgHandler } from '@/components/homepage-svg-handler'
+import Image from 'next/image'
+import { Separator } from 'ui'
+
+export default function Home() {
+  return (
+    <main className="relative lg:gap-10 pr-6 lg:py-20">
+      <div className="mx-auto w-full min-w-0 max-w-6xl flex flex-col gap-20">
+        <div className="flex flex-col gap-8 justify-start">
+          {/* <div>
+            <DesignSystemMarks />
+          </div> */}
+          <div>
+            <h1 className="text-4xl text-foreground mb-3">Supabase Design System</h1>
+            <h2 className="text-xl text-foreground-light font-light">
+              Design resources for building consistent user experiences
+            </h2>
+          </div>
+        </div>
+
+        {/* Homepage items */}
+
+        <div className="grid grid-cols-2 gap-10">
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <HomepageSvgHandler name="atoms-illustration" />
+            <div>
+              <h3 className="font-medium text-foreground">Atom components</h3>
+              <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
+            </div>
+          </div>
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <HomepageSvgHandler name="fragments-illustration" />
+            <div>
+              <h3 className="font-medium text-foreground">Fragment components</h3>
+              <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+            </div>
+          </div>
+
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <div className="flex flex-col gap-1">
+              <div className="flex flex-row gap-0.5">
+                <div className="w-3 h-16 rounded border bg-foreground"></div>
+                <div className="w-3 h-16 rounded border bg-foreground-light"></div>
+                <div className="w-3 h-16 rounded border bg-foreground-lighter"></div>
+                <div className="w-3 h-16 rounded border bg-foreground-muted"></div>
+                <div className="w-3 h-16 rounded border"></div>
+
+                <div className="w-3 h-16 rounded border bg"></div>
+                <div className="w-3 h-16 rounded border bg-200"></div>
+                <div className="w-3 h-16 rounded border bg-surface-75"></div>
+                <div className="w-3 h-16 rounded border bg-surface-100"></div>
+                <div className="w-3 h-16 rounded border bg-surface-200"></div>
+                <div className="w-3 h-16 rounded border bg-surface-300"></div>
+                <div className="w-3 h-16 rounded border"></div>
+
+                <div className="w-3 h-16 rounded border bg-brand-200"></div>
+                <div className="w-3 h-16 rounded border bg-brand-300"></div>
+                <div className="w-3 h-16 rounded border bg-brand-400"></div>
+                <div className="w-3 h-16 rounded border bg-brand-500"></div>
+                <div className="w-3 h-16 rounded border bg-brand"></div>
+                <div className="w-3 h-16 rounded border bg-brand-600"></div>
+                <div className="w-3 h-16 rounded border"></div>
+
+                <div className="w-3 h-16 rounded border bg-warning-200"></div>
+                <div className="w-3 h-16 rounded border bg-warning-300"></div>
+                <div className="w-3 h-16 rounded border bg-warning-400"></div>
+                <div className="w-3 h-16 rounded border bg-warning-500"></div>
+                <div className="w-3 h-16 rounded border bg-warning"></div>
+                <div className="w-3 h-16 rounded border bg-warning-600"></div>
+                <div className="w-3 h-16 rounded border"></div>
+
+                <div className="w-3 h-16 rounded border bg-destructive-200"></div>
+                <div className="w-3 h-16 rounded border bg-destructive-300"></div>
+                <div className="w-3 h-16 rounded border bg-destructive-400"></div>
+                <div className="w-3 h-16 rounded border bg-destructive-500"></div>
+                <div className="w-3 h-16 rounded border bg-destructive"></div>
+                <div className="w-3 h-16 rounded border bg-destructive-600"></div>
+                <div className="w-3 h-16 rounded border"></div>
+              </div>
+            </div>
+            <div>
+              <h3 className="font-medium text-foreground">Colors</h3>
+              <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
+            </div>
+          </div>
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <HomepageSvgHandler name="fragments-illustration" />
+            <div>
+              <h3 className="font-medium text-foreground">Theming</h3>
+              <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+            </div>
+          </div>
+
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <HomepageSvgHandler name="atoms-illustration" />
+            <div>
+              <h3 className="font-medium text-foreground">Background / Surfaces</h3>
+              <p className="text-sm text-foreground-light">Building blocks of User interfaces</p>
+            </div>
+          </div>
+          <div className="px-10 py-8 min-h-[18rem] flex flex-col justify-between bg-surface-75/50 hover:bg-overlay/50 hover:border-foreground-muted cursor-pointer transition-all border rounded-md">
+            <HomepageSvgHandler name="fragments-illustration" />
+            <div>
+              <h3 className="font-medium text-foreground">Icons</h3>
+              <p className="text-sm text-foreground-light">Components assembled from Atoms</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/design-system/app/Providers.tsx b/apps/design-system/app/Providers.tsx
new file mode 100644
index 0000000000..be3bdf7861
--- /dev/null
+++ b/apps/design-system/app/Providers.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import * as React from 'react'
+import { Provider as JotaiProvider } from 'jotai'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { ThemeProviderProps } from 'next-themes/dist/types'
+
+import { TooltipProvider_Shadcn_ } from 'ui'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return (
+    <JotaiProvider>
+      <NextThemesProvider {...props}>
+        <TooltipProvider_Shadcn_ delayDuration={0}>{children}</TooltipProvider_Shadcn_>
+      </NextThemesProvider>
+    </JotaiProvider>
+  )
+}
diff --git a/apps/design-system/app/favicon.ico b/apps/design-system/app/favicon.ico
new file mode 100644
index 0000000000..718d6fea48
Binary files /dev/null and b/apps/design-system/app/favicon.ico differ
diff --git a/apps/design-system/app/globals.css b/apps/design-system/app/globals.css
new file mode 100644
index 0000000000..f7f07cd643
--- /dev/null
+++ b/apps/design-system/app/globals.css
@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* :root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+} */
+
+body {
+  /* color: rgb(var(--foreground-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
+    rgb(var(--background-start-rgb)); */
+}
+/* 
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+} */
diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx
new file mode 100644
index 0000000000..7e8ff99a5a
--- /dev/null
+++ b/apps/design-system/app/layout.tsx
@@ -0,0 +1,38 @@
+import '@/styles/globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import { ThemeProvider } from './Providers'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+interface RootLayoutProps {
+  children: React.ReactNode
+}
+
+export default async function Layout({ children }: RootLayoutProps) {
+  // console.log('Root Layout mounted or re-rendered')
+
+  return (
+    <html
+      // className="dark"
+      lang="en"
+      // data-theme="dark"
+      // style={{ colorScheme: 'dark' }}
+      suppressHydrationWarning
+    >
+      <head />
+      <body className={inter.className}>
+        <ThemeProvider themes={['dark', 'light', 'deep-dark']} defaultTheme="system" enableSystem>
+          <div vaul-drawer-wrapper="">
+            <div className="relative flex min-h-screen flex-col bg-background">{children}</div>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/apps/design-system/components/callout.tsx b/apps/design-system/components/callout.tsx
new file mode 100644
index 0000000000..63ed3afc9b
--- /dev/null
+++ b/apps/design-system/components/callout.tsx
@@ -0,0 +1,17 @@
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+
+interface CalloutProps {
+  icon?: string
+  title?: string
+  children?: React.ReactNode
+}
+
+export function Callout({ title, children, icon, ...props }: CalloutProps) {
+  return (
+    <Alert_Shadcn_ {...props}>
+      {icon && <span className="mr-4 text-2xl">{icon}</span>}
+      {title && <AlertTitle_Shadcn_>{title}</AlertTitle_Shadcn_>}
+      <AlertDescription_Shadcn_>{children}</AlertDescription_Shadcn_>
+    </Alert_Shadcn_>
+  )
+}
diff --git a/apps/design-system/components/class-label.tsx b/apps/design-system/components/class-label.tsx
new file mode 100644
index 0000000000..6575c2f437
--- /dev/null
+++ b/apps/design-system/components/class-label.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+
+const ClassLabel = React.forwardRef<HTMLSpanElement, { children: React.ReactNode }>(
+  ({ children }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground"
+      >
+        {children}
+      </span>
+    )
+  }
+)
+
+ClassLabel.displayName = 'ClassLabel'
+
+export { ClassLabel }
diff --git a/apps/design-system/components/click-counter.tsx b/apps/design-system/components/click-counter.tsx
new file mode 100644
index 0000000000..df68cb14cd
--- /dev/null
+++ b/apps/design-system/components/click-counter.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useState } from 'react'
+
+export function ClickCounter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <button
+      onClick={() => setCount(count + 1)}
+      className="whitespace-nowrap rounded-lg bg-gray-700 px-3 py-1 text-sm font-medium tabular-nums text-gray-100 hover:bg-gray-500 hover:text-white"
+    >
+      {count} Clicks
+    </button>
+  )
+}
diff --git a/apps/design-system/components/code-block-wrapper.tsx b/apps/design-system/components/code-block-wrapper.tsx
new file mode 100644
index 0000000000..c347400671
--- /dev/null
+++ b/apps/design-system/components/code-block-wrapper.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from 'ui'
+import { Button } from 'ui'
+import {
+  Collapsible_Shadcn_ as Collapsible,
+  CollapsibleContent_Shadcn_ as CollapsibleContent,
+  CollapsibleTrigger_Shadcn_ as CollapsibleTrigger,
+} from 'ui'
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  expandButtonTitle?: string
+}
+
+export function CodeBlockWrapper({
+  expandButtonTitle = 'View Code',
+  className,
+  children,
+  ...props
+}: CodeBlockProps) {
+  const [isOpened, setIsOpened] = React.useState(false)
+
+  return (
+    <Collapsible open={isOpened} onOpenChange={setIsOpened}>
+      <div className={cn('relative overflow-hidden', className)} {...props}>
+        <CollapsibleContent forceMount className={cn('overflow-hidden', !isOpened && 'max-h-32')}>
+          <div
+            className={cn(
+              '[&_pre]:my-0 [&_pre]:max-h-[650px] [&_pre]:pb-[100px]',
+              !isOpened ? '[&_pre]:overflow-hidden' : '[&_pre]:overflow-auto]'
+            )}
+          >
+            {children}
+          </div>
+        </CollapsibleContent>
+        <div
+          className={cn(
+            'absolute flex items-center justify-center bg-gradient-to-b from-zinc-700/30 to-zinc-950/90 p-2',
+            isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0'
+          )}
+        >
+          <CollapsibleTrigger asChild>
+            <Button type="secondary" className="h-8 text-xs">
+              {isOpened ? 'Collapse' : expandButtonTitle}
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+      </div>
+    </Collapsible>
+  )
+}
diff --git a/apps/design-system/components/code-fragment.tsx b/apps/design-system/components/code-fragment.tsx
new file mode 100644
index 0000000000..afe821331d
--- /dev/null
+++ b/apps/design-system/components/code-fragment.tsx
@@ -0,0 +1,107 @@
+'use client'
+
+import { Index } from '@/__registry__'
+import * as React from 'react'
+
+import { useConfig } from '@/hooks/use-config'
+import { cn } from 'ui'
+
+import { styles } from '@/registry/styles'
+
+interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: 'center' | 'start' | 'end'
+  peekCode?: boolean
+  showGrid?: boolean
+  showDottedGrid?: boolean
+  wide?: boolean
+}
+
+export function CodeFragment({
+  name,
+  children,
+  className,
+  extractClassname,
+  extractedClassNames,
+  align = 'center',
+  peekCode = false,
+  showGrid = false,
+  showDottedGrid = true,
+  wide = false,
+  ...props
+}: ComponentPreviewProps) {
+  const [config] = useConfig()
+  const index = styles.findIndex((style) => style.name === config.style)
+
+  const Codes = React.Children.toArray(children) as React.ReactElement[]
+  const Code = Codes[index]
+
+  const [expand, setExpandState] = React.useState(false)
+
+  const Preview = React.useMemo(() => {
+    // console.log('Index', Index)
+    // console.log('name', name)
+    // console.log('config.style', config.style)
+
+    const Component = Index[config.style][name]?.component
+    // const Component = Index[name]?.component
+
+    if (!Component) {
+      return (
+        <p className="text-sm text-muted-foreground">
+          Code fragment{' '}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            {name}
+          </code>{' '}
+          not found in registry.
+        </p>
+      )
+    }
+
+    return <Component />
+  }, [name, config.style])
+
+  const ComponentPreview = React.useMemo(() => {
+    return (
+      <>
+        <div
+          className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
+            'items-center': align === 'center',
+            'items-start': align === 'start',
+            'items-end': align === 'end',
+          })}
+        >
+          <React.Suspense
+            fallback={
+              <div className="flex items-center text-sm text-muted-foreground">Loading...</div>
+            }
+          >
+            {Preview}
+          </React.Suspense>
+        </div>
+      </>
+    )
+  }, [Preview, align])
+
+  const wideClasses = wide ? '2xl:-ml-12 2xl:-mr-12' : ''
+
+  return (
+    <div className={cn('mt-4 mb-12', wideClasses)}>
+      <div
+        className={cn(
+          'relative rounded-md border-t border-l border-r border-b bg-studio overflow-hidden'
+        )}
+      >
+        {showGrid && (
+          <div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+        )}
+        {showDottedGrid && (
+          <div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
+        )}
+        <div className="z-10 relative">{ComponentPreview}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/components/colors.tsx b/apps/design-system/components/colors.tsx
new file mode 100644
index 0000000000..e1d63267d0
--- /dev/null
+++ b/apps/design-system/components/colors.tsx
@@ -0,0 +1,155 @@
+import { cn } from 'ui/src/lib/utils/cn'
+// import { Card } from '@ui/components/shadcn/ui/card'
+import color from 'ui/src/lib/tailwind-demo-classes'
+import { Grid, GridItem } from './grid'
+
+const Colors = ({
+  definition,
+}: {
+  definition: 'background' | 'border' | 'text' | 'colors' | 'palletes'
+}) => {
+  const Example = ({ x }: { x: string }) => {
+    switch (definition) {
+      case 'background':
+        return (
+          <div className={cn(x, 'relative w-full h-12 border border-overlay rounded-full')}></div>
+        )
+        break
+
+      case 'border':
+        return <div className={cn(x, 'relative w-full h-12 border-4 rounded-full')}></div>
+        break
+
+      case 'text':
+        return (
+          <span className={cn(x, 'relative w-full h-12 flex items-center justify-center')}>
+            Postgres
+          </span>
+        )
+        break
+
+      case 'colors':
+        return (
+          <div className={cn(x, 'relative w-full h-12 border border-overlay rounded-full')}></div>
+        )
+        break
+
+      case 'palletes':
+        return (
+          <div className={cn(x, 'relative w-full h-12 border border-overlay rounded-full')}></div>
+        )
+        break
+
+      default:
+        break
+    }
+  }
+
+  return (
+    <>
+      <Grid>
+        {color[definition].map((x: string, i) => {
+          return (
+            <GridItem
+              key={i}
+              className={cn(x.includes('contrast') && 'bg-foreground hover:bg-foreground-light')}
+            >
+              <Example x={x} />
+              <span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground">
+                {x}
+              </span>
+            </GridItem>
+          )
+        })}
+      </Grid>
+    </>
+  )
+}
+
+{
+  /* <div className="flex flex-col gap-12 py-20">
+        <div className="flex flex-row gap-12">
+          <div>
+            <h5 className="mb-3">Background</h5>
+            <div className="flex flex-col gap-3">
+              {color.background.map((x: string, i) => {
+                return (
+                  <div className="flex gap-3 items-center" key={i}>
+                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
+                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
+                      {x}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <div>
+            <h5 className="mb-3">Border</h5>
+            <div className="flex flex-col gap-3">
+              {color.border.map((x, i) => {
+                return (
+                  <div className="flex gap-3 items-center" key={i}>
+                    <div className={cn(x, 'relative w-12 h-12 border-4')}></div>
+                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
+                      {x}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <div>
+            <h5 className="mb-3">texts</h5>
+            <div className="flex flex-col gap-3">
+              {color.text.map((x, i) => {
+                return (
+                  <div className="flex gap-3 items-center" key={i}>
+                    <span className={cn(x, 'relative w-12 h-12 flex items-center justify-center')}>
+                      ###
+                    </span>
+                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
+                      {x}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-row gap-12">
+          <div>
+            <h5 className="mb-3">Colors</h5>
+            <div className="flex flex-col gap-3">
+              {color.colors.map((x: string, i) => {
+                return (
+                  <div className="flex gap-3 items-center" key={i}>
+                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
+                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
+                      {x}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+          <div>
+            <h5 className="mb-3">Palletes</h5>
+            <div className="flex flex-col gap-3">
+              {color.palletes.map((x, i) => {
+                return (
+                  <div className="flex gap-3 items-center" key={i}>
+                    <div className={cn(x, 'relative w-12 h-12 border border-overlay shadow')}></div>
+                    <div className="font-mono text-sm bg-surface-100 px-2 py-0.5 rounded-full">
+                      {x}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </div> */
+}
+
+export { Colors }
diff --git a/apps/design-system/components/command-menu.tsx b/apps/design-system/components/command-menu.tsx
new file mode 100644
index 0000000000..bc6aa3c9fa
--- /dev/null
+++ b/apps/design-system/components/command-menu.tsx
@@ -0,0 +1,132 @@
+'use client'
+
+import * as React from 'react'
+import { useRouter } from 'next/navigation'
+import { DialogProps } from '@radix-ui/react-alert-dialog'
+import { CircleIcon, FileIcon, LaptopIcon, MoonIcon, SunIcon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+  CommandDialog,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  CommandSeparator_Shadcn_,
+} from 'ui'
+
+export function CommandMenu({ ...props }: DialogProps) {
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const { setTheme } = useTheme()
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  const runCommand = React.useCallback((command: () => unknown) => {
+    setOpen(false)
+    command()
+  }, [])
+
+  return (
+    <>
+      <Button
+        type="outline"
+        className={cn(
+          `relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-foreground-muted shadow-none sm:pr-12 md:w-40 lg:w-64
+            hover:border-foreground-muted hover:bg-surface-100 hover:text-foreground-lighter
+          `
+        )}
+        onClick={() => setOpen(true)}
+        {...props}
+      >
+        <span className="hidden lg:inline-flex">Search Design System...</span>
+        <span className="inline-flex lg:hidden">Search...</span>
+        <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-surface-200 px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex text-foreground-light">
+          <span className="text-sm">⌘</span>K
+        </kbd>
+      </Button>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
+        <CommandList_Shadcn_>
+          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+          {/* <CommandGroup_Shadcn_ heading="Links">
+            {docsConfig.mainNav
+              .filter((navitem) => !navitem.external)
+              .map((navItem) => (
+                <CommandItem_Shadcn_
+                  key={navItem.href}
+                  value={navItem.title}
+                  onSelect={() => {
+                    runCommand(() => router.push(navItem.href as string))
+                  }}
+                >
+                  <FileIcon className="mr-2 h-4 w-4" strokeWidth={1} />
+                  {navItem.title}
+                </CommandItem_Shadcn_>
+              ))}
+          </CommandGroup_Shadcn_> */}
+          {docsConfig.sidebarNav.map((group) => (
+            <CommandGroup_Shadcn_ key={group.title} heading={group.title}>
+              {group.items.map((navItem) => (
+                <CommandItem_Shadcn_
+                  key={navItem.href}
+                  value={navItem.title}
+                  onSelect={() => {
+                    runCommand(() => router.push(navItem.href as string))
+                  }}
+                >
+                  <div className="mr-2 flex h-4 w-4 items-center justify-center">
+                    <CircleIcon className="h-3 w-3" strokeWidth={1} />
+                  </div>
+                  {navItem.title}
+                </CommandItem_Shadcn_>
+              ))}
+            </CommandGroup_Shadcn_>
+          ))}
+          <CommandSeparator_Shadcn_ />
+          <CommandGroup_Shadcn_ heading="Theme">
+            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('light'))}>
+              <SunIcon className="mr-2 h-4 w-4" strokeWidth={1} />
+              Light
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('dark'))}>
+              <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
+              Dark
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('deep-dark'))}>
+              <MoonIcon className="mr-2 h-4 w-4" strokeWidth={1} />
+              Deep Dark
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_ onSelect={() => runCommand(() => setTheme('system'))}>
+              <LaptopIcon className="mr-2 h-4 w-4" strokeWidth={1} />
+              System
+            </CommandItem_Shadcn_>
+          </CommandGroup_Shadcn_>
+        </CommandList_Shadcn_>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/design-system/components/component-example.tsx b/apps/design-system/components/component-example.tsx
new file mode 100644
index 0000000000..4a4ae25ff3
--- /dev/null
+++ b/apps/design-system/components/component-example.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from 'ui'
+import {
+  // CopyButton,
+  CopyWithClassNames,
+} from '@/components/copy-button'
+import {
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+
+interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: 'center' | 'start' | 'end'
+  src?: string
+}
+
+export function ComponentExample({
+  children,
+  className,
+  extractClassname,
+  extractedClassNames,
+  align = 'center',
+  src: _,
+  ...props
+}: ComponentExampleProps) {
+  const [Example, Code, ...Children] = React.Children.toArray(children) as React.ReactElement[]
+
+  const codeString = React.useMemo(() => {
+    if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') {
+      const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement[]
+      return Button?.props?.value || Button?.props?.__rawString__ || null
+    }
+  }, [Code])
+
+  return (
+    <div className={cn('group relative my-4 flex flex-col gap-2', className)} {...props}>
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
+        <div className="flex items-center justify-between pb-3">
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+            <TabsTrigger
+              value="preview"
+              className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Preview
+            </TabsTrigger>
+            <TabsTrigger
+              value="code"
+              className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Code
+            </TabsTrigger>
+          </TabsList>
+          {
+            extractedClassNames ? (
+              <CopyWithClassNames
+                value={codeString}
+                classNames={extractedClassNames}
+                className="absolute right-4 top-20"
+              />
+            ) : undefined
+            // codeString && <CopyButton value={codeString} className="absolute right-4 top-20" />
+          }
+        </div>
+        <TabsContent value="preview" className="rounded-md border">
+          <div
+            className={cn('flex min-h-[350px] justify-center p-10', {
+              'items-center': align === 'center',
+              'items-start': align === 'start',
+              'items-end': align === 'end',
+            })}
+          >
+            {Example}
+          </div>
+        </TabsContent>
+        <TabsContent value="code">
+          <div className="flex flex-col space-y-4">
+            <div className="w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+              {Code}
+            </div>
+            {Children?.length ? (
+              <div className="rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+                {Children}
+              </div>
+            ) : null}
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/design-system/components/component-preview.tsx b/apps/design-system/components/component-preview.tsx
new file mode 100644
index 0000000000..744f02e076
--- /dev/null
+++ b/apps/design-system/components/component-preview.tsx
@@ -0,0 +1,260 @@
+'use client'
+
+import * as React from 'react'
+import { Index } from '@/__registry__'
+
+import {
+  Button,
+  CollapsibleContent_Shadcn_,
+  CollapsibleTrigger_Shadcn_,
+  Collapsible_Shadcn_,
+  cn,
+} from 'ui'
+import { useConfig } from '@/hooks/use-config'
+import {
+  // CopyButton,
+  CopyWithClassNames,
+} from '@/components/copy-button'
+// import { Icons } from '@/components/icons'
+// import { StyleSwitcher } from '@/components/style-switcher'
+// import { ThemeWrapper } from '@/components/theme-wrapper'
+import {
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+
+// import { LoaderCircle } from 'lucide-react'
+
+import { styles } from '@/registry/styles'
+import { ChevronRight, Expand } from 'lucide-react'
+
+interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string
+  extractClassname?: boolean
+  extractedClassNames?: string
+  align?: 'center' | 'start' | 'end'
+  peekCode?: boolean
+  showGrid?: boolean
+  showDottedGrid?: boolean
+  wide?: boolean
+}
+
+export function ComponentPreview({
+  name,
+  children,
+  className,
+  extractClassname,
+  extractedClassNames,
+  align = 'center',
+  peekCode = false,
+  showGrid = false,
+  showDottedGrid = true,
+  wide = false,
+  ...props
+}: ComponentPreviewProps) {
+  const [config] = useConfig()
+  const index = styles.findIndex((style) => style.name === config.style)
+
+  const Codes = React.Children.toArray(children) as React.ReactElement[]
+  const Code = Codes[index]
+
+  const [expand, setExpandState] = React.useState(false)
+
+  const Preview = React.useMemo(() => {
+    // console.log('Index', Index)
+    // console.log('name', name)
+    // console.log('config.style', config.style)
+
+    const Component = Index[config.style][name]?.component
+    // const Component = Index[name]?.component
+
+    if (!Component) {
+      return (
+        <p className="text-sm text-muted-foreground">
+          Component{' '}
+          <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
+            {name}
+          </code>{' '}
+          not found in registry.
+        </p>
+      )
+    }
+
+    return <Component />
+  }, [name, config.style])
+
+  const codeString = React.useMemo(() => {
+    if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') {
+      const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement[]
+      return Button?.props?.value || Button?.props?.__rawString__ || null
+    }
+  }, [Code])
+
+  const ComponentPreview = React.useMemo(() => {
+    return (
+      <>
+        {/* <ThemeWrapper defaultTheme="zinc"> */}
+        <div
+          className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
+            'items-center': align === 'center',
+            'items-start': align === 'start',
+            'items-end': align === 'end',
+          })}
+        >
+          <React.Suspense
+            fallback={
+              <div className="flex items-center text-sm text-muted-foreground">
+                {/* <Icons.spinner className="mr-2 h-4 w-4 animate-spin" /> */}
+                {/* <LoaderCircle className="mr-2 h-4 w-4 animate-spin" /> */}
+                Loading...
+              </div>
+            }
+          >
+            {Preview}
+          </React.Suspense>
+        </div>
+        {/* </ThemeWrapper> */}
+      </>
+    )
+  }, [Preview, align])
+
+  const wideClasses = wide ? '2xl:-ml-12 2xl:-mr-12' : ''
+
+  if (peekCode) {
+    return (
+      <div className={cn('mt-4 mb-12', wideClasses)}>
+        <div
+          className={cn(
+            'relative rounded-tl-md rounded-tr-md border-t border-l border-r bg-studio overflow-hidden'
+          )}
+        >
+          {showGrid && (
+            <div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+          )}
+          {showDottedGrid && (
+            <div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
+          )}
+          <div className="z-10 relative">{ComponentPreview}</div>
+          {/* <div className="preview-grid-background"></div> */}
+        </div>
+        <div className="flex flex-col space-y-4">
+          <div
+            className={cn(
+              'relative',
+              'w-full rounded-md [&_pre]:my-0',
+              expand
+                ? '[&_pre]:overflow-auto'
+                : 'inset-0 [&_pre]:max-h-[196px] [&_pre]:overflow-hidden',
+              '[&_pre]:rounded-tr-none [&_pre]:rounded-tl-none'
+            )}
+          >
+            {Code}
+            <div className="absolute bottom-0 w-full flex justify-center mb-4">
+              <Button
+                className="rounded-full"
+                onClick={() => setExpandState(!expand)}
+                type="default"
+                icon={<Expand className="text-foreground-lighter" />}
+              >
+                {expand ? 'Collapse code' : 'Expand code'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('mt-4 mb-12', wideClasses)}>
+      <div
+        className={cn(
+          'relative rounded-tl-md rounded-tr-md border-t border-l border-r bg-studio overflow-hidden'
+        )}
+      >
+        {showGrid && (
+          <div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
+        )}
+        {showDottedGrid && (
+          <div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
+        )}
+        <div className="z-10 relative">{ComponentPreview}</div>
+        {/* <div className="preview-grid-background"></div> */}
+      </div>
+      <Collapsible_Shadcn_>
+        <CollapsibleTrigger_Shadcn_
+          className={`
+            flex 
+            gap-3 items-center 
+            w-full
+            font-mono
+            text-xs 
+            text-foreground-light
+            px-4 py-4 
+            border border-r 
+            group
+            data-[state=closed]:rounded-bl-md data-[state=closed]:rounded-br-md
+            
+        `}
+        >
+          <ChevronRight
+            className="transition-all group-data-[state=open]:rotate-90 text-foreground-lighter"
+            size={14}
+          />
+          View code
+        </CollapsibleTrigger_Shadcn_>
+        <CollapsibleContent_Shadcn_ className="transition-all">
+          <div
+            className={cn(
+              'relative',
+              'w-full rounded-md [&_pre]:my-0',
+              '[&_pre]:overflow-auto',
+              '[&_pre]:max-h-[320px]',
+              '[&_pre]:rounded-tr-none [&_pre]:rounded-tl-none [&_pre]:border-t-transparent'
+            )}
+          >
+            {Code}
+          </div>
+        </CollapsibleContent_Shadcn_>
+      </Collapsible_Shadcn_>
+    </div>
+  )
+
+  return (
+    <div
+      className={cn('group relative my-4 flex flex-col gap-2', wideClasses, className)}
+      {...props}
+    >
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
+        <div className="flex items-center justify-between pb-3">
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+            <TabsTrigger
+              value="preview"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Preview
+            </TabsTrigger>
+            <TabsTrigger
+              value="code"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Code
+            </TabsTrigger>
+          </TabsList>
+        </div>
+        <TabsContent value="preview" className="relative rounded-md border bg-studio">
+          {ComponentPreview}
+        </TabsContent>
+        <TabsContent value="code">
+          <div className="flex flex-col space-y-4">
+            <div className="w-full rounded-md [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
+              {Code}
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/apps/design-system/components/component-props.tsx b/apps/design-system/components/component-props.tsx
new file mode 100644
index 0000000000..de41a1ac42
--- /dev/null
+++ b/apps/design-system/components/component-props.tsx
@@ -0,0 +1,58 @@
+import fs from 'fs'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+// import { parse } from 'react-docgen'
+
+export function ComponentProps(props: any) {
+  // map through all props types for this component DropdownMenu
+  // return a table with the prop name, type, default value, and description
+
+  //   const code = `
+  // /** My first component */
+  // export default ({ name }: { name: string }) => <div>{{name}}</div>;
+  // `
+
+  //   const documentation = parse(code)
+  //
+  //   console.log(documentation)
+
+  // console.log('from the component props', JSON.parse(props.docs))
+
+  const docs = JSON.parse(props.docs)
+
+  // console.log(docs.props)
+
+  return (
+    <div className="space-y-2">
+      <p className="font-medium text-foreground-light">{props.children}</p>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="font-mono uppercase text-xs font-normal">Prop Name</TableHead>
+            <TableHead className="font-mono uppercase text-xs font-normal">Required</TableHead>
+            <TableHead className="font-mono uppercase text-xs font-normal">Type</TableHead>
+            <TableHead className="font-mono uppercase text-xs text-right font-normal">
+              Description
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(docs.props).map(([propName, prop], index) => (
+            <TableRow key={index}>
+              <TableCell>{propName}</TableCell>
+              {/* 
+              // @ts-ignore */}
+              <TableCell>{prop.required ? 'Yes' : 'No'}</TableCell>
+              {/* 
+              // @ts-ignore */}
+              <TableCell>{prop.flowType.name}</TableCell>
+              {/* 
+              // @ts-ignore */}
+              <TableCell className="text-right">{prop.description}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/apps/design-system/components/component-source.tsx b/apps/design-system/components/component-source.tsx
new file mode 100644
index 0000000000..c63d4e4931
--- /dev/null
+++ b/apps/design-system/components/component-source.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import * as React from 'react'
+
+import { cn } from 'ui'
+import { CodeBlockWrapper } from '@/components/code-block-wrapper'
+
+interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string
+}
+
+export function ComponentSource({ children, className, ...props }: ComponentSourceProps) {
+  return (
+    <CodeBlockWrapper
+      expandButtonTitle="Expand"
+      className={cn('my-6 overflow-hidden rounded-md', className)}
+    >
+      {children}
+    </CodeBlockWrapper>
+  )
+}
diff --git a/apps/design-system/components/copy-button.tsx b/apps/design-system/components/copy-button.tsx
new file mode 100644
index 0000000000..ed823d518c
--- /dev/null
+++ b/apps/design-system/components/copy-button.tsx
@@ -0,0 +1,179 @@
+'use client'
+
+import * as React from 'react'
+import { DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu'
+
+// import { NpmCommands } from 'types/unist'
+
+// import { Event, trackEvent } from '@/lib/events'
+import { cn } from 'ui'
+import { Button } from 'ui'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+import { Check, Copy } from 'lucide-react'
+
+interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  value: string
+  src?: string
+  //   event?: Event['name']
+}
+
+export async function copyToClipboardWithMeta(
+  value: string
+  // event?: Event
+) {
+  navigator.clipboard.writeText(value)
+  if (event) {
+    // trackEvent(event)
+  }
+}
+
+export function CopyButton({
+  value,
+  className,
+  src,
+  // event,
+  ...props
+}: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  return (
+    <Button
+      size="small"
+      type="outline"
+      className={cn(
+        'relative z-10 h-6 w-6 text-foreground-muted hover:bg-surface-100 hover:text-foreground p-0',
+        className
+      )}
+      onClick={() => {
+        copyToClipboardWithMeta(
+          value
+          //   event
+          //     ? {
+          //         name: event,
+          //         properties: {
+          //           code: value,
+          //         },
+          //       }
+          //     : undefined
+        )
+        setHasCopied(true)
+      }}
+      {...props}
+    >
+      <span className="sr-only">Copy</span>
+      {hasCopied ? <Check className="h-3 w-3 text-brand-600" /> : <Copy className="h-3 w-3" />}
+    </Button>
+  )
+}
+
+interface CopyWithClassNamesProps extends DropdownMenuTriggerProps {
+  value: string
+  classNames: string
+  className?: string
+}
+
+export function CopyWithClassNames({
+  value,
+  classNames,
+  className,
+  ...props
+}: CopyWithClassNamesProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 2000)
+  }, [hasCopied])
+
+  const copyToClipboard = React.useCallback((value: string) => {
+    copyToClipboardWithMeta(value)
+    setHasCopied(true)
+  }, [])
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="small"
+          type="outline"
+          className={cn(
+            'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
+            className
+          )}
+        >
+          {hasCopied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
+          <span className="sr-only">Copy</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => copyToClipboard(value)}>Component</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => copyToClipboard(classNames)}>Classname</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+interface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {
+  //   commands: Required<NpmCommands>
+}
+
+// export function CopyNpmCommandButton({ commands, className, ...props }: CopyNpmCommandButtonProps) {
+//   const [hasCopied, setHasCopied] = React.useState(false)
+
+//   React.useEffect(() => {
+//     setTimeout(() => {
+//       setHasCopied(false)
+//     }, 2000)
+//   }, [hasCopied])
+
+//   //   const copyCommand = React.useCallback((value: string, pm: 'npm' | 'pnpm' | 'yarn' | 'bun') => {
+//   //     copyToClipboardWithMeta(value,
+//   //     //     {
+//   //     //   name: 'copy_npm_command',
+//   //     //   properties: {
+//   //     //     command: value,
+//   //     //     pm,
+//   //     //   },
+//   //     })
+//   //     setHasCopied(true)
+//   //   }, [])
+
+//   return (
+//     <DropdownMenu>
+//       <DropdownMenuTrigger asChild>
+//         <Button
+//           //   size="icon"
+//           type="outline"
+//           className={cn(
+//             'relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50',
+//             className
+//           )}
+//         >
+//           {hasCopied ? <CheckIcon className="h-3 w-3" /> : <CopyIcon className="h-3 w-3" />}
+//           <span className="sr-only">Copy</span>
+//         </Button>
+//       </DropdownMenuTrigger>
+//       <DropdownMenuContent align="end">
+//         <DropdownMenuItem onClick={() => copyCommand(commands.__npmCommand__, 'npm')}>
+//           npm
+//         </DropdownMenuItem>
+//         <DropdownMenuItem onClick={() => copyCommand(commands.__yarnCommand__, 'yarn')}>
+//           yarn
+//         </DropdownMenuItem>
+//         <DropdownMenuItem onClick={() => copyCommand(commands.__pnpmCommand__, 'pnpm')}>
+//           pnpm
+//         </DropdownMenuItem>
+//         <DropdownMenuItem onClick={() => copyCommand(commands.__bunCommand__, 'bun')}>
+//           bun
+//         </DropdownMenuItem>
+//       </DropdownMenuContent>
+//     </DropdownMenu>
+//   )
+// }
diff --git a/apps/design-system/components/design-system-marks.tsx b/apps/design-system/components/design-system-marks.tsx
new file mode 100644
index 0000000000..fab36f9399
--- /dev/null
+++ b/apps/design-system/components/design-system-marks.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import SVG from 'react-inlinesvg'
+import { useTheme } from 'next-themes'
+
+function DesignSystemMarks() {
+  const { resolvedTheme } = useTheme()
+
+  const isDark = resolvedTheme?.includes('dark')
+
+  return (
+    <SVG
+      className="h-4 w-auto"
+      src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/design-system-marks/design-system-marks--${isDark ? 'dark' : 'light'}.svg`}
+    />
+  )
+}
+
+export { DesignSystemMarks }
diff --git a/apps/design-system/components/example-label.tsx b/apps/design-system/components/example-label.tsx
new file mode 100644
index 0000000000..6774d8e1bb
--- /dev/null
+++ b/apps/design-system/components/example-label.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+const ExampleLabel = React.forwardRef<HTMLSpanElement, { children: React.ReactNode }>(
+  ({ children }, ref) => {
+    return (
+      <span ref={ref} className="text-xs flex gap-3 items-center text-foreground-muted">
+        {children}
+      </span>
+    )
+  }
+)
+
+ExampleLabel.displayName = 'ExampleLabel'
+
+export { ExampleLabel }
diff --git a/apps/design-system/components/grid.tsx b/apps/design-system/components/grid.tsx
new file mode 100644
index 0000000000..659117a773
--- /dev/null
+++ b/apps/design-system/components/grid.tsx
@@ -0,0 +1,62 @@
+import { forwardRef } from 'react'
+import { cn } from 'ui'
+
+const Grid = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cn(
+          'grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 border-t border-l my-12',
+          props.className
+        )}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Grid.displayName = 'Grid'
+
+const GridItem = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={cn(
+          `
+            relative
+            min-h-32 
+            flex gap-4 flex-col items-center p-4
+            border-b border-r
+            bg-surface-75/50 
+            justify-center hover:bg-surface-100
+            group
+            cursor-pointer
+        `,
+          props.className
+        )}
+      >
+        <div
+          className="
+                    absolute
+                    w-full h-full box-content
+                    transition 
+                    group-hover:border 
+                    group-hover:border-foreground-muted 
+                    group-data-[state=open]:border 
+                    group-data-[state=open]:border-foreground-muted 
+                "
+        ></div>
+        {children}
+      </div>
+    )
+  }
+)
+
+GridItem.displayName = 'GridItem'
+
+export { Grid, GridItem }
diff --git a/apps/design-system/components/homepage-svg-handler.tsx b/apps/design-system/components/homepage-svg-handler.tsx
new file mode 100644
index 0000000000..e359eb0e83
--- /dev/null
+++ b/apps/design-system/components/homepage-svg-handler.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import SVG from 'react-inlinesvg'
+import { useTheme } from 'next-themes'
+
+const HomepageSvgHandler = ({ name }: { name: string }) => {
+  const { resolvedTheme } = useTheme()
+
+  return (
+    <div>
+      <SVG
+        className="h-32 w-auto"
+        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/design-system-marks/${name}--${resolvedTheme}.svg`}
+      />
+    </div>
+  )
+}
+
+export { HomepageSvgHandler }
diff --git a/apps/design-system/components/icons.tsx b/apps/design-system/components/icons.tsx
new file mode 100644
index 0000000000..8642a9d17c
--- /dev/null
+++ b/apps/design-system/components/icons.tsx
@@ -0,0 +1,70 @@
+import { Index } from 'icons/__registry__/index'
+import { Copy } from 'lucide-react'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  IconCopy,
+} from 'ui'
+import { Grid, GridItem } from './grid'
+
+function Icons() {
+  return (
+    <>
+      <Grid>
+        {Index.map((icon: any, i: number) => (
+          <DropdownMenu key={i} modal={false}>
+            <DropdownMenuTrigger asChild>
+              <GridItem>
+                <icon.component
+                  strokeWidth={1.5}
+                  size={21}
+                  className="group-data-[state=open]:scale-125 transition-all"
+                />
+                <span className="bg-surface-100 rounded-full border px-2 font-mono text-xs text-foreground-lighter group-data-[state=open]:text-foreground">
+                  {icon.name}
+                </span>
+              </GridItem>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-48">
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  className="flex items-center gap-2"
+                  onSelect={() => navigator.clipboard.writeText(icon.name)}
+                >
+                  <Copy size={14} strokeWidth={1} />
+                  Copy name
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="flex items-center gap-2"
+                  onSelect={() => navigator.clipboard.writeText(icon.jsx)}
+                >
+                  <Copy size={14} strokeWidth={1} />
+                  Copy JSX
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="flex items-center gap-2"
+                  onSelect={() => navigator.clipboard.writeText(icon.import)}
+                >
+                  <Copy size={14} strokeWidth={1} />
+                  Copy import path
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  className="flex items-center gap-2"
+                  onSelect={() => navigator.clipboard.writeText(icon.svg)}
+                >
+                  <Copy size={14} strokeWidth={1} />
+                  Copy SVG
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ))}
+      </Grid>
+    </>
+  )
+}
+
+export { Icons }
diff --git a/apps/design-system/components/mdx-components.tsx b/apps/design-system/components/mdx-components.tsx
new file mode 100644
index 0000000000..691e2edbda
--- /dev/null
+++ b/apps/design-system/components/mdx-components.tsx
@@ -0,0 +1,291 @@
+'use client'
+
+import * as React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { useMDXComponent } from 'next-contentlayer2/hooks'
+// import { NpmCommands } from 'types/unist'
+// import { Event } from '@/lib/events'
+import { cn } from 'ui'
+import { useConfig } from '@/hooks/use-config'
+import { Callout } from '@/components/callout'
+import { CodeBlockWrapper } from '@/components/code-block-wrapper'
+import { ComponentExample } from '@/components/component-example'
+import { ComponentPreview } from '@/components/component-preview'
+import { ComponentSource } from '@/components/component-source'
+import {
+  CopyButton,
+  // CopyNpmCommandButton
+} from '@/components/copy-button'
+// import { FrameworkDocs } from '@/components/framework-docs'
+import { StyleWrapper } from './style-wrapper'
+import {
+  Accordion_Shadcn_ as Accordion,
+  AccordionContent_Shadcn_ as AccordionContent,
+  AccordionItem_Shadcn_ as AccordionItem,
+  AccordionTrigger_Shadcn_ as AccordionTrigger,
+} from 'ui'
+import {
+  Alert_Shadcn_ as Alert,
+  AlertDescription_Shadcn_ as AlertDescription,
+  AlertTitle_Shadcn_ as AlertTitle,
+} from 'ui'
+import { AspectRatio } from 'ui'
+import {
+  Tabs_Shadcn_ as Tabs,
+  TabsContent_Shadcn_ as TabsContent,
+  TabsList_Shadcn_ as TabsList,
+  TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
+import { ComponentProps } from './component-props'
+import { Style } from '@/registry/styles'
+import { Colors } from '@/components/colors'
+import { Icons } from '@/components/icons'
+import { ThemeSettings } from '@/components/theme-settings'
+import { CodeFragment } from '@/components/code-fragment'
+
+const components = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  h1: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h1 className={cn('font-heading mt-2 scroll-m-20 text-4xl font-bold', className)} {...props} />
+  ),
+  h2: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h2
+      className={cn(
+        'font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl tracking-tight first:mt-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  h3: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h3
+      className={cn('font-heading mt-8 scroll-m-20 text-xl tracking-tight', className)}
+      {...props}
+    />
+  ),
+  h4: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h4
+      className={cn('font-heading mt-8 scroll-m-20 text-lg tracking-tight', className)}
+      {...props}
+    />
+  ),
+  h5: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h5 className={cn('mt-8 scroll-m-20 text-lg tracking-tight', className)} {...props} />
+  ),
+  h6: ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <h6 className={cn('mt-8 scroll-m-20 text-base tracking-tight', className)} {...props} />
+  ),
+  a: ({ className, ...props }: React.HTMLAttributes<HTMLAnchorElement>) => (
+    <a
+      className={cn(
+        'text-foreground underline decoration-1 decoration-foreground-muted underline-offset-4 transition-colors hover:decoration-brand hover:decoration-2',
+        className
+      )}
+      {...props}
+    />
+  ),
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p
+      className={cn('leading-7 [&:not(:first-child)]:mt-6 text-foreground-light', className)}
+      {...props}
+    />
+  ),
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className={cn('my-6 ml-6 list-disc', className)} {...props} />
+  ),
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className={cn('my-6 ml-6 list-decimal', className)} {...props} />
+  ),
+  li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <li className={cn('mt-2', className)} {...props} />
+  ),
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
+  ),
+  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img className={cn('rounded-md', className)} alt={alt} {...props} />
+  ),
+  hr: ({ ...props }: React.HTMLAttributes<HTMLHRElement>) => (
+    <hr className="my-4 md:my-8" {...props} />
+  ),
+  table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className={cn('w-full', className)} {...props} />
+    </div>
+  ),
+  tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+    <tr className={cn('m-0 border-t p-0 even:bg-surface-75/75', className)} {...props} />
+  ),
+  th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <th
+      className={cn(
+        'border px-4 py-2 text-left font-normal [&[align=center]]:text-center [&[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
+    <td
+      className={cn(
+        'border text-foreground-light px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+        className
+      )}
+      {...props}
+    />
+  ),
+  pre: (
+    {
+      className,
+      __rawString__,
+      // __npmCommand__,
+      // __yarnCommand__,
+      // __pnpmCommand__,
+      // __bunCommand__,
+      __withMeta__,
+      __src__,
+      // __event__,
+      __style__,
+      ...props
+    }: React.HTMLAttributes<HTMLPreElement> & {
+      __style__?: Style['name']
+      __rawString__?: string
+      __withMeta__?: boolean
+      __src__?: string
+      // __event__?: Event['name']
+    }
+    // & NpmCommands
+  ) => {
+    return (
+      <StyleWrapper styleName={__style__}>
+        <pre
+          className={cn(
+            'mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-surface-75/75 py-4',
+            className
+          )}
+          {...props}
+        />
+        {__rawString__ && (
+          // !__npmCommand__ &&
+          <CopyButton
+            value={__rawString__}
+            src={__src__}
+            // event={__event__}
+            className={cn('absolute right-4 top-4', __withMeta__ && 'top-16')}
+          />
+        )}
+        {/* {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ && (
+          <CopyNpmCommandButton
+            commands={{
+              __npmCommand__,
+              __yarnCommand__,
+              __pnpmCommand__,
+              __bunCommand__,
+            }}
+            className={cn('absolute right-4 top-4', __withMeta__ && 'top-16')}
+          />
+        )} */}
+      </StyleWrapper>
+    )
+  },
+  code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <code
+      className={cn(
+        'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm',
+        className
+      )}
+      {...props}
+    />
+  ),
+  Image,
+  Callout,
+  ComponentPreview,
+  ComponentExample,
+  ComponentSource,
+  ComponentProps,
+  AspectRatio,
+  CodeBlockWrapper: ({ ...props }) => <CodeBlockWrapper className="rounded-md border" {...props} />,
+  Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
+    <h3
+      className={cn(
+        'font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight',
+        className
+      )}
+      {...props}
+    />
+  ),
+  Steps: ({ ...props }) => (
+    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...props} />
+  ),
+  Tabs: ({ className, ...props }: React.ComponentProps<typeof Tabs>) => (
+    <Tabs className={cn('relative mt-6 w-full', className)} {...props} />
+  ),
+  TabsList: ({ className, ...props }: React.ComponentProps<typeof TabsList>) => (
+    <TabsList
+      className={cn('w-full justify-start rounded-none border-b bg-transparent p-0', className)}
+      {...props}
+    />
+  ),
+  TabsTrigger: ({ className, ...props }: React.ComponentProps<typeof TabsTrigger>) => (
+    <TabsTrigger
+      className={cn(
+        'relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none',
+        className
+      )}
+      {...props}
+    />
+  ),
+  TabsContent: ({ className, ...props }: React.ComponentProps<typeof TabsContent>) => (
+    <TabsContent
+      className={cn(
+        'relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold',
+        className
+      )}
+      {...props}
+    />
+  ),
+  // FrameworkDocs: ({ className, ...props }: React.ComponentProps<typeof FrameworkDocs>) => (
+  //   <FrameworkDocs className={cn(className)} {...props} />
+  // ),
+  Link: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
+    <Link className={cn('font-medium underline underline-offset-4', className)} {...props} />
+  ),
+  LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
+    <Link
+      className={cn(
+        'flex w-full flex-col items-center rounded-xl border bg-card p-6 text-card-foreground shadow transition-colors hover:bg-muted/50 sm:p-10',
+        className
+      )}
+      {...props}
+    />
+  ),
+  Colors,
+  Icons,
+  ThemeSettings,
+  CodeFragment,
+}
+
+interface MdxProps {
+  code: string
+}
+
+export function Mdx({ code }: MdxProps) {
+  const [config] = useConfig()
+  const Component = useMDXComponent(code, {
+    style: config.style,
+  })
+
+  return (
+    <div className="mdx">
+      <Component components={components} />
+    </div>
+  )
+}
diff --git a/apps/design-system/components/pager.tsx b/apps/design-system/components/pager.tsx
new file mode 100644
index 0000000000..9dd476b33d
--- /dev/null
+++ b/apps/design-system/components/pager.tsx
@@ -0,0 +1,72 @@
+import Link from 'next/link'
+import { Doc } from 'contentlayer/generated'
+import { NavItem, NavItemWithChildren } from '@/types/nav'
+
+import { docsConfig } from '@/config/docs'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from 'ui'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+interface DocsPagerProps {
+  doc: Doc
+}
+
+export function DocsPager({ doc }: DocsPagerProps) {
+  const pager = getPagerForDoc(doc)
+
+  if (!pager) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-row items-center justify-between">
+      {pager?.prev?.href && (
+        <Link
+          href={pager.prev.href}
+          className="flex gap-3 text-foreground-light hover:text-foreground group"
+        >
+          <ChevronLeft className="mr-2 h-4 w-4 self-end mb-1 text-foreground-muted group-hover:text-foreground-lighter" />
+          <div className="flex flex-col gap-1">
+            <span className="text-xs font-mono uppercase tracking-wider text-foreground-muted group-hover:text-foreground-lighter">
+              Previous
+            </span>
+            {pager.prev.title}
+          </div>
+        </Link>
+      )}
+      {pager?.next?.href && (
+        <Link
+          href={pager.next.href}
+          className="flex gap-3 text-foreground-light hover:text-foreground group"
+        >
+          <div className="flex flex-col gap-1">
+            <span className="text-xs font-mono uppercase tracking-wider text-foreground-muted group-hover:text-foreground-lighter">
+              Next
+            </span>
+            {pager.next.title}
+          </div>
+          <ChevronRight className="ml-2 h-4 w-4 self-end mb-1 text-foreground-muted group-hover:text-foreground-lighter" />
+        </Link>
+      )}
+    </div>
+  )
+}
+
+export function getPagerForDoc(doc: Doc) {
+  const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
+  const activeIndex = flattenedLinks.findIndex((link) => doc.slug === link?.href)
+  const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
+  const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null
+  return {
+    prev,
+    next,
+  }
+}
+
+export function flatten(links: NavItemWithChildren[]): NavItem[] {
+  return links
+    .reduce<NavItem[]>((flat, link) => {
+      return flat.concat(link.items?.length ? flatten(link.items) : link)
+    }, [])
+    .filter((link) => !link?.disabled)
+}
diff --git a/apps/design-system/components/side-navigation-item.tsx b/apps/design-system/components/side-navigation-item.tsx
new file mode 100644
index 0000000000..c22e53aa7e
--- /dev/null
+++ b/apps/design-system/components/side-navigation-item.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import { SidebarNavItem } from '@/types/nav'
+import { cn } from 'ui/src/lib/utils/cn'
+import { usePathname } from 'next/navigation'
+import Link from 'next/link'
+import React from 'react'
+
+const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
+  const pathname = usePathname()
+
+  const isActive = pathname === item.href
+
+  return (
+    <Link
+      href={`${item.href}`}
+      className={cn(
+        'relative',
+        'flex',
+        'items-center',
+        'h-8',
+        'text-foreground-light px-6',
+        !isActive && 'hover:bg-surface-100 hover:text-foreground',
+        isActive && 'bg-surface-200 text-foreground',
+        'transition-all'
+      )}
+    >
+      <div
+        className={cn(
+          'transition',
+          'absolute left-0 w-1 h-full bg-foreground',
+
+          isActive ? 'opacity-100' : 'opacity-0'
+        )}
+      ></div>
+      {item.title}
+    </Link>
+  )
+})
+
+NavigationItem.displayName = 'NavigationItem'
+
+export default NavigationItem
diff --git a/apps/design-system/components/side-navigation.tsx b/apps/design-system/components/side-navigation.tsx
new file mode 100644
index 0000000000..3924337c37
--- /dev/null
+++ b/apps/design-system/components/side-navigation.tsx
@@ -0,0 +1,21 @@
+import { docsConfig } from '@/config/docs'
+import NavigationItem from '@/components/side-navigation-item'
+
+function SideNavigation() {
+  return (
+    <nav className="min-w-[220px]">
+      {docsConfig.sidebarNav.map((section, i) => (
+        <div key={`${section.title}-${i}`} className="pb-10 space-y-0.5">
+          <div className="font-mono uppercase text-xs text-foreground-lighter/75 mb-2 px-6 tracking-wider">
+            {section.title}
+          </div>
+          {section.items.map((item, i) => (
+            <NavigationItem item={item} key={`${item.href}-${i}`} />
+          ))}
+        </div>
+      ))}
+    </nav>
+  )
+}
+
+export default SideNavigation
diff --git a/apps/design-system/components/site-footer.tsx b/apps/design-system/components/site-footer.tsx
new file mode 100644
index 0000000000..d05d343575
--- /dev/null
+++ b/apps/design-system/components/site-footer.tsx
@@ -0,0 +1,61 @@
+import { siteConfig } from '@/config/site'
+
+export function SiteFooter() {
+  return (
+    <footer className="py-6 md:px-8 md:py-0 mx-auto border-r border-l border-b w-full max-w-site">
+      <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+        <p className="text-balance text-center text-sm leading-loose text-foreground-muted md:text-left">
+          Built by{' '}
+          <a
+            href={siteConfig.links.twitter}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
+          >
+            Supabase
+          </a>
+          . The source code is available on{' '}
+          <a
+            href={siteConfig.links.github}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
+          >
+            GitHub
+          </a>
+          .
+        </p>
+        <p className="text-balance text-center text-sm leading-loose text-foreground-muted">
+          Site inspired by{' '}
+          <a
+            href={siteConfig.links.credits.radix}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
+          >
+            Radix
+          </a>
+          ,{' '}
+          <a
+            href={siteConfig.links.credits.shadcn}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
+          >
+            shadcn/ui
+          </a>{' '}
+          and{' '}
+          <a
+            href={siteConfig.links.credits.geist}
+            target="_blank"
+            rel="noreferrer"
+            className="font-medium underline underline-offset-4 hover:text-foreground-lighter"
+          >
+            Geist
+          </a>
+          .
+        </p>
+      </div>
+    </footer>
+  )
+}
diff --git a/apps/design-system/components/source-panel.tsx b/apps/design-system/components/source-panel.tsx
new file mode 100644
index 0000000000..04dc897204
--- /dev/null
+++ b/apps/design-system/components/source-panel.tsx
@@ -0,0 +1,206 @@
+import { Doc } from '@/.contentlayer/generated'
+import Link from 'next/link'
+import { forwardRef } from 'react'
+
+import { ExternalLink } from 'lucide-react'
+import { Button } from 'ui'
+import { cn } from 'ui/src/lib/utils/cn'
+import Image from 'next/image'
+
+const SourcePanel = forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & { doc: Doc }>(
+  ({ doc, children, ...props }, ref) => {
+    const label = {
+      radix: 'Radix UI',
+      vaul: 'Vaul',
+      shadcn: 'ui.shadcn',
+    }
+
+    const ShadcnPanel = () => {
+      if (doc.source?.shadcn) {
+        return (
+          <div
+            className={cn(
+              'bg-surface-75/50 border flex items-center p-3 px-5 gap-6 first:rounded-t-md last:rounded-b-md',
+              props.className
+            )}
+            {...props}
+          >
+            <div className="flex items-center gap-2">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" className="h-6 w-6">
+                <rect width="256" height="256" fill="none"></rect>
+                <line
+                  x1="208"
+                  y1="128"
+                  x2="128"
+                  y2="208"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="16"
+                ></line>
+                <line
+                  x1="192"
+                  y1="40"
+                  x2="40"
+                  y2="192"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="16"
+                ></line>
+              </svg>
+              <span className="hidden font-bold sm:inline-block">shadcn/ui</span>
+            </div>
+            <span className="text-foreground-light text-sm">
+              This component is based on ui.shadcn
+            </span>
+          </div>
+        )
+      }
+    }
+
+    const VaulPanel = () => {
+      if (doc.source?.vaul) {
+        return (
+          <div
+            className={cn(
+              'bg-surface-75/50 border flex items-center p-3 px-5 gap-6 first:rounded-t-md last:rounded-b-md',
+              props.className
+            )}
+            {...props}
+          >
+            <div className="flex items-center gap-2">
+              <Image
+                width={24}
+                height={24}
+                src="https://avatars.githubusercontent.com/u/36730035?s=48&v=4"
+                alt="Vaul"
+                className="h-6 w-6 rounded-full"
+              />
+              <span className="hidden font-bold sm:inline-block">vaul</span>
+            </div>
+            <span className="text-foreground-light text-sm">
+              This component is based on vaul by emilkowalski
+            </span>
+          </div>
+        )
+      }
+    }
+
+    const InputOtp = () => {
+      if (doc.source?.inputOtp) {
+        return (
+          <div
+            className={cn(
+              'bg-surface-75/50 border flex items-center p-3 px-5 gap-6 first:rounded-t-md last:rounded-b-md',
+              props.className
+            )}
+            {...props}
+          >
+            <div className="flex items-center gap-2">
+              <Image
+                width={24}
+                height={24}
+                src="https://avatars.githubusercontent.com/u/10366880?s=48&v=4"
+                alt="inputOtp"
+                className="h-6 w-6 rounded-full"
+              />
+              <span className="hidden font-bold sm:inline-block">input-otp</span>
+            </div>
+            <span className="text-foreground-light text-sm">
+              This component is based on input-otp by guilhermerodz
+            </span>
+          </div>
+        )
+      }
+    }
+
+    const RadixPanel = () => {
+      if (doc.source?.radix) {
+        return (
+          <div
+            className={cn(
+              'bg-surface-75/50 border flex items-center p-3 px-5 gap-6 first:rounded-t-md last:rounded-b-md',
+              props.className
+            )}
+            {...props}
+          >
+            <svg
+              width="76"
+              height="24"
+              viewBox="0 0 76 24"
+              fill="currentcolor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M43.9022 20.0061H46.4499C46.2647 19.0375 46.17 18.1161 46.17 17.0058V12.3753C46.17 9.25687 44.3893 7.72127 41.1943 7.72127C38.3003 7.72127 36.3324 9.23324 36.0777 11.8083H38.9254C39.0181 10.698 39.8052 9.96561 41.1017 9.96561C42.4446 9.96561 43.3243 10.6743 43.3243 12.1391V12.7061L39.8052 13.1077C37.4206 13.3912 35.5684 14.3834 35.5684 16.7931C35.5684 18.9666 37.2353 20.2659 39.5274 20.2659C41.4027 20.2659 42.9845 19.4863 43.6401 18.1161C43.6689 18.937 43.9022 20.0061 43.9022 20.0061ZM40.3377 18.1634C39.157 18.1634 38.5087 17.5727 38.5087 16.6278C38.5087 15.3757 39.4579 15.0922 40.7082 14.9268L43.3243 14.6197V15.352C43.3243 17.242 41.8658 18.1634 40.3377 18.1634ZM56.2588 20.0061H59.176V3H56.2125V9.96561C55.6569 8.76075 54.3141 7.72127 52.4851 7.72127C49.3058 7.72127 47.099 10.2963 47.099 14.0054C47.099 17.7381 49.3058 20.2896 52.4851 20.2896C54.2678 20.2896 55.68 19.2973 56.2588 18.0925V20.0061ZM56.282 14.218C56.282 16.5569 55.1938 18.0689 53.3185 18.0689C51.3969 18.0689 50.1856 16.486 50.1856 14.0054C50.1856 11.5485 51.3969 9.94198 53.3185 9.94198C55.1938 9.94198 56.282 11.454 56.282 13.7928V14.218ZM60.9066 5.97304H64.0553V3.01996H60.9066V5.97304ZM60.9992 20.0061H63.9627V8.00476H60.9992V20.0061ZM67.6638 20.0061L70.6041 15.8954L73.5212 20.0061H76.9246L72.3636 13.7219L76.5542 8.00476H73.3823L70.7661 11.7138L68.1731 8.00476H64.7697L69.0066 13.8637L64.4919 20.0061H67.6638Z"></path>
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M24.9132 20V14.0168H28.7986L32.4513 20H35.7006L31.6894 13.5686C33.5045 12.986 35.0955 11.507 35.0955 9.01961C35.0955 5.7479 32.7994 4 28.9571 4H22V20H24.9132ZM24.9132 6.35294V11.6863H28.821C31.0395 11.6863 32.1599 10.7675 32.1599 9.01961C32.1599 7.27171 30.9395 6.35294 28.621 6.35294H24.9132Z"
+              ></path>
+              <path d="M7 23C3.13401 23 0 19.6422 0 15.5C0 11.3578 3.13401 8 7 8V23Z"></path>
+              <path d="M7 0H0V7H7V0Z"></path>
+              <path d="M11.5 7C13.433 7 15 5.433 15 3.5C15 1.567 13.433 0 11.5 0C9.56704 0 8 1.567 8 3.5C8 5.433 9.56704 7 11.5 7Z"></path>
+            </svg>
+            <div className="flex flex-row items-center justify-between text-sm w-full">
+              <span className="text-foreground-light text-sm">This component uses Radix UI</span>
+              {doc.links ? (
+                <div className="flex items-center gap-2 justify-end">
+                  {doc.links?.doc && (
+                    <Button
+                      type="outline"
+                      className="rounded-full"
+                      icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
+                    >
+                      <Link
+                        href={doc.links.doc}
+                        target="_blank"
+                        rel="noreferrer"
+
+                        // className={cn(buttonVariants({ variant: 'default' }), 'gap-1')}
+                      >
+                        Docs
+                      </Link>
+                    </Button>
+                  )}
+                  {doc.links?.api && (
+                    <Button
+                      type="outline"
+                      className="rounded-full"
+                      icon={<ExternalLink className="text-foreground-muted" strokeWidth={1} />}
+                    >
+                      <Link
+                        href={doc.links.api}
+                        target="_blank"
+                        rel="noreferrer"
+
+                        // className={cn(badgeVariants({ variant: 'default' }), 'gap-1')}
+                      >
+                        API Reference
+                      </Link>
+                    </Button>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        )
+      }
+    }
+
+    return (
+      <div className="flex flex-col -space-y-px">
+        <RadixPanel />
+        <VaulPanel />
+        <InputOtp />
+        {/* <ShadcnPanel /> */}
+      </div>
+    )
+  }
+)
+
+SourcePanel.displayName = 'SourcePanel'
+
+export { SourcePanel }
diff --git a/apps/design-system/components/style-wrapper.tsx b/apps/design-system/components/style-wrapper.tsx
new file mode 100644
index 0000000000..4937cad099
--- /dev/null
+++ b/apps/design-system/components/style-wrapper.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import * as React from 'react'
+
+import { useConfig } from '@/hooks/use-config'
+import { Style } from '@/registry/styles'
+
+interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+  styleName?: Style['name']
+}
+
+export function StyleWrapper({ styleName, children }: StyleWrapperProps) {
+  const [config] = useConfig()
+
+  if (!styleName || config.style === styleName) {
+    return <>{children}</>
+  }
+
+  return null
+}
diff --git a/apps/design-system/components/theme-settings.tsx b/apps/design-system/components/theme-settings.tsx
new file mode 100644
index 0000000000..0d06e68b37
--- /dev/null
+++ b/apps/design-system/components/theme-settings.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+import SVG from 'react-inlinesvg'
+import { RadioGroupLargeItem_Shadcn_, RadioGroup_Shadcn_, Theme, singleThemes } from 'ui'
+
+const ThemeSettings = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
+
+  /**
+   * Avoid Hydration Mismatch
+   * https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
+   */
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  function SingleThemeSelection() {
+    return (
+      <form className="py-8">
+        <RadioGroup_Shadcn_
+          name="theme"
+          onValueChange={setTheme}
+          aria-label="Choose a theme"
+          defaultValue={theme}
+          value={theme}
+          className="flex flex-wrap gap-3"
+        >
+          {singleThemes.map((theme: Theme) => (
+            <RadioGroupLargeItem_Shadcn_ key={theme.value} value={theme.value} label={theme.name}>
+              <SVG src={`${process.env.NEXT_PUBLIC_BASE_PATH}/img/themes/${theme.value}.svg`} />
+            </RadioGroupLargeItem_Shadcn_>
+          ))}
+        </RadioGroup_Shadcn_>
+      </form>
+    )
+  }
+
+  return (
+    <>
+      <SingleThemeSelection />
+    </>
+  )
+}
+
+export { ThemeSettings }
diff --git a/apps/design-system/components/theme-switcher-dropdown.tsx b/apps/design-system/components/theme-switcher-dropdown.tsx
new file mode 100644
index 0000000000..4796194c07
--- /dev/null
+++ b/apps/design-system/components/theme-switcher-dropdown.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import SVG from 'react-inlinesvg'
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  RadioGroupLargeItem_Shadcn_,
+  RadioGroup_Shadcn_,
+  Theme,
+  singleThemes,
+} from 'ui'
+
+const ThemeSwitcherDropdown = () => {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme, resolvedTheme } = useTheme()
+
+  /**
+   * Avoid Hydration Mismatch
+   * https://github.com/pacocoursey/next-themes?tab=readme-ov-file#avoid-hydration-mismatch
+   */
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return null
+  }
+
+  function SingleThemeSelection() {
+    return (
+      <form>
+        <RadioGroup_Shadcn_
+          name="theme"
+          onValueChange={setTheme}
+          aria-label="Choose a theme"
+          defaultValue={theme}
+          value={theme}
+          className="flex flex-wrap gap-3"
+        ></RadioGroup_Shadcn_>
+      </form>
+    )
+  }
+
+  const iconClasses = 'text-foreground-light group-data-[state=open]:text-foreground'
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="text"
+            size="tiny"
+            className="px-1 group"
+            icon={
+              resolvedTheme?.includes('light') ? (
+                <Sun className={iconClasses} />
+              ) : (
+                <Moon className={iconClasses} />
+              )
+            }
+          ></Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end">
+          <DropdownMenuLabel>Theme</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuRadioGroup
+            value={theme}
+            onValueChange={(themeValue) => setTheme(themeValue)}
+          >
+            {singleThemes.map((theme: Theme) => (
+              <DropdownMenuRadioItem key={theme.value} value={theme.value}>
+                {theme.name}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  )
+}
+
+export { ThemeSwitcherDropdown }
diff --git a/apps/design-system/components/toc.tsx b/apps/design-system/components/toc.tsx
new file mode 100644
index 0000000000..d796b84518
--- /dev/null
+++ b/apps/design-system/components/toc.tsx
@@ -0,0 +1,107 @@
+// @ts-nocheck
+'use client'
+
+import * as React from 'react'
+
+import { TableOfContents } from '@/lib/toc'
+import { cn } from '@/lib/utils'
+import { useMounted } from '@/hooks/use-mounted'
+
+interface TocProps {
+  toc: TableOfContents
+}
+
+export function DashboardTableOfContents({ toc }: TocProps) {
+  const itemIds = React.useMemo(
+    () =>
+      toc.items
+        ? toc.items
+            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
+            .flat()
+            .filter(Boolean)
+            .map((id) => id?.split('#')[1])
+        : [],
+    [toc]
+  )
+  const activeHeading = useActiveItem(itemIds)
+  const mounted = useMounted()
+
+  if (!toc?.items || !mounted) {
+    return null
+  }
+
+  return (
+    <div className="space-y-2">
+      <p className="font-medium text-foreground-light">On This Page</p>
+      <Tree tree={toc} activeItem={activeHeading} />
+    </div>
+  )
+}
+
+function useActiveItem(itemIds: string[]) {
+  const [activeId, setActiveId] = React.useState(null)
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: `0% 0% -80% 0%` }
+    )
+
+    itemIds?.forEach((id) => {
+      const element = document.getElementById(id)
+      if (element) {
+        observer.observe(element)
+      }
+    })
+
+    return () => {
+      itemIds?.forEach((id) => {
+        const element = document.getElementById(id)
+        if (element) {
+          observer.unobserve(element)
+        }
+      })
+    }
+  }, [itemIds])
+
+  return activeId
+}
+
+interface TreeProps {
+  tree: TableOfContents
+  level?: number
+  activeItem?: string
+}
+
+function Tree({ tree, level = 1, activeItem }: TreeProps) {
+  return tree?.items?.length && level < 3 ? (
+    <ul className={cn('m-0 list-none', { 'pl-4': level !== 1 })}>
+      {tree.items.map((item, index) => {
+        return (
+          <li key={index} className={cn('mt-0 pt-2')}>
+            <a
+              href={item.url}
+              className={cn(
+                'inline-block no-underline transition-colors hover:text-foreground',
+                item.url === `#${activeItem}`
+                  ? 'font-medium text-foreground'
+                  : 'text-foreground-muted'
+              )}
+            >
+              {item.title}
+            </a>
+            {item.items?.length ? (
+              <Tree tree={item} level={level + 1} activeItem={activeItem} />
+            ) : null}
+          </li>
+        )
+      })}
+    </ul>
+  ) : null
+}
diff --git a/apps/design-system/components/top-navigation-search.tsx b/apps/design-system/components/top-navigation-search.tsx
new file mode 100644
index 0000000000..3de4610238
--- /dev/null
+++ b/apps/design-system/components/top-navigation-search.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Search } from 'lucide-react'
+import { Input } from 'ui-patterns/DataInputs/Input'
+
+function TopNavigationSearch() {
+  return (
+    <Input
+      size="small"
+      className="transition w-64 rounded-full hover:bg-surface-200 hover:border-foreground-muted cursor-pointer"
+      icon={<Search size={14} />}
+      placeholder="Search Design System..."
+    />
+  )
+}
+
+export { TopNavigationSearch }
diff --git a/apps/design-system/components/top-navigation.tsx b/apps/design-system/components/top-navigation.tsx
new file mode 100644
index 0000000000..7301be52fc
--- /dev/null
+++ b/apps/design-system/components/top-navigation.tsx
@@ -0,0 +1,38 @@
+// import { docsConfig } from '@/config/docs'
+import Link from 'next/link'
+import { DesignSystemMarks } from './design-system-marks'
+import { ThemeSwitcherDropdown } from './theme-switcher-dropdown'
+import { TopNavigationSearch } from './top-navigation-search'
+import { CommandMenu } from './command-menu'
+
+function TopNavigation() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-t bg-studio/95 backdrop-blur supports-[backdrop-filter]:bg-studio/60">
+      <div className="absolute border-b border-dashed w-full top-[3.4rem] -z-10"></div>
+      <nav className="h-14 w-full flex">
+        <div className="max-w-site border-b w-full flex flex-row items-center gap-6 mx-auto px-6 border-r border-l justify-between">
+          <div className="flex items-center gap-8">
+            <Link href="/">
+              <h1>Supabase Design System</h1>
+            </Link>
+            <DesignSystemMarks />
+          </div>
+          {/* {docsConfig.mainNav.map((section) => (
+            <>
+            <div className="font-mono uppercase text-xs text-foreground-lighter">
+            {section.title}
+            </div>
+            </>
+          ))} */}
+          <div className="flex items-center gap-8">
+            {/* <TopNavigationSearch /> */}
+            <CommandMenu />
+            <ThemeSwitcherDropdown />
+          </div>
+        </div>
+      </nav>
+    </header>
+  )
+}
+
+export default TopNavigation
diff --git a/apps/design-system/config/docs.ts b/apps/design-system/config/docs.ts
new file mode 100644
index 0000000000..5d56ad87a5
--- /dev/null
+++ b/apps/design-system/config/docs.ts
@@ -0,0 +1,335 @@
+import { MainNavItem, SidebarNavItem } from 'types/nav'
+
+interface DocsConfig {
+  mainNav?: MainNavItem[]
+  sidebarNav: SidebarNavItem[]
+}
+
+export const docsConfig: DocsConfig = {
+  // mainNav: [
+  //   {
+  //     title: 'Documentation',
+  //     href: '/docs',
+  //   },
+  //   {
+  //     title: 'Components',
+  //     href: '/docs/components/accordion',
+  //   },
+  //   {
+  //     title: 'Themes',
+  //     href: '/themes',
+  //   },
+  //   {
+  //     title: 'Examples',
+  //     href: '/examples',
+  //   },
+  //   {
+  //     title: 'Blocks',
+  //     href: '/blocks',
+  //   },
+  // ],
+  sidebarNav: [
+    {
+      title: 'Getting Started',
+      items: [
+        {
+          title: 'Introduction',
+          href: '/docs',
+          items: [],
+        },
+        {
+          title: 'Color usage',
+          href: '/docs/color-usage',
+          items: [],
+        },
+        {
+          title: 'Tailwind classes',
+          href: '/docs/tailwind-classes',
+          items: [],
+        },
+        {
+          title: 'Theming',
+          href: '/docs/theming',
+          items: [],
+        },
+        {
+          title: 'Icons',
+          href: '/docs/icons',
+          items: [],
+        },
+        {
+          title: 'Figma',
+          href: '/docs/figma',
+          items: [],
+        },
+        {
+          title: 'Changelog',
+          href: '/docs/changelog',
+          items: [],
+        },
+      ],
+    },
+    {
+      title: 'Fragment Components',
+      items: [
+        {
+          title: 'Text Confirm Dialog',
+          href: '/docs/fragments/text-confirm-dialog',
+          items: [],
+        },
+        {
+          title: 'Form Item Layout',
+          href: '/docs/fragments/form-item-layout',
+          items: [],
+        },
+      ],
+    },
+    {
+      title: 'Atom Components',
+      items: [
+        {
+          title: 'Accordion',
+          href: '/docs/components/accordion',
+          items: [],
+        },
+        {
+          title: 'Alert',
+          href: '/docs/components/alert',
+          items: [],
+        },
+        {
+          title: 'Alert Dialog',
+          href: '/docs/components/alert-dialog',
+          items: [],
+        },
+        {
+          title: 'Aspect Ratio',
+          href: '/docs/components/aspect-ratio',
+          items: [],
+        },
+        {
+          title: 'Avatar',
+          href: '/docs/components/avatar',
+          items: [],
+        },
+        {
+          title: 'Badge',
+          href: '/docs/components/badge',
+          items: [],
+        },
+        {
+          title: 'Breadcrumb',
+          href: '/docs/components/breadcrumb',
+          items: [],
+          label: 'New',
+        },
+        {
+          title: 'Button',
+          href: '/docs/components/button',
+          items: [],
+        },
+        {
+          title: 'Calendar',
+          href: '/docs/components/calendar',
+          items: [],
+        },
+        {
+          title: 'Card',
+          href: '/docs/components/card',
+          items: [],
+        },
+        {
+          title: 'Carousel',
+          href: '/docs/components/carousel',
+          items: [],
+        },
+        {
+          title: 'Checkbox',
+          href: '/docs/components/checkbox',
+          items: [],
+        },
+        {
+          title: 'Collapsible',
+          href: '/docs/components/collapsible',
+          items: [],
+        },
+        {
+          title: 'Combobox',
+          href: '/docs/components/combobox',
+          items: [],
+        },
+        {
+          title: 'Command',
+          href: '/docs/components/command',
+          items: [],
+        },
+        {
+          title: 'Context Menu',
+          href: '/docs/components/context-menu',
+          items: [],
+        },
+        {
+          title: 'Data Table',
+          href: '/docs/components/data-table',
+          items: [],
+        },
+        {
+          title: 'Date Picker',
+          href: '/docs/components/date-picker',
+          items: [],
+        },
+        {
+          title: 'Dialog',
+          href: '/docs/components/dialog',
+          items: [],
+        },
+        {
+          title: 'Drawer',
+          href: '/docs/components/drawer',
+          items: [],
+        },
+        {
+          title: 'Dropdown Menu',
+          href: '/docs/components/dropdown-menu',
+          items: [],
+        },
+        {
+          title: 'Form',
+          href: '/docs/components/form',
+          items: [],
+        },
+        {
+          title: 'Hover Card',
+          href: '/docs/components/hover-card',
+          items: [],
+        },
+        {
+          title: 'Input',
+          href: '/docs/components/input',
+          items: [],
+        },
+        {
+          title: 'Input OTP',
+          href: '/docs/components/input-otp',
+          items: [],
+          label: 'New',
+        },
+        {
+          title: 'Label',
+          href: '/docs/components/label',
+          items: [],
+        },
+        {
+          title: 'Menubar',
+          href: '/docs/components/menubar',
+          items: [],
+        },
+        {
+          title: 'Navigation Menu',
+          href: '/docs/components/navigation-menu',
+          items: [],
+        },
+        {
+          title: 'Pagination',
+          href: '/docs/components/pagination',
+          items: [],
+        },
+        {
+          title: 'Popover',
+          href: '/docs/components/popover',
+          items: [],
+        },
+        {
+          title: 'Progress',
+          href: '/docs/components/progress',
+          items: [],
+        },
+        {
+          title: 'Radio Group',
+          href: '/docs/components/radio-group',
+          items: [],
+        },
+        {
+          title: 'Resizable',
+          href: '/docs/components/resizable',
+          items: [],
+        },
+        {
+          title: 'Scroll Area',
+          href: '/docs/components/scroll-area',
+          items: [],
+        },
+        {
+          title: 'Select',
+          href: '/docs/components/select',
+          items: [],
+        },
+        {
+          title: 'Separator',
+          href: '/docs/components/separator',
+          items: [],
+        },
+        {
+          title: 'Sheet',
+          href: '/docs/components/sheet',
+          items: [],
+        },
+        {
+          title: 'Skeleton',
+          href: '/docs/components/skeleton',
+          items: [],
+        },
+        {
+          title: 'Slider',
+          href: '/docs/components/slider',
+          items: [],
+        },
+        {
+          title: 'Sonner',
+          href: '/docs/components/sonner',
+          items: [],
+        },
+        {
+          title: 'Switch',
+          href: '/docs/components/switch',
+          items: [],
+        },
+        {
+          title: 'Table',
+          href: '/docs/components/table',
+          items: [],
+        },
+        {
+          title: 'Tabs',
+          href: '/docs/components/tabs',
+          items: [],
+        },
+        {
+          title: 'Textarea',
+          href: '/docs/components/textarea',
+          items: [],
+        },
+        {
+          title: 'Toast',
+          href: '/docs/components/toast',
+          items: [],
+        },
+        {
+          title: 'Toggle',
+          href: '/docs/components/toggle',
+          items: [],
+        },
+        {
+          title: 'Toggle Group',
+          href: '/docs/components/toggle-group',
+          items: [],
+        },
+        {
+          title: 'Tooltip',
+          href: '/docs/components/tooltip',
+          items: [],
+        },
+      ],
+    },
+  ],
+}
diff --git a/apps/design-system/config/site.ts b/apps/design-system/config/site.ts
new file mode 100644
index 0000000000..c86298e0e3
--- /dev/null
+++ b/apps/design-system/config/site.ts
@@ -0,0 +1,17 @@
+export const siteConfig = {
+  name: 'Supabase Design System',
+  url: 'https://supabase.com/design-system',
+  ogImage: 'https://supabase.com/design-system/og.jpg',
+  description: 'Design System of Supabase',
+  links: {
+    twitter: 'https://twitter.com/supabase',
+    github: 'https://github.com/supabase/supabase/apps/design-system',
+    credits: {
+      radix: 'https://www.radix-ui.com/themes/docs/overview/getting-started',
+      shadcn: 'https://ui.shadcn.com/',
+      geist: 'https://vercel.com/geist/introduction',
+    },
+  },
+}
+
+export type SiteConfig = typeof siteConfig
diff --git a/apps/design-system/content/docs/changelog.mdx b/apps/design-system/content/docs/changelog.mdx
new file mode 100644
index 0000000000..58a251547a
--- /dev/null
+++ b/apps/design-system/content/docs/changelog.mdx
@@ -0,0 +1,31 @@
+---
+title: Changelog
+description: Latest updates and announcements.
+toc: false
+---
+
+## May 2024 - Introducing Design System
+
+We're introducing **Design System**, a home for Design related resources for Supabase
+
+<a href="/blocks">
+  <Image
+    src="/images/lift-mode-light.png"
+    width="1432"
+    height="1050"
+    alt="Lift Mode"
+    className="border dark:hidden shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <Image
+    src="/images/lift-mode-dark.png"
+    width="1432"
+    height="1069"
+    alt="Lift Mode"
+    className="border hidden dark:block shadow-sm rounded-lg overflow-hidden mt-6 w-full"
+  />
+  <span class="sr-only">View the blocks library</span>
+</a>
+
+With Lift Mode, you'll be able to copy the smaller components that make up a block template, like cards, buttons, and forms, and paste them directly into your project.
+
+Visit the [Blocks](/blocks) page to try it out.
diff --git a/apps/design-system/content/docs/color-usage.mdx b/apps/design-system/content/docs/color-usage.mdx
new file mode 100644
index 0000000000..aed6907d2b
--- /dev/null
+++ b/apps/design-system/content/docs/color-usage.mdx
@@ -0,0 +1,74 @@
+---
+title: Color usage
+description: Colors system breakdown with best practise
+---
+
+Colors available in the Supabase Design System
+
+These are examples of using colors with shorthands.
+
+## Background
+
+<Colors definition={'background'} />
+
+### App backgrounds
+
+We use backgrounds in 2 different ways. In the ./www and ./docs sites, we use a darker background, so we have an extra background color we can use
+
+```jsx
+/**
+ * ./www background color
+ * ./docs background color
+ */
+<body className="bg">{children}</body>
+
+/**
+ * ./studio background color
+ */
+<body className="bg-studio">{children}</body>
+```
+
+### Backgrounds and Surfaces
+
+#### `./apps/www` + `./apps/docs`
+
+We use surfaces in 2 different ways. In the ./www and ./docs sites, we use a darker background, so we have an extra surface color we can use
+
+<CodeFragment name="color-usage-surface-www-and-docs" />
+
+#### `./apps/studio`
+
+For the studio (dashbaord) we can use `bg-surface-100`, `bg-surface-200`, `bg-surface-300`
+
+<CodeFragment name="color-usage-surface-studio" />
+
+#### Data grid and frame space
+
+Data grids use an alternative background color for empty space to add depth to the layout.
+The background of the empty space is the same background as used in `./apps/docs` and `./apps/www` - although; the color has been mapped to `bg-alternative` so it works well across different themes.
+
+<CodeFragment name="color-usage-surface-studio-frame" />
+
+Dealing with large areas of emmpty space in data display should also be catered for. You can use the `bg-200` or `bg` class to fill the space.
+
+### Overlays
+
+We use the `./bg-overlay` background color for overlays.
+This is not to be confused with `Dialogs`, they require to use the same app background color as the site.
+
+## Border
+
+<Colors definition={'border'} />
+
+## Text
+
+These can also be accessed with `foreground`. Like `text-foreground-light`.
+
+<Colors definition={'text'} />
+
+## Other Colors
+
+These can also be accessed with `foreground`. Like `text-foreground-light`.
+
+<Colors definition={'colors'} />
+```
diff --git a/apps/design-system/content/docs/components/accordion.mdx b/apps/design-system/content/docs/components/accordion.mdx
new file mode 100644
index 0000000000..9190c8c824
--- /dev/null
+++ b/apps/design-system/content/docs/components/accordion.mdx
@@ -0,0 +1,139 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/accordion
+  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview
+  name="accordion-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+  peekCode
+  wide
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn-ui@latest add accordion
+```
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-18}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+{/* <ComponentSource name="accordion" /> */}
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-18}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+```
+
+```tsx
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
diff --git a/apps/design-system/content/docs/components/alert copy.mdx b/apps/design-system/content/docs/components/alert copy.mdx
new file mode 100644
index 0000000000..1ada949fd9
--- /dev/null
+++ b/apps/design-system/content/docs/components/alert copy.mdx	
@@ -0,0 +1,65 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+component: true
+---
+
+<ComponentPreview name="alert-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add alert
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+```
+
+```tsx
+<Alert>
+  <Terminal className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="alert-demo" peekCode wide />
+
+### Destructive
+
+<ComponentPreview name="alert-destructive" />
diff --git a/apps/design-system/content/docs/components/alert-dialog.mdx b/apps/design-system/content/docs/components/alert-dialog.mdx
new file mode 100644
index 0000000000..10c28d1f13
--- /dev/null
+++ b/apps/design-system/content/docs/components/alert-dialog.mdx
@@ -0,0 +1,87 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
+  api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="alert-dialog-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add alert-dialog
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert-dialog" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+```
+
+```tsx
+<AlertDialog>
+  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
diff --git a/apps/design-system/content/docs/components/alert.mdx b/apps/design-system/content/docs/components/alert.mdx
new file mode 100644
index 0000000000..0f0a031a2a
--- /dev/null
+++ b/apps/design-system/content/docs/components/alert.mdx
@@ -0,0 +1,79 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+component: true
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview
+  name="alert-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  peekCode
+  wide
+/>
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add alert
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="alert" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+```
+
+```tsx
+<Alert>
+  <Terminal className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components and dependencies to your app using the cli.
+  </AlertDescription>
+</Alert>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview
+  name="alert-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+### Destructive
+
+<ComponentPreview
+  name="alert-destructive"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
diff --git a/apps/design-system/content/docs/components/aspect-ratio.mdx b/apps/design-system/content/docs/components/aspect-ratio.mdx
new file mode 100644
index 0000000000..4ddf98dfdd
--- /dev/null
+++ b/apps/design-system/content/docs/components/aspect-ratio.mdx
@@ -0,0 +1,67 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
+  api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="aspect-ratio-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add aspect-ratio
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="aspect-ratio" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import Image from 'next/image'
+
+import { AspectRatio } from '@/components/ui/aspect-ratio'
+```
+
+```tsx
+<div className="w-[450px]">
+  <AspectRatio ratio={16 / 9}>
+    <Image src="..." alt="Image" className="rounded-md object-cover" />
+  </AspectRatio>
+</div>
+```
diff --git a/apps/design-system/content/docs/components/avatar.mdx b/apps/design-system/content/docs/components/avatar.mdx
new file mode 100644
index 0000000000..f6fda6a3d8
--- /dev/null
+++ b/apps/design-system/content/docs/components/avatar.mdx
@@ -0,0 +1,64 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/avatar
+  api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="avatar-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add avatar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-avatar
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="avatar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+```
+
+```tsx
+<Avatar>
+  <AvatarImage src="https://github.com/mildtomato.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+```
diff --git a/apps/design-system/content/docs/components/badge.mdx b/apps/design-system/content/docs/components/badge.mdx
new file mode 100644
index 0000000000..d5b22c47a7
--- /dev/null
+++ b/apps/design-system/content/docs/components/badge.mdx
@@ -0,0 +1,87 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="badge-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add badge
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="badge" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Badge } from '@/components/ui/badge'
+```
+
+```tsx
+<Badge variant="outline">Badge</Badge>
+```
+
+### Link
+
+You can use the `badgeVariants` helper to create a link that looks like a badge.
+
+```tsx
+import { badgeVariants } from '@/components/ui/badge'
+```
+
+```tsx
+<Link className={badgeVariants({ variant: 'outline' })}>Badge</Link>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="badge-demo" peekCode wide />
+
+---
+
+### Secondary
+
+<ComponentPreview name="badge-secondary" />
+
+---
+
+### Outline
+
+<ComponentPreview name="badge-outline" />
+
+---
+
+### Destructive
+
+<ComponentPreview name="badge-destructive" />
diff --git a/apps/design-system/content/docs/components/breadcrumb.mdx b/apps/design-system/content/docs/components/breadcrumb.mdx
new file mode 100644
index 0000000000..4665d2938b
--- /dev/null
+++ b/apps/design-system/content/docs/components/breadcrumb.mdx
@@ -0,0 +1,190 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+component: true
+---
+
+<ComponentPreview name="breadcrumb-demo" className="[&_.preview]:p-2" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add breadcrumb
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="breadcrumb" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+```
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+## Examples
+
+### Custom separator
+
+Use a custom component as `children` for `<BreadcrumbSeparator />` to create a custom separator.
+
+<ComponentPreview name="breadcrumb-separator" />
+
+```tsx showLineNumbers {1,10-12}
+import { Slash } from "lucide-react"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>
+      <Slash />
+    </BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Dropdown
+
+You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
+
+<ComponentPreview name="breadcrumb-dropdown" className="[&_.preview]:p-2" />
+
+```tsx showLineNumbers {1-6,11-21}
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+...
+
+<BreadcrumbItem>
+  <DropdownMenu>
+    <DropdownMenuTrigger className="flex items-center gap-1">
+      Components
+      <ChevronDownIcon />
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuItem>Documentation</DropdownMenuItem>
+      <DropdownMenuItem>Themes</DropdownMenuItem>
+      <DropdownMenuItem>GitHub</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</BreadcrumbItem>
+```
+
+---
+
+### Collapsed
+
+We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
+
+<ComponentPreview name="breadcrumb-ellipsis" className="[&_.preview]:p-2" />
+
+```tsx showLineNumbers {1,9}
+import { BreadcrumbEllipsis } from "@/components/ui/breadcrumb"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    {/* ... */}
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    {/* ... */}
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Link component
+
+To use a custom link component from your routing library, you can use the `asChild` prop on `<BreadcrumbLink />`.
+
+<ComponentPreview name="breadcrumb-link" />
+
+```tsx showLineNumbers {1,8-10}
+import { Link } from "next/link"
+
+...
+
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link href="/">Home</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    {/* ... */}
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+---
+
+### Responsive
+
+Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, `<DropdownMenu />`, and `<Drawer />`.
+
+It displays a dropdown on desktop and a drawer on mobile.
+
+<ComponentPreview name="breadcrumb-responsive" className="[&_.preview]:p-2" />
diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
new file mode 100644
index 0000000000..f2bb59be55
--- /dev/null
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -0,0 +1,118 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+featured: true
+component: true
+---
+
+<ComponentPreview name="button-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add button
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slot
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="button" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Button } from '@/components/ui/button'
+```
+
+```tsx
+<Button variant="outline">Button</Button>
+```
+
+## Link
+
+You can use the `buttonVariants` helper to create a link that looks like a button.
+
+```tsx
+import { buttonVariants } from '@/components/ui/button'
+```
+
+```tsx
+<Link className={buttonVariants({ variant: 'outline' })}>Click here</Link>
+```
+
+Alternatively, you can set the `asChild` parameter and nest the link component.
+
+```tsx
+<Button asChild>
+  <Link href="/login">Login</Link>
+</Button>
+```
+
+## Examples
+
+### Primary
+
+<ComponentPreview name="button-demo" peekCode wide />
+
+### Secondary
+
+<ComponentPreview name="button-secondary" />
+
+### Destructive
+
+<ComponentPreview name="button-destructive" />
+
+### Outline
+
+<ComponentPreview name="button-outline" />
+
+### Ghost
+
+<ComponentPreview name="button-ghost" />
+
+### Link
+
+<ComponentPreview name="button-link" />
+
+### Icon
+
+<ComponentPreview name="button-icon" />
+
+### With Icon
+
+<ComponentPreview name="button-with-icon" />
+
+### Loading
+
+<ComponentPreview name="button-loading" />
+
+### As Child
+
+<ComponentPreview name="button-as-child" />
diff --git a/apps/design-system/content/docs/components/calendar.mdx b/apps/design-system/content/docs/components/calendar.mdx
new file mode 100644
index 0000000000..9b1d4187cb
--- /dev/null
+++ b/apps/design-system/content/docs/components/calendar.mdx
@@ -0,0 +1,81 @@
+---
+title: Calendar
+description: A date field component that allows users to enter and edit date.
+component: true
+links:
+  doc: https://react-day-picker.js.org
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="calendar-demo" peekCode wide />
+
+## About
+
+The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add calendar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-day-picker date-fns
+```
+
+<Step>Add the `Button` component to your project.</Step>
+
+The `Calendar` component uses the `Button` component. Make sure you have it installed in your project.
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="calendar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Calendar } from '@/components/ui/calendar'
+```
+
+```tsx
+const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Date Picker
+
+You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
+
+## Examples
+
+### Form
+
+<ComponentPreview name="calendar-form" />
diff --git a/apps/design-system/content/docs/components/card.mdx b/apps/design-system/content/docs/components/card.mdx
new file mode 100644
index 0000000000..32bfdc8ec0
--- /dev/null
+++ b/apps/design-system/content/docs/components/card.mdx
@@ -0,0 +1,71 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+component: true
+---
+
+<ComponentPreview name="card-with-form" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add card
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="card" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+```
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+```
+
+## Examples
+
+<ComponentPreview name="card-demo" peekCode wide />
diff --git a/apps/design-system/content/docs/components/carousel.mdx b/apps/design-system/content/docs/components/carousel.mdx
new file mode 100644
index 0000000000..71f3806892
--- /dev/null
+++ b/apps/design-system/content/docs/components/carousel.mdx
@@ -0,0 +1,277 @@
+---
+title: Carousel
+description: A carousel with motion and swipe built using Embla.
+component: true
+links:
+  doc: https://www.embla-carousel.com/get-started/react
+  api: https://www.embla-carousel.com/api
+---
+
+<ComponentPreview name="carousel-demo" peekCode wide />
+
+## About
+
+The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/) library.
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add carousel
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install embla-carousel-react
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="carousel" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/components/ui/carousel'
+```
+
+```tsx
+<Carousel>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+
+## Examples
+
+### Sizes
+
+To set the size of the items, you can use the `basis` utility class on the `<CarouselItem />`.
+
+<ComponentPreview name="carousel-size" />
+
+```tsx title="Example" showLineNumbers {4-6}
+// 33% of the carousel width.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+    <CarouselItem className="basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+```tsx title="Responsive" showLineNumbers {4-6}
+// 50% on small screens and 33% on larger screens.
+<Carousel>
+  <CarouselContent>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+    <CarouselItem className="md:basis-1/2 lg:basis-1/3">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+### Spacing
+
+To set the spacing between the items, we use a `pl-[VALUE]` utility on the `<CarouselItem />` and a negative `-ml-[VALUE]` on the `<CarouselContent />`.
+
+<Callout className="mt-6">
+  **Why:** I tried to use the `gap` property or a `grid` layout on the `
+  <CarouselContent />` but it required a lot of math and mental effort to get the
+  spacing right. I found `pl-[VALUE]` and `-ml-[VALUE]` utilities much easier to
+  use.
+
+You can always adjust this in your own project if you need to.
+
+</Callout>
+
+<ComponentPreview name="carousel-spacing" />
+
+```tsx title="Example" showLineNumbers /-ml-4/ /pl-4/
+<Carousel>
+  <CarouselContent className="-ml-4">
+    <CarouselItem className="pl-4">...</CarouselItem>
+    <CarouselItem className="pl-4">...</CarouselItem>
+    <CarouselItem className="pl-4">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+```tsx title="Responsive" showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+<Carousel>
+  <CarouselContent className="-ml-2 md:-ml-4">
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+    <CarouselItem className="pl-2 md:pl-4">...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+<ComponentPreview name="carousel-orientation" />
+
+```tsx showLineNumbers /vertical | horizontal/
+<Carousel orientation="vertical | horizontal">
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## Options
+
+You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
+
+```tsx showLineNumbers {2-5}
+<Carousel
+  opts={{
+    align: 'start',
+    loop: true,
+  }}
+>
+  <CarouselContent>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+    <CarouselItem>...</CarouselItem>
+  </CarouselContent>
+</Carousel>
+```
+
+## API
+
+Use a state and the `setApi` props to get an instance of the carousel API.
+
+<ComponentPreview name="carousel-api" />
+
+```tsx showLineNumbers {1,4,22}
+import { type CarouselApi } from '@/components/ui/carousel'
+
+export function Example() {
+  const [api, setApi] = React.useState<CarouselApi>()
+  const [current, setCurrent] = React.useState(0)
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
+
+  return (
+    <Carousel setApi={setApi}>
+      <CarouselContent>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  )
+}
+```
+
+## Events
+
+You can listen to events using the api instance from `setApi`.
+
+```tsx showLineNumbers {1,4-14,16}
+import { type CarouselApi } from '@/components/ui/carousel'
+
+export function Example() {
+  const [api, setApi] = React.useState<CarouselApi>()
+
+  React.useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    api.on('select', () => {
+      // Do something on select.
+    })
+  }, [api])
+
+  return (
+    <Carousel setApi={setApi}>
+      <CarouselContent>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+        <CarouselItem>...</CarouselItem>
+      </CarouselContent>
+    </Carousel>
+  )
+}
+```
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```ts showLineNumbers {1,6-10}
+import Autoplay from "embla-carousel-autoplay"
+
+export function Example() {
+  return (
+    <Carousel
+      plugins={[
+        Autoplay({
+          delay: 2000,
+        }),
+      ]}
+    >
+      // ...
+    </Carousel>
+  )
+}
+```
+
+<ComponentPreview name="carousel-plugin" />
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.
diff --git a/apps/design-system/content/docs/components/checkbox.mdx b/apps/design-system/content/docs/components/checkbox.mdx
new file mode 100644
index 0000000000..fc7b7180d4
--- /dev/null
+++ b/apps/design-system/content/docs/components/checkbox.mdx
@@ -0,0 +1,77 @@
+---
+title: Checkbox
+description: A control that allows the user to toggle between checked and not checked.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/checkbox
+  api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="checkbox-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add checkbox
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-checkbox
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="checkbox" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox'
+```
+
+```tsx
+<Checkbox />
+```
+
+## Examples
+
+### With text
+
+<ComponentPreview name="checkbox-with-text" />
+
+### Disabled
+
+<ComponentPreview name="checkbox-disabled" />
+
+### Form
+
+<ComponentPreview name="checkbox-form-single" />
+
+<ComponentPreview name="checkbox-form-multiple" />
diff --git a/apps/design-system/content/docs/components/collapsible.mdx b/apps/design-system/content/docs/components/collapsible.mdx
new file mode 100644
index 0000000000..3f5be4bb44
--- /dev/null
+++ b/apps/design-system/content/docs/components/collapsible.mdx
@@ -0,0 +1,67 @@
+---
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+component: true
+featured: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
+  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="collapsible-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add collapsible
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-collapsible
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="collapsible" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+```
+
+```tsx
+<Collapsible>
+  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+  <CollapsibleContent>
+    Yes. Free to use for personal and commercial projects. No attribution required.
+  </CollapsibleContent>
+</Collapsible>
+```
diff --git a/apps/design-system/content/docs/components/combobox.mdx b/apps/design-system/content/docs/components/combobox.mdx
new file mode 100644
index 0000000000..209f3a5478
--- /dev/null
+++ b/apps/design-system/content/docs/components/combobox.mdx
@@ -0,0 +1,131 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="combobox-demo" peekCode />
+
+## Installation
+
+The Combobox is built using a composition of the `<Popover />` and the `<Command />` components.
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Command](/docs/components/command#installation) components.
+
+## Usage
+
+```tsx
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+} from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+const frameworks = [
+  {
+    value: 'next.js',
+    label: 'Next.js',
+  },
+  {
+    value: 'sveltekit',
+    label: 'SvelteKit',
+  },
+  {
+    value: 'nuxt.js',
+    label: 'Nuxt.js',
+  },
+  {
+    value: 'remix',
+    label: 'Remix',
+  },
+  {
+    value: 'astro',
+    label: 'Astro',
+  },
+]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('')
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : 'Select framework...'}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder="Search framework..." />
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                value={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? '' : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    value === framework.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+## Examples
+
+### Combobox
+
+<ComponentPreview name="combobox-demo" peekCode wide />
+
+### Popover
+
+<ComponentPreview name="combobox-popover" />
+
+### Dropdown menu
+
+<ComponentPreview name="combobox-dropdown-menu" />
+
+### Responsive
+
+You can create a responsive combobox by using the `<Popover />` on desktop and the `<Drawer />` components on mobile.
+
+<ComponentPreview name="combobox-responsive" />
+
+### Form
+
+<ComponentPreview name="combobox-form" />
diff --git a/apps/design-system/content/docs/components/command.mdx b/apps/design-system/content/docs/components/command.mdx
new file mode 100644
index 0000000000..cae6977b6e
--- /dev/null
+++ b/apps/design-system/content/docs/components/command.mdx
@@ -0,0 +1,138 @@
+---
+title: Command
+description: Fast, composable, unstyled command menu for React.
+component: true
+links:
+  doc: https://cmdk.paco.me
+source:
+  shadcn: true
+---
+
+<ComponentPreview
+  name="command-demo"
+  align="start"
+  className="[&_.preview>div]:max-w-[450px]"
+  peekCode
+  wide
+/>
+
+## About
+
+The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by [pacocoursey](https://twitter.com/pacocoursey).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add command
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install cmdk
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="command" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@/components/ui/command'
+```
+
+```tsx
+<Command>
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>Calendar</CommandItem>
+      <CommandItem>Search Emoji</CommandItem>
+      <CommandItem>Calculator</CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Settings">
+      <CommandItem>Profile</CommandItem>
+      <CommandItem>Billing</CommandItem>
+      <CommandItem>Settings</CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>
+```
+
+## Examples
+
+### Dialog
+
+<ComponentPreview name="command-dialog" />
+
+To show the command menu in a dialog, use the `<CommandDialog />` component.
+
+```tsx
+export function CommandMenu() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Calculator</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  )
+}
+```
+
+### Combobox
+
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
diff --git a/apps/design-system/content/docs/components/context-menu.mdx b/apps/design-system/content/docs/components/context-menu.mdx
new file mode 100644
index 0000000000..4bd06b6baa
--- /dev/null
+++ b/apps/design-system/content/docs/components/context-menu.mdx
@@ -0,0 +1,74 @@
+---
+title: Context Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
+  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="context-menu-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add context-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="context-menu" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@/components/ui/context-menu'
+```
+
+```tsx
+<ContextMenu>
+  <ContextMenuTrigger>Right click</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Profile</ContextMenuItem>
+    <ContextMenuItem>Billing</ContextMenuItem>
+    <ContextMenuItem>Team</ContextMenuItem>
+    <ContextMenuItem>Subscription</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
diff --git a/apps/design-system/content/docs/components/data-table.mdx b/apps/design-system/content/docs/components/data-table.mdx
new file mode 100644
index 0000000000..d2e6620145
--- /dev/null
+++ b/apps/design-system/content/docs/components/data-table.mdx
@@ -0,0 +1,842 @@
+---
+title: Data Table
+description: Powerful table and datagrids built using TanStack Table.
+component: true
+links:
+  doc: https://tanstack.com/table/v8/docs/guide/introduction
+---
+
+<ComponentPreview name="data-table-demo" peekCode wide />
+
+## Introduction
+
+Every data table or datagrid I've created has been unique. They all behave differently, have specific sorting and filtering requirements, and work with different data sources.
+
+It doesn't make sense to combine all of these variations into a single component. If we do that, we'll lose the flexibility that [headless UI](https://tanstack.com/table/v8/docs/guide/introduction#what-is-headless-ui) provides.
+
+So instead of a data-table component, I thought it would be more helpful to provide a guide on how to build your own.
+
+We'll start with the basic `<Table />` component and build a complex data table from scratch.
+
+<Callout className="mt-4">
+
+**Tip:** If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component.
+
+</Callout>
+
+## Table of Contents
+
+This guide will show you how to use [TanStack Table](https://tanstack.com/table) and the `<Table />` component to build your own custom data table. We'll cover the following topics:
+
+- [Basic Table](#basic-table)
+- [Row Actions](#row-actions)
+- [Pagination](#pagination)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Visibility](#visibility)
+- [Row Selection](#row-selection)
+- [Reusable Components](#reusable-components)
+
+## Installation
+
+1. Add the `<Table />` component to your project:
+
+```bash
+npx shadcn-ui@latest add table
+```
+
+2. Add `tanstack/react-table` dependency:
+
+```bash
+npm install @tanstack/react-table
+```
+
+## Prerequisites
+
+We are going to build a table to show recent payments. Here's what our data looks like:
+
+```tsx showLineNumbers
+type Payment = {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+export const payments: Payment[] = [
+  {
+    id: '728ed52f',
+    amount: 100,
+    status: 'pending',
+    email: 'm@example.com',
+  },
+  {
+    id: '489e1d42',
+    amount: 125,
+    status: 'processing',
+    email: 'example@gmail.com',
+  },
+  // ...
+]
+```
+
+## Project Structure
+
+Start by creating the following file structure:
+
+```txt
+app
+└── payments
+    ├── columns.tsx
+    ├── data-table.tsx
+    └── page.tsx
+```
+
+I'm using a Next.js example here but this works for any other React framework.
+
+- `columns.tsx` (client component) will contain our column definitions.
+- `data-table.tsx` (client component) will contain our `<DataTable />` component.
+- `page.tsx` (server component) is where we'll fetch data and render our table.
+
+## Basic Table
+
+Let's start by building a basic table.
+
+<Steps>
+
+### Column Definitions
+
+First, we'll define our columns.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {3,14-27}
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Payment = {
+  id: string
+  amount: number
+  status: 'pending' | 'processing' | 'success' | 'failed'
+  email: string
+}
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'status',
+    header: 'Status',
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+  },
+]
+```
+
+<Callout className="mt-4">
+
+**Note:** Columns are where you define the core of what your table
+will look like. They define the data that will be displayed, how it will be
+formatted, sorted and filtered.
+
+</Callout>
+
+### `<DataTable />` component
+
+Next, we'll create a `<DataTable />` component to render our table.
+
+```tsx showLineNumbers title="app/payments/data-table.tsx"
+'use client'
+
+import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+```
+
+<Callout>
+
+**Tip**: If you find yourself using `<DataTable />` in multiple places, this is the component you could make reusable by extracting it to `components/ui/data-table.tsx`.
+
+`<DataTable columns={columns} data={data} />`
+
+</Callout>
+
+### Render the table
+
+Finally, we'll render our table in our page component.
+
+```tsx showLineNumbers title="app/payments/page.tsx" {22}
+import { Payment, columns } from './columns'
+import { DataTable } from './data-table'
+
+async function getData(): Promise<Payment[]> {
+  // Fetch data from your API here.
+  return [
+    {
+      id: '728ed52f',
+      amount: 100,
+      status: 'pending',
+      email: 'm@example.com',
+    },
+    // ...
+  ]
+}
+
+export default async function DemoPage() {
+  const data = await getData()
+
+  return (
+    <div className="container mx-auto py-10">
+      <DataTable columns={columns} data={data} />
+    </div>
+  )
+}
+```
+
+</Steps>
+
+## Cell Formatting
+
+Let's format the amount cell to display the dollar amount. We'll also align the cell to the right.
+
+<Steps>
+
+### Update columns definition
+
+Update the `header` and `cell` definitions for amount as follows:
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4-15}
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'amount',
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }) => {
+      const amount = parseFloat(row.getValue('amount'))
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount)
+
+      return <div className="text-right font-medium">{formatted}</div>
+    },
+  },
+]
+```
+
+You can use the same approach to format other cells and headers.
+
+</Steps>
+
+## Row Actions
+
+Let's add row actions to our table. We'll use a `<Dropdown />` component for this.
+
+<Steps>
+
+### Update columns definition
+
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,6-14,18-45}
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { MoreHorizontal } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+export const columns: ColumnDef<Payment>[] = [
+  // ...
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const payment = row.original
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem onClick={() => navigator.clipboard.writeText(payment.id)}>
+              Copy payment ID
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>View customer</DropdownMenuItem>
+            <DropdownMenuItem>View payment details</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+  // ...
+]
+```
+
+You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
+
+</Steps>
+
+## Pagination
+
+Next, we'll add pagination to our table.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {5,17}
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  // ...
+}
+```
+
+This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
+
+### Add pagination controls
+
+We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {1,15,21-39}
+import { Button } from "@/components/ui/button"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table>
+          { // .... }
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  )
+}
+```
+
+See [Reusable Components](#reusable-components) section for a more advanced pagination component.
+
+</Steps>
+
+## Sorting
+
+Let's make the email column sortable.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" showLineNumbers {3,6,10,18,25-28}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  })
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+### Make header cell sortable
+
+We can now update the `email` header cell to add sorting controls.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,9-19}
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      )
+    },
+  },
+]
+```
+
+This will automatically sort the table (asc and desc) when the user toggles on the header cell.
+
+</Steps>
+
+## Filtering
+
+Let's add a search input to filter emails in our table.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {6,10,17,24-26,35-36,39,45-54}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters,
+    },
+  })
+
+  return (
+    <div>
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+      </div>
+      <div className="rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+Filtering is now enabled for the `email` column. You can add filters to other columns as well. See the [filtering docs](https://tanstack.com/table/v8/docs/guide/filters) for more information on customizing filters.
+
+</Steps>
+
+## Visibility
+
+Adding column visibility is fairly simple using `@tanstack/react-table` visibility API.
+
+<Steps>
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {8,18-23,33-34,45,49,64-91}
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  )
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  })
+
+  return (
+    <div>
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Filter emails..."
+          value={table.getColumn("email")?.getFilterValue() as string}
+          onChange={(event) =>
+            table.getColumn("email")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter(
+                (column) => column.getCanHide()
+              )
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>{ ... }</Table>
+      </div>
+    </div>
+  )
+}
+```
+
+This adds a dropdown menu that you can use to toggle column visibility.
+
+</Steps>
+
+## Row Selection
+
+Next, we're going to add row selection to our table.
+
+<Steps>
+
+### Update column definitions
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {6,9-27}
+'use client'
+
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Badge } from '@/components/ui/badge'
+import { Checkbox } from '@/components/ui/checkbox'
+
+export const columns: ColumnDef<Payment>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+]
+```
+
+### Update `<DataTable>`
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {11,23,28}
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = React.useState({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table />
+      </div>
+    </div>
+  )
+}
+```
+
+This adds a checkbox to each row and a checkbox in the header to select all rows.
+
+### Show selected rows
+
+You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
+
+```tsx
+<div className="flex-1 text-sm text-muted-foreground">
+  {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length}{' '}
+  row(s) selected.
+</div>
+```
+
+</Steps>
+
+## Reusable Components
+
+Here are some components you can use to build your data tables. This is from the [Tasks](/examples/tasks) demo.
+
+### Column header
+
+Make any column header sortable and hideable.
+
+<ComponentSource src="/app/(app)/examples/tasks/components/data-table-column-header.tsx" />
+
+```tsx {5}
+export const columns = [
+  {
+    accessorKey: 'email',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
+  },
+]
+```
+
+### Pagination
+
+Add pagination controls to your table including page size and selection count.
+
+<ComponentSource src="/app/(app)/examples/tasks/components/data-table-pagination.tsx" />
+
+```tsx
+<DataTablePagination table={table} />
+```
+
+### Column toggle
+
+A component to toggle column visibility.
+
+<ComponentSource src="/app/(app)/examples/tasks/components/data-table-view-options.tsx" />
+
+```tsx
+<DataTableViewOptions table={table} />
+```
diff --git a/apps/design-system/content/docs/components/date-picker.mdx b/apps/design-system/content/docs/components/date-picker.mdx
new file mode 100644
index 0000000000..0848ee3bdb
--- /dev/null
+++ b/apps/design-system/content/docs/components/date-picker.mdx
@@ -0,0 +1,74 @@
+---
+title: Date Picker
+description: A date picker component with range and presets.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="date-picker-demo" peekCode wide />
+
+## Installation
+
+The Date Picker is built using a composition of the `<Popover />` and the `<Calendar />` components.
+
+See installation instructions for the [Popover](/docs/components/popover#installation) and the [Calendar](/docs/components/calendar#installation) components.
+
+## Usage
+
+```tsx
+'use client'
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={'outline'}
+          className={cn(
+            'w-[280px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, 'PPP') : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+      </PopoverContent>
+    </Popover>
+  )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date Picker
+
+<ComponentPreview name="date-picker-demo" peekCode wide />
+
+### Date Range Picker
+
+<ComponentPreview name="date-picker-with-range" />
+
+### With Presets
+
+<ComponentPreview name="date-picker-with-presets" />
+
+### Form
+
+<ComponentPreview name="date-picker-form" />
diff --git a/apps/design-system/content/docs/components/dialog.mdx b/apps/design-system/content/docs/components/dialog.mdx
new file mode 100644
index 0000000000..47d29e96eb
--- /dev/null
+++ b/apps/design-system/content/docs/components/dialog.mdx
@@ -0,0 +1,120 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="dialog-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add dialog
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="dialog" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+```
+
+```tsx
+<Dialog>
+  <DialogTrigger>Open</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </DialogDescription>
+    </DialogHeader>
+  </DialogContent>
+</Dialog>
+```
+
+## Examples
+
+### Custom close button
+
+<ComponentPreview name="dialog-close-button" />
+
+## Notes
+
+To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or
+`Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
+
+```tsx {14-25}
+<Dialog>
+  <ContextMenu>
+    <ContextMenuTrigger>Right click</ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuItem>Open</ContextMenuItem>
+      <ContextMenuItem>Download</ContextMenuItem>
+      <DialogTrigger asChild>
+        <ContextMenuItem>
+          <span>Delete</span>
+        </ContextMenuItem>
+      </DialogTrigger>
+    </ContextMenuContent>
+  </ContextMenu>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. Are you sure you want to permanently delete this file from our
+        servers?
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button type="submit">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
diff --git a/apps/design-system/content/docs/components/drawer.mdx b/apps/design-system/content/docs/components/drawer.mdx
new file mode 100644
index 0000000000..1767e43266
--- /dev/null
+++ b/apps/design-system/content/docs/components/drawer.mdx
@@ -0,0 +1,95 @@
+---
+title: Drawer
+description: A drawer component for React.
+component: true
+links:
+  doc: https://github.com/emilkowalski/vaul
+source:
+  vaul: true
+  shadcn: true
+---
+
+<ComponentPreview name="drawer-demo" peekCode wide />
+
+## About
+
+Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilkowalski\_](https://twitter.com/emilkowalski_).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add drawer
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install vaul
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="drawer" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx showLineNumbers
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+```
+
+```tsx showLineNumbers
+<Drawer>
+  <DrawerTrigger>Open</DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+      <DrawerDescription>This action cannot be undone.</DrawerDescription>
+    </DrawerHeader>
+    <DrawerFooter>
+      <Button>Submit</Button>
+      <DrawerClose>
+        <Button variant="outline">Cancel</Button>
+      </DrawerClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```
+
+## Examples
+
+### Responsive Dialog
+
+You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
+
+<ComponentPreview name="drawer-dialog" />
diff --git a/apps/design-system/content/docs/components/dropdown-menu.mdx b/apps/design-system/content/docs/components/dropdown-menu.mdx
new file mode 100644
index 0000000000..daccc38aa8
--- /dev/null
+++ b/apps/design-system/content/docs/components/dropdown-menu.mdx
@@ -0,0 +1,95 @@
+---
+title: Dropdown Menu
+description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
+featured: true
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
+  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="dropdown-menu-demo" peekCode wide />
+
+## Installation
+
+So I guess I can write anything i want in here.
+
+## Props
+
+{/* <ComponentProps component={'/Dropdown'} foo="world" /> */}
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add dropdown-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dropdown-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+{/* <ComponentSource name="dropdown-menu" /> */}
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+```
+
+```tsx
+<DropdownMenu>
+  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem>Profile</DropdownMenuItem>
+    <DropdownMenuItem>Billing</DropdownMenuItem>
+    <DropdownMenuItem>Team</DropdownMenuItem>
+    <DropdownMenuItem>Subscription</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## Examples
+
+### Checkboxes
+
+<ComponentPreview name="dropdown-menu-checkboxes" />
+
+### Radio Group
+
+<ComponentPreview name="dropdown-menu-radio-group" />
diff --git a/apps/design-system/content/docs/components/form.mdx b/apps/design-system/content/docs/components/form.mdx
new file mode 100644
index 0000000000..f69cff2305
--- /dev/null
+++ b/apps/design-system/content/docs/components/form.mdx
@@ -0,0 +1,255 @@
+---
+title: React Hook Form
+description: Building forms with React Hook Form and Zod.
+links:
+  doc: https://react-hook-form.com
+source:
+  shadcn: true
+---
+
+Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.
+
+Well-designed HTML forms are:
+
+- Well-structured and semantically correct.
+- Easy to use and navigate (keyboard).
+- Accessible with ARIA attributes and proper labels.
+- Has support for client and server side validation.
+- Well-styled and consistent with the rest of the application.
+
+In this guide, we will take a look at building forms with [`react-hook-form`](https://react-hook-form.com/) and [`zod`](https://zod.dev). We're going to use a `<FormField>` component to compose accessible forms using Radix UI components.
+
+## Features
+
+The `<Form />` component is a wrapper around the `react-hook-form` library. It provides a few things:
+
+- Composable components for building forms.
+- A `<FormField />` component for building controlled form fields.
+- Form validation using `zod`.
+- Handles accessibility and error messages.
+- Uses `React.useId()` for generating unique IDs.
+- Applies the correct `aria` attributes to form fields based on states.
+- Built to work with all Radix UI components.
+- Bring your own schema library. We use `zod` but you can use anything you want.
+- **You have full control over the markup and styling.**
+
+## Anatomy
+
+```tsx
+<Form>
+  <FormField
+    control={...}
+    name="..."
+    render={() => (
+      <FormItem>
+        <FormLabel />
+        <FormControl>
+          { /* Your form field */}
+        </FormControl>
+        <FormDescription />
+        <FormMessage />
+      </FormItem>
+    )}
+  />
+</Form>
+```
+
+## Example
+
+```tsx
+const form = useForm()
+
+<FormField
+  control={form.control}
+  name="username"
+  render={({ field }) => (
+    <FormItem>
+      <FormLabel>Username</FormLabel>
+      <FormControl>
+        <Input placeholder="shadcn" {...field} />
+      </FormControl>
+      <FormDescription>This is your public display name.</FormDescription>
+      <FormMessage />
+    </FormItem>
+  )}
+/>
+```
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+### Command
+
+```bash
+npx shadcn-ui@latest add form
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="form" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+<Steps>
+
+### Create a form schema
+
+Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev).
+
+```tsx showLineNumbers {3,5-7}
+'use client'
+
+import { z } from 'zod'
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+})
+```
+
+### Define a form
+
+Use the `useForm` hook from `react-hook-form` to create a form.
+
+```tsx showLineNumbers {3-4,14-20,22-27}
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+})
+
+export function ProfileForm() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+    },
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+  }
+}
+```
+
+Since `FormField` is using a controlled component, you need to provide a default value for the field. See the [React Hook Form docs](https://react-hook-form.com/docs/usecontroller) to learn more about controlled components.
+
+### Build your form
+
+We can now use the `<Form />` components to build our form.
+
+```tsx showLineNumbers {7-17,28-50}
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+})
+
+export function ProfileForm() {
+  // ...
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>This is your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
+```
+
+### Done
+
+That's it. You now have a fully accessible form that is type-safe with client-side validation.
+
+<ComponentPreview
+  name="input-form"
+  className="[&_[role=tablist]]:hidden [&>div>div:first-child]:hidden"
+/>
+
+</Steps>
+
+## Examples
+
+See the following links for more examples on how to use the `<Form />` component with other components:
+
+- [Checkbox](/docs/components/checkbox#form)
+- [Date Picker](/docs/components/date-picker#form)
+- [Input](/docs/components/input#form)
+- [Radio Group](/docs/components/radio-group#form)
+- [Select](/docs/components/select#form)
+- [Switch](/docs/components/switch#form)
+- [Textarea](/docs/components/textarea#form)
+- [Combobox](/docs/components/combobox#form)
diff --git a/apps/design-system/content/docs/components/hover-card.mdx b/apps/design-system/content/docs/components/hover-card.mdx
new file mode 100644
index 0000000000..7d666ede67
--- /dev/null
+++ b/apps/design-system/content/docs/components/hover-card.mdx
@@ -0,0 +1,64 @@
+---
+title: Hover Card
+description: For sighted users to preview content available behind a link.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/hover-card
+  api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="hover-card-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add hover-card
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-hover-card
+```
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="hover-card" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
+```
+
+```tsx
+<HoverCard>
+  <HoverCardTrigger>Hover</HoverCardTrigger>
+  <HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
+</HoverCard>
+```
diff --git a/apps/design-system/content/docs/components/input-otp.mdx b/apps/design-system/content/docs/components/input-otp.mdx
new file mode 100644
index 0000000000..6743207ab8
--- /dev/null
+++ b/apps/design-system/content/docs/components/input-otp.mdx
@@ -0,0 +1,191 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+component: true
+links:
+  doc: https://input-otp.rodz.dev
+source:
+  shadcn: true
+  inputOtp: true
+---
+
+<ComponentPreview name="input-otp-demo" peekCode wide />
+
+## About
+
+Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-otp) by [@guilherme_rodz](https://twitter.com/guilherme_rodz).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn-ui@latest add input-otp
+```
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js showLineNumbers title="tailwind.config.js" {6-9,12}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
+        },
+      },
+      animation: {
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install input-otp
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input-otp" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js showLineNumbers title="tailwind.config.js" {6-9,12}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        'caret-blink': {
+          '0%,70%,100%': { opacity: '1' },
+          '20%,50%': { opacity: '0' },
+        },
+      },
+      animation: {
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
+      },
+    },
+  },
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@/components/ui/input-otp'
+```
+
+```tsx
+<InputOTP maxLength={6}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+## Examples
+
+### Pattern
+
+Use the `pattern` prop to define a custom pattern for the OTP input.
+
+<ComponentPreview name="input-otp-pattern" />
+
+```tsx showLineNumbers {1,7}
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+
+...
+
+<InputOTP
+  maxLength={6}
+  pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
+>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    {/* ... */}
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Separator
+
+You can use the `<InputOTPSeparator />` component to add a separator between the input groups.
+
+<ComponentPreview name="input-otp-separator" />
+
+```tsx showLineNumbers {4,15}
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp"
+
+...
+
+<InputOTP maxLength={4}>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={2} />
+    <InputOTPSlot index={3} />
+  </InputOTPGroup>
+</InputOTP>
+```
+
+### Controlled
+
+You can use the `value` and `onChange` props to control the input value.
+
+<ComponentPreview name="input-otp-controlled" />
+
+### Form
+
+<ComponentPreview name="input-otp-form" />
diff --git a/apps/design-system/content/docs/components/input.mdx b/apps/design-system/content/docs/components/input.mdx
new file mode 100644
index 0000000000..fdbdd85a6a
--- /dev/null
+++ b/apps/design-system/content/docs/components/input.mdx
@@ -0,0 +1,77 @@
+---
+title: Input
+description: Displays a form input field or a component that looks like an input field.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="input-demo" className="[&_input]:max-w-xs" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add input
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="input" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Input } from '@/components/ui/input'
+```
+
+```tsx
+<Input />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="input-demo" className="[&_input]:max-w-xs" />
+
+### File
+
+<ComponentPreview name="input-file" className="[&_input]:max-w-xs" />
+
+### Disabled
+
+<ComponentPreview name="input-disabled" className="[&_input]:max-w-xs" />
+
+### With Label
+
+<ComponentPreview name="input-with-label" className="[&_input]:max-w-xs" />
+
+### With Button
+
+<ComponentPreview name="input-with-button" className="[&_input]:max-w-xs" />
+
+### Form
+
+<ComponentPreview name="input-form" />
diff --git a/apps/design-system/content/docs/components/label.mdx b/apps/design-system/content/docs/components/label.mdx
new file mode 100644
index 0000000000..c2d59c1a99
--- /dev/null
+++ b/apps/design-system/content/docs/components/label.mdx
@@ -0,0 +1,61 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/label
+  api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="label-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add label
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-label
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="label" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Label } from '@/components/ui/label'
+```
+
+```tsx
+<Label htmlFor="email">Your email address</Label>
+```
diff --git a/apps/design-system/content/docs/components/menubar.mdx b/apps/design-system/content/docs/components/menubar.mdx
new file mode 100644
index 0000000000..ff88641610
--- /dev/null
+++ b/apps/design-system/content/docs/components/menubar.mdx
@@ -0,0 +1,83 @@
+---
+title: Menubar
+description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/menubar
+  api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="menubar-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add menubar
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-menubar
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="menubar" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from '@/components/ui/menubar'
+```
+
+```tsx
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>
+        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+      </MenubarItem>
+      <MenubarItem>New Window</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Share</MenubarItem>
+      <MenubarSeparator />
+      <MenubarItem>Print</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
diff --git a/apps/design-system/content/docs/components/navigation-menu.mdx b/apps/design-system/content/docs/components/navigation-menu.mdx
new file mode 100644
index 0000000000..042dc0945d
--- /dev/null
+++ b/apps/design-system/content/docs/components/navigation-menu.mdx
@@ -0,0 +1,99 @@
+---
+title: Navigation Menu
+description: A collection of links for navigating websites.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu
+  api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="navigation-menu-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add navigation-menu
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-navigation-menu
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="navigation-menu" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from '@/components/ui/navigation-menu'
+```
+
+```tsx
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink>Link</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+
+## Examples
+
+### Link Component
+
+When using the Next.js `<Link />` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+
+```tsx
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+```
+
+```tsx {3-5}
+<NavigationMenuItem>
+  <Link href="/docs" legacyBehavior passHref>
+    <NavigationMenuLink className={navigationMenuTriggerStyle()}>Documentation</NavigationMenuLink>
+  </Link>
+</NavigationMenuItem>
+```
+
+See also the [Radix UI documentation](https://www.radix-ui.com/docs/primitives/components/navigation-menu#with-client-side-routing) for handling client side routing.
diff --git a/apps/design-system/content/docs/components/pagination.mdx b/apps/design-system/content/docs/components/pagination.mdx
new file mode 100644
index 0000000000..e5fbf62620
--- /dev/null
+++ b/apps/design-system/content/docs/components/pagination.mdx
@@ -0,0 +1,104 @@
+---
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="pagination-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add pagination
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="pagination" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+```
+
+```tsx
+<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="#" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="#" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>
+```
+
+### Next.js
+
+By default the `<PaginationLink />` component will render an `<a />` tag.
+
+To use the Next.js `<Link />` component, make the following updates to `pagination.tsx`.
+
+```diff showLineNumbers /typeof Link/ {1}
++ import Link from "next/link"
+
+- type PaginationLinkProps = ... & React.ComponentProps<"a">
++ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
+
+const PaginationLink = ({...props }: ) => (
+  <PaginationItem>
+-   <a>
++   <Link>
+      // ...
+-   </a>
++   </Link>
+  </PaginationItem>
+)
+
+```
+
+<Callout className="mt-6">
+
+**Note:** We are making updates to the cli to automatically do this for you.
+
+</Callout>
diff --git a/apps/design-system/content/docs/components/popover.mdx b/apps/design-system/content/docs/components/popover.mdx
new file mode 100644
index 0000000000..f04fe012c8
--- /dev/null
+++ b/apps/design-system/content/docs/components/popover.mdx
@@ -0,0 +1,64 @@
+---
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/popover
+  api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="popover-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add popover
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-popover
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="popover" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+```
+
+```tsx
+<Popover>
+  <PopoverTrigger>Open</PopoverTrigger>
+  <PopoverContent>Place content for the popover here.</PopoverContent>
+</Popover>
+```
diff --git a/apps/design-system/content/docs/components/progress.mdx b/apps/design-system/content/docs/components/progress.mdx
new file mode 100644
index 0000000000..a187c3421a
--- /dev/null
+++ b/apps/design-system/content/docs/components/progress.mdx
@@ -0,0 +1,61 @@
+---
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/progress
+  api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="progress-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add progress
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-progress
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="progress" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Progress } from '@/components/ui/progress'
+```
+
+```tsx
+<Progress value={33} />
+```
diff --git a/apps/design-system/content/docs/components/radio-group.mdx b/apps/design-system/content/docs/components/radio-group.mdx
new file mode 100644
index 0000000000..8bd7e79ac5
--- /dev/null
+++ b/apps/design-system/content/docs/components/radio-group.mdx
@@ -0,0 +1,77 @@
+---
+title: Radio Group
+description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/radio-group
+  api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="radio-group-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add radio-group
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-radio-group
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="radio-group" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+```
+
+```tsx
+<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="option-one" />
+    <Label htmlFor="option-one">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="option-two" />
+    <Label htmlFor="option-two">Option Two</Label>
+  </div>
+</RadioGroup>
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="radio-group-form" />
diff --git a/apps/design-system/content/docs/components/resizable.mdx b/apps/design-system/content/docs/components/resizable.mdx
new file mode 100644
index 0000000000..b06c1af8f2
--- /dev/null
+++ b/apps/design-system/content/docs/components/resizable.mdx
@@ -0,0 +1,110 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+component: true
+links:
+  doc: https://github.com/bvaughn/react-resizable-panels
+  api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="resizable-demo" peekCode wide />
+
+## About
+
+The `Resizable` component is built on top of [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) by [bvaughn](https://github.com/bvaughn).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add resizable
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install react-resizable-panels
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="resizable" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
+```
+
+```tsx
+<ResizablePanelGroup direction="horizontal">
+  <ResizablePanel>One</ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel>Two</ResizablePanel>
+</ResizablePanelGroup>
+```
+
+## Examples
+
+### Vertical
+
+Use the `direction` prop to set the direction of the resizable panels.
+
+<ComponentPreview name="resizable-vertical" />
+
+```tsx showLineNumbers {9}
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
+
+export default function Example() {
+  return (
+    <ResizablePanelGroup direction="vertical">
+      <ResizablePanel>One</ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel>Two</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
+
+### Handle
+
+You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.
+
+<ComponentPreview name="resizable-handle" />
+
+```tsx showLineNumbers {11}
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
+
+export default function Example() {
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel>One</ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel>Two</ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+```
diff --git a/apps/design-system/content/docs/components/scroll-area.mdx b/apps/design-system/content/docs/components/scroll-area.mdx
new file mode 100644
index 0000000000..55d039eec5
--- /dev/null
+++ b/apps/design-system/content/docs/components/scroll-area.mdx
@@ -0,0 +1,73 @@
+---
+title: Scroll-area
+description: Augments native scroll functionality for custom, cross-browser styling.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/scroll-area
+  api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="scroll-area-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add scroll-area
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-scroll-area
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="scroll-area" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { ScrollArea } from '@/components/ui/scroll-area'
+```
+
+```tsx
+<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
+  Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the
+  place: under the king's pillow, in his soup, even in the royal toilet. The king was furious, but
+  he couldn't seem to stop Jokester. And then, one day, the people of the kingdom discovered that
+  the jokes left by Jokester were so funny that they couldn't help but laugh. And once they started
+  laughing, they couldn't stop.
+</ScrollArea>
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="scroll-area-horizontal-demo" peekCode wide />
diff --git a/apps/design-system/content/docs/components/select.mdx b/apps/design-system/content/docs/components/select.mdx
new file mode 100644
index 0000000000..64a0fd5181
--- /dev/null
+++ b/apps/design-system/content/docs/components/select.mdx
@@ -0,0 +1,87 @@
+---
+title: Select
+description: Displays a list of options for the user to pick from—triggered by a button.
+component: true
+featured: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/select
+  api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="select-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add select
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-select
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="select" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+```
+
+```tsx
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+    <SelectItem value="system">System</SelectItem>
+  </SelectContent>
+</Select>
+```
+
+## Examples
+
+### Scrollable
+
+<ComponentPreview name="select-scrollable" />
+
+### Form
+
+<ComponentPreview name="select-form" />
diff --git a/apps/design-system/content/docs/components/separator.mdx b/apps/design-system/content/docs/components/separator.mdx
new file mode 100644
index 0000000000..92fa9bc2b4
--- /dev/null
+++ b/apps/design-system/content/docs/components/separator.mdx
@@ -0,0 +1,59 @@
+---
+title: Separator
+description: Visually or semantically separates content.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/separator
+  api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="separator-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add separator
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-separator
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="separator" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Separator } from '@/components/ui/separator'
+```
+
+```tsx
+<Separator />
+```
diff --git a/apps/design-system/content/docs/components/sheet.mdx b/apps/design-system/content/docs/components/sheet.mdx
new file mode 100644
index 0000000000..96220e63eb
--- /dev/null
+++ b/apps/design-system/content/docs/components/sheet.mdx
@@ -0,0 +1,106 @@
+---
+title: Sheet
+description: Extends the Dialog component to display content that complements the main content of the screen.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/dialog
+  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="sheet-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add sheet
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sheet" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+### Usage
+
+```tsx
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
+```
+
+```tsx
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+## Examples
+
+### Side
+
+Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+<ComponentPreview name="sheet-side" />
+
+### Size
+
+You can adjust the size of the sheet using CSS classes:
+
+```tsx {3}
+<Sheet>
+  <SheetTrigger>Open</SheetTrigger>
+  <SheetContent className="w-[400px] sm:w-[540px]">
+    <SheetHeader>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
+      <SheetDescription>
+        This action cannot be undone. This will permanently delete your account and remove your data
+        from our servers.
+      </SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
diff --git a/apps/design-system/content/docs/components/skeleton.mdx b/apps/design-system/content/docs/components/skeleton.mdx
new file mode 100644
index 0000000000..5ab50f0250
--- /dev/null
+++ b/apps/design-system/content/docs/components/skeleton.mdx
@@ -0,0 +1,57 @@
+---
+title: Skeleton
+description: Use to show a placeholder while content is loading.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="skeleton-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add skeleton
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="skeleton" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Skeleton } from '@/components/ui/skeleton'
+```
+
+```tsx
+<Skeleton className="w-[100px] h-[20px] rounded-full" />
+```
+
+## Examples
+
+### Card
+
+<ComponentPreview name="skeleton-card" />
diff --git a/apps/design-system/content/docs/components/slider.mdx b/apps/design-system/content/docs/components/slider.mdx
new file mode 100644
index 0000000000..e2f1120559
--- /dev/null
+++ b/apps/design-system/content/docs/components/slider.mdx
@@ -0,0 +1,61 @@
+---
+title: Slider
+description: An input where the user selects a value from within a given range.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/slider
+  api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="slider-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add slider
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-slider
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="slider" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Slider } from '@/components/ui/slider'
+```
+
+```tsx
+<Slider defaultValue={[33]} max={100} step={1} />
+```
diff --git a/apps/design-system/content/docs/components/sonner.mdx b/apps/design-system/content/docs/components/sonner.mdx
new file mode 100644
index 0000000000..3af18cfd4a
--- /dev/null
+++ b/apps/design-system/content/docs/components/sonner.mdx
@@ -0,0 +1,103 @@
+---
+title: Sonner
+description: An opinionated toast component for React.
+component: true
+links:
+  doc: https://sonner.emilkowal.ski
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="sonner-demo" peekCode wide />
+
+## About
+
+Sonner is built and maintained by [emilkowalski\_](https://twitter.com/emilkowalski_).
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn-ui@latest add sonner
+```
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from '@/components/ui/sonner'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install sonner next-themes
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="sonner" />
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from '@/components/ui/sonner'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { toast } from 'sonner'
+```
+
+```tsx
+toast('Event has been created.')
+```
diff --git a/apps/design-system/content/docs/components/switch.mdx b/apps/design-system/content/docs/components/switch.mdx
new file mode 100644
index 0000000000..3dcf332821
--- /dev/null
+++ b/apps/design-system/content/docs/components/switch.mdx
@@ -0,0 +1,67 @@
+---
+title: Switch
+description: A control that allows the user to toggle between checked and not checked.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/switch
+  api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="switch-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add switch
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-switch
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="switch" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Switch } from '@/components/ui/switch'
+```
+
+```tsx
+<Switch />
+```
+
+## Examples
+
+### Form
+
+<ComponentPreview name="switch-form" />
diff --git a/apps/design-system/content/docs/components/table.mdx b/apps/design-system/content/docs/components/table.mdx
new file mode 100644
index 0000000000..ff05bebe23
--- /dev/null
+++ b/apps/design-system/content/docs/components/table.mdx
@@ -0,0 +1,85 @@
+---
+title: Table
+description: A responsive table component.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="table-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add table
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="table" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+```
+
+```tsx
+<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell>Paid</TableCell>
+      <TableCell>Credit Card</TableCell>
+      <TableCell className="text-right">$250.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Data Table
+
+You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
+
+See the [Data Table](/docs/components/data-table) documentation for more information.
+
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
diff --git a/apps/design-system/content/docs/components/tabs.mdx b/apps/design-system/content/docs/components/tabs.mdx
new file mode 100644
index 0000000000..8085115c24
--- /dev/null
+++ b/apps/design-system/content/docs/components/tabs.mdx
@@ -0,0 +1,68 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/tabs
+  api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="tabs-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add tabs
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tabs
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tabs" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+```
+
+```tsx
+<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Make changes to your account here.</TabsContent>
+  <TabsContent value="password">Change your password here.</TabsContent>
+</Tabs>
+```
diff --git a/apps/design-system/content/docs/components/textarea.mdx b/apps/design-system/content/docs/components/textarea.mdx
new file mode 100644
index 0000000000..07b91d5896
--- /dev/null
+++ b/apps/design-system/content/docs/components/textarea.mdx
@@ -0,0 +1,77 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="textarea-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add textarea
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="textarea" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Textarea } from '@/components/ui/textarea'
+```
+
+```tsx
+<Textarea />
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="textarea-demo" peekCode wide />
+
+### Disabled
+
+<ComponentPreview name="textarea-disabled" />
+
+### With Label
+
+<ComponentPreview name="textarea-with-label" className="[&_div.grid]:w-full" />
+
+### With Text
+
+<ComponentPreview name="textarea-with-text" />
+
+### With Button
+
+<ComponentPreview name="textarea-with-button" />
+
+### Form
+
+<ComponentPreview name="textarea-form" />
diff --git a/apps/design-system/content/docs/components/toast.mdx b/apps/design-system/content/docs/components/toast.mdx
new file mode 100644
index 0000000000..34dd53ac58
--- /dev/null
+++ b/apps/design-system/content/docs/components/toast.mdx
@@ -0,0 +1,155 @@
+---
+title: Toast
+description: A succinct message that is displayed temporarily.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toast
+  api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="toast-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Run the following command:</Step>
+
+```bash
+npx shadcn-ui@latest add toast
+```
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from '@/components/ui/toaster'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toast
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+`toast.tsx`
+
+<ComponentSource name="toast" />
+
+`toaster.tsx`
+
+<ComponentSource name="toast" fileName="toaster" />
+
+`use-toast.tsx`
+
+<ComponentSource name="toast" fileName="use-toast" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Add the Toaster component</Step>
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from '@/components/ui/toaster'
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head />
+      <body>
+        <main>{children}</main>
+        <Toaster />
+      </body>
+    </html>
+  )
+}
+```
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+The `useToast` hook returns a `toast` function that you can use to display a toast.
+
+```tsx
+import { useToast } from '@/components/ui/use-toast'
+```
+
+```tsx {2,7-10}
+export const ToastDemo = () => {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      onClick={() => {
+        toast({
+          title: 'Scheduled: Catch up',
+          description: 'Friday, February 10, 2023 at 5:57 PM',
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
+```
+
+<Callout>
+
+To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`.
+
+</Callout>
+
+## Examples
+
+### Simple
+
+<ComponentPreview name="toast-simple" />
+
+### With title
+
+<ComponentPreview name="toast-with-title" />
+
+### With Action
+
+<ComponentPreview name="toast-with-action" />
+
+### Destructive
+
+Use `toast({ variant: "destructive" })` to display a destructive toast.
+
+<ComponentPreview name="toast-destructive" />
diff --git a/apps/design-system/content/docs/components/toggle-group.mdx b/apps/design-system/content/docs/components/toggle-group.mdx
new file mode 100644
index 0000000000..5cedba42af
--- /dev/null
+++ b/apps/design-system/content/docs/components/toggle-group.mdx
@@ -0,0 +1,91 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle-group
+  api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="toggle-group-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add toggle-group
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toggle-group
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="toggle-group" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+```
+
+```tsx
+<ToggleGroup type="single">
+  <ToggleGroupItem value="a">A</ToggleGroupItem>
+  <ToggleGroupItem value="b">B</ToggleGroupItem>
+  <ToggleGroupItem value="c">C</ToggleGroupItem>
+</ToggleGroup>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="toggle-group-demo" peekCode wide />
+
+### Outline
+
+<ComponentPreview name="toggle-group-outline" />
+
+### Single
+
+<ComponentPreview name="toggle-group-single" />
+
+### Small
+
+<ComponentPreview name="toggle-group-sm" />
+
+### Large
+
+<ComponentPreview name="toggle-group-lg" />
+
+### Disabled
+
+<ComponentPreview name="toggle-group-disabled" />
diff --git a/apps/design-system/content/docs/components/toggle.mdx b/apps/design-system/content/docs/components/toggle.mdx
new file mode 100644
index 0000000000..2f09c0b26b
--- /dev/null
+++ b/apps/design-system/content/docs/components/toggle.mdx
@@ -0,0 +1,87 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/toggle
+  api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="toggle-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add toggle
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-toggle
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="toggle" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Toggle } from '@/components/ui/toggle'
+```
+
+```tsx
+<Toggle>Toggle</Toggle>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="toggle-demo" peekCode wide />
+
+### Outline
+
+<ComponentPreview name="toggle-outline" />
+
+### With Text
+
+<ComponentPreview name="toggle-with-text" />
+
+### Small
+
+<ComponentPreview name="toggle-sm" />
+
+### Large
+
+<ComponentPreview name="toggle-lg" />
+
+### Disabled
+
+<ComponentPreview name="toggle-disabled" />
diff --git a/apps/design-system/content/docs/components/tooltip.mdx b/apps/design-system/content/docs/components/tooltip.mdx
new file mode 100644
index 0000000000..0e013ffe8d
--- /dev/null
+++ b/apps/design-system/content/docs/components/tooltip.mdx
@@ -0,0 +1,68 @@
+---
+title: Tooltip
+description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
+component: true
+links:
+  doc: https://www.radix-ui.com/docs/primitives/components/tooltip
+  api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference
+source:
+  radix: true
+  shadcn: true
+---
+
+<ComponentPreview name="tooltip-demo" peekCode wide />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ui@latest add tooltip
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Install the following dependencies:</Step>
+
+```bash
+npm install @radix-ui/react-tooltip
+```
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="tooltip" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+```
+
+```tsx
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger>Hover</TooltipTrigger>
+    <TooltipContent>
+      <p>Add to library</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
diff --git a/apps/design-system/content/docs/components/typography.mdx b/apps/design-system/content/docs/components/typography.mdx
new file mode 100644
index 0000000000..d71c080c9a
--- /dev/null
+++ b/apps/design-system/content/docs/components/typography.mdx
@@ -0,0 +1,61 @@
+---
+title: Typography
+description: Styles for headings, paragraphs, lists...etc
+component: true
+source:
+  shadcn: true
+---
+
+<ComponentPreview name="typography-demo" className="[&>div.min-h-[350px]]:p-6" peekCode wide />
+
+## h1
+
+<ComponentPreview name="typography-h1" extractClassName />
+
+## h2
+
+<ComponentPreview name="typography-h2" />
+
+## h3
+
+<ComponentPreview name="typography-h3" />
+
+## h4
+
+<ComponentPreview name="typography-h4" />
+
+## p
+
+<ComponentPreview name="typography-p" />
+
+## blockquote
+
+<ComponentPreview name="typography-blockquote" />
+
+## table
+
+<ComponentPreview name="typography-table" />
+
+## list
+
+<ComponentPreview name="typography-list" />
+
+## Inline code
+
+<ComponentPreview name="typography-inline-code" />
+
+## Lead
+
+<ComponentPreview name="typography-lead" />
+
+## Large
+
+<ComponentPreview name="typography-large" />
+
+## Small
+
+<ComponentPreview name="typography-small" />
+
+## Muted
+
+<ComponentPreview name="typography-muted" />
diff --git a/apps/design-system/content/docs/figma.mdx b/apps/design-system/content/docs/figma.mdx
new file mode 100644
index 0000000000..35b3f81de8
--- /dev/null
+++ b/apps/design-system/content/docs/figma.mdx
@@ -0,0 +1,28 @@
+---
+title: Figma
+description: Every component recreated in Figma. With customizable props, typography and icons.
+---
+
+The Figma UI Kit is open sourced by [Pietro Schirano](https://twitter.com/skirano).
+
+<AspectRatio ratio={12 / 9} className="w-full mt-4">
+  <iframe
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FWCja3lpEj1DeunV1d5zu5D%2FDesign-System%3Fnode-id%3D520%253A1715%26t%3Dz8Quu7PADvSqD0Ss-1"
+    className="h-full w-full overflow-hidden rounded-lg border bg-surface-100"
+  ></iframe>
+</AspectRatio>
+
+## Additional resources
+
+### Figma Diagram Kit
+
+<AspectRatio ratio={12 / 9} className="w-full mt-4">
+  <iframe
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2Fd6EV8a9G2yLht01AayAkmJ%2FDiagram-Kit-(Variables)%3Fnode-id%3D47%253A7265%26t%3D3JsjisJgJqD08wGG-1"
+    className="h-full w-full overflow-hidden rounded-lg border bg-surface-100"
+  ></iframe>
+</AspectRatio>
+
+## Grab a copy
+
+https://www.figma.com/community/file/1203061493325953101
diff --git a/apps/design-system/content/docs/fragments/form-item-layout.mdx b/apps/design-system/content/docs/fragments/form-item-layout.mdx
new file mode 100644
index 0000000000..2118eee31f
--- /dev/null
+++ b/apps/design-system/content/docs/fragments/form-item-layout.mdx
@@ -0,0 +1,88 @@
+---
+title: Form Item Layout
+description: A helper component that provides a layout for form items.
+component: true
+fragment: true
+---
+
+<ComponentPreview
+  name="form-item-layout-demo"
+  description="A helper component that provides a layout for form items."
+  peekCode
+  showDottedGrid
+  wide
+/>
+
+## Usage
+
+This component is to help with the layout of form items. It automatically provides `FormItem`, `FormLabel`, `FormMessage` and `FormDescription`.
+The styling and layout of these components can be customized by passing in the components as props.
+
+The components that can be replaced in `react-hook-form` atoms are highlighted below:
+
+```tsx showLineNumbers {1-2,6-8}
+<FormItem_Shadcn_>
+  <FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
+  <FormControl_Shadcn_>
+    <Input placeholder="shadcn" {...field} />
+  </FormControl_Shadcn_>
+  <FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
+  <FormMessage_Shadcn_ />
+</FormItem_Shadcn_>
+```
+
+Using `FormItemLayout` it can look like this:
+
+```tsx
+<FormItemLayout label="Username" description="This is your public display name">
+  <FormControl_Shadcn_>
+    <Input placeholder="mildtomato" {...field} />
+  </FormControl_Shadcn_>
+</FormItemLayout>
+```
+
+Please note that you must still use `FormControl_Shadcn_` to wrap input fields.
+
+## Examples
+
+## With Select component
+
+<ComponentPreview
+  name="form-item-layout-with-select"
+  description="A helper component that provides a layout for form items."
+  showDottedGrid
+/>
+
+## Horizontal layout
+
+This is useful for forms inside a `<SidePanel/>` / `<Sheet/>` component.
+
+<ComponentPreview
+  name="form-item-layout-with-horizontal"
+  description="A helper component that provides a layout for form items."
+  showDottedGrid
+/>
+
+## With Switch component
+
+<ComponentPreview
+  name="form-item-layout-with-switch"
+  description="A helper component that provides a layout for form items."
+  showDottedGrid
+/>
+
+## With Checkbox component
+
+<ComponentPreview
+  name="form-item-layout-with-checkbox"
+  description="A helper component that provides a layout for form items."
+  showDottedGrid
+/>
+
+## List of items as Checkboxes
+
+<ComponentPreview
+  name="form-item-layout-with-checkbox-list"
+  description="A helper component that provides a layout for form items."
+  showDottedGrid
+/>
diff --git a/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx b/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx
new file mode 100644
index 0000000000..f9127a0ebe
--- /dev/null
+++ b/apps/design-system/content/docs/fragments/text-confirm-dialog.mdx
@@ -0,0 +1,57 @@
+---
+title: Text Confirm Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+component: true
+---
+
+<ComponentPreview
+  name="text-confirm-dialog-demo"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  peekCode
+  showDottedGrid
+  wide
+/>
+
+## Examples
+
+### With Info Alert
+
+<ComponentPreview
+  name="text-confirm-dialog-with-info-alert"
+  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+/>
+
+### With warning Alert
+
+<ComponentPreview
+  name="text-confirm-dialog-with-warning-alert"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
+
+### With destructive Alert
+
+<ComponentPreview
+  name="text-confirm-dialog-with-destructive-alert"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
+
+### With cancel button
+
+<ComponentPreview
+  name="text-confirm-dialog-with-cancel-button"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
+
+### With children
+
+<ComponentPreview
+  name="text-confirm-dialog-with-children"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
+
+### With size
+
+<ComponentPreview
+  name="text-confirm-dialog-with-size"
+  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
+/>
diff --git a/apps/design-system/content/docs/icons.mdx b/apps/design-system/content/docs/icons.mdx
new file mode 100644
index 0000000000..e3d259cb7f
--- /dev/null
+++ b/apps/design-system/content/docs/icons.mdx
@@ -0,0 +1,6 @@
+---
+title: Icons
+description: Icons system breakdown. Copy values of Icons.
+---
+
+<Icons />
diff --git a/apps/design-system/content/docs/index.mdx b/apps/design-system/content/docs/index.mdx
new file mode 100644
index 0000000000..7e392c1b57
--- /dev/null
+++ b/apps/design-system/content/docs/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Introduction
+description: Components and patterns that you can copy and paste into Supabase apps. Accessible. Customizable. Open Source.
+---
+
+## FAQ
+
+<Accordion type="multiple">
+
+<AccordionItem value="faq-1">
+	<AccordionTrigger>
+		Why copy/paste and not packaged as a dependency?
+	</AccordionTrigger>
+	<AccordionContent>
+The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
+
+Start with some sensible defaults, then customize the components to your needs.
+
+One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._
+
+</AccordionContent>
+</AccordionItem>
+
+</Accordion>
diff --git a/apps/design-system/content/docs/tailwind-classes.mdx b/apps/design-system/content/docs/tailwind-classes.mdx
new file mode 100644
index 0000000000..270d4886e5
--- /dev/null
+++ b/apps/design-system/content/docs/tailwind-classes.mdx
@@ -0,0 +1,194 @@
+---
+title: Tailwind Classes
+description: Icons system breakdown. Copy values of Icons.
+---
+
+Supabase is migrating to use tailwind classes that use CSS properties.
+This is to support the concept of theming, so that:
+
+1. It is easy for the team to update the theme without changing 100s of files.
+2. We could offer custom or additional themes in future.
+
+## Primitives
+
+We (the Supabase Design team ✨) define primitive color values using Figma Variables.
+
+- `background`
+- `foreground`
+- `border`
+- `brand`
+- `destructive`
+- `warning`
+
+These values are exported from Figma as a .json file and transformed into tailwind utilities through some scripts under `packages/ui/internals/tokens`.
+
+Any of these colors are available on any tailwind utility that accepts color. For example:
+
+```jsx
+// this uses the default foreground color
+<span className="text-foreground"></span>
+
+// this uses the 'light' foreground color
+<span className="text-foreground-light"></span>
+
+// this uses the default warning color
+<span className="text-warning"></span>
+
+// this uses the '500' warning color
+<span className="text-warning-500"></span>
+```
+
+## Shorthands
+
+We support shorthand classes for `background`, `foreground` and `border`. For example:
+
+- `text-muted` is the same as `text-foreground-muted`
+- `bg-surface` is the same as `bg-background-surface-100`
+- `border-strong` is the same as `border-border-strong`
+
+This will stop you from needing to 'double type' the same utlity name.
+
+You might notice we use `foreground` and `background` as prefixes, this is only because it is a Design Token standard, where as tailwind uses `bg` and `text`.
+
+## Mixing colors
+
+Even with shorthands, remember you can use any color. For example, `foreground-light` can also be applied on borders and backgrounds as `border-foreground-light` and `bg-foreground-light`, if needed.
+Similarly, background and border primitives can be used on other tailwind utilities.
+
+```jsx
+// use the text light color for some text
+<span className="text-light"></span>
+
+// we can use the same color for a background
+<div className="bg-foreground-light">
+    <span>I have the same color background as the left example</span>
+</div>
+```
+
+## Opacity support
+
+All the colors are generated using tailwind opacity, like `hsl(--background-default) / var(--tw-bg-opacity)`.
+This means all the color options in our themes can support opacity rules. For example:
+
+```jsx
+<div className="flex gap-3">
+  <div className="w-4 h-4 rounded-full bg-surface-300"></div>
+  <div className="w-4 h-4 rounded-full bg-surface-300/90"></div>
+  <div className="w-4 h-4 rounded-full bg-surface-300/80"></div>
+  <div className="w-4 h-4 rounded-full bg-surface-300/75"></div>
+  <div className="w-4 h-4 rounded-full bg-surface-300/50"></div>
+</div>
+```
+
+## Usage
+
+The following tailwind classes are a combination of tailwind utilities and our primitives. They're under development and are likely to change but most are now in use and will probably be permanent fixtures.
+
+### Foreground (Text)
+
+| Value                  | Usage                                  |
+| ---------------------- | -------------------------------------- |
+| `foreground-{DEFAULT}` | Default text (**DEFAULT** is optional) |
+| `foreground-light`     | Light text                             |
+| `foreground-lighter`   | Lighter text                           |
+| `foreground-muted`     | Muted text                             |
+
+Examples:
+
+```jsx
+<div className="text-foreground">/div>
+<div className="text-foreground-light">/div>
+<div className="text-foreground-lighter">/div>
+<div className="text-foreground-muted">/div>
+<div className="bg-foreground-light">/div>
+```
+
+---
+
+### Background
+
+| Value                         | Usage                                                        |
+| ----------------------------- | ------------------------------------------------------------ |
+| `background-{DEFAULT}`        | Main body background (**DEFAULT** is optional)               |
+| `background-surface-100`      | Panels and surfaces on the same level of the main background |
+| `background-surface-200`      | Surfaces that overlap the main content (ex. dropdowns)       |
+| `background-surface-300`      | Surfaces that are stacked above background-surface-200       |
+| `background-alternative`      | Alternative background (inverted)                            |
+| `background-overlay`          | Overlays, Dropdowns, Popovers                                |
+| `background-control`          | Inputs, Radios, Checkboxes                                   |
+| `background-button-{DEFAULT}` | Button default                                               |
+
+The `background` part can be omitted when used on the `bg` tailwind utility.
+
+Examples:
+
+```
+bg-surface-100
+bg-overlay
+bg-alternative
+text-background-surface-100
+```
+
+---
+
+### Border
+
+| Value                     | Usage                                    |
+| ------------------------- | ---------------------------------------- |
+| `border-{DEFAULT}`        | Default border (**DEFAULT** is optional) |
+| `border-secondary`        | Secondary border                         |
+| `border-alternative`      | Alternative border (inverted)            |
+| `border-overlay`          | Overlays, Dropdowns, Popovers            |
+| `border-control`          | Inputs, Radios, Checkboxes               |
+| `border-strong`           | Hover, Focus                             |
+| `border-stronger`         | Highlighted border                       |
+| `border-button-{DEFAULT}` | Button default border                    |
+| `border-button-hover`     | Button default border hover              |
+
+Examples:
+
+```
+border-overlay
+border-alternative
+text-border-control
+```
+
+### Brand
+
+| Value     |
+| --------- |
+| `200`     |
+| `300`     |
+| `400`     |
+| `500`     |
+| `DEFAULT` |
+| `600`     |
+| `button`  |
+
+### Destructive
+
+| Value     |
+| --------- |
+| `200`     |
+| `300`     |
+| `400`     |
+| `500`     |
+| `DEFAULT` |
+| `600`     |
+
+### Warning
+
+| Value     |
+| --------- |
+| `200`     |
+| `300`     |
+| `400`     |
+| `500`     |
+| `DEFAULT` |
+| `600`     |
+
+## Storybook
+
+The current colors are also auto documented in Storybook
+
+[Storybook Colors](https://ui-storybook-pre-release.vercel.app/)
diff --git a/apps/design-system/content/docs/theming.mdx b/apps/design-system/content/docs/theming.mdx
new file mode 100644
index 0000000000..91b144803c
--- /dev/null
+++ b/apps/design-system/content/docs/theming.mdx
@@ -0,0 +1,30 @@
+---
+title: Themes
+description: Themes used in Supabase
+---
+
+Design System currently takes into account varying themes.
+
+Themes currently in development:
+
+- Light
+- Dark (Classic dark)
+- Deep dark
+
+We also support a system theme, which will automatically switch between light and dark themes based on the user's system settings.
+
+- System
+
+## Try a theme
+
+You can set the theme of this website using the radio buttons below
+
+<ThemeSettings />
+
+## Theme Pipeline
+
+Supabase is migrating to use tailwind classes that use CSS properties.
+This is to support the concept of theming, so that:
+
+1. It is easy for the team to update the theme without changing 100s of files.
+2. We could offer custom or additional themes in future.
diff --git a/apps/design-system/contentlayer.config.js b/apps/design-system/contentlayer.config.js
new file mode 100644
index 0000000000..b342b5027a
--- /dev/null
+++ b/apps/design-system/contentlayer.config.js
@@ -0,0 +1,201 @@
+import path from 'path'
+import { getHighlighter, loadTheme } from '@shikijs/compat'
+import { defineDocumentType, defineNestedType, makeSource } from 'contentlayer2/source-files'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypePrettyCode from 'rehype-pretty-code'
+import rehypeSlug from 'rehype-slug'
+import { codeImport } from 'remark-code-import'
+import remarkGfm from 'remark-gfm'
+import { visit } from 'unist-util-visit'
+
+import { rehypeComponent } from './lib/rehype-component'
+import { rehypeNpmCommand } from './lib/rehype-npm-command'
+
+/** @type {import('contentlayer2/source-files').ComputedFields} */
+const computedFields = {
+  slug: {
+    type: 'string',
+    resolve: (doc) => `/${doc._raw.flattenedPath}`,
+  },
+  slugAsParams: {
+    type: 'string',
+    resolve: (doc) => doc._raw.flattenedPath.split('/').slice(1).join('/'),
+  },
+}
+
+const LinksProperties = defineNestedType(() => ({
+  name: 'LinksProperties',
+  fields: {
+    doc: {
+      type: 'string',
+    },
+    api: {
+      type: 'string',
+    },
+  },
+}))
+
+const NestedProperties = defineNestedType(() => ({
+  name: 'NestedProperties',
+  fields: {
+    radix: {
+      type: 'boolean',
+    },
+    shadcn: {
+      type: 'boolean',
+    },
+    vaul: {
+      type: 'boolean',
+    },
+    inputOtp: {
+      type: 'boolean',
+    },
+  },
+}))
+
+export const Doc = defineDocumentType(() => ({
+  name: 'Doc',
+  filePathPattern: `docs/**/*.mdx`,
+  contentType: 'mdx',
+  fields: {
+    title: {
+      type: 'string',
+      required: true,
+    },
+    description: {
+      type: 'string',
+      required: true,
+    },
+    published: {
+      type: 'boolean',
+      default: true,
+    },
+    links: {
+      type: 'nested',
+      of: LinksProperties,
+    },
+    featured: {
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+    component: {
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+    fragment: {
+      type: 'boolean',
+      default: false,
+      required: false,
+    },
+    toc: {
+      type: 'boolean',
+      default: true,
+      required: false,
+    },
+    source: {
+      type: 'nested',
+      of: NestedProperties,
+    },
+  },
+  computedFields,
+}))
+
+export default makeSource({
+  contentDirPath: './content',
+  documentTypes: [Doc],
+  mdx: {
+    remarkPlugins: [remarkGfm, codeImport],
+    rehypePlugins: [
+      rehypeSlug,
+      rehypeComponent,
+      () => (tree) => {
+        visit(tree, (node) => {
+          if (node?.type === 'element' && node?.tagName === 'pre') {
+            const [codeEl] = node.children
+            if (codeEl.tagName !== 'code') {
+              return
+            }
+
+            if (codeEl.data?.meta) {
+              // Extract event from meta and pass it down the tree.
+              const regex = /event="([^"]*)"/
+              const match = codeEl.data?.meta.match(regex)
+              if (match) {
+                node.__event__ = match ? match[1] : null
+                codeEl.data.meta = codeEl.data.meta.replace(regex, '')
+              }
+            }
+
+            node.__rawString__ = codeEl.children?.[0].value
+            node.__src__ = node.properties?.__src__
+            node.__style__ = node.properties?.__style__
+          }
+        })
+      },
+      [
+        rehypePrettyCode,
+        // rehypePrettyCodeOptions,
+        {
+          getHighlighter: async () => {
+            const theme = await loadTheme(path.join(process.cwd(), '/lib/themes/supabase-2.json'))
+            return await getHighlighter({ theme })
+          },
+          onVisitLine(node) {
+            // Prevent lines from collapsing in `display: grid` mode, and allow empty
+            // lines to be copy/pasted
+            if (node.children.length === 0) {
+              node.children = [{ type: 'text', value: ' ' }]
+            }
+          },
+          onVisitHighlightedLine(node) {
+            node.properties.className.push('line--highlighted')
+          },
+          onVisitHighlightedWord(node) {
+            node.properties.className = ['word--highlighted']
+          },
+        },
+      ],
+      () => (tree) => {
+        visit(tree, (node) => {
+          if (node?.type === 'element' && node?.tagName === 'div') {
+            if (!('data-rehype-pretty-code-fragment' in node.properties)) {
+              return
+            }
+
+            const preElement = node.children.at(-1)
+            if (preElement.tagName !== 'pre') {
+              return
+            }
+
+            preElement.properties['__withMeta__'] = node.children.at(0).tagName === 'div'
+            preElement.properties['__rawString__'] = node.__rawString__
+
+            if (node.__src__) {
+              preElement.properties['__src__'] = node.__src__
+            }
+
+            if (node.__event__) {
+              preElement.properties['__event__'] = node.__event__
+            }
+
+            if (node.__style__) {
+              preElement.properties['__style__'] = node.__style__
+            }
+          }
+        })
+      },
+      // rehypeNpmCommand,
+      [
+        rehypeAutolinkHeadings,
+        {
+          properties: {
+            className: ['subheading-anchor'],
+            ariaLabel: 'Link to section',
+          },
+        },
+      ],
+    ],
+  },
+})
diff --git a/apps/design-system/hooks/use-config.ts b/apps/design-system/hooks/use-config.ts
new file mode 100644
index 0000000000..858ffacc11
--- /dev/null
+++ b/apps/design-system/hooks/use-config.ts
@@ -0,0 +1,24 @@
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+
+// import { BackendProvider } from '@/registry/backend-provider'
+import { Style } from '@/registry/styles'
+import { Theme } from '@/registry/themes'
+
+type Config = {
+  style: Style['name']
+  theme: Theme['name']
+  radius: number
+  // backendProvider: BackendProvider['name'] | undefined
+}
+
+const configAtom = atomWithStorage<Config>('config', {
+  style: 'default',
+  // backendProvider: 'nextjs-auth',
+  theme: 'zinc',
+  radius: 0.5,
+})
+
+export function useConfig() {
+  return useAtom(configAtom)
+}
diff --git a/apps/design-system/hooks/use-media-query.tsx b/apps/design-system/hooks/use-media-query.tsx
new file mode 100644
index 0000000000..1f02308ba7
--- /dev/null
+++ b/apps/design-system/hooks/use-media-query.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false)
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches)
+    }
+
+    const result = matchMedia(query)
+    result.addEventListener('change', onChange)
+    setValue(result.matches)
+
+    return () => result.removeEventListener('change', onChange)
+  }, [query])
+
+  return value
+}
diff --git a/apps/design-system/hooks/use-mounted.ts b/apps/design-system/hooks/use-mounted.ts
new file mode 100644
index 0000000000..13256dce0c
--- /dev/null
+++ b/apps/design-system/hooks/use-mounted.ts
@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+export function useMounted() {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return mounted
+}
diff --git a/apps/design-system/lib/rehype-component.ts b/apps/design-system/lib/rehype-component.ts
new file mode 100644
index 0000000000..df471d8e87
--- /dev/null
+++ b/apps/design-system/lib/rehype-component.ts
@@ -0,0 +1,406 @@
+import fs from 'fs'
+import path from 'path'
+import { UnistNode, UnistTree } from 'types/unist'
+import { u } from 'unist-builder'
+import { visit } from 'unist-util-visit'
+
+import { Index } from '../__registry__'
+import { styles } from '../registry/styles'
+
+import { parse } from 'react-docgen'
+
+import * as reactDocgenTypescript from 'react-docgen-typescript'
+
+import { Column, IColumnProps } from './sample-component'
+import React, { ComponentType } from 'react'
+
+function inspectComponentProps<T>(component: React.ComponentType<T>): void {
+  // Assert the component's props type
+  const defaultProps = (component as React.ComponentType<any>).defaultProps || {}
+
+  // console.log('Component props:')
+  // console.log('----------------')
+
+  for (const propName in defaultProps) {
+    const propType = typeof defaultProps[propName]
+    console.log(`${propName}: ${propType}`)
+  }
+}
+
+export function rehypeComponent() {
+  return async (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      // src prop overrides both name and fileName.
+      const { value: srcPath, name: componentName } =
+        (getNodeAttributeByName(node, 'src') as {
+          name: string
+          value?: string
+          type?: string
+        }) || {}
+
+      // console.log(srcPath, componentName)
+
+      // inspectComponentProps(Column)
+
+      // console.log('NEW NODE: ', node.name)
+
+      // if (node.name === 'ComponentProps') {
+      //   // Parse a file for docgen info
+      //   const options = {
+      //     // savePropValueAsString: true,
+      //   }
+
+      //   // const parser = reactDocgenTypescript.parse('./sample-component.tsx', options)
+
+      //   // console.log('PARSER', parser)
+
+      //   const code = `
+      //   /** My first component */
+      //   export default ({ name, title }: {
+      //     /** My first component */
+      //     name: string,
+      //     /** My first component */
+      //     title: string
+      //   }) => <div>{{name}}</div>;
+      //   `
+      //   // console.log('node', node)
+
+      //   const documentation = parse(code)[0]
+
+      //   // console.log('documentation', documentation)
+
+      //   // Add attributes to object
+
+      //   node.attributes?.push({
+      //     type: 'mdxJsxAttribute',
+      //     name: 'docs',
+      //     value: JSON.stringify(documentation),
+      //   })
+
+      //   // console.log('node after', node)
+
+      //   // Add random text as children
+      //   // node.children?.push({
+      //   //   type: 'text',
+      //   //   value: 'I am random text', // Generate a random UUID as text content
+      //   // })
+
+      //   // node.data = {
+      //   //   ...node.data,
+      //   //   name: 'documentation',
+      //   //   type: 'mdxJsxAttribute',
+      //   //   value: documentation,
+      //   // }
+      // }
+
+      if (node.name === 'ComponentSource') {
+        // console.log('DO NOT USE THIS COMPONENT')
+        // This component should not be in use!
+        // console.log('node', node)
+
+        const name = getNodeAttributeByName(node, 'name')?.value as string
+        const fileName = getNodeAttributeByName(node, 'fileName')?.value as string | undefined
+
+        if (!name && !srcPath) {
+          return null
+        }
+
+        try {
+          for (const style of styles) {
+            let src: string
+
+            if (srcPath) {
+              src = srcPath
+            } else {
+              const component = Index[style.name][name]
+              // console.log('got to ELSE STATEMENT')
+              // console.log('filename', fileName)
+              // console.log('name', name)
+
+              src = fileName
+                ? component.files.find((file: string) => {
+                    return file.endsWith(`${fileName}.tsx`) || file.endsWith(`${fileName}.ts`)
+                  }) || component.files[0]
+                : component.files[0]
+              // console.log('got to END of ELSE STATEMENT')
+            }
+
+            // Read the source file.
+            const filePath = path.join(process.cwd(), src)
+            let source = fs.readFileSync(filePath, 'utf8')
+
+            // Replace imports.
+            // TODO: Use @swc/core and a visitor to replace this.
+            // For now a simple regex should do.
+            // source = source.replaceAll(`@/registry/${style.name}/`, '@/components/') // COMMENT THEE OUT
+            // source = source.replaceAll('export default', 'export')
+
+            // Add code as children so that rehype can take over at build time.
+            node.children?.push(
+              u('element', {
+                tagName: 'pre',
+                properties: {
+                  __src__: src,
+                  __style__: style.name,
+                },
+                attributes: [
+                  {
+                    name: 'styleName',
+                    type: 'mdxJsxAttribute',
+                    value: style.name,
+                  },
+                ],
+                children: [
+                  u('element', {
+                    tagName: 'code',
+                    properties: {
+                      className: ['language-tsx'],
+                    },
+                    children: [
+                      {
+                        type: 'text',
+                        value: source,
+                      },
+                    ],
+                  }),
+                ],
+              })
+            )
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      if (node.name === 'ComponentPreview') {
+        const name = getNodeAttributeByName(node, 'name')?.value as string
+
+        if (!name) {
+          return null
+        }
+
+        try {
+          for (const style of styles) {
+            const component = Index[style.name][name]
+            // console.log('GOT HERE')
+            const src = component.files[0]
+
+            // Read the source file.
+            const filePath = path.join(process.cwd(), src)
+            let source = fs.readFileSync(filePath, 'utf8')
+
+            // Replace imports.
+            // TODO: Use @swc/core and a visitor to replace this.
+            // For now a simple regex should do.
+            source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
+            source = source.replaceAll('export default', 'export')
+
+            // Add code as children so that rehype can take over at build time.
+            node.children?.push(
+              u('element', {
+                tagName: 'pre',
+                properties: {
+                  __src__: src,
+                },
+                children: [
+                  u('element', {
+                    tagName: 'code',
+                    properties: {
+                      className: ['language-tsx'],
+                    },
+                    children: [
+                      {
+                        type: 'text',
+                        value: source,
+                      },
+                    ],
+                  }),
+                ],
+              })
+            )
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      if (node.name === 'CodeFragment') {
+        const name = getNodeAttributeByName(node, 'name')?.value as string
+
+        if (!name) {
+          return null
+        }
+
+        try {
+          for (const style of styles) {
+            const component = Index[style.name][name]
+            // console.log('GOT HERE')
+            const src = component.files[0]
+
+            // Read the source file.
+            const filePath = path.join(process.cwd(), src)
+            let source = fs.readFileSync(filePath, 'utf8')
+
+            // Replace imports.
+            // TODO: Use @swc/core and a visitor to replace this.
+            // For now a simple regex should do.
+            source = source.replaceAll(`@/registry/${style.name}/`, '@/components/')
+            source = source.replaceAll('export default', 'export')
+
+            // Add code as children so that rehype can take over at build time.
+            node.children?.push(
+              u('element', {
+                tagName: 'pre',
+                properties: {
+                  __src__: src,
+                },
+                children: [
+                  u('element', {
+                    tagName: 'code',
+                    properties: {
+                      className: ['language-tsx'],
+                    },
+                    children: [
+                      {
+                        type: 'text',
+                        value: source,
+                      },
+                    ],
+                  }),
+                ],
+              })
+            )
+          }
+        } catch (error) {
+          console.error(error)
+        }
+      }
+
+      // if (node.name === "ComponentExample") {
+      //   const source = getComponentSourceFileContent(node)
+      //   if (!source) {
+      //     return
+      //   }
+
+      //   // Replace the Example component with a pre element.
+      //   node.children?.push(
+      //     u("element", {
+      //       tagName: "pre",
+      //       properties: {
+      //         __src__: src,
+      //       },
+      //       children: [
+      //         u("element", {
+      //           tagName: "code",
+      //           properties: {
+      //             className: ["language-tsx"],
+      //           },
+      //           children: [
+      //             {
+      //               type: "text",
+      //               value: source,
+      //             },
+      //           ],
+      //         }),
+      //       ],
+      //     })
+      //   )
+
+      //   const extractClassname = getNodeAttributeByName(
+      //     node,
+      //     "extractClassname"
+      //   )
+      //   if (
+      //     extractClassname &&
+      //     typeof extractClassname.value !== "undefined" &&
+      //     extractClassname.value !== "false"
+      //   ) {
+      //     // Extract className from string
+      //     // TODO: Use @swc/core and a visitor to extract this.
+      //     // For now, a simple regex should do.
+      //     const values = source.match(/className="(.*)"/)
+      //     const className = values ? values[1] : ""
+
+      //     // Add the className as a jsx prop so we can pass it to the copy button.
+      //     node.attributes?.push({
+      //       name: "extractedClassNames",
+      //       type: "mdxJsxAttribute",
+      //       value: className,
+      //     })
+
+      //     // Add a pre element with the className only.
+      //     node.children?.push(
+      //       u("element", {
+      //         tagName: "pre",
+      //         properties: {},
+      //         children: [
+      //           u("element", {
+      //             tagName: "code",
+      //             properties: {
+      //               className: ["language-tsx"],
+      //             },
+      //             children: [
+      //               {
+      //                 type: "text",
+      //                 value: className,
+      //               },
+      //             ],
+      //           }),
+      //         ],
+      //       })
+      //     )
+      //   }
+      // }
+
+      // if (node.name === "ComponentSource") {
+      //   const source = getComponentSourceFileContent(node)
+      //   if (!source) {
+      //     return
+      //   }
+
+      //   // Replace the Source component with a pre element.
+      //   node.children?.push(
+      //     u("element", {
+      //       tagName: "pre",
+      //       properties: {
+      //         __src__: src,
+      //       },
+      //       children: [
+      //         u("element", {
+      //           tagName: "code",
+      //           properties: {
+      //             className: ["language-tsx"],
+      //           },
+      //           children: [
+      //             {
+      //               type: "text",
+      //               value: source,
+      //             },
+      //           ],
+      //         }),
+      //       ],
+      //     })
+      //   )
+      // }
+    })
+  }
+}
+
+function getNodeAttributeByName(node: UnistNode, name: string) {
+  return node.attributes?.find((attribute) => attribute.name === name)
+}
+
+function getComponentSourceFileContent(node: UnistNode) {
+  const src = getNodeAttributeByName(node, 'src')?.value as string
+
+  if (!src) {
+    return null
+  }
+
+  // Read the source file.
+  const filePath = path.join(process.cwd(), src)
+  console.log('filePath', filePath)
+  const source = fs.readFileSync(filePath, 'utf8')
+
+  return source
+}
diff --git a/apps/design-system/lib/rehype-npm-command.ts b/apps/design-system/lib/rehype-npm-command.ts
new file mode 100644
index 0000000000..aaa3792922
--- /dev/null
+++ b/apps/design-system/lib/rehype-npm-command.ts
@@ -0,0 +1,42 @@
+import { UnistNode, UnistTree } from 'types/unist'
+import { visit } from 'unist-util-visit'
+
+export function rehypeNpmCommand() {
+  return (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      if (node.type !== 'element' || node?.tagName !== 'pre') {
+        return
+      }
+
+      // npm install.
+      if (node.properties?.['__rawString__']?.startsWith('npm install')) {
+        const npmCommand = node.properties?.['__rawString__']
+        node.properties['__npmCommand__'] = npmCommand
+        node.properties['__yarnCommand__'] = npmCommand.replace('npm install', 'yarn add')
+        node.properties['__pnpmCommand__'] = npmCommand.replace('npm install', 'pnpm add')
+        node.properties['__bunCommand__'] = npmCommand.replace('npm install', 'bun add')
+      }
+
+      // npx create.
+      if (node.properties?.['__rawString__']?.startsWith('npx create-')) {
+        const npmCommand = node.properties?.['__rawString__']
+        node.properties['__npmCommand__'] = npmCommand
+        node.properties['__yarnCommand__'] = npmCommand.replace('npx create-', 'yarn create ')
+        node.properties['__pnpmCommand__'] = npmCommand.replace('npx create-', 'pnpm create ')
+        node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
+      }
+
+      // npx.
+      if (
+        node.properties?.['__rawString__']?.startsWith('npx') &&
+        !node.properties?.['__rawString__']?.startsWith('npx create-')
+      ) {
+        const npmCommand = node.properties?.['__rawString__']
+        node.properties['__npmCommand__'] = npmCommand
+        node.properties['__yarnCommand__'] = npmCommand
+        node.properties['__pnpmCommand__'] = npmCommand.replace('npx', 'pnpm dlx')
+        node.properties['__bunCommand__'] = npmCommand.replace('npx', 'bunx --bun')
+      }
+    })
+  }
+}
diff --git a/apps/design-system/lib/sample-component.tsx b/apps/design-system/lib/sample-component.tsx
new file mode 100644
index 0000000000..7f12bfb241
--- /dev/null
+++ b/apps/design-system/lib/sample-component.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { Component } from 'react'
+
+/**
+ * Column properties.
+ */
+export interface IColumnProps {
+  /** prop1 description */
+  prop1?: string
+  /** prop2 description */
+  prop2: number
+  /**
+   * prop3 description
+   */
+  prop3: () => void
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3'
+}
+
+/**
+ * Form column.
+ */
+export class Column extends Component<IColumnProps, {}> {
+  render() {
+    return <div>Test</div>
+  }
+}
diff --git a/apps/design-system/lib/themes/supabase-2.json b/apps/design-system/lib/themes/supabase-2.json
new file mode 100644
index 0000000000..81ffd9ec7c
--- /dev/null
+++ b/apps/design-system/lib/themes/supabase-2.json
@@ -0,0 +1,207 @@
+{
+  "name": "Supabase Theme",
+  "displayName": "Supabase Theme",
+  "semanticHighlighting": true,
+  "colors": {
+    "editor.background": "var(--code-highlight-color)",
+    "editor.foreground": "var(--code-foreground)",
+    "editor.lineHighlightBackground": "var(--code-highlight-color)",
+    "editorCursor.foreground": "var(--code-foreground)",
+    "editorWhitespace.foreground": "var(--code-foreground)",
+    "editorIndentGuide.background": "var(--code-foreground)",
+    "editor.selectionBackground": "var(--code-highlight-color)",
+    "editor.selectionHighlightBackground": "var(--code-highlight-color)"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "var(--code-token-comment)",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["constant", "entity.name.constant", "variable.other.constant"],
+      "settings": {
+        "foreground": "var(--code-token-constant)"
+      }
+    },
+    {
+      "scope": ["entity", "entity.name", "entity.name.type", "support.type"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["variable", "support.variable", "variable.parameter"],
+      "settings": {
+        "foreground": "var(--code-token-parameter)"
+      }
+    },
+    {
+      "scope": ["keyword", "storage.type", "storage.modifier", "keyword.control"],
+      "settings": {
+        "foreground": "var(--code-token-keyword)"
+      }
+    },
+    {
+      "scope": ["string", "constant.other.symbol", "constant.other.key", "string.quoted"],
+      "settings": {
+        "foreground": "var(--code-token-string)"
+      }
+    },
+    {
+      "scope": ["support.function", "entity.name.function"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["punctuation", "punctuation.separator", "meta.brace", "punctuation.definition"],
+      "settings": {
+        "foreground": "var(--code-token-punctuation)"
+      }
+    },
+    {
+      "scope": ["meta.tag", "declaration.tag", "markup.deleted"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["markup.inserted"],
+      "settings": {
+        "foreground": "var(--code-token-string)"
+      }
+    },
+    {
+      "scope": ["markup.changed"],
+      "settings": {
+        "foreground": "var(--code-token-string-expression)"
+      }
+    },
+    {
+      "scope": ["invalid", "invalid.deprecated"],
+      "settings": {
+        "foreground": "var(--code-foreground)",
+        "background": "var(--code-token-comment)"
+      }
+    },
+    {
+      "scope": ["support.type.property-name"],
+      "settings": {
+        "foreground": "var(--code-token-property)"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name"],
+      "settings": {
+        "foreground": "var(--code-token-property)"
+      }
+    },
+    {
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "var(--code-token-property)"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name", "entity.other.inherited-class"],
+      "settings": {
+        "foreground": "var(--code-token-property)"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type", "storage.modifier"],
+      "settings": {
+        "foreground": "var(--code-token-keyword)"
+      }
+    },
+    {
+      "scope": ["support.class"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["constant.language"],
+      "settings": {
+        "foreground": "var(--code-token-constant)"
+      }
+    },
+    {
+      "scope": ["meta.embedded"],
+      "settings": {
+        "foreground": "var(--code-token-string-expression)"
+      }
+    },
+    {
+      "scope": ["meta.function-call"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["meta.method-call"],
+      "settings": {
+        "foreground": "var(--code-token-function)"
+      }
+    },
+    {
+      "scope": ["meta.return-type"],
+      "settings": {
+        "foreground": "var(--code-token-keyword)"
+      }
+    },
+    {
+      "scope": [
+        "meta.import",
+        "meta.import.js",
+        "meta.import.ts",
+        "meta.import.tsx",
+        "meta.import.jsx",
+        "string.quoted.single.js",
+        "string.quoted.double.js",
+        "string.quoted.single.ts",
+        "string.quoted.double.ts",
+        "string.quoted.single.tsx",
+        "string.quoted.double.tsx",
+        "string.quoted.single.jsx",
+        "string.quoted.double.jsx"
+      ],
+      "settings": {
+        "foreground": "var(--code-token-string-expression)"
+      }
+    },
+    {
+      "scope": ["meta.var.expr"],
+      "settings": {
+        "foreground": "var(--code-token-variable)"
+      }
+    },
+    {
+      "scope": ["meta.block"],
+      "settings": {
+        "foreground": "var(--code-foreground)"
+      }
+    },
+    {
+      "scope": ["meta.delimiter.period"],
+      "settings": {
+        "foreground": "var(--code-foreground)"
+      }
+    },
+    {
+      "scope": ["meta.brace.round"],
+      "settings": {
+        "foreground": "var(--code-foreground)"
+      }
+    },
+    {
+      "scope": ["meta.paren.expr"],
+      "settings": {
+        "foreground": "var(--code-foreground)"
+      }
+    }
+  ]
+}
diff --git a/apps/design-system/lib/toc.ts b/apps/design-system/lib/toc.ts
new file mode 100644
index 0000000000..c11d0b8303
--- /dev/null
+++ b/apps/design-system/lib/toc.ts
@@ -0,0 +1,79 @@
+// @ts-nocheck
+// TODO: I'll fix this later.
+
+import { toc } from 'mdast-util-toc'
+import { remark } from 'remark'
+import { visit } from 'unist-util-visit'
+
+const textTypes = ['text', 'emphasis', 'strong', 'inlineCode']
+
+function flattenNode(node) {
+  const p = []
+  visit(node, (node) => {
+    if (!textTypes.includes(node.type)) return
+    p.push(node.value)
+  })
+  return p.join(``)
+}
+
+interface Item {
+  title: string
+  url: string
+  items?: Item[]
+}
+
+interface Items {
+  items?: Item[]
+}
+
+function getItems(node, current): Items {
+  if (!node) {
+    return {}
+  }
+
+  if (node.type === 'paragraph') {
+    visit(node, (item) => {
+      if (item.type === 'link') {
+        current.url = item.url
+        current.title = flattenNode(node)
+      }
+
+      if (item.type === 'text') {
+        current.title = flattenNode(node)
+      }
+    })
+
+    return current
+  }
+
+  if (node.type === 'list') {
+    current.items = node.children.map((i) => getItems(i, {}))
+
+    return current
+  } else if (node.type === 'listItem') {
+    const heading = getItems(node.children[0], {})
+
+    if (node.children.length > 1) {
+      getItems(node.children[1], heading)
+    }
+
+    return heading
+  }
+
+  return {}
+}
+
+const getToc = () => (node, file) => {
+  const table = toc(node)
+  const items = getItems(table.map, {})
+
+  file.data = items
+}
+
+export type TableOfContents = Items
+
+export async function getTableOfContents(content: string): Promise<TableOfContents> {
+  const result = await remark().use(getToc).process(content)
+
+  return result.data
+}
diff --git a/apps/design-system/lib/utils.ts b/apps/design-system/lib/utils.ts
new file mode 100644
index 0000000000..8be9377c7e
--- /dev/null
+++ b/apps/design-system/lib/utils.ts
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input)
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+}
diff --git a/apps/design-system/next.config.mjs b/apps/design-system/next.config.mjs
new file mode 100644
index 0000000000..c76557bfa6
--- /dev/null
+++ b/apps/design-system/next.config.mjs
@@ -0,0 +1,21 @@
+import { withContentlayer } from 'next-contentlayer2'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['ui', 'common', 'shared-data', 'icons', 'tsconfig'],
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '/design-system',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+    ],
+  },
+}
+
+export default withContentlayer(nextConfig)
diff --git a/apps/design-system/package.json b/apps/design-system/package.json
new file mode 100644
index 0000000000..64c83d993a
--- /dev/null
+++ b/apps/design-system/package.json
@@ -0,0 +1,59 @@
+{
+  "name": "design-system",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "npm run content:build && npm run build:registry && next build",
+    "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
+    "start": "next start",
+    "lint": "next lint",
+    "content:build": "contentlayer2 build",
+    "typecheck": "contentlayer2 build && tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "contentlayer2": "0.4.5",
+    "fs": "^0.0.1-security",
+    "jotai": "^2.8.0",
+    "lodash.template": "4.5.0",
+    "lucide-react": "^0.338.0",
+    "markdown-wasm": "^1.2.0",
+    "next": "^14.2.3",
+    "next-contentlayer2": "0.4.5",
+    "react": "^18.2.0",
+    "react-docgen": "^7.0.3",
+    "react-dom": "^18.2.0",
+    "react-inlinesvg": "^4.0.4",
+    "react-wrap-balancer": "^1.1.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.6.0",
+    "rehype-slug": "^6.0.0",
+    "remark": "^14.0.3",
+    "remark-code-import": "^1.2.0",
+    "remark-gfm": "^4.0.0",
+    "ts-morph": "^22.0.0",
+    "ui": "*",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@shikijs/compat": "^1.1.7",
+    "@types/lodash.template": "4.5.0",
+    "@types/node": "^20",
+    "@types/react": "^18.2.65",
+    "@types/react-dom": "^18.2.22",
+    "autoprefixer": "^10.0.1",
+    "config": "*",
+    "tsconfig": "*",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.4",
+    "mdast-util-toc": "^6.1.1",
+    "postcss": "^8",
+    "rimraf": "^4.1.3",
+    "shiki": "^1.1.7",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5",
+    "unist-builder": "3.0.0"
+  }
+}
diff --git a/apps/design-system/postcss.config.cjs b/apps/design-system/postcss.config.cjs
new file mode 100644
index 0000000000..12a703d900
--- /dev/null
+++ b/apps/design-system/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg b/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg
new file mode 100644
index 0000000000..fae400998e
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/atoms-illustration--deep-dark.svg
@@ -0,0 +1,100 @@
+<svg width="570" height="527" viewBox="0 0 570 527" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip1_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip2_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48ZM323.541 48L364 7.54133L404.459 48L364 88.4587L323.541 48Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip3_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip4_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 195L48 147L0 195L48 243L96 195Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip5_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 195L206 147L158 195L206 243L254 195ZM165.541 195L206 154.541L246.459 195L206 235.459L165.541 195Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip6_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M343.003 168.003L346.773 171.773L360.229 185.229L364 189L367.771 185.229L381.227 171.773L384.997 168.003L381.227 164.227L367.771 150.771L364 147L360.229 150.771L346.773 164.227L343.003 168.003ZM377.456 168.003L364 181.453L350.544 167.997L364 154.541L377.456 168.003ZM343.003 221.997L346.773 225.773L360.229 239.229L364 243L367.771 239.229L381.227 225.773L384.997 222.003L381.227 218.227L367.771 204.771L364 201L360.229 204.771L346.773 218.227L343.003 221.997ZM377.456 221.997L364 235.464L350.544 222.008L364 208.536L377.456 221.997ZM319.771 198.771L316 195L319.771 191.229L333.227 177.773L337.003 174.003L340.773 177.773L354.229 191.229L358 195L354.229 198.771L340.773 212.227L337.003 215.997L333.227 212.227L319.771 198.771ZM336.997 208.456L350.464 195L336.997 181.544L323.541 195L336.997 208.456ZM370 195L373.771 198.771L387.227 212.227L390.997 215.997L394.773 212.227L408.229 198.771L412 195L408.229 191.229L394.773 177.773L391.003 174.003L387.227 177.773L373.771 191.229L370 195ZM404.453 195L390.997 208.456L377.547 195L391.008 181.544L404.453 195Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip7_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 168.003L504.773 171.773L518.229 185.229L522 189L525.771 185.229L539.227 171.773L542.997 168.003L539.227 164.227L525.771 150.771L522 147L518.229 150.771L504.773 164.227L501.003 168.003ZM501.003 221.997L504.773 225.773L518.229 239.229L522 243L525.771 239.229L539.227 225.773L542.997 222.003L539.227 218.227L525.771 204.771L522 201L518.229 204.771L504.773 218.227L501.003 221.997ZM477.771 198.771L474 195L477.771 191.229L491.227 177.773L495.003 174.003L498.773 177.773L512.229 191.229L516 195L512.229 198.771L498.773 212.227L495.003 215.997L491.227 212.227L477.771 198.771ZM528 195L531.771 198.771L545.227 212.227L548.997 215.997L552.773 212.227L566.229 198.771L570 195L566.229 191.229L552.773 177.773L549.003 174.003L545.227 177.773L531.771 191.229L528 195Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip8_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 342L48 294L0 342L48 390L96 342ZM7.54133 342L48 301.541L88.4587 342L48 382.459L7.54133 342Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip9_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M185.003 315.003L188.773 318.773L202.229 332.229L206 336L209.771 332.229L223.227 318.773L226.997 315.003L223.227 311.227L209.771 297.771L206 294L202.229 297.771L188.773 311.227L185.003 315.003ZM185.003 368.997L188.773 372.773L202.229 386.229L206 390L209.771 386.229L223.227 372.773L226.997 369.003L223.227 365.227L209.771 351.771L206 348L202.229 351.771L188.773 365.227L185.003 368.997ZM161.771 345.771L158 342L161.771 338.229L175.227 324.773L179.003 321.003L182.773 324.773L196.229 338.229L200 342L196.229 345.771L182.773 359.227L179.003 362.997L175.227 359.227L161.771 345.771ZM212 342L215.771 345.771L229.227 359.227L232.997 362.997L236.773 359.227L250.229 345.771L254 342L250.229 338.229L236.773 324.773L233.003 321.003L229.227 324.773L215.771 338.229L212 342Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip10_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 342L364 294L316 342L364 390L412 342Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip11_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 315.003L504.773 318.773L518.229 332.229L522 336L525.771 332.229L539.227 318.773L542.997 315.003L539.227 311.227L525.771 297.771L522 294L518.229 297.771L504.773 311.227L501.003 315.003ZM535.456 315.003L522 328.453L508.544 314.997L522 301.541L535.456 315.003ZM501.003 368.997L504.773 372.773L518.229 386.229L522 390L525.771 386.229L539.227 372.773L542.997 369.003L539.227 365.227L525.771 351.771L522 348L518.229 351.771L504.773 365.227L501.003 368.997ZM535.456 368.997L522 382.464L508.544 369.008L522 355.536L535.456 368.997ZM477.771 345.771L474 342L477.771 338.229L491.227 324.773L495.003 321.003L498.773 324.773L512.229 338.229L516 342L512.229 345.771L498.773 359.227L495.003 362.997L491.227 359.227L477.771 345.771ZM494.997 355.456L508.464 342L494.997 328.544L481.541 342L494.997 355.456ZM528 342L531.771 345.771L545.227 359.227L548.997 362.997L552.773 359.227L566.229 345.771L570 342L566.229 338.229L552.773 324.773L549.003 321.003L545.227 324.773L531.771 338.229L528 342ZM562.453 342L548.997 355.456L535.547 342L549.008 328.544L562.453 342Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip12_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 479L48 431L0 479L48 527L96 479ZM7.54133 479L48 438.541L88.4587 479L48 519.459L7.54133 479Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip13_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M185.003 452.003L188.773 455.773L202.229 469.229L206 473L209.771 469.229L223.227 455.773L226.997 452.003L223.227 448.227L209.771 434.771L206 431L202.229 434.771L188.773 448.227L185.003 452.003ZM219.456 452.003L206 465.453L192.544 451.997L206 438.541L219.456 452.003ZM185.003 505.997L188.773 509.773L202.229 523.229L206 527L209.771 523.229L223.227 509.773L226.997 506.003L223.227 502.227L209.771 488.771L206 485L202.229 488.771L188.773 502.227L185.003 505.997ZM219.456 505.997L206 519.464L192.544 506.008L206 492.536L219.456 505.997ZM161.771 482.771L158 479L161.771 475.229L175.227 461.773L179.003 458.003L182.773 461.773L196.229 475.229L200 479L196.229 482.771L182.773 496.227L179.003 499.997L175.227 496.227L161.771 482.771ZM178.997 492.456L192.464 479L178.997 465.544L165.541 479L178.997 492.456ZM212 479L215.771 482.771L229.227 496.227L232.997 499.997L236.773 496.227L250.229 482.771L254 479L250.229 475.229L236.773 461.773L233.003 458.003L229.227 461.773L215.771 475.229L212 479ZM246.453 479L232.997 492.456L219.547 479L233.008 465.544L246.453 479Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip14_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 479L364 431L316 479L364 527L412 479Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip15_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 452.003L504.773 455.773L518.229 469.229L522 473L525.771 469.229L539.227 455.773L542.997 452.003L539.227 448.227L525.771 434.771L522 431L518.229 434.771L504.773 448.227L501.003 452.003ZM501.003 505.997L504.773 509.773L518.229 523.229L522 527L525.771 523.229L539.227 509.773L542.997 506.003L539.227 502.227L525.771 488.771L522 485L518.229 488.771L504.773 502.227L501.003 505.997ZM477.771 482.771L474 479L477.771 475.229L491.227 461.773L495.003 458.003L498.773 461.773L512.229 475.229L516 479L512.229 482.771L498.773 496.227L495.003 499.997L491.227 496.227L477.771 482.771ZM528 479L531.771 482.771L545.227 496.227L548.997 499.997L552.773 496.227L566.229 482.771L570 479L566.229 475.229L552.773 461.773L549.003 458.003L545.227 461.773L531.771 475.229L528 479Z" fill="#B4B4B4"/>
+</g>
+<defs>
+<clipPath id="clip0_1709_1536">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158)"/>
+</clipPath>
+<clipPath id="clip2_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316)"/>
+</clipPath>
+<clipPath id="clip3_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474)"/>
+</clipPath>
+<clipPath id="clip4_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 147)"/>
+</clipPath>
+<clipPath id="clip5_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 147)"/>
+</clipPath>
+<clipPath id="clip6_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 147)"/>
+</clipPath>
+<clipPath id="clip7_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 147)"/>
+</clipPath>
+<clipPath id="clip8_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 294)"/>
+</clipPath>
+<clipPath id="clip9_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 294)"/>
+</clipPath>
+<clipPath id="clip10_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 294)"/>
+</clipPath>
+<clipPath id="clip11_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 294)"/>
+</clipPath>
+<clipPath id="clip12_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 431)"/>
+</clipPath>
+<clipPath id="clip13_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 431)"/>
+</clipPath>
+<clipPath id="clip14_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 431)"/>
+</clipPath>
+<clipPath id="clip15_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 431)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg b/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg
new file mode 100644
index 0000000000..a218938976
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/atoms-illustration--light.svg
@@ -0,0 +1,100 @@
+<svg width="570" height="527" viewBox="0 0 570 527" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip1_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip2_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48ZM323.541 48L364 7.54133L404.459 48L364 88.4587L323.541 48Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip3_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip4_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 195L48 147L0 195L48 243L96 195Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip5_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 195L206 147L158 195L206 243L254 195ZM165.541 195L206 154.541L246.459 195L206 235.459L165.541 195Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip6_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M343.003 168.003L346.773 171.773L360.229 185.229L364 189L367.771 185.229L381.227 171.773L384.997 168.003L381.227 164.227L367.771 150.771L364 147L360.229 150.771L346.773 164.227L343.003 168.003ZM377.456 168.003L364 181.453L350.544 167.997L364 154.541L377.456 168.003ZM343.003 221.997L346.773 225.773L360.229 239.229L364 243L367.771 239.229L381.227 225.773L384.997 222.003L381.227 218.227L367.771 204.771L364 201L360.229 204.771L346.773 218.227L343.003 221.997ZM377.456 221.997L364 235.464L350.544 222.008L364 208.536L377.456 221.997ZM319.771 198.771L316 195L319.771 191.229L333.227 177.773L337.003 174.003L340.773 177.773L354.229 191.229L358 195L354.229 198.771L340.773 212.227L337.003 215.997L333.227 212.227L319.771 198.771ZM336.997 208.456L350.464 195L336.997 181.544L323.541 195L336.997 208.456ZM370 195L373.771 198.771L387.227 212.227L390.997 215.997L394.773 212.227L408.229 198.771L412 195L408.229 191.229L394.773 177.773L391.003 174.003L387.227 177.773L373.771 191.229L370 195ZM404.453 195L390.997 208.456L377.547 195L391.008 181.544L404.453 195Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip7_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 168.003L504.773 171.773L518.229 185.229L522 189L525.771 185.229L539.227 171.773L542.997 168.003L539.227 164.227L525.771 150.771L522 147L518.229 150.771L504.773 164.227L501.003 168.003ZM501.003 221.997L504.773 225.773L518.229 239.229L522 243L525.771 239.229L539.227 225.773L542.997 222.003L539.227 218.227L525.771 204.771L522 201L518.229 204.771L504.773 218.227L501.003 221.997ZM477.771 198.771L474 195L477.771 191.229L491.227 177.773L495.003 174.003L498.773 177.773L512.229 191.229L516 195L512.229 198.771L498.773 212.227L495.003 215.997L491.227 212.227L477.771 198.771ZM528 195L531.771 198.771L545.227 212.227L548.997 215.997L552.773 212.227L566.229 198.771L570 195L566.229 191.229L552.773 177.773L549.003 174.003L545.227 177.773L531.771 191.229L528 195Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip8_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 342L48 294L0 342L48 390L96 342ZM7.54133 342L48 301.541L88.4587 342L48 382.459L7.54133 342Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip9_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M185.003 315.003L188.773 318.773L202.229 332.229L206 336L209.771 332.229L223.227 318.773L226.997 315.003L223.227 311.227L209.771 297.771L206 294L202.229 297.771L188.773 311.227L185.003 315.003ZM185.003 368.997L188.773 372.773L202.229 386.229L206 390L209.771 386.229L223.227 372.773L226.997 369.003L223.227 365.227L209.771 351.771L206 348L202.229 351.771L188.773 365.227L185.003 368.997ZM161.771 345.771L158 342L161.771 338.229L175.227 324.773L179.003 321.003L182.773 324.773L196.229 338.229L200 342L196.229 345.771L182.773 359.227L179.003 362.997L175.227 359.227L161.771 345.771ZM212 342L215.771 345.771L229.227 359.227L232.997 362.997L236.773 359.227L250.229 345.771L254 342L250.229 338.229L236.773 324.773L233.003 321.003L229.227 324.773L215.771 338.229L212 342Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip10_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 342L364 294L316 342L364 390L412 342Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip11_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 315.003L504.773 318.773L518.229 332.229L522 336L525.771 332.229L539.227 318.773L542.997 315.003L539.227 311.227L525.771 297.771L522 294L518.229 297.771L504.773 311.227L501.003 315.003ZM535.456 315.003L522 328.453L508.544 314.997L522 301.541L535.456 315.003ZM501.003 368.997L504.773 372.773L518.229 386.229L522 390L525.771 386.229L539.227 372.773L542.997 369.003L539.227 365.227L525.771 351.771L522 348L518.229 351.771L504.773 365.227L501.003 368.997ZM535.456 368.997L522 382.464L508.544 369.008L522 355.536L535.456 368.997ZM477.771 345.771L474 342L477.771 338.229L491.227 324.773L495.003 321.003L498.773 324.773L512.229 338.229L516 342L512.229 345.771L498.773 359.227L495.003 362.997L491.227 359.227L477.771 345.771ZM494.997 355.456L508.464 342L494.997 328.544L481.541 342L494.997 355.456ZM528 342L531.771 345.771L545.227 359.227L548.997 362.997L552.773 359.227L566.229 345.771L570 342L566.229 338.229L552.773 324.773L549.003 321.003L545.227 324.773L531.771 338.229L528 342ZM562.453 342L548.997 355.456L535.547 342L549.008 328.544L562.453 342Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip12_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 479L48 431L0 479L48 527L96 479ZM7.54133 479L48 438.541L88.4587 479L48 519.459L7.54133 479Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip13_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M185.003 452.003L188.773 455.773L202.229 469.229L206 473L209.771 469.229L223.227 455.773L226.997 452.003L223.227 448.227L209.771 434.771L206 431L202.229 434.771L188.773 448.227L185.003 452.003ZM219.456 452.003L206 465.453L192.544 451.997L206 438.541L219.456 452.003ZM185.003 505.997L188.773 509.773L202.229 523.229L206 527L209.771 523.229L223.227 509.773L226.997 506.003L223.227 502.227L209.771 488.771L206 485L202.229 488.771L188.773 502.227L185.003 505.997ZM219.456 505.997L206 519.464L192.544 506.008L206 492.536L219.456 505.997ZM161.771 482.771L158 479L161.771 475.229L175.227 461.773L179.003 458.003L182.773 461.773L196.229 475.229L200 479L196.229 482.771L182.773 496.227L179.003 499.997L175.227 496.227L161.771 482.771ZM178.997 492.456L192.464 479L178.997 465.544L165.541 479L178.997 492.456ZM212 479L215.771 482.771L229.227 496.227L232.997 499.997L236.773 496.227L250.229 482.771L254 479L250.229 475.229L236.773 461.773L233.003 458.003L229.227 461.773L215.771 475.229L212 479ZM246.453 479L232.997 492.456L219.547 479L233.008 465.544L246.453 479Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip14_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 479L364 431L316 479L364 527L412 479Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip15_1709_1536)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 452.003L504.773 455.773L518.229 469.229L522 473L525.771 469.229L539.227 455.773L542.997 452.003L539.227 448.227L525.771 434.771L522 431L518.229 434.771L504.773 448.227L501.003 452.003ZM501.003 505.997L504.773 509.773L518.229 523.229L522 527L525.771 523.229L539.227 509.773L542.997 506.003L539.227 502.227L525.771 488.771L522 485L518.229 488.771L504.773 502.227L501.003 505.997ZM477.771 482.771L474 479L477.771 475.229L491.227 461.773L495.003 458.003L498.773 461.773L512.229 475.229L516 479L512.229 482.771L498.773 496.227L495.003 499.997L491.227 496.227L477.771 482.771ZM528 479L531.771 482.771L545.227 496.227L548.997 499.997L552.773 496.227L566.229 482.771L570 479L566.229 475.229L552.773 461.773L549.003 458.003L545.227 461.773L531.771 475.229L528 479Z" fill="#525252"/>
+</g>
+<defs>
+<clipPath id="clip0_1709_1536">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158)"/>
+</clipPath>
+<clipPath id="clip2_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316)"/>
+</clipPath>
+<clipPath id="clip3_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474)"/>
+</clipPath>
+<clipPath id="clip4_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 147)"/>
+</clipPath>
+<clipPath id="clip5_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 147)"/>
+</clipPath>
+<clipPath id="clip6_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 147)"/>
+</clipPath>
+<clipPath id="clip7_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 147)"/>
+</clipPath>
+<clipPath id="clip8_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 294)"/>
+</clipPath>
+<clipPath id="clip9_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 294)"/>
+</clipPath>
+<clipPath id="clip10_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 294)"/>
+</clipPath>
+<clipPath id="clip11_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 294)"/>
+</clipPath>
+<clipPath id="clip12_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(0 431)"/>
+</clipPath>
+<clipPath id="clip13_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(158 431)"/>
+</clipPath>
+<clipPath id="clip14_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(316 431)"/>
+</clipPath>
+<clipPath id="clip15_1709_1536">
+<rect width="96" height="96" fill="white" transform="translate(474 431)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg b/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg
new file mode 100644
index 0000000000..928eafbfc3
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/design-system-marks--dark.svg
@@ -0,0 +1,61 @@
+<svg width="1360" height="96" viewBox="0 0 1360 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip1_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48ZM165.541 48L206 7.54133L246.459 48L206 88.4587L165.541 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip2_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip3_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip4_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M728 48L680 0L632 48L680 96L728 48ZM639.541 48L680 7.54133L720.459 48L680 88.4587L639.541 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip5_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M886 48L838 0L790 48L838 96L886 48Z" fill="#15593B"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1017 21L996 0L975 21L996 42L1017 21ZM978.299 21L996 3.29933L1013.7 21L996 38.7007L978.299 21Z" fill="white"/>
+<path d="M978.299 21L996 3.29933L1013.7 21L996 38.7007L978.299 21Z" fill="#3ECF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1017 75L996 54L975 75L996 96L1017 75ZM978.299 75L996 57.2993L1013.7 75L996 92.7007L978.299 75Z" fill="white"/>
+<path d="M978.299 75L996 57.2993L1013.7 75L996 92.7007L978.299 75Z" fill="#3ECF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M990 48L969 27L948 48L969 69L990 48ZM951.299 48L969 30.2993L986.701 48L969 65.7007L951.299 48Z" fill="white"/>
+<path d="M951.299 48L969 30.2993L986.701 48L969 65.7007L951.299 48Z" fill="#3ECF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1044 48L1023 27L1002 48L1023 69L1044 48ZM1005.3 48L1023 30.2993L1040.7 48L1023 65.7007L1005.3 48Z" fill="white"/>
+<path d="M1005.3 48L1023 30.2993L1040.7 48L1023 65.7007L1005.3 48Z" fill="#3ECF8E"/>
+<g clip-path="url(#clip6_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1202 48L1154 0L1106 48L1154 96L1202 48ZM1113.54 48L1154 7.54133L1194.46 48L1154 88.4587L1113.54 48Z" fill="#15593B"/>
+</g>
+<g clip-path="url(#clip7_1709_1278)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1360 48L1312 0L1264 48L1312 96L1360 48ZM1271.54 48L1312 7.54133L1352.46 48L1312 88.4587L1271.54 48Z" fill="#15593B"/>
+<path d="M1271.54 48L1312 7.54133L1352.46 48L1312 88.4587L1271.54 48Z" fill="#3ECF8E"/>
+</g>
+<defs>
+<clipPath id="clip0_1709_1278">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(158)"/>
+</clipPath>
+<clipPath id="clip2_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(316)"/>
+</clipPath>
+<clipPath id="clip3_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(474)"/>
+</clipPath>
+<clipPath id="clip4_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(632)"/>
+</clipPath>
+<clipPath id="clip5_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(790)"/>
+</clipPath>
+<clipPath id="clip6_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(1106)"/>
+</clipPath>
+<clipPath id="clip7_1709_1278">
+<rect width="96" height="96" fill="white" transform="translate(1264)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg b/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg
new file mode 100644
index 0000000000..26fff33c64
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/design-system-marks--light.svg
@@ -0,0 +1,61 @@
+<svg width="1360" height="96" viewBox="0 0 1360 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0027 21.0027L30.7733 24.7733L44.2293 38.2293L48 42L51.7707 38.2293L65.2267 24.7733L68.9973 21.0027L65.2267 17.2267L51.7707 3.77067L48 0L44.2293 3.77067L30.7733 17.2267L27.0027 21.0027ZM61.456 21.0027L48 34.4533L34.544 20.9973L48 7.54133L61.456 21.0027ZM27.0027 74.9973L30.7733 78.7733L44.2293 92.2293L48 96L51.7707 92.2293L65.2267 78.7733L68.9973 75.0027L65.2267 71.2267L51.7707 57.7707L48 54L44.2293 57.7707L30.7733 71.2267L27.0027 74.9973ZM61.456 74.9973L48 88.464L34.544 75.008L48 61.536L61.456 74.9973ZM3.77067 51.7707L0 48L3.77067 44.2293L17.2267 30.7733L21.0027 27.0027L24.7733 30.7733L38.2293 44.2293L42 48L38.2293 51.7707L24.7733 65.2267L21.0027 68.9973L17.2267 65.2267L3.77067 51.7707ZM20.9973 61.456L34.464 48L20.9973 34.544L7.54133 48L20.9973 61.456ZM54 48L57.7707 51.7707L71.2267 65.2267L74.9973 68.9973L78.7733 65.2267L92.2293 51.7707L96 48L92.2293 44.2293L78.7733 30.7733L75.0027 27.0027L71.2267 30.7733L57.7707 44.2293L54 48ZM88.4533 48L74.9973 61.456L61.5467 48L75.008 34.544L88.4533 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip1_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M254 48L206 0L158 48L206 96L254 48ZM165.541 48L206 7.54133L246.459 48L206 88.4587L165.541 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip2_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M412 48L364 0L316 48L364 96L412 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip3_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M501.003 21.0027L504.773 24.7733L518.229 38.2293L522 42L525.771 38.2293L539.227 24.7733L542.997 21.0027L539.227 17.2267L525.771 3.77067L522 0L518.229 3.77067L504.773 17.2267L501.003 21.0027ZM501.003 74.9973L504.773 78.7733L518.229 92.2293L522 96L525.771 92.2293L539.227 78.7733L542.997 75.0027L539.227 71.2267L525.771 57.7707L522 54L518.229 57.7707L504.773 71.2267L501.003 74.9973ZM477.771 51.7707L474 48L477.771 44.2293L491.227 30.7733L495.003 27.0027L498.773 30.7733L512.229 44.2293L516 48L512.229 51.7707L498.773 65.2267L495.003 68.9973L491.227 65.2267L477.771 51.7707ZM528 48L531.771 51.7707L545.227 65.2267L548.997 68.9973L552.773 65.2267L566.229 51.7707L570 48L566.229 44.2293L552.773 30.7733L549.003 27.0027L545.227 30.7733L531.771 44.2293L528 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip4_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M728 48L680 0L632 48L680 96L728 48ZM639.541 48L680 7.54133L720.459 48L680 88.4587L639.541 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip5_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M886 48L838 0L790 48L838 96L886 48Z" fill="#16B674"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1017 21L996 0L975 21L996 42L1017 21ZM978.299 21L996 3.29933L1013.7 21L996 38.7007L978.299 21Z" fill="white"/>
+<path d="M978.299 21L996 3.29933L1013.7 21L996 38.7007L978.299 21Z" fill="#3FCF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1017 75L996 54L975 75L996 96L1017 75ZM978.299 75L996 57.2993L1013.7 75L996 92.7007L978.299 75Z" fill="white"/>
+<path d="M978.299 75L996 57.2993L1013.7 75L996 92.7007L978.299 75Z" fill="#3FCF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M990 48L969 27L948 48L969 69L990 48ZM951.299 48L969 30.2993L986.701 48L969 65.7007L951.299 48Z" fill="white"/>
+<path d="M951.299 48L969 30.2993L986.701 48L969 65.7007L951.299 48Z" fill="#3FCF8E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1044 48L1023 27L1002 48L1023 69L1044 48ZM1005.3 48L1023 30.2993L1040.7 48L1023 65.7007L1005.3 48Z" fill="white"/>
+<path d="M1005.3 48L1023 30.2993L1040.7 48L1023 65.7007L1005.3 48Z" fill="#3FCF8E"/>
+<g clip-path="url(#clip6_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1202 48L1154 0L1106 48L1154 96L1202 48ZM1113.54 48L1154 7.54133L1194.46 48L1154 88.4587L1113.54 48Z" fill="#16B674"/>
+</g>
+<g clip-path="url(#clip7_1709_1279)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1360 48L1312 0L1264 48L1312 96L1360 48ZM1271.54 48L1312 7.54133L1352.46 48L1312 88.4587L1271.54 48Z" fill="#16B674"/>
+<path d="M1271.54 48L1312 7.54133L1352.46 48L1312 88.4587L1271.54 48Z" fill="#3FCF8E"/>
+</g>
+<defs>
+<clipPath id="clip0_1709_1279">
+<rect width="96" height="96" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(158)"/>
+</clipPath>
+<clipPath id="clip2_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(316)"/>
+</clipPath>
+<clipPath id="clip3_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(474)"/>
+</clipPath>
+<clipPath id="clip4_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(632)"/>
+</clipPath>
+<clipPath id="clip5_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(790)"/>
+</clipPath>
+<clipPath id="clip6_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(1106)"/>
+</clipPath>
+<clipPath id="clip7_1709_1279">
+<rect width="96" height="96" fill="white" transform="translate(1264)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg b/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg
new file mode 100644
index 0000000000..01331d3d8d
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/fragments-illustration--deep-dark.svg
@@ -0,0 +1,104 @@
+<svg width="626" height="587" viewBox="0 0 626 587" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.0027 51.0027L58.7733 54.7733L72.2293 68.2293L76 72L79.7707 68.2293L93.2267 54.7733L96.9973 51.0027L93.2267 47.2267L79.7707 33.7707L76 30L72.2293 33.7707L58.7733 47.2267L55.0027 51.0027ZM89.456 51.0027L76 64.4533L62.544 50.9973L76 37.5413L89.456 51.0027ZM55.0027 104.997L58.7733 108.773L72.2293 122.229L76 126L79.7707 122.229L93.2267 108.773L96.9973 105.003L93.2267 101.227L79.7707 87.7707L76 84L72.2293 87.7707L58.7733 101.227L55.0027 104.997ZM89.456 104.997L76 118.464L62.544 105.008L76 91.536L89.456 104.997ZM31.7707 81.7707L28 78L31.7707 74.2293L45.2267 60.7733L49.0027 57.0027L52.7733 60.7733L66.2293 74.2293L70 78L66.2293 81.7707L52.7733 95.2267L49.0027 98.9973L45.2267 95.2267L31.7707 81.7707ZM48.9973 91.456L62.464 78L48.9973 64.544L35.5413 78L48.9973 91.456ZM82 78L85.7707 81.7707L99.2267 95.2267L102.997 98.9973L106.773 95.2267L120.229 81.7707L124 78L120.229 74.2293L106.773 60.7733L103.003 57.0027L99.2267 60.7733L85.7707 74.2293L82 78ZM116.453 78L102.997 91.456L89.5467 78L103.008 64.544L116.453 78Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip1_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M282 78L234 30L186 78L234 126L282 78Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip2_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 78L392 30L344 78L392 126L440 78ZM351.541 78L392 37.5413L432.459 78L392 118.459L351.541 78Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip3_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 51.0027L532.773 54.7733L546.229 68.2293L550 72L553.771 68.2293L567.227 54.7733L570.997 51.0027L567.227 47.2267L553.771 33.7707L550 30L546.229 33.7707L532.773 47.2267L529.003 51.0027ZM529.003 104.997L532.773 108.773L546.229 122.229L550 126L553.771 122.229L567.227 108.773L570.997 105.003L567.227 101.227L553.771 87.7707L550 84L546.229 87.7707L532.773 101.227L529.003 104.997ZM505.771 81.7707L502 78L505.771 74.2293L519.227 60.7733L523.003 57.0027L526.773 60.7733L540.229 74.2293L544 78L540.229 81.7707L526.773 95.2267L523.003 98.9973L519.227 95.2267L505.771 81.7707ZM556 78L559.771 81.7707L573.227 95.2267L576.997 98.9973L580.773 95.2267L594.229 81.7707L598 78L594.229 74.2293L580.773 60.7733L577.003 57.0027L573.227 60.7733L559.771 74.2293L556 78Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip4_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 225L76 177L28 225L76 273L124 225Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip5_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M282 225L234 177L186 225L234 273L282 225ZM193.541 225L234 184.541L274.459 225L234 265.459L193.541 225Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip6_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M371.003 198.003L374.773 201.773L388.229 215.229L392 219L395.771 215.229L409.227 201.773L412.997 198.003L409.227 194.227L395.771 180.771L392 177L388.229 180.771L374.773 194.227L371.003 198.003ZM405.456 198.003L392 211.453L378.544 197.997L392 184.541L405.456 198.003ZM371.003 251.997L374.773 255.773L388.229 269.229L392 273L395.771 269.229L409.227 255.773L412.997 252.003L409.227 248.227L395.771 234.771L392 231L388.229 234.771L374.773 248.227L371.003 251.997ZM405.456 251.997L392 265.464L378.544 252.008L392 238.536L405.456 251.997ZM347.771 228.771L344 225L347.771 221.229L361.227 207.773L365.003 204.003L368.773 207.773L382.229 221.229L386 225L382.229 228.771L368.773 242.227L365.003 245.997L361.227 242.227L347.771 228.771ZM364.997 238.456L378.464 225L364.997 211.544L351.541 225L364.997 238.456ZM398 225L401.771 228.771L415.227 242.227L418.997 245.997L422.773 242.227L436.229 228.771L440 225L436.229 221.229L422.773 207.773L419.003 204.003L415.227 207.773L401.771 221.229L398 225ZM432.453 225L418.997 238.456L405.547 225L419.008 211.544L432.453 225Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip7_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 198.003L532.773 201.773L546.229 215.229L550 219L553.771 215.229L567.227 201.773L570.997 198.003L567.227 194.227L553.771 180.771L550 177L546.229 180.771L532.773 194.227L529.003 198.003ZM529.003 251.997L532.773 255.773L546.229 269.229L550 273L553.771 269.229L567.227 255.773L570.997 252.003L567.227 248.227L553.771 234.771L550 231L546.229 234.771L532.773 248.227L529.003 251.997ZM505.771 228.771L502 225L505.771 221.229L519.227 207.773L523.003 204.003L526.773 207.773L540.229 221.229L544 225L540.229 228.771L526.773 242.227L523.003 245.997L519.227 242.227L505.771 228.771ZM556 225L559.771 228.771L573.227 242.227L576.997 245.997L580.773 242.227L594.229 228.771L598 225L594.229 221.229L580.773 207.773L577.003 204.003L573.227 207.773L559.771 221.229L556 225Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip8_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 372L76 324L28 372L76 420L124 372ZM35.5413 372L76 331.541L116.459 372L76 412.459L35.5413 372Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip9_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.003 345.003L216.773 348.773L230.229 362.229L234 366L237.771 362.229L251.227 348.773L254.997 345.003L251.227 341.227L237.771 327.771L234 324L230.229 327.771L216.773 341.227L213.003 345.003ZM213.003 398.997L216.773 402.773L230.229 416.229L234 420L237.771 416.229L251.227 402.773L254.997 399.003L251.227 395.227L237.771 381.771L234 378L230.229 381.771L216.773 395.227L213.003 398.997ZM189.771 375.771L186 372L189.771 368.229L203.227 354.773L207.003 351.003L210.773 354.773L224.229 368.229L228 372L224.229 375.771L210.773 389.227L207.003 392.997L203.227 389.227L189.771 375.771ZM240 372L243.771 375.771L257.227 389.227L260.997 392.997L264.773 389.227L278.229 375.771L282 372L278.229 368.229L264.773 354.773L261.003 351.003L257.227 354.773L243.771 368.229L240 372Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip10_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 372L392 324L344 372L392 420L440 372Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip11_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 345.003L532.773 348.773L546.229 362.229L550 366L553.771 362.229L567.227 348.773L570.997 345.003L567.227 341.227L553.771 327.771L550 324L546.229 327.771L532.773 341.227L529.003 345.003ZM563.456 345.003L550 358.453L536.544 344.997L550 331.541L563.456 345.003ZM529.003 398.997L532.773 402.773L546.229 416.229L550 420L553.771 416.229L567.227 402.773L570.997 399.003L567.227 395.227L553.771 381.771L550 378L546.229 381.771L532.773 395.227L529.003 398.997ZM563.456 398.997L550 412.464L536.544 399.008L550 385.536L563.456 398.997ZM505.771 375.771L502 372L505.771 368.229L519.227 354.773L523.003 351.003L526.773 354.773L540.229 368.229L544 372L540.229 375.771L526.773 389.227L523.003 392.997L519.227 389.227L505.771 375.771ZM522.997 385.456L536.464 372L522.997 358.544L509.541 372L522.997 385.456ZM556 372L559.771 375.771L573.227 389.227L576.997 392.997L580.773 389.227L594.229 375.771L598 372L594.229 368.229L580.773 354.773L577.003 351.003L573.227 354.773L559.771 368.229L556 372ZM590.453 372L576.997 385.456L563.547 372L577.008 358.544L590.453 372Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip12_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 509L76 461L28 509L76 557L124 509ZM35.5413 509L76 468.541L116.459 509L76 549.459L35.5413 509Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip13_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.003 482.003L216.773 485.773L230.229 499.229L234 503L237.771 499.229L251.227 485.773L254.997 482.003L251.227 478.227L237.771 464.771L234 461L230.229 464.771L216.773 478.227L213.003 482.003ZM247.456 482.003L234 495.453L220.544 481.997L234 468.541L247.456 482.003ZM213.003 535.997L216.773 539.773L230.229 553.229L234 557L237.771 553.229L251.227 539.773L254.997 536.003L251.227 532.227L237.771 518.771L234 515L230.229 518.771L216.773 532.227L213.003 535.997ZM247.456 535.997L234 549.464L220.544 536.008L234 522.536L247.456 535.997ZM189.771 512.771L186 509L189.771 505.229L203.227 491.773L207.003 488.003L210.773 491.773L224.229 505.229L228 509L224.229 512.771L210.773 526.227L207.003 529.997L203.227 526.227L189.771 512.771ZM206.997 522.456L220.464 509L206.997 495.544L193.541 509L206.997 522.456ZM240 509L243.771 512.771L257.227 526.227L260.997 529.997L264.773 526.227L278.229 512.771L282 509L278.229 505.229L264.773 491.773L261.003 488.003L257.227 491.773L243.771 505.229L240 509ZM274.453 509L260.997 522.456L247.547 509L261.008 495.544L274.453 509Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip14_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 509L392 461L344 509L392 557L440 509Z" fill="#B4B4B4"/>
+</g>
+<g clip-path="url(#clip15_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 482.003L532.773 485.773L546.229 499.229L550 503L553.771 499.229L567.227 485.773L570.997 482.003L567.227 478.227L553.771 464.771L550 461L546.229 464.771L532.773 478.227L529.003 482.003ZM529.003 535.997L532.773 539.773L546.229 553.229L550 557L553.771 553.229L567.227 539.773L570.997 536.003L567.227 532.227L553.771 518.771L550 515L546.229 518.771L532.773 532.227L529.003 535.997ZM505.771 512.771L502 509L505.771 505.229L519.227 491.773L523.003 488.003L526.773 491.773L540.229 505.229L544 509L540.229 512.771L526.773 526.227L523.003 529.997L519.227 526.227L505.771 512.771ZM556 509L559.771 512.771L573.227 526.227L576.997 529.997L580.773 526.227L594.229 512.771L598 509L594.229 505.229L580.773 491.773L577.003 488.003L573.227 491.773L559.771 505.229L556 509Z" fill="#B4B4B4"/>
+</g>
+<rect x="4.98267" y="4" width="616.035" height="579" stroke="#4D4D4D" stroke-width="8"/>
+<rect x="160.991" y="302" width="304.017" height="140" stroke="#4D4D4D" stroke-width="8"/>
+<rect x="317" y="4" width="304.017" height="297" stroke="#4D4D4D" stroke-width="8"/>
+<rect x="4.98267" y="153" width="156.017" height="289" stroke="#4D4D4D" stroke-width="8"/>
+<defs>
+<clipPath id="clip0_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 30)"/>
+</clipPath>
+<clipPath id="clip1_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 30)"/>
+</clipPath>
+<clipPath id="clip2_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 30)"/>
+</clipPath>
+<clipPath id="clip3_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 30)"/>
+</clipPath>
+<clipPath id="clip4_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 177)"/>
+</clipPath>
+<clipPath id="clip5_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 177)"/>
+</clipPath>
+<clipPath id="clip6_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 177)"/>
+</clipPath>
+<clipPath id="clip7_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 177)"/>
+</clipPath>
+<clipPath id="clip8_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 324)"/>
+</clipPath>
+<clipPath id="clip9_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 324)"/>
+</clipPath>
+<clipPath id="clip10_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 324)"/>
+</clipPath>
+<clipPath id="clip11_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 324)"/>
+</clipPath>
+<clipPath id="clip12_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 461)"/>
+</clipPath>
+<clipPath id="clip13_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 461)"/>
+</clipPath>
+<clipPath id="clip14_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 461)"/>
+</clipPath>
+<clipPath id="clip15_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 461)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg b/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg
new file mode 100644
index 0000000000..e65e5c2e91
--- /dev/null
+++ b/apps/design-system/public/img/design-system-marks/fragments-illustration--light.svg
@@ -0,0 +1,104 @@
+<svg width="626" height="587" viewBox="0 0 626 587" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.0027 51.0027L58.7733 54.7733L72.2293 68.2293L76 72L79.7707 68.2293L93.2267 54.7733L96.9973 51.0027L93.2267 47.2267L79.7707 33.7707L76 30L72.2293 33.7707L58.7733 47.2267L55.0027 51.0027ZM89.456 51.0027L76 64.4533L62.544 50.9973L76 37.5413L89.456 51.0027ZM55.0027 104.997L58.7733 108.773L72.2293 122.229L76 126L79.7707 122.229L93.2267 108.773L96.9973 105.003L93.2267 101.227L79.7707 87.7707L76 84L72.2293 87.7707L58.7733 101.227L55.0027 104.997ZM89.456 104.997L76 118.464L62.544 105.008L76 91.536L89.456 104.997ZM31.7707 81.7707L28 78L31.7707 74.2293L45.2267 60.7733L49.0027 57.0027L52.7733 60.7733L66.2293 74.2293L70 78L66.2293 81.7707L52.7733 95.2267L49.0027 98.9973L45.2267 95.2267L31.7707 81.7707ZM48.9973 91.456L62.464 78L48.9973 64.544L35.5413 78L48.9973 91.456ZM82 78L85.7707 81.7707L99.2267 95.2267L102.997 98.9973L106.773 95.2267L120.229 81.7707L124 78L120.229 74.2293L106.773 60.7733L103.003 57.0027L99.2267 60.7733L85.7707 74.2293L82 78ZM116.453 78L102.997 91.456L89.5467 78L103.008 64.544L116.453 78Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip1_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M282 78L234 30L186 78L234 126L282 78Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip2_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 78L392 30L344 78L392 126L440 78ZM351.541 78L392 37.5413L432.459 78L392 118.459L351.541 78Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip3_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 51.0027L532.773 54.7733L546.229 68.2293L550 72L553.771 68.2293L567.227 54.7733L570.997 51.0027L567.227 47.2267L553.771 33.7707L550 30L546.229 33.7707L532.773 47.2267L529.003 51.0027ZM529.003 104.997L532.773 108.773L546.229 122.229L550 126L553.771 122.229L567.227 108.773L570.997 105.003L567.227 101.227L553.771 87.7707L550 84L546.229 87.7707L532.773 101.227L529.003 104.997ZM505.771 81.7707L502 78L505.771 74.2293L519.227 60.7733L523.003 57.0027L526.773 60.7733L540.229 74.2293L544 78L540.229 81.7707L526.773 95.2267L523.003 98.9973L519.227 95.2267L505.771 81.7707ZM556 78L559.771 81.7707L573.227 95.2267L576.997 98.9973L580.773 95.2267L594.229 81.7707L598 78L594.229 74.2293L580.773 60.7733L577.003 57.0027L573.227 60.7733L559.771 74.2293L556 78Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip4_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 225L76 177L28 225L76 273L124 225Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip5_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M282 225L234 177L186 225L234 273L282 225ZM193.541 225L234 184.541L274.459 225L234 265.459L193.541 225Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip6_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M371.003 198.003L374.773 201.773L388.229 215.229L392 219L395.771 215.229L409.227 201.773L412.997 198.003L409.227 194.227L395.771 180.771L392 177L388.229 180.771L374.773 194.227L371.003 198.003ZM405.456 198.003L392 211.453L378.544 197.997L392 184.541L405.456 198.003ZM371.003 251.997L374.773 255.773L388.229 269.229L392 273L395.771 269.229L409.227 255.773L412.997 252.003L409.227 248.227L395.771 234.771L392 231L388.229 234.771L374.773 248.227L371.003 251.997ZM405.456 251.997L392 265.464L378.544 252.008L392 238.536L405.456 251.997ZM347.771 228.771L344 225L347.771 221.229L361.227 207.773L365.003 204.003L368.773 207.773L382.229 221.229L386 225L382.229 228.771L368.773 242.227L365.003 245.997L361.227 242.227L347.771 228.771ZM364.997 238.456L378.464 225L364.997 211.544L351.541 225L364.997 238.456ZM398 225L401.771 228.771L415.227 242.227L418.997 245.997L422.773 242.227L436.229 228.771L440 225L436.229 221.229L422.773 207.773L419.003 204.003L415.227 207.773L401.771 221.229L398 225ZM432.453 225L418.997 238.456L405.547 225L419.008 211.544L432.453 225Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip7_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 198.003L532.773 201.773L546.229 215.229L550 219L553.771 215.229L567.227 201.773L570.997 198.003L567.227 194.227L553.771 180.771L550 177L546.229 180.771L532.773 194.227L529.003 198.003ZM529.003 251.997L532.773 255.773L546.229 269.229L550 273L553.771 269.229L567.227 255.773L570.997 252.003L567.227 248.227L553.771 234.771L550 231L546.229 234.771L532.773 248.227L529.003 251.997ZM505.771 228.771L502 225L505.771 221.229L519.227 207.773L523.003 204.003L526.773 207.773L540.229 221.229L544 225L540.229 228.771L526.773 242.227L523.003 245.997L519.227 242.227L505.771 228.771ZM556 225L559.771 228.771L573.227 242.227L576.997 245.997L580.773 242.227L594.229 228.771L598 225L594.229 221.229L580.773 207.773L577.003 204.003L573.227 207.773L559.771 221.229L556 225Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip8_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 372L76 324L28 372L76 420L124 372ZM35.5413 372L76 331.541L116.459 372L76 412.459L35.5413 372Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip9_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.003 345.003L216.773 348.773L230.229 362.229L234 366L237.771 362.229L251.227 348.773L254.997 345.003L251.227 341.227L237.771 327.771L234 324L230.229 327.771L216.773 341.227L213.003 345.003ZM213.003 398.997L216.773 402.773L230.229 416.229L234 420L237.771 416.229L251.227 402.773L254.997 399.003L251.227 395.227L237.771 381.771L234 378L230.229 381.771L216.773 395.227L213.003 398.997ZM189.771 375.771L186 372L189.771 368.229L203.227 354.773L207.003 351.003L210.773 354.773L224.229 368.229L228 372L224.229 375.771L210.773 389.227L207.003 392.997L203.227 389.227L189.771 375.771ZM240 372L243.771 375.771L257.227 389.227L260.997 392.997L264.773 389.227L278.229 375.771L282 372L278.229 368.229L264.773 354.773L261.003 351.003L257.227 354.773L243.771 368.229L240 372Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip10_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 372L392 324L344 372L392 420L440 372Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip11_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 345.003L532.773 348.773L546.229 362.229L550 366L553.771 362.229L567.227 348.773L570.997 345.003L567.227 341.227L553.771 327.771L550 324L546.229 327.771L532.773 341.227L529.003 345.003ZM563.456 345.003L550 358.453L536.544 344.997L550 331.541L563.456 345.003ZM529.003 398.997L532.773 402.773L546.229 416.229L550 420L553.771 416.229L567.227 402.773L570.997 399.003L567.227 395.227L553.771 381.771L550 378L546.229 381.771L532.773 395.227L529.003 398.997ZM563.456 398.997L550 412.464L536.544 399.008L550 385.536L563.456 398.997ZM505.771 375.771L502 372L505.771 368.229L519.227 354.773L523.003 351.003L526.773 354.773L540.229 368.229L544 372L540.229 375.771L526.773 389.227L523.003 392.997L519.227 389.227L505.771 375.771ZM522.997 385.456L536.464 372L522.997 358.544L509.541 372L522.997 385.456ZM556 372L559.771 375.771L573.227 389.227L576.997 392.997L580.773 389.227L594.229 375.771L598 372L594.229 368.229L580.773 354.773L577.003 351.003L573.227 354.773L559.771 368.229L556 372ZM590.453 372L576.997 385.456L563.547 372L577.008 358.544L590.453 372Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip12_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M124 509L76 461L28 509L76 557L124 509ZM35.5413 509L76 468.541L116.459 509L76 549.459L35.5413 509Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip13_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.003 482.003L216.773 485.773L230.229 499.229L234 503L237.771 499.229L251.227 485.773L254.997 482.003L251.227 478.227L237.771 464.771L234 461L230.229 464.771L216.773 478.227L213.003 482.003ZM247.456 482.003L234 495.453L220.544 481.997L234 468.541L247.456 482.003ZM213.003 535.997L216.773 539.773L230.229 553.229L234 557L237.771 553.229L251.227 539.773L254.997 536.003L251.227 532.227L237.771 518.771L234 515L230.229 518.771L216.773 532.227L213.003 535.997ZM247.456 535.997L234 549.464L220.544 536.008L234 522.536L247.456 535.997ZM189.771 512.771L186 509L189.771 505.229L203.227 491.773L207.003 488.003L210.773 491.773L224.229 505.229L228 509L224.229 512.771L210.773 526.227L207.003 529.997L203.227 526.227L189.771 512.771ZM206.997 522.456L220.464 509L206.997 495.544L193.541 509L206.997 522.456ZM240 509L243.771 512.771L257.227 526.227L260.997 529.997L264.773 526.227L278.229 512.771L282 509L278.229 505.229L264.773 491.773L261.003 488.003L257.227 491.773L243.771 505.229L240 509ZM274.453 509L260.997 522.456L247.547 509L261.008 495.544L274.453 509Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip14_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M440 509L392 461L344 509L392 557L440 509Z" fill="#525252"/>
+</g>
+<g clip-path="url(#clip15_1709_1537)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M529.003 482.003L532.773 485.773L546.229 499.229L550 503L553.771 499.229L567.227 485.773L570.997 482.003L567.227 478.227L553.771 464.771L550 461L546.229 464.771L532.773 478.227L529.003 482.003ZM529.003 535.997L532.773 539.773L546.229 553.229L550 557L553.771 553.229L567.227 539.773L570.997 536.003L567.227 532.227L553.771 518.771L550 515L546.229 518.771L532.773 532.227L529.003 535.997ZM505.771 512.771L502 509L505.771 505.229L519.227 491.773L523.003 488.003L526.773 491.773L540.229 505.229L544 509L540.229 512.771L526.773 526.227L523.003 529.997L519.227 526.227L505.771 512.771ZM556 509L559.771 512.771L573.227 526.227L576.997 529.997L580.773 526.227L594.229 512.771L598 509L594.229 505.229L580.773 491.773L577.003 488.003L573.227 491.773L559.771 505.229L556 509Z" fill="#525252"/>
+</g>
+<rect x="4.98267" y="4" width="616.035" height="579" stroke="#B2B2B2" stroke-width="8"/>
+<rect x="160.991" y="302" width="304.017" height="140" stroke="#B2B2B2" stroke-width="8"/>
+<rect x="317" y="4" width="304.017" height="297" stroke="#B2B2B2" stroke-width="8"/>
+<rect x="4.98267" y="153" width="156.017" height="289" stroke="#B2B2B2" stroke-width="8"/>
+<defs>
+<clipPath id="clip0_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 30)"/>
+</clipPath>
+<clipPath id="clip1_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 30)"/>
+</clipPath>
+<clipPath id="clip2_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 30)"/>
+</clipPath>
+<clipPath id="clip3_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 30)"/>
+</clipPath>
+<clipPath id="clip4_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 177)"/>
+</clipPath>
+<clipPath id="clip5_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 177)"/>
+</clipPath>
+<clipPath id="clip6_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 177)"/>
+</clipPath>
+<clipPath id="clip7_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 177)"/>
+</clipPath>
+<clipPath id="clip8_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 324)"/>
+</clipPath>
+<clipPath id="clip9_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 324)"/>
+</clipPath>
+<clipPath id="clip10_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 324)"/>
+</clipPath>
+<clipPath id="clip11_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 324)"/>
+</clipPath>
+<clipPath id="clip12_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(28 461)"/>
+</clipPath>
+<clipPath id="clip13_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(186 461)"/>
+</clipPath>
+<clipPath id="clip14_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(344 461)"/>
+</clipPath>
+<clipPath id="clip15_1709_1537">
+<rect width="96" height="96" fill="white" transform="translate(502 461)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/themes/dark.svg b/apps/design-system/public/img/themes/dark.svg
new file mode 100644
index 0000000000..ea74324a83
--- /dev/null
+++ b/apps/design-system/public/img/themes/dark.svg
@@ -0,0 +1,39 @@
+<svg viewBox="0 0 162 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_701_65535)">
+<rect x="0.242188" width="161.5" height="88" rx="6" fill="#1C1C1C"/>
+<mask id="path-3-inside-1_701_65535" fill="white">
+<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z"/>
+</mask>
+<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z" fill="#1C1C1C"/>
+<path d="M0.242188 0H13.2422H0.242188ZM13.2422 88H0.242188H13.2422ZM0.242188 88V0V88ZM14.2422 0V88H12.2422V0H14.2422Z" fill="#2E2E2E" mask="url(#path-3-inside-1_701_65535)"/>
+<mask id="path-5-inside-2_701_65535" fill="white">
+<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z"/>
+</mask>
+<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z" fill="#1C1C1C"/>
+<path d="M161.742 0L161.742 13L161.742 0ZM13.2422 13L13.2422 -6.49114e-06L13.2422 13ZM13.2422 -6.49114e-06L161.742 0L13.2422 -6.49114e-06ZM161.742 14L13.2422 14L13.2422 12L161.742 12L161.742 14Z" fill="#2E2E2E" mask="url(#path-5-inside-2_701_65535)"/>
+<rect x="44.2552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
+<rect x="44.2552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
+<rect x="52.4406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
+<rect x="52.4406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
+<rect x="77.8762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="77.8762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="77.8762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="77.8762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="17.9922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
+<rect x="43.7552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
+<rect x="69.0052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
+<rect x="101.423" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
+<rect x="4.86719" y="4.625" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="4.86719" y="13.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="4.86719" y="20.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="4.86719" y="28.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="4.86719" y="35.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="4.86719" y="78.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+</g>
+<rect x="0.742188" y="0.5" width="160.5" height="87" rx="5.5" stroke="#2E2E2E"/>
+<defs>
+<clipPath id="clip0_701_65535">
+<rect x="0.242188" width="161.5" height="88" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/themes/deep-dark.svg b/apps/design-system/public/img/themes/deep-dark.svg
new file mode 100644
index 0000000000..05bab64b78
--- /dev/null
+++ b/apps/design-system/public/img/themes/deep-dark.svg
@@ -0,0 +1,39 @@
+<svg viewBox="0 0 163 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_701_65549)">
+<rect x="0.742188" width="161.5" height="88" rx="6" fill="#121212"/>
+<mask id="path-3-inside-1_701_65549" fill="white">
+<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z"/>
+</mask>
+<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z" fill="#121212"/>
+<path d="M0.742188 0H13.7422H0.742188ZM13.7422 88H0.742188H13.7422ZM0.742188 88V0V88ZM14.7422 0V88H12.7422V0H14.7422Z" fill="#292929" mask="url(#path-3-inside-1_701_65549)"/>
+<mask id="path-5-inside-2_701_65549" fill="white">
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z"/>
+</mask>
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z" fill="#121212"/>
+<path d="M162.242 0L162.242 13L162.242 0ZM13.7422 13L13.7422 -6.49114e-06L13.7422 13ZM13.7422 -6.49114e-06L162.242 0L13.7422 -6.49114e-06ZM162.242 14L13.7422 14L13.7422 12L162.242 12L162.242 14Z" fill="#292929" mask="url(#path-5-inside-2_701_65549)"/>
+<rect x="44.7552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
+<rect x="44.7552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#1F1F1F" stroke="#292929"/>
+<rect x="52.9406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
+<rect x="52.9406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#B4B4B4"/>
+<rect x="78.3762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
+<rect x="78.3762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#FAFAFA"/>
+<rect x="78.3762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
+<rect x="78.3762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#FAFAFA"/>
+<rect x="18.4922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
+<rect x="44.2552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
+<rect x="69.5052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#4D4D4D"/>
+<rect x="101.923" y="28" width="20.5" height="1.5" rx="0.75" fill="#DB8E00"/>
+<rect x="5.36719" y="4.625" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+<rect x="5.36719" y="13.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+<rect x="5.36719" y="20.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+<rect x="5.36719" y="28.375" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+<rect x="5.36719" y="35.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+<rect x="5.36719" y="78.875" width="3.75" height="3.75" rx="1" fill="#4D4D4D"/>
+</g>
+<rect x="1.24219" y="0.5" width="160.5" height="87" rx="5.5" stroke="#292929"/>
+<defs>
+<clipPath id="clip0_701_65549">
+<rect x="0.742188" width="161.5" height="88" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/themes/light.svg b/apps/design-system/public/img/themes/light.svg
new file mode 100644
index 0000000000..0ef0774355
--- /dev/null
+++ b/apps/design-system/public/img/themes/light.svg
@@ -0,0 +1,39 @@
+<svg viewBox="0 0 162 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_701_65608)">
+<rect x="0.242188" width="161.5" height="88" rx="6" fill="#F8F9FA"/>
+<mask id="path-3-inside-1_701_65608" fill="white">
+<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z"/>
+</mask>
+<path d="M0.242188 6C0.242188 2.68629 2.92848 0 6.24219 0H13.2422V88H6.24219C2.92848 88 0.242188 85.3137 0.242188 82V6Z" fill="#F8F9FA"/>
+<path d="M0.242188 0H13.2422H0.242188ZM13.2422 88H0.242188H13.2422ZM0.242188 88V0V88ZM14.2422 0V88H12.2422V0H14.2422Z" fill="#E6E8EB" mask="url(#path-3-inside-1_701_65608)"/>
+<mask id="path-5-inside-2_701_65608" fill="white">
+<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z"/>
+</mask>
+<path d="M155.742 -2.62268e-07C159.056 -1.17421e-07 161.742 2.68629 161.742 6L161.742 13L13.2422 13L13.2422 -6.49114e-06L155.742 -2.62268e-07Z" fill="#F8F9FA"/>
+<path d="M161.742 0L161.742 13L161.742 0ZM13.2422 13L13.2422 -6.49114e-06L13.2422 13ZM13.2422 -6.49114e-06L161.742 0L13.2422 -6.49114e-06ZM161.742 14L13.2422 14L13.2422 12L161.742 12L161.742 14Z" fill="#E6E8EB" mask="url(#path-5-inside-2_701_65608)"/>
+<rect x="44.2552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#FCFCFC" stroke="#E6E8EB"/>
+<rect x="44.2552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#FCFCFC" stroke="#E6E8EB"/>
+<rect x="52.4406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#525252"/>
+<rect x="52.4406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#525252"/>
+<rect x="77.8762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="77.8762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="77.8762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="77.8762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="17.9922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3FCF8E"/>
+<rect x="43.7552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#B2B2B2"/>
+<rect x="69.0052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#B2B2B2"/>
+<rect x="101.423" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
+<rect x="4.86719" y="4.625" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+<rect x="4.86719" y="13.375" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+<rect x="4.86719" y="20.875" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+<rect x="4.86719" y="28.375" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+<rect x="4.86719" y="35.875" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+<rect x="4.86719" y="78.875" width="3.75" height="3.75" rx="1" fill="#B2B2B2"/>
+</g>
+<rect x="0.742188" y="0.5" width="160.5" height="87" rx="5.5" stroke="#E6E8EB"/>
+<defs>
+<clipPath id="clip0_701_65608">
+<rect x="0.242188" width="161.5" height="88" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/img/themes/system.svg b/apps/design-system/public/img/themes/system.svg
new file mode 100644
index 0000000000..386cd71770
--- /dev/null
+++ b/apps/design-system/public/img/themes/system.svg
@@ -0,0 +1,62 @@
+<svg width="163" height="88" viewBox="0 0 163 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_742_69895)">
+<rect x="0.742188" width="161.5" height="88" rx="6" fill="#1C1C1C"/>
+<mask id="path-3-inside-1_742_69895" fill="white">
+<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z"/>
+</mask>
+<path d="M0.742188 6C0.742188 2.68629 3.42848 0 6.74219 0H13.7422V88H6.74219C3.42848 88 0.742188 85.3137 0.742188 82V6Z" fill="#1C1C1C"/>
+<path d="M0.742188 0H13.7422H0.742188ZM13.7422 88H0.742188H13.7422ZM0.742188 88V0V88ZM14.7422 0V88H12.7422V0H14.7422Z" fill="#2E2E2E" mask="url(#path-3-inside-1_742_69895)"/>
+<mask id="path-5-inside-2_742_69895" fill="white">
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z"/>
+</mask>
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z" fill="#1C1C1C"/>
+<path d="M162.242 0L162.242 13L162.242 0ZM13.7422 13L13.7422 -6.49114e-06L13.7422 13ZM13.7422 -6.49114e-06L162.242 0L13.7422 -6.49114e-06ZM162.242 14L13.7422 14L13.7422 12L162.242 12L162.242 14Z" fill="#2E2E2E" mask="url(#path-5-inside-2_742_69895)"/>
+<rect x="44.7552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
+<rect x="44.7552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#232323" stroke="#2E2E2E"/>
+<rect x="52.9406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
+<rect x="52.9406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#A0A0A0"/>
+<rect x="78.3762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="78.3762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="78.3762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="78.3762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#EDEDED"/>
+<rect x="18.4922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3ECF8E"/>
+<rect x="44.2552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
+<rect x="69.5052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#707070"/>
+<rect x="101.923" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
+<rect x="5.36719" y="4.625" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="5.36719" y="13.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="5.36719" y="20.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="5.36719" y="28.375" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="5.36719" y="35.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<rect x="5.36719" y="78.875" width="3.75" height="3.75" rx="1" fill="#707070"/>
+<mask id="mask0_742_69895" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="0" width="131" height="88">
+<path d="M130.534 2.34842e-05L32.4507 88H162.131V0L130.534 2.34842e-05Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_742_69895)">
+<rect x="0.742188" width="161.5" height="88" fill="#F8F9FA"/>
+<mask id="path-27-inside-3_742_69895" fill="white">
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z"/>
+</mask>
+<path d="M156.242 -2.62268e-07C159.556 -1.17421e-07 162.242 2.68629 162.242 6L162.242 13L13.7422 13L13.7422 -6.49114e-06L156.242 -2.62268e-07Z" fill="#F8F9FA"/>
+<path d="M162.242 0L162.242 13L162.242 0ZM13.7422 13L13.7422 -6.49114e-06L13.7422 13ZM13.7422 -6.49114e-06L162.242 0L13.7422 -6.49114e-06ZM162.242 14L13.7422 14L13.7422 12L162.242 12L162.242 14Z" fill="#E6E8EB" mask="url(#path-27-inside-3_742_69895)"/>
+<rect x="44.7552" y="21.5" width="86.4738" height="23.5" rx="2.5" fill="#FCFCFC" stroke="#E6E8EB"/>
+<rect x="44.7552" y="51.5" width="86.4738" height="23.5" rx="2.5" fill="#FCFCFC" stroke="#E6E8EB"/>
+<rect x="52.9406" y="28" width="19.2318" height="1.5" rx="0.75" fill="#525252"/>
+<rect x="52.9406" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#525252"/>
+<rect x="78.3762" y="28" width="19.2318" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="78.3762" y="56.5" width="19.2318" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="78.3762" y="33.25" width="44.0471" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="78.3762" y="61.75" width="44.0471" height="1.5" rx="0.75" fill="#11181C"/>
+<rect x="18.4922" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#3FCF8E"/>
+<rect x="44.2552" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#B2B2B2"/>
+<rect x="69.5052" y="4.625" width="20.5" height="3.75" rx="1.875" fill="#B2B2B2"/>
+<rect x="101.923" y="28" width="20.5" height="1.5" rx="0.75" fill="#FFB224"/>
+</g>
+</g>
+<rect x="1.24219" y="0.5" width="160.5" height="87" rx="5.5" stroke="#2E2E2E"/>
+<defs>
+<clipPath id="clip0_742_69895">
+<rect x="0.742188" width="161.5" height="88" rx="6" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/design-system/public/next.svg b/apps/design-system/public/next.svg
new file mode 100644
index 0000000000..5174b28c56
--- /dev/null
+++ b/apps/design-system/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/apps/design-system/public/vercel.svg b/apps/design-system/public/vercel.svg
new file mode 100644
index 0000000000..d2f8422273
--- /dev/null
+++ b/apps/design-system/public/vercel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/apps/design-system/registry/.eslintrc.json b/apps/design-system/registry/.eslintrc.json
new file mode 100644
index 0000000000..6579e1b264
--- /dev/null
+++ b/apps/design-system/registry/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/eslintrc",
+  "rules": {
+    "react/no-unescaped-entities": "off"
+  }
+}
diff --git a/apps/design-system/registry/colors.ts b/apps/design-system/registry/colors.ts
new file mode 100644
index 0000000000..2589cf4f69
--- /dev/null
+++ b/apps/design-system/registry/colors.ts
@@ -0,0 +1,1556 @@
+export const colors = {
+  inherit: 'inherit',
+  current: 'currentColor',
+  transparent: 'transparent',
+  black: {
+    hex: '#000000',
+    rgb: 'rgb(0,0,0)',
+    hsl: 'hsl(0,0%,0%)',
+  },
+  white: {
+    hex: '#ffffff',
+    rgb: 'rgb(255,255,255)',
+    hsl: 'hsl(0,0%,100%)',
+  },
+  slate: [
+    {
+      scale: 50,
+      hex: '#f8fafc',
+      rgb: 'rgb(248,250,252)',
+      hsl: 'hsl(210,40%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f1f5f9',
+      rgb: 'rgb(241,245,249)',
+      hsl: 'hsl(210,40%,96.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#e2e8f0',
+      rgb: 'rgb(226,232,240)',
+      hsl: 'hsl(214.3,31.8%,91.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#cbd5e1',
+      rgb: 'rgb(203,213,225)',
+      hsl: 'hsl(212.7,26.8%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#94a3b8',
+      rgb: 'rgb(148,163,184)',
+      hsl: 'hsl(215,20.2%,65.1%)',
+    },
+    {
+      scale: 500,
+      hex: '#64748b',
+      rgb: 'rgb(100,116,139)',
+      hsl: 'hsl(215.4,16.3%,46.9%)',
+    },
+    {
+      scale: 600,
+      hex: '#475569',
+      rgb: 'rgb(71,85,105)',
+      hsl: 'hsl(215.3,19.3%,34.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#334155',
+      rgb: 'rgb(51,65,85)',
+      hsl: 'hsl(215.3,25%,26.7%)',
+    },
+    {
+      scale: 800,
+      hex: '#1e293b',
+      rgb: 'rgb(30,41,59)',
+      hsl: 'hsl(217.2,32.6%,17.5%)',
+    },
+    {
+      scale: 900,
+      hex: '#0f172a',
+      rgb: 'rgb(15,23,42)',
+      hsl: 'hsl(222.2,47.4%,11.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#020617',
+      rgb: 'rgb(2,6,23)',
+      hsl: 'hsl(222.2,84%,4.9%)',
+    },
+  ],
+  gray: [
+    {
+      scale: 50,
+      hex: '#f9fafb',
+      rgb: 'rgb(249,250,251)',
+      hsl: 'hsl(210,20%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f3f4f6',
+      rgb: 'rgb(243,244,246)',
+      hsl: 'hsl(220,14.3%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e5e7eb',
+      rgb: 'rgb(229,231,235)',
+      hsl: 'hsl(220,13%,91%)',
+    },
+    {
+      scale: 300,
+      hex: '#d1d5db',
+      rgb: 'rgb(209,213,219)',
+      hsl: 'hsl(216,12.2%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#9ca3af',
+      rgb: 'rgb(156,163,175)',
+      hsl: 'hsl(217.9,10.6%,64.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#6b7280',
+      rgb: 'rgb(107,114,128)',
+      hsl: 'hsl(220,8.9%,46.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#4b5563',
+      rgb: 'rgb(75,85,99)',
+      hsl: 'hsl(215,13.8%,34.1%)',
+    },
+    {
+      scale: 700,
+      hex: '#374151',
+      rgb: 'rgb(55,65,81)',
+      hsl: 'hsl(216.9,19.1%,26.7%)',
+    },
+    {
+      scale: 800,
+      hex: '#1f2937',
+      rgb: 'rgb(31,41,55)',
+      hsl: 'hsl(215,27.9%,16.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#111827',
+      rgb: 'rgb(17,24,39)',
+      hsl: 'hsl(220.9,39.3%,11%)',
+    },
+    {
+      scale: 950,
+      hex: '#030712',
+      rgb: 'rgb(3,7,18)',
+      hsl: 'hsl(224,71.4%,4.1%)',
+    },
+  ],
+  zinc: [
+    {
+      scale: 50,
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f4f4f5',
+      rgb: 'rgb(244,244,245)',
+      hsl: 'hsl(240,4.8%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e4e4e7',
+      rgb: 'rgb(228,228,231)',
+      hsl: 'hsl(240,5.9%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#d4d4d8',
+      rgb: 'rgb(212,212,216)',
+      hsl: 'hsl(240,4.9%,83.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#a1a1aa',
+      rgb: 'rgb(161,161,170)',
+      hsl: 'hsl(240,5%,64.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#71717a',
+      rgb: 'rgb(113,113,122)',
+      hsl: 'hsl(240,3.8%,46.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#52525b',
+      rgb: 'rgb(82,82,91)',
+      hsl: 'hsl(240,5.2%,33.9%)',
+    },
+    {
+      scale: 700,
+      hex: '#3f3f46',
+      rgb: 'rgb(63,63,70)',
+      hsl: 'hsl(240,5.3%,26.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#27272a',
+      rgb: 'rgb(39,39,42)',
+      hsl: 'hsl(240,3.7%,15.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#18181b',
+      rgb: 'rgb(24,24,27)',
+      hsl: 'hsl(240,5.9%,10%)',
+    },
+    {
+      scale: 950,
+      hex: '#09090b',
+      rgb: 'rgb(9,9,11)',
+      hsl: 'hsl(240,10%,3.9%)',
+    },
+  ],
+  neutral: [
+    {
+      scale: 50,
+      hex: '#fafafa',
+      rgb: 'rgb(250,250,250)',
+      hsl: 'hsl(0,0%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f5f5f5',
+      rgb: 'rgb(245,245,245)',
+      hsl: 'hsl(0,0%,96.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#e5e5e5',
+      rgb: 'rgb(229,229,229)',
+      hsl: 'hsl(0,0%,89.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#d4d4d4',
+      rgb: 'rgb(212,212,212)',
+      hsl: 'hsl(0,0%,83.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a3a3a3',
+      rgb: 'rgb(163,163,163)',
+      hsl: 'hsl(0,0%,63.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#737373',
+      rgb: 'rgb(115,115,115)',
+      hsl: 'hsl(0,0%,45.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#525252',
+      rgb: 'rgb(82,82,82)',
+      hsl: 'hsl(0,0%,32.2%)',
+    },
+    {
+      scale: 700,
+      hex: '#404040',
+      rgb: 'rgb(64,64,64)',
+      hsl: 'hsl(0,0%,25.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#262626',
+      rgb: 'rgb(38,38,38)',
+      hsl: 'hsl(0,0%,14.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#171717',
+      rgb: 'rgb(23,23,23)',
+      hsl: 'hsl(0,0%,9%)',
+    },
+    {
+      scale: 950,
+      hex: '#0a0a0a',
+      rgb: 'rgb(10,10,10)',
+      hsl: 'hsl(0,0%,3.9%)',
+    },
+  ],
+  stone: [
+    {
+      scale: 50,
+      hex: '#fafaf9',
+      rgb: 'rgb(250,250,249)',
+      hsl: 'hsl(60,9.1%,97.8%)',
+    },
+    {
+      scale: 100,
+      hex: '#f5f5f4',
+      rgb: 'rgb(245,245,244)',
+      hsl: 'hsl(60,4.8%,95.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#e7e5e4',
+      rgb: 'rgb(231,229,228)',
+      hsl: 'hsl(20,5.9%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#d6d3d1',
+      rgb: 'rgb(214,211,209)',
+      hsl: 'hsl(24,5.7%,82.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#a8a29e',
+      rgb: 'rgb(168,162,158)',
+      hsl: 'hsl(24,5.4%,63.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#78716c',
+      rgb: 'rgb(120,113,108)',
+      hsl: 'hsl(25,5.3%,44.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#57534e',
+      rgb: 'rgb(87,83,78)',
+      hsl: 'hsl(33.3,5.5%,32.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#44403c',
+      rgb: 'rgb(68,64,60)',
+      hsl: 'hsl(30,6.3%,25.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#292524',
+      rgb: 'rgb(41,37,36)',
+      hsl: 'hsl(12,6.5%,15.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#1c1917',
+      rgb: 'rgb(28,25,23)',
+      hsl: 'hsl(24,9.8%,10%)',
+    },
+    {
+      scale: 950,
+      hex: '#0c0a09',
+      rgb: 'rgb(12,10,9)',
+      hsl: 'hsl(20,14.3%,4.1%)',
+    },
+  ],
+  red: [
+    {
+      scale: 50,
+      hex: '#fef2f2',
+      rgb: 'rgb(254,242,242)',
+      hsl: 'hsl(0,85.7%,97.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#fee2e2',
+      rgb: 'rgb(254,226,226)',
+      hsl: 'hsl(0,93.3%,94.1%)',
+    },
+    {
+      scale: 200,
+      hex: '#fecaca',
+      rgb: 'rgb(254,202,202)',
+      hsl: 'hsl(0,96.3%,89.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#fca5a5',
+      rgb: 'rgb(252,165,165)',
+      hsl: 'hsl(0,93.5%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#f87171',
+      rgb: 'rgb(248,113,113)',
+      hsl: 'hsl(0,90.6%,70.8%)',
+    },
+    {
+      scale: 500,
+      hex: '#ef4444',
+      rgb: 'rgb(239,68,68)',
+      hsl: 'hsl(0,84.2%,60.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#dc2626',
+      rgb: 'rgb(220,38,38)',
+      hsl: 'hsl(0,72.2%,50.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#b91c1c',
+      rgb: 'rgb(185,28,28)',
+      hsl: 'hsl(0,73.7%,41.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#991b1b',
+      rgb: 'rgb(153,27,27)',
+      hsl: 'hsl(0,70%,35.3%)',
+    },
+    {
+      scale: 900,
+      hex: '#7f1d1d',
+      rgb: 'rgb(127,29,29)',
+      hsl: 'hsl(0,62.8%,30.6%)',
+    },
+    {
+      scale: 950,
+      hex: '#450a0a',
+      rgb: 'rgb(69,10,10)',
+      hsl: 'hsl(0,74.7%,15.5%)',
+    },
+  ],
+  orange: [
+    {
+      scale: 50,
+      hex: '#fff7ed',
+      rgb: 'rgb(255,247,237)',
+      hsl: 'hsl(33.3,100%,96.5%)',
+    },
+    {
+      scale: 100,
+      hex: '#ffedd5',
+      rgb: 'rgb(255,237,213)',
+      hsl: 'hsl(34.3,100%,91.8%)',
+    },
+    {
+      scale: 200,
+      hex: '#fed7aa',
+      rgb: 'rgb(254,215,170)',
+      hsl: 'hsl(32.1,97.7%,83.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#fdba74',
+      rgb: 'rgb(253,186,116)',
+      hsl: 'hsl(30.7,97.2%,72.4%)',
+    },
+    {
+      scale: 400,
+      hex: '#fb923c',
+      rgb: 'rgb(251,146,60)',
+      hsl: 'hsl(27,96%,61%)',
+    },
+    {
+      scale: 500,
+      hex: '#f97316',
+      rgb: 'rgb(249,115,22)',
+      hsl: 'hsl(24.6,95%,53.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#ea580c',
+      rgb: 'rgb(234,88,12)',
+      hsl: 'hsl(20.5,90.2%,48.2%)',
+    },
+    {
+      scale: 700,
+      hex: '#c2410c',
+      rgb: 'rgb(194,65,12)',
+      hsl: 'hsl(17.5,88.3%,40.4%)',
+    },
+    {
+      scale: 800,
+      hex: '#9a3412',
+      rgb: 'rgb(154,52,18)',
+      hsl: 'hsl(15,79.1%,33.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#7c2d12',
+      rgb: 'rgb(124,45,18)',
+      hsl: 'hsl(15.3,74.6%,27.8%)',
+    },
+    {
+      scale: 950,
+      hex: '#431407',
+      rgb: 'rgb(67,20,7)',
+      hsl: 'hsl(13,81.1%,14.5%)',
+    },
+  ],
+  amber: [
+    {
+      scale: 50,
+      hex: '#fffbeb',
+      rgb: 'rgb(255,251,235)',
+      hsl: 'hsl(48,100%,96.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#fef3c7',
+      rgb: 'rgb(254,243,199)',
+      hsl: 'hsl(48,96.5%,88.8%)',
+    },
+    {
+      scale: 200,
+      hex: '#fde68a',
+      rgb: 'rgb(253,230,138)',
+      hsl: 'hsl(48,96.6%,76.7%)',
+    },
+    {
+      scale: 300,
+      hex: '#fcd34d',
+      rgb: 'rgb(252,211,77)',
+      hsl: 'hsl(45.9,96.7%,64.5%)',
+    },
+    {
+      scale: 400,
+      hex: '#fbbf24',
+      rgb: 'rgb(251,191,36)',
+      hsl: 'hsl(43.3,96.4%,56.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#f59e0b',
+      rgb: 'rgb(245,158,11)',
+      hsl: 'hsl(37.7,92.1%,50.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#d97706',
+      rgb: 'rgb(217,119,6)',
+      hsl: 'hsl(32.1,94.6%,43.7%)',
+    },
+    {
+      scale: 700,
+      hex: '#b45309',
+      rgb: 'rgb(180,83,9)',
+      hsl: 'hsl(26,90.5%,37.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#92400e',
+      rgb: 'rgb(146,64,14)',
+      hsl: 'hsl(22.7,82.5%,31.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#78350f',
+      rgb: 'rgb(120,53,15)',
+      hsl: 'hsl(21.7,77.8%,26.5%)',
+    },
+    {
+      scale: 950,
+      hex: '#451a03',
+      rgb: 'rgb(69,26,3)',
+      hsl: 'hsl(20.9,91.7%,14.1%)',
+    },
+  ],
+  yellow: [
+    {
+      scale: 50,
+      hex: '#fefce8',
+      rgb: 'rgb(254,252,232)',
+      hsl: 'hsl(54.5,91.7%,95.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#fef9c3',
+      rgb: 'rgb(254,249,195)',
+      hsl: 'hsl(54.9,96.7%,88%)',
+    },
+    {
+      scale: 200,
+      hex: '#fef08a',
+      rgb: 'rgb(254,240,138)',
+      hsl: 'hsl(52.8,98.3%,76.9%)',
+    },
+    {
+      scale: 300,
+      hex: '#fde047',
+      rgb: 'rgb(253,224,71)',
+      hsl: 'hsl(50.4,97.8%,63.5%)',
+    },
+    {
+      scale: 400,
+      hex: '#facc15',
+      rgb: 'rgb(250,204,21)',
+      hsl: 'hsl(47.9,95.8%,53.1%)',
+    },
+    {
+      scale: 500,
+      hex: '#eab308',
+      rgb: 'rgb(234,179,8)',
+      hsl: 'hsl(45.4,93.4%,47.5%)',
+    },
+    {
+      scale: 600,
+      hex: '#ca8a04',
+      rgb: 'rgb(202,138,4)',
+      hsl: 'hsl(40.6,96.1%,40.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#a16207',
+      rgb: 'rgb(161,98,7)',
+      hsl: 'hsl(35.5,91.7%,32.9%)',
+    },
+    {
+      scale: 800,
+      hex: '#854d0e',
+      rgb: 'rgb(133,77,14)',
+      hsl: 'hsl(31.8,81%,28.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#713f12',
+      rgb: 'rgb(113,63,18)',
+      hsl: 'hsl(28.4,72.5%,25.7%)',
+    },
+    {
+      scale: 950,
+      hex: '#422006',
+      rgb: 'rgb(66,32,6)',
+      hsl: 'hsl(26,83.3%,14.1%)',
+    },
+  ],
+  lime: [
+    {
+      scale: 50,
+      hex: '#f7fee7',
+      rgb: 'rgb(247,254,231)',
+      hsl: 'hsl(78.3,92%,95.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#ecfccb',
+      rgb: 'rgb(236,252,203)',
+      hsl: 'hsl(79.6,89.1%,89.2%)',
+    },
+    {
+      scale: 200,
+      hex: '#d9f99d',
+      rgb: 'rgb(217,249,157)',
+      hsl: 'hsl(80.9,88.5%,79.6%)',
+    },
+    {
+      scale: 300,
+      hex: '#bef264',
+      rgb: 'rgb(190,242,100)',
+      hsl: 'hsl(82,84.5%,67.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a3e635',
+      rgb: 'rgb(163,230,53)',
+      hsl: 'hsl(82.7,78%,55.5%)',
+    },
+    {
+      scale: 500,
+      hex: '#84cc16',
+      rgb: 'rgb(132,204,22)',
+      hsl: 'hsl(83.7,80.5%,44.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#65a30d',
+      rgb: 'rgb(101,163,13)',
+      hsl: 'hsl(84.8,85.2%,34.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#4d7c0f',
+      rgb: 'rgb(77,124,15)',
+      hsl: 'hsl(85.9,78.4%,27.3%)',
+    },
+    {
+      scale: 800,
+      hex: '#3f6212',
+      rgb: 'rgb(63,98,18)',
+      hsl: 'hsl(86.3,69%,22.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#365314',
+      rgb: 'rgb(54,83,20)',
+      hsl: 'hsl(87.6,61.2%,20.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#1a2e05',
+      rgb: 'rgb(26,46,5)',
+      hsl: 'hsl(89.3,80.4%,10%)',
+    },
+  ],
+  green: [
+    {
+      scale: 50,
+      hex: '#f0fdf4',
+      rgb: 'rgb(240,253,244)',
+      hsl: 'hsl(138.5,76.5%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#dcfce7',
+      rgb: 'rgb(220,252,231)',
+      hsl: 'hsl(140.6,84.2%,92.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#bbf7d0',
+      rgb: 'rgb(187,247,208)',
+      hsl: 'hsl(141,78.9%,85.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#86efac',
+      rgb: 'rgb(134,239,172)',
+      hsl: 'hsl(141.7,76.6%,73.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#4ade80',
+      rgb: 'rgb(74,222,128)',
+      hsl: 'hsl(141.9,69.2%,58%)',
+    },
+    {
+      scale: 500,
+      hex: '#22c55e',
+      rgb: 'rgb(34,197,94)',
+      hsl: 'hsl(142.1,70.6%,45.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#16a34a',
+      rgb: 'rgb(22,163,74)',
+      hsl: 'hsl(142.1,76.2%,36.3%)',
+    },
+    {
+      scale: 700,
+      hex: '#15803d',
+      rgb: 'rgb(21,128,61)',
+      hsl: 'hsl(142.4,71.8%,29.2%)',
+    },
+    {
+      scale: 800,
+      hex: '#166534',
+      rgb: 'rgb(22,101,52)',
+      hsl: 'hsl(142.8,64.2%,24.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#14532d',
+      rgb: 'rgb(20,83,45)',
+      hsl: 'hsl(143.8,61.2%,20.2%)',
+    },
+    {
+      scale: 950,
+      hex: '#052e16',
+      rgb: 'rgb(5,46,22)',
+      hsl: 'hsl(144.9,80.4%,10%)',
+    },
+  ],
+  emerald: [
+    {
+      scale: 50,
+      hex: '#ecfdf5',
+      rgb: 'rgb(236,253,245)',
+      hsl: 'hsl(151.8,81%,95.9%)',
+    },
+    {
+      scale: 100,
+      hex: '#d1fae5',
+      rgb: 'rgb(209,250,229)',
+      hsl: 'hsl(149.3,80.4%,90%)',
+    },
+    {
+      scale: 200,
+      hex: '#a7f3d0',
+      rgb: 'rgb(167,243,208)',
+      hsl: 'hsl(152.4,76%,80.4%)',
+    },
+    {
+      scale: 300,
+      hex: '#6ee7b7',
+      rgb: 'rgb(110,231,183)',
+      hsl: 'hsl(156.2,71.6%,66.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#34d399',
+      rgb: 'rgb(52,211,153)',
+      hsl: 'hsl(158.1,64.4%,51.6%)',
+    },
+    {
+      scale: 500,
+      hex: '#10b981',
+      rgb: 'rgb(16,185,129)',
+      hsl: 'hsl(160.1,84.1%,39.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#059669',
+      rgb: 'rgb(5,150,105)',
+      hsl: 'hsl(161.4,93.5%,30.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#047857',
+      rgb: 'rgb(4,120,87)',
+      hsl: 'hsl(162.9,93.5%,24.3%)',
+    },
+    {
+      scale: 800,
+      hex: '#065f46',
+      rgb: 'rgb(6,95,70)',
+      hsl: 'hsl(163.1,88.1%,19.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#064e3b',
+      rgb: 'rgb(6,78,59)',
+      hsl: 'hsl(164.2,85.7%,16.5%)',
+    },
+    {
+      scale: 950,
+      hex: '#022c22',
+      rgb: 'rgb(2,44,34)',
+      hsl: 'hsl(165.7,91.3%,9%)',
+    },
+  ],
+  teal: [
+    {
+      scale: 50,
+      hex: '#f0fdfa',
+      rgb: 'rgb(240,253,250)',
+      hsl: 'hsl(166.2,76.5%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#ccfbf1',
+      rgb: 'rgb(204,251,241)',
+      hsl: 'hsl(167.2,85.5%,89.2%)',
+    },
+    {
+      scale: 200,
+      hex: '#99f6e4',
+      rgb: 'rgb(153,246,228)',
+      hsl: 'hsl(168.4,83.8%,78.2%)',
+    },
+    {
+      scale: 300,
+      hex: '#5eead4',
+      rgb: 'rgb(94,234,212)',
+      hsl: 'hsl(170.6,76.9%,64.3%)',
+    },
+    {
+      scale: 400,
+      hex: '#2dd4bf',
+      rgb: 'rgb(45,212,191)',
+      hsl: 'hsl(172.5,66%,50.4%)',
+    },
+    {
+      scale: 500,
+      hex: '#14b8a6',
+      rgb: 'rgb(20,184,166)',
+      hsl: 'hsl(173.4,80.4%,40%)',
+    },
+    {
+      scale: 600,
+      hex: '#0d9488',
+      rgb: 'rgb(13,148,136)',
+      hsl: 'hsl(174.7,83.9%,31.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#0f766e',
+      rgb: 'rgb(15,118,110)',
+      hsl: 'hsl(175.3,77.4%,26.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#115e59',
+      rgb: 'rgb(17,94,89)',
+      hsl: 'hsl(176.1,69.4%,21.8%)',
+    },
+    {
+      scale: 900,
+      hex: '#134e4a',
+      rgb: 'rgb(19,78,74)',
+      hsl: 'hsl(175.9,60.8%,19%)',
+    },
+    {
+      scale: 950,
+      hex: '#042f2e',
+      rgb: 'rgb(4,47,46)',
+      hsl: 'hsl(178.6,84.3%,10%)',
+    },
+  ],
+  cyan: [
+    {
+      scale: 50,
+      hex: '#ecfeff',
+      rgb: 'rgb(236,254,255)',
+      hsl: 'hsl(183.2,100%,96.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#cffafe',
+      rgb: 'rgb(207,250,254)',
+      hsl: 'hsl(185.1,95.9%,90.4%)',
+    },
+    {
+      scale: 200,
+      hex: '#a5f3fc',
+      rgb: 'rgb(165,243,252)',
+      hsl: 'hsl(186.2,93.5%,81.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#67e8f9',
+      rgb: 'rgb(103,232,249)',
+      hsl: 'hsl(187,92.4%,69%)',
+    },
+    {
+      scale: 400,
+      hex: '#22d3ee',
+      rgb: 'rgb(34,211,238)',
+      hsl: 'hsl(187.9,85.7%,53.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#06b6d4',
+      rgb: 'rgb(6,182,212)',
+      hsl: 'hsl(188.7,94.5%,42.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#0891b2',
+      rgb: 'rgb(8,145,178)',
+      hsl: 'hsl(191.6,91.4%,36.5%)',
+    },
+    {
+      scale: 700,
+      hex: '#0e7490',
+      rgb: 'rgb(14,116,144)',
+      hsl: 'hsl(192.9,82.3%,31%)',
+    },
+    {
+      scale: 800,
+      hex: '#155e75',
+      rgb: 'rgb(21,94,117)',
+      hsl: 'hsl(194.4,69.6%,27.1%)',
+    },
+    {
+      scale: 900,
+      hex: '#164e63',
+      rgb: 'rgb(22,78,99)',
+      hsl: 'hsl(196.4,63.6%,23.7%)',
+    },
+    {
+      scale: 950,
+      hex: '#083344',
+      rgb: 'rgb(8,51,68)',
+      hsl: 'hsl(197,78.9%,14.9%)',
+    },
+  ],
+  sky: [
+    {
+      scale: 50,
+      hex: '#f0f9ff',
+      rgb: 'rgb(240,249,255)',
+      hsl: 'hsl(204,100%,97.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#e0f2fe',
+      rgb: 'rgb(224,242,254)',
+      hsl: 'hsl(204,93.8%,93.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#bae6fd',
+      rgb: 'rgb(186,230,253)',
+      hsl: 'hsl(200.6,94.4%,86.1%)',
+    },
+    {
+      scale: 300,
+      hex: '#7dd3fc',
+      rgb: 'rgb(125,211,252)',
+      hsl: 'hsl(199.4,95.5%,73.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#38bdf8',
+      rgb: 'rgb(56,189,248)',
+      hsl: 'hsl(198.4,93.2%,59.6%)',
+    },
+    {
+      scale: 500,
+      hex: '#0ea5e9',
+      rgb: 'rgb(14,165,233)',
+      hsl: 'hsl(198.6,88.7%,48.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#0284c7',
+      rgb: 'rgb(2,132,199)',
+      hsl: 'hsl(200.4,98%,39.4%)',
+    },
+    {
+      scale: 700,
+      hex: '#0369a1',
+      rgb: 'rgb(3,105,161)',
+      hsl: 'hsl(201.3,96.3%,32.2%)',
+    },
+    {
+      scale: 800,
+      hex: '#075985',
+      rgb: 'rgb(7,89,133)',
+      hsl: 'hsl(201,90%,27.5%)',
+    },
+    {
+      scale: 900,
+      hex: '#0c4a6e',
+      rgb: 'rgb(12,74,110)',
+      hsl: 'hsl(202,80.3%,23.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#082f49',
+      rgb: 'rgb(8,47,73)',
+      hsl: 'hsl(204,80.2%,15.9%)',
+    },
+  ],
+  blue: [
+    {
+      scale: 50,
+      hex: '#eff6ff',
+      rgb: 'rgb(239,246,255)',
+      hsl: 'hsl(213.8,100%,96.9%)',
+    },
+    {
+      scale: 100,
+      hex: '#dbeafe',
+      rgb: 'rgb(219,234,254)',
+      hsl: 'hsl(214.3,94.6%,92.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#bfdbfe',
+      rgb: 'rgb(191,219,254)',
+      hsl: 'hsl(213.3,96.9%,87.3%)',
+    },
+    {
+      scale: 300,
+      hex: '#93c5fd',
+      rgb: 'rgb(147,197,253)',
+      hsl: 'hsl(211.7,96.4%,78.4%)',
+    },
+    {
+      scale: 400,
+      hex: '#60a5fa',
+      rgb: 'rgb(96,165,250)',
+      hsl: 'hsl(213.1,93.9%,67.8%)',
+    },
+    {
+      scale: 500,
+      hex: '#3b82f6',
+      rgb: 'rgb(59,130,246)',
+      hsl: 'hsl(217.2,91.2%,59.8%)',
+    },
+    {
+      scale: 600,
+      hex: '#2563eb',
+      rgb: 'rgb(37,99,235)',
+      hsl: 'hsl(221.2,83.2%,53.3%)',
+    },
+    {
+      scale: 700,
+      hex: '#1d4ed8',
+      rgb: 'rgb(29,78,216)',
+      hsl: 'hsl(224.3,76.3%,48%)',
+    },
+    {
+      scale: 800,
+      hex: '#1e40af',
+      rgb: 'rgb(30,64,175)',
+      hsl: 'hsl(225.9,70.7%,40.2%)',
+    },
+    {
+      scale: 900,
+      hex: '#1e3a8a',
+      rgb: 'rgb(30,58,138)',
+      hsl: 'hsl(224.4,64.3%,32.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#172554',
+      rgb: 'rgb(23,37,84)',
+      hsl: 'hsl(226.2,57%,21%)',
+    },
+  ],
+  indigo: [
+    {
+      scale: 50,
+      hex: '#eef2ff',
+      rgb: 'rgb(238,242,255)',
+      hsl: 'hsl(225.9,100%,96.7%)',
+    },
+    {
+      scale: 100,
+      hex: '#e0e7ff',
+      rgb: 'rgb(224,231,255)',
+      hsl: 'hsl(226.5,100%,93.9%)',
+    },
+    {
+      scale: 200,
+      hex: '#c7d2fe',
+      rgb: 'rgb(199,210,254)',
+      hsl: 'hsl(228,96.5%,88.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#a5b4fc',
+      rgb: 'rgb(165,180,252)',
+      hsl: 'hsl(229.7,93.5%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#818cf8',
+      rgb: 'rgb(129,140,248)',
+      hsl: 'hsl(234.5,89.5%,73.9%)',
+    },
+    {
+      scale: 500,
+      hex: '#6366f1',
+      rgb: 'rgb(99,102,241)',
+      hsl: 'hsl(238.7,83.5%,66.7%)',
+    },
+    {
+      scale: 600,
+      hex: '#4f46e5',
+      rgb: 'rgb(79,70,229)',
+      hsl: 'hsl(243.4,75.4%,58.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#4338ca',
+      rgb: 'rgb(67,56,202)',
+      hsl: 'hsl(244.5,57.9%,50.6%)',
+    },
+    {
+      scale: 800,
+      hex: '#3730a3',
+      rgb: 'rgb(55,48,163)',
+      hsl: 'hsl(243.7,54.5%,41.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#312e81',
+      rgb: 'rgb(49,46,129)',
+      hsl: 'hsl(242.2,47.4%,34.3%)',
+    },
+    {
+      scale: 950,
+      hex: '#1e1b4b',
+      rgb: 'rgb(30,27,75)',
+      hsl: 'hsl(243.8,47.1%,20%)',
+    },
+  ],
+  violet: [
+    {
+      scale: 50,
+      hex: '#f5f3ff',
+      rgb: 'rgb(245,243,255)',
+      hsl: 'hsl(250,100%,97.6%)',
+    },
+    {
+      scale: 100,
+      hex: '#ede9fe',
+      rgb: 'rgb(237,233,254)',
+      hsl: 'hsl(251.4,91.3%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#ddd6fe',
+      rgb: 'rgb(221,214,254)',
+      hsl: 'hsl(250.5,95.2%,91.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#c4b5fd',
+      rgb: 'rgb(196,181,253)',
+      hsl: 'hsl(252.5,94.7%,85.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#a78bfa',
+      rgb: 'rgb(167,139,250)',
+      hsl: 'hsl(255.1,91.7%,76.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#8b5cf6',
+      rgb: 'rgb(139,92,246)',
+      hsl: 'hsl(258.3,89.5%,66.3%)',
+    },
+    {
+      scale: 600,
+      hex: '#7c3aed',
+      rgb: 'rgb(124,58,237)',
+      hsl: 'hsl(262.1,83.3%,57.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#6d28d9',
+      rgb: 'rgb(109,40,217)',
+      hsl: 'hsl(263.4,70%,50.4%)',
+    },
+    {
+      scale: 800,
+      hex: '#5b21b6',
+      rgb: 'rgb(91,33,182)',
+      hsl: 'hsl(263.4,69.3%,42.2%)',
+    },
+    {
+      scale: 900,
+      hex: '#4c1d95',
+      rgb: 'rgb(76,29,149)',
+      hsl: 'hsl(263.5,67.4%,34.9%)',
+    },
+    {
+      scale: 950,
+      hex: '#1e1b4b',
+      rgb: 'rgb(46,16,101)',
+      hsl: 'hsl(261.2,72.6%,22.9%)',
+    },
+  ],
+  purple: [
+    {
+      scale: 50,
+      hex: '#faf5ff',
+      rgb: 'rgb(250,245,255)',
+      hsl: 'hsl(270,100%,98%)',
+    },
+    {
+      scale: 100,
+      hex: '#f3e8ff',
+      rgb: 'rgb(243,232,255)',
+      hsl: 'hsl(268.7,100%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#e9d5ff',
+      rgb: 'rgb(233,213,255)',
+      hsl: 'hsl(268.6,100%,91.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#d8b4fe',
+      rgb: 'rgb(216,180,254)',
+      hsl: 'hsl(269.2,97.4%,85.1%)',
+    },
+    {
+      scale: 400,
+      hex: '#c084fc',
+      rgb: 'rgb(192,132,252)',
+      hsl: 'hsl(270,95.2%,75.3%)',
+    },
+    {
+      scale: 500,
+      hex: '#a855f7',
+      rgb: 'rgb(168,85,247)',
+      hsl: 'hsl(270.7,91%,65.1%)',
+    },
+    {
+      scale: 600,
+      hex: '#9333ea',
+      rgb: 'rgb(147,51,234)',
+      hsl: 'hsl(271.5,81.3%,55.9%)',
+    },
+    {
+      scale: 700,
+      hex: '#7e22ce',
+      rgb: 'rgb(126,34,206)',
+      hsl: 'hsl(272.1,71.7%,47.1%)',
+    },
+    {
+      scale: 800,
+      hex: '#6b21a8',
+      rgb: 'rgb(107,33,168)',
+      hsl: 'hsl(272.9,67.2%,39.4%)',
+    },
+    {
+      scale: 900,
+      hex: '#581c87',
+      rgb: 'rgb(88,28,135)',
+      hsl: 'hsl(273.6,65.6%,32%)',
+    },
+    {
+      scale: 950,
+      hex: '#3b0764',
+      rgb: 'rgb(59,7,100)',
+      hsl: 'hsl(273.5,86.9%,21%)',
+    },
+  ],
+  fuchsia: [
+    {
+      scale: 50,
+      hex: '#fdf4ff',
+      rgb: 'rgb(253,244,255)',
+      hsl: 'hsl(289.1,100%,97.8%)',
+    },
+    {
+      scale: 100,
+      hex: '#fae8ff',
+      rgb: 'rgb(250,232,255)',
+      hsl: 'hsl(287,100%,95.5%)',
+    },
+    {
+      scale: 200,
+      hex: '#f5d0fe',
+      rgb: 'rgb(245,208,254)',
+      hsl: 'hsl(288.3,95.8%,90.6%)',
+    },
+    {
+      scale: 300,
+      hex: '#f0abfc',
+      rgb: 'rgb(240,171,252)',
+      hsl: 'hsl(291.1,93.1%,82.9%)',
+    },
+    {
+      scale: 400,
+      hex: '#e879f9',
+      rgb: 'rgb(232,121,249)',
+      hsl: 'hsl(292,91.4%,72.5%)',
+    },
+    {
+      scale: 500,
+      hex: '#d946ef',
+      rgb: 'rgb(217,70,239)',
+      hsl: 'hsl(292.2,84.1%,60.6%)',
+    },
+    {
+      scale: 600,
+      hex: '#c026d3',
+      rgb: 'rgb(192,38,211)',
+      hsl: 'hsl(293.4,69.5%,48.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#a21caf',
+      rgb: 'rgb(162,28,175)',
+      hsl: 'hsl(294.7,72.4%,39.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#86198f',
+      rgb: 'rgb(134,25,143)',
+      hsl: 'hsl(295.4,70.2%,32.9%)',
+    },
+    {
+      scale: 900,
+      hex: '#701a75',
+      rgb: 'rgb(112,26,117)',
+      hsl: 'hsl(296.7,63.6%,28%)',
+    },
+    {
+      scale: 950,
+      hex: '#4a044e',
+      rgb: 'rgb(74,4,78)',
+      hsl: 'hsl(296.8,90.2%,16.1%)',
+    },
+  ],
+  pink: [
+    {
+      scale: 50,
+      hex: '#fdf2f8',
+      rgb: 'rgb(253,242,248)',
+      hsl: 'hsl(327.3,73.3%,97.1%)',
+    },
+    {
+      scale: 100,
+      hex: '#fce7f3',
+      rgb: 'rgb(252,231,243)',
+      hsl: 'hsl(325.7,77.8%,94.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#fbcfe8',
+      rgb: 'rgb(251,207,232)',
+      hsl: 'hsl(325.9,84.6%,89.8%)',
+    },
+    {
+      scale: 300,
+      hex: '#f9a8d4',
+      rgb: 'rgb(249,168,212)',
+      hsl: 'hsl(327.4,87.1%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#f472b6',
+      rgb: 'rgb(244,114,182)',
+      hsl: 'hsl(328.6,85.5%,70.2%)',
+    },
+    {
+      scale: 500,
+      hex: '#ec4899',
+      rgb: 'rgb(236,72,153)',
+      hsl: 'hsl(330.4,81.2%,60.4%)',
+    },
+    {
+      scale: 600,
+      hex: '#db2777',
+      rgb: 'rgb(219,39,119)',
+      hsl: 'hsl(333.3,71.4%,50.6%)',
+    },
+    {
+      scale: 700,
+      hex: '#be185d',
+      rgb: 'rgb(190,24,93)',
+      hsl: 'hsl(335.1,77.6%,42%)',
+    },
+    {
+      scale: 800,
+      hex: '#9d174d',
+      rgb: 'rgb(157,23,77)',
+      hsl: 'hsl(335.8,74.4%,35.3%)',
+    },
+    {
+      scale: 900,
+      hex: '#831843',
+      rgb: 'rgb(131,24,67)',
+      hsl: 'hsl(335.9,69%,30.4%)',
+    },
+    {
+      scale: 950,
+      hex: '#500724',
+      rgb: 'rgb(80,7,36)',
+      hsl: 'hsl(336.2,83.9%,17.1%)',
+    },
+  ],
+  rose: [
+    {
+      scale: 50,
+      hex: '#fff1f2',
+      rgb: 'rgb(255,241,242)',
+      hsl: 'hsl(355.7,100%,97.3%)',
+    },
+    {
+      scale: 100,
+      hex: '#ffe4e6',
+      rgb: 'rgb(255,228,230)',
+      hsl: 'hsl(355.6,100%,94.7%)',
+    },
+    {
+      scale: 200,
+      hex: '#fecdd3',
+      rgb: 'rgb(254,205,211)',
+      hsl: 'hsl(352.7,96.1%,90%)',
+    },
+    {
+      scale: 300,
+      hex: '#fda4af',
+      rgb: 'rgb(253,164,175)',
+      hsl: 'hsl(352.6,95.7%,81.8%)',
+    },
+    {
+      scale: 400,
+      hex: '#fb7185',
+      rgb: 'rgb(251,113,133)',
+      hsl: 'hsl(351.3,94.5%,71.4%)',
+    },
+    {
+      scale: 500,
+      hex: '#f43f5e',
+      rgb: 'rgb(244,63,94)',
+      hsl: 'hsl(349.7,89.2%,60.2%)',
+    },
+    {
+      scale: 600,
+      hex: '#e11d48',
+      rgb: 'rgb(225,29,72)',
+      hsl: 'hsl(346.8,77.2%,49.8%)',
+    },
+    {
+      scale: 700,
+      hex: '#be123c',
+      rgb: 'rgb(190,18,60)',
+      hsl: 'hsl(345.3,82.7%,40.8%)',
+    },
+    {
+      scale: 800,
+      hex: '#9f1239',
+      rgb: 'rgb(159,18,57)',
+      hsl: 'hsl(343.4,79.7%,34.7%)',
+    },
+    {
+      scale: 900,
+      hex: '#881337',
+      rgb: 'rgb(136,19,55)',
+      hsl: 'hsl(341.5,75.5%,30.4%)',
+    },
+    {
+      scale: 950,
+      hex: '#4c0519',
+      rgb: 'rgb(76,5,25)',
+      hsl: 'hsl(343.1,87.7%,15.9%)',
+    },
+  ],
+}
+
+export const colorMapping = {
+  light: {
+    background: 'white',
+    foreground: '{{base}}-950',
+    card: 'white',
+    'card-foreground': '{{base}}-950',
+    popover: 'white',
+    'popover-foreground': '{{base}}-950',
+    primary: '{{base}}-900',
+    'primary-foreground': '{{base}}-50',
+    secondary: '{{base}}-100',
+    'secondary-foreground': '{{base}}-900',
+    muted: '{{base}}-100',
+    'muted-foreground': '{{base}}-500',
+    accent: '{{base}}-100',
+    'accent-foreground': '{{base}}-900',
+    destructive: 'red-500',
+    'destructive-foreground': '{{base}}-50',
+    border: '{{base}}-200',
+    input: '{{base}}-200',
+    ring: '{{base}}-950',
+  },
+  dark: {
+    background: '{{base}}-950',
+    foreground: '{{base}}-50',
+    card: '{{base}}-950',
+    'card-foreground': '{{base}}-50',
+    popover: '{{base}}-950',
+    'popover-foreground': '{{base}}-50',
+    primary: '{{base}}-50',
+    'primary-foreground': '{{base}}-900',
+    secondary: '{{base}}-800',
+    'secondary-foreground': '{{base}}-50',
+    muted: '{{base}}-800',
+    'muted-foreground': '{{base}}-400',
+    accent: '{{base}}-800',
+    'accent-foreground': '{{base}}-50',
+    destructive: 'red-900',
+    'destructive-foreground': '{{base}}-50',
+    border: '{{base}}-800',
+    input: '{{base}}-800',
+    ring: '{{base}}-300',
+  },
+} as const
diff --git a/apps/design-system/registry/default/example/accordion-demo.tsx b/apps/design-system/registry/default/example/accordion-demo.tsx
new file mode 100644
index 0000000000..99f6a6dbe4
--- /dev/null
+++ b/apps/design-system/registry/default/example/accordion-demo.tsx
@@ -0,0 +1,31 @@
+import {
+  Accordion_Shadcn_,
+  AccordionContent_Shadcn_,
+  AccordionItem_Shadcn_,
+  AccordionTrigger_Shadcn_,
+} from 'ui'
+
+export default function AccordionDemo() {
+  return (
+    <Accordion_Shadcn_ type="single" collapsible className="w-full">
+      <AccordionItem_Shadcn_ value="item-1">
+        <AccordionTrigger_Shadcn_>Is it accessible?</AccordionTrigger_Shadcn_>
+        <AccordionContent_Shadcn_>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent_Shadcn_>
+      </AccordionItem_Shadcn_>
+      <AccordionItem_Shadcn_ value="item-2">
+        <AccordionTrigger_Shadcn_>Is it styled?</AccordionTrigger_Shadcn_>
+        <AccordionContent_Shadcn_>
+          Yes. It comes with default styles that matches the other components&apos; aesthetic.
+        </AccordionContent_Shadcn_>
+      </AccordionItem_Shadcn_>
+      <AccordionItem_Shadcn_ value="item-3">
+        <AccordionTrigger_Shadcn_>Is it animated?</AccordionTrigger_Shadcn_>
+        <AccordionContent_Shadcn_>
+          Yes. Its animated by default, but you can disable it if you prefer.
+        </AccordionContent_Shadcn_>
+      </AccordionItem_Shadcn_>
+    </Accordion_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/alert-demo.tsx b/apps/design-system/registry/default/example/alert-demo.tsx
new file mode 100644
index 0000000000..311b4bc8d6
--- /dev/null
+++ b/apps/design-system/registry/default/example/alert-demo.tsx
@@ -0,0 +1,15 @@
+import { Terminal } from 'lucide-react'
+
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+
+export default function AlertDemo() {
+  return (
+    <Alert_Shadcn_>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle_Shadcn_>Heads up!</AlertTitle_Shadcn_>
+      <AlertDescription_Shadcn_>
+        You can add components to your app using the cli.
+      </AlertDescription_Shadcn_>
+    </Alert_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/alert-destructive.tsx b/apps/design-system/registry/default/example/alert-destructive.tsx
new file mode 100644
index 0000000000..67c3b74714
--- /dev/null
+++ b/apps/design-system/registry/default/example/alert-destructive.tsx
@@ -0,0 +1,15 @@
+import { AlertCircle } from 'lucide-react'
+
+import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
+
+export default function AlertDestructive() {
+  return (
+    <Alert_Shadcn_ variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle_Shadcn_>Error</AlertTitle_Shadcn_>
+      <AlertDescription_Shadcn_>
+        Your session has expired. Please log in again.
+      </AlertDescription_Shadcn_>
+    </Alert_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/alert-dialog-demo.tsx b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
new file mode 100644
index 0000000000..38f358327a
--- /dev/null
+++ b/apps/design-system/registry/default/example/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from 'ui'
+import { Button } from 'ui'
+
+export default function AlertDialogDemo() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button type="outline">Show Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/apps/design-system/registry/default/example/aspect-ratio-demo.tsx b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
new file mode 100644
index 0000000000..d1d681c65f
--- /dev/null
+++ b/apps/design-system/registry/default/example/aspect-ratio-demo.tsx
@@ -0,0 +1,16 @@
+import Image from 'next/image'
+
+import { AspectRatio } from 'ui'
+
+export default function AspectRatioDemo() {
+  return (
+    <AspectRatio ratio={16 / 9} className="bg-muted">
+      <Image
+        src="https://images.unsplash.com/photo-1560937526-61078e7eb7d8?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by Drew Beamer"
+        fill
+        className="rounded-md object-cover"
+      />
+    </AspectRatio>
+  )
+}
diff --git a/apps/design-system/registry/default/example/avatar-demo.tsx b/apps/design-system/registry/default/example/avatar-demo.tsx
new file mode 100644
index 0000000000..bfa8b6b491
--- /dev/null
+++ b/apps/design-system/registry/default/example/avatar-demo.tsx
@@ -0,0 +1,10 @@
+import { Avatar, AvatarFallback, AvatarImage } from 'ui'
+
+export default function AvatarDemo() {
+  return (
+    <Avatar>
+      <AvatarImage src="https://github.com/mildtomato.png" alt="@mildtomato" />
+      <AvatarFallback>MT</AvatarFallback>
+    </Avatar>
+  )
+}
diff --git a/apps/design-system/registry/default/example/badge-demo.tsx b/apps/design-system/registry/default/example/badge-demo.tsx
new file mode 100644
index 0000000000..d34f2ce705
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-demo.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeDemo() {
+  return <Badge>Badge</Badge>
+}
diff --git a/apps/design-system/registry/default/example/badge-destructive.tsx b/apps/design-system/registry/default/example/badge-destructive.tsx
new file mode 100644
index 0000000000..a1d3b2ce59
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-destructive.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeDestructive() {
+  return <Badge variant="destructive">Destructive</Badge>
+}
diff --git a/apps/design-system/registry/default/example/badge-outline.tsx b/apps/design-system/registry/default/example/badge-outline.tsx
new file mode 100644
index 0000000000..780711720d
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-outline.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeOutline() {
+  return <Badge variant="outline">Outline</Badge>
+}
diff --git a/apps/design-system/registry/default/example/badge-secondary.tsx b/apps/design-system/registry/default/example/badge-secondary.tsx
new file mode 100644
index 0000000000..bc24be53c4
--- /dev/null
+++ b/apps/design-system/registry/default/example/badge-secondary.tsx
@@ -0,0 +1,5 @@
+import { Badge } from 'ui'
+
+export default function BadgeSecondary() {
+  return <Badge variant="secondary">Secondary</Badge>
+}
diff --git a/apps/design-system/registry/default/example/button-as-child.tsx b/apps/design-system/registry/default/example/button-as-child.tsx
new file mode 100644
index 0000000000..aa8c3e0259
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-as-child.tsx
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+
+import { Button } from 'ui'
+
+export default function ButtonAsChild() {
+  return (
+    <Button asChild>
+      <Link href="/login">Login</Link>
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/button-demo.tsx b/apps/design-system/registry/default/example/button-demo.tsx
new file mode 100644
index 0000000000..20758dc482
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-demo.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonDemo() {
+  return <Button>Button</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-destructive.tsx b/apps/design-system/registry/default/example/button-destructive.tsx
new file mode 100644
index 0000000000..86c6c55d12
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-destructive.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonDestructive() {
+  return <Button type="danger">Destructive</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-ghost.tsx b/apps/design-system/registry/default/example/button-ghost.tsx
new file mode 100644
index 0000000000..681dc37ac4
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-ghost.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonGhost() {
+  return <Button type="text">Text (Ghost)</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-icon.tsx b/apps/design-system/registry/default/example/button-icon.tsx
new file mode 100644
index 0000000000..a48c8f0e3a
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-icon.tsx
@@ -0,0 +1,7 @@
+import { ChevronRight } from 'lucide-react'
+
+import { Button } from 'ui'
+
+export default function ButtonIcon() {
+  return <Button type="outline" icon={<ChevronRight className="h-4 w-4" />}></Button>
+}
diff --git a/apps/design-system/registry/default/example/button-link.tsx b/apps/design-system/registry/default/example/button-link.tsx
new file mode 100644
index 0000000000..4a56d2d391
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-link.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonLink() {
+  return <Button type="link">Link</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-loading.tsx b/apps/design-system/registry/default/example/button-loading.tsx
new file mode 100644
index 0000000000..9320b8f0fd
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-loading.tsx
@@ -0,0 +1,9 @@
+import { Button } from 'ui'
+
+export default function ButtonLoading() {
+  return (
+    <Button disabled loading>
+      Please wait
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/button-outline.tsx b/apps/design-system/registry/default/example/button-outline.tsx
new file mode 100644
index 0000000000..be728d0f37
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-outline.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonOutline() {
+  return <Button type="outline">Outline</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-secondary.tsx b/apps/design-system/registry/default/example/button-secondary.tsx
new file mode 100644
index 0000000000..3ef8c64ff9
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-secondary.tsx
@@ -0,0 +1,5 @@
+import { Button } from 'ui'
+
+export default function ButtonSecondary() {
+  return <Button type="secondary">Secondary</Button>
+}
diff --git a/apps/design-system/registry/default/example/button-with-icon.tsx b/apps/design-system/registry/default/example/button-with-icon.tsx
new file mode 100644
index 0000000000..207f6749f1
--- /dev/null
+++ b/apps/design-system/registry/default/example/button-with-icon.tsx
@@ -0,0 +1,7 @@
+import { Mail } from 'lucide-react'
+
+import { Button } from 'ui'
+
+export default function ButtonWithIcon() {
+  return <Button icon={<Mail className="mr-2 h-4 w-4" />}>Login with Email</Button>
+}
diff --git a/apps/design-system/registry/default/example/calendar-demo.tsx b/apps/design-system/registry/default/example/calendar-demo.tsx
new file mode 100644
index 0000000000..b635acc658
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-demo.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+
+import { Calendar } from 'ui'
+
+export default function CalendarDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+}
diff --git a/apps/design-system/registry/default/example/calendar-form.tsx b/apps/design-system/registry/default/example/calendar-form.tsx
new file mode 100644
index 0000000000..23cacd3777
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-form.tsx
@@ -0,0 +1,92 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+})
+
+export default function CalendarForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField_Shadcn_
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-col">
+              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+              <Popover_Shadcn_>
+                <PopoverTrigger_Shadcn_ asChild>
+                  <FormControl_Shadcn_>
+                    <Button
+                      type={'default'}
+                      size="small"
+                      className={cn(
+                        'w-[240px] justify-start',
+                        !field.value && 'text-muted-foreground'
+                      )}
+                      icon={<CalendarIcon className="ml-auto opacity-50" />}
+                    >
+                      {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
+                    </Button>
+                  </FormControl_Shadcn_>
+                </PopoverTrigger_Shadcn_>
+                <PopoverContent_Shadcn_ className="w-auto p-0" align="start" side="right">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
+                    initialFocus
+                  />
+                </PopoverContent_Shadcn_>
+              </Popover_Shadcn_>
+              <FormDescription_Shadcn_>
+                Your date of birth is used to calculate your age.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/calendar-react-hook-form.tsx b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
new file mode 100644
index 0000000000..8daa38dc91
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-react-hook-form.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+})
+
+export default function CalendarForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField_Shadcn_
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-col">
+              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+              <Popover_Shadcn_>
+                <PopoverTrigger_Shadcn_ asChild>
+                  <FormControl_Shadcn_>
+                    <Button
+                      type={'outline'}
+                      className={cn(
+                        'w-[240px] pl-3 text-left font-normal',
+                        !field.value && 'text-muted-foreground'
+                      )}
+                    >
+                      {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl_Shadcn_>
+                </PopoverTrigger_Shadcn_>
+                <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
+                    initialFocus
+                  />
+                </PopoverContent_Shadcn_>
+              </Popover_Shadcn_>
+              <FormDescription_Shadcn_>
+                Your date of birth is used to calculate your age.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-demo.tsx b/apps/design-system/registry/default/example/checkbox-demo.tsx
new file mode 100644
index 0000000000..8f7ebf20d6
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-demo.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox_Shadcn_ id="terms" />
+      <label
+        htmlFor="terms"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-disabled.tsx b/apps/design-system/registry/default/example/checkbox-disabled.tsx
new file mode 100644
index 0000000000..0d5356651f
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-disabled.tsx
@@ -0,0 +1,15 @@
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxDisabled() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox_Shadcn_ id="terms2" disabled />
+      <label
+        htmlFor="terms2"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-form-multiple.tsx b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
new file mode 100644
index 0000000000..d1eacb70b3
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-multiple.tsx
@@ -0,0 +1,121 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import { Checkbox_Shadcn_ } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { toast } from 'ui'
+
+const items = [
+  {
+    id: 'recents',
+    label: 'Recents',
+  },
+  {
+    id: 'home',
+    label: 'Home',
+  },
+  {
+    id: 'applications',
+    label: 'Applications',
+  },
+  {
+    id: 'desktop',
+    label: 'Desktop',
+  },
+  {
+    id: 'downloads',
+    label: 'Downloads',
+  },
+  {
+    id: 'documents',
+    label: 'Documents',
+  },
+] as const
+
+const FormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: 'You have to select at least one item.',
+  }),
+})
+
+export default function CheckboxReactHookFormMultiple() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      items: ['recents', 'home'],
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField_Shadcn_
+          control={form.control}
+          name="items"
+          render={() => (
+            <FormItem_Shadcn_>
+              <div className="mb-4">
+                <FormLabel_Shadcn_ className="text-base">Sidebar</FormLabel_Shadcn_>
+                <FormDescription_Shadcn_>
+                  Select the items you want to display in the sidebar.
+                </FormDescription_Shadcn_>
+              </div>
+              {items.map((item) => (
+                <FormField_Shadcn_
+                  key={item.id}
+                  control={form.control}
+                  name="items"
+                  render={({ field }) => {
+                    return (
+                      <FormItem_Shadcn_
+                        key={item.id}
+                        className="flex flex-row items-start space-x-3 space-y-0"
+                      >
+                        <FormControl_Shadcn_>
+                          <Checkbox_Shadcn_
+                            checked={field.value?.includes(item.id)}
+                            onCheckedChange={(checked) => {
+                              return checked
+                                ? field.onChange([...field.value, item.id])
+                                : field.onChange(field.value?.filter((value) => value !== item.id))
+                            }}
+                          />
+                        </FormControl_Shadcn_>
+                        <FormLabel_Shadcn_ className="font-normal">{item.label}</FormLabel_Shadcn_>
+                      </FormItem_Shadcn_>
+                    )
+                  }}
+                />
+              ))}
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-form-single.tsx b/apps/design-system/registry/default/example/checkbox-form-single.tsx
new file mode 100644
index 0000000000..bea7b188f6
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-form-single.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import Link from 'next/link'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import { Checkbox_Shadcn_ } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  mobile: z.boolean().default(false).optional(),
+})
+
+export default function CheckboxReactHookFormSingle() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      mobile: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+              <FormControl_Shadcn_>
+                <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl_Shadcn_>
+              <div className="space-y-1 leading-none">
+                <FormLabel_Shadcn_>Use different settings for my mobile devices</FormLabel_Shadcn_>
+                <FormDescription_Shadcn_>
+                  You can manage your mobile notifications in the{' '}
+                  <Link href="/examples/forms">mobile settings</Link> page.
+                </FormDescription_Shadcn_>
+              </div>
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/checkbox-with-text.tsx b/apps/design-system/registry/default/example/checkbox-with-text.tsx
new file mode 100644
index 0000000000..87ec288baa
--- /dev/null
+++ b/apps/design-system/registry/default/example/checkbox-with-text.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Checkbox_Shadcn_ } from 'ui'
+
+export default function CheckboxWithText() {
+  return (
+    <div className="items-top flex space-x-2">
+      <Checkbox_Shadcn_ id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <label
+          htmlFor="terms1"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+        <p className="text-sm text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/collapsible-demo.tsx b/apps/design-system/registry/default/example/collapsible-demo.tsx
new file mode 100644
index 0000000000..4c4bd31b02
--- /dev/null
+++ b/apps/design-system/registry/default/example/collapsible-demo.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import { ChevronsUpDown, Plus, X } from 'lucide-react'
+
+import { Button } from 'ui'
+import { Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
+
+export default function CollapsibleDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  return (
+    <Collapsible_Shadcn_ open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+        <CollapsibleTrigger_Shadcn_ asChild>
+          <Button type="outline" size="medium" className="w-9 p-0">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger_Shadcn_>
+      </div>
+      <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+      <CollapsibleContent_Shadcn_ className="space-y-2">
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+        <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+      </CollapsibleContent_Shadcn_>
+    </Collapsible_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
new file mode 100644
index 0000000000..a4bb84e77d
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
@@ -0,0 +1,50 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+  return (
+    <div className="bg-studio w-full h-[320px] flex flex-col items-center border border-dashed rounded-md overflow-hidden">
+      <div className="bg-surface-200 border h-12 w-full rounded-t-md flex justify-center gap-3 items-center shadow">
+        <div className="flex gap-3">
+          <ExampleLabel>grid header</ExampleLabel>
+          <ClassLabel>bg-surface-200</ClassLabel>
+          <ClassLabel>border</ClassLabel>
+        </div>
+      </div>
+      <div className="bg-200 border-b border-r border-l border-secondary h-14 w-full flex justify-center gap-3 items-center shadow">
+        <div className="flex gap-3">
+          <ExampleLabel>content row</ExampleLabel>
+          <ClassLabel>bg-200</ClassLabel>
+          <ClassLabel>border-secondary</ClassLabel>
+        </div>
+      </div>
+      <div className="bg-200 border-b border-r border-l border-secondary h-14 w-full flex justify-center gap-3 items-center shadow">
+        <div className="flex gap-3">
+          <ExampleLabel>content row</ExampleLabel>
+          <ClassLabel>bg-200</ClassLabel>
+          <ClassLabel>border-secondary</ClassLabel>
+        </div>
+      </div>
+      <div className="bg-200 border-b border-r border-l border-secondary h-14 w-full flex justify-center gap-3 items-center shadow">
+        <div className="flex gap-3">
+          <ExampleLabel>content row</ExampleLabel>
+          <ClassLabel>bg-200</ClassLabel>
+          <ClassLabel>border-secondary</ClassLabel>
+        </div>
+      </div>
+      <div className="bg-200 border-b border-r border-l border-secondary h-14 w-full flex justify-center gap-3 items-center shadow">
+        <div className="flex gap-3">
+          <ExampleLabel>content row</ExampleLabel>
+          <ClassLabel>bg-200</ClassLabel>
+          <ClassLabel>border-secondary</ClassLabel>
+        </div>
+      </div>
+      <div className="flex bg-alternative w-full justify-center items-center h-full gap-3">
+        <ExampleLabel>empty frame space</ExampleLabel>
+        <ClassLabel>bg-alternative</ClassLabel>
+        <ClassLabel>border-stronger</ClassLabel>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-studio.tsx b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
new file mode 100644
index 0000000000..893abbd189
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-studio.tsx
@@ -0,0 +1,36 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+  return (
+    <div className="bg-studio w-full h-[320px] flex justify-center items-center gap-12 border border-dashed rounded-md p-3">
+      <div className="flex gap-3 items-center">
+        <ExampleLabel>app background</ExampleLabel>
+        <ClassLabel>bg-studio</ClassLabel>
+      </div>
+      <div className="bg-surface-100 border h-full w-[400px] rounded-md flex justify-center gap-10 items-center flex-col p-3">
+        <div className="flex gap-3">
+          <ExampleLabel>content panel</ExampleLabel>
+          <ClassLabel>bg-surface-100</ClassLabel>
+          <ClassLabel>border</ClassLabel>
+        </div>
+        <div className="bg-surface-200 border h-48 w-full rounded-md flex  gap-10 items-center flex-col p-3 pt-10">
+          <div className="flex gap-3">
+            <ExampleLabel>content panel</ExampleLabel>
+            <ClassLabel>bg-surface-200</ClassLabel>
+            <ClassLabel>border</ClassLabel>
+          </div>
+
+          <div className="bg-surface-300 border h-32 w-full rounded-md flex justify-center gap-3 items-center">
+            <div className="flex gap-3">
+              <ExampleLabel>content panel</ExampleLabel>
+              <ClassLabel>bg-surface-300</ClassLabel>
+              <ClassLabel>border</ClassLabel>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
new file mode 100644
index 0000000000..29c4eba1e1
--- /dev/null
+++ b/apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
@@ -0,0 +1,19 @@
+import { ClassLabel } from '@/components/class-label'
+import { ExampleLabel } from '@/components/example-label'
+import * as React from 'react'
+
+export default function Demo() {
+  return (
+    <div className="bg w-full h-[320px] flex justify-center items-center gap-12 border border-dashed rounded-md">
+      <div className="flex gap-3 items-center">
+        <ExampleLabel>app background</ExampleLabel>
+        <ClassLabel>bg</ClassLabel>
+      </div>
+      <div className="bg-surface-75 border border-muted h-32 w-1/2 rounded-md flex justify-center gap-3 items-center">
+        <ExampleLabel>content panel</ExampleLabel>
+        <ClassLabel>bg-surface-75</ClassLabel>
+        <ClassLabel>border-muted</ClassLabel>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/combobox-demo.tsx b/apps/design-system/registry/default/example/combobox-demo.tsx
new file mode 100644
index 0000000000..60aa8c843f
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-demo.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import * as React from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+const frameworks = [
+  {
+    value: 'next.js',
+    label: 'Next.js',
+  },
+  {
+    value: 'sveltekit',
+    label: 'SvelteKit',
+  },
+  {
+    value: 'nuxt.js',
+    label: 'Nuxt.js',
+  },
+  {
+    value: 'remix',
+    label: 'Remix',
+  },
+  {
+    value: 'astro',
+    label: 'Astro',
+  },
+]
+
+export default function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('')
+
+  return (
+    <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button
+          type="default"
+          role="combobox"
+          size={'small'}
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+          iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : 'Select framework...'}
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="w-[200px] p-0">
+        <Command_Shadcn_>
+          <CommandInput_Shadcn_ placeholder="Search framework..." />
+          <CommandEmpty_Shadcn_>No framework found.</CommandEmpty_Shadcn_>
+          <CommandGroup_Shadcn_>
+            {frameworks.map((framework) => (
+              <CommandItem_Shadcn_
+                key={framework.value}
+                value={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? '' : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    'mr-2 h-4 w-4',
+                    value === framework.value ? 'opacity-100' : 'opacity-0'
+                  )}
+                />
+                {framework.label}
+              </CommandItem_Shadcn_>
+            ))}
+          </CommandGroup_Shadcn_>
+        </Command_Shadcn_>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
new file mode 100644
index 0000000000..f2e0603351
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-dropdown-menu.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-react'
+
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+} from 'ui'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from 'ui'
+
+const labels = [
+  'feature',
+  'bug',
+  'enhancement',
+  'documentation',
+  'design',
+  'question',
+  'maintenance',
+]
+
+export default function ComboboxDropdownMenu() {
+  const [label, setLabel] = React.useState('feature')
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="bg-surface-100 flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
+      <p className="text-sm font-medium leading-none">
+        <span className="mr-2 rounded-lg bg-surface-200 border px-2 py-1 text-xs text-foreground">
+          {label}
+        </span>
+        <span className="text-foreground">Create a new project</span>
+      </p>
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="text"
+            size="tiny"
+            icon={<MoreHorizontal className="text-foreground-muted" />}
+          ></Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-[200px]">
+          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <User className="mr-2 h-4 w-4" />
+              Assign to...
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <Calendar className="mr-2 h-4 w-4" />
+              Set due date...
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <Tags className="mr-2 h-4 w-4" />
+                Apply label
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className="p-0">
+                <Command_Shadcn_>
+                  <CommandInput_Shadcn_ placeholder="Filter label..." autoFocus={true} />
+                  <CommandList_Shadcn_>
+                    <CommandEmpty_Shadcn_>No label found.</CommandEmpty_Shadcn_>
+                    <CommandGroup_Shadcn_>
+                      {labels.map((label) => (
+                        <CommandItem_Shadcn_
+                          key={label}
+                          value={label}
+                          onSelect={(value) => {
+                            setLabel(value)
+                            setOpen(false)
+                          }}
+                        >
+                          {label}
+                        </CommandItem_Shadcn_>
+                      ))}
+                    </CommandGroup_Shadcn_>
+                  </CommandList_Shadcn_>
+                </Command_Shadcn_>
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="text-red-600">
+              <Trash className="mr-2 h-4 w-4" />
+              Delete
+              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/combobox-form.tsx b/apps/design-system/registry/default/example/combobox-form.tsx
new file mode 100644
index 0000000000..92af712e2d
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-form.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+} from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+const FormSchema = z.object({
+  language: z.string({
+    required_error: 'Please select a language.',
+  }),
+})
+
+export default function ComboboxForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="language"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-col">
+              <FormLabel_Shadcn_>Language</FormLabel_Shadcn_>
+              <Popover_Shadcn_>
+                <PopoverTrigger_Shadcn_ asChild>
+                  <FormControl_Shadcn_>
+                    <Button
+                      type="default"
+                      role="combobox"
+                      className={cn(
+                        'w-[200px] justify-between',
+                        !field.value && 'text-muted-foreground'
+                      )}
+                      size="small"
+                      iconRight={
+                        <ChevronsUpDown
+                          className="ml-2 h-4 w-4 shrink-0 opacity-50"
+                          strokeWidth={1}
+                        />
+                      }
+                    >
+                      {field.value
+                        ? languages.find((language) => language.value === field.value)?.label
+                        : 'Select language'}
+                    </Button>
+                  </FormControl_Shadcn_>
+                </PopoverTrigger_Shadcn_>
+                <PopoverContent_Shadcn_ className="w-[200px] p-0">
+                  <Command_Shadcn_>
+                    <CommandInput_Shadcn_ placeholder="Search language..." />
+                    <CommandEmpty_Shadcn_>No language found.</CommandEmpty_Shadcn_>
+                    <CommandGroup_Shadcn_>
+                      {languages.map((language) => (
+                        <CommandItem_Shadcn_
+                          value={language.label}
+                          key={language.value}
+                          onSelect={() => {
+                            form.setValue('language', language.value)
+                          }}
+                        >
+                          <Check
+                            className={cn(
+                              'mr-2 h-4 w-4',
+                              language.value === field.value ? 'opacity-100' : 'opacity-0'
+                            )}
+                          />
+                          {language.label}
+                        </CommandItem_Shadcn_>
+                      ))}
+                    </CommandGroup_Shadcn_>
+                  </Command_Shadcn_>
+                </PopoverContent_Shadcn_>
+              </Popover_Shadcn_>
+              <FormDescription_Shadcn_>
+                This is the language that will be used in the dashboard.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit" type="secondary" size="small">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/combobox-popover.tsx b/apps/design-system/registry/default/example/combobox-popover.tsx
new file mode 100644
index 0000000000..4976381d51
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-popover.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ArrowUpCircle,
+  CheckCircle2,
+  Circle,
+  HelpCircle,
+  LucideIcon,
+  Plus,
+  XCircle,
+} from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+type Status = {
+  value: string
+  label: string
+  icon: LucideIcon
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+    icon: HelpCircle,
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+    icon: Circle,
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+    icon: ArrowUpCircle,
+  },
+  {
+    value: 'done',
+    label: 'Done',
+    icon: CheckCircle2,
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+    icon: XCircle,
+  },
+]
+
+export default function ComboboxPopover() {
+  const [open, setOpen] = React.useState(false)
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(null)
+
+  return (
+    <div className="flex items-center gap-4">
+      <p className="text-sm text-muted-foreground">Status</p>
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            type="default"
+            size="small"
+            className="w-[150px] justify-start rounded-full"
+            icon={
+              selectedStatus ? (
+                <selectedStatus.icon className="mr-2 h-4 w-4 shrink-0" />
+              ) : (
+                <Plus className="mr-2 h-4 w-4 shrink-0 text-foreground-muted" />
+              )
+            }
+          >
+            {selectedStatus ? <>{selectedStatus.label}</> : <>Set status</>}
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="p-0" side="right" align="start">
+          <Command_Shadcn_>
+            <CommandInput_Shadcn_ placeholder="Change status..." />
+            <CommandList_Shadcn_>
+              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+              <CommandGroup_Shadcn_>
+                {statuses.map((status) => (
+                  <CommandItem_Shadcn_
+                    key={status.value}
+                    value={status.value}
+                    onSelect={(value) => {
+                      setSelectedStatus(
+                        statuses.find((priority) => priority.value === value) || null
+                      )
+                      setOpen(false)
+                    }}
+                  >
+                    <status.icon
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40'
+                      )}
+                    />
+                    <span>{status.label}</span>
+                  </CommandItem_Shadcn_>
+                ))}
+              </CommandGroup_Shadcn_>
+            </CommandList_Shadcn_>
+          </Command_Shadcn_>
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/combobox-responsive.tsx b/apps/design-system/registry/default/example/combobox-responsive.tsx
new file mode 100644
index 0000000000..997faf8793
--- /dev/null
+++ b/apps/design-system/registry/default/example/combobox-responsive.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import * as React from 'react'
+
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { Button, CommandList_Shadcn_ } from 'ui'
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { Drawer, DrawerContent, DrawerTrigger } from 'ui'
+import { Plus } from 'lucide-react'
+
+type Status = {
+  value: string
+  label: string
+}
+
+const statuses: Status[] = [
+  {
+    value: 'backlog',
+    label: 'Backlog',
+  },
+  {
+    value: 'todo',
+    label: 'Todo',
+  },
+  {
+    value: 'in progress',
+    label: 'In Progress',
+  },
+  {
+    value: 'done',
+    label: 'Done',
+  },
+  {
+    value: 'canceled',
+    label: 'Canceled',
+  },
+]
+
+export default function ComboBoxResponsive() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(null)
+
+  if (isDesktop) {
+    return (
+      <Popover_Shadcn_ open={open} onOpenChange={setOpen}>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            type="default"
+            size="small"
+            className="w-[150px] justify-start"
+            icon={!selectedStatus && <Plus className="text-foreground-muted" />}
+          >
+            {selectedStatus ? <>{selectedStatus.label}</> : <>Set status</>}
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="w-[200px] p-0" align="start">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button type="outline" className="w-[150px] justify-start">
+          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mt-4 border-t">
+          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function StatusList({
+  setOpen,
+  setSelectedStatus,
+}: {
+  setOpen: (open: boolean) => void
+  setSelectedStatus: (status: Status | null) => void
+}) {
+  return (
+    <Command_Shadcn_>
+      <CommandInput_Shadcn_ placeholder="Filter status..." />
+      <CommandList_Shadcn_>
+        <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+        <CommandGroup_Shadcn_>
+          {statuses.map((status) => (
+            <CommandItem_Shadcn_
+              key={status.value}
+              value={status.value}
+              onSelect={(value) => {
+                setSelectedStatus(statuses.find((priority) => priority.value === value) || null)
+                setOpen(false)
+              }}
+            >
+              {status.label}
+            </CommandItem_Shadcn_>
+          ))}
+        </CommandGroup_Shadcn_>
+      </CommandList_Shadcn_>
+    </Command_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/command-demo.tsx b/apps/design-system/registry/default/example/command-demo.tsx
new file mode 100644
index 0000000000..c758fcaef2
--- /dev/null
+++ b/apps/design-system/registry/default/example/command-demo.tsx
@@ -0,0 +1,55 @@
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+  Command_Shadcn_,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  CommandSeparator_Shadcn_,
+  CommandShortcut_Shadcn_,
+} from 'ui'
+
+export default function CommandDemo() {
+  return (
+    <Command_Shadcn_ className="rounded-lg border shadow-md">
+      <CommandInput_Shadcn_ placeholder="Type a command or search..." />
+      <CommandList_Shadcn_>
+        <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+        <CommandGroup_Shadcn_ heading="Suggestions">
+          <CommandItem_Shadcn_>
+            <Calendar className="mr-2 h-4 w-4" />
+            <span>Calendar</span>
+          </CommandItem_Shadcn_>
+          <CommandItem_Shadcn_>
+            <Smile className="mr-2 h-4 w-4" />
+            <span>Search Emoji</span>
+          </CommandItem_Shadcn_>
+          <CommandItem_Shadcn_>
+            <Calculator className="mr-2 h-4 w-4" />
+            <span>Calculator</span>
+          </CommandItem_Shadcn_>
+        </CommandGroup_Shadcn_>
+        <CommandSeparator_Shadcn_ />
+        <CommandGroup_Shadcn_ heading="Settings">
+          <CommandItem_Shadcn_>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
+          </CommandItem_Shadcn_>
+          <CommandItem_Shadcn_>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
+          </CommandItem_Shadcn_>
+          <CommandItem_Shadcn_>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
+          </CommandItem_Shadcn_>
+        </CommandGroup_Shadcn_>
+      </CommandList_Shadcn_>
+    </Command_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/command-dialog.tsx b/apps/design-system/registry/default/example/command-dialog.tsx
new file mode 100644
index 0000000000..a3989e95e6
--- /dev/null
+++ b/apps/design-system/registry/default/example/command-dialog.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import * as React from 'react'
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react'
+
+import {
+  CommandDialog,
+  CommandEmpty_Shadcn_,
+  CommandGroup_Shadcn_,
+  CommandInput_Shadcn_,
+  CommandItem_Shadcn_,
+  CommandList_Shadcn_,
+  CommandSeparator_Shadcn_,
+  CommandShortcut_Shadcn_,
+} from 'ui'
+
+export default function CommandDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        setOpen((open) => !open)
+      }
+    }
+
+    document.addEventListener('keydown', down)
+    return () => document.removeEventListener('keydown', down)
+  }, [])
+
+  return (
+    <>
+      <p className="text-sm text-muted-foreground">
+        Press{' '}
+        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          <span className="text-xs">⌘</span>J
+        </kbd>
+      </p>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput_Shadcn_ placeholder="Type a command or search..." />
+        <CommandList_Shadcn_>
+          <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+          <CommandGroup_Shadcn_ heading="Suggestions">
+            <CommandItem_Shadcn_>
+              <Calendar className="mr-2 h-4 w-4" />
+              <span>Calendar</span>
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_>
+              <Smile className="mr-2 h-4 w-4" />
+              <span>Search Emoji</span>
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_>
+              <Calculator className="mr-2 h-4 w-4" />
+              <span>Calculator</span>
+            </CommandItem_Shadcn_>
+          </CommandGroup_Shadcn_>
+          <CommandSeparator_Shadcn_ />
+          <CommandGroup_Shadcn_ heading="Settings">
+            <CommandItem_Shadcn_>
+              <User className="mr-2 h-4 w-4" />
+              <span>Profile</span>
+              <CommandShortcut_Shadcn_>⌘P</CommandShortcut_Shadcn_>
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_>
+              <CreditCard className="mr-2 h-4 w-4" />
+              <span>Billing</span>
+              <CommandShortcut_Shadcn_>⌘B</CommandShortcut_Shadcn_>
+            </CommandItem_Shadcn_>
+            <CommandItem_Shadcn_>
+              <Settings className="mr-2 h-4 w-4" />
+              <span>Settings</span>
+              <CommandShortcut_Shadcn_>⌘S</CommandShortcut_Shadcn_>
+            </CommandItem_Shadcn_>
+          </CommandGroup_Shadcn_>
+        </CommandList_Shadcn_>
+      </CommandDialog>
+    </>
+  )
+}
diff --git a/apps/design-system/registry/default/example/context-menu-demo.tsx b/apps/design-system/registry/default/example/context-menu-demo.tsx
new file mode 100644
index 0000000000..877b9917d9
--- /dev/null
+++ b/apps/design-system/registry/default/example/context-menu-demo.tsx
@@ -0,0 +1,65 @@
+import {
+  ContextMenu_Shadcn_,
+  ContextMenuCheckboxItem_Shadcn_,
+  ContextMenuContent_Shadcn_,
+  ContextMenuItem_Shadcn_,
+  ContextMenuLabel_Shadcn_,
+  ContextMenuRadioGroup_Shadcn_,
+  ContextMenuRadioItem_Shadcn_,
+  ContextMenuSeparator_Shadcn_,
+  ContextMenuShortcut_Shadcn_,
+  ContextMenuSub_Shadcn_,
+  ContextMenuSubContent_Shadcn_,
+  ContextMenuSubTrigger_Shadcn_,
+  ContextMenuTrigger_Shadcn_,
+} from 'ui'
+
+export default function ContextMenuDemo() {
+  return (
+    <ContextMenu_Shadcn_>
+      <ContextMenuTrigger_Shadcn_ className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+        Right click here
+      </ContextMenuTrigger_Shadcn_>
+      <ContextMenuContent_Shadcn_ className="w-64">
+        <ContextMenuItem_Shadcn_ inset>
+          Back
+          <ContextMenuShortcut_Shadcn_>⌘[</ContextMenuShortcut_Shadcn_>
+        </ContextMenuItem_Shadcn_>
+        <ContextMenuItem_Shadcn_ inset disabled>
+          Forward
+          <ContextMenuShortcut_Shadcn_>⌘]</ContextMenuShortcut_Shadcn_>
+        </ContextMenuItem_Shadcn_>
+        <ContextMenuItem_Shadcn_ inset>
+          Reload
+          <ContextMenuShortcut_Shadcn_>⌘R</ContextMenuShortcut_Shadcn_>
+        </ContextMenuItem_Shadcn_>
+        <ContextMenuSub_Shadcn_>
+          <ContextMenuSubTrigger_Shadcn_ inset>More Tools</ContextMenuSubTrigger_Shadcn_>
+          <ContextMenuSubContent_Shadcn_ className="w-48">
+            <ContextMenuItem_Shadcn_>
+              Save Page As...
+              <ContextMenuShortcut_Shadcn_>⇧⌘S</ContextMenuShortcut_Shadcn_>
+            </ContextMenuItem_Shadcn_>
+            <ContextMenuItem_Shadcn_>Create Shortcut...</ContextMenuItem_Shadcn_>
+            <ContextMenuItem_Shadcn_>Name Window...</ContextMenuItem_Shadcn_>
+            <ContextMenuSeparator_Shadcn_ />
+            <ContextMenuItem_Shadcn_>Developer Tools</ContextMenuItem_Shadcn_>
+          </ContextMenuSubContent_Shadcn_>
+        </ContextMenuSub_Shadcn_>
+        <ContextMenuSeparator_Shadcn_ />
+        <ContextMenuCheckboxItem_Shadcn_ checked>
+          Show Bookmarks Bar
+          <ContextMenuShortcut_Shadcn_>⌘⇧B</ContextMenuShortcut_Shadcn_>
+        </ContextMenuCheckboxItem_Shadcn_>
+        <ContextMenuCheckboxItem_Shadcn_>Show Full URLs</ContextMenuCheckboxItem_Shadcn_>
+        <ContextMenuSeparator_Shadcn_ />
+        <ContextMenuRadioGroup_Shadcn_ value="pedro">
+          <ContextMenuLabel_Shadcn_ inset>People</ContextMenuLabel_Shadcn_>
+          <ContextMenuSeparator_Shadcn_ />
+          <ContextMenuRadioItem_Shadcn_ value="pedro">Pedro Duarte</ContextMenuRadioItem_Shadcn_>
+          <ContextMenuRadioItem_Shadcn_ value="colm">Colm Tuite</ContextMenuRadioItem_Shadcn_>
+        </ContextMenuRadioGroup_Shadcn_>
+      </ContextMenuContent_Shadcn_>
+    </ContextMenu_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-demo.tsx b/apps/design-system/registry/default/example/date-picker-demo.tsx
new file mode 100644
index 0000000000..c4424bc6ab
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-demo.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+export default function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover_Shadcn_>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button
+          type={'outline'}
+          className={cn(
+            'w-[280px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, 'PPP') : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="w-auto p-0">
+        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-form.tsx b/apps/design-system/registry/default/example/date-picker-form.tsx
new file mode 100644
index 0000000000..7e6989c141
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-form.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  dob: z.date({
+    required_error: 'A date of birth is required.',
+  }),
+})
+
+export default function DatePickerForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField_Shadcn_
+          control={form.control}
+          name="dob"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="flex flex-col">
+              <FormLabel_Shadcn_>Date of birth</FormLabel_Shadcn_>
+              <Popover_Shadcn_>
+                <PopoverTrigger_Shadcn_ asChild>
+                  <FormControl_Shadcn_>
+                    <Button
+                      type={'outline'}
+                      className={cn(
+                        'w-[240px] pl-3 text-left font-normal',
+                        !field.value && 'text-muted-foreground'
+                      )}
+                    >
+                      {field.value ? format(field.value, 'PPP') : <span>Pick a date</span>}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl_Shadcn_>
+                </PopoverTrigger_Shadcn_>
+                <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value}
+                    onSelect={field.onChange}
+                    disabled={(date) => date > new Date() || date < new Date('1900-01-01')}
+                    initialFocus
+                  />
+                </PopoverContent_Shadcn_>
+              </Popover_Shadcn_>
+              <FormDescription_Shadcn_>
+                Your date of birth is used to calculate your age.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-with-presets.tsx b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
new file mode 100644
index 0000000000..41dec91c01
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-with-presets.tsx
@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+import {
+  Select_Shadcn_,
+  SelectContent_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+} from 'ui'
+
+export default function DatePickerWithPresets() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover_Shadcn_>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button
+          type={'outline'}
+          className={cn(
+            'w-[280px] justify-start text-left font-normal',
+            !date && 'text-muted-foreground'
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, 'PPP') : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="flex w-auto flex-col space-y-2 p-2">
+        <Select_Shadcn_ onValueChange={(value) => setDate(addDays(new Date(), parseInt(value)))}>
+          <SelectTrigger_Shadcn_>
+            <SelectValue_Shadcn_ placeholder="Select" />
+          </SelectTrigger_Shadcn_>
+          <SelectContent_Shadcn_ position="popper">
+            <SelectItem_Shadcn_ value="0">Today</SelectItem_Shadcn_>
+            <SelectItem_Shadcn_ value="1">Tomorrow</SelectItem_Shadcn_>
+            <SelectItem_Shadcn_ value="3">In 3 days</SelectItem_Shadcn_>
+            <SelectItem_Shadcn_ value="7">In a week</SelectItem_Shadcn_>
+          </SelectContent_Shadcn_>
+        </Select_Shadcn_>
+        <div className="rounded-md border">
+          <Calendar mode="single" selected={date} onSelect={setDate} />
+        </div>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/date-picker-with-range.tsx b/apps/design-system/registry/default/example/date-picker-with-range.tsx
new file mode 100644
index 0000000000..15bf3c13d0
--- /dev/null
+++ b/apps/design-system/registry/default/example/date-picker-with-range.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import * as React from 'react'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-react'
+// @ts-expect-error
+import { DateRange } from 'react-day-picker'
+import { cn } from '@/lib/utils'
+import { Button } from 'ui'
+import { Calendar } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+export default function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className={cn('grid gap-2', className)}>
+      <Popover_Shadcn_>
+        <PopoverTrigger_Shadcn_ asChild>
+          <Button
+            id="date"
+            type={'outline'}
+            className={cn(
+              'w-[300px] justify-start text-left font-normal',
+              !date && 'text-muted-foreground'
+            )}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+                </>
+              ) : (
+                format(date.from, 'LLL dd, y')
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger_Shadcn_>
+        <PopoverContent_Shadcn_ className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent_Shadcn_>
+      </Popover_Shadcn_>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/dialog-close-button.tsx b/apps/design-system/registry/default/example/dialog-close-button.tsx
new file mode 100644
index 0000000000..8961449166
--- /dev/null
+++ b/apps/design-system/registry/default/example/dialog-close-button.tsx
@@ -0,0 +1,54 @@
+import { Copy } from 'lucide-react'
+
+import { Button } from 'ui'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DialogCloseButton() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="outline">Share</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label_Shadcn_ htmlFor="link" className="sr-only">
+              Link
+            </Label_Shadcn_>
+            <Input_Shadcn_
+              id="link"
+              defaultValue="https://ui.shadcn.com/docs/installation"
+              readOnly
+            />
+          </div>
+          <Button htmlType="submit" size="small" type="secondary" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy className="h-4 w-4" />
+          </Button>
+        </div>
+        <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button htmlType="button" type="secondary">
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/design-system/registry/default/example/dialog-demo.tsx b/apps/design-system/registry/default/example/dialog-demo.tsx
new file mode 100644
index 0000000000..d1c14753a7
--- /dev/null
+++ b/apps/design-system/registry/default/example/dialog-demo.tsx
@@ -0,0 +1,47 @@
+import { Button } from 'ui'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="outline">Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label_Shadcn_ htmlFor="name" className="text-right">
+              Name
+            </Label_Shadcn_>
+            <Input_Shadcn_ id="name" defaultValue="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label_Shadcn_ htmlFor="username" className="text-right">
+              Username
+            </Label_Shadcn_>
+            <Input_Shadcn_ id="username" defaultValue="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button htmlType="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/design-system/registry/default/example/drawer-demo.tsx b/apps/design-system/registry/default/example/drawer-demo.tsx
new file mode 100644
index 0000000000..ce28bb1208
--- /dev/null
+++ b/apps/design-system/registry/default/example/drawer-demo.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react'
+import { Minus, Plus } from 'lucide-react'
+import { Bar, BarChart, ResponsiveContainer } from 'recharts'
+
+import { Button } from 'ui'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from 'ui'
+
+const data = [
+  {
+    goal: 400,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 239,
+  },
+  {
+    goal: 300,
+  },
+  {
+    goal: 200,
+  },
+  {
+    goal: 278,
+  },
+  {
+    goal: 189,
+  },
+  {
+    goal: 349,
+  },
+]
+
+export default function DrawerDemo() {
+  const [goal, setGoal] = React.useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button type="default" size="small">
+          Open Drawer
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <Button
+                type="outline"
+                size="small"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(-10)}
+                disabled={goal <= 200}
+              >
+                <Minus className="h-4 w-4" />
+                <span className="sr-only">Decrease</span>
+              </Button>
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">{goal}</div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
+              </div>
+              <Button
+                type="outline"
+                size="small"
+                className="h-8 w-8 shrink-0 rounded-full"
+                onClick={() => onClick(10)}
+                disabled={goal >= 400}
+              >
+                <Plus className="h-4 w-4" />
+                <span className="sr-only">Increase</span>
+              </Button>
+            </div>
+            <div className="mt-3 h-[120px]">
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={data}>
+                  <Bar
+                    dataKey="goal"
+                    style={
+                      {
+                        fill: 'hsl(var(--foreground-default))',
+                        opacity: 0.9,
+                      } as React.CSSProperties
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button type="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
diff --git a/apps/design-system/registry/default/example/drawer-dialog.tsx b/apps/design-system/registry/default/example/drawer-dialog.tsx
new file mode 100644
index 0000000000..6d43398796
--- /dev/null
+++ b/apps/design-system/registry/default/example/drawer-dialog.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { Button } from 'ui'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from 'ui'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function DrawerDialogDemo() {
+  const [open, setOpen] = React.useState(false)
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+
+  if (isDesktop) {
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button type="outline">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you are done.
+            </DialogDescription>
+          </DialogHeader>
+          <ProfileForm />
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button type="outline">Edit Profile</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader className="text-left">
+          <DrawerTitle>Edit profile</DrawerTitle>
+          <DrawerDescription>
+            Make changes to your profile here. Click save when you are done.
+          </DrawerDescription>
+        </DrawerHeader>
+        <ProfileForm className="px-4" />
+        <DrawerFooter className="pt-2">
+          <DrawerClose asChild>
+            <Button type="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+function ProfileForm({ className }: React.ComponentProps<'form'>) {
+  return (
+    <form className={cn('grid items-start gap-4', className)}>
+      <div className="grid gap-2">
+        <Label_Shadcn_ htmlFor="email">Email</Label_Shadcn_>
+        <Input_Shadcn_ type="email" id="email" defaultValue="shadcn@example.com" />
+      </div>
+      <div className="grid gap-2">
+        <Label_Shadcn_ htmlFor="username">Username</Label_Shadcn_>
+        <Input_Shadcn_ id="username" defaultValue="@shadcn" />
+      </div>
+      <Button htmlType="submit">Save changes</Button>
+    </form>
+  )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
new file mode 100644
index 0000000000..048d60d750
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-checkboxes.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+
+import { Button } from 'ui'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'ui'
+
+type Checked = DropdownMenuCheckboxItemProps['checked']
+
+export default function DropdownMenuCheckboxes() {
+  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
+  const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
+  const [showPanel, setShowPanel] = React.useState<Checked>(false)
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
+          Status Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={showActivityBar}
+          onCheckedChange={setShowActivityBar}
+          disabled
+        >
+          Activity Bar
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+          Panel
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-demo.tsx b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
new file mode 100644
index 0000000000..4be7a68a5e
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-demo.tsx
@@ -0,0 +1,122 @@
+import {
+  Cloud,
+  CreditCard,
+  Github,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from 'lucide-react'
+
+import { Button } from 'ui'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from 'ui'
+
+export default function DropdownMenuDemo() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard className="mr-2 h-4 w-4" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <Users className="mr-2 h-4 w-4" />
+            <span>Team</span>
+          </DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <UserPlus className="mr-2 h-4 w-4" />
+              <span>Invite users</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>
+                  <Mail className="mr-2 h-4 w-4" />
+                  <span>Email</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <MessageSquare className="mr-2 h-4 w-4" />
+                  <span>Message</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  <span>More...</span>
+                </DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <Plus className="mr-2 h-4 w-4" />
+            <span>New Team</span>
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Github className="mr-2 h-4 w-4" />
+          <span>GitHub</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LifeBuoy className="mr-2 h-4 w-4" />
+          <span>Support</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem disabled>
+          <Cloud className="mr-2 h-4 w-4" />
+          <span>API</span>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
new file mode 100644
index 0000000000..7f339382b0
--- /dev/null
+++ b/apps/design-system/registry/default/example/dropdown-menu-radio-group.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import * as React from 'react'
+
+import { Button } from 'ui'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from 'ui'
+
+export default function DropdownMenuRadioGroupDemo() {
+  const [position, setPosition] = React.useState('bottom')
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-demo.tsx b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
new file mode 100644
index 0000000000..4d31cc3df6
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-demo.tsx
@@ -0,0 +1,54 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { z } from 'zod'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+})
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+    },
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          name="username"
+          control={form.control}
+          render={({ field }) => (
+            <FormItemLayout
+              label="Username"
+              description="This is your public display name"
+              labelOptional="optional"
+            >
+              <FormControl_Shadcn_>
+                <Input placeholder="mildtomato" {...field} />
+              </FormControl_Shadcn_>
+            </FormItemLayout>
+          )}
+        />
+        <Button size="small" type="secondary" htmlType="submit">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
new file mode 100644
index 0000000000..7f823143cc
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox-list.tsx
@@ -0,0 +1,107 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Checkbox_Shadcn_, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+import { InfoTooltip } from 'ui-patterns/InfoTooltip/InfoTooltip'
+
+const FormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: 'You have to select at least one item.',
+  }),
+})
+
+const items = [
+  {
+    id: 'recents',
+    label: 'Recents',
+  },
+  {
+    id: 'home',
+    label: 'Home',
+  },
+  {
+    id: 'applications',
+    label: 'Applications',
+  },
+  {
+    id: 'desktop',
+    label: 'Desktop',
+  },
+  {
+    id: 'downloads',
+    label: 'Downloads',
+  },
+  {
+    id: 'documents',
+    label: 'Documents',
+  },
+] as const
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof FormSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          control={form.control}
+          name="items"
+          render={() => (
+            <FormItemLayout
+              label="Sidebar"
+              description="Select the items you want to display in the sidebar."
+              layout="horizontal"
+              afterLabel={<InfoTooltip side="right">Please give me info</InfoTooltip>}
+            >
+              {items.map((item) => (
+                <FormField_Shadcn_
+                  key={item.id}
+                  control={form.control}
+                  name="items"
+                  render={({ field }) => {
+                    return (
+                      <FormItemLayout
+                        key={item.id}
+                        className="flex flex-row items-start space-x-3 space-y-0"
+                        label={item.label}
+                        layout="flex"
+                        hideMessage
+                      >
+                        <FormControl_Shadcn_>
+                          <Checkbox_Shadcn_
+                            checked={field.value?.includes(item.id)}
+                            onCheckedChange={(checked) => {
+                              return checked
+                                ? field.onChange([...field.value, item.id])
+                                : field.onChange(field.value?.filter((value) => value !== item.id))
+                            }}
+                          />
+                        </FormControl_Shadcn_>
+                      </FormItemLayout>
+                    )
+                  }}
+                />
+              ))}
+              {/* <FormMessage /> */}
+            </FormItemLayout>
+          )}
+        />
+        <Button size="small" type="secondary" htmlType="submit">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
new file mode 100644
index 0000000000..a21de03539
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-checkbox.tsx
@@ -0,0 +1,55 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import {
+  Badge,
+  Button,
+  Checkbox_Shadcn_,
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormField_Shadcn_,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+  consistent_settings: z.boolean().default(false).optional(),
+})
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof FormSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          control={form.control}
+          name="consistent_settings"
+          render={({ field }) => (
+            <FormItemLayout
+              label="Use consistent settings"
+              description="This is your public display name."
+              layout="flex"
+            >
+              <FormControl_Shadcn_>
+                <Checkbox_Shadcn_ checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl_Shadcn_>
+            </FormItemLayout>
+          )}
+        />
+        <Button size="small" type="secondary" htmlType="submit">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
new file mode 100644
index 0000000000..7b0a0a53b5
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-horizontal.tsx
@@ -0,0 +1,58 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Separator } from 'ui'
+import { z } from 'zod'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+})
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+    },
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-[520px] flex flex-col gap-8" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          name="username"
+          control={form.control}
+          render={({ field }) => (
+            <FormItemLayout
+              layout="horizontal"
+              label="Username"
+              description="This is your public display name"
+              labelOptional="optional"
+            >
+              <FormControl_Shadcn_>
+                <Input placeholder="mildtomato" {...field} />
+              </FormControl_Shadcn_>
+            </FormItemLayout>
+          )}
+        />
+        <Separator />
+        <div className="w-full flex justify-end">
+          <Button size="small" type="secondary" htmlType="submit">
+            Submit
+          </Button>
+        </div>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-select.tsx b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
new file mode 100644
index 0000000000..22ae206dc4
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-select.tsx
@@ -0,0 +1,71 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import {
+  Button,
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormField_Shadcn_,
+  Select_Shadcn_,
+  SelectContent_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+})
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof FormSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          name="email"
+          control={form.control}
+          render={({ field }) => (
+            <FormItemLayout
+              label="Choose email"
+              description="Choose preferred email"
+              labelOptional="Optional"
+            >
+              <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl_Shadcn_>
+                  <SelectTrigger_Shadcn_>
+                    <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
+                  </SelectTrigger_Shadcn_>
+                </FormControl_Shadcn_>
+                <SelectContent_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@support.com">m@support.com</SelectItem_Shadcn_>
+                </SelectContent_Shadcn_>
+              </Select_Shadcn_>
+            </FormItemLayout>
+          )}
+        />
+        <Button size="small" type="secondary" htmlType="submit">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
new file mode 100644
index 0000000000..0e2c373502
--- /dev/null
+++ b/apps/design-system/registry/default/example/form-item-layout-with-switch.tsx
@@ -0,0 +1,49 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { z } from 'zod'
+
+const FormSchema = z.object({
+  switch_option: z.boolean().default(false).optional(),
+})
+
+export default function FormItemLayoutDemo() {
+  // 1. Define your form.
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  // 2. Define a submit handler.
+  function onSubmit(values: z.infer<typeof FormSchema>) {
+    // Do something with the form values.
+    // ✅ This will be type-safe and validated.
+    console.log(values)
+    // action('form form.handleSubmit(onSubmit)')(values)
+  }
+  return (
+    <Form_Shadcn_ {...form}>
+      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField_Shadcn_
+          control={form.control}
+          name="switch_option"
+          render={({ field }) => (
+            <FormItemLayout
+              afterLabel="Switch"
+              label="Use ./supabase directory for everything"
+              description="This is an explanation."
+              layout="flex"
+            >
+              <FormControl_Shadcn_>
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
+              </FormControl_Shadcn_>
+            </FormItemLayout>
+          )}
+        />
+        <Button size="small" type="secondary" htmlType="submit">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/hover-card-demo.tsx b/apps/design-system/registry/default/example/hover-card-demo.tsx
new file mode 100644
index 0000000000..95ae07e2f4
--- /dev/null
+++ b/apps/design-system/registry/default/example/hover-card-demo.tsx
@@ -0,0 +1,31 @@
+import { CalendarDays } from 'lucide-react'
+
+import { Avatar, AvatarFallback, AvatarImage } from 'ui'
+import { Button } from 'ui'
+import { HoverCard_Shadcn_, HoverCardContent_Shadcn_, HoverCardTrigger_Shadcn_ } from 'ui'
+
+export default function HoverCardDemo() {
+  return (
+    <HoverCard_Shadcn_>
+      <HoverCardTrigger_Shadcn_ asChild>
+        <Button type="link">@nextjs</Button>
+      </HoverCardTrigger_Shadcn_>
+      <HoverCardContent_Shadcn_ className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">The React Framework – created and maintained by @vercel.</p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{' '}
+              <span className="text-xs text-muted-foreground">Joined December 2021</span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent_Shadcn_>
+    </HoverCard_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-demo.tsx b/apps/design-system/registry/default/example/input-demo.tsx
new file mode 100644
index 0000000000..ed8cf4c24b
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-demo.tsx
@@ -0,0 +1,5 @@
+import { Input_Shadcn_ } from 'ui'
+
+export default function InputDemo() {
+  return <Input_Shadcn_ type="email" placeholder="Email" />
+}
diff --git a/apps/design-system/registry/default/example/input-disabled.tsx b/apps/design-system/registry/default/example/input-disabled.tsx
new file mode 100644
index 0000000000..8878a3afb8
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-disabled.tsx
@@ -0,0 +1,5 @@
+import { Input_Shadcn_ } from 'ui'
+
+export default function InputDisabled() {
+  return <Input_Shadcn_ disabled type="email" placeholder="Email" />
+}
diff --git a/apps/design-system/registry/default/example/input-file.tsx b/apps/design-system/registry/default/example/input-file.tsx
new file mode 100644
index 0000000000..f1ef74fd14
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-file.tsx
@@ -0,0 +1,10 @@
+import { Input_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function InputFile() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label_Shadcn_ htmlFor="picture">Picture</Label_Shadcn_>
+      <Input_Shadcn_ id="picture" type="file" />
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-form.tsx b/apps/design-system/registry/default/example/input-form.tsx
new file mode 100644
index 0000000000..21445090f8
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-form.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Input } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+})
+
+export default function InputForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      username: '',
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem_Shadcn_>
+              <FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
+              <FormControl_Shadcn_>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl_Shadcn_>
+              <FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit" type="secondary">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-controlled.tsx b/apps/design-system/registry/default/example/input-otp-controlled.tsx
new file mode 100644
index 0000000000..f6d9a6c557
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-controlled.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import * as React from 'react'
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+
+export default function InputOTPControlled() {
+  const [value, setValue] = React.useState('')
+
+  return (
+    <div className="space-y-2">
+      <InputOTP maxLength={6} value={value} onChange={(value) => setValue(value)}>
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+          <InputOTPSlot index={2} />
+          <InputOTPSlot index={3} />
+          <InputOTPSlot index={4} />
+          <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
+      <div className="text-center text-sm">
+        {value === '' ? <>Enter your one-time password.</> : <>You entered: {value}</>}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-demo.tsx b/apps/design-system/registry/default/example/input-otp-demo.tsx
new file mode 100644
index 0000000000..ac9bf81ea6
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-demo.tsx
@@ -0,0 +1,19 @@
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+
+export default function InputOTPDemo() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-form.tsx b/apps/design-system/registry/default/example/input-otp-form.tsx
new file mode 100644
index 0000000000..9036239ff0
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-form.tsx
@@ -0,0 +1,78 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  pin: z.string().min(6, {
+    message: 'Your one-time password must be 6 characters.',
+  }),
+})
+
+export default function InputOTPForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      pin: '',
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="pin"
+          render={({ field }) => (
+            <FormItem_Shadcn_>
+              <FormLabel_Shadcn_>One-Time Password</FormLabel_Shadcn_>
+              <FormControl_Shadcn_>
+                <InputOTP maxLength={6} {...field}>
+                  <InputOTPGroup>
+                    <InputOTPSlot index={0} />
+                    <InputOTPSlot index={1} />
+                    <InputOTPSlot index={2} />
+                    <InputOTPSlot index={3} />
+                    <InputOTPSlot index={4} />
+                    <InputOTPSlot index={5} />
+                  </InputOTPGroup>
+                </InputOTP>
+              </FormControl_Shadcn_>
+              <FormDescription_Shadcn_>
+                Please enter the one-time password sent to your phone.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-pattern.tsx b/apps/design-system/registry/default/example/input-otp-pattern.tsx
new file mode 100644
index 0000000000..ce136748fc
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-pattern.tsx
@@ -0,0 +1,18 @@
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from 'ui'
+
+export default function InputOTPPattern() {
+  return (
+    <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-otp-separator.tsx b/apps/design-system/registry/default/example/input-otp-separator.tsx
new file mode 100644
index 0000000000..a6b162d8cf
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-otp-separator.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from 'ui'
+
+export default function InputOTPWithSeparator() {
+  return (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-with-button.tsx b/apps/design-system/registry/default/example/input-with-button.tsx
new file mode 100644
index 0000000000..ba7f3df71f
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-button.tsx
@@ -0,0 +1,13 @@
+import { Button } from 'ui'
+import { Input_Shadcn_ } from 'ui'
+
+export default function InputWithButton() {
+  return (
+    <div className="flex w-full max-w-sm items-center space-x-2">
+      <Input_Shadcn_ type="email" placeholder="Email" />
+      <Button htmlType="submit" type="secondary">
+        Subscribe
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-with-label.tsx b/apps/design-system/registry/default/example/input-with-label.tsx
new file mode 100644
index 0000000000..c9f0ea6025
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-label.tsx
@@ -0,0 +1,10 @@
+import { Input_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function InputWithLabel() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label_Shadcn_ htmlFor="email">Email</Label_Shadcn_>
+      <Input_Shadcn_ type="email" id="email" placeholder="Email" />
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/input-with-text.tsx b/apps/design-system/registry/default/example/input-with-text.tsx
new file mode 100644
index 0000000000..d401e2de14
--- /dev/null
+++ b/apps/design-system/registry/default/example/input-with-text.tsx
@@ -0,0 +1,11 @@
+import { Input_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function InputWithText() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label_Shadcn_ htmlFor="email-2">Email</Label_Shadcn_>
+      <Input_Shadcn_ type="email" id="email-2" placeholder="Email" />
+      <p className="text-sm text-muted-foreground">Enter your email address.</p>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/label-demo.tsx b/apps/design-system/registry/default/example/label-demo.tsx
new file mode 100644
index 0000000000..777b0624c9
--- /dev/null
+++ b/apps/design-system/registry/default/example/label-demo.tsx
@@ -0,0 +1,12 @@
+import { Checkbox_Shadcn_, Label_Shadcn_ } from 'ui'
+
+export default function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox_Shadcn_ id="terms" />
+        <Label_Shadcn_ htmlFor="terms">Accept terms and conditions</Label_Shadcn_>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/menubar-demo.tsx b/apps/design-system/registry/default/example/menubar-demo.tsx
new file mode 100644
index 0000000000..87dbb560f2
--- /dev/null
+++ b/apps/design-system/registry/default/example/menubar-demo.tsx
@@ -0,0 +1,105 @@
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from 'ui'
+
+export default function MenubarDemo() {
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            New Window <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>New Incognito Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Share</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Email link</MenubarItem>
+              <MenubarItem>Messages</MenubarItem>
+              <MenubarItem>Notes</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Find</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Search the web</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Find...</MenubarItem>
+              <MenubarItem>Find Next</MenubarItem>
+              <MenubarItem>Find Previous</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem>Cut</MenubarItem>
+          <MenubarItem>Copy</MenubarItem>
+          <MenubarItem>Paste</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset>
+            Reload <MenubarShortcut>⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled inset>
+            Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Toggle Fullscreen</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Profiles</MenubarTrigger>
+        <MenubarContent>
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Edit...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Profile...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
diff --git a/apps/design-system/registry/default/example/mode-toggle.tsx b/apps/design-system/registry/default/example/mode-toggle.tsx
new file mode 100644
index 0000000000..fa179ce6dd
--- /dev/null
+++ b/apps/design-system/registry/default/example/mode-toggle.tsx
@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from 'ui'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from 'ui'
+
+export default function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="outline" size="small">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/apps/design-system/registry/default/example/navigation-menu-demo.tsx b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
new file mode 100644
index 0000000000..eaf24a6ed6
--- /dev/null
+++ b/apps/design-system/registry/default/example/navigation-menu-demo.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import * as React from 'react'
+import Link from 'next/link'
+
+import { cn } from '@/lib/utils'
+// import { Icons } from '@/components/icons'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from 'ui'
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: 'Alert Dialog',
+    href: '/docs/primitives/alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.',
+  },
+  {
+    title: 'Hover Card',
+    href: '/docs/primitives/hover-card',
+    description: 'For sighted users to preview content available behind a link.',
+  },
+  {
+    title: 'Progress',
+    href: '/docs/primitives/progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+  },
+  {
+    title: 'Scroll-area',
+    href: '/docs/primitives/scroll-area',
+    description: 'Visually or semantically separates content.',
+  },
+  {
+    title: 'Tabs',
+    href: '/docs/primitives/tabs',
+    description:
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+  },
+  {
+    title: 'Tooltip',
+    href: '/docs/primitives/tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+  },
+]
+
+export default function NavigationMenuDemo() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li className="row-span-3">
+                <NavigationMenuLink asChild>
+                  <a
+                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                    href="/"
+                  >
+                    {/* <Icons.logo className="h-6 w-6" /> */}
+                    <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+                    <p className="text-sm leading-tight text-muted-foreground">
+                      Beautifully designed components that you can copy and paste into your apps.
+                      Accessible. Customizable. Open Source.
+                    </p>
+                  </a>
+                </NavigationMenuLink>
+              </li>
+              <ListItem href="/docs" title="Introduction">
+                Re-usable components built using Radix UI and Tailwind CSS.
+              </ListItem>
+              <ListItem href="/docs/installation" title="Installation">
+                How to install dependencies and structure your app.
+              </ListItem>
+              <ListItem href="/docs/primitives/typography" title="Typography">
+                Styles for headings, paragraphs, lists...etc
+              </ListItem>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              {components.map((component) => (
+                <ListItem key={component.title} title={component.title} href={component.href}>
+                  {component.description}
+                </ListItem>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <Link href="/docs" legacyBehavior passHref>
+            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              Documentation
+            </NavigationMenuLink>
+          </Link>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+const ListItem = React.forwardRef<React.ElementRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+              className
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    )
+  }
+)
+ListItem.displayName = 'ListItem'
diff --git a/apps/design-system/registry/default/example/popover-demo.tsx b/apps/design-system/registry/default/example/popover-demo.tsx
new file mode 100644
index 0000000000..225aaad909
--- /dev/null
+++ b/apps/design-system/registry/default/example/popover-demo.tsx
@@ -0,0 +1,40 @@
+import { Button } from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+import { Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_ } from 'ui'
+
+export default function PopoverDemo() {
+  return (
+    <Popover_Shadcn_>
+      <PopoverTrigger_Shadcn_ asChild>
+        <Button type="outline">Open popover</Button>
+      </PopoverTrigger_Shadcn_>
+      <PopoverContent_Shadcn_ className="w-80">
+        <div className="grid gap-4">
+          <div className="space-y-2">
+            <h4 className="font-medium leading-none">Dimensions</h4>
+            <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+          </div>
+          <div className="grid gap-2">
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label_Shadcn_ htmlFor="width">Width</Label_Shadcn_>
+              <Input_Shadcn_ id="width" defaultValue="100%" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label_Shadcn_ htmlFor="maxWidth">Max. width</Label_Shadcn_>
+              <Input_Shadcn_ id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label_Shadcn_ htmlFor="height">Height</Label_Shadcn_>
+              <Input_Shadcn_ id="height" defaultValue="25px" className="col-span-2 h-8" />
+            </div>
+            <div className="grid grid-cols-3 items-center gap-4">
+              <Label_Shadcn_ htmlFor="maxHeight">Max. height</Label_Shadcn_>
+              <Input_Shadcn_ id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
+            </div>
+          </div>
+        </div>
+      </PopoverContent_Shadcn_>
+    </Popover_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/progress-demo.tsx b/apps/design-system/registry/default/example/progress-demo.tsx
new file mode 100644
index 0000000000..b91404c138
--- /dev/null
+++ b/apps/design-system/registry/default/example/progress-demo.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import * as React from 'react'
+
+import { Progress } from 'ui'
+
+export default function ProgressDemo() {
+  const [progress, setProgress] = React.useState(13)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return <Progress value={progress} className="w-[60%]" />
+}
diff --git a/apps/design-system/registry/default/example/radio-group-demo.tsx b/apps/design-system/registry/default/example/radio-group-demo.tsx
new file mode 100644
index 0000000000..49a49f6374
--- /dev/null
+++ b/apps/design-system/registry/default/example/radio-group-demo.tsx
@@ -0,0 +1,21 @@
+import { Label_Shadcn_ } from 'ui'
+import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+
+export default function RadioGroupDemo() {
+  return (
+    <RadioGroup_Shadcn_ defaultValue="comfortable">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem_Shadcn_ value="default" id="r1" />
+        <Label_Shadcn_ htmlFor="r1">Default</Label_Shadcn_>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem_Shadcn_ value="comfortable" id="r2" />
+        <Label_Shadcn_ htmlFor="r2">Comfortable</Label_Shadcn_>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem_Shadcn_ value="compact" id="r3" />
+        <Label_Shadcn_ htmlFor="r3">Compact</Label_Shadcn_>
+      </div>
+    </RadioGroup_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/radio-group-form.tsx b/apps/design-system/registry/default/example/radio-group-form.tsx
new file mode 100644
index 0000000000..4fdf433393
--- /dev/null
+++ b/apps/design-system/registry/default/example/radio-group-form.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  type: z.enum(['all', 'mentions', 'none'], {
+    required_error: 'You need to select a notification type.',
+  }),
+})
+
+export default function RadioGroupForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="type"
+          render={({ field }) => (
+            <FormItem_Shadcn_ className="space-y-3">
+              <FormLabel_Shadcn_>Notify me about...</FormLabel_Shadcn_>
+              <FormControl_Shadcn_>
+                <RadioGroup_Shadcn_
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  className="flex flex-col space-y-1"
+                >
+                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
+                    <FormControl_Shadcn_>
+                      <RadioGroupItem_Shadcn_ value="all" />
+                    </FormControl_Shadcn_>
+                    <FormLabel_Shadcn_ className="font-normal">All new messages</FormLabel_Shadcn_>
+                  </FormItem_Shadcn_>
+                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
+                    <FormControl_Shadcn_>
+                      <RadioGroupItem_Shadcn_ value="mentions" />
+                    </FormControl_Shadcn_>
+                    <FormLabel_Shadcn_ className="font-normal">
+                      Direct messages and mentions
+                    </FormLabel_Shadcn_>
+                  </FormItem_Shadcn_>
+                  <FormItem_Shadcn_ className="flex items-center space-x-3 space-y-0">
+                    <FormControl_Shadcn_>
+                      <RadioGroupItem_Shadcn_ value="none" />
+                    </FormControl_Shadcn_>
+                    <FormLabel_Shadcn_ className="font-normal">Nothing</FormLabel_Shadcn_>
+                  </FormItem_Shadcn_>
+                </RadioGroup_Shadcn_>
+              </FormControl_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit">Submit</Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/resizable-demo-with-handle.tsx b/apps/design-system/registry/default/example/resizable-demo-with-handle.tsx
new file mode 100644
index 0000000000..fe58cf9aa4
--- /dev/null
+++ b/apps/design-system/registry/default/example/resizable-demo-with-handle.tsx
@@ -0,0 +1,29 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/resizable-demo.tsx b/apps/design-system/registry/default/example/resizable-demo.tsx
new file mode 100644
index 0000000000..521427569b
--- /dev/null
+++ b/apps/design-system/registry/default/example/resizable-demo.tsx
@@ -0,0 +1,29 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-[200px] items-center justify-center p-6">
+          <span className="font-semibold">One</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={50}>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Three</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/resizable-handle.tsx b/apps/design-system/registry/default/example/resizable-handle.tsx
new file mode 100644
index 0000000000..29a14b6ca5
--- /dev/null
+++ b/apps/design-system/registry/default/example/resizable-handle.tsx
@@ -0,0 +1,22 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup
+      direction="horizontal"
+      className="min-h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Sidebar</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/resizable-vertical.tsx b/apps/design-system/registry/default/example/resizable-vertical.tsx
new file mode 100644
index 0000000000..6b00df0180
--- /dev/null
+++ b/apps/design-system/registry/default/example/resizable-vertical.tsx
@@ -0,0 +1,19 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+
+export default function ResizableDemo() {
+  return (
+    <ResizablePanelGroup direction="vertical" className="min-h-[200px] max-w-md rounded-lg border">
+      <ResizablePanel defaultSize={25}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Header</span>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="flex h-full items-center justify-center p-6">
+          <span className="font-semibold">Content</span>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/scroll-area-demo.tsx b/apps/design-system/registry/default/example/scroll-area-demo.tsx
new file mode 100644
index 0000000000..253881b593
--- /dev/null
+++ b/apps/design-system/registry/default/example/scroll-area-demo.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { ScrollArea } from 'ui'
+import { Separator } from 'ui'
+
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`)
+
+export default function ScrollAreaDemo() {
+  return (
+    <ScrollArea className="h-72 w-48 rounded-md border">
+      <div className="p-4">
+        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+        {tags.map((tag) => (
+          <>
+            <div key={tag} className="text-sm">
+              {tag}
+            </div>
+            <Separator className="my-2" />
+          </>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
diff --git a/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx
new file mode 100644
index 0000000000..3c23a84c4e
--- /dev/null
+++ b/apps/design-system/registry/default/example/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react'
+import Image from 'next/image'
+
+import { ScrollArea, ScrollBar } from 'ui'
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex w-max space-x-4 p-4">
+        {works.map((artwork) => (
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by <span className="font-semibold text-foreground">{artwork.artist}</span>
+            </figcaption>
+          </figure>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/design-system/registry/default/example/select-demo.tsx b/apps/design-system/registry/default/example/select-demo.tsx
new file mode 100644
index 0000000000..08b76b2cdc
--- /dev/null
+++ b/apps/design-system/registry/default/example/select-demo.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+
+import {
+  Select_Shadcn_,
+  SelectContent_Shadcn_,
+  SelectGroup_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectLabel_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+} from 'ui'
+
+export default function SelectDemo() {
+  return (
+    <Select_Shadcn_>
+      <SelectTrigger_Shadcn_ className="w-[180px]">
+        <SelectValue_Shadcn_ placeholder="Select a fruit" />
+      </SelectTrigger_Shadcn_>
+      <SelectContent_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>Fruits</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="apple">Apple</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="banana">Banana</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="blueberry">Blueberry</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="grapes">Grapes</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="pineapple">Pineapple</SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+      </SelectContent_Shadcn_>
+    </Select_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/select-form.tsx b/apps/design-system/registry/default/example/select-form.tsx
new file mode 100644
index 0000000000..8af2595484
--- /dev/null
+++ b/apps/design-system/registry/default/example/select-form.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import Link from 'next/link'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from 'ui'
+import {
+  Form_Shadcn_,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import {
+  Select_Shadcn_,
+  SelectContent_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+} from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  email: z
+    .string({
+      required_error: 'Please select an email to display.',
+    })
+    .email(),
+})
+
+export default function SelectForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem_Shadcn_>
+              <FormLabel_Shadcn_>Email</FormLabel_Shadcn_>
+              <Select_Shadcn_ onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl_Shadcn_>
+                  <SelectTrigger_Shadcn_>
+                    <SelectValue_Shadcn_ placeholder="Select a verified email to display" />
+                  </SelectTrigger_Shadcn_>
+                </FormControl_Shadcn_>
+                <SelectContent_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@example.com">m@example.com</SelectItem_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@google.com">m@google.com</SelectItem_Shadcn_>
+                  <SelectItem_Shadcn_ value="m@support.com">m@support.com</SelectItem_Shadcn_>
+                </SelectContent_Shadcn_>
+              </Select_Shadcn_>
+              <FormDescription_Shadcn_>
+                You can manage email addresses in your{' '}
+                <Link href="/examples/forms">email settings</Link>.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit" type="secondary">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/select-scrollable.tsx b/apps/design-system/registry/default/example/select-scrollable.tsx
new file mode 100644
index 0000000000..00050efa23
--- /dev/null
+++ b/apps/design-system/registry/default/example/select-scrollable.tsx
@@ -0,0 +1,71 @@
+import {
+  Select_Shadcn_,
+  SelectContent_Shadcn_,
+  SelectGroup_Shadcn_,
+  SelectItem_Shadcn_,
+  SelectLabel_Shadcn_,
+  SelectTrigger_Shadcn_,
+  SelectValue_Shadcn_,
+} from 'ui'
+
+export default function SelectScrollable() {
+  return (
+    <Select_Shadcn_>
+      <SelectTrigger_Shadcn_ className="w-[280px]">
+        <SelectValue_Shadcn_ placeholder="Select a timezone" />
+      </SelectTrigger_Shadcn_>
+      <SelectContent_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>North America</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="est">Eastern Standard Time (EST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="cst">Central Standard Time (CST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="mst">Mountain Standard Time (MST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="pst">Pacific Standard Time (PST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="akst">Alaska Standard Time (AKST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="hst">Hawaii Standard Time (HST)</SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>Europe & Africa</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="gmt">Greenwich Mean Time (GMT)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="cet">Central European Time (CET)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="eet">Eastern European Time (EET)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="west">Western European Summer Time (WEST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="cat">Central Africa Time (CAT)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="eat">East Africa Time (EAT)</SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>Asia</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="msk">Moscow Time (MSK)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="ist">India Standard Time (IST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="cst_china">China Standard Time (CST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="jst">Japan Standard Time (JST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="kst">Korea Standard Time (KST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="ist_indonesia">
+            Indonesia Central Standard Time (WITA)
+          </SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>Australia & Pacific</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="awst">
+            Australian Western Standard Time (AWST)
+          </SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="acst">
+            Australian Central Standard Time (ACST)
+          </SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="aest">
+            Australian Eastern Standard Time (AEST)
+          </SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="nzst">New Zealand Standard Time (NZST)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="fjt">Fiji Time (FJT)</SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+        <SelectGroup_Shadcn_>
+          <SelectLabel_Shadcn_>South America</SelectLabel_Shadcn_>
+          <SelectItem_Shadcn_ value="art">Argentina Time (ART)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="bot">Bolivia Time (BOT)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="brt">Brasilia Time (BRT)</SelectItem_Shadcn_>
+          <SelectItem_Shadcn_ value="clt">Chile Standard Time (CLT)</SelectItem_Shadcn_>
+        </SelectGroup_Shadcn_>
+      </SelectContent_Shadcn_>
+    </Select_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/separator-demo.tsx b/apps/design-system/registry/default/example/separator-demo.tsx
new file mode 100644
index 0000000000..514151e420
--- /dev/null
+++ b/apps/design-system/registry/default/example/separator-demo.tsx
@@ -0,0 +1,20 @@
+import { Separator } from 'ui'
+
+export default function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
+        <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Separator orientation="vertical" />
+        <div>Docs</div>
+        <Separator orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/sheet-demo.tsx b/apps/design-system/registry/default/example/sheet-demo.tsx
new file mode 100644
index 0000000000..e5264180f2
--- /dev/null
+++ b/apps/design-system/registry/default/example/sheet-demo.tsx
@@ -0,0 +1,50 @@
+import { Button, Input_Shadcn_, Label_Shadcn_ } from 'ui'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from 'ui'
+
+export default function SheetDemo() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button type="outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you re done.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label_Shadcn_ htmlFor="name" className="text-right">
+              Name
+            </Label_Shadcn_>
+            <Input_Shadcn_ id="name" value="Pedro Duarte" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label_Shadcn_ htmlFor="username" className="text-right">
+              Username
+            </Label_Shadcn_>
+            <Input_Shadcn_ id="username" value="@peduarte" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button htmlType="submit" type="secondary">
+              Save changes
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/apps/design-system/registry/default/example/sheet-side.tsx b/apps/design-system/registry/default/example/sheet-side.tsx
new file mode 100644
index 0000000000..edbd6b1f4f
--- /dev/null
+++ b/apps/design-system/registry/default/example/sheet-side.tsx
@@ -0,0 +1,62 @@
+'use client'
+
+import { Button } from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from 'ui'
+
+const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
+
+type SheetSide = (typeof SHEET_SIDES)[number]
+
+export default function SheetSide() {
+  return (
+    <div className="grid grid-cols-2 gap-2">
+      {SHEET_SIDES.map((side) => (
+        <Sheet key={side}>
+          <SheetTrigger asChild>
+            <Button type="outline">{side}</Button>
+          </SheetTrigger>
+          <SheetContent side={side}>
+            <SheetHeader>
+              <SheetTitle>Edit profile</SheetTitle>
+              <SheetDescription>
+                Make changes to your profile here. Click save when you are done.
+              </SheetDescription>
+            </SheetHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label_Shadcn_ htmlFor="name" className="text-right">
+                  Name
+                </Label_Shadcn_>
+                <Input_Shadcn_ id="name" value="Pedro Duarte" className="col-span-3" />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label_Shadcn_ htmlFor="username" className="text-right">
+                  Username
+                </Label_Shadcn_>
+                <Input_Shadcn_ id="username" value="@peduarte" className="col-span-3" />
+              </div>
+            </div>
+            <SheetFooter>
+              <SheetClose asChild>
+                <Button htmlType="submit" type="secondary">
+                  Save changes
+                </Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/skeleton-card.tsx b/apps/design-system/registry/default/example/skeleton-card.tsx
new file mode 100644
index 0000000000..60ba2dbf73
--- /dev/null
+++ b/apps/design-system/registry/default/example/skeleton-card.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from 'ui'
+
+export default function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/skeleton-demo.tsx b/apps/design-system/registry/default/example/skeleton-demo.tsx
new file mode 100644
index 0000000000..8ed0597cb2
--- /dev/null
+++ b/apps/design-system/registry/default/example/skeleton-demo.tsx
@@ -0,0 +1,13 @@
+import { Skeleton } from 'ui'
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/slider-demo.tsx b/apps/design-system/registry/default/example/slider-demo.tsx
new file mode 100644
index 0000000000..3ea312958d
--- /dev/null
+++ b/apps/design-system/registry/default/example/slider-demo.tsx
@@ -0,0 +1,16 @@
+import { cn } from '@/lib/utils'
+import { Slider } from 'ui'
+
+type SliderProps = React.ComponentProps<typeof Slider>
+
+export default function SliderDemo({ className, ...props }: SliderProps) {
+  return (
+    <Slider
+      defaultValue={[50]}
+      max={100}
+      step={1}
+      className={cn('w-[60%]', className)}
+      {...props}
+    />
+  )
+}
diff --git a/apps/design-system/registry/default/example/switch-demo.tsx b/apps/design-system/registry/default/example/switch-demo.tsx
new file mode 100644
index 0000000000..ab7f4c1031
--- /dev/null
+++ b/apps/design-system/registry/default/example/switch-demo.tsx
@@ -0,0 +1,11 @@
+import { Switch } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function SwitchDemo() {
+  return (
+    <div className="flex items-center space-x-2">
+      <Switch id="airplane-mode" />
+      <Label_Shadcn_ htmlFor="airplane-mode">Airplane Mode</Label_Shadcn_>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/switch-form.tsx b/apps/design-system/registry/default/example/switch-form.tsx
new file mode 100644
index 0000000000..e83be3d26b
--- /dev/null
+++ b/apps/design-system/registry/default/example/switch-form.tsx
@@ -0,0 +1,96 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button, Form_Shadcn_ } from 'ui'
+import {
+  Form,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+} from 'ui'
+import { Switch } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  marketing_emails: z.boolean().default(false).optional(),
+  security_emails: z.boolean(),
+})
+
+export default function SwitchForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      security_emails: true,
+    },
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
+        <div>
+          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
+          <div className="space-y-4">
+            <FormField_Shadcn_
+              control={form.control}
+              name="marketing_emails"
+              render={({ field }) => (
+                <FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel_Shadcn_ className="text-base">Marketing emails</FormLabel_Shadcn_>
+                    <FormDescription_Shadcn_>
+                      Receive emails about new products, features, and more.
+                    </FormDescription_Shadcn_>
+                  </div>
+                  <FormControl_Shadcn_>
+                    <Switch checked={field.value} onCheckedChange={field.onChange} />
+                  </FormControl_Shadcn_>
+                </FormItem_Shadcn_>
+              )}
+            />
+            <FormField_Shadcn_
+              control={form.control}
+              name="security_emails"
+              render={({ field }) => (
+                <FormItem_Shadcn_ className="flex flex-row items-center justify-between rounded-lg border p-4">
+                  <div className="space-y-0.5">
+                    <FormLabel_Shadcn_ className="text-base">Security emails</FormLabel_Shadcn_>
+                    <FormDescription_Shadcn_>
+                      Receive emails about your account security.
+                    </FormDescription_Shadcn_>
+                  </div>
+                  <FormControl_Shadcn_>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                      disabled
+                      aria-readonly
+                    />
+                  </FormControl_Shadcn_>
+                </FormItem_Shadcn_>
+              )}
+            />
+          </div>
+        </div>
+        <Button htmlType="submit" type="alternative">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/table-demo.tsx b/apps/design-system/registry/default/example/table-demo.tsx
new file mode 100644
index 0000000000..d3893e1864
--- /dev/null
+++ b/apps/design-system/registry/default/example/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'ui'
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+]
+
+export default function TableDemo() {
+  return (
+    <Table>
+      <TableCaption>A list of your recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.paymentStatus}</TableCell>
+            <TableCell>{invoice.paymentMethod}</TableCell>
+            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$2,500.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  )
+}
diff --git a/apps/design-system/registry/default/example/tabs-demo.tsx b/apps/design-system/registry/default/example/tabs-demo.tsx
new file mode 100644
index 0000000000..e38be55a12
--- /dev/null
+++ b/apps/design-system/registry/default/example/tabs-demo.tsx
@@ -0,0 +1,69 @@
+import { Button } from 'ui'
+import {
+  Card_Shadcn_,
+  CardContent_Shadcn_,
+  CardDescription_Shadcn_,
+  CardFooter_Shadcn_,
+  CardHeader_Shadcn_,
+  CardTitle_Shadcn_,
+} from 'ui'
+import { Input_Shadcn_ } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
+
+export default function TabsDemo() {
+  return (
+    <Tabs_Shadcn_ defaultValue="account" className="w-[400px]">
+      <TabsList_Shadcn_ className="grid w-full grid-cols-2">
+        <TabsTrigger_Shadcn_ value="account">Account</TabsTrigger_Shadcn_>
+        <TabsTrigger_Shadcn_ value="password">Password</TabsTrigger_Shadcn_>
+      </TabsList_Shadcn_>
+      <TabsContent_Shadcn_ value="account">
+        <Card_Shadcn_>
+          <CardHeader_Shadcn_>
+            <CardTitle_Shadcn_>Account</CardTitle_Shadcn_>
+            <CardDescription_Shadcn_>
+              Make changes to your account here. Click save when you are done.
+            </CardDescription_Shadcn_>
+          </CardHeader_Shadcn_>
+          <CardContent_Shadcn_ className="space-y-2">
+            <div className="space-y-1">
+              <Label_Shadcn_ htmlFor="name">Name</Label_Shadcn_>
+              <Input_Shadcn_ id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className="space-y-1">
+              <Label_Shadcn_ htmlFor="username">Username</Label_Shadcn_>
+              <Input_Shadcn_ id="username" defaultValue="@peduarte" />
+            </div>
+          </CardContent_Shadcn_>
+          <CardFooter_Shadcn_>
+            <Button>Save changes</Button>
+          </CardFooter_Shadcn_>
+        </Card_Shadcn_>
+      </TabsContent_Shadcn_>
+      <TabsContent_Shadcn_ value="password">
+        <Card_Shadcn_>
+          <CardHeader_Shadcn_>
+            <CardTitle_Shadcn_>Password</CardTitle_Shadcn_>
+            <CardDescription_Shadcn_>
+              Change your password here. After saving, you will be logged out.
+            </CardDescription_Shadcn_>
+          </CardHeader_Shadcn_>
+          <CardContent_Shadcn_ className="space-y-2">
+            <div className="space-y-1">
+              <Label_Shadcn_ htmlFor="current">Current password</Label_Shadcn_>
+              <Input_Shadcn_ id="current" type="password" />
+            </div>
+            <div className="space-y-1">
+              <Label_Shadcn_ htmlFor="new">New password</Label_Shadcn_>
+              <Input_Shadcn_ id="new" type="password" />
+            </div>
+          </CardContent_Shadcn_>
+          <CardFooter_Shadcn_>
+            <Button>Save password</Button>
+          </CardFooter_Shadcn_>
+        </Card_Shadcn_>
+      </TabsContent_Shadcn_>
+    </Tabs_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
new file mode 100644
index 0000000000..529765679c
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-demo.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalPrimary = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="primary"
+        confirmString="project name"
+        visible={visible}
+        title="Are you sure you want to delete?"
+        size="small"
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalPrimary
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
new file mode 100644
index 0000000000..dd8b94c20d
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-cancel-button.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithCancelButton = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withCancelButton"
+        confirmString="project name"
+        visible={visible}
+        variant="destructive"
+        title="Are you sure you want to delete?"
+        blockDeleteButton={false}
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalWithCancelButton
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
new file mode 100644
index 0000000000..ef27bbf9b9
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-children.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import { UserPlus } from 'lucide-react'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithChildren = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withChildren"
+        confirmString="project name"
+        visible={visible}
+        variant="destructive"
+        title="Are you sure you want to delete?"
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      >
+        <div className="flex flex-col gap-3 text-sm">
+          <div className="flex gap-3 items-center">
+            <UserPlus className="text-foreground-lighter" />
+            <p>
+              This is a paragraph <strong>with some bold text</strong>
+            </p>
+          </div>
+          <div className="flex gap-3 items-center">
+            <UserPlus className="text-foreground-lighter" />
+            <p>
+              This is a paragraph <strong>with some bold text</strong>
+            </p>
+          </div>
+          <div className="flex gap-3 items-center">
+            <UserPlus className="text-foreground-lighter" />
+            <p>
+              This is a paragraph <strong>with some bold text</strong>
+            </p>
+          </div>
+        </div>
+      </TextConfirmModal>
+    </>
+  )
+}
+
+export default TextConfirmModalWithChildren
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx
new file mode 100644
index 0000000000..120131fd71
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-destructive-alert.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithDestructiveAlert = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withDestructiveAlert"
+        confirmString="project name"
+        visible={visible}
+        variant="destructive"
+        title="Are you sure you want to delete?"
+        alert={{
+          title: 'This is a warning',
+          description: 'You are about to delete this item. This action cannot be undone.',
+        }}
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalWithDestructiveAlert
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx
new file mode 100644
index 0000000000..b2f732f876
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-info-alert.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithInfoAlert = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withInfoAlert"
+        confirmString="project name"
+        visible={visible}
+        variant="default"
+        title="Are you sure you want to move?"
+        alert={{
+          title: 'This is a reminder banner',
+          description: 'This should not be used for important CRUD events.',
+        }}
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalWithInfoAlert
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
new file mode 100644
index 0000000000..eb8447556f
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-size.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithSize = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withSize"
+        confirmString="project name"
+        visible={visible}
+        size="xlarge"
+        variant="destructive"
+        title="Are you sure you want to delete?"
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalWithSize
diff --git a/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx b/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx
new file mode 100644
index 0000000000..2a4cd6f372
--- /dev/null
+++ b/apps/design-system/registry/default/example/text-confirm-dialog-with-warning-alert.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, useToast } from 'ui'
+import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal'
+
+const TextConfirmModalWithWarningAlert = () => {
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const { toast } = useToast()
+
+  function onVisibleChange() {
+    setVisible(!visible)
+  }
+
+  function onSubmit() {
+    setLoading(true)
+    setTimeout(() => {
+      setLoading(false)
+      setVisible(false)
+      toast({
+        title: 'Updated project',
+        description: 'Friday, February 10, 2023 at 5:57 PM',
+      })
+    }, 3000)
+  }
+
+  return (
+    <>
+      <Button type="default" onClick={onVisibleChange}>
+        Open warning text confirm dialog
+      </Button>
+      <TextConfirmModal
+        key="withWarningAlert"
+        confirmString="project name"
+        visible={visible}
+        variant="warning"
+        title="Are you sure you want to delete?"
+        alert={{
+          title: 'This is a warning',
+          description: 'You are about to delete this item. This action cannot be undone.',
+        }}
+        onCancel={onVisibleChange}
+        loading={loading}
+        confirmPlaceholder='Type "project name" to confirm'
+        onConfirm={onSubmit}
+      />
+    </>
+  )
+}
+
+export default TextConfirmModalWithWarningAlert
diff --git a/apps/design-system/registry/default/example/textarea-demo.tsx b/apps/design-system/registry/default/example/textarea-demo.tsx
new file mode 100644
index 0000000000..f9ecb64ed0
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-demo.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from 'ui'
+
+export default function TextareaDemo() {
+  return <Textarea placeholder="Type your message here." />
+}
diff --git a/apps/design-system/registry/default/example/textarea-disabled.tsx b/apps/design-system/registry/default/example/textarea-disabled.tsx
new file mode 100644
index 0000000000..ebad71bc10
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-disabled.tsx
@@ -0,0 +1,5 @@
+import { Textarea } from 'ui'
+
+export default function TextareaDisabled() {
+  return <Textarea placeholder="Type your message here." disabled />
+}
diff --git a/apps/design-system/registry/default/example/textarea-form.tsx b/apps/design-system/registry/default/example/textarea-form.tsx
new file mode 100644
index 0000000000..72baa8c892
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-form.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button, Form_Shadcn_ } from 'ui'
+import {
+  Form,
+  FormControl_Shadcn_,
+  FormDescription_Shadcn_,
+  FormField_Shadcn_,
+  FormItem_Shadcn_,
+  FormLabel_Shadcn_,
+  FormMessage_Shadcn_,
+} from 'ui'
+import { Textarea } from 'ui'
+import { toast } from 'ui'
+
+const FormSchema = z.object({
+  bio: z
+    .string()
+    .min(10, {
+      message: 'Bio must be at least 10 characters.',
+    })
+    .max(160, {
+      message: 'Bio must not be longer than 30 characters.',
+    }),
+})
+
+export default function TextareaForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: 'You submitted the following values:',
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  return (
+    <Form_Shadcn_ {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
+        <FormField_Shadcn_
+          control={form.control}
+          name="bio"
+          render={({ field }) => (
+            <FormItem_Shadcn_>
+              <FormLabel_Shadcn_>Bio</FormLabel_Shadcn_>
+              <FormControl_Shadcn_>
+                <Textarea
+                  placeholder="Tell us a little bit about yourself"
+                  className="resize-none"
+                  {...field}
+                />
+              </FormControl_Shadcn_>
+              <FormDescription_Shadcn_>
+                You can <span>@mention</span> other users and organizations.
+              </FormDescription_Shadcn_>
+              <FormMessage_Shadcn_ />
+            </FormItem_Shadcn_>
+          )}
+        />
+        <Button htmlType="submit" type="alternative">
+          Submit
+        </Button>
+      </form>
+    </Form_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/textarea-with-button.tsx b/apps/design-system/registry/default/example/textarea-with-button.tsx
new file mode 100644
index 0000000000..2924430121
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-with-button.tsx
@@ -0,0 +1,11 @@
+import { Button } from 'ui'
+import { Textarea } from 'ui'
+
+export default function TextareaWithButton() {
+  return (
+    <div className="grid w-full gap-2">
+      <Textarea placeholder="Type your message here." />
+      <Button>Send message</Button>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/textarea-with-label.tsx b/apps/design-system/registry/default/example/textarea-with-label.tsx
new file mode 100644
index 0000000000..000cada2ac
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-with-label.tsx
@@ -0,0 +1,11 @@
+import { Label_Shadcn_ } from 'ui'
+import { Textarea } from 'ui'
+
+export default function TextareaWithLabel() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label_Shadcn_ htmlFor="message">Your message</Label_Shadcn_>
+      <Textarea placeholder="Type your message here." id="message" />
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/textarea-with-text.tsx b/apps/design-system/registry/default/example/textarea-with-text.tsx
new file mode 100644
index 0000000000..fe9940fe9b
--- /dev/null
+++ b/apps/design-system/registry/default/example/textarea-with-text.tsx
@@ -0,0 +1,14 @@
+import { Textarea } from 'ui'
+import { Label_Shadcn_ } from 'ui'
+
+export default function TextareaWithText() {
+  return (
+    <div className="grid w-full gap-1.5">
+      <Label_Shadcn_ htmlFor="message-2">Your Message</Label_Shadcn_>
+      <Textarea placeholder="Type your message here." id="message-2" />
+      <p className="text-sm text-muted-foreground">
+        Your message will be copied to the support team.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toast-demo.tsx b/apps/design-system/registry/default/example/toast-demo.tsx
new file mode 100644
index 0000000000..95466eac8b
--- /dev/null
+++ b/apps/design-system/registry/default/example/toast-demo.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { Button } from 'ui'
+import { ToastAction } from 'ui'
+import { useToast } from 'ui'
+
+export default function ToastDemo() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      type="outline"
+      onClick={() => {
+        toast({
+          title: 'Scheduled: Catch up ',
+          description: 'Friday, February 10, 2023 at 5:57 PM',
+          action: <ToastAction altText="Goto schedule to undo">Undo</ToastAction>,
+        })
+      }}
+    >
+      Add to calendar
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toast-destructive.tsx b/apps/design-system/registry/default/example/toast-destructive.tsx
new file mode 100644
index 0000000000..841cce4586
--- /dev/null
+++ b/apps/design-system/registry/default/example/toast-destructive.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Button } from 'ui'
+import { ToastAction } from 'ui'
+import { useToast } from 'ui'
+
+export default function ToastDestructive() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      type="outline"
+      onClick={() => {
+        toast({
+          variant: 'destructive',
+          title: 'Uh oh! Something went wrong.',
+          description: 'There was a problem with your request.',
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toast-simple.tsx b/apps/design-system/registry/default/example/toast-simple.tsx
new file mode 100644
index 0000000000..f270008cd9
--- /dev/null
+++ b/apps/design-system/registry/default/example/toast-simple.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Button } from 'ui'
+import { useToast } from 'ui'
+
+export default function ToastSimple() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      type="outline"
+      onClick={() => {
+        toast({
+          description: 'Your message has been sent.',
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toast-with-action.tsx b/apps/design-system/registry/default/example/toast-with-action.tsx
new file mode 100644
index 0000000000..1683cab0cd
--- /dev/null
+++ b/apps/design-system/registry/default/example/toast-with-action.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { Button } from 'ui'
+import { ToastAction } from 'ui'
+import { useToast } from 'ui'
+
+export default function ToastWithAction() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      type="outline"
+      onClick={() => {
+        toast({
+          title: 'Uh oh! Something went wrong.',
+          description: 'There was a problem with your request.',
+          action: <ToastAction altText="Try again">Try again</ToastAction>,
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toast-with-title.tsx b/apps/design-system/registry/default/example/toast-with-title.tsx
new file mode 100644
index 0000000000..92b1bec4f8
--- /dev/null
+++ b/apps/design-system/registry/default/example/toast-with-title.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Button } from 'ui'
+import { useToast } from 'ui'
+
+export default function ToastWithTitle() {
+  const { toast } = useToast()
+
+  return (
+    <Button
+      type="outline"
+      onClick={() => {
+        toast({
+          title: 'Uh oh! Something went wrong.',
+          description: 'There was a problem with your request.',
+        })
+      }}
+    >
+      Show Toast
+    </Button>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-demo.tsx b/apps/design-system/registry/default/example/toggle-demo.tsx
new file mode 100644
index 0000000000..2a95128067
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-demo.tsx
@@ -0,0 +1,11 @@
+import { Bold } from 'lucide-react'
+
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleDemo() {
+  return (
+    <Toggle_Shadcn_ aria-label="Toggle bold">
+      <Bold className="h-4 w-4" />
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-disabled.tsx b/apps/design-system/registry/default/example/toggle-disabled.tsx
new file mode 100644
index 0000000000..002f83c8f0
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-disabled.tsx
@@ -0,0 +1,11 @@
+import { Underline } from 'lucide-react'
+
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleDisabled() {
+  return (
+    <Toggle_Shadcn_ aria-label="Toggle underline" disabled>
+      <Underline className="h-4 w-4" />
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-demo.tsx b/apps/design-system/registry/default/example/toggle-group-demo.tsx
new file mode 100644
index 0000000000..88b915bf84
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-demo.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-disabled.tsx b/apps/design-system/registry/default/example/toggle-group-disabled.tsx
new file mode 100644
index 0000000000..8dcf6c022f
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-disabled.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup disabled type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-lg.tsx b/apps/design-system/registry/default/example/toggle-group-lg.tsx
new file mode 100644
index 0000000000..1e9b7418f2
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-lg.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup size={'lg'} type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-outline.tsx b/apps/design-system/registry/default/example/toggle-group-outline.tsx
new file mode 100644
index 0000000000..708e517c2a
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-outline.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup variant="outline" type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-single.tsx b/apps/design-system/registry/default/example/toggle-group-single.tsx
new file mode 100644
index 0000000000..556318f3f1
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-single.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup type="single">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-group-sm.tsx b/apps/design-system/registry/default/example/toggle-group-sm.tsx
new file mode 100644
index 0000000000..1bd98d30fe
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-group-sm.tsx
@@ -0,0 +1,19 @@
+import { Bold, Italic, Underline } from 'lucide-react'
+
+import { ToggleGroup, ToggleGroupItem } from 'ui'
+
+export default function ToggleGroupDemo() {
+  return (
+    <ToggleGroup size={'sm'} type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-lg.tsx b/apps/design-system/registry/default/example/toggle-lg.tsx
new file mode 100644
index 0000000000..bcdd33d625
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-lg.tsx
@@ -0,0 +1,11 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleLg() {
+  return (
+    <Toggle_Shadcn_ size="lg" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-outline.tsx b/apps/design-system/registry/default/example/toggle-outline.tsx
new file mode 100644
index 0000000000..3f2eab34f7
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-outline.tsx
@@ -0,0 +1,10 @@
+import { Italic } from 'lucide-react'
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleOutline() {
+  return (
+    <Toggle_Shadcn_ variant="outline" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-sm.tsx b/apps/design-system/registry/default/example/toggle-sm.tsx
new file mode 100644
index 0000000000..56767c0a16
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-sm.tsx
@@ -0,0 +1,11 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleSm() {
+  return (
+    <Toggle_Shadcn_ size="sm" aria-label="Toggle italic">
+      <Italic className="h-4 w-4" />
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/toggle-with-text.tsx b/apps/design-system/registry/default/example/toggle-with-text.tsx
new file mode 100644
index 0000000000..e293d5617e
--- /dev/null
+++ b/apps/design-system/registry/default/example/toggle-with-text.tsx
@@ -0,0 +1,12 @@
+import { Italic } from 'lucide-react'
+
+import { Toggle_Shadcn_ } from 'ui'
+
+export default function ToggleWithText() {
+  return (
+    <Toggle_Shadcn_ aria-label="Toggle italic">
+      <Italic className="mr-2 h-4 w-4" />
+      Italic
+    </Toggle_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/tooltip-demo.tsx b/apps/design-system/registry/default/example/tooltip-demo.tsx
new file mode 100644
index 0000000000..5584ba3f17
--- /dev/null
+++ b/apps/design-system/registry/default/example/tooltip-demo.tsx
@@ -0,0 +1,22 @@
+import { Button } from 'ui'
+import {
+  Tooltip_Shadcn_,
+  TooltipContent_Shadcn_,
+  TooltipProvider_Shadcn_,
+  TooltipTrigger_Shadcn_,
+} from 'ui'
+
+export default function TooltipDemo() {
+  return (
+    <TooltipProvider_Shadcn_>
+      <Tooltip_Shadcn_>
+        <TooltipTrigger_Shadcn_ asChild>
+          <Button type="outline">Hover</Button>
+        </TooltipTrigger_Shadcn_>
+        <TooltipContent_Shadcn_>
+          <p>Add to library</p>
+        </TooltipContent_Shadcn_>
+      </Tooltip_Shadcn_>
+    </TooltipProvider_Shadcn_>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-blockquote.tsx b/apps/design-system/registry/default/example/typography-blockquote.tsx
new file mode 100644
index 0000000000..15c95473fd
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-blockquote.tsx
@@ -0,0 +1,8 @@
+export default function TypographyBlockquote() {
+  return (
+    <blockquote className="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for
+      the privilege."
+    </blockquote>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-demo.tsx b/apps/design-system/registry/default/example/typography-demo.tsx
new file mode 100644
index 0000000000..60ec59526b
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-demo.tsx
@@ -0,0 +1,109 @@
+export default function TypographyDemo() {
+  return (
+    <div>
+      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+        The Joke Tax Chronicles
+      </h1>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging
+        on his throne. One day, his advisors came to him with a problem: the kingdom was running out
+        of money.
+      </p>
+      <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+        The King's Plan
+      </h2>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king thought long and hard, and finally came up with{' '}
+        <a href="#" className="font-medium text-primary underline underline-offset-4">
+          a brilliant plan
+        </a>
+        : he would tax the jokes in the kingdom.
+      </p>
+      <blockquote className="mt-6 border-l-2 pl-6 italic">
+        "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay
+        for the privilege."
+      </blockquote>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">The Joke Tax</h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king's subjects were not amused. They grumbled and complained, but the king was firm:
+      </p>
+      <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners : 20 gold coins</li>
+      </ul>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was
+        one person who refused to let the king's foolishness get him down: a court jester named
+        Jokester.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">Jokester's Revolt</h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        Jokester began sneaking into the castle in the middle of the night and leaving jokes all
+        over the place: under the king's pillow, in his soup, even in the royal toilet. The king was
+        furious, but he couldn't seem to stop Jokester.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        And then, one day, the people of the kingdom discovered that the jokes left by Jokester were
+        so funny that they couldn't help but laugh. And once they started laughing, they couldn't
+        stop.
+      </p>
+      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
+        The People's Rebellion
+      </h3>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns
+        again, and soon the entire kingdom was in on the joke.
+      </p>
+      <div className="my-6 w-full overflow-y-auto">
+        <table className="w-full">
+          <thead>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                King's Treasury
+              </th>
+              <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+                People's happiness
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Empty
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Overflowing
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Modest
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Satisfied
+              </td>
+            </tr>
+            <tr className="m-0 border-t p-0 even:bg-muted">
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Full
+              </td>
+              <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+                Ecstatic
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The king, seeing how much happier his subjects were, realized the error of his ways and
+        repealed the joke tax. Jokester was declared a hero, and the kingdom lived happily ever
+        after.
+      </p>
+      <p className="leading-7 [&:not(:first-child)]:mt-6">
+        The moral of the story is: never underestimate the power of a good laugh and always be
+        careful of bad ideas.
+      </p>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-h1.tsx b/apps/design-system/registry/default/example/typography-h1.tsx
new file mode 100644
index 0000000000..0ee8f5dd4b
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-h1.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH1() {
+  return (
+    <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+      Taxing Laughter: The Joke Tax Chronicles
+    </h1>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-h2.tsx b/apps/design-system/registry/default/example/typography-h2.tsx
new file mode 100644
index 0000000000..ea79441654
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-h2.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH2() {
+  return (
+    <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+      The People of the Kingdom
+    </h2>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-h3.tsx b/apps/design-system/registry/default/example/typography-h3.tsx
new file mode 100644
index 0000000000..8398a0b802
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-h3.tsx
@@ -0,0 +1,3 @@
+export default function TypographyH3() {
+  return <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">The Joke Tax</h3>
+}
diff --git a/apps/design-system/registry/default/example/typography-h4.tsx b/apps/design-system/registry/default/example/typography-h4.tsx
new file mode 100644
index 0000000000..583516625e
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-h4.tsx
@@ -0,0 +1,7 @@
+export default function TypographyH4() {
+  return (
+    <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+      People stopped telling jokes
+    </h4>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-inline-code.tsx b/apps/design-system/registry/default/example/typography-inline-code.tsx
new file mode 100644
index 0000000000..fbbc96ba68
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-inline-code.tsx
@@ -0,0 +1,7 @@
+export default function TypographyInlineCode() {
+  return (
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+      @radix-ui/react-alert-dialog
+    </code>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-large.tsx b/apps/design-system/registry/default/example/typography-large.tsx
new file mode 100644
index 0000000000..944f4478d3
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-large.tsx
@@ -0,0 +1,3 @@
+export default function TypographyLarge() {
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
+}
diff --git a/apps/design-system/registry/default/example/typography-lead.tsx b/apps/design-system/registry/default/example/typography-lead.tsx
new file mode 100644
index 0000000000..066961c45b
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-lead.tsx
@@ -0,0 +1,7 @@
+export default function TypographyLead() {
+  return (
+    <p className="text-xl text-muted-foreground">
+      A modal dialog that interrupts the user with important content and expects a response.
+    </p>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-list.tsx b/apps/design-system/registry/default/example/typography-list.tsx
new file mode 100644
index 0000000000..a814f661f0
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-list.tsx
@@ -0,0 +1,9 @@
+export default function TypographyList() {
+  return (
+    <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+      <li>1st level of puns: 5 gold coins</li>
+      <li>2nd level of jokes: 10 gold coins</li>
+      <li>3rd level of one-liners : 20 gold coins</li>
+    </ul>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-muted.tsx b/apps/design-system/registry/default/example/typography-muted.tsx
new file mode 100644
index 0000000000..c2efef9be3
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-muted.tsx
@@ -0,0 +1,3 @@
+export default function TypographyMuted() {
+  return <p className="text-sm text-muted-foreground">Enter your email address.</p>
+}
diff --git a/apps/design-system/registry/default/example/typography-p.tsx b/apps/design-system/registry/default/example/typography-p.tsx
new file mode 100644
index 0000000000..0a20c523c4
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-p.tsx
@@ -0,0 +1,8 @@
+export default function TypographyP() {
+  return (
+    <p className="leading-7 [&:not(:first-child)]:mt-6">
+      The king, seeing how much happier his subjects were, realized the error of his ways and
+      repealed the joke tax.
+    </p>
+  )
+}
diff --git a/apps/design-system/registry/default/example/typography-small.tsx b/apps/design-system/registry/default/example/typography-small.tsx
new file mode 100644
index 0000000000..01de378f4b
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-small.tsx
@@ -0,0 +1,3 @@
+export default function TypographySmall() {
+  return <small className="text-sm font-medium leading-none">Email address</small>
+}
diff --git a/apps/design-system/registry/default/example/typography-table.tsx b/apps/design-system/registry/default/example/typography-table.tsx
new file mode 100644
index 0000000000..0698c47519
--- /dev/null
+++ b/apps/design-system/registry/default/example/typography-table.tsx
@@ -0,0 +1,44 @@
+export default function TypographyTable() {
+  return (
+    <div className="my-6 w-full overflow-y-auto">
+      <table className="w-full">
+        <thead>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              King's Treasury
+            </th>
+            <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
+              People's happiness
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Empty
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Overflowing
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Modest
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Satisfied
+            </td>
+          </tr>
+          <tr className="m-0 border-t p-0 even:bg-muted">
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Full
+            </td>
+            <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
+              Ecstatic
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  )
+}
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts
new file mode 100644
index 0000000000..96f49a1fc3
--- /dev/null
+++ b/apps/design-system/registry/examples.ts
@@ -0,0 +1,931 @@
+import { Registry } from './schema'
+
+export const examples: Registry = [
+  {
+    name: 'accordion-demo',
+    type: 'components:example',
+    registryDependencies: ['accordion'],
+    files: ['example/accordion-demo.tsx'],
+  },
+  {
+    name: 'alert-demo',
+    type: 'components:example',
+    registryDependencies: ['alert'],
+    files: ['example/alert-demo.tsx'],
+  },
+  {
+    name: 'alert-destructive',
+    type: 'components:example',
+    registryDependencies: ['alert'],
+    files: ['example/alert-destructive.tsx'],
+  },
+  {
+    name: 'alert-dialog-demo',
+    type: 'components:example',
+    registryDependencies: ['alert-dialog', 'button'],
+    files: ['example/alert-dialog-demo.tsx'],
+  },
+  {
+    name: 'aspect-ratio-demo',
+    type: 'components:example',
+    registryDependencies: ['aspect-ratio'],
+    files: ['example/aspect-ratio-demo.tsx'],
+  },
+  {
+    name: 'avatar-demo',
+    type: 'components:example',
+    registryDependencies: ['avatar'],
+    files: ['example/avatar-demo.tsx'],
+  },
+  {
+    name: 'badge-demo',
+    type: 'components:example',
+    registryDependencies: ['badge'],
+    files: ['example/badge-demo.tsx'],
+  },
+  {
+    name: 'badge-destructive',
+    type: 'components:example',
+    registryDependencies: ['badge'],
+    files: ['example/badge-destructive.tsx'],
+  },
+  {
+    name: 'badge-outline',
+    type: 'components:example',
+    registryDependencies: ['badge'],
+    files: ['example/badge-outline.tsx'],
+  },
+  {
+    name: 'badge-secondary',
+    type: 'components:example',
+    registryDependencies: ['badge'],
+    files: ['example/badge-secondary.tsx'],
+  },
+  // {
+  //   name: 'breadcrumb-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-demo.tsx'],
+  // },
+  // {
+  //   name: 'breadcrumb-separator',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-separator.tsx'],
+  // },
+  // {
+  //   name: 'breadcrumb-dropdown',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-dropdown.tsx'],
+  // },
+  // {
+  //   name: 'breadcrumb-ellipsis',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-ellipsis.tsx'],
+  // },
+  // {
+  //   name: 'breadcrumb-link',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-link.tsx'],
+  // },
+  // {
+  //   name: 'breadcrumb-responsive',
+  //   type: 'components:example',
+  //   registryDependencies: ['breadcrumb'],
+  //   files: ['example/breadcrumb-responsive.tsx'],
+  // },
+  {
+    name: 'button-demo',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-demo.tsx'],
+  },
+  {
+    name: 'button-secondary',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-secondary.tsx'],
+  },
+  {
+    name: 'button-destructive',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-destructive.tsx'],
+  },
+  {
+    name: 'button-outline',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-outline.tsx'],
+  },
+  {
+    name: 'button-ghost',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-ghost.tsx'],
+  },
+  {
+    name: 'button-link',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-link.tsx'],
+  },
+  {
+    name: 'button-with-icon',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-with-icon.tsx'],
+  },
+  {
+    name: 'button-loading',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-loading.tsx'],
+  },
+  {
+    name: 'button-icon',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-icon.tsx'],
+  },
+  {
+    name: 'button-as-child',
+    type: 'components:example',
+    registryDependencies: ['button'],
+    files: ['example/button-as-child.tsx'],
+  },
+  {
+    name: 'calendar-demo',
+    type: 'components:example',
+    registryDependencies: ['calendar'],
+    files: ['example/calendar-demo.tsx'],
+  },
+  {
+    name: 'calendar-form',
+    type: 'components:example',
+    registryDependencies: ['calendar', 'form', 'popover'],
+    files: ['example/calendar-form.tsx'],
+  },
+  // {
+  //   name: 'card-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['card', 'button', 'switch'],
+  //   files: ['example/card-demo.tsx'],
+  // },
+  // {
+  //   name: 'card-with-form',
+  //   type: 'components:example',
+  //   registryDependencies: ['button', 'card', 'input', 'label', 'select'],
+  //   files: ['example/card-with-form.tsx'],
+  // },
+  // {
+  //   name: 'carousel-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-demo.tsx'],
+  // },
+  // {
+  //   name: 'carousel-size',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-size.tsx'],
+  // },
+  // {
+  //   name: 'carousel-spacing',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-spacing.tsx'],
+  // },
+  // {
+  //   name: 'carousel-orientation',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-orientation.tsx'],
+  // },
+  // {
+  //   name: 'carousel-api',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-api.tsx'],
+  // },
+  // {
+  //   name: 'carousel-plugin',
+  //   type: 'components:example',
+  //   registryDependencies: ['carousel'],
+  //   files: ['example/carousel-plugin.tsx'],
+  // },
+  {
+    name: 'checkbox-demo',
+    type: 'components:example',
+    registryDependencies: ['checkbox'],
+    files: ['example/checkbox-demo.tsx'],
+  },
+  {
+    name: 'checkbox-disabled',
+    type: 'components:example',
+    registryDependencies: ['checkbox'],
+    files: ['example/checkbox-disabled.tsx'],
+  },
+  {
+    name: 'checkbox-form-multiple',
+    type: 'components:example',
+    registryDependencies: ['checkbox', 'form'],
+    files: ['example/checkbox-form-multiple.tsx'],
+  },
+  {
+    name: 'checkbox-form-single',
+    type: 'components:example',
+    registryDependencies: ['checkbox', 'form'],
+    files: ['example/checkbox-form-single.tsx'],
+  },
+  {
+    name: 'checkbox-with-text',
+    type: 'components:example',
+    registryDependencies: ['checkbox'],
+    files: ['example/checkbox-with-text.tsx'],
+  },
+  {
+    name: 'collapsible-demo',
+    type: 'components:example',
+    registryDependencies: ['collapsible'],
+    files: ['example/collapsible-demo.tsx'],
+  },
+  {
+    name: 'combobox-demo',
+    type: 'components:example',
+    registryDependencies: ['command'],
+    files: ['example/combobox-demo.tsx'],
+  },
+  {
+    name: 'combobox-dropdown-menu',
+    type: 'components:example',
+    registryDependencies: ['command', 'dropdown-menu', 'button'],
+    files: ['example/combobox-dropdown-menu.tsx'],
+  },
+  {
+    name: 'combobox-form',
+    type: 'components:example',
+    registryDependencies: ['command', 'form'],
+    files: ['example/combobox-form.tsx'],
+  },
+  {
+    name: 'combobox-popover',
+    type: 'components:example',
+    registryDependencies: ['combobox', 'popover'],
+    files: ['example/combobox-popover.tsx'],
+  },
+  {
+    name: 'combobox-responsive',
+    type: 'components:example',
+    registryDependencies: ['combobox', 'popover', 'drawer'],
+    files: ['example/combobox-responsive.tsx'],
+  },
+  {
+    name: 'command-demo',
+    type: 'components:example',
+    registryDependencies: ['command'],
+    files: ['example/command-demo.tsx'],
+  },
+  {
+    name: 'command-dialog',
+    type: 'components:example',
+    registryDependencies: ['command', 'dialog'],
+    files: ['example/command-dialog.tsx'],
+  },
+  {
+    name: 'context-menu-demo',
+    type: 'components:example',
+    registryDependencies: ['context-menu'],
+    files: ['example/context-menu-demo.tsx'],
+  },
+  // {
+  //   name: 'data-table-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['data-table'],
+  //   files: ['example/data-table-demo.tsx'],
+  // },
+  {
+    name: 'date-picker-demo',
+    type: 'components:example',
+    registryDependencies: ['button', 'calendar', 'popover'],
+    files: ['example/date-picker-demo.tsx'],
+    dependencies: ['date-fns'],
+  },
+  {
+    name: 'date-picker-form',
+    type: 'components:example',
+    registryDependencies: ['button', 'calendar', 'form', 'popover'],
+    files: ['example/date-picker-form.tsx'],
+    dependencies: ['date-fns'],
+  },
+  {
+    name: 'date-picker-with-presets',
+    type: 'components:example',
+    registryDependencies: ['button', 'calendar', 'popover', 'select'],
+    files: ['example/date-picker-with-presets.tsx'],
+    dependencies: ['date-fns'],
+  },
+  {
+    name: 'date-picker-with-range',
+    type: 'components:example',
+    registryDependencies: ['button', 'calendar', 'popover'],
+    files: ['example/date-picker-with-range.tsx'],
+    dependencies: ['date-fns'],
+  },
+  {
+    name: 'dialog-demo',
+    type: 'components:example',
+    registryDependencies: ['dialog'],
+    files: ['example/dialog-demo.tsx'],
+  },
+  {
+    name: 'dialog-close-button',
+    type: 'components:example',
+    registryDependencies: ['dialog', 'button'],
+    files: ['example/dialog-close-button.tsx'],
+  },
+  {
+    name: 'drawer-demo',
+    type: 'components:example',
+    registryDependencies: ['drawer'],
+    files: ['example/drawer-demo.tsx'],
+  },
+  {
+    name: 'drawer-dialog',
+    type: 'components:example',
+    registryDependencies: ['drawer', 'dialog'],
+    files: ['example/drawer-dialog.tsx'],
+  },
+  {
+    name: 'dropdown-menu-demo',
+    type: 'components:example',
+    registryDependencies: ['dropdown-menu'],
+    files: ['example/dropdown-menu-demo.tsx'],
+  },
+  {
+    name: 'dropdown-menu-checkboxes',
+    type: 'components:example',
+    registryDependencies: ['dropdown-menu', 'checkbox'],
+    files: ['example/dropdown-menu-checkboxes.tsx'],
+  },
+  {
+    name: 'dropdown-menu-radio-group',
+    type: 'components:example',
+    registryDependencies: ['dropdown-menu', 'radio-group'],
+    files: ['example/dropdown-menu-radio-group.tsx'],
+  },
+  {
+    name: 'hover-card-demo',
+    type: 'components:example',
+    registryDependencies: ['hover-card'],
+    files: ['example/hover-card-demo.tsx'],
+  },
+  {
+    name: 'input-demo',
+    type: 'components:example',
+    registryDependencies: ['input'],
+    files: ['example/input-demo.tsx'],
+  },
+  {
+    name: 'input-disabled',
+    type: 'components:example',
+    registryDependencies: ['input'],
+    files: ['example/input-disabled.tsx'],
+  },
+  {
+    name: 'input-file',
+    type: 'components:example',
+    registryDependencies: ['input'],
+    files: ['example/input-file.tsx'],
+  },
+  {
+    name: 'input-form',
+    type: 'components:example',
+    registryDependencies: ['input', 'button', 'form'],
+    files: ['example/input-form.tsx'],
+  },
+  {
+    name: 'input-with-button',
+    type: 'components:example',
+    registryDependencies: ['input', 'button'],
+    files: ['example/input-with-button.tsx'],
+  },
+  {
+    name: 'input-with-label',
+    type: 'components:example',
+    registryDependencies: ['input', 'button', 'label'],
+    files: ['example/input-with-label.tsx'],
+  },
+  {
+    name: 'input-with-text',
+    type: 'components:example',
+    registryDependencies: ['input', 'button', 'label'],
+    files: ['example/input-with-text.tsx'],
+  },
+  {
+    name: 'input-otp-demo',
+    type: 'components:example',
+    registryDependencies: ['input-otp'],
+    files: ['example/input-otp-demo.tsx'],
+  },
+  {
+    name: 'input-otp-pattern',
+    type: 'components:example',
+    registryDependencies: ['input-otp'],
+    files: ['example/input-otp-pattern.tsx'],
+  },
+  {
+    name: 'input-otp-separator',
+    type: 'components:example',
+    registryDependencies: ['input-otp'],
+    files: ['example/input-otp-separator.tsx'],
+  },
+  {
+    name: 'input-otp-controlled',
+    type: 'components:example',
+    registryDependencies: ['input-otp'],
+    files: ['example/input-otp-controlled.tsx'],
+  },
+  {
+    name: 'input-otp-form',
+    type: 'components:example',
+    registryDependencies: ['input-otp', 'form'],
+    files: ['example/input-otp-form.tsx'],
+  },
+  {
+    name: 'label-demo',
+    type: 'components:example',
+    registryDependencies: ['label'],
+    files: ['example/label-demo.tsx'],
+  },
+  {
+    name: 'menubar-demo',
+    type: 'components:example',
+    registryDependencies: ['menubar'],
+    files: ['example/menubar-demo.tsx'],
+  },
+  {
+    name: 'navigation-menu-demo',
+    type: 'components:example',
+    registryDependencies: ['navigation-menu'],
+    files: ['example/navigation-menu-demo.tsx'],
+  },
+  // {
+  //   name: 'pagination-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['pagination'],
+  //   files: ['example/pagination-demo.tsx'],
+  // },
+  {
+    name: 'popover-demo',
+    type: 'components:example',
+    registryDependencies: ['popover'],
+    files: ['example/popover-demo.tsx'],
+  },
+  {
+    name: 'progress-demo',
+    type: 'components:example',
+    registryDependencies: ['progress'],
+    files: ['example/progress-demo.tsx'],
+  },
+  {
+    name: 'radio-group-demo',
+    type: 'components:example',
+    registryDependencies: ['radio-group'],
+    files: ['example/radio-group-demo.tsx'],
+  },
+  {
+    name: 'radio-group-form',
+    type: 'components:example',
+    registryDependencies: ['radio-group', 'form'],
+    files: ['example/radio-group-form.tsx'],
+  },
+  {
+    name: 'resizable-demo',
+    type: 'components:example',
+    registryDependencies: ['resizable'],
+    files: ['example/resizable-demo.tsx'],
+  },
+  {
+    name: 'resizable-demo-with-handle',
+    type: 'components:example',
+    registryDependencies: ['resizable'],
+    files: ['example/resizable-demo-with-handle.tsx'],
+  },
+  {
+    name: 'resizable-vertical',
+    type: 'components:example',
+    registryDependencies: ['resizable'],
+    files: ['example/resizable-vertical.tsx'],
+  },
+  {
+    name: 'resizable-handle',
+    type: 'components:example',
+    registryDependencies: ['resizable'],
+    files: ['example/resizable-handle.tsx'],
+  },
+  {
+    name: 'scroll-area-demo',
+    type: 'components:example',
+    registryDependencies: ['scroll-area'],
+    files: ['example/scroll-area-demo.tsx'],
+  },
+  {
+    name: 'scroll-area-horizontal-demo',
+    type: 'components:example',
+    registryDependencies: ['scroll-area'],
+    files: ['example/scroll-area-horizontal-demo.tsx'],
+  },
+  {
+    name: 'select-demo',
+    type: 'components:example',
+    registryDependencies: ['select'],
+    files: ['example/select-demo.tsx'],
+  },
+  {
+    name: 'select-scrollable',
+    type: 'components:example',
+    registryDependencies: ['select'],
+    files: ['example/select-scrollable.tsx'],
+  },
+  {
+    name: 'select-form',
+    type: 'components:example',
+    registryDependencies: ['select'],
+    files: ['example/select-form.tsx'],
+  },
+  {
+    name: 'separator-demo',
+    type: 'components:example',
+    registryDependencies: ['separator'],
+    files: ['example/separator-demo.tsx'],
+  },
+  {
+    name: 'sheet-demo',
+    type: 'components:example',
+    registryDependencies: ['sheet'],
+    files: ['example/sheet-demo.tsx'],
+  },
+  {
+    name: 'sheet-side',
+    type: 'components:example',
+    registryDependencies: ['sheet'],
+    files: ['example/sheet-side.tsx'],
+  },
+  {
+    name: 'skeleton-demo',
+    type: 'components:example',
+    registryDependencies: ['skeleton'],
+    files: ['example/skeleton-demo.tsx'],
+  },
+  {
+    name: 'skeleton-card',
+    type: 'components:example',
+    registryDependencies: ['skeleton'],
+    files: ['example/skeleton-card.tsx'],
+  },
+  {
+    name: 'slider-demo',
+    type: 'components:example',
+    registryDependencies: ['slider'],
+    files: ['example/slider-demo.tsx'],
+  },
+  // {
+  //   name: 'sonner-demo',
+  //   type: 'components:example',
+  //   registryDependencies: ['sonner'],
+  //   files: ['example/sonner-demo.tsx'],
+  // },
+  {
+    name: 'switch-demo',
+    type: 'components:example',
+    registryDependencies: ['switch'],
+    files: ['example/switch-demo.tsx'],
+  },
+  {
+    name: 'switch-form',
+    type: 'components:example',
+    registryDependencies: ['switch', 'form'],
+    files: ['example/switch-form.tsx'],
+  },
+  {
+    name: 'table-demo',
+    type: 'components:example',
+    registryDependencies: ['table'],
+    files: ['example/table-demo.tsx'],
+  },
+  {
+    name: 'tabs-demo',
+    type: 'components:example',
+    registryDependencies: ['tabs'],
+    files: ['example/tabs-demo.tsx'],
+  },
+  {
+    name: 'textarea-demo',
+    type: 'components:example',
+    registryDependencies: ['textarea'],
+    files: ['example/textarea-demo.tsx'],
+  },
+  {
+    name: 'textarea-disabled',
+    type: 'components:example',
+    registryDependencies: ['textarea'],
+    files: ['example/textarea-disabled.tsx'],
+  },
+  {
+    name: 'textarea-form',
+    type: 'components:example',
+    registryDependencies: ['textarea', 'form'],
+    files: ['example/textarea-form.tsx'],
+  },
+  {
+    name: 'textarea-with-button',
+    type: 'components:example',
+    registryDependencies: ['textarea', 'button'],
+    files: ['example/textarea-with-button.tsx'],
+  },
+  {
+    name: 'textarea-with-label',
+    type: 'components:example',
+    registryDependencies: ['textarea', 'label'],
+    files: ['example/textarea-with-label.tsx'],
+  },
+  {
+    name: 'textarea-with-text',
+    type: 'components:example',
+    registryDependencies: ['textarea', 'label'],
+    files: ['example/textarea-with-text.tsx'],
+  },
+  {
+    name: 'toast-demo',
+    type: 'components:example',
+    registryDependencies: ['toast'],
+    files: ['example/toast-demo.tsx'],
+  },
+  {
+    name: 'toast-destructive',
+    type: 'components:example',
+    registryDependencies: ['toast'],
+    files: ['example/toast-destructive.tsx'],
+  },
+  {
+    name: 'toast-simple',
+    type: 'components:example',
+    registryDependencies: ['toast'],
+    files: ['example/toast-simple.tsx'],
+  },
+  {
+    name: 'toast-with-action',
+    type: 'components:example',
+    registryDependencies: ['toast'],
+    files: ['example/toast-with-action.tsx'],
+  },
+  {
+    name: 'toast-with-title',
+    type: 'components:example',
+    registryDependencies: ['toast'],
+    files: ['example/toast-with-title.tsx'],
+  },
+  {
+    name: 'toggle-group-demo',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-demo.tsx'],
+  },
+  {
+    name: 'toggle-group-disabled',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-disabled.tsx'],
+  },
+  {
+    name: 'toggle-group-lg',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-lg.tsx'],
+  },
+  {
+    name: 'toggle-group-outline',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-outline.tsx'],
+  },
+  {
+    name: 'toggle-group-sm',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-sm.tsx'],
+  },
+  {
+    name: 'toggle-group-single',
+    type: 'components:example',
+    registryDependencies: ['toggle-group'],
+    files: ['example/toggle-group-single.tsx'],
+  },
+  {
+    name: 'toggle-demo',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-demo.tsx'],
+  },
+  {
+    name: 'toggle-disabled',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-disabled.tsx'],
+  },
+  {
+    name: 'toggle-lg',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-lg.tsx'],
+  },
+  {
+    name: 'toggle-outline',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-outline.tsx'],
+  },
+  {
+    name: 'toggle-sm',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-sm.tsx'],
+  },
+  {
+    name: 'toggle-with-text',
+    type: 'components:example',
+    registryDependencies: ['toggle'],
+    files: ['example/toggle-with-text.tsx'],
+  },
+  {
+    name: 'tooltip-demo',
+    type: 'components:example',
+    registryDependencies: ['tooltip'],
+    files: ['example/tooltip-demo.tsx'],
+  },
+  {
+    name: 'typography-blockquote',
+    type: 'components:example',
+    files: ['example/typography-blockquote.tsx'],
+  },
+  {
+    name: 'typography-demo',
+    type: 'components:example',
+    files: ['example/typography-demo.tsx'],
+  },
+  {
+    name: 'typography-h1',
+    type: 'components:example',
+    files: ['example/typography-h1.tsx'],
+  },
+  {
+    name: 'typography-h2',
+    type: 'components:example',
+    files: ['example/typography-h2.tsx'],
+  },
+  {
+    name: 'typography-h3',
+    type: 'components:example',
+    files: ['example/typography-h3.tsx'],
+  },
+  {
+    name: 'typography-h4',
+    type: 'components:example',
+    files: ['example/typography-h4.tsx'],
+  },
+  {
+    name: 'typography-inline-code',
+    type: 'components:example',
+    files: ['example/typography-inline-code.tsx'],
+  },
+  {
+    name: 'typography-large',
+    type: 'components:example',
+    files: ['example/typography-large.tsx'],
+  },
+  {
+    name: 'typography-lead',
+    type: 'components:example',
+    files: ['example/typography-lead.tsx'],
+  },
+  {
+    name: 'typography-list',
+    type: 'components:example',
+    files: ['example/typography-list.tsx'],
+  },
+  {
+    name: 'typography-muted',
+    type: 'components:example',
+    files: ['example/typography-muted.tsx'],
+  },
+  {
+    name: 'typography-p',
+    type: 'components:example',
+    files: ['example/typography-p.tsx'],
+  },
+  {
+    name: 'typography-small',
+    type: 'components:example',
+    files: ['example/typography-small.tsx'],
+  },
+  {
+    name: 'typography-table',
+    type: 'components:example',
+    files: ['example/typography-table.tsx'],
+  },
+  {
+    name: 'mode-toggle',
+    type: 'components:example',
+    files: ['example/mode-toggle.tsx'],
+  },
+  // {
+  //   name: 'cards',
+  //   type: 'components:example',
+  //   files: ['example/cards/cards.tsx'],
+  // },
+  // fragments
+  {
+    name: 'text-confirm-dialog-demo',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-demo.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-info-alert',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-info-alert.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-warning-alert',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-warning-alert.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-destructive-alert',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-destructive-alert.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-size',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-size.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-children',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-children.tsx'],
+  },
+  {
+    name: 'text-confirm-dialog-with-cancel-button',
+    type: 'components:example',
+    files: ['example/text-confirm-dialog-with-cancel-button.tsx'],
+  },
+  {
+    name: 'form-item-layout-demo',
+    type: 'components:example',
+    files: ['example/form-item-layout-demo.tsx'],
+  },
+  {
+    name: 'form-item-layout-with-select',
+    type: 'components:example',
+    files: ['example/form-item-layout-with-select.tsx'],
+  },
+  {
+    name: 'form-item-layout-with-horizontal',
+    type: 'components:example',
+    files: ['example/form-item-layout-with-horizontal.tsx'],
+  },
+  {
+    name: 'form-item-layout-with-switch',
+    type: 'components:example',
+    files: ['example/form-item-layout-with-switch.tsx'],
+  },
+  {
+    name: 'form-item-layout-with-checkbox',
+    type: 'components:example',
+    files: ['example/form-item-layout-with-switch.tsx'],
+  },
+  {
+    name: 'form-item-layout-with-checkbox-list',
+    type: 'components:example',
+    files: ['example/form-item-layout-with-switch.tsx'],
+  },
+  {
+    name: 'color-usage-surface-www-and-docs',
+    type: 'docs:example',
+    files: ['example/color-usage-surface-www-and-docs.tsx'],
+  },
+  {
+    name: 'color-usage-surface-studio',
+    type: 'docs:example',
+    files: ['example/color-usage-surface-studio.tsx'],
+  },
+  {
+    name: 'color-usage-surface-studio-frame',
+    type: 'docs:example',
+    files: ['example/color-usage-surface-studio-frame.tsx'],
+  },
+]
diff --git a/apps/design-system/registry/fragments.ts b/apps/design-system/registry/fragments.ts
new file mode 100644
index 0000000000..91c0114906
--- /dev/null
+++ b/apps/design-system/registry/fragments.ts
@@ -0,0 +1,22 @@
+import { Registry } from '@/registry/schema'
+
+export const fragments: Registry = [
+  {
+    name: 'ConfirmationModal',
+    type: 'components:fragment',
+    files: ['/Dialogs/ConfirmationModal.tsx'],
+    optionalPath: '/Dialogs',
+  },
+  {
+    name: 'TextConfirmModal',
+    type: 'components:fragment',
+    files: ['/Dialogs/TextConfirmModal.tsx'],
+    optionalPath: '/Dialogs',
+  },
+  {
+    name: 'ConfirmDialog',
+    type: 'components:fragment',
+    files: ['/Dialogs/ConfirmDialog.tsx'],
+    optionalPath: '/Dialogs',
+  },
+]
diff --git a/apps/design-system/registry/registry.ts b/apps/design-system/registry/registry.ts
new file mode 100644
index 0000000000..ada50d762a
--- /dev/null
+++ b/apps/design-system/registry/registry.ts
@@ -0,0 +1,5 @@
+import { Registry } from '@/registry/schema'
+import { examples } from '@/registry//examples'
+import { fragments } from '@/registry/fragments'
+
+export const registry: Registry = [...fragments, ...examples]
diff --git a/apps/design-system/registry/schema.ts b/apps/design-system/registry/schema.ts
new file mode 100644
index 0000000000..8dff42b77a
--- /dev/null
+++ b/apps/design-system/registry/schema.ts
@@ -0,0 +1,68 @@
+import { z } from 'zod'
+
+export const blockChunkSchema = z.object({
+  name: z.string(),
+  description: z.string(),
+  component: z.any(),
+  file: z.string(),
+  code: z.string().optional(),
+  container: z
+    .object({
+      className: z.string().nullish(),
+    })
+    .optional(),
+})
+
+const backendProviderValues = ['next-auth', 'supabase', 'auth0']
+
+const isBackendProvider = (value: unknown): value is (typeof backendProviderValues)[number] =>
+  backendProviderValues.includes(value as string)
+
+export const registryEntrySchema = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
+  registryDependencies: z.array(z.string()).optional(),
+  files: z.array(z.string()),
+  source: z.string().optional(),
+  type: z.enum([
+    'components:ui',
+    'components:fragment',
+    'components:component',
+    'components:example',
+    'components:block',
+    'docs:example',
+  ]),
+  category: z.string().optional(),
+  backendProviders: z.array(z.string()).optional(),
+  subcategory: z.string().optional(),
+  chunks: z.array(blockChunkSchema).optional(),
+  // Optional path of file that is exported from a package
+  optionalPath: z.string().optional(),
+})
+
+export const registrySchema = z.array(registryEntrySchema)
+
+export type RegistryEntry = z.infer<typeof registryEntrySchema>
+
+export type Registry = z.infer<typeof registrySchema>
+
+export const blockSchema = registryEntrySchema.extend({
+  type: z.literal('components:block'),
+  style: z.enum(['default', 'new-york']),
+  component: z.any(),
+  container: z
+    .object({
+      height: z.string().optional(),
+      className: z.string().nullish(),
+    })
+    .optional(),
+  code: z.string(),
+  backendProvidersCode: z.any().optional(),
+  highlightedCode: z.string(),
+})
+
+export type Block = z.infer<typeof blockSchema>
+
+export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/apps/design-system/registry/styles.ts b/apps/design-system/registry/styles.ts
new file mode 100644
index 0000000000..1d6cf4fb31
--- /dev/null
+++ b/apps/design-system/registry/styles.ts
@@ -0,0 +1,12 @@
+export const styles = [
+  {
+    name: 'default',
+    label: 'Default',
+  },
+  // {
+  //   name: 'new-york',
+  //   label: 'New York',
+  // },
+] as const
+
+export type Style = (typeof styles)[number]
diff --git a/apps/design-system/registry/themes.ts b/apps/design-system/registry/themes.ts
new file mode 100644
index 0000000000..c2fe099b65
--- /dev/null
+++ b/apps/design-system/registry/themes.ts
@@ -0,0 +1,636 @@
+export const themes = [
+  {
+    name: 'zinc',
+    label: 'Zinc',
+    activeColor: {
+      light: '240 5.9% 10%',
+      dark: '240 5.2% 33.9%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '240 5.9% 10%',
+        'primary-foreground': '0 0% 98%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '240 5.9% 10%',
+        radius: '0.5rem',
+      },
+      dark: {
+        background: '240 10% 3.9%',
+        foreground: '0 0% 98%',
+        card: '240 10% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '240 10% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 0% 98%',
+        'primary-foreground': '240 5.9% 10%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '240 3.7% 15.9%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '240 3.7% 15.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '240 4.9% 83.9%',
+      },
+    },
+  },
+  {
+    name: 'slate',
+    label: 'Slate',
+    activeColor: {
+      light: '215.4 16.3% 46.9%',
+      dark: '215.3 19.3% 34.5%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '222.2 84% 4.9%',
+        card: '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        primary: '222.2 47.4% 11.2%',
+        'primary-foreground': '210 40% 98%',
+        secondary: '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        muted: '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        accent: '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        border: '214.3 31.8% 91.4%',
+        input: '214.3 31.8% 91.4%',
+        ring: '222.2 84% 4.9%',
+        radius: '0.5rem',
+      },
+      dark: {
+        background: '222.2 84% 4.9%',
+        foreground: '210 40% 98%',
+        card: '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        popover: '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        primary: '210 40% 98%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        secondary: '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        muted: '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        accent: '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        border: '217.2 32.6% 17.5%',
+        input: '217.2 32.6% 17.5%',
+        ring: '212.7 26.8% 83.9',
+      },
+    },
+  },
+  {
+    name: 'stone',
+    label: 'Stone',
+    activeColor: {
+      light: '25 5.3% 44.7%',
+      dark: '33.3 5.5% 32.4%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '24 9.8% 10%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '20 14.3% 4.1%',
+        radius: '0.95rem',
+      },
+      dark: {
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '60 9.1% 97.8%',
+        'primary-foreground': '24 9.8% 10%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '24 5.7% 82.9%',
+      },
+    },
+  },
+  {
+    name: 'gray',
+    label: 'Gray',
+    activeColor: {
+      light: '220 8.9% 46.1%',
+      dark: '215 13.8% 34.1%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '224 71.4% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        primary: '220.9 39.3% 11%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        muted: '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        accent: '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        border: '220 13% 91%',
+        input: '220 13% 91%',
+        ring: '224 71.4% 4.1%',
+        radius: '0.35rem',
+      },
+      dark: {
+        background: '224 71.4% 4.1%',
+        foreground: '210 20% 98%',
+        card: '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        popover: '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        primary: '210 20% 98%',
+        'primary-foreground': '220.9 39.3% 11%',
+        secondary: '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        muted: '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        accent: '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        border: '215 27.9% 16.9%',
+        input: '215 27.9% 16.9%',
+        ring: '216 12.2% 83.9%',
+      },
+    },
+  },
+  {
+    name: 'neutral',
+    label: 'Neutral',
+    activeColor: {
+      light: '0 0% 45.1%',
+      dark: '0 0% 32.2%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '0 0% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        primary: '0 0% 9%',
+        'primary-foreground': '0 0% 98%',
+        secondary: '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        muted: '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        accent: '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 89.8%',
+        input: '0 0% 89.8%',
+        ring: '0 0% 3.9%',
+      },
+      dark: {
+        background: '0 0% 3.9%',
+        foreground: '0 0% 98%',
+        card: '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 0% 98%',
+        'primary-foreground': '0 0% 9%',
+        secondary: '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        accent: '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 14.9%',
+        input: '0 0% 14.9%',
+        ring: '0 0% 83.1%',
+      },
+    },
+  },
+  {
+    name: 'red',
+    label: 'Red',
+    activeColor: {
+      light: '0 72.2% 50.6%',
+      dark: '0 72.2% 50.6%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '0 0% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '0 0% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '0 0% 3.9%',
+        primary: '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        secondary: '0 0% 96.1%',
+        'secondary-foreground': '0 0% 9%',
+        muted: '0 0% 96.1%',
+        'muted-foreground': '0 0% 45.1%',
+        accent: '0 0% 96.1%',
+        'accent-foreground': '0 0% 9%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 89.8%',
+        input: '0 0% 89.8%',
+        ring: '0 72.2% 50.6%',
+        radius: '0.4rem',
+      },
+      dark: {
+        background: '0 0% 3.9%',
+        foreground: '0 0% 98%',
+        card: '0 0% 3.9%',
+        'card-foreground': '0 0% 98%',
+        popover: '0 0% 3.9%',
+        'popover-foreground': '0 0% 98%',
+        primary: '0 72.2% 50.6%',
+        'primary-foreground': '0 85.7% 97.3%',
+        secondary: '0 0% 14.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 14.9%',
+        'muted-foreground': '0 0% 63.9%',
+        accent: '0 0% 14.9%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 0% 98%',
+        border: '0 0% 14.9%',
+        input: '0 0% 14.9%',
+        ring: '0 72.2% 50.6%',
+      },
+    },
+  },
+  {
+    name: 'rose',
+    label: 'Rose',
+    activeColor: {
+      light: '346.8 77.2% 49.8%',
+      dark: '346.8 77.2% 49.8%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '346.8 77.2% 49.8%',
+        radius: '0.5rem',
+      },
+      dark: {
+        background: '20 14.3% 4.1%',
+        foreground: '0 0% 95%',
+        popover: '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        card: '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        primary: '346.8 77.2% 49.8%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '346.8 77.2% 49.8%',
+      },
+    },
+  },
+  {
+    name: 'orange',
+    label: 'Orange',
+    activeColor: {
+      light: '24.6 95% 53.1%',
+      dark: '20.5 90.2% 48.2%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '24.6 95% 53.1%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '24.6 95% 53.1%',
+        radius: '0.95rem',
+      },
+      dark: {
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '20.5 90.2% 48.2%',
+        'primary-foreground': '60 9.1% 97.8%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 72.2% 50.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '20.5 90.2% 48.2%',
+      },
+    },
+  },
+  {
+    name: 'green',
+    label: 'Green',
+    activeColor: {
+      light: '142.1 76.2% 36.3%',
+      dark: '142.1 70.6% 45.3%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '240 10% 3.9%',
+        card: '0 0% 100%',
+        'card-foreground': '240 10% 3.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '240 10% 3.9%',
+        primary: '142.1 76.2% 36.3%',
+        'primary-foreground': '355.7 100% 97.3%',
+        secondary: '240 4.8% 95.9%',
+        'secondary-foreground': '240 5.9% 10%',
+        muted: '240 4.8% 95.9%',
+        'muted-foreground': '240 3.8% 46.1%',
+        accent: '240 4.8% 95.9%',
+        'accent-foreground': '240 5.9% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '0 0% 98%',
+        border: '240 5.9% 90%',
+        input: '240 5.9% 90%',
+        ring: '142.1 76.2% 36.3%',
+      },
+      dark: {
+        background: '20 14.3% 4.1%',
+        foreground: '0 0% 95%',
+        popover: '0 0% 9%',
+        'popover-foreground': '0 0% 95%',
+        card: '24 9.8% 10%',
+        'card-foreground': '0 0% 95%',
+        primary: '142.1 70.6% 45.3%',
+        'primary-foreground': '144.9 80.4% 10%',
+        secondary: '240 3.7% 15.9%',
+        'secondary-foreground': '0 0% 98%',
+        muted: '0 0% 15%',
+        'muted-foreground': '240 5% 64.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '0 0% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '0 85.7% 97.3%',
+        border: '240 3.7% 15.9%',
+        input: '240 3.7% 15.9%',
+        ring: '142.4 71.8% 29.2%',
+      },
+    },
+  },
+  {
+    name: 'blue',
+    label: 'Blue',
+    activeColor: {
+      light: '221.2 83.2% 53.3%',
+      dark: '217.2 91.2% 59.8%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '222.2 84% 4.9%',
+        card: '0 0% 100%',
+        'card-foreground': '222.2 84% 4.9%',
+        popover: '0 0% 100%',
+        'popover-foreground': '222.2 84% 4.9%',
+        primary: '221.2 83.2% 53.3%',
+        'primary-foreground': '210 40% 98%',
+        secondary: '210 40% 96.1%',
+        'secondary-foreground': '222.2 47.4% 11.2%',
+        muted: '210 40% 96.1%',
+        'muted-foreground': '215.4 16.3% 46.9%',
+        accent: '210 40% 96.1%',
+        'accent-foreground': '222.2 47.4% 11.2%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 40% 98%',
+        border: '214.3 31.8% 91.4%',
+        input: '214.3 31.8% 91.4%',
+        ring: '221.2 83.2% 53.3%',
+      },
+      dark: {
+        background: '222.2 84% 4.9%',
+        foreground: '210 40% 98%',
+        card: '222.2 84% 4.9%',
+        'card-foreground': '210 40% 98%',
+        popover: '222.2 84% 4.9%',
+        'popover-foreground': '210 40% 98%',
+        primary: '217.2 91.2% 59.8%',
+        'primary-foreground': '222.2 47.4% 11.2%',
+        secondary: '217.2 32.6% 17.5%',
+        'secondary-foreground': '210 40% 98%',
+        muted: '217.2 32.6% 17.5%',
+        'muted-foreground': '215 20.2% 65.1%',
+        accent: '217.2 32.6% 17.5%',
+        'accent-foreground': '210 40% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 40% 98%',
+        border: '217.2 32.6% 17.5%',
+        input: '217.2 32.6% 17.5%',
+        ring: '224.3 76.3% 48%',
+      },
+    },
+  },
+  {
+    name: 'yellow',
+    label: 'Yellow',
+    activeColor: {
+      light: '47.9 95.8% 53.1%',
+      dark: '47.9 95.8% 53.1%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '20 14.3% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '20 14.3% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '20 14.3% 4.1%',
+        primary: '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        secondary: '60 4.8% 95.9%',
+        'secondary-foreground': '24 9.8% 10%',
+        muted: '60 4.8% 95.9%',
+        'muted-foreground': '25 5.3% 44.7%',
+        accent: '60 4.8% 95.9%',
+        'accent-foreground': '24 9.8% 10%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '20 5.9% 90%',
+        input: '20 5.9% 90%',
+        ring: '20 14.3% 4.1%',
+        radius: '0.95rem',
+      },
+      dark: {
+        background: '20 14.3% 4.1%',
+        foreground: '60 9.1% 97.8%',
+        card: '20 14.3% 4.1%',
+        'card-foreground': '60 9.1% 97.8%',
+        popover: '20 14.3% 4.1%',
+        'popover-foreground': '60 9.1% 97.8%',
+        primary: '47.9 95.8% 53.1%',
+        'primary-foreground': '26 83.3% 14.1%',
+        secondary: '12 6.5% 15.1%',
+        'secondary-foreground': '60 9.1% 97.8%',
+        muted: '12 6.5% 15.1%',
+        'muted-foreground': '24 5.4% 63.9%',
+        accent: '12 6.5% 15.1%',
+        'accent-foreground': '60 9.1% 97.8%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '60 9.1% 97.8%',
+        border: '12 6.5% 15.1%',
+        input: '12 6.5% 15.1%',
+        ring: '35.5 91.7% 32.9%',
+      },
+    },
+  },
+  {
+    name: 'violet',
+    label: 'Violet',
+    activeColor: {
+      light: '262.1 83.3% 57.8%',
+      dark: '263.4 70% 50.4%',
+    },
+    cssVars: {
+      light: {
+        background: '0 0% 100%',
+        foreground: '224 71.4% 4.1%',
+        card: '0 0% 100%',
+        'card-foreground': '224 71.4% 4.1%',
+        popover: '0 0% 100%',
+        'popover-foreground': '224 71.4% 4.1%',
+        primary: '262.1 83.3% 57.8%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '220 14.3% 95.9%',
+        'secondary-foreground': '220.9 39.3% 11%',
+        muted: '220 14.3% 95.9%',
+        'muted-foreground': '220 8.9% 46.1%',
+        accent: '220 14.3% 95.9%',
+        'accent-foreground': '220.9 39.3% 11%',
+        destructive: '0 84.2% 60.2%',
+        'destructive-foreground': '210 20% 98%',
+        border: '220 13% 91%',
+        input: '220 13% 91%',
+        ring: '262.1 83.3% 57.8%',
+      },
+      dark: {
+        background: '224 71.4% 4.1%',
+        foreground: '210 20% 98%',
+        card: '224 71.4% 4.1%',
+        'card-foreground': '210 20% 98%',
+        popover: '224 71.4% 4.1%',
+        'popover-foreground': '210 20% 98%',
+        primary: '263.4 70% 50.4%',
+        'primary-foreground': '210 20% 98%',
+        secondary: '215 27.9% 16.9%',
+        'secondary-foreground': '210 20% 98%',
+        muted: '215 27.9% 16.9%',
+        'muted-foreground': '217.9 10.6% 64.9%',
+        accent: '215 27.9% 16.9%',
+        'accent-foreground': '210 20% 98%',
+        destructive: '0 62.8% 30.6%',
+        'destructive-foreground': '210 20% 98%',
+        border: '215 27.9% 16.9%',
+        input: '215 27.9% 16.9%',
+        ring: '263.4 70% 50.4%',
+      },
+    },
+  },
+] as const
+
+export type Theme = (typeof themes)[number]
diff --git a/apps/design-system/scripts/build-registry.mts b/apps/design-system/scripts/build-registry.mts
new file mode 100644
index 0000000000..ca751b4966
--- /dev/null
+++ b/apps/design-system/scripts/build-registry.mts
@@ -0,0 +1,625 @@
+// @sts-nocheck
+import { existsSync, promises as fs, readFileSync } from 'fs'
+import { tmpdir } from 'os'
+import path, { basename } from 'path'
+import { cwd } from 'process'
+import template from 'lodash.template'
+import { rimraf } from 'rimraf'
+import { Project, ScriptKind, SourceFile, SyntaxKind } from 'ts-morph'
+
+import { colorMapping, colors } from '../registry/colors'
+import { registry } from '../registry/registry'
+import { Registry, registrySchema } from '../registry/schema'
+import { styles } from '../registry/styles'
+import { themes } from '../registry/themes'
+
+const REGISTRY_PATH = path.join(process.cwd(), 'public/registry')
+
+// ----------------------------------------------------------------------------
+// Build __registry__/index.tsx.
+// ----------------------------------------------------------------------------
+async function buildRegistry(registry: Registry) {
+  const project = new Project({
+    compilerOptions: {},
+  })
+
+  async function createTempSourceFile(filename: string) {
+    const dir = await fs.mkdtemp(path.join(tmpdir(), 'shadcn-'))
+    return path.join(dir, filename)
+  }
+
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+`
+
+  for (const style of styles) {
+    index += `  "${style.name}": {`
+
+    // Build style index.
+    for (const item of registry) {
+      const resolveFiles = item.files.map((file) => `registry/${style.name}/${file}`)
+      const type = item.type.split(':')[1]
+      let sourceFilename = ''
+
+      let chunks: any = []
+      if (item.type === 'components:block') {
+        const file = resolveFiles[0]
+        const filename = path.basename(file)
+        const raw = await fs.readFile(file, 'utf8')
+        const tempFile = await createTempSourceFile(filename)
+        const sourceFile = project.createSourceFile(tempFile, raw, {
+          scriptKind: ScriptKind.TSX,
+        })
+
+        // Find all imports.
+        const imports = new Map<
+          string,
+          {
+            module: string
+            text: string
+            isDefault?: boolean
+          }
+        >()
+        sourceFile.getImportDeclarations().forEach((node) => {
+          const module = node.getModuleSpecifier().getLiteralValue()
+          node.getNamedImports().forEach((item) => {
+            imports.set(item.getText(), {
+              module,
+              text: node.getText(),
+            })
+          })
+
+          const defaultImport = node.getDefaultImport()
+          if (defaultImport) {
+            imports.set(defaultImport.getText(), {
+              module,
+              text: defaultImport.getText(),
+              isDefault: true,
+            })
+          }
+        })
+
+        // Find all opening tags with x-chunk attribute.
+        const components = sourceFile
+          .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+          .filter((node) => {
+            return node.getAttribute('x-chunk') !== undefined
+          })
+
+        chunks = await Promise.all(
+          components.map(async (component, index) => {
+            const chunkName = `${item.name}-chunk-${index}`
+
+            // Get the value of x-chunk attribute.
+            const attr = component
+              .getAttributeOrThrow('x-chunk')
+              .asKindOrThrow(SyntaxKind.JsxAttribute)
+
+            const description = attr
+              .getInitializerOrThrow()
+              .asKindOrThrow(SyntaxKind.StringLiteral)
+              .getLiteralValue()
+
+            // Delete the x-chunk attribute.
+            attr.remove()
+
+            // Add a new attribute to the component.
+            component.addAttribute({
+              name: 'x-chunk',
+              initializer: `"${chunkName}"`,
+            })
+
+            // Get the value of x-chunk-container attribute.
+            const containerAttr = component
+              .getAttribute('x-chunk-container')
+              ?.asKindOrThrow(SyntaxKind.JsxAttribute)
+
+            const containerClassName = containerAttr
+              ?.getInitializer()
+              ?.asKindOrThrow(SyntaxKind.StringLiteral)
+              .getLiteralValue()
+
+            containerAttr?.remove()
+
+            const parentJsxElement = component.getParentIfKindOrThrow(SyntaxKind.JsxElement)
+
+            // Find all opening tags on component.
+            const children = parentJsxElement
+              .getDescendantsOfKind(SyntaxKind.JsxOpeningElement)
+              .map((node) => {
+                return node.getTagNameNode().getText()
+              })
+              .concat(
+                parentJsxElement
+                  .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+                  .map((node) => {
+                    return node.getTagNameNode().getText()
+                  })
+              )
+
+            const componentImports = new Map<string, string | string[] | Set<string>>()
+            children.forEach((child) => {
+              const importLine = imports.get(child)
+              if (importLine) {
+                const imports = componentImports.get(importLine.module) || []
+
+                const newImports = importLine.isDefault
+                  ? importLine.text
+                  : new Set([...imports, child])
+
+                componentImports.set(
+                  importLine.module,
+                  importLine?.isDefault ? newImports : Array.from(newImports)
+                )
+              }
+            })
+
+            const componnetImportLines = Array.from(componentImports.keys()).map((key) => {
+              const values = componentImports.get(key)
+              const specifier = Array.isArray(values) ? `{${values.join(',')}}` : values
+
+              return `import ${specifier} from "${key}"`
+            })
+
+            const code = `
+            ${componnetImportLines.join('\n')}
+
+            export default function Component() {
+              return (${parentJsxElement.getText()})
+            }`
+
+            const targetFile = file.replace(item.name, `${chunkName}`)
+            const targetFilePath = path.join(
+              cwd(),
+              `registry/${style.name}/${type}/${chunkName}.tsx`
+            )
+
+            // Write component file.
+            rimraf.sync(targetFilePath)
+            await fs.writeFile(targetFilePath, code, 'utf8')
+
+            return {
+              name: chunkName,
+              description,
+              component: `React.lazy(() => import("@/registry/${style.name}/${type}/${chunkName}")),`,
+              file: targetFile,
+              container: {
+                className: containerClassName,
+              },
+            }
+          })
+        )
+
+        // // Write the source file for blocks only.
+        sourceFilename = `__registry__/${style.name}/${type}/${item.name}.tsx`
+        const sourcePath = path.join(process.cwd(), sourceFilename)
+        if (!existsSync(sourcePath)) {
+          await fs.mkdir(sourcePath, { recursive: true })
+        }
+
+        rimraf.sync(sourcePath)
+        await fs.writeFile(sourcePath, sourceFile.getText())
+      }
+
+      // console.log('type', type)
+
+      // console.log('item', item)
+
+      let packagePath = ''
+      if (type === 'ui') {
+        packagePath = `../../packages/ui/src/components/shadcn/ui`
+      }
+      if (type === 'fragment') {
+        packagePath = `../../packages/ui-patterns${item.optionalPath}`
+      }
+      if (type === 'example') {
+        packagePath = `registry/${style.name}/${type}`
+      }
+
+      index += `
+    "${item.name}": {
+      name: "${item.name}",
+      type: "${item.type}",
+      registryDependencies: ${JSON.stringify(item.registryDependencies)},
+      component: React.lazy(() => import("@/${packagePath}/${item.name}")),
+      source: "${sourceFilename}",
+      files: [${resolveFiles.map((file) => `"${file}"`)}],
+      category: "${item.category}",
+      subcategory: "${item.subcategory}",
+      chunks: [${chunks.map(
+        (chunk) => `{
+        name: "${chunk.name}",
+        description: "${chunk.description}",
+        component: ${chunk.component}
+        file: "${chunk.file}",
+        container: {
+          className: "${chunk.container.className}"
+        }
+      }`
+      )}]
+    },`
+    }
+
+    index += `
+  },`
+  }
+
+  index += `
+}
+`
+
+  // ----------------------------------------------------------------------------
+  // Build registry/index.json.
+  // ----------------------------------------------------------------------------
+  // const names = registry.filter((item) => item.type === 'components:ui')
+  // const registryJson = JSON.stringify(names, null, 2)
+  // rimraf.sync(path.join(REGISTRY_PATH, 'index.json'))
+  // await fs.writeFile(path.join(REGISTRY_PATH, 'index.json'), registryJson, 'utf8')
+
+  // Write style index.
+  rimraf.sync(path.join(process.cwd(), '__registry__/index.tsx'))
+  await fs.writeFile(path.join(process.cwd(), '__registry__/index.tsx'), index)
+}
+
+// ----------------------------------------------------------------------------
+// Build registry/styles/[style]/[name].json.
+// ----------------------------------------------------------------------------
+// async function buildStyles(registry: Registry) {
+//   for (const style of styles) {
+//     const targetPath = path.join(REGISTRY_PATH, 'styles', style.name)
+
+//     console.log('targetPath', targetPath)
+
+//     // Create directory if it doesn't exist.
+//     if (!existsSync(targetPath)) {
+//       await fs.mkdir(targetPath, { recursive: true })
+//     }
+
+//     for (const item of registry) {
+//       if (item.type !== 'components:ui') {
+//         continue
+//       }
+
+//       const files = item.files?.map((file) => {
+//         console.log('path', path.join(process.cwd(), 'registry', style.name, file))
+
+//         const content = readFileSync(path.join(process.cwd(), 'registry', style.name, file), 'utf8')
+
+//         return {
+//           name: basename(file),
+//           content,
+//         }
+//       })
+
+//       const payload = {
+//         ...item,
+//         files,
+//       }
+
+//       await fs.writeFile(
+//         path.join(targetPath, `${item.name}.json`),
+//         JSON.stringify(payload, null, 2),
+//         'utf8'
+//       )
+//     }
+//   }
+
+// ----------------------------------------------------------------------------
+// Build registry/styles/index.json.
+// ----------------------------------------------------------------------------
+//   const stylesJson = JSON.stringify(styles, null, 2)
+//   await fs.writeFile(path.join(REGISTRY_PATH, 'styles/index.json'), stylesJson, 'utf8')
+// }
+
+// ----------------------------------------------------------------------------
+// Build registry/colors/index.json.
+// ----------------------------------------------------------------------------
+async function buildThemes() {
+  const colorsTargetPath = path.join(REGISTRY_PATH, 'colors')
+  rimraf.sync(colorsTargetPath)
+  if (!existsSync(colorsTargetPath)) {
+    await fs.mkdir(colorsTargetPath, { recursive: true })
+  }
+
+  const colorsData: Record<string, any> = {}
+  for (const [color, value] of Object.entries(colors)) {
+    if (typeof value === 'string') {
+      colorsData[color] = value
+      continue
+    }
+
+    if (Array.isArray(value)) {
+      colorsData[color] = value.map((item) => ({
+        ...item,
+        rgbChannel: item.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+        hslChannel: item.hsl.replace(/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, '$1 $2 $3'),
+      }))
+      continue
+    }
+
+    if (typeof value === 'object') {
+      colorsData[color] = {
+        ...value,
+        rgbChannel: value.rgb.replace(/^rgb\((\d+),(\d+),(\d+)\)$/, '$1 $2 $3'),
+        hslChannel: value.hsl.replace(/^hsl\(([\d.]+),([\d.]+%),([\d.]+%)\)$/, '$1 $2 $3'),
+      }
+      continue
+    }
+  }
+
+  await fs.writeFile(
+    path.join(colorsTargetPath, 'index.json'),
+    JSON.stringify(colorsData, null, 2),
+    'utf8'
+  )
+
+  // ----------------------------------------------------------------------------
+  // Build registry/colors/[base].json.
+  // ----------------------------------------------------------------------------
+  const BASE_STYLES = `@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+  `
+
+  const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  @layer base {
+    :root {
+      --background: <%- colors.light["background"] %>;
+      --foreground: <%- colors.light["foreground"] %>;
+
+      --card: <%- colors.light["card"] %>;
+      --card-foreground: <%- colors.light["card-foreground"] %>;
+
+      --popover: <%- colors.light["popover"] %>;
+      --popover-foreground: <%- colors.light["popover-foreground"] %>;
+
+      --primary: <%- colors.light["primary"] %>;
+      --primary-foreground: <%- colors.light["primary-foreground"] %>;
+
+      --secondary: <%- colors.light["secondary"] %>;
+      --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+
+      --muted: <%- colors.light["muted"] %>;
+      --muted-foreground: <%- colors.light["muted-foreground"] %>;
+
+      --accent: <%- colors.light["accent"] %>;
+      --accent-foreground: <%- colors.light["accent-foreground"] %>;
+
+      --destructive: <%- colors.light["destructive"] %>;
+      --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+
+      --border: <%- colors.light["border"] %>;
+      --input: <%- colors.light["input"] %>;
+      --ring: <%- colors.light["ring"] %>;
+
+      --radius: 0.5rem;
+    }
+
+    .dark {
+      --background: <%- colors.dark["background"] %>;
+      --foreground: <%- colors.dark["foreground"] %>;
+
+      --card: <%- colors.dark["card"] %>;
+      --card-foreground: <%- colors.dark["card-foreground"] %>;
+
+      --popover: <%- colors.dark["popover"] %>;
+      --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+
+      --primary: <%- colors.dark["primary"] %>;
+      --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+
+      --secondary: <%- colors.dark["secondary"] %>;
+      --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+
+      --muted: <%- colors.dark["muted"] %>;
+      --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+
+      --accent: <%- colors.dark["accent"] %>;
+      --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+
+      --destructive: <%- colors.dark["destructive"] %>;
+      --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+
+      --border: <%- colors.dark["border"] %>;
+      --input: <%- colors.dark["input"] %>;
+      --ring: <%- colors.dark["ring"] %>;
+    }
+  }
+
+  @layer base {
+    * {
+      @apply border-border;
+    }
+    body {
+      @apply bg-background text-foreground;
+    }
+  }`
+
+  for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone']) {
+    const base: Record<string, any> = {
+      inlineColors: {},
+      cssVars: {},
+    }
+    for (const [mode, values] of Object.entries(colorMapping)) {
+      base['inlineColors'][mode] = {}
+      base['cssVars'][mode] = {}
+      for (const [key, value] of Object.entries(values)) {
+        if (typeof value === 'string') {
+          const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`)
+          base['inlineColors'][mode][key] = resolvedColor
+
+          const [resolvedBase, scale] = resolvedColor.split('-')
+          const color = scale
+            ? colorsData[resolvedBase].find((item) => item.scale === parseInt(scale))
+            : colorsData[resolvedBase]
+          if (color) {
+            base['cssVars'][mode][key] = color.hslChannel
+          }
+        }
+      }
+    }
+
+    // Build css vars.
+    base['inlineColorsTemplate'] = template(BASE_STYLES)({})
+    base['cssVarsTemplate'] = template(BASE_STYLES_WITH_VARIABLES)({
+      colors: base['cssVars'],
+    })
+
+    await fs.writeFile(
+      path.join(REGISTRY_PATH, `colors/${baseColor}.json`),
+      JSON.stringify(base, null, 2),
+      'utf8'
+    )
+
+    // ----------------------------------------------------------------------------
+    // Build registry/themes.css
+    // ----------------------------------------------------------------------------
+    const THEME_STYLES_WITH_VARIABLES = `
+.theme-<%- theme %> {
+  --background: <%- colors.light["background"] %>;
+  --foreground: <%- colors.light["foreground"] %>;
+
+  --muted: <%- colors.light["muted"] %>;
+  --muted-foreground: <%- colors.light["muted-foreground"] %>;
+
+  --popover: <%- colors.light["popover"] %>;
+  --popover-foreground: <%- colors.light["popover-foreground"] %>;
+
+  --card: <%- colors.light["card"] %>;
+  --card-foreground: <%- colors.light["card-foreground"] %>;
+
+  --border: <%- colors.light["border"] %>;
+  --input: <%- colors.light["input"] %>;
+
+  --primary: <%- colors.light["primary"] %>;
+  --primary-foreground: <%- colors.light["primary-foreground"] %>;
+
+  --secondary: <%- colors.light["secondary"] %>;
+  --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
+
+  --accent: <%- colors.light["accent"] %>;
+  --accent-foreground: <%- colors.light["accent-foreground"] %>;
+
+  --destructive: <%- colors.light["destructive"] %>;
+  --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
+
+  --ring: <%- colors.light["ring"] %>;
+
+  --radius: <%- colors.light["radius"] %>;
+}
+
+.dark .theme-<%- theme %> {
+  --background: <%- colors.dark["background"] %>;
+  --foreground: <%- colors.dark["foreground"] %>;
+
+  --muted: <%- colors.dark["muted"] %>;
+  --muted-foreground: <%- colors.dark["muted-foreground"] %>;
+
+  --popover: <%- colors.dark["popover"] %>;
+  --popover-foreground: <%- colors.dark["popover-foreground"] %>;
+
+  --card: <%- colors.dark["card"] %>;
+  --card-foreground: <%- colors.dark["card-foreground"] %>;
+
+  --border: <%- colors.dark["border"] %>;
+  --input: <%- colors.dark["input"] %>;
+
+  --primary: <%- colors.dark["primary"] %>;
+  --primary-foreground: <%- colors.dark["primary-foreground"] %>;
+
+  --secondary: <%- colors.dark["secondary"] %>;
+  --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
+
+  --accent: <%- colors.dark["accent"] %>;
+  --accent-foreground: <%- colors.dark["accent-foreground"] %>;
+
+  --destructive: <%- colors.dark["destructive"] %>;
+  --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
+
+  --ring: <%- colors.dark["ring"] %>;
+}`
+
+    const themeCSS = []
+    for (const theme of themes) {
+      themeCSS.push(
+        // @ts-ignore
+        template(THEME_STYLES_WITH_VARIABLES)({
+          colors: theme.cssVars,
+          theme: theme.name,
+        })
+      )
+    }
+
+    await fs.writeFile(path.join(REGISTRY_PATH, `themes.css`), themeCSS.join('\n'), 'utf8')
+
+    // ----------------------------------------------------------------------------
+    // Build registry/themes/[theme].json
+    // ----------------------------------------------------------------------------
+    rimraf.sync(path.join(REGISTRY_PATH, 'themes'))
+    for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone']) {
+      const payload = {
+        name: baseColor,
+        label: baseColor.charAt(0).toUpperCase() + baseColor.slice(1),
+        cssVars: {},
+      }
+
+      for (const [mode, values] of Object.entries(colorMapping)) {
+        payload['cssVars'][mode] = {}
+        for (const [key, value] of Object.entries(values)) {
+          if (typeof value === 'string') {
+            const resolvedColor = value.replace(/{{base}}-/g, `${baseColor}-`)
+            payload['cssVars'][mode][key] = resolvedColor
+
+            const [resolvedBase, scale] = resolvedColor.split('-')
+            const color = scale
+              ? colorsData[resolvedBase].find((item) => item.scale === parseInt(scale))
+              : colorsData[resolvedBase]
+            if (color) {
+              payload['cssVars'][mode][key] = color.hslChannel
+            }
+          }
+        }
+      }
+
+      const targetPath = path.join(REGISTRY_PATH, 'themes')
+
+      // Create directory if it doesn't exist.
+      if (!existsSync(targetPath)) {
+        await fs.mkdir(targetPath, { recursive: true })
+      }
+
+      await fs.writeFile(
+        path.join(targetPath, `${payload.name}.json`),
+        JSON.stringify(payload, null, 2),
+        'utf8'
+      )
+    }
+  }
+}
+
+try {
+  console.log('🚀 Building registry...')
+
+  const result = registrySchema.safeParse(registry)
+
+  if (!result.success) {
+    console.error(result.error)
+    process.exit(1)
+  }
+
+  await buildRegistry(result.data)
+  // await buildStyles(result.data)
+  // await buildThemes()
+
+  console.log('✅ Done!')
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/design-system/styles/code-block-variables.css b/apps/design-system/styles/code-block-variables.css
new file mode 100644
index 0000000000..d4a7fe5429
--- /dev/null
+++ b/apps/design-system/styles/code-block-variables.css
@@ -0,0 +1,35 @@
+[data-theme='dark'],
+[data-theme='deep-dark'],
+.dark,
+.deep-dark {
+  --code-token-keyword: #bda4ff;
+  --code-foreground: #ffffff;
+  --code-token-constant: #3ecf8e;
+  --code-token-string: #ffcda1;
+  --code-token-comment: #7e7e7e;
+  --code-token-parameter: #ffffff;
+  --code-token-function: #3ecf8e;
+  --code-token-string-expression: #ffcda1;
+  --code-token-punctuation: #ffffff;
+  --code-token-link: #ffffff;
+  --code-token-number: #ffffff;
+  --code-token-property: #3ecf8e;
+  --code-highlight-color: #232323;
+}
+
+[data-theme='light'],
+.light {
+  --code-token-keyword: #6b35dc;
+  --code-foreground: hsl(var(--foreground-light) / 1);
+  --code-token-constant: #15593b;
+  --code-token-string: #f1a10d;
+  --code-token-comment: #7e7e7e;
+  --code-token-parameter: hsl(var(--foreground-light) / 1);
+  --code-token-function: #15593b;
+  --code-token-string-expression: #f1a10d;
+  --code-token-punctuation: hsl(var(--foreground-light) / 1);
+  --code-token-link: hsl(var(--foreground-light) / 1);
+  --code-token-number: hsl(var(--foreground-light) / 1);
+  --code-token-property: #15593b;
+  --code-highlight-color: #1c1c1c;
+}
diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
new file mode 100644
index 0000000000..9ef3d8f922
--- /dev/null
+++ b/apps/design-system/styles/globals.css
@@ -0,0 +1,97 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import './../../../packages/ui/build/css/source/global.css';
+@import './../../../packages/ui/build/css/themes/dark.css';
+@import './../../../packages/ui/build/css/themes/deep-dark.css';
+@import './../../../packages/ui/build/css/themes/light.css';
+
+/* @layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+} */
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg text-foreground;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+}
+
+@layer utilities {
+  .step {
+    counter-increment: step;
+  }
+
+  .step:before {
+    @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
+    @apply ml-[-50px] mt-[-4px];
+    content: counter(step);
+  }
+
+  .chunk-container {
+    @apply shadow-none;
+  }
+
+  .chunk-container::after {
+    content: '';
+    @apply absolute -inset-4 shadow-xl rounded-xl border;
+  }
+}
+
+@media (max-width: 640px) {
+  .container {
+    @apply px-4;
+  }
+}
diff --git a/apps/design-system/styles/mdx.css b/apps/design-system/styles/mdx.css
new file mode 100644
index 0000000000..ade9719343
--- /dev/null
+++ b/apps/design-system/styles/mdx.css
@@ -0,0 +1,85 @@
+/* [data-theme="light"] {
+  display: block;
+} */
+
+/* [data-theme="dark"] {
+  display: none;
+} */
+
+.dark [data-theme='light'] {
+  display: none;
+}
+
+.dark [data-theme='dark'] {
+  display: block;
+}
+
+[data-rehype-pretty-code-fragment] {
+  @apply relative text-white;
+}
+
+[data-rehype-pretty-code-fragment] code {
+  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
+  counter-reset: line;
+  box-decoration-break: clone;
+}
+
+[data-rehype-pretty-code-fragment] .line {
+  @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+  @apply px-2;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  @apply text-zinc-50/40 text-xs;
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.8rem;
+  margin-right: 1.4rem;
+  text-align: right;
+}
+
+[data-rehype-pretty-code-fragment] .line--highlighted {
+  @apply bg-surface-200 dark:bg-surface-100;
+}
+
+[data-rehype-pretty-code-fragment] .line-highlighted span {
+  @apply relative;
+}
+
+[data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply rounded-md bg-zinc-700/50 border-zinc-700/70 p-1;
+}
+
+.dark [data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply bg-zinc-900;
+}
+
+[data-rehype-pretty-code-title] {
+  @apply mt-2 pt-6 px-4 text-sm font-medium;
+}
+
+[data-rehype-pretty-code-title] + pre {
+  @apply mt-2;
+}
+
+.mdx > .steps:first-child > h3:first-child {
+  @apply mt-0;
+}
+
+.steps > h3 {
+  @apply mt-8 mb-4 text-base font-semibold;
+}
+
+/* .preview-grid-background {
+  position: absolute;
+  inset: 0;
+  height: 100%;
+  width: 100%;
+  background-image: linear-gradient(to right, #80808012 1px, transparent 1px),
+    linear-gradient(to bottom, #80808012 1px, transparent 1px);
+  background-size: 24px 24px;
+} */
diff --git a/apps/design-system/tailwind.config.js b/apps/design-system/tailwind.config.js
new file mode 100644
index 0000000000..211af90575
--- /dev/null
+++ b/apps/design-system/tailwind.config.js
@@ -0,0 +1,20 @@
+const config = require('config/tailwind.config')
+
+module.exports = config({
+  content: [
+    './app/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+    './registry/**/*.{js,ts,jsx,tsx}',
+    // purge styles from grid library
+    //
+    './../../packages/ui/src/**/*.{tsx,ts,js}',
+    './../../packages/ui-patterns/**/*.{tsx,ts,js}',
+  ],
+  theme: {
+    extend: {
+      maxWidth: {
+        site: '128rem',
+      },
+    },
+  },
+})
diff --git a/apps/design-system/tsconfig.json b/apps/design-system/tsconfig.json
new file mode 100644
index 0000000000..7dcbbf6d63
--- /dev/null
+++ b/apps/design-system/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "tsconfig/base.json",
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths
+      "contentlayer/generated": ["./.contentlayer/generated"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".contentlayer/generated",
+    "./../../packages/ui/src/**/*.d.ts"
+  ],
+  "exclude": ["node_modules", "./scripts/build-registry.mts"]
+}
diff --git a/apps/design-system/tsconfig.scripts.json b/apps/design-system/tsconfig.scripts.json
new file mode 100644
index 0000000000..7d81d8fcb5
--- /dev/null
+++ b/apps/design-system/tsconfig.scripts.json
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es6",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "isolatedModules": false
+  },
+  "include": [".contentlayer/generated", "scripts/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/design-system/types/nav.ts b/apps/design-system/types/nav.ts
new file mode 100644
index 0000000000..662ed86f11
--- /dev/null
+++ b/apps/design-system/types/nav.ts
@@ -0,0 +1,18 @@
+// import { Icons } from '@/components/icons'
+
+export interface NavItem {
+  title: string
+  href?: string
+  disabled?: boolean
+  external?: boolean
+  icon?: any // to do: clean up later | keyof typeof Icons
+  label?: string
+}
+
+export interface NavItemWithChildren extends NavItem {
+  items: NavItemWithChildren[]
+}
+
+export interface MainNavItem extends NavItem {}
+
+export interface SidebarNavItem extends NavItemWithChildren {}
diff --git a/apps/design-system/types/unist.ts b/apps/design-system/types/unist.ts
new file mode 100644
index 0000000000..76d6710e8f
--- /dev/null
+++ b/apps/design-system/types/unist.ts
@@ -0,0 +1,31 @@
+import { Node } from 'unist-builder'
+
+export interface UnistNode extends Node {
+  type: string
+  name?: string
+  tagName?: string
+  value?: string
+  properties?: {
+    __rawString__?: string
+    __className__?: string
+    __event__?: string
+    [key: string]: unknown
+  } & NpmCommands
+  attributes?: {
+    name: string
+    value: unknown
+    type?: string
+  }[]
+  children?: UnistNode[]
+}
+
+export interface UnistTree extends Node {
+  children: UnistNode[]
+}
+
+export interface NpmCommands {
+  __npmCommand__?: string
+  __yarnCommand__?: string
+  __pnpmCommand__?: string
+  __bunCommand__?: string
+}
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 0c0667aae0..19c6162c78 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -11,7 +11,8 @@ import { AuthProvider, ThemeProvider, useTelemetryProps, useThemeSandbox } from
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useCallback, useEffect, useState, type PropsWithChildren } from 'react'
-import { PortalToast, PromoToast } from 'ui'
+import { PortalToast } from 'ui'
+import { PromoToast } from 'ui-patterns/PromoToast'
 import { CommandMenuProvider } from 'ui-patterns/Cmdk'
 import { useConsent } from 'ui-patterns/ConsentToast'
 
diff --git a/package-lock.json b/package-lock.json
index 2ec3f6f43b..2a0ea165c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -221,6 +221,490 @@
         "sql-formatter": "bin/sql-formatter-cli.cjs"
       }
     },
+    "apps/design-system": {
+      "version": "0.1.0",
+      "dependencies": {
+        "@radix-ui/react-alert-dialog": "^1.0.5",
+        "contentlayer2": "0.4.5",
+        "fs": "^0.0.1-security",
+        "jotai": "^2.8.0",
+        "lodash.template": "4.5.0",
+        "lucide-react": "^0.338.0",
+        "markdown-wasm": "^1.2.0",
+        "next": "^14.2.3",
+        "next-contentlayer2": "0.4.5",
+        "react": "^18.2.0",
+        "react-docgen": "^7.0.3",
+        "react-dom": "^18.2.0",
+        "react-inlinesvg": "^4.0.4",
+        "react-wrap-balancer": "^1.1.0",
+        "rehype-autolink-headings": "^7.1.0",
+        "rehype-pretty-code": "^0.6.0",
+        "rehype-slug": "^6.0.0",
+        "remark": "^14.0.3",
+        "remark-code-import": "^1.2.0",
+        "remark-gfm": "^4.0.0",
+        "ts-morph": "^22.0.0",
+        "ui": "*",
+        "unist-util-visit": "^5.0.0"
+      },
+      "devDependencies": {
+        "@shikijs/compat": "^1.1.7",
+        "@types/lodash.template": "4.5.0",
+        "@types/node": "^20",
+        "@types/react": "^18.2.65",
+        "@types/react-dom": "^18.2.22",
+        "autoprefixer": "^10.0.1",
+        "config": "*",
+        "eslint": "^8",
+        "eslint-config-next": "14.1.4",
+        "mdast-util-toc": "^6.1.1",
+        "postcss": "^8",
+        "rimraf": "^4.1.3",
+        "shiki": "^1.1.7",
+        "tailwindcss": "^3.3.0",
+        "tsconfig": "*",
+        "typescript": "^5",
+        "unist-builder": "3.0.0"
+      }
+    },
+    "apps/design-system/node_modules/@next/eslint-plugin-next": {
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.4.tgz",
+      "integrity": "sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==",
+      "dev": true,
+      "dependencies": {
+        "glob": "10.3.10"
+      }
+    },
+    "apps/design-system/node_modules/@types/doctrine": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz",
+      "integrity": "sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA=="
+    },
+    "apps/design-system/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "apps/design-system/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "apps/design-system/node_modules/eslint-config-next": {
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.1.4.tgz",
+      "integrity": "sha512-cihIahbhYAWwXJwZkAaRPpUi5t9aOi/HdfWXOjZeUOqNWXHD8X22kd1KG58Dc3MVaRx3HoR/oMGk2ltcrqDn8g==",
+      "dev": true,
+      "dependencies": {
+        "@next/eslint-plugin-next": "14.1.4",
+        "@rushstack/eslint-patch": "^1.3.3",
+        "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jsx-a11y": "^6.7.1",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+      },
+      "peerDependencies": {
+        "eslint": "^7.23.0 || ^8.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "apps/design-system/node_modules/eslint-import-resolver-typescript": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
+      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "enhanced-resolve": "^5.12.0",
+        "eslint-module-utils": "^2.7.4",
+        "fast-glob": "^3.3.1",
+        "get-tsconfig": "^4.5.0",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unts/projects/eslint-import-resolver-ts"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*"
+      }
+    },
+    "apps/design-system/node_modules/eslint-plugin-react": {
+      "version": "7.34.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
+      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlast": "^1.2.4",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.toreversed": "^1.1.2",
+        "array.prototype.tosorted": "^1.1.3",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.0.17",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.7",
+        "object.fromentries": "^2.0.7",
+        "object.hasown": "^1.1.3",
+        "object.values": "^1.1.7",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.10"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "apps/design-system/node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "apps/design-system/node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "apps/design-system/node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/hast-util-to-string": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
+      "integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/minipass": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
+      "integrity": "sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "apps/design-system/node_modules/react-docgen": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-7.0.3.tgz",
+      "integrity": "sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==",
+      "dependencies": {
+        "@babel/core": "^7.18.9",
+        "@babel/traverse": "^7.18.9",
+        "@babel/types": "^7.18.9",
+        "@types/babel__core": "^7.18.0",
+        "@types/babel__traverse": "^7.18.0",
+        "@types/doctrine": "^0.0.9",
+        "@types/resolve": "^1.20.2",
+        "doctrine": "^3.0.0",
+        "resolve": "^1.22.1",
+        "strip-indent": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.14.0"
+      }
+    },
+    "apps/design-system/node_modules/rehype-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/remark": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-14.0.3.tgz",
+      "integrity": "sha512-bfmJW1dmR2LvaMJuAnE88pZP9DktIFYXazkTfOIKZzi3Knk9lT0roItIA24ydOucI3bV/g/tXBA6hzqq3FV9Ew==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "remark-parse": "^10.0.0",
+        "remark-stringify": "^10.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/remark-gfm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
+      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/remark-gfm/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "apps/design-system/node_modules/remark-gfm/node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/remark-gfm/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/remark/node_modules/@types/mdast": {
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
+      "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "apps/design-system/node_modules/remark/node_modules/remark-stringify": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-10.0.3.tgz",
+      "integrity": "sha512-koyOzCMYoUHudypbj4XpnAKFbkddRMYZHwghnxd7ue5210WzGw6kOBwauJTRUMq16jsovXx8dYNvSSWP89kZ3A==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-to-markdown": "^1.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/rimraf": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz",
+      "integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^9.2.0"
+      },
+      "bin": {
+        "rimraf": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "apps/design-system/node_modules/rimraf/node_modules/glob": {
+      "version": "9.3.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz",
+      "integrity": "sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "minimatch": "^8.0.2",
+        "minipass": "^4.2.4",
+        "path-scurry": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "apps/design-system/node_modules/rimraf/node_modules/minimatch": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz",
+      "integrity": "sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "apps/design-system/node_modules/strip-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
+      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+      "dependencies": {
+        "min-indent": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "apps/design-system/node_modules/unist-builder": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-builder/-/unist-builder-3.0.0.tgz",
+      "integrity": "sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/unist-util-stringify-position/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "apps/design-system/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/unist-util-visit/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "apps/design-system/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "apps/design-system/node_modules/vfile/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
     "apps/docs": {
       "version": "0.0.0",
       "dependencies": {
@@ -4166,7 +4650,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
       "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.23.4",
         "chalk": "^2.4.2"
@@ -4179,7 +4662,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
       "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -4188,7 +4670,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
       "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.23.5",
@@ -4218,7 +4699,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
       "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.23.6",
         "@jridgewell/gen-mapping": "^0.3.2",
@@ -4256,7 +4736,6 @@
       "version": "7.23.6",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
       "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
-      "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.23.5",
         "@babel/helper-validator-option": "^7.23.5",
@@ -4325,7 +4804,6 @@
     },
     "node_modules/@babel/helper-environment-visitor": {
       "version": "7.22.20",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -4333,7 +4811,6 @@
     },
     "node_modules/@babel/helper-function-name": {
       "version": "7.23.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/template": "^7.22.15",
@@ -4345,7 +4822,6 @@
     },
     "node_modules/@babel/helper-hoist-variables": {
       "version": "7.22.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.5"
@@ -4367,7 +4843,6 @@
     },
     "node_modules/@babel/helper-module-imports": {
       "version": "7.22.15",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.15"
@@ -4380,7 +4855,6 @@
       "version": "7.23.3",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
       "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
         "@babel/helper-module-imports": "^7.22.15",
@@ -4450,7 +4924,6 @@
     },
     "node_modules/@babel/helper-simple-access": {
       "version": "7.22.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.5"
@@ -4472,7 +4945,6 @@
     },
     "node_modules/@babel/helper-split-export-declaration": {
       "version": "7.22.6",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.22.5"
@@ -4485,14 +4957,12 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
       "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.22.20",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -4502,7 +4972,6 @@
       "version": "7.23.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
       "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -4525,7 +4994,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
       "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
-      "dev": true,
       "dependencies": {
         "@babel/template": "^7.24.0",
         "@babel/traverse": "^7.24.0",
@@ -4539,7 +5007,6 @@
       "version": "7.23.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
       "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.22.20",
         "chalk": "^2.4.2",
@@ -6140,7 +6607,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
       "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
         "@babel/parser": "^7.24.0",
@@ -6154,7 +6620,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
       "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
         "@babel/generator": "^7.23.6",
@@ -6175,7 +6640,6 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
       "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
         "@babel/helper-validator-identifier": "^7.22.20",
@@ -6259,6 +6723,559 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@contentlayer2/cli": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/cli/-/cli-0.4.2.tgz",
+      "integrity": "sha512-lc7ENmbBxl2kTJK3ubduu/qUJXW5f6XKwnAx33Bl7Mvt5syALVm0vhx3g1ZWtz9JXyIDYsybVgSGQNtMr3Cs3g==",
+      "dependencies": {
+        "@contentlayer2/core": "0.4.2",
+        "@contentlayer2/utils": "0.4.2",
+        "clipanion": "^3.2.1",
+        "typanion": "^3.12.1"
+      }
+    },
+    "node_modules/@contentlayer2/client": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/client/-/client-0.4.2.tgz",
+      "integrity": "sha512-aumGNIvJZXzB2/YIzE277GmJplJfCCLAHynzi6/87oiq/Ky9hf/0cd2R2w0HMPtGmlm1O2UiroD2TjyzsFTQUQ==",
+      "dependencies": {
+        "@contentlayer2/core": "0.4.2"
+      }
+    },
+    "node_modules/@contentlayer2/core": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/core/-/core-0.4.2.tgz",
+      "integrity": "sha512-CjX5oFpR3YfgB4djy2PjWoGROH9WGIOFuHL7633vIKw1Eem5XeuhxzFsEEjhkarLbBpp6BJS27ffIEJbWK3HWA==",
+      "dependencies": {
+        "@contentlayer2/utils": "0.4.2",
+        "camel-case": "^4.1.2",
+        "comment-json": "^4.2.3",
+        "esbuild": "0.17.x || 0.18.x || 0.19.x || 0.20.x",
+        "gray-matter": "^4.0.3",
+        "mdx-bundler": "^10.0.2",
+        "rehype-stringify": "^10.0.0",
+        "remark-frontmatter": "^5.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.1.0",
+        "source-map-support": "^0.5.21",
+        "type-fest": "^4.10.0",
+        "unified": "^11.0.4"
+      },
+      "peerDependencies": {
+        "esbuild": "0.17.x || 0.18.x || 0.19.x || 0.20.x",
+        "markdown-wasm": "1.x"
+      },
+      "peerDependenciesMeta": {
+        "esbuild": {
+          "optional": true
+        },
+        "markdown-wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/@contentlayer2/core/node_modules/mdast-util-to-hast": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/@contentlayer2/core/node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/@contentlayer2/core/node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/remark-rehype": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/type-fest": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.18.2.tgz",
+      "integrity": "sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/core/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/source-files": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/source-files/-/source-files-0.4.2.tgz",
+      "integrity": "sha512-r4m7+262ITf4SZFGrK9P6ogyVCa4Bmt3OU8+0gDgFBFZD3aNYTcHZSyXQV+EyoMfduM/F7Sg9RSFJ18bxa9Yxw==",
+      "dependencies": {
+        "@contentlayer2/core": "0.4.2",
+        "@contentlayer2/utils": "0.4.2",
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.2.12",
+        "gray-matter": "^4.0.3",
+        "imagescript": "^1.2.16",
+        "micromatch": "^4.0.5",
+        "ts-pattern": "^5.0.6",
+        "unified": "^11.0.4",
+        "yaml": "^2.3.1",
+        "zod": "^3.22.4"
+      }
+    },
+    "node_modules/@contentlayer2/source-files/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/@contentlayer2/source-files/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/source-files/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/source-files/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@contentlayer2/source-remote-files": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/source-remote-files/-/source-remote-files-0.4.2.tgz",
+      "integrity": "sha512-gzIZynlSMYa175leiyof66nGyXZGp+H9WoDpYRacQDfIiU0pRLy3YfqFbFf2GZM845+r3c5luO7kaPjv88Xvtw==",
+      "dependencies": {
+        "@contentlayer2/core": "0.4.2",
+        "@contentlayer2/source-files": "0.4.2",
+        "@contentlayer2/utils": "0.4.2"
+      }
+    },
+    "node_modules/@contentlayer2/utils": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@contentlayer2/utils/-/utils-0.4.2.tgz",
+      "integrity": "sha512-CajH0ICW7bPz66ixE3Wf8QYMGPP3ZiEVxmpoyOt6wgJS59XZOAp2StKecUioElZHuXFtBV2MYW5Cq24bjHKhAQ==",
+      "dependencies": {
+        "@effect-ts/core": "^0.60.5",
+        "@effect-ts/otel": "^0.15.1",
+        "@effect-ts/otel-exporter-trace-otlp-grpc": "^0.15.1",
+        "@effect-ts/otel-sdk-trace-node": "^0.15.1",
+        "@js-temporal/polyfill": "^0.4.4",
+        "@opentelemetry/api": "^1.7.0",
+        "@opentelemetry/core": "^1.21.0",
+        "@opentelemetry/exporter-trace-otlp-grpc": "^0.48.0",
+        "@opentelemetry/resources": "^1.21.0",
+        "@opentelemetry/sdk-trace-base": "^1.21.0",
+        "@opentelemetry/sdk-trace-node": "^1.21.0",
+        "@opentelemetry/semantic-conventions": "^1.21.0",
+        "chokidar": "^3.5.3",
+        "hash-wasm": "^4.11.0",
+        "inflection": "^3.0.0",
+        "memfs": "3.6.0",
+        "oo-ascii-tree": "^1.94.0",
+        "ts-pattern": "^5.0.6",
+        "type-fest": "^4.10.0"
+      },
+      "peerDependenciesMeta": {
+        "@effect-ts/core": {
+          "optional": true
+        },
+        "@effect-ts/otel": {
+          "optional": true
+        },
+        "@effect-ts/otel-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/api": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.8.0.tgz",
+      "integrity": "sha512-I/s6F7yKUDdtMsoBWXJe8Qz40Tui5vsuKCWJEWVL+5q9sSWRzzx6v2KeNsOBEwd94j0eWkpWCH4yB6rZg9Mf0w==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/api-logs": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.48.0.tgz",
+      "integrity": "sha512-1/aMiU4Eqo3Zzpfwu51uXssp5pzvHFObk8S9pKAiXb1ne8pvg1qxBQitYL1XUiAMEXFzgjaidYG2V6624DRhhw==",
+      "dependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/core": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.21.0.tgz",
+      "integrity": "sha512-KP+OIweb3wYoP7qTYL/j5IpOlu52uxBv5M4+QhSmmUfLyTgu1OIS71msK3chFo1D6Y61BIH3wMiMYRCxJCQctA==",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.8.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/exporter-trace-otlp-grpc": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.48.0.tgz",
+      "integrity": "sha512-+qRQXUbdRW6aNRT5yWOG3G6My1VxxKeqgUyLkkdIjkT20lvymjiN2RpBfGMtAf/oqnuRknf9snFl9VSIO2gniw==",
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/otlp-grpc-exporter-base": "0.48.0",
+        "@opentelemetry/otlp-transformer": "0.48.0",
+        "@opentelemetry/resources": "1.21.0",
+        "@opentelemetry/sdk-trace-base": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/otlp-exporter-base": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.48.0.tgz",
+      "integrity": "sha512-T4LJND+Ugl87GUONoyoQzuV9qCn4BFIPOnCH1biYqdGhc2JahjuLqVD9aefwLzGBW638iLAo88Lh68h2F1FLiA==",
+      "dependencies": {
+        "@opentelemetry/core": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/otlp-grpc-exporter-base": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.48.0.tgz",
+      "integrity": "sha512-Vdp56RK9OU+Oeoy3YQC/UMOWglKQ9qvgGr49FgF4r8vk5DlcTUgVS0m3KG8pykmRPA+5ZKaDuqwPw5aTvWmHFw==",
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/otlp-exporter-base": "0.48.0",
+        "protobufjs": "^7.2.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/otlp-transformer": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.48.0.tgz",
+      "integrity": "sha512-yuoS4cUumaTK/hhxW3JUy3wl2U4keMo01cFDrUOmjloAdSSXvv1zyQ920IIH4lymp5Xd21Dj2/jq2LOro56TJg==",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.48.0",
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/resources": "1.21.0",
+        "@opentelemetry/sdk-logs": "0.48.0",
+        "@opentelemetry/sdk-metrics": "1.21.0",
+        "@opentelemetry/sdk-trace-base": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.8.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/resources": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.21.0.tgz",
+      "integrity": "sha512-1Z86FUxPKL6zWVy2LdhueEGl9AHDJcx+bvHStxomruz6Whd02mE3lNUMjVJ+FGRoktx/xYQcxccYb03DiUP6Yw==",
+      "dependencies": {
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/semantic-conventions": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.8.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/sdk-logs": {
+      "version": "0.48.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.48.0.tgz",
+      "integrity": "sha512-lRcA5/qkSJuSh4ItWCddhdn/nNbVvnzM+cm9Fg1xpZUeTeozjJDBcHnmeKoOaWRnrGYBdz6UTY6bynZR9aBeAA==",
+      "dependencies": {
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/resources": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.4.0 <1.8.0",
+        "@opentelemetry/api-logs": ">=0.39.1"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/sdk-metrics": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.21.0.tgz",
+      "integrity": "sha512-on1jTzIHc5DyWhRP+xpf+zrgrREXcHBH4EDAfaB5mIG7TWpKxNXooQ1JCylaPsswZUv4wGnVTinr4HrBdGARAQ==",
+      "dependencies": {
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/resources": "1.21.0",
+        "lodash.merge": "^4.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.8.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.21.0.tgz",
+      "integrity": "sha512-yrElGX5Fv0umzp8Nxpta/XqU71+jCAyaLk34GmBzNcrW43nqbrqvdPs4gj4MVy/HcTjr6hifCDCYA3rMkajxxA==",
+      "dependencies": {
+        "@opentelemetry/core": "1.21.0",
+        "@opentelemetry/resources": "1.21.0",
+        "@opentelemetry/semantic-conventions": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.8.0"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.21.0.tgz",
+      "integrity": "sha512-lkC8kZYntxVKr7b8xmjCVUgE0a8xgDakPyDo9uSWavXPyYqLgYYGdEd2j8NxihRyb6UwpX3G/hFUF4/9q2V+/g==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@contentlayer2/utils/node_modules/type-fest": {
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.18.2.tgz",
+      "integrity": "sha512-+suCYpfJLAe4OXS6+PPXjW3urOS4IoP9waSiLuXfLgqZODKw/aWwASvzqE886wA0kQgGy0mIWyhd87VpqIy6Xg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "license": "MIT",
@@ -6311,6 +7328,60 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@effect-ts/core": {
+      "version": "0.60.5",
+      "resolved": "https://registry.npmjs.org/@effect-ts/core/-/core-0.60.5.tgz",
+      "integrity": "sha512-qi1WrtJA90XLMnj2hnUszW9Sx4dXP03ZJtCc5DiUBIOhF4Vw7plfb65/bdBySPoC9s7zy995TdUX1XBSxUkl5w==",
+      "dependencies": {
+        "@effect-ts/system": "^0.57.5"
+      }
+    },
+    "node_modules/@effect-ts/otel": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@effect-ts/otel/-/otel-0.15.1.tgz",
+      "integrity": "sha512-AmZJHl7t0+Peh7Yb2+hqn6r9+rd9/UfeA4AMV9h0YGTdOyouyFfD3wzWlxnAUzAQ4Lrod4kC7Noruret4EpqpA==",
+      "peerDependencies": {
+        "@effect-ts/core": "^0.60.2",
+        "@opentelemetry/api": "^1.4.0",
+        "@opentelemetry/core": "^1.13.0",
+        "@opentelemetry/sdk-trace-base": "^1.13.0"
+      }
+    },
+    "node_modules/@effect-ts/otel-exporter-trace-otlp-grpc": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@effect-ts/otel-exporter-trace-otlp-grpc/-/otel-exporter-trace-otlp-grpc-0.15.1.tgz",
+      "integrity": "sha512-47gAg0O2pW5Jlo86jfzjdkwL5a7Bzb+Kj5WTmdu4CxYRfWn9ytKjuuYIfsNDW8neuhdKzn+P5wCddgEh0glYyQ==",
+      "dependencies": {
+        "@effect-ts/otel": "^0.15.1"
+      },
+      "peerDependencies": {
+        "@effect-ts/core": "^0.60.2",
+        "@opentelemetry/api": "^1.4.0",
+        "@opentelemetry/core": "^1.13.0",
+        "@opentelemetry/exporter-trace-otlp-grpc": "^0.39.0",
+        "@opentelemetry/sdk-trace-base": "^1.13.0"
+      }
+    },
+    "node_modules/@effect-ts/otel-sdk-trace-node": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@effect-ts/otel-sdk-trace-node/-/otel-sdk-trace-node-0.15.1.tgz",
+      "integrity": "sha512-a2sF0ylmn8xOJs8fNeT/spJ1gUcsksAJCALxo9WOfuTCMtTwMVtVhCKEPEeQoL7wFqU+JgPkVdP91+FJ/Rkeow==",
+      "dependencies": {
+        "@effect-ts/otel": "^0.15.1"
+      },
+      "peerDependencies": {
+        "@effect-ts/core": "^0.60.2",
+        "@opentelemetry/api": "^1.4.0",
+        "@opentelemetry/core": "^1.13.0",
+        "@opentelemetry/sdk-trace-base": "^1.13.0",
+        "@opentelemetry/sdk-trace-node": "^1.13.0"
+      }
+    },
+    "node_modules/@effect-ts/system": {
+      "version": "0.57.5",
+      "resolved": "https://registry.npmjs.org/@effect-ts/system/-/system-0.57.5.tgz",
+      "integrity": "sha512-/crHGujo0xnuHIYNc1VgP0HGJGFSoSqq88JFXe6FmFyXPpWt8Xu39LyLg7rchsxfXFeEdA9CrIZvLV5eswXV5g=="
+    },
     "node_modules/@emnapi/runtime": {
       "version": "0.43.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.43.1.tgz",
@@ -6346,6 +7417,31 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@esbuild-plugins/node-resolve": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-resolve/-/node-resolve-0.2.2.tgz",
+      "integrity": "sha512-+t5FdX3ATQlb53UFDBRb4nqjYBz492bIrnVWvpQHpzZlu9BQL5HasMZhqc409ygUwOWCXZhrWr6NyZ6T6Y+cxw==",
+      "dependencies": {
+        "@types/resolve": "^1.17.1",
+        "debug": "^4.3.1",
+        "escape-string-regexp": "^4.0.0",
+        "resolve": "^1.19.0"
+      },
+      "peerDependencies": {
+        "esbuild": "*"
+      }
+    },
+    "node_modules/@esbuild-plugins/node-resolve/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
@@ -6415,7 +7511,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -6822,8 +7917,7 @@
     "node_modules/@fal-works/esbuild-plugin-global-externals": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz",
-      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==",
-      "dev": true
+      "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ=="
     },
     "node_modules/@fastify/busboy": {
       "version": "2.1.0",
@@ -6913,6 +8007,113 @@
         }
       }
     },
+    "node_modules/@grpc/grpc-js": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.10.8.tgz",
+      "integrity": "sha512-vYVqYzHicDqyKB+NQhAc54I1QWCBLCrYG6unqOIcBTHx+7x8C9lcoLj3KVJXs2VB4lUbpWY+Kk9NipcbXYWmvg==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.13",
+        "@js-sdsl/ordered-map": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=12.10.0"
+      }
+    },
+    "node_modules/@grpc/proto-loader": {
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.7.13.tgz",
+      "integrity": "sha512-AiXO/bfe9bmxBjxxtYxFAXGZvMaN5s8kO+jBHAJCON8rJoB5YS/D6X7ZNc6XQkuHNmyl4CYaMI1fJ/Gn27RGGw==",
+      "dependencies": {
+        "lodash.camelcase": "^4.3.0",
+        "long": "^5.0.0",
+        "protobufjs": "^7.2.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "proto-loader-gen-types": "build/bin/proto-loader-gen-types.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@grpc/proto-loader/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@grpc/proto-loader/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@grpc/proto-loader/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/@grpc/proto-loader/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@grpc/proto-loader/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@grpc/proto-loader/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@har-sdk/core": {
       "version": "1.4.5",
       "resolved": "https://registry.npmjs.org/@har-sdk/core/-/core-1.4.5.tgz",
@@ -7808,6 +9009,27 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@js-sdsl/ordered-map": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@js-sdsl/ordered-map/-/ordered-map-4.4.2.tgz",
+      "integrity": "sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/js-sdsl"
+      }
+    },
+    "node_modules/@js-temporal/polyfill": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@js-temporal/polyfill/-/polyfill-0.4.4.tgz",
+      "integrity": "sha512-2X6bvghJ/JAoZO52lbgyAPFj8uCflhTo2g7nkFzEQdXd/D8rEeD4HtmTEpmtGCva260fcd66YNXBOYdnmHqSOg==",
+      "dependencies": {
+        "jsbi": "^4.3.0",
+        "tslib": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "dev": true,
@@ -7879,6 +9101,969 @@
       "version": "4.0.0",
       "license": "ISC"
     },
+    "node_modules/@mdx-js/esbuild": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/esbuild/-/esbuild-3.0.1.tgz",
+      "integrity": "sha512-+KZbCKcRjFtRD6qzD+c70Vq/VPVt5LHFsOshNcsdcONkaLTCSjmM7/uj71i3BcP+170f+P4DwVEMtqR/k0t5aw==",
+      "dependencies": {
+        "@mdx-js/mdx": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.14.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/@mdx-js/mdx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.1.tgz",
+      "integrity": "sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdx": "^2.0.0",
+        "collapse-white-space": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-build-jsx": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-estree": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "markdown-extensions": "^2.0.0",
+        "periscopic": "^3.0.0",
+        "remark-mdx": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "source-map": "^0.7.0",
+        "unified": "^11.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/estree-util-attach-comments": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
+      "integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/estree-util-build-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
+      "integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-walker": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/estree-util-to-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
+      "integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "astring": "^1.8.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/estree-util-visit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/hast-util-to-estree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
+      "integrity": "sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-attach-comments": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^0.4.0",
+        "unist-util-position": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/markdown-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
+      "integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-mdx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
+      "integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
+      "integrity": "sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-remove-position": "^5.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-to-hast": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-core-commonmark": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.1.tgz",
+      "integrity": "sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-extension-mdx-expression": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz",
+      "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-extension-mdx-jsx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.0.tgz",
+      "integrity": "sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==",
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-extension-mdx-md": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-extension-mdxjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^3.0.0",
+        "micromark-extension-mdx-jsx": "^3.0.0",
+        "micromark-extension-mdx-md": "^2.0.0",
+        "micromark-extension-mdxjs-esm": "^3.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-extension-mdxjs-esm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-destination": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+      "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-label": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+      "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-title": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+      "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-factory-whitespace": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+      "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-chunked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+      "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-classify-character": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+      "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+      "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-events-to-acorn": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz",
+      "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+      "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+      "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-resolve-all": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+      "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-subtokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.1.tgz",
+      "integrity": "sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/remark-mdx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz",
+      "integrity": "sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==",
+      "dependencies": {
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/remark-rehype": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unist-util-position-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/esbuild/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/@mdx-js/loader": {
       "version": "2.3.0",
       "license": "MIT",
@@ -8547,6 +10732,498 @@
         "@octokit/openapi-types": "^19.1.0"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",
+      "integrity": "sha512-O2yRJce1GOc6PAy3QxFM4NzFiWzvScDC1/5ihYBL6BUEVdq0XMWN01sppE+H6bBXbaFYipjwFLEWLg5PaSOThA==",
+      "peer": true,
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/api-logs": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.39.1.tgz",
+      "integrity": "sha512-9BJ8lMcOzEN0lu+Qji801y707oFO4xT3db6cosPvl+k7ItUHKN5ofWqtSbM9gbt1H4JJ/4/2TVrqI9Rq7hNv6Q==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/context-async-hooks": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-1.24.1.tgz",
+      "integrity": "sha512-R5r6DO4kgEOVBxFXhXjwospLQkv+sYxwCfjvoZBe7Zm6KKXAV9kDSJhi/D1BweowdZmO+sdbENLs374gER8hpQ==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/core": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.24.1.tgz",
+      "integrity": "sha512-wMSGfsdmibI88K9wB498zXY04yThPexo8jvwNNlm542HZB7XrrMRBbAyKJqG8qDRJwIBdBrPMi4V9ZPW/sqrcg==",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.24.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-grpc/-/exporter-trace-otlp-grpc-0.39.1.tgz",
+      "integrity": "sha512-l5RhLKx6U+yuLhMrtgavTDthX50E1mZM3/SSySC7OPZiArFHV/b/9x9jxAzrOgIQUDxyj4N0V9aLKSA2t7Qzxg==",
+      "peer": true,
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/otlp-grpc-exporter-base": "0.39.1",
+        "@opentelemetry/otlp-transformer": "0.39.1",
+        "@opentelemetry/resources": "1.13.0",
+        "@opentelemetry/sdk-trace-base": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc/node_modules/@opentelemetry/resources": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.13.0.tgz",
+      "integrity": "sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.13.0.tgz",
+      "integrity": "sha512-moTiQtc0uPR1hQLt6gLDJH9IIkeBhgRb71OKjNHZPE1VF45fHtD6nBDi5J/DkTHTwYP5X3kBJLa3xN7ub6J4eg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/resources": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-grpc/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.39.1.tgz",
+      "integrity": "sha512-Pv5X8fbi6jD/RJBePyn7MnCSuE6MbPB6dl+7YYBWJ5RcMGYMwvLXjd4h2jWsPV2TSUg38H/RoSP0aXvQ06Y7iw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-grpc-exporter-base": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-grpc-exporter-base/-/otlp-grpc-exporter-base-0.39.1.tgz",
+      "integrity": "sha512-u3ErFRQqQFKjjIMuwLWxz/tLPYInfmiAmSy//fGSCzCh2ZdJgqQjMOAxBgqFtCF2xFL+OmMhyuC2ThMzceGRWA==",
+      "peer": true,
+      "dependencies": {
+        "@grpc/grpc-js": "^1.7.1",
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/otlp-exporter-base": "0.39.1",
+        "protobufjs": "^7.2.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-grpc-exporter-base/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-grpc-exporter-base/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.39.1.tgz",
+      "integrity": "sha512-0hgVnXXz5efI382B/24NxD4b6Zxlh7nxCdJkxkdmQMbn0yRiwoq/ZT+QG8eUL6JNzsBAV1WJlF5aJNsL8skHvw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.39.1",
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/resources": "1.13.0",
+        "@opentelemetry/sdk-logs": "0.39.1",
+        "@opentelemetry/sdk-metrics": "1.13.0",
+        "@opentelemetry/sdk-trace-base": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/resources": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.13.0.tgz",
+      "integrity": "sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.13.0.tgz",
+      "integrity": "sha512-moTiQtc0uPR1hQLt6gLDJH9IIkeBhgRb71OKjNHZPE1VF45fHtD6nBDi5J/DkTHTwYP5X3kBJLa3xN7ub6J4eg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/resources": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/propagator-b3": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/propagator-b3/-/propagator-b3-1.24.1.tgz",
+      "integrity": "sha512-nda97ZwhpZKyUJTXqQuKzNhPMUgMLunbbGWn8kroBwegn+nh6OhtyGkrVQsQLNdVKJl0KeB5z0ZgeWszrYhwFw==",
+      "dependencies": {
+        "@opentelemetry/core": "1.24.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/propagator-jaeger": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/propagator-jaeger/-/propagator-jaeger-1.24.1.tgz",
+      "integrity": "sha512-7bRBJn3FG1l195A1m+xXRHvgzAOBsfmRi9uZ5Da18oTh7BLmNDiA8+kpk51FpTsU1PCikPVpRDNPhKVB6lyzZg==",
+      "dependencies": {
+        "@opentelemetry/core": "1.24.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/resources": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.24.1.tgz",
+      "integrity": "sha512-cyv0MwAaPF7O86x5hk3NNgenMObeejZFLJJDVuSeSMIsknlsj3oOZzRv3qSzlwYomXsICfBeFFlxwHQte5mGXQ==",
+      "dependencies": {
+        "@opentelemetry/core": "1.24.1",
+        "@opentelemetry/semantic-conventions": "1.24.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs": {
+      "version": "0.39.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.39.1.tgz",
+      "integrity": "sha512-/gmgKfZ1ZVFporKuwsewqIyvaUIGpv76JZ7lBpHQQPb37IMpaXO6pdqFI4ebHAWfNIm3akMyhmdtzivcgF3lgw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/resources": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.4.0 <1.5.0",
+        "@opentelemetry/api-logs": ">=0.38.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/resources": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.13.0.tgz",
+      "integrity": "sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-1.13.0.tgz",
+      "integrity": "sha512-MOjZX6AnSOqLliCcZUrb+DQKjAWXBiGeICGbHAGe5w0BB18PJIeIo995lO5JSaFfHpmUMgJButTPfJJD27W3Vg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/resources": "1.13.0",
+        "lodash.merge": "4.6.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics/node_modules/@opentelemetry/core": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-1.13.0.tgz",
+      "integrity": "sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics/node_modules/@opentelemetry/resources": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.13.0.tgz",
+      "integrity": "sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==",
+      "peer": true,
+      "dependencies": {
+        "@opentelemetry/core": "1.13.0",
+        "@opentelemetry/semantic-conventions": "1.13.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.5.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics/node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.13.0.tgz",
+      "integrity": "sha512-LMGqfSZkaMQXqewO0o1wvWr/2fQdCh4a3Sqlxka/UsJCe0cfLulh6x2aqnKLnsrSGiCq5rSCwvINd152i0nCqw==",
+      "peer": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.24.1.tgz",
+      "integrity": "sha512-zz+N423IcySgjihl2NfjBf0qw1RWe11XIAWVrTNOSSI6dtSPJiVom2zipFB2AEEtJWpv0Iz6DY6+TjnyTV5pWg==",
+      "dependencies": {
+        "@opentelemetry/core": "1.24.1",
+        "@opentelemetry/resources": "1.24.1",
+        "@opentelemetry/semantic-conventions": "1.24.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-node": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-node/-/sdk-trace-node-1.24.1.tgz",
+      "integrity": "sha512-/FZX8uWaGIAwsDhqI8VvQ+qWtfMNlXjaFYGc+vmxgdRFppCSSIRwrPyIhJO1qx61okyYhoyxVEZAfoiNxrfJCg==",
+      "dependencies": {
+        "@opentelemetry/context-async-hooks": "1.24.1",
+        "@opentelemetry/core": "1.24.1",
+        "@opentelemetry/propagator-b3": "1.24.1",
+        "@opentelemetry/propagator-jaeger": "1.24.1",
+        "@opentelemetry/sdk-trace-base": "1.24.1",
+        "semver": "^7.5.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.9.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-node/node_modules/semver": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
+      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.24.1.tgz",
+      "integrity": "sha512-VkliWlS4/+GHLLW7J/rVBA00uXus1SWvwFvcUDxDwmFxYfg/2VI6ekwdXS28cjI8Qz2ky2BzG8OUHo+WeYIWqw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "license": "MIT",
@@ -8653,6 +11330,60 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
+    },
     "node_modules/@radix-ui/colors": {
       "version": "0.1.9",
       "license": "MIT"
@@ -8701,6 +11432,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
+      "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.0.3",
       "license": "MIT",
@@ -9605,7 +12364,6 @@
     },
     "node_modules/@radix-ui/react-toggle-group": {
       "version": "1.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
@@ -10995,6 +13753,31 @@
       "version": "1.0.0",
       "license": "MIT"
     },
+    "node_modules/@shikijs/compat": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/compat/-/compat-1.6.0.tgz",
+      "integrity": "sha512-aiyhzBiQnUx2y327pYUneOFznNzGhE74pawWzzxpR8XhtBvia4G6HS72vCqFxfSN1fsKWr+59tMUn8ckbuATbg==",
+      "dev": true,
+      "dependencies": {
+        "@shikijs/core": "1.6.0",
+        "@shikijs/transformers": "1.6.0",
+        "shiki": "1.6.0"
+      }
+    },
+    "node_modules/@shikijs/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-NIEAi5U5R7BLkbW1pG/ZKu3eb1lzc3/+jD0lFsuxMT7zjaf9bbNwdNyMr7zh/Zl8EXQtQ+MYBAt5G+JLu+5DlA=="
+    },
+    "node_modules/@shikijs/transformers": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-1.6.0.tgz",
+      "integrity": "sha512-qGfHe1ECiqfE2STPWvfogIj/9Q0SK+MCRJdoITkW7AmFuB7DmbFnBT2US84+zklJOB51MzNO8RUXZiauWssJlQ==",
+      "dev": true,
+      "dependencies": {
+        "shiki": "1.6.0"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "dev": true,
@@ -16438,6 +19221,53 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/@ts-morph/common": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.23.0.tgz",
+      "integrity": "sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==",
+      "dependencies": {
+        "fast-glob": "^3.3.2",
+        "minimatch": "^9.0.3",
+        "mkdirp": "^3.0.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/minimatch": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
+      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@ts-morph/common/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "license": "MIT",
@@ -16482,7 +19312,6 @@
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.20.7",
@@ -16494,7 +19323,6 @@
     },
     "node_modules/@types/babel__generator": {
       "version": "7.6.5",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.0.0"
@@ -16502,7 +19330,6 @@
     },
     "node_modules/@types/babel__template": {
       "version": "7.4.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.1.0",
@@ -16511,7 +19338,6 @@
     },
     "node_modules/@types/babel__traverse": {
       "version": "7.20.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.20.7"
@@ -16874,6 +19700,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/extend": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/extend/-/extend-3.0.4.tgz",
+      "integrity": "sha512-ArMouDUTJEz1SQRpFsT2rIw7DeqICFv5aaVzLSIYMYQSLcwcGOfT3VyglQs/p7K3F7fT4zxr0NWxYZIdifD6dA==",
+      "dev": true
+    },
     "node_modules/@types/file-saver": {
       "version": "2.0.5",
       "dev": true,
@@ -17042,6 +19874,15 @@
       "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
+    "node_modules/@types/lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@types/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-4LgHxK16IPbGR7TmXpPvNT7iNGsLCdQY6Rc0mi1a/JECt8et/D4hx6NMVAJej/d932sj1mJsg0QYHKL189O0Qw==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/markdown-table": {
       "version": "3.0.0",
       "dev": true,
@@ -17153,12 +19994,11 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.2.39",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
-      "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
+      "version": "18.3.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.2.tgz",
+      "integrity": "sha512-Btgg89dAnqD4vV7R3hlwOxgqobUQKgx3MmrQRi0yYbs/P0ym8XozIAlkqVilPqHQwXs4e9Tf63rrCgl58BcO4w==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -17198,9 +20038,9 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
-      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
       "dependencies": {
         "@types/react": "*"
@@ -17328,12 +20168,7 @@
     "node_modules/@types/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
-      "integrity": "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==",
-      "dev": true
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.4",
-      "license": "MIT"
+      "integrity": "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ=="
     },
     "node_modules/@types/semver": {
       "version": "7.5.3",
@@ -18469,7 +21304,6 @@
     },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-convert": "^1.9.0"
@@ -18480,7 +21314,6 @@
     },
     "node_modules/ansi-styles/node_modules/color-convert": {
       "version": "1.9.3",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
@@ -18488,7 +21321,6 @@
     },
     "node_modules/ansi-styles/node_modules/color-name": {
       "version": "1.1.3",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/ansi-truncate": {
@@ -18609,11 +21441,15 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18641,6 +21477,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-timsort": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-timsort/-/array-timsort-1.0.3.tgz",
+      "integrity": "sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ=="
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "license": "MIT",
@@ -18648,6 +21489,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.findlastindex": {
       "version": "1.2.3",
       "license": "MIT",
@@ -18697,27 +21558,42 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.tosorted": {
+    "node_modules/array.prototype.toreversed": {
       "version": "1.1.2",
-      "license": "MIT",
+      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
+      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
         "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
+      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.1.0",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "license": "MIT",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -18806,13 +21682,6 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
-    "node_modules/asynciterator.prototype": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      }
-    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "license": "MIT"
@@ -18870,8 +21739,12 @@
       }
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -19999,11 +22872,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -20024,7 +22904,6 @@
     },
     "node_modules/camel-case": {
       "version": "4.1.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pascal-case": "^3.1.2",
@@ -20120,7 +22999,6 @@
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
@@ -20397,6 +23275,17 @@
       "version": "0.0.1",
       "license": "MIT"
     },
+    "node_modules/clipanion": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/clipanion/-/clipanion-3.2.1.tgz",
+      "integrity": "sha512-dYFdjLb7y1ajfxQopN05mylEpK9ZX0sO1/RfMXdfmwjlIsPkbh4p7A682x++zFPLDCo1x3p82dtljHf5cW2LKA==",
+      "dependencies": {
+        "typanion": "^3.8.0"
+      },
+      "peerDependencies": {
+        "typanion": "*"
+      }
+    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "dev": true,
@@ -20750,6 +23639,11 @@
         "phenomenon": "^1.6.0"
       }
     },
+    "node_modules/code-block-writer": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.1.tgz",
+      "integrity": "sha512-c5or4P6erEA69TxaxTNcHUNcIn+oyxSRTOWV+pSYF+z4epXqNvwvJ70XPGjPNgue83oAFAPBRQYwpAJ/Hpe/Sg=="
+    },
     "node_modules/code-red": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
@@ -20798,6 +23692,15 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/collapse-white-space": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.2",
       "dev": true,
@@ -20882,6 +23785,21 @@
         "node": ">= 10"
       }
     },
+    "node_modules/comment-json": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/comment-json/-/comment-json-4.2.3.tgz",
+      "integrity": "sha512-SsxdiOf064DWoZLH799Ata6u7iV658A11PlWtZATDlXPpKGJnbJZ5Z24ybixAi+LUUqJ/GKowAejtC5GFUG7Tw==",
+      "dependencies": {
+        "array-timsort": "^1.0.3",
+        "core-util-is": "^1.0.3",
+        "esprima": "^4.0.1",
+        "has-own-prop": "^2.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/common": {
       "resolved": "packages/common",
       "link": true
@@ -21088,9 +24006,28 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/contentlayer2": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/contentlayer2/-/contentlayer2-0.4.5.tgz",
+      "integrity": "sha512-2aZym6MRX1v31ASkBLog4Aodhus/DwMvMcq3JHjPpnwYn7KHNV2gZ7U6RmVNs1OIg9IQWdkhSajzuL5pNaZgHw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@contentlayer2/cli": "0.4.2",
+        "@contentlayer2/client": "0.4.2",
+        "@contentlayer2/core": "0.4.2",
+        "@contentlayer2/source-files": "0.4.2",
+        "@contentlayer2/source-remote-files": "0.4.2",
+        "@contentlayer2/utils": "0.4.2"
+      },
+      "bin": {
+        "contentlayer2": "bin/cli.cjs"
+      },
+      "engines": {
+        "node": ">=14.18"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/cookie": {
@@ -22097,6 +25034,54 @@
         "node": ">=12"
       }
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/database-design": {
       "resolved": "apps/database-new",
       "link": true
@@ -22315,15 +25300,19 @@
       }
     },
     "node_modules/define-data-property": {
-      "version": "1.1.0",
-      "license": "MIT",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-lazy-prop": {
@@ -22433,6 +25422,10 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/design-system": {
+      "resolved": "apps/design-system",
+      "link": true
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "dev": true,
@@ -22994,48 +25987,56 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.2",
-      "license": "MIT",
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-set-tostringtag": "^2.0.1",
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.1",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.3",
+        "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
-        "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -23044,6 +26045,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "dev": true,
@@ -23069,23 +26089,27 @@
       "license": "MIT"
     },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.15",
-      "license": "MIT",
+      "version": "1.0.19",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz",
+      "integrity": "sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==",
       "dependencies": {
-        "asynciterator.prototype": "^1.0.0",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.1",
-        "es-set-tostringtag": "^2.0.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
+        "internal-slot": "^1.0.7",
         "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.0.1"
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-module-lexer": {
@@ -23093,23 +26117,36 @@
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
       "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
     },
-    "node_modules/es-set-tostringtag": {
-      "version": "2.0.1",
-      "license": "MIT",
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
       "dependencies": {
-        "get-intrinsic": "^1.1.3",
-        "has": "^1.0.3",
-        "has-tostringtag": "^1.0.0"
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       }
     },
     "node_modules/es-to-primitive": {
@@ -23135,7 +26172,6 @@
     },
     "node_modules/esbuild": {
       "version": "0.18.20",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -23193,7 +26229,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -23209,7 +26244,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -23225,7 +26259,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -23241,7 +26274,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -23257,7 +26289,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -23273,7 +26304,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -23289,7 +26319,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23305,7 +26334,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23321,7 +26349,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23337,7 +26364,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23353,7 +26379,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23369,7 +26394,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23385,7 +26409,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23401,7 +26424,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23417,7 +26439,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -23433,7 +26454,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -23449,7 +26469,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -23465,7 +26484,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -23481,7 +26499,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -23497,7 +26514,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -23513,7 +26529,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -23536,7 +26551,6 @@
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
@@ -24166,6 +27180,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.1.1.tgz",
+      "integrity": "sha512-5mvUrF2suuv5f5cGDnDphIy4/gW86z82kl5qG6mM9z04SEQI4FB5Apmaw/TGEf3l55nLtMs5s51dmhUzvAHQCA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "is-plain-obj": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
     "node_modules/estree-util-visit": {
       "version": "1.2.1",
       "license": "MIT",
@@ -25165,6 +28191,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "license": "MIT"
@@ -25208,7 +28239,6 @@
     },
     "node_modules/fs-monkey": {
       "version": "1.0.5",
-      "dev": true,
       "license": "Unlicense"
     },
     "node_modules/fs.realpath": {
@@ -25227,8 +28257,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "license": "MIT"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.6",
@@ -25325,7 +28359,6 @@
     },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -25333,7 +28366,6 @@
     },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
@@ -25358,13 +28390,18 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.1",
-      "license": "MIT",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3"
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -25434,11 +28471,13 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -25542,7 +28581,6 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -25739,25 +28777,34 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/has-own-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-own-prop/-/has-own-prop-2.0.0.tgz",
+      "integrity": "sha512-Pq0h+hvsVm6dDEa8x82GnLSYHOzNDt7f0ddFa3FqcQlgzEiptPqL+XrOJNavjOzSYiYWIrgeVYYgGlLmnxwilQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "license": "MIT",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -25776,10 +28823,11 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -25849,6 +28897,38 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/hash-obj": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hash-obj/-/hash-obj-4.0.0.tgz",
+      "integrity": "sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==",
+      "dependencies": {
+        "is-obj": "^3.0.0",
+        "sort-keys": "^5.0.0",
+        "type-fest": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hash-obj/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hash-wasm": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.11.0.tgz",
+      "integrity": "sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ=="
+    },
     "node_modules/hash.js": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
@@ -25859,6 +28939,17 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/hast-util-from-dom": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.0.tgz",
@@ -27219,6 +30310,14 @@
         "node": ">=16.x"
       }
     },
+    "node_modules/imagescript": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/imagescript/-/imagescript-1.3.0.tgz",
+      "integrity": "sha512-lCYzQrWzdnA68K03oMj/BUlBJrVBnslzDOgGFymAp49NmdGEJxGeN7sHh5mCva0nQkq+kkKSuru2zLf1m04+3A==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
@@ -27362,6 +30461,14 @@
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
       "dev": true
     },
+    "node_modules/inflection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.0.tgz",
+      "integrity": "sha512-1zEJU1l19SgJlmwqsEyFTbScw/tkMHFenUo//Y0i+XEP83gDFdMvPizAD/WGcE+l1ku12PcTVHQhO6g5E0UCMw==",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "license": "ISC",
@@ -27409,11 +30516,12 @@
       }
     },
     "node_modules/internal-slot": {
-      "version": "1.0.5",
-      "license": "MIT",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dependencies": {
-        "get-intrinsic": "^1.2.0",
-        "has": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
       "engines": {
@@ -27522,12 +30630,15 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "license": "MIT",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -27609,6 +30720,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "license": "MIT",
@@ -27773,8 +30898,9 @@
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "license": "MIT",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -27815,6 +30941,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz",
+      "integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -27889,10 +31026,14 @@
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "license": "MIT",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -27936,10 +31077,11 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "license": "MIT",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -29902,6 +33044,26 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jotai": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.8.1.tgz",
+      "integrity": "sha512-Gmk5Y3yJL/vN5S0rQ6AaWpXH5Q+HBGHThMHXfylVzXGVuO8YxPRtZf8Y9XYvl+h7ZMQXoHNdFi37vNsJFsiszQ==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/js-cookie": {
       "version": "2.2.1",
       "license": "MIT"
@@ -29947,6 +33109,11 @@
         "un-eval": "^1.2.0"
       }
     },
+    "node_modules/jsbi": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/jsbi/-/jsbi-4.3.0.tgz",
+      "integrity": "sha512-SnZNcinB4RIcnEyZqFPdGPVgrg2AcnykiBy0sHVJQKHYeaLUvi3Exj+iaPpLnFVkDPZIV4U0yvgC9/R4uEAZ9g=="
+    },
     "node_modules/jsbn": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz",
@@ -30107,7 +33274,6 @@
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -30163,7 +33329,6 @@
     },
     "node_modules/json5": {
       "version": "2.2.3",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "json5": "lib/cli.js"
@@ -30578,6 +33743,11 @@
       "version": "3.0.0",
       "license": "MIT"
     },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA=="
+    },
     "node_modules/lodash.castarray": {
       "version": "4.4.0",
       "license": "MIT"
@@ -30720,6 +33890,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/long": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
+      "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q=="
+    },
     "node_modules/longest-streak": {
       "version": "3.1.0",
       "license": "MIT",
@@ -30749,7 +33924,6 @@
     },
     "node_modules/lower-case": {
       "version": "2.0.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.0.3"
@@ -30771,7 +33945,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
       "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
-      "dev": true,
       "dependencies": {
         "yallist": "^3.0.2"
       }
@@ -30942,6 +34115,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-wasm": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/markdown-wasm/-/markdown-wasm-1.2.0.tgz",
+      "integrity": "sha512-S12OTkyXCkOgI1n1rZY9cg4bK/PGu80Emjpvwp8BEjwCxhPV3yddF0U6+QhCitdBsI1tzWcoeahmW7k0Pq81OA=="
+    },
     "node_modules/marked": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
@@ -31472,6 +34650,151 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-frontmatter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-2.0.1.tgz",
+      "integrity": "sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-extension-frontmatter": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-gfm": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
@@ -32688,6 +36011,47 @@
         "@types/unist": "^2"
       }
     },
+    "node_modules/mdast-util-toc": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-6.1.1.tgz",
+      "integrity": "sha512-Er21728Kow8hehecK2GZtb7Ny3omcoPUVrmObiSUwmoRYVZaXLR751QROEFjR8W/vAQdHMLj49Lz20J55XaNpw==",
+      "dev": true,
+      "dependencies": {
+        "@types/extend": "^3.0.0",
+        "@types/mdast": "^3.0.0",
+        "extend": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "mdast-util-to-string": "^3.1.0",
+        "unist-util-is": "^5.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/@types/mdast": {
+      "version": "3.0.15",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
+      "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/mdast-util-toc/node_modules/unist-util-is": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz",
+      "integrity": "sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==",
+      "dev": true,
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -32697,6 +36061,60 @@
       "version": "1.0.1",
       "license": "MIT"
     },
+    "node_modules/mdx-bundler": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/mdx-bundler/-/mdx-bundler-10.0.2.tgz",
+      "integrity": "sha512-0wF0zoCv+Ms4G+eSlk/jaKYoJHc0oXBaOma3kYlFJiKq9H8h41Dd66ioDBGF4noy80Pf7KTBQlyHfEpTqVml7A==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@esbuild-plugins/node-resolve": "^0.2.2",
+        "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+        "@mdx-js/esbuild": "^3.0.0",
+        "gray-matter": "^4.0.3",
+        "remark-frontmatter": "^5.0.0",
+        "remark-mdx-frontmatter": "^4.0.0",
+        "uuid": "^9.0.1",
+        "vfile": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=18",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "esbuild": "0.*"
+      }
+    },
+    "node_modules/mdx-bundler/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/mdx-bundler/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdx-bundler/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -32707,9 +36125,10 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.5.3",
-      "dev": true,
-      "license": "Unlicense",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.6.0.tgz",
+      "integrity": "sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==",
+      "deprecated": "this will be v4",
       "dependencies": {
         "fs-monkey": "^1.0.4"
       },
@@ -32942,6 +36361,48 @@
       ],
       "license": "MIT"
     },
+    "node_modules/micromark-extension-frontmatter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-2.0.0.tgz",
+      "integrity": "sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==",
+      "dependencies": {
+        "fault": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-frontmatter/node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-frontmatter/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
     "node_modules/micromark-extension-gfm": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
@@ -34762,7 +38223,6 @@
     },
     "node_modules/min-indent": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -35237,6 +38697,21 @@
         }
       }
     },
+    "node_modules/next-contentlayer2": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/next-contentlayer2/-/next-contentlayer2-0.4.5.tgz",
+      "integrity": "sha512-QvsmQ/ETfnYOoSLvr2TU9hoRHwMZVQgnyB65Wzg+3SAWUqFBtIPTmn3CXsPAvbUKWvoYP7FQaMim5CJKJHseNg==",
+      "dependencies": {
+        "@contentlayer2/core": "0.4.2",
+        "@contentlayer2/utils": "0.4.2"
+      },
+      "peerDependencies": {
+        "contentlayer2": "0.4.5",
+        "next": "^12 || ^13 || ^14",
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/next-mdx-remote": {
       "version": "4.4.1",
       "license": "MPL-2.0",
@@ -35317,7 +38792,6 @@
     },
     "node_modules/no-case": {
       "version": "3.0.4",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "lower-case": "^2.0.2",
@@ -36164,8 +39638,9 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.3",
-      "license": "MIT",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -36193,11 +39668,12 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "license": "MIT",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -36333,6 +39809,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oo-ascii-tree": {
+      "version": "1.98.0",
+      "resolved": "https://registry.npmjs.org/oo-ascii-tree/-/oo-ascii-tree-1.98.0.tgz",
+      "integrity": "sha512-+GE7ywhtS6MctbfcO+vZzqIxcFzucZCwmawcwCVo89DxQDakV1JFfFViTXG4A90UzTAsU4tQteGmwDtwOlOXLw==",
+      "engines": {
+        "node": ">= 14.17.0"
+      }
+    },
     "node_modules/open": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
@@ -36738,7 +40222,6 @@
     },
     "node_modules/pascal-case": {
       "version": "3.1.2",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "no-case": "^3.0.4",
@@ -36747,7 +40230,6 @@
     },
     "node_modules/path-browserify": {
       "version": "1.0.1",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-case": {
@@ -37556,6 +41038,14 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -38205,6 +41695,29 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/protobufjs": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.3.0.tgz",
+      "integrity": "sha512-YWD03n3shzV9ImZRX3ccbjqLxj7NokGN0V/ESiBV5xWqrommYHYiihuIyavq03pWSGqlyvYUFmfoMKd+1rPA/g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "dev": true,
@@ -39425,6 +42938,14 @@
         "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-wrap-balancer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-wrap-balancer/-/react-wrap-balancer-1.1.0.tgz",
+      "integrity": "sha512-EhF3jOZm5Fjx+Cx41e423qOv2c2aOvXAtym2OHqrGeMUnwERIyNsRBgnfT3plB170JmuYvts8K2KSPEIerKr5A==",
+      "peerDependencies": {
+        "react": ">=16.8.0 || ^17.0.0 || ^18"
+      }
+    },
     "node_modules/reactflow": {
       "version": "11.10.1",
       "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.1.tgz",
@@ -39893,12 +43414,14 @@
       "license": "MIT"
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "license": "MIT",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -39941,6 +43464,106 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/rehype-autolink-headings": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
+      "integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/rehype-autolink-headings/node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-autolink-headings/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-external-links": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz",
@@ -40058,6 +43681,39 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-pretty-code": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.6.0.tgz",
+      "integrity": "sha512-VfntYoWYOBVURXYDdB8p/E1sZTm2W5ry89fJyY94WJAo1jUH/5sVhDC7cX5PPnksMyW9PYMxRLNfjkBpSgJrzQ==",
+      "dependencies": {
+        "hash-obj": "^4.0.0",
+        "nanoid": "^4.0.0",
+        "parse-numeric-range": "^1.3.0"
+      },
+      "engines": {
+        "node": "^12.16.0 || >=13.2.0"
+      },
+      "peerDependencies": {
+        "shiki": "*"
+      }
+    },
+    "node_modules/rehype-pretty-code/node_modules/nanoid": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
+      "integrity": "sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
     "node_modules/rehype-slug": {
       "version": "5.1.0",
       "license": "MIT",
@@ -40075,6 +43731,77 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-stringify": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
+      "integrity": "sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-html": "^9.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify/node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/rehype-stringify/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/rehype-stringify/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-stringify/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/relateurl": {
       "version": "0.2.7",
       "dev": true,
@@ -40098,6 +43825,33 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-code-import": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/remark-code-import/-/remark-code-import-1.2.0.tgz",
+      "integrity": "sha512-fgwLruqlZbVOIhCJFjY+JDwPZhA4/eK3InJzN8Ox8UDdtudpG212JwtRj6la+lAzJU7JmSEyewZSukVZdknt3Q==",
+      "dependencies": {
+        "strip-indent": "^4.0.0",
+        "to-gatsby-remark-plugin": "^0.1.0",
+        "unist-util-visit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/remark-code-import/node_modules/strip-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
+      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+      "dependencies": {
+        "min-indent": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/remark-emoji": {
       "version": "3.1.2",
       "license": "MIT",
@@ -40225,6 +43979,70 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-frontmatter": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-5.0.0.tgz",
+      "integrity": "sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-frontmatter": "^2.0.0",
+        "micromark-extension-frontmatter": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-frontmatter/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/remark-frontmatter/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-frontmatter/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-frontmatter/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-gfm": {
       "version": "3.0.1",
       "license": "MIT",
@@ -40768,6 +44586,85 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-mdx-frontmatter": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-mdx-frontmatter/-/remark-mdx-frontmatter-4.0.0.tgz",
+      "integrity": "sha512-PZzAiDGOEfv1Ua7exQ8S5kKxkD8CDaSb4nM+1Mprs6u8dyvQifakh+kCj6NovfGXW+bTvrhjaR3srzjS2qJHKg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-value-to-estree": "^3.0.0",
+        "toml": "^3.0.0",
+        "unified": "^11.0.0",
+        "yaml": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/toml": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
+      "integrity": "sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w=="
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx-frontmatter/node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "10.0.2",
       "license": "MIT",
@@ -41191,7 +45088,6 @@
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -41440,11 +45336,12 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.1",
-      "license": "MIT",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -41457,20 +45354,25 @@
     },
     "node_modules/safe-array-concat/node_modules/isarray": {
       "version": "2.0.5",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
     },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "license": "MIT"
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -41692,6 +45594,22 @@
       "version": "2.0.0",
       "license": "ISC"
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-function-name": {
       "version": "2.0.1",
       "license": "MIT",
@@ -41905,6 +45823,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/shiki": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.6.0.tgz",
+      "integrity": "sha512-P31ROeXcVgW/k3Z+vUUErcxoTah7ZRaimctOpzGuqAntqnnSmx1HOsvnbAB8Z2qfXPRhw61yptAzCsuKOhTHwQ==",
+      "dependencies": {
+        "@shikijs/core": "1.6.0"
+      }
+    },
     "node_modules/should": {
       "version": "13.2.3",
       "resolved": "https://registry.npmjs.org/should/-/should-13.2.3.tgz",
@@ -42225,6 +46151,20 @@
         "swr-store": "^0.10"
       }
     },
+    "node_modules/sort-keys": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-5.0.0.tgz",
+      "integrity": "sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==",
+      "dependencies": {
+        "is-plain-obj": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "license": "BSD-3-Clause",
@@ -42759,12 +46699,14 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "license": "MIT",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -42774,24 +46716,29 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.7",
-      "license": "MIT",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "license": "MIT",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -43261,7 +47208,6 @@
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
@@ -44265,12 +48211,19 @@
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
+    "node_modules/to-gatsby-remark-plugin": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/to-gatsby-remark-plugin/-/to-gatsby-remark-plugin-0.1.0.tgz",
+      "integrity": "sha512-blmhJ/gIrytWnWLgPSRCkhCPeki6UBK2daa3k9mGahN7GjwHu8KrS7F70MvwlsG7IE794JLgwAdCbi4hU4faFQ==",
+      "dependencies": {
+        "to-vfile": "^6.1.0"
+      }
+    },
     "node_modules/to-object-path": {
       "version": "0.3.0",
       "license": "MIT",
@@ -44308,6 +48261,81 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/to-vfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/to-vfile/-/to-vfile-6.1.0.tgz",
+      "integrity": "sha512-BxX8EkCxOAZe+D/ToHdDsJcVI4HqQfmw0tCkp31zf3dNP/XWIAjU4CmeuSwsSoOzOTqHPOL0KUzyZqJplkD0Qw==",
+      "dependencies": {
+        "is-buffer": "^2.0.0",
+        "vfile": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/to-vfile/node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-vfile/node_modules/unist-util-stringify-position": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+      "integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+      "dependencies": {
+        "@types/unist": "^2.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/to-vfile/node_modules/vfile": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.2.1.tgz",
+      "integrity": "sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "is-buffer": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0",
+        "vfile-message": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/to-vfile/node_modules/vfile-message": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "unist-util-stringify-position": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/tocbot": {
       "version": "4.22.0",
       "dev": true,
@@ -44507,6 +48535,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/ts-morph": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-22.0.0.tgz",
+      "integrity": "sha512-M9MqFGZREyeb5fTl6gNHKZLqBQA0TjA1lea+CR48R8EBTDuWrNqW6ccC5QvjNR4s6wDumD3LTCjOFSp9iwlzaw==",
+      "dependencies": {
+        "@ts-morph/common": "~0.23.0",
+        "code-block-writer": "^13.0.1"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.1",
       "license": "MIT",
@@ -44556,6 +48593,11 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/ts-pattern": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.1.1.tgz",
+      "integrity": "sha512-i+owkHr5RYdQxj8olUgRrqpiWH9x27PuWVfXwDmJ/n/CoF/SAa7WW1i2oUpPDMQpJ4U+bGRUcZkVq7i1m3zFCg=="
+    },
     "node_modules/ts-pnp": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.2.0.tgz",
@@ -44890,6 +48932,11 @@
         "win32"
       ]
     },
+    "node_modules/typanion": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/typanion/-/typanion-3.14.0.tgz",
+      "integrity": "sha512-ZW/lVMRabETuYCd9O9ZvMhAh8GslSqaUjxmK/JLPCh6l73CvLBiuXswj/+7LdnWOgYsQ130FqLzFz5aGT4I3Ug=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "license": "MIT",
@@ -44932,25 +48979,28 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -44960,14 +49010,16 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "license": "MIT",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -44977,12 +49029,19 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "license": "MIT",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -45746,6 +49805,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vaul": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.1.tgz",
+      "integrity": "sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/verror": {
       "version": "1.10.1",
       "license": "MIT",
@@ -47239,14 +51310,15 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.11",
-      "license": "MIT",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -47501,7 +51573,6 @@
     },
     "node_modules/y18n": {
       "version": "5.0.8",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=10"
@@ -47510,8 +51581,7 @@
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
       "version": "2.3.2",
@@ -47545,7 +51615,6 @@
     },
     "node_modules/yargs-parser": {
       "version": "21.1.1",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=12"
@@ -48026,6 +52095,7 @@
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-toggle": "^1.0.3",
+        "@radix-ui/react-toggle-group": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@tailwindcss/forms": "^0.5.0",
         "@tailwindcss/typography": "^0.5.9",
@@ -48065,6 +52135,7 @@
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.6",
         "tailwindcss-radix": "^2.0.0",
+        "vaul": "^0.9.1",
         "yup": "^1.4.0",
         "zod": "^3.22.3"
       },
@@ -48414,33 +52485,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "packages/ui/node_modules/@radix-ui/react-alert-dialog": {
-      "version": "1.0.5",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dialog": "1.0.5",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "packages/ui/node_modules/@radix-ui/react-avatar": {
       "version": "1.0.4",
       "license": "MIT",
diff --git a/packages/build-icons/src/building/generateIconFiles.mjs b/packages/build-icons/src/building/generateIconFiles.mjs
index 7b0336487f..baaebedd2a 100644
--- a/packages/build-icons/src/building/generateIconFiles.mjs
+++ b/packages/build-icons/src/building/generateIconFiles.mjs
@@ -11,6 +11,15 @@ export default ({
   iconFileExtension = '.js',
   pretty = true,
   iconsDir,
+
+  // TO DO -- START
+  //
+  // move this to ./build-registry in design-system
+  // with all the other build scripts
+  // @mildtomato
+  registryDir,
+  // TO DO -- END
+
   iconMetaData,
 }) => {
   const icons = Object.keys(iconNodes)
@@ -20,7 +29,22 @@ export default ({
     fs.mkdirSync(iconsDistDirectory)
   }
 
-  const writeIconFiles = icons.map(async (iconName) => {
+  // TO DO -- START
+  //
+  // move this to ./build-registry in design-system
+  // with all the other build scripts
+  // @mildtomato
+  let registryIndex = `// @ts-nocheck
+// This file is autogenerated by icons-build/src/building/generateIconFiles.mjs
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = [`
+  // TO DO -- END
+
+  const registryOutput = path.join(registryDir, 'index.tsx')
+
+  const writeIconFiles = icons.map(async (iconName, i) => {
     const location = path.join(iconsDistDirectory, `${iconName}${iconFileExtension}`)
 
     const componentName = toPascalCase(iconName)
@@ -42,10 +66,61 @@ export default ({
         })
       : elementTemplate
 
+    const rawSvg = JSON.stringify(readSvg(`${iconName}.svg`, iconsDir))
+
+    // TO DO -- START
+    //
+    // move this to ./build-registry in design-system
+    // with all the other build scripts
+    // @mildtomato
+    registryIndex += `\n{`
+    registryIndex += `
+  name: "${iconName}",
+  componentName: "${componentName}",
+  deprecated: ${deprecated},
+  raw: ${JSON.stringify(output)},
+  component: React.lazy(() => import('icons/src/icons/${iconName}')),
+  import: "import { ${componentName} } from 'icons'",
+  svg: ${JSON.stringify(readSvg(`${iconName}.svg`, iconsDir))},
+  jsx: ${JSON.stringify(`import { ${componentName} } from "icons"
+  <${componentName}/>
+  `)}`
+    if (i !== icons.length - 1) {
+      registryIndex += `\n},`
+    }
+    // TO DO -- END
+
+    console.log('Created ' + componentName)
     await fs.promises.writeFile(location, output, 'utf-8')
   })
 
-  Promise.all(writeIconFiles)
+  // TO DO -- START
+  //
+  // move this to ./build-registry in design-system
+  // with all the other build scripts
+  // @mildtomato
+  async function writeRegistry() {
+    console.log(registryIndex)
+
+    registryIndex += `\n}`
+    // close index
+    registryIndex += `\n]`
+
+    await fs.promises.writeFile(registryOutput, registryIndex, 'utf-8')
+    console.log('Successfully created registry at', registryOutput)
+  }
+  // TO DO -- END
+
+  Promise.all([writeIconFiles])
+
+    // TO DO -- START
+    //
+    // move this to ./build-registry in design-system
+    // with all the other build scripts
+    // @mildtomato
+    .then(() => writeRegistry())
+    // TO DO -- END
+
     .then(() => {
       if (showLog) {
         console.log('Successfully built', icons.length, 'icons.')
diff --git a/packages/build-icons/src/main.mjs b/packages/build-icons/src/main.mjs
index 701eb0a8d9..163695d759 100755
--- a/packages/build-icons/src/main.mjs
+++ b/packages/build-icons/src/main.mjs
@@ -16,6 +16,7 @@ const cliArguments = getArgumentOptions(process.argv.slice(2))
 
 const ICONS_DIR = path.resolve(process.cwd(), 'src/raw-icons')
 const OUTPUT_DIR = path.resolve(process.cwd(), cliArguments.output || 'src')
+const REGISTRY_DIR = path.resolve(process.cwd(), cliArguments.registryOutput || '__registry__')
 
 if (!fs.existsSync(OUTPUT_DIR)) {
   fs.mkdirSync(OUTPUT_DIR)
@@ -59,6 +60,7 @@ async function buildIcons() {
     pretty: JSON.parse(pretty),
     iconsDir: ICONS_DIR,
     iconMetaData,
+    registryDir: REGISTRY_DIR,
   })
 
   if (withAliases) {
diff --git a/packages/config/tailwind.config.js b/packages/config/tailwind.config.js
index b28d648faf..50803243ff 100644
--- a/packages/config/tailwind.config.js
+++ b/packages/config/tailwind.config.js
@@ -372,10 +372,20 @@ const uiConfig = ui({
           '0%': { backgroundColor: 'rgba(63, 207, 142, 0.1)' },
           '100%': { backgroundColor: 'transparent' },
         },
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
       },
       animation: {
         'flash-code': 'flash-code 1s forwards',
         'flash-code-slow': 'flash-code 2s forwards',
+        'accordion-down': 'accordion-down 0.15s ease-out',
+        'accordion-up': 'accordion-up 0.15s ease-out',
       },
       borderRadius: {
         // lg: `var(--radius)`,
@@ -394,16 +404,6 @@ const uiConfig = ui({
       // fontFamily: {
       //   sans: ['var(--font-sans)', ...fontFamily.sans],
       // },
-      keyframes: {
-        'accordion-down': {
-          from: { height: 0 },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: 0 },
-        },
-      },
       // shadcn defaults END
     },
   },
diff --git a/packages/config/ui.config.js b/packages/config/ui.config.js
index 4988063a72..74231fea59 100644
--- a/packages/config/ui.config.js
+++ b/packages/config/ui.config.js
@@ -320,12 +320,12 @@ const uiConfig = {
         ".dropdown-content[data-state='closed']": {
           animation: 'fadeOut 50ms ease-in',
         },
-        "[data-state='open'] .accordion-content-animation": {
-          animation: 'slideDown 200ms ease-out',
-        },
-        "[data-state='closed'] .accordion-content-animation": {
-          animation: 'slideUp 200ms ease-in',
-        },
+        // "[data-state='open'] .accordion-content-animation": {
+        //   animation: 'slideDown 200ms ease-out',
+        // }
+        // "[data-state='closed'] .accordion-content-animation": {
+        //   animation: 'slideUp 200ms ease-in',
+        // },
         '.text-code': {
           margin: '0 0.2em',
           padding: '0.2em 0.4em 0.1em',
diff --git a/packages/icons/__registry__/index.tsx b/packages/icons/__registry__/index.tsx
new file mode 100644
index 0000000000..7dc292a125
--- /dev/null
+++ b/packages/icons/__registry__/index.tsx
@@ -0,0 +1,197 @@
+// @ts-nocheck
+// This file is autogenerated by icons-build/src/building/generateIconFiles.mjs
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Index: Record<string, any> = [
+{
+  name: "REST-api",
+  componentName: "RESTApi",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name RESTApi\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0zLjIwOTQ3IDEyLjEwNTJDMy4yMDk0NyAxMy40NDAzIDMuNTA3MTUgMTQuNzA2IDQuMDM5NzcgMTUuODM5NE0xMS45OTk3IDMuMzE0OTRDMTAuNjM5MSAzLjMxNDk0IDkuMzUwNjYgMy42MjQwOCA4LjIwMDg1IDQuMTc1OTRNMjAuNzg5OSAxMi4xMDUyQzIwLjc4OTkgMTAuNzU2NiAyMC40ODYyIDkuNDc4OTggMTkuOTQzNSA4LjMzNjk0TTExLjk5OTcgMjAuODk1NEMxMy4zNTc2IDIwLjg5NTQgMTQuNjQzNiAyMC41ODc1IDE1Ljc5MTcgMjAuMDM3N00xNS43OTE3IDIwLjAzNzdDMTYuMzMzNCAyMC44MTggMTcuMjM2IDIxLjMyODkgMTguMjU3OCAyMS4zMjg5QzE5LjkxNDcgMjEuMzI4OSAyMS4yNTc4IDE5Ljk4NTcgMjEuMjU3OCAxOC4zMjg5QzIxLjI1NzggMTYuNjcyIDE5LjkxNDcgMTUuMzI4OSAxOC4yNTc4IDE1LjMyODlDMTYuNjAxIDE1LjMyODkgMTUuMjU3OCAxNi42NzIgMTUuMjU3OCAxOC4zMjg5QzE1LjI1NzggMTguOTYzOSAxNS40NTUxIDE5LjU1MjggMTUuNzkxNyAyMC4wMzc3Wk00LjAzOTc3IDE1LjgzOTRDMy4yNDAyMiAxNi4zNzgyIDIuNzE0MzYgMTcuMjkyMSAyLjcxNDM2IDE4LjMyODlDMi43MTQzNiAxOS45ODU3IDQuMDU3NSAyMS4zMjg5IDUuNzE0MzYgMjEuMzI4OUM3LjM3MTIxIDIxLjMyODkgOC43MTQzNiAxOS45ODU3IDguNzE0MzYgMTguMzI4OUM4LjcxNDM2IDE2LjY3MiA3LjM3MTIxIDE1LjMyODkgNS43MTQzNiAxNS4zMjg5QzUuMDk0MjIgMTUuMzI4OSA0LjUxODAzIDE1LjUxNyA0LjAzOTc3IDE1LjgzOTRaTTguMjAwODUgNC4xNzU5NEM3LjY2MTU4IDMuMzc4OSA2Ljc0OTE1IDIuODU0OTggNS43MTQzNiAyLjg1NDk4QzQuMDU3NSAyLjg1NDk4IDIuNzE0MzYgNC4xOTgxMyAyLjcxNDM2IDUuODU0OThDMi43MTQzNiA3LjUxMTgzIDQuMDU3NSA4Ljg1NDk4IDUuNzE0MzYgOC44NTQ5OEM3LjM3MTIxIDguODU0OTggOC43MTQzNiA3LjUxMTgzIDguNzE0MzYgNS44NTQ5OEM4LjcxNDM2IDUuMjMyOTIgOC41MjUwMyA0LjY1NTA4IDguMjAwODUgNC4xNzU5NFpNMTkuOTQzNSA4LjMzNjk0QzIwLjczNjggNy43OTcwOSAyMS4yNTc4IDYuODg2ODggMjEuMjU3OCA1Ljg1NDk4QzIxLjI1NzggNC4xOTgxMyAxOS45MTQ3IDIuODU0OTggMTguMjU3OCAyLjg1NDk4QzE2LjYwMSAyLjg1NDk4IDE1LjI1NzggNC4xOTgxMyAxNS4yNTc4IDUuODU0OThDMTUuMjU3OCA3LjUxMTgzIDE2LjYwMSA4Ljg1NDk4IDE4LjI1NzggOC44NTQ5OEMxOC44ODI4IDguODU0OTggMTkuNDYzMSA4LjY2Mzg4IDE5Ljk0MzUgOC4zMzY5NFoiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst RESTApi = createSupabaseIcon('RESTApi', [\n  [\n    'path',\n    {\n      d: 'M3.20947 12.1052C3.20947 13.4403 3.50715 14.706 4.03977 15.8394M11.9997 3.31494C10.6391 3.31494 9.35066 3.62408 8.20085 4.17594M20.7899 12.1052C20.7899 10.7566 20.4862 9.47898 19.9435 8.33694M11.9997 20.8954C13.3576 20.8954 14.6436 20.5875 15.7917 20.0377M15.7917 20.0377C16.3334 20.818 17.236 21.3289 18.2578 21.3289C19.9147 21.3289 21.2578 19.9857 21.2578 18.3289C21.2578 16.672 19.9147 15.3289 18.2578 15.3289C16.601 15.3289 15.2578 16.672 15.2578 18.3289C15.2578 18.9639 15.4551 19.5528 15.7917 20.0377ZM4.03977 15.8394C3.24022 16.3782 2.71436 17.2921 2.71436 18.3289C2.71436 19.9857 4.0575 21.3289 5.71436 21.3289C7.37121 21.3289 8.71436 19.9857 8.71436 18.3289C8.71436 16.672 7.37121 15.3289 5.71436 15.3289C5.09422 15.3289 4.51803 15.517 4.03977 15.8394ZM8.20085 4.17594C7.66158 3.3789 6.74915 2.85498 5.71436 2.85498C4.0575 2.85498 2.71436 4.19813 2.71436 5.85498C2.71436 7.51183 4.0575 8.85498 5.71436 8.85498C7.37121 8.85498 8.71436 7.51183 8.71436 5.85498C8.71436 5.23292 8.52503 4.65508 8.20085 4.17594ZM19.9435 8.33694C20.7368 7.79709 21.2578 6.88688 21.2578 5.85498C21.2578 4.19813 19.9147 2.85498 18.2578 2.85498C16.601 2.85498 15.2578 4.19813 15.2578 5.85498C15.2578 7.51183 16.601 8.85498 18.2578 8.85498C18.8828 8.85498 19.4631 8.66388 19.9435 8.33694Z',\n      key: 'xusdjk',\n    },\n  ],\n]);\n\nexport default RESTApi;\n",
+  component: React.lazy(() => import('icons/src/icons/REST-api')),
+  import: "import { RESTApi } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M3.20947 12.1052C3.20947 13.4403 3.50715 14.706 4.03977 15.8394M11.9997 3.31494C10.6391 3.31494 9.35066 3.62408 8.20085 4.17594M20.7899 12.1052C20.7899 10.7566 20.4862 9.47898 19.9435 8.33694M11.9997 20.8954C13.3576 20.8954 14.6436 20.5875 15.7917 20.0377M15.7917 20.0377C16.3334 20.818 17.236 21.3289 18.2578 21.3289C19.9147 21.3289 21.2578 19.9857 21.2578 18.3289C21.2578 16.672 19.9147 15.3289 18.2578 15.3289C16.601 15.3289 15.2578 16.672 15.2578 18.3289C15.2578 18.9639 15.4551 19.5528 15.7917 20.0377ZM4.03977 15.8394C3.24022 16.3782 2.71436 17.2921 2.71436 18.3289C2.71436 19.9857 4.0575 21.3289 5.71436 21.3289C7.37121 21.3289 8.71436 19.9857 8.71436 18.3289C8.71436 16.672 7.37121 15.3289 5.71436 15.3289C5.09422 15.3289 4.51803 15.517 4.03977 15.8394ZM8.20085 4.17594C7.66158 3.3789 6.74915 2.85498 5.71436 2.85498C4.0575 2.85498 2.71436 4.19813 2.71436 5.85498C2.71436 7.51183 4.0575 8.85498 5.71436 8.85498C7.37121 8.85498 8.71436 7.51183 8.71436 5.85498C8.71436 5.23292 8.52503 4.65508 8.20085 4.17594ZM19.9435 8.33694C20.7368 7.79709 21.2578 6.88688 21.2578 5.85498C21.2578 4.19813 19.9147 2.85498 18.2578 2.85498C16.601 2.85498 15.2578 4.19813 15.2578 5.85498C15.2578 7.51183 16.601 8.85498 18.2578 8.85498C18.8828 8.85498 19.4631 8.66388 19.9435 8.33694Z\" />\n</svg>",
+  jsx: "import { RESTApi } from \"icons\"\n  <RESTApi/>\n  "
+},
+{
+  name: "_example-template",
+  componentName: "ExampleTemplate",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name ExampleTemplate\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMy41IDEzaDYiIC8+CiAgPHBhdGggZD0ibTIgMTYgNC41LTkgNC41IDkiIC8+CiAgPHBhdGggZD0iTTE4IDd2OSIgLz4KICA8cGF0aCBkPSJtMTQgMTIgNCA0IDQtNCIgLz4KPC9zdmc+)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst ExampleTemplate = createSupabaseIcon('ExampleTemplate', [\n  ['path', { d: 'M3.5 13h6', key: 'p1my2r' }],\n  ['path', { d: 'm2 16 4.5-9 4.5 9', key: 'ndf0b3' }],\n  ['path', { d: 'M18 7v9', key: 'pknjwm' }],\n  ['path', { d: 'm14 12 4 4 4-4', key: 'buelq4' }],\n]);\n\nexport default ExampleTemplate;\n",
+  component: React.lazy(() => import('icons/src/icons/_example-template')),
+  import: "import { ExampleTemplate } from 'icons'",
+  svg: "<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <path d=\"M3.5 13h6\" />\n  <path d=\"m2 16 4.5-9 4.5 9\" />\n  <path d=\"M18 7v9\" />\n  <path d=\"m14 12 4 4 4-4\" />\n</svg>",
+  jsx: "import { ExampleTemplate } from \"icons\"\n  <ExampleTemplate/>\n  "
+},
+{
+  name: "api-docs",
+  componentName: "ApiDocs",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name ApiDocs\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03LjQ0NDM0IDE0LjMzNDdIMTYuNDQ0M003LjQ0NDM0IDExLjMzNDdIMTYuNDQ0M003LjQ0NDM0IDE3LjMzNDdIMTMuNDQ0M00xOS40OTk0IDguNTA3MTRWMTkuMTA1MkMxOS40OTk0IDIwLjIwOTcgMTguNjAzOSAyMS4xMDUyIDE3LjQ5OTQgMjEuMTA1Mkg2LjVDNS4zOTU0MyAyMS4xMDUyIDQuNSAyMC4yMDk3IDQuNSAxOS4xMDUyVjUuMTA1OTZDNC41IDQuMDAxMzkgNS4zOTU0MyAzLjEwNTk2IDYuNSAzLjEwNTk2SDE0LjA3MjNMMTkuNDk5NCA4LjUwNzE0Wk0xOS40NDY1IDguNDgxOTNMMTQuMDcwNCAzLjEwNTk2TDE0LjA3MDEgNy40ODE4NkMxNC4wNzAxIDguMDM0MTggMTQuNTE3OCA4LjQ4MTkzIDE1LjA3MDEgOC40ODE5M0wxOS40NDY1IDguNDgxOTNaIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst ApiDocs = createSupabaseIcon('ApiDocs', [\n  [\n    'path',\n    {\n      d: 'M7.44434 14.3347H16.4443M7.44434 11.3347H16.4443M7.44434 17.3347H13.4443M19.4994 8.50714V19.1052C19.4994 20.2097 18.6039 21.1052 17.4994 21.1052H6.5C5.39543 21.1052 4.5 20.2097 4.5 19.1052V5.10596C4.5 4.00139 5.39543 3.10596 6.5 3.10596H14.0723L19.4994 8.50714ZM19.4465 8.48193L14.0704 3.10596L14.0701 7.48186C14.0701 8.03418 14.5178 8.48193 15.0701 8.48193L19.4465 8.48193Z',\n      key: '2ysat9',\n    },\n  ],\n]);\n\nexport default ApiDocs;\n",
+  component: React.lazy(() => import('icons/src/icons/api-docs')),
+  import: "import { ApiDocs } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M7.44434 14.3347H16.4443M7.44434 11.3347H16.4443M7.44434 17.3347H13.4443M19.4994 8.50714V19.1052C19.4994 20.2097 18.6039 21.1052 17.4994 21.1052H6.5C5.39543 21.1052 4.5 20.2097 4.5 19.1052V5.10596C4.5 4.00139 5.39543 3.10596 6.5 3.10596H14.0723L19.4994 8.50714ZM19.4465 8.48193L14.0704 3.10596L14.0701 7.48186C14.0701 8.03418 14.5178 8.48193 15.0701 8.48193L19.4465 8.48193Z\" />\n</svg>",
+  jsx: "import { ApiDocs } from \"icons\"\n  <ApiDocs/>\n  "
+},
+{
+  name: "auth",
+  componentName: "Auth",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Auth\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik01LjI0MTIxIDE1LjA2NzRIMTIuNzQxMk01LjI0MTIxIDE1LjA2NzRWMTguMDY3NEgxMi43NDEyVjE1LjA2NzRNNS4yNDEyMSAxNS4wNjc0VjEyLjA2NzRIMTIuNzQxMlYxNS4wNjc0TTE1IDcuNjA1NDdWNC42MDU0N0MxNSAyLjk0ODYxIDEzLjY1NjkgMS42MDU0NyAxMiAxLjYwNTQ3QzEwLjM0MzEgMS42MDU0NyA5IDIuOTQ4NjEgOSA0LjYwNTQ3VjcuNjA1NDdNNS4yMDg5OCA5LjYwNTQ3TDUuMjA4OTggMTkuMTA1NUM1LjIwODk4IDIwLjIxIDYuMTA0NDEgMjEuMTA1NSA3LjIwODk4IDIxLjEwNTVIMTYuNzA5QzE3LjgxMzYgMjEuMTA1NSAxOC43MDkgMjAuMjEgMTguNzA5IDE5LjEwNTVWOS42MDU0N0MxOC43MDkgOC41MDA5IDE3LjgxMzYgNy42MDU0NyAxNi43MDkgNy42MDU0N0w3LjIwODk5IDcuNjA1NDdDNi4xMDQ0MiA3LjYwNTQ3IDUuMjA4OTggOC41MDA5IDUuMjA4OTggOS42MDU0N1oiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Auth = createSupabaseIcon('Auth', [\n  [\n    'path',\n    {\n      d: 'M5.24121 15.0674H12.7412M5.24121 15.0674V18.0674H12.7412V15.0674M5.24121 15.0674V12.0674H12.7412V15.0674M15 7.60547V4.60547C15 2.94861 13.6569 1.60547 12 1.60547C10.3431 1.60547 9 2.94861 9 4.60547V7.60547M5.20898 9.60547L5.20898 19.1055C5.20898 20.21 6.10441 21.1055 7.20898 21.1055H16.709C17.8136 21.1055 18.709 20.21 18.709 19.1055V9.60547C18.709 8.5009 17.8136 7.60547 16.709 7.60547L7.20899 7.60547C6.10442 7.60547 5.20898 8.5009 5.20898 9.60547Z',\n      key: 'h65u22',\n    },\n  ],\n]);\n\nexport default Auth;\n",
+  component: React.lazy(() => import('icons/src/icons/auth')),
+  import: "import { Auth } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M5.24121 15.0674H12.7412M5.24121 15.0674V18.0674H12.7412V15.0674M5.24121 15.0674V12.0674H12.7412V15.0674M15 7.60547V4.60547C15 2.94861 13.6569 1.60547 12 1.60547C10.3431 1.60547 9 2.94861 9 4.60547V7.60547M5.20898 9.60547L5.20898 19.1055C5.20898 20.21 6.10441 21.1055 7.20898 21.1055H16.709C17.8136 21.1055 18.709 20.21 18.709 19.1055V9.60547C18.709 8.5009 17.8136 7.60547 16.709 7.60547L7.20899 7.60547C6.10442 7.60547 5.20898 8.5009 5.20898 9.60547Z\" />\n</svg>",
+  jsx: "import { Auth } from \"icons\"\n  <Auth/>\n  "
+},
+{
+  name: "database",
+  componentName: "Database",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Database\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aCBkPSIgTTUuNTY3NzQgOS43MDY0MkgxOC40NTQ3VjE1LjcwNjRINS41Njc3NFY5LjcwNjQyWiIgLz4KICAgIDxwYXRoIGQ9IiBNNC41IDE2LjcwOTRDNC41IDE2LjE1NzEgNC45NDc3MiAxNS43MDk0IDUuNSAxNS43MDk0SDE4LjVDMTkuMDUyMyAxNS43MDk0IDE5LjUgMTYuMTU3MSAxOS41CiAgICAgICAgMTYuNzA5NFYyMC43MDk0QzE5LjUgMjEuMjYxNiAxOS4wNTIzIDIxLjcwOTQgMTguNSAyMS43MDk0SDUuNUM0Ljk0NzcyIDIxLjcwOTQgNC41IDIxLjI2MTYgNC41CiAgICAgICAgMjAuNzA5NFYxNi43MDk0WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTQuNSA0LjcwNjc5QzQuNSA0LjE1NDUgNC45NDc3MiAzLjcwNjc5IDUuNSAzLjcwNjc5SDE4LjVDMTkuMDUyMyAzLjcwNjc5IDE5LjUgNC4xNTQ1IDE5LjUgNC43MDY3OVY4LjcwNjc5QzE5LjUgOS4yNTkwNyAxOS4wNTIzIDkuNzA2NzkgMTguNSA5LjcwNjc5SDUuNUM0Ljk0NzcyIDkuNzA2NzkgNC41IDkuMjU5MDcgNC41IDguNzA2NzlWNC43MDY3OVoiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Database = createSupabaseIcon('Database', [\n  ['path', { d: ' M5.56774 9.70642H18.4547V15.7064H5.56774V9.70642Z', key: 'g5hndz' }],\n  [\n    'path',\n    {\n      d: ' M4.5 16.7094C4.5 16.1571 4.94772 15.7094 5.5 15.7094H18.5C19.0523 15.7094 19.5 16.1571 19.5\\n        16.7094V20.7094C19.5 21.2616 19.0523 21.7094 18.5 21.7094H5.5C4.94772 21.7094 4.5 21.2616 4.5\\n        20.7094V16.7094Z',\n      key: '1m5ehm',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M4.5 4.70679C4.5 4.1545 4.94772 3.70679 5.5 3.70679H18.5C19.0523 3.70679 19.5 4.1545 19.5 4.70679V8.70679C19.5 9.25907 19.0523 9.70679 18.5 9.70679H5.5C4.94772 9.70679 4.5 9.25907 4.5 8.70679V4.70679Z',\n      key: '1w4kbe',\n    },\n  ],\n]);\n\nexport default Database;\n",
+  component: React.lazy(() => import('icons/src/icons/database')),
+  import: "import { Database } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path d=\" M5.56774 9.70642H18.4547V15.7064H5.56774V9.70642Z\" />\n    <path d=\" M4.5 16.7094C4.5 16.1571 4.94772 15.7094 5.5 15.7094H18.5C19.0523 15.7094 19.5 16.1571 19.5\n        16.7094V20.7094C19.5 21.2616 19.0523 21.7094 18.5 21.7094H5.5C4.94772 21.7094 4.5 21.2616 4.5\n        20.7094V16.7094Z\" />\n    <path\n        d=\"M4.5 4.70679C4.5 4.1545 4.94772 3.70679 5.5 3.70679H18.5C19.0523 3.70679 19.5 4.1545 19.5 4.70679V8.70679C19.5 9.25907 19.0523 9.70679 18.5 9.70679H5.5C4.94772 9.70679 4.5 9.25907 4.5 8.70679V4.70679Z\" />\n</svg>",
+  jsx: "import { Database } from \"icons\"\n  <Database/>\n  "
+},
+{
+  name: "edge-functions",
+  componentName: "EdgeFunctions",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name EdgeFunctions\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOCAxMi4xMDU1QzE4IDE1LjQxOTIgMTUuMzEzNyAxOC4xMDU1IDEyIDE4LjEwNTVDOC42ODYzIDE4LjEwNTUgNi4wMDAwMSAxNS40MTkyIDYuMDAwMDEgMTIuMTA1NUM2LjAwMDAxIDguNzkxNzYgOC42ODYzIDYuMTA1NDcgMTIgNi4xMDU0N0MxNS4zMTM3IDYuMTA1NDcgMTggOC43OTE3NiAxOCAxMi4xMDU1WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTIxLjM5OTkgNS43MDE1NEMyMS4zOTk5IDcuMzU4MzkgMjAuMDU2OCA4LjcwMTU0IDE4LjM5OTkgOC43MDE1NEMxNi43NDMxIDguNzAxNTQgMTUuMzk5OSA3LjM1ODM5IDE1LjM5OTkgNS43MDE1NEMxNS4zOTk5IDQuMDQ0NjggMTYuNzQzMSAyLjcwMTU0IDE4LjM5OTkgMi43MDE1NEMyMC4wNTY4IDIuNzAxNTQgMjEuMzk5OSA0LjA0NDY4IDIxLjM5OTkgNS43MDE1NFoiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik04LjYyMjE2IDE4LjQzNjNDOC42MjIxNiAyMC4wOTMyIDcuMjc5MDIgMjEuNDM2MyA1LjYyMjE2IDIxLjQzNjNDMy45NjUzMSAyMS40MzYzIDIuNjIyMTYgMjAuMDkzMiAyLjYyMjE2IDE4LjQzNjNDMi42MjIxNiAxNi43Nzk1IDMuOTY1MzEgMTUuNDM2MyA1LjYyMjE2IDE1LjQzNjNDNy4yNzkwMiAxNS40MzYzIDguNjIyMTYgMTYuNzc5NSA4LjYyMjE2IDE4LjQzNjNaIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNMy4xODEyMSAxNi4yNjkxQzIuNTg0MDEgMTUuMDA2NSAyLjI1IDEzLjU5NSAyLjI1IDEyLjEwNTVDMi4yNSA2LjcyMDY5IDYuNjE1MjIgMi4zNTU0NyAxMiAyLjM1NTQ3QzEzLjQ4OTMgMi4zNTU0NyAxNC45MDA1IDIuNjg5MzcgMTYuMTYzIDMuMjg2MzhNNy42ODY3OSAyMC44NTJDOC45ODcxNSAyMS40OTQ0IDEwLjQ1MTQgMjEuODU1NSAxMiAyMS44NTU1QzE3LjM4NDggMjEuODU1NSAyMS43NSAxNy40OTAyIDIxLjc1IDEyLjEwNTVDMjEuNzUgMTAuNjE2MiAyMS40MTYxIDkuMjA0OTMgMjAuODE5MSA3Ljk0MjQyIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst EdgeFunctions = createSupabaseIcon('EdgeFunctions', [\n  [\n    'path',\n    {\n      d: 'M18 12.1055C18 15.4192 15.3137 18.1055 12 18.1055C8.6863 18.1055 6.00001 15.4192 6.00001 12.1055C6.00001 8.79176 8.6863 6.10547 12 6.10547C15.3137 6.10547 18 8.79176 18 12.1055Z',\n      key: '1vv84o',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M21.3999 5.70154C21.3999 7.35839 20.0568 8.70154 18.3999 8.70154C16.7431 8.70154 15.3999 7.35839 15.3999 5.70154C15.3999 4.04468 16.7431 2.70154 18.3999 2.70154C20.0568 2.70154 21.3999 4.04468 21.3999 5.70154Z',\n      key: '1vzce8',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M8.62216 18.4363C8.62216 20.0932 7.27902 21.4363 5.62216 21.4363C3.96531 21.4363 2.62216 20.0932 2.62216 18.4363C2.62216 16.7795 3.96531 15.4363 5.62216 15.4363C7.27902 15.4363 8.62216 16.7795 8.62216 18.4363Z',\n      key: 's8poqq',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M3.18121 16.2691C2.58401 15.0065 2.25 13.595 2.25 12.1055C2.25 6.72069 6.61522 2.35547 12 2.35547C13.4893 2.35547 14.9005 2.68937 16.163 3.28638M7.68679 20.852C8.98715 21.4944 10.4514 21.8555 12 21.8555C17.3848 21.8555 21.75 17.4902 21.75 12.1055C21.75 10.6162 21.4161 9.20493 20.8191 7.94242',\n      key: 'xs92pm',\n    },\n  ],\n]);\n\nexport default EdgeFunctions;\n",
+  component: React.lazy(() => import('icons/src/icons/edge-functions')),
+  import: "import { EdgeFunctions } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M18 12.1055C18 15.4192 15.3137 18.1055 12 18.1055C8.6863 18.1055 6.00001 15.4192 6.00001 12.1055C6.00001 8.79176 8.6863 6.10547 12 6.10547C15.3137 6.10547 18 8.79176 18 12.1055Z\" />\n    <path\n        d=\"M21.3999 5.70154C21.3999 7.35839 20.0568 8.70154 18.3999 8.70154C16.7431 8.70154 15.3999 7.35839 15.3999 5.70154C15.3999 4.04468 16.7431 2.70154 18.3999 2.70154C20.0568 2.70154 21.3999 4.04468 21.3999 5.70154Z\" />\n    <path\n        d=\"M8.62216 18.4363C8.62216 20.0932 7.27902 21.4363 5.62216 21.4363C3.96531 21.4363 2.62216 20.0932 2.62216 18.4363C2.62216 16.7795 3.96531 15.4363 5.62216 15.4363C7.27902 15.4363 8.62216 16.7795 8.62216 18.4363Z\" />\n    <path\n        d=\"M3.18121 16.2691C2.58401 15.0065 2.25 13.595 2.25 12.1055C2.25 6.72069 6.61522 2.35547 12 2.35547C13.4893 2.35547 14.9005 2.68937 16.163 3.28638M7.68679 20.852C8.98715 21.4944 10.4514 21.8555 12 21.8555C17.3848 21.8555 21.75 17.4902 21.75 12.1055C21.75 10.6162 21.4161 9.20493 20.8191 7.94242\" />\n</svg>",
+  jsx: "import { EdgeFunctions } from \"icons\"\n  <EdgeFunctions/>\n  "
+},
+{
+  name: "home",
+  componentName: "Home",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Home\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik05LjQzNDE0IDIwLjgwM1YxMy4wNTU3QzkuNDM0MTQgMTIuNTAzNCA5Ljg4MTg2IDEyLjA1NTcgMTAuNDM0MSAxMi4wNTU3SDE0Ljc2NzlDMTUuMzIwMiAxMi4wNTU3IDE1Ljc2NzkgMTIuNTAzNCAxNS43Njc5IDEzLjA1NTdWMjAuODAzTTEyLjAxODEgMy40ODc5OEw1LjUzMDMxIDcuOTk4NEM1LjI2MTQ1IDguMTg1MzIgNS4xMDExNCA4LjQ5MjAyIDUuMTAxMTQgOC44MTk0OEw1LjEwMTE3IDE4LjgwM0M1LjEwMTE3IDE5LjkwNzUgNS45OTY2IDIwLjgwMyA3LjEwMTE3IDIwLjgwM0gxOC4xMDEyQzE5LjIwNTcgMjAuODAzIDIwLjEwMTIgMTkuOTA3NSAyMC4xMDEyIDE4LjgwM0wyMC4xMDExIDguODg1NTRDMjAuMTAxMSA4LjU1OTg4IDE5Ljk0MjYgOC4yNTQ2MiAxOS42NzYxIDguMDY3MzdMMTMuMTYzOSAzLjQ5MDg4QzEyLjgyMDQgMy4yNDk1MSAxMi4zNjI3IDMuMjQ4MzYgMTIuMDE4MSAzLjQ4Nzk4WiIgLz4KPC9zdmc+)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Home = createSupabaseIcon('Home', [\n  [\n    'path',\n    {\n      d: 'M9.43414 20.803V13.0557C9.43414 12.5034 9.88186 12.0557 10.4341 12.0557H14.7679C15.3202 12.0557 15.7679 12.5034 15.7679 13.0557V20.803M12.0181 3.48798L5.53031 7.9984C5.26145 8.18532 5.10114 8.49202 5.10114 8.81948L5.10117 18.803C5.10117 19.9075 5.9966 20.803 7.10117 20.803H18.1012C19.2057 20.803 20.1012 19.9075 20.1012 18.803L20.1011 8.88554C20.1011 8.55988 19.9426 8.25462 19.6761 8.06737L13.1639 3.49088C12.8204 3.24951 12.3627 3.24836 12.0181 3.48798Z',\n      key: '1bkqgr',\n    },\n  ],\n]);\n\nexport default Home;\n",
+  component: React.lazy(() => import('icons/src/icons/home')),
+  import: "import { Home } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M9.43414 20.803V13.0557C9.43414 12.5034 9.88186 12.0557 10.4341 12.0557H14.7679C15.3202 12.0557 15.7679 12.5034 15.7679 13.0557V20.803M12.0181 3.48798L5.53031 7.9984C5.26145 8.18532 5.10114 8.49202 5.10114 8.81948L5.10117 18.803C5.10117 19.9075 5.9966 20.803 7.10117 20.803H18.1012C19.2057 20.803 20.1012 19.9075 20.1012 18.803L20.1011 8.88554C20.1011 8.55988 19.9426 8.25462 19.6761 8.06737L13.1639 3.49088C12.8204 3.24951 12.3627 3.24836 12.0181 3.48798Z\" />\n</svg>",
+  jsx: "import { Home } from \"icons\"\n  <Home/>\n  "
+},
+{
+  name: "insert-code",
+  componentName: "InsertCode",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name InsertCode\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTS0yMDQzNyAtMTExNDJIMTIxMzFWLTExMTQ0SC0yMDQzN1YtMTExNDJaTTEyMTMyIC0xMTE0MVY3MTEzSDEyMTM0Vi0xMTE0MUgxMjEzMlpNMTIxMzEgNzExNEgtMjA0MzdWNzExNkgxMjEzMVY3MTE0Wk0tMjA0MzggNzExM1YtMTExNDFILTIwNDQwVjcxMTNILTIwNDM4Wk0tMjA0MzcgNzExNEMtMjA0MzcuNiA3MTE0IC0yMDQzOCA3MTEzLjU1IC0yMDQzOCA3MTEzSC0yMDQ0MEMtMjA0NDAgNzExNC42NiAtMjA0MzguNyA3MTE2IC0yMDQzNyA3MTE2VjcxMTRaTTEyMTMyIDcxMTNDMTIxMzIgNzExMy41NSAxMjEzMS42IDcxMTQgMTIxMzEgNzExNFY3MTE2QzEyMTMyLjcgNzExNiAxMjEzNCA3MTE0LjY2IDEyMTM0IDcxMTNIMTIxMzJaTTEyMTMxIC0xMTE0MkMxMjEzMS42IC0xMTE0MiAxMjEzMiAtMTExNDEuNiAxMjEzMiAtMTExNDFIMTIxMzRDMTIxMzQgLTExMTQyLjcgMTIxMzIuNyAtMTExNDQgMTIxMzEgLTExMTQ0Vi0xMTE0MlpNLTIwNDM3IC0xMTE0NEMtMjA0MzguNyAtMTExNDQgLTIwNDQwIC0xMTE0Mi43IC0yMDQ0MCAtMTExNDFILTIwNDM4Qy0yMDQzOCAtMTExNDEuNiAtMjA0MzcuNiAtMTExNDIgLTIwNDM3IC0xMTE0MlYtMTExNDRaIgogICAgICAgIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMSIgLz4KICAgIDxwYXRoIGQ9Ik0yMi44NDM3IDguNjk0OTlMMTkuNTM2OSAxMi4wMDE4TDIyLjg0MzggMTUuMzA4NiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPHJlY3QgeD0iMC41IiB5PSIxNC4wNjI1IiB3aWR0aD0iMTYiIGhlaWdodD0iOCIgcng9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8cmVjdCB4PSIwLjUiIHk9IjEuOTM3NSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjgiIHJ4PSIxIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst InsertCode = createSupabaseIcon('InsertCode', [\n  [\n    'path',\n    {\n      d: 'M-20437 -11142H12131V-11144H-20437V-11142ZM12132 -11141V7113H12134V-11141H12132ZM12131 7114H-20437V7116H12131V7114ZM-20438 7113V-11141H-20440V7113H-20438ZM-20437 7114C-20437.6 7114 -20438 7113.55 -20438 7113H-20440C-20440 7114.66 -20438.7 7116 -20437 7116V7114ZM12132 7113C12132 7113.55 12131.6 7114 12131 7114V7116C12132.7 7116 12134 7114.66 12134 7113H12132ZM12131 -11142C12131.6 -11142 12132 -11141.6 12132 -11141H12134C12134 -11142.7 12132.7 -11144 12131 -11144V-11142ZM-20437 -11144C-20438.7 -11144 -20440 -11142.7 -20440 -11141H-20438C-20438 -11141.6 -20437.6 -11142 -20437 -11142V-11144Z',\n      fill: 'white',\n      'fill-opacity': '0.1',\n      key: 'iaqtc1',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086',\n      'stroke-linecap': 'round',\n      'stroke-linejoin': 'round',\n      key: '1gnkuu',\n    },\n  ],\n  [\n    'rect',\n    {\n      x: '0.5',\n      y: '14.0625',\n      width: '16',\n      height: '8',\n      rx: '1',\n      'stroke-linejoin': 'round',\n      key: 't6herz',\n    },\n  ],\n  [\n    'rect',\n    {\n      x: '0.5',\n      y: '1.9375',\n      width: '16',\n      height: '8',\n      rx: '1',\n      'stroke-linejoin': 'round',\n      key: '718qtu',\n    },\n  ],\n]);\n\nexport default InsertCode;\n",
+  component: React.lazy(() => import('icons/src/icons/insert-code')),
+  import: "import { InsertCode } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path\n        d=\"M-20437 -11142H12131V-11144H-20437V-11142ZM12132 -11141V7113H12134V-11141H12132ZM12131 7114H-20437V7116H12131V7114ZM-20438 7113V-11141H-20440V7113H-20438ZM-20437 7114C-20437.6 7114 -20438 7113.55 -20438 7113H-20440C-20440 7114.66 -20438.7 7116 -20437 7116V7114ZM12132 7113C12132 7113.55 12131.6 7114 12131 7114V7116C12132.7 7116 12134 7114.66 12134 7113H12132ZM12131 -11142C12131.6 -11142 12132 -11141.6 12132 -11141H12134C12134 -11142.7 12132.7 -11144 12131 -11144V-11142ZM-20437 -11144C-20438.7 -11144 -20440 -11142.7 -20440 -11141H-20438C-20438 -11141.6 -20437.6 -11142 -20437 -11142V-11144Z\"\n        fill=\"white\" fill-opacity=\"0.1\" />\n    <path d=\"M22.8437 8.69499L19.5369 12.0018L22.8438 15.3086\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    <rect x=\"0.5\" y=\"14.0625\" width=\"16\" height=\"8\" rx=\"1\" stroke-linejoin=\"round\" />\n    <rect x=\"0.5\" y=\"1.9375\" width=\"16\" height=\"8\" rx=\"1\" stroke-linejoin=\"round\" />\n</svg>",
+  jsx: "import { InsertCode } from \"icons\"\n  <InsertCode/>\n  "
+},
+{
+  name: "integrations",
+  componentName: "Integrations",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Integrations\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xNy4yNjYxIDMuMjMyNTRWMTAuNzMyNU0xMy41MTYxIDYuOTgyOTFMMjEuMDE2MSA2Ljk4MjkxTTExLjAzOTEgMTYuOTUwOEMxMS4wMzkxIDE5LjE3NTIgOS4yMzU4NSAyMC45Nzg0IDcuMDExNDcgMjAuOTc4NEM0Ljc4NzEgMjAuOTc4NCAyLjk4Mzg5IDE5LjE3NTIgMi45ODM4OSAxNi45NTA4QzIuOTgzODkgMTQuNzI2NCA0Ljc4NzEgMTIuOTIzMiA3LjAxMTQ3IDEyLjkyMzJDOS4yMzU4NSAxMi45MjMyIDExLjAzOTEgMTQuNzI2NCAxMS4wMzkxIDE2Ljk1MDhaTTIxLjAxNjEgMTkuODU2OFYxNC4zNTY4QzIxLjAxNjEgMTMuODA0NSAyMC41Njg0IDEzLjM1NjggMjAuMDE2MSAxMy4zNTY4SDE0LjUxNjFDMTMuOTYzOCAxMy4zNTY4IDEzLjUxNjEgMTMuODA0NSAxMy41MTYxIDE0LjM1NjhWMTkuODU2OEMxMy41MTYxIDIwLjQwOTEgMTMuOTYzOCAyMC44NTY4IDE0LjUxNjEgMjAuODU2OEgyMC4wMTYxQzIwLjU2ODQgMjAuODU2OCAyMS4wMTYxIDIwLjQwOTEgMjEuMDE2MSAxOS44NTY4Wk00LjI2MjIxIDEwLjczMjVIOS43NjIyMUMxMC4zMTQ1IDEwLjczMjUgMTAuNzYyMiAxMC4yODQ4IDEwLjc2MjIgOS43MzI1NFY0LjIzMjU0QzEwLjc2MjIgMy42ODAyNiAxMC4zMTQ1IDMuMjMyNTQgOS43NjIyMSAzLjIzMjU0SDQuMjYyMjFDMy43MDk5MiAzLjIzMjU0IDMuMjYyMjEgMy42ODAyNiAzLjI2MjIxIDQuMjMyNTRWOS43MzI1NEMzLjI2MjIxIDEwLjI4NDggMy43MDk5MiAxMC43MzI1IDQuMjYyMjEgMTAuNzMyNVoiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Integrations = createSupabaseIcon('Integrations', [\n  [\n    'path',\n    {\n      d: 'M17.2661 3.23254V10.7325M13.5161 6.98291L21.0161 6.98291M11.0391 16.9508C11.0391 19.1752 9.23585 20.9784 7.01147 20.9784C4.7871 20.9784 2.98389 19.1752 2.98389 16.9508C2.98389 14.7264 4.7871 12.9232 7.01147 12.9232C9.23585 12.9232 11.0391 14.7264 11.0391 16.9508ZM21.0161 19.8568V14.3568C21.0161 13.8045 20.5684 13.3568 20.0161 13.3568H14.5161C13.9638 13.3568 13.5161 13.8045 13.5161 14.3568V19.8568C13.5161 20.4091 13.9638 20.8568 14.5161 20.8568H20.0161C20.5684 20.8568 21.0161 20.4091 21.0161 19.8568ZM4.26221 10.7325H9.76221C10.3145 10.7325 10.7622 10.2848 10.7622 9.73254V4.23254C10.7622 3.68026 10.3145 3.23254 9.76221 3.23254H4.26221C3.70992 3.23254 3.26221 3.68026 3.26221 4.23254V9.73254C3.26221 10.2848 3.70992 10.7325 4.26221 10.7325Z',\n      key: '3dnck7',\n    },\n  ],\n]);\n\nexport default Integrations;\n",
+  component: React.lazy(() => import('icons/src/icons/integrations')),
+  import: "import { Integrations } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M17.2661 3.23254V10.7325M13.5161 6.98291L21.0161 6.98291M11.0391 16.9508C11.0391 19.1752 9.23585 20.9784 7.01147 20.9784C4.7871 20.9784 2.98389 19.1752 2.98389 16.9508C2.98389 14.7264 4.7871 12.9232 7.01147 12.9232C9.23585 12.9232 11.0391 14.7264 11.0391 16.9508ZM21.0161 19.8568V14.3568C21.0161 13.8045 20.5684 13.3568 20.0161 13.3568H14.5161C13.9638 13.3568 13.5161 13.8045 13.5161 14.3568V19.8568C13.5161 20.4091 13.9638 20.8568 14.5161 20.8568H20.0161C20.5684 20.8568 21.0161 20.4091 21.0161 19.8568ZM4.26221 10.7325H9.76221C10.3145 10.7325 10.7622 10.2848 10.7622 9.73254V4.23254C10.7622 3.68026 10.3145 3.23254 9.76221 3.23254H4.26221C3.70992 3.23254 3.26221 3.68026 3.26221 4.23254V9.73254C3.26221 10.2848 3.70992 10.7325 4.26221 10.7325Z\" />\n</svg>",
+  jsx: "import { Integrations } from \"icons\"\n  <Integrations/>\n  "
+},
+{
+  name: "logs",
+  componentName: "Logs",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Logs\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik00LjUgNS4yMDY3OUg0LjUzNzEzTTcuNDYyNDEgNS4yMTcwN0gxOS41TTQuNSA5LjY1ODM5SDQuNTM3MTNNNy40NjI0MSA5LjY2ODY4SDE5LjVNNC41MjY5MiAxNC4xNjRINC41MzcxM003LjQ2MjQxIDE0LjE3NDJIMTkuNU00LjUyNjkyIDE4LjcwNjhMNC41MzcxMyAxOC42OTY1TTcuNDYyNDEgMTguNzA2OEgxOS41IiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Logs = createSupabaseIcon('Logs', [\n  [\n    'path',\n    {\n      d: 'M4.5 5.20679H4.53713M7.46241 5.21707H19.5M4.5 9.65839H4.53713M7.46241 9.66868H19.5M4.52692 14.164H4.53713M7.46241 14.1742H19.5M4.52692 18.7068L4.53713 18.6965M7.46241 18.7068H19.5',\n      key: '2ab8w8',\n    },\n  ],\n]);\n\nexport default Logs;\n",
+  component: React.lazy(() => import('icons/src/icons/logs')),
+  import: "import { Logs } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M4.5 5.20679H4.53713M7.46241 5.21707H19.5M4.5 9.65839H4.53713M7.46241 9.66868H19.5M4.52692 14.164H4.53713M7.46241 14.1742H19.5M4.52692 18.7068L4.53713 18.6965M7.46241 18.7068H19.5\" />\n</svg>",
+  jsx: "import { Logs } from \"icons\"\n  <Logs/>\n  "
+},
+{
+  name: "postgres",
+  componentName: "Postgres",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Postgres\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMS41NDY2IDMuMjMxMDhDMTEuMjcwNCAzLjIzMTA4IDExLjA0NjYgMy40NTQ5NCAxMS4wNDY2IDMuNzMxMDhDMTEuMDQ2NiA0LjAwNzIyIDExLjI3MDQgNC4yMzEwOCAxMS41NDY2IDQuMjMxMDhWMy4yMzEwOFpNMjAuNjU2OSAxOS41MDQ2QzIwLjY1NjkgMTkuMjI4NSAyMC40MzMgMTkuMDA0NiAyMC4xNTY5IDE5LjAwNDZDMTkuODgwOCAxOS4wMDQ2IDE5LjY1NjkgMTkuMjI4NSAxOS42NTY5IDE5LjUwNDZIMjAuNjU2OVpNMTkuNjU2OSAxNS45NjU2QzE5LjY1NjkgMTYuMjQxNyAxOS44ODA4IDE2LjQ2NTYgMjAuMTU2OSAxNi40NjU2QzIwLjQzMyAxNi40NjU2IDIwLjY1NjkgMTYuMjQxNyAyMC42NTY5IDE1Ljk2NTZIMTkuNjU2OVpNMTMuMDExOSAxOS41NTM2QzEyLjk1OSAxOS4yODI2IDEyLjY5NjQgMTkuMTA1OCAxMi40MjU0IDE5LjE1ODZDMTIuMTU0NCAxOS4yMTE1IDExLjk3NzUgMTkuNDc0MSAxMi4wMzA0IDE5Ljc0NTJMMTMuMDExOSAxOS41NTM2Wk05Ljg3MzgxIDE4Ljg1NjVMOS4zNzM4MSAxOC44NTY1VjE4Ljg1NjVIOS44NzM4MVpNNC4yMDcyMSA1LjI5OTMyTDMuNzM3ODQgNS4xMjY5OUwzLjczNzg0IDUuMTI3TDQuMjA3MjEgNS4yOTkzMlpNMi41MjUyNyA5Ljg4MDQ2TDIuMDU1OSA5LjcwODE0TDIuMDU1OSA5LjcwODE0TDIuNTI1MjcgOS44ODA0NlpNMy4yNDkyMiAxMi42ODczTDIuOTIxNzYgMTMuMDY1MUwyLjkyMTc2IDEzLjA2NTFMMy4yNDkyMiAxMi42ODczWk00LjQwMzM0IDEzLjY4NzVMNC4wNzU4OCAxNC4wNjUzTDQuMDc1ODggMTQuMDY1M0w0LjQwMzM0IDEzLjY4NzVaTTUuMDA5NzEgMTUuMDE1NEw0LjUwOTcxIDE1LjAxNTRMNC41MDk3MSAxNS4wMTU0TDUuMDA5NzEgMTUuMDE1NFpNNS4wMDk2OSAxNi44NTM2TDUuNTA5NjkgMTYuODUzNkw1LjUwOTY5IDE2Ljg1MzZMNS4wMDk2OSAxNi44NTM2Wk05Ljg3Mzg1IDEwLjY2NjFMOS4zNzM4NSAxMC42NjYxTDkuMzczODUgMTAuNjY2MUw5Ljg3Mzg1IDEwLjY2NjFaTTExLjkzOTkgNi45MDc4M0MxMi4xMzYgNi43MTMzOSAxMi4xMzczIDYuMzk2ODEgMTEuOTQyOSA2LjIwMDczQzExLjc0ODQgNi4wMDQ2NCAxMS40MzE5IDYuMDAzMzEgMTEuMjM1OCA2LjE5Nzc0TDExLjkzOTkgNi45MDc4M1pNMTcuODQxIDE4Ljc1MDZMMTcuODQwOSAxOC4yNTA2TDE3Ljg0MDkgMTguMjUwNkwxNy44NDEgMTguNzUwNlpNMjMuMDY3NiAxOS4yNTA2QzIzLjM0MzcgMTkuMjUwNiAyMy41Njc2IDE5LjAyNjcgMjMuNTY3NSAxOC43NTA2QzIzLjU2NzUgMTguNDc0NCAyMy4zNDM3IDE4LjI1MDYgMjMuMDY3NSAxOC4yNTA2TDIzLjA2NzYgMTkuMjUwNlpNMTMuMDE3MSAxNS4yNDQ2QzEyLjg5NTUgMTQuOTk2NyAxMi41OTU5IDE0Ljg5NDMgMTIuMzQ4IDE1LjAxNkMxMi4xMDAxIDE1LjEzNzYgMTEuOTk3OCAxNS40MzcyIDEyLjExOTQgMTUuNjg1MUwxMy4wMTcxIDE1LjI0NDZaTTExLjU0NjYgNC4yMzEwOEgxMi42MDhWMy4yMzEwOEgxMS41NDY2VjQuMjMxMDhaTTE5LjY1NjkgMTkuNTA0NkMxOS42NTY5IDIxLjAyNjQgMTguMjQ2NyAyMi4yNjA2IDE2LjMwMzMgMjIuMjYwNlYyMy4yNjA2QzE4LjYxNjUgMjMuMjYwNiAyMC42NTY5IDIxLjc0NDkgMjAuNjU2OSAxOS41MDQ2SDE5LjY1NjlaTTEyLjYwOCA0LjIzMTA4QzE2LjUwMSA0LjIzMTA4IDE5LjY1NjkgNy4zODY5OCAxOS42NTY5IDExLjI4SDIwLjY1NjlDMjAuNjU2OSA2LjgzNDcgMTcuMDUzMyAzLjIzMTA4IDEyLjYwOCAzLjIzMTA4VjQuMjMxMDhaTTE5LjY1NjkgMTEuMjhWMTUuOTY1NkgyMC42NTY5VjExLjI4SDE5LjY1NjlaTTE2LjMwMzMgMjIuMjYwNkMxNC42NzI3IDIyLjI2MDYgMTMuMzEzIDIxLjA5NjQgMTMuMDExOSAxOS41NTM2TDEyLjAzMDQgMTkuNzQ1MkMxMi40MjE0IDIxLjc0ODUgMTQuMTg1MiAyMy4yNjA2IDE2LjMwMzMgMjMuMjYwNlYyMi4yNjA2Wk0xMS42NTUyIDMuMjIzMzlINi40NjQ1OVY0LjIyMzM5SDExLjY1NTJWMy4yMjMzOVpNMy43Mzc4NCA1LjEyN0wyLjA1NTkgOS43MDgxNEwyLjk5NDY0IDEwLjA1MjhMNC42NzY1OCA1LjQ3MTY0TDMuNzM3ODQgNS4xMjdaTTIuOTIxNzYgMTMuMDY1MUw0LjA3NTg4IDE0LjA2NTNMNC43MzA4IDEzLjMwOTZMMy41NzY2OCAxMi4zMDk0TDIuOTIxNzYgMTMuMDY1MVpNNC41MDk3MSAxNS4wMTU0TDQuNTA5NjkgMTYuODUzNkw1LjUwOTY5IDE2Ljg1MzZMNS41MDk3MSAxNS4wMTU0TDQuNTA5NzEgMTUuMDE1NFpNMTAuMzczOSAxMC42NjYxQzEwLjM3MzkgOS4yNTQ2MyAxMC45Mzc2IDcuOTAxNjYgMTEuOTM5OSA2LjkwNzgzTDExLjIzNTggNi4xOTc3NEMxMC4wNDQyIDcuMzc5MzQgOS4zNzM4NyA4Ljk4Nzk1IDkuMzczODUgMTAuNjY2MUwxMC4zNzM5IDEwLjY2NjFaTTIuMDU1OSA5LjcwODE0QzEuNjE4OTMgMTAuODk4MyAxLjk2MzYzIDEyLjIzNDggMi45MjE3NiAxMy4wNjUxTDMuNTc2NjggMTIuMzA5NEMyLjkzMjYgMTEuNzUxMiAyLjcwMDg5IDEwLjg1MjkgMi45OTQ2NCAxMC4wNTI4TDIuMDU1OSA5LjcwODE0Wk04LjQ0MzE5IDIwLjc4NzJDOS41MDk0NCAyMC43ODcyIDEwLjM3MzggMTkuOTIyOCAxMC4zNzM4IDE4Ljg1NjVIOS4zNzM4MUM5LjM3MzgxIDE5LjM3MDUgOC45NTcxNiAxOS43ODcyIDguNDQzMTkgMTkuNzg3MlYyMC43ODcyWk04LjQ0MzE5IDE5Ljc4NzJDNi44MjMwNSAxOS43ODcyIDUuNTA5NjcgMTguNDczOCA1LjUwOTY5IDE2Ljg1MzZMNC41MDk2OSAxNi44NTM2QzQuNTA5NjYgMTkuMDI2IDYuMjcwNzUgMjAuNzg3MiA4LjQ0MzE5IDIwLjc4NzJWMTkuNzg3MlpNNC4wNzU4OCAxNC4wNjUzQzQuMzUxNDIgMTQuMzA0MSA0LjUwOTcyIDE0LjY1MDggNC41MDk3MSAxNS4wMTU0TDUuNTA5NzEgMTUuMDE1NEM1LjUwOTcyIDE0LjM2MDggNS4yMjU1MiAxMy43Mzg0IDQuNzMwOCAxMy4zMDk2TDQuMDc1ODggMTQuMDY1M1pNNi40NjQ1OSAzLjIyMzM5QzUuMjQ2NDMgMy4yMjMzOSA0LjE1NzY4IDMuOTgzNDcgMy43Mzc4NCA1LjEyNjk5TDQuNjc2NTggNS40NzE2NEM0Ljk1MTg4IDQuNzIxOCA1LjY2NTgxIDQuMjIzMzkgNi40NjQ1OSA0LjIyMzM5VjMuMjIzMzlaTTE3Ljg0MSAxOS4yNTA2TDIzLjA2NzYgMTkuMjUwNkwyMy4wNjc1IDE4LjI1MDZMMTcuODQwOSAxOC4yNTA2TDE3Ljg0MSAxOS4yNTA2Wk0xMi4xMTk0IDE1LjY4NTFDMTMuMTkwNSAxNy44Njc2IDE1LjQwOTggMTkuMjUwNyAxNy44NDEgMTkuMjUwNkwxNy44NDA5IDE4LjI1MDZDMTUuNzkxMyAxOC4yNTA3IDEzLjkyMDEgMTcuMDg0NiAxMy4wMTcxIDE1LjI0NDZMMTIuMTE5NCAxNS42ODUxWk0xMC4zNzM4IDE4Ljg1NjVMMTAuMzczOSAxMC42NjYxTDkuMzczODUgMTAuNjY2MUw5LjM3MzgxIDE4Ljg1NjVMMTAuMzczOCAxOC44NTY1WiIgLz4KICAgIDxwYXRoCiAgICAgICAgZD0iTTE1LjcxNTEgMTEuMjA1NkMxNS43MTUxIDExLjYyNTcgMTYuMDU1NiAxMS45NjYzIDE2LjQ3NTggMTEuOTY2M0MxNi44OTU5IDExLjk2NjMgMTcuMjM2NSAxMS42MjU3IDE3LjIzNjUgMTEuMjA1NkMxNy4yMzY1IDEwLjc4NTQgMTYuODk1OSAxMC40NDQ4IDE2LjQ3NTggMTAuNDQ0OEMxNi4wNTU2IDEwLjQ0NDggMTUuNzE1MSAxMC43ODU0IDE1LjcxNTEgMTEuMjA1NloiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Postgres = createSupabaseIcon('Postgres', [\n  [\n    'path',\n    {\n      d: 'M11.5466 3.23108C11.2704 3.23108 11.0466 3.45494 11.0466 3.73108C11.0466 4.00722 11.2704 4.23108 11.5466 4.23108V3.23108ZM20.6569 19.5046C20.6569 19.2285 20.433 19.0046 20.1569 19.0046C19.8808 19.0046 19.6569 19.2285 19.6569 19.5046H20.6569ZM19.6569 15.9656C19.6569 16.2417 19.8808 16.4656 20.1569 16.4656C20.433 16.4656 20.6569 16.2417 20.6569 15.9656H19.6569ZM13.0119 19.5536C12.959 19.2826 12.6964 19.1058 12.4254 19.1586C12.1544 19.2115 11.9775 19.4741 12.0304 19.7452L13.0119 19.5536ZM9.87381 18.8565L9.37381 18.8565V18.8565H9.87381ZM4.20721 5.29932L3.73784 5.12699L3.73784 5.127L4.20721 5.29932ZM2.52527 9.88046L2.0559 9.70814L2.0559 9.70814L2.52527 9.88046ZM3.24922 12.6873L2.92176 13.0651L2.92176 13.0651L3.24922 12.6873ZM4.40334 13.6875L4.07588 14.0653L4.07588 14.0653L4.40334 13.6875ZM5.00971 15.0154L4.50971 15.0154L4.50971 15.0154L5.00971 15.0154ZM5.00969 16.8536L5.50969 16.8536L5.50969 16.8536L5.00969 16.8536ZM9.87385 10.6661L9.37385 10.6661L9.37385 10.6661L9.87385 10.6661ZM11.9399 6.90783C12.136 6.71339 12.1373 6.39681 11.9429 6.20073C11.7484 6.00464 11.4319 6.00331 11.2358 6.19774L11.9399 6.90783ZM17.841 18.7506L17.8409 18.2506L17.8409 18.2506L17.841 18.7506ZM23.0676 19.2506C23.3437 19.2506 23.5676 19.0267 23.5675 18.7506C23.5675 18.4744 23.3437 18.2506 23.0675 18.2506L23.0676 19.2506ZM13.0171 15.2446C12.8955 14.9967 12.5959 14.8943 12.348 15.016C12.1001 15.1376 11.9978 15.4372 12.1194 15.6851L13.0171 15.2446ZM11.5466 4.23108H12.608V3.23108H11.5466V4.23108ZM19.6569 19.5046C19.6569 21.0264 18.2467 22.2606 16.3033 22.2606V23.2606C18.6165 23.2606 20.6569 21.7449 20.6569 19.5046H19.6569ZM12.608 4.23108C16.501 4.23108 19.6569 7.38698 19.6569 11.28H20.6569C20.6569 6.8347 17.0533 3.23108 12.608 3.23108V4.23108ZM19.6569 11.28V15.9656H20.6569V11.28H19.6569ZM16.3033 22.2606C14.6727 22.2606 13.313 21.0964 13.0119 19.5536L12.0304 19.7452C12.4214 21.7485 14.1852 23.2606 16.3033 23.2606V22.2606ZM11.6552 3.22339H6.46459V4.22339H11.6552V3.22339ZM3.73784 5.127L2.0559 9.70814L2.99464 10.0528L4.67658 5.47164L3.73784 5.127ZM2.92176 13.0651L4.07588 14.0653L4.7308 13.3096L3.57668 12.3094L2.92176 13.0651ZM4.50971 15.0154L4.50969 16.8536L5.50969 16.8536L5.50971 15.0154L4.50971 15.0154ZM10.3739 10.6661C10.3739 9.25463 10.9376 7.90166 11.9399 6.90783L11.2358 6.19774C10.0442 7.37934 9.37387 8.98795 9.37385 10.6661L10.3739 10.6661ZM2.0559 9.70814C1.61893 10.8983 1.96363 12.2348 2.92176 13.0651L3.57668 12.3094C2.9326 11.7512 2.70089 10.8529 2.99464 10.0528L2.0559 9.70814ZM8.44319 20.7872C9.50944 20.7872 10.3738 19.9228 10.3738 18.8565H9.37381C9.37381 19.3705 8.95716 19.7872 8.44319 19.7872V20.7872ZM8.44319 19.7872C6.82305 19.7872 5.50967 18.4738 5.50969 16.8536L4.50969 16.8536C4.50966 19.026 6.27075 20.7872 8.44319 20.7872V19.7872ZM4.07588 14.0653C4.35142 14.3041 4.50972 14.6508 4.50971 15.0154L5.50971 15.0154C5.50972 14.3608 5.22552 13.7384 4.7308 13.3096L4.07588 14.0653ZM6.46459 3.22339C5.24643 3.22339 4.15768 3.98347 3.73784 5.12699L4.67658 5.47164C4.95188 4.7218 5.66581 4.22339 6.46459 4.22339V3.22339ZM17.841 19.2506L23.0676 19.2506L23.0675 18.2506L17.8409 18.2506L17.841 19.2506ZM12.1194 15.6851C13.1905 17.8676 15.4098 19.2507 17.841 19.2506L17.8409 18.2506C15.7913 18.2507 13.9201 17.0846 13.0171 15.2446L12.1194 15.6851ZM10.3738 18.8565L10.3739 10.6661L9.37385 10.6661L9.37381 18.8565L10.3738 18.8565Z',\n      key: '1mbkmc',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M15.7151 11.2056C15.7151 11.6257 16.0556 11.9663 16.4758 11.9663C16.8959 11.9663 17.2365 11.6257 17.2365 11.2056C17.2365 10.7854 16.8959 10.4448 16.4758 10.4448C16.0556 10.4448 15.7151 10.7854 15.7151 11.2056Z',\n      key: '1vir92',\n    },\n  ],\n]);\n\nexport default Postgres;\n",
+  component: React.lazy(() => import('icons/src/icons/postgres')),
+  import: "import { Postgres } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M11.5466 3.23108C11.2704 3.23108 11.0466 3.45494 11.0466 3.73108C11.0466 4.00722 11.2704 4.23108 11.5466 4.23108V3.23108ZM20.6569 19.5046C20.6569 19.2285 20.433 19.0046 20.1569 19.0046C19.8808 19.0046 19.6569 19.2285 19.6569 19.5046H20.6569ZM19.6569 15.9656C19.6569 16.2417 19.8808 16.4656 20.1569 16.4656C20.433 16.4656 20.6569 16.2417 20.6569 15.9656H19.6569ZM13.0119 19.5536C12.959 19.2826 12.6964 19.1058 12.4254 19.1586C12.1544 19.2115 11.9775 19.4741 12.0304 19.7452L13.0119 19.5536ZM9.87381 18.8565L9.37381 18.8565V18.8565H9.87381ZM4.20721 5.29932L3.73784 5.12699L3.73784 5.127L4.20721 5.29932ZM2.52527 9.88046L2.0559 9.70814L2.0559 9.70814L2.52527 9.88046ZM3.24922 12.6873L2.92176 13.0651L2.92176 13.0651L3.24922 12.6873ZM4.40334 13.6875L4.07588 14.0653L4.07588 14.0653L4.40334 13.6875ZM5.00971 15.0154L4.50971 15.0154L4.50971 15.0154L5.00971 15.0154ZM5.00969 16.8536L5.50969 16.8536L5.50969 16.8536L5.00969 16.8536ZM9.87385 10.6661L9.37385 10.6661L9.37385 10.6661L9.87385 10.6661ZM11.9399 6.90783C12.136 6.71339 12.1373 6.39681 11.9429 6.20073C11.7484 6.00464 11.4319 6.00331 11.2358 6.19774L11.9399 6.90783ZM17.841 18.7506L17.8409 18.2506L17.8409 18.2506L17.841 18.7506ZM23.0676 19.2506C23.3437 19.2506 23.5676 19.0267 23.5675 18.7506C23.5675 18.4744 23.3437 18.2506 23.0675 18.2506L23.0676 19.2506ZM13.0171 15.2446C12.8955 14.9967 12.5959 14.8943 12.348 15.016C12.1001 15.1376 11.9978 15.4372 12.1194 15.6851L13.0171 15.2446ZM11.5466 4.23108H12.608V3.23108H11.5466V4.23108ZM19.6569 19.5046C19.6569 21.0264 18.2467 22.2606 16.3033 22.2606V23.2606C18.6165 23.2606 20.6569 21.7449 20.6569 19.5046H19.6569ZM12.608 4.23108C16.501 4.23108 19.6569 7.38698 19.6569 11.28H20.6569C20.6569 6.8347 17.0533 3.23108 12.608 3.23108V4.23108ZM19.6569 11.28V15.9656H20.6569V11.28H19.6569ZM16.3033 22.2606C14.6727 22.2606 13.313 21.0964 13.0119 19.5536L12.0304 19.7452C12.4214 21.7485 14.1852 23.2606 16.3033 23.2606V22.2606ZM11.6552 3.22339H6.46459V4.22339H11.6552V3.22339ZM3.73784 5.127L2.0559 9.70814L2.99464 10.0528L4.67658 5.47164L3.73784 5.127ZM2.92176 13.0651L4.07588 14.0653L4.7308 13.3096L3.57668 12.3094L2.92176 13.0651ZM4.50971 15.0154L4.50969 16.8536L5.50969 16.8536L5.50971 15.0154L4.50971 15.0154ZM10.3739 10.6661C10.3739 9.25463 10.9376 7.90166 11.9399 6.90783L11.2358 6.19774C10.0442 7.37934 9.37387 8.98795 9.37385 10.6661L10.3739 10.6661ZM2.0559 9.70814C1.61893 10.8983 1.96363 12.2348 2.92176 13.0651L3.57668 12.3094C2.9326 11.7512 2.70089 10.8529 2.99464 10.0528L2.0559 9.70814ZM8.44319 20.7872C9.50944 20.7872 10.3738 19.9228 10.3738 18.8565H9.37381C9.37381 19.3705 8.95716 19.7872 8.44319 19.7872V20.7872ZM8.44319 19.7872C6.82305 19.7872 5.50967 18.4738 5.50969 16.8536L4.50969 16.8536C4.50966 19.026 6.27075 20.7872 8.44319 20.7872V19.7872ZM4.07588 14.0653C4.35142 14.3041 4.50972 14.6508 4.50971 15.0154L5.50971 15.0154C5.50972 14.3608 5.22552 13.7384 4.7308 13.3096L4.07588 14.0653ZM6.46459 3.22339C5.24643 3.22339 4.15768 3.98347 3.73784 5.12699L4.67658 5.47164C4.95188 4.7218 5.66581 4.22339 6.46459 4.22339V3.22339ZM17.841 19.2506L23.0676 19.2506L23.0675 18.2506L17.8409 18.2506L17.841 19.2506ZM12.1194 15.6851C13.1905 17.8676 15.4098 19.2507 17.841 19.2506L17.8409 18.2506C15.7913 18.2507 13.9201 17.0846 13.0171 15.2446L12.1194 15.6851ZM10.3738 18.8565L10.3739 10.6661L9.37385 10.6661L9.37381 18.8565L10.3738 18.8565Z\" />\n    <path\n        d=\"M15.7151 11.2056C15.7151 11.6257 16.0556 11.9663 16.4758 11.9663C16.8959 11.9663 17.2365 11.6257 17.2365 11.2056C17.2365 10.7854 16.8959 10.4448 16.4758 10.4448C16.0556 10.4448 15.7151 10.7854 15.7151 11.2056Z\" />\n</svg>",
+  jsx: "import { Postgres } from \"icons\"\n  <Postgres/>\n  "
+},
+{
+  name: "realtime",
+  componentName: "Realtime",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Realtime\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik04LjA0MjczIDEuNTgyMDNWNS4zMjIwNU01LjI0MzU0IDUuMzIyMDVMMi4wNDcxMiAyLjAyNzkxTTUuMjQzNTQgNy45MDk3OUgxLjU3NzY0TTE1LjM3NzYgMTUuNTUwN0wyMS4wNzkgMTQuMTMxNkMyMS41NDE3IDE0LjAxNjQgMjEuNTk1OSAxMy4zODA2IDIxLjE1OTUgMTMuMTg4N0w4LjAwODI4IDcuNDA1ODZDNy41OTEzNyA3LjIyMjU0IDcuMTY2NDMgNy42NDY2MSA3LjM0ODkgOC4wNjM4OUwxMy4wMzIxIDIxLjA2MDdDMTMuMjIyNCAyMS40OTYgMTMuODU1NiAyMS40NDU0IDEzLjk3NDMgMjAuOTg1NEwxNS4zNzc2IDE1LjU1MDdaIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Realtime = createSupabaseIcon('Realtime', [\n  [\n    'path',\n    {\n      d: 'M8.04273 1.58203V5.32205M5.24354 5.32205L2.04712 2.02791M5.24354 7.90979H1.57764M15.3776 15.5507L21.079 14.1316C21.5417 14.0164 21.5959 13.3806 21.1595 13.1887L8.00828 7.40586C7.59137 7.22254 7.16643 7.64661 7.3489 8.06389L13.0321 21.0607C13.2224 21.496 13.8556 21.4454 13.9743 20.9854L15.3776 15.5507Z',\n      key: '1w2oqg',\n    },\n  ],\n]);\n\nexport default Realtime;\n",
+  component: React.lazy(() => import('icons/src/icons/realtime')),
+  import: "import { Realtime } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M8.04273 1.58203V5.32205M5.24354 5.32205L2.04712 2.02791M5.24354 7.90979H1.57764M15.3776 15.5507L21.079 14.1316C21.5417 14.0164 21.5959 13.3806 21.1595 13.1887L8.00828 7.40586C7.59137 7.22254 7.16643 7.64661 7.3489 8.06389L13.0321 21.0607C13.2224 21.496 13.8556 21.4454 13.9743 20.9854L15.3776 15.5507Z\" />\n</svg>",
+  jsx: "import { Realtime } from \"icons\"\n  <Realtime/>\n  "
+},
+{
+  name: "replace-code",
+  componentName: "ReplaceCode",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name ReplaceCode\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiAgICBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTS0yMDQwMyAtMTExNDJIMTIxNjVWLTExMTQ0SC0yMDQwM1YtMTExNDJaTTEyMTY2IC0xMTE0MVY3MTEzSDEyMTY4Vi0xMTE0MUgxMjE2NlpNMTIxNjUgNzExNEgtMjA0MDNWNzExNkgxMjE2NVY3MTE0Wk0tMjA0MDQgNzExM1YtMTExNDFILTIwNDA2VjcxMTNILTIwNDA0Wk0tMjA0MDMgNzExNEMtMjA0MDMuNiA3MTE0IC0yMDQwNCA3MTEzLjU1IC0yMDQwNCA3MTEzSC0yMDQwNkMtMjA0MDYgNzExNC42NiAtMjA0MDQuNyA3MTE2IC0yMDQwMyA3MTE2VjcxMTRaTTEyMTY2IDcxMTNDMTIxNjYgNzExMy41NSAxMjE2NS42IDcxMTQgMTIxNjUgNzExNFY3MTE2QzEyMTY2LjcgNzExNiAxMjE2OCA3MTE0LjY2IDEyMTY4IDcxMTNIMTIxNjZaTTEyMTY1IC0xMTE0MkMxMjE2NS42IC0xMTE0MiAxMjE2NiAtMTExNDEuNiAxMjE2NiAtMTExNDFIMTIxNjhDMTIxNjggLTExMTQyLjcgMTIxNjYuNyAtMTExNDQgMTIxNjUgLTExMTQ0Vi0xMTE0MlpNLTIwNDAzIC0xMTE0NEMtMjA0MDQuNyAtMTExNDQgLTIwNDA2IC0xMTE0Mi43IC0yMDQwNiAtMTExNDFILTIwNDA0Qy0yMDQwNCAtMTExNDEuNiAtMjA0MDMuNiAtMTExNDIgLTIwNDAzIC0xMTE0MlYtMTExNDRaIgogICAgICAgIGZpbGwtb3BhY2l0eT0iMC4xIiAvPgogICAgPHJlY3QgeD0iNi40NDUzMSIgeT0iMTQuMTEzMyIgd2lkdGg9IjE1Ljg0NTUiIGhlaWdodD0iNy45MTgxOCIgcng9IjMuOTU5MDkiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMC41ODk2IDEwLjAxOTVMMTguMjE0OCAxMC4wMTk1QzE5LjA0MzMgMTAuMDE5NSAxOS43MTQ4IDkuMzQ3OTYgMTkuNzE0OCA4LjUxOTUzTDE5LjcxNDggMy41OTIyNUMxOS43MTQ4IDIuNzYzODMgMTkuMDQzMyAyLjA5MjI2IDE4LjIxNDggMi4wOTIyNkw1Ljk5NjA5IDIuMDkyMjYiCiAgICAgICAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiAvPgogICAgPHBhdGggZD0iTTUuOTg5MDIgMTAuNDY1NlY1Ljc4OTA2SDEuMzEyNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPHBhdGggZD0iTTMuMjcxMTEgMTMuNjEzM1YxMy42MTMzQzEuNjE1MTUgMTIuMzkxNCAxLjQ3OTQ4IDkuOTY0NDYgMi45ODg5NCA4LjU2NTY0TDUuOTk2MDkgNS43Nzg5MSIKICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst ReplaceCode = createSupabaseIcon('ReplaceCode', [\n  [\n    'path',\n    {\n      d: 'M-20403 -11142H12165V-11144H-20403V-11142ZM12166 -11141V7113H12168V-11141H12166ZM12165 7114H-20403V7116H12165V7114ZM-20404 7113V-11141H-20406V7113H-20404ZM-20403 7114C-20403.6 7114 -20404 7113.55 -20404 7113H-20406C-20406 7114.66 -20404.7 7116 -20403 7116V7114ZM12166 7113C12166 7113.55 12165.6 7114 12165 7114V7116C12166.7 7116 12168 7114.66 12168 7113H12166ZM12165 -11142C12165.6 -11142 12166 -11141.6 12166 -11141H12168C12168 -11142.7 12166.7 -11144 12165 -11144V-11142ZM-20403 -11144C-20404.7 -11144 -20406 -11142.7 -20406 -11141H-20404C-20404 -11141.6 -20403.6 -11142 -20403 -11142V-11144Z',\n      'fill-opacity': '0.1',\n      key: 'g9kgmq',\n    },\n  ],\n  [\n    'rect',\n    {\n      x: '6.44531',\n      y: '14.1133',\n      width: '15.8455',\n      height: '7.91818',\n      rx: '3.95909',\n      key: '1evqnx',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M10.5896 10.0195L18.2148 10.0195C19.0433 10.0195 19.7148 9.34796 19.7148 8.51953L19.7148 3.59225C19.7148 2.76383 19.0433 2.09226 18.2148 2.09226L5.99609 2.09226',\n      'stroke-linecap': 'round',\n      key: '18tp5x',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M5.98902 10.4656V5.78906H1.3125',\n      'stroke-linecap': 'round',\n      'stroke-linejoin': 'round',\n      key: 'sfubon',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M3.27111 13.6133V13.6133C1.61515 12.3914 1.47948 9.96446 2.98894 8.56564L5.99609 5.77891',\n      'stroke-linecap': 'round',\n      key: '1w6ie7',\n    },\n  ],\n]);\n\nexport default ReplaceCode;\n",
+  component: React.lazy(() => import('icons/src/icons/replace-code')),
+  import: "import { ReplaceCode } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\"\n    stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n    <path\n        d=\"M-20403 -11142H12165V-11144H-20403V-11142ZM12166 -11141V7113H12168V-11141H12166ZM12165 7114H-20403V7116H12165V7114ZM-20404 7113V-11141H-20406V7113H-20404ZM-20403 7114C-20403.6 7114 -20404 7113.55 -20404 7113H-20406C-20406 7114.66 -20404.7 7116 -20403 7116V7114ZM12166 7113C12166 7113.55 12165.6 7114 12165 7114V7116C12166.7 7116 12168 7114.66 12168 7113H12166ZM12165 -11142C12165.6 -11142 12166 -11141.6 12166 -11141H12168C12168 -11142.7 12166.7 -11144 12165 -11144V-11142ZM-20403 -11144C-20404.7 -11144 -20406 -11142.7 -20406 -11141H-20404C-20404 -11141.6 -20403.6 -11142 -20403 -11142V-11144Z\"\n        fill-opacity=\"0.1\" />\n    <rect x=\"6.44531\" y=\"14.1133\" width=\"15.8455\" height=\"7.91818\" rx=\"3.95909\" />\n    <path\n        d=\"M10.5896 10.0195L18.2148 10.0195C19.0433 10.0195 19.7148 9.34796 19.7148 8.51953L19.7148 3.59225C19.7148 2.76383 19.0433 2.09226 18.2148 2.09226L5.99609 2.09226\"\n        stroke-linecap=\"round\" />\n    <path d=\"M5.98902 10.4656V5.78906H1.3125\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    <path d=\"M3.27111 13.6133V13.6133C1.61515 12.3914 1.47948 9.96446 2.98894 8.56564L5.99609 5.77891\"\n        stroke-linecap=\"round\" />\n</svg>",
+  jsx: "import { ReplaceCode } from \"icons\"\n  <ReplaceCode/>\n  "
+},
+{
+  name: "reports",
+  componentName: "Reports",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Reports\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0zLjAzNDc5IDkuMDg0OUw4LjA3MjQxIDQuMDU3NUM4LjQ2Mjk2IDMuNjY3NzQgOS4wOTU0IDMuNjY3OTYgOS40ODU2OCA0LjA1Nzk5TDE0LjAyOTUgOC41OTg4MUMxNC40MiA4Ljk4OTEyIDE1LjA1MyA4Ljk4OTAxIDE1LjQ0MzUgOC41OTg1N0wyMC41ODc3IDMuNDU0MThNMTYuNDk5NiAzLjAxNTI2SDE5Ljk5OTZDMjAuNTUxOSAzLjAxNTI2IDIwLjk5OTYgMy40NjI5NyAyMC45OTk2IDQuMDE1MjZWNy41MTUyNk0yLjk5OTYzIDEyLjAxNTNMMi45OTk2MyAyMC4xOTU4QzIuOTk5NjMgMjAuNzQ4MSAzLjQ0NzM1IDIxLjE5NTggMy45OTk2MyAyMS4xOTU4TDIwLjAwMDQgMjEuMTk1OEMyMC41NTI3IDIxLjE5NTggMjEuMDAwNCAyMC43NDgxIDIxLjAwMDQgMjAuMTk1OFY5Ljg4NTc0TTguODI1MzIgOS44NzE4M0w4LjgyNTMxIDIxLjE5NThNMTUuMTc1NCAxNS4wNzQ2VjIxLjE5NDkiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Reports = createSupabaseIcon('Reports', [\n  [\n    'path',\n    {\n      d: 'M3.03479 9.0849L8.07241 4.0575C8.46296 3.66774 9.0954 3.66796 9.48568 4.05799L14.0295 8.59881C14.42 8.98912 15.053 8.98901 15.4435 8.59857L20.5877 3.45418M16.4996 3.01526H19.9996C20.5519 3.01526 20.9996 3.46297 20.9996 4.01526V7.51526M2.99963 12.0153L2.99963 20.1958C2.99963 20.7481 3.44735 21.1958 3.99963 21.1958L20.0004 21.1958C20.5527 21.1958 21.0004 20.7481 21.0004 20.1958V9.88574M8.82532 9.87183L8.82531 21.1958M15.1754 15.0746V21.1949',\n      key: '1g8azg',\n    },\n  ],\n]);\n\nexport default Reports;\n",
+  component: React.lazy(() => import('icons/src/icons/reports')),
+  import: "import { Reports } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M3.03479 9.0849L8.07241 4.0575C8.46296 3.66774 9.0954 3.66796 9.48568 4.05799L14.0295 8.59881C14.42 8.98912 15.053 8.98901 15.4435 8.59857L20.5877 3.45418M16.4996 3.01526H19.9996C20.5519 3.01526 20.9996 3.46297 20.9996 4.01526V7.51526M2.99963 12.0153L2.99963 20.1958C2.99963 20.7481 3.44735 21.1958 3.99963 21.1958L20.0004 21.1958C20.5527 21.1958 21.0004 20.7481 21.0004 20.1958V9.88574M8.82532 9.87183L8.82531 21.1958M15.1754 15.0746V21.1949\" />\n</svg>",
+  jsx: "import { Reports } from \"icons\"\n  <Reports/>\n  "
+},
+{
+  name: "settings",
+  componentName: "Settings",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Settings\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOS4wMjIyIDkuMjQ3NzhDMTguNzY4NiA4LjYzMjA5IDE4LjkyMjYgNy45MDQ0NSAxOS4wMDg1IDcuMjQ0MTNDMTkuMDc0NSA2LjczNjg4IDE4LjkxNTggNi4yMDU0NiAxOC41MzA2IDUuODExMkMxOC4xNTYxIDUuNDI3OTUgMTcuNjQ3MSA1LjI1NTc0IDE3LjE1MTcgNS4yOTYyOEMxNi40NjUgNS4zNTI0OCAxNS42OTkzIDUuNDkxNjkgMTUuMDY3MyA1LjIxNzFDMTUuMDMzNyA1LjIwMjQ5IDE1IDUuMTg4MTIgMTQuOTY2MSA1LjE3Mzk5QzE0LjM2MzcgNC45MjI3MiAxMy45NDY3IDQuMzMzODggMTMuNTQ4IDMuODE3MDdDMTMuMjExIDMuMzgwMjUgMTIuNjgyMyAzLjA5ODg4IDEyLjA4OCAzLjA5ODg4QzExLjQ5NTQgMy4wOTg4OCAxMC45NjgxIDMuMzc4NTkgMTAuNjMxIDMuODEzMThDMTAuMjMwOSA0LjMyODk1IDkuODEyMjkgNC45MTY3MyA5LjIwOTE4IDUuMTY2NEM5LjE3MDQ0IDUuMTgyNDQgOS4xMzE4NyA1LjE5ODc5IDkuMDkzNDcgNS4yMTU0NUM4LjQ2NTM4IDUuNDg3OTQgNy43MDU2OSA1LjM1MTU3IDcuMDIzMjggNS4yOTYxOUM2LjUyODMgNS4yNTYwMSA2LjAxOTc4IDUuNDI4MjUgNS42NDU1OCA1LjgxMTJDNS4yNjY5MyA2LjE5ODcxIDUuMTA3MTUgNi43MTg3MiA1LjE2NDQ3IDcuMjE4MDZDNS4yNDExNiA3Ljg4NjE5IDUuMzkzMTMgOC42MjE3NCA1LjEzNjU3IDkuMjQzNEM0Ljg5Mjc2IDkuODM0MTcgNC4zMTczMiAxMC4yNTExIDMuODA4NCAxMC42Mzc3QzMuMzY1MzYgMTAuOTc0MyAzLjA3OTI4IDExLjUwNjggMy4wNzkyOCAxMi4xMDYxQzMuMDc5MjggMTIuNzA2IDMuMzY1OTUgMTMuMjM5IDMuODA5NzggMTMuNTc1NUM0LjMxODQ0IDEzLjk2MTIgNC44OTMyIDE0LjM3NzUgNS4xMzY3NiAxNC45Njc1QzUuMzkzNTMgMTUuNTg5NiA1LjI0MDc3IDE2LjMyNTggNS4xNjMxNSAxNi45OTQzQzUuMTA1MSAxNy40OTQzIDUuMjY0NzkgMTguMDE1MyA1LjY0NDAxIDE4LjQwMzRDNi4wMTg2NCAxOC43ODY4IDYuNTI3OSAxOC45NTkgNy4wMjM0MyAxOC45MTgzQzcuNzA3MDUgMTguODYyMSA4LjQ2ODM1IDE4LjcyNDMgOS4wOTc3NyAxOC45OTY5QzkuMTMzNzggMTkuMDEyNSA5LjE2OTkzIDE5LjAyNzggOS4yMDYyMiAxOS4wNDI5QzkuODEwNTIgMTkuMjkzMyAxMC4yMjk0IDE5Ljg4MzIgMTAuNjI5OCAyMC40MDA1QzEwLjk2NjkgMjAuODM1OSAxMS40OTQ3IDIxLjExNjMgMTIuMDg4IDIxLjExNjNDMTIuNjgzIDIxLjExNjMgMTMuMjEyMiAyMC44MzQzIDEzLjU0OTEgMjAuMzk2NkMxMy45NDgxIDE5Ljg3ODMgMTQuMzY1NCAxOS4yODczIDE0Ljk2OSAxOS4wMzUzQzE1LjAwMDUgMTkuMDIyMSAxNS4wMzE4IDE5LjAwODggMTUuMDYzMSAxOC45OTUyQzE1LjY5NjMgMTguNzIwNSAxNi40NjM2IDE4Ljg2MTIgMTcuMTUxNiAxOC45MTgyQzE3LjY0NzUgMTguOTU5MiAxOC4xNTcyIDE4Ljc4NzEgMTguNTMyMSAxOC40MDM0QzE4LjkxNzkgMTguMDA4NSAxOS4wNzY1IDE3LjQ3NjEgMTkuMDA5OCAxNi45NjgyQzE4LjkyMjkgMTYuMzA3NiAxOC43NjgyIDE1LjU3OTMgMTkuMDIyIDE0Ljk2MzJDMTkuMjYzNCAxNC4zNzc0IDE5LjgzNiAxMy45NjY0IDIwLjM0NiAxMy41OTA2QzIwLjgwMTMgMTMuMjU1IDIxLjA5NjcgMTIuNzE1IDIxLjA5NjcgMTIuMTA2MUMyMS4wOTY3IDExLjQ5NzcgMjAuODAxOSAxMC45NTgyIDIwLjM0NzQgMTAuNjIyNkMxOS44MzcyIDEwLjI0NTggMTkuMjYzOCA5LjgzNDI2IDE5LjAyMjIgOS4yNDc3OFoiIC8+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xMi4wMDAyIDE1LjEwNTFDMTMuNjU3IDE1LjEwNTEgMTUuMDAwMiAxMy43NjIgMTUuMDAwMiAxMi4xMDUxQzE1LjAwMDIgMTAuNDQ4MiAxMy42NTcgOS4xMDUxIDEyLjAwMDIgOS4xMDUxQzEwLjM0MzMgOS4xMDUxIDkuMDAwMTggMTAuNDQ4MiA5LjAwMDE4IDEyLjEwNTFDOS4wMDAxOCAxMy43NjIgMTAuMzQzMyAxNS4xMDUxIDEyLjAwMDIgMTUuMTA1MVoiIC8+Cjwvc3ZnPg==)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Settings = createSupabaseIcon('Settings', [\n  [\n    'path',\n    {\n      d: 'M19.0222 9.24778C18.7686 8.63209 18.9226 7.90445 19.0085 7.24413C19.0745 6.73688 18.9158 6.20546 18.5306 5.8112C18.1561 5.42795 17.6471 5.25574 17.1517 5.29628C16.465 5.35248 15.6993 5.49169 15.0673 5.2171C15.0337 5.20249 15 5.18812 14.9661 5.17399C14.3637 4.92272 13.9467 4.33388 13.548 3.81707C13.211 3.38025 12.6823 3.09888 12.088 3.09888C11.4954 3.09888 10.9681 3.37859 10.631 3.81318C10.2309 4.32895 9.81229 4.91673 9.20918 5.1664C9.17044 5.18244 9.13187 5.19879 9.09347 5.21545C8.46538 5.48794 7.70569 5.35157 7.02328 5.29619C6.5283 5.25601 6.01978 5.42825 5.64558 5.8112C5.26693 6.19871 5.10715 6.71872 5.16447 7.21806C5.24116 7.88619 5.39313 8.62174 5.13657 9.2434C4.89276 9.83417 4.31732 10.2511 3.8084 10.6377C3.36536 10.9743 3.07928 11.5068 3.07928 12.1061C3.07928 12.706 3.36595 13.239 3.80978 13.5755C4.31844 13.9612 4.8932 14.3775 5.13676 14.9675C5.39353 15.5896 5.24077 16.3258 5.16315 16.9943C5.1051 17.4943 5.26479 18.0153 5.64401 18.4034C6.01864 18.7868 6.5279 18.959 7.02343 18.9183C7.70705 18.8621 8.46835 18.7243 9.09777 18.9969C9.13378 19.0125 9.16993 19.0278 9.20622 19.0429C9.81052 19.2933 10.2294 19.8832 10.6298 20.4005C10.9669 20.8359 11.4947 21.1163 12.088 21.1163C12.683 21.1163 13.2122 20.8343 13.5491 20.3966C13.9481 19.8783 14.3654 19.2873 14.969 19.0353C15.0005 19.0221 15.0318 19.0088 15.0631 18.9952C15.6963 18.7205 16.4636 18.8612 17.1516 18.9182C17.6475 18.9592 18.1572 18.7871 18.5321 18.4034C18.9179 18.0085 19.0765 17.4761 19.0098 16.9682C18.9229 16.3076 18.7682 15.5793 19.022 14.9632C19.2634 14.3774 19.836 13.9664 20.346 13.5906C20.8013 13.255 21.0967 12.715 21.0967 12.1061C21.0967 11.4977 20.8019 10.9582 20.3474 10.6226C19.8372 10.2458 19.2638 9.83426 19.0222 9.24778Z',\n      key: '102x66',\n    },\n  ],\n  [\n    'path',\n    {\n      d: 'M12.0002 15.1051C13.657 15.1051 15.0002 13.762 15.0002 12.1051C15.0002 10.4482 13.657 9.1051 12.0002 9.1051C10.3433 9.1051 9.00018 10.4482 9.00018 12.1051C9.00018 13.762 10.3433 15.1051 12.0002 15.1051Z',\n      key: '153c57',\n    },\n  ],\n]);\n\nexport default Settings;\n",
+  component: React.lazy(() => import('icons/src/icons/settings')),
+  import: "import { Settings } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M19.0222 9.24778C18.7686 8.63209 18.9226 7.90445 19.0085 7.24413C19.0745 6.73688 18.9158 6.20546 18.5306 5.8112C18.1561 5.42795 17.6471 5.25574 17.1517 5.29628C16.465 5.35248 15.6993 5.49169 15.0673 5.2171C15.0337 5.20249 15 5.18812 14.9661 5.17399C14.3637 4.92272 13.9467 4.33388 13.548 3.81707C13.211 3.38025 12.6823 3.09888 12.088 3.09888C11.4954 3.09888 10.9681 3.37859 10.631 3.81318C10.2309 4.32895 9.81229 4.91673 9.20918 5.1664C9.17044 5.18244 9.13187 5.19879 9.09347 5.21545C8.46538 5.48794 7.70569 5.35157 7.02328 5.29619C6.5283 5.25601 6.01978 5.42825 5.64558 5.8112C5.26693 6.19871 5.10715 6.71872 5.16447 7.21806C5.24116 7.88619 5.39313 8.62174 5.13657 9.2434C4.89276 9.83417 4.31732 10.2511 3.8084 10.6377C3.36536 10.9743 3.07928 11.5068 3.07928 12.1061C3.07928 12.706 3.36595 13.239 3.80978 13.5755C4.31844 13.9612 4.8932 14.3775 5.13676 14.9675C5.39353 15.5896 5.24077 16.3258 5.16315 16.9943C5.1051 17.4943 5.26479 18.0153 5.64401 18.4034C6.01864 18.7868 6.5279 18.959 7.02343 18.9183C7.70705 18.8621 8.46835 18.7243 9.09777 18.9969C9.13378 19.0125 9.16993 19.0278 9.20622 19.0429C9.81052 19.2933 10.2294 19.8832 10.6298 20.4005C10.9669 20.8359 11.4947 21.1163 12.088 21.1163C12.683 21.1163 13.2122 20.8343 13.5491 20.3966C13.9481 19.8783 14.3654 19.2873 14.969 19.0353C15.0005 19.0221 15.0318 19.0088 15.0631 18.9952C15.6963 18.7205 16.4636 18.8612 17.1516 18.9182C17.6475 18.9592 18.1572 18.7871 18.5321 18.4034C18.9179 18.0085 19.0765 17.4761 19.0098 16.9682C18.9229 16.3076 18.7682 15.5793 19.022 14.9632C19.2634 14.3774 19.836 13.9664 20.346 13.5906C20.8013 13.255 21.0967 12.715 21.0967 12.1061C21.0967 11.4977 20.8019 10.9582 20.3474 10.6226C19.8372 10.2458 19.2638 9.83426 19.0222 9.24778Z\" />\n    <path\n        d=\"M12.0002 15.1051C13.657 15.1051 15.0002 13.762 15.0002 12.1051C15.0002 10.4482 13.657 9.1051 12.0002 9.1051C10.3433 9.1051 9.00018 10.4482 9.00018 12.1051C9.00018 13.762 10.3433 15.1051 12.0002 15.1051Z\" />\n</svg>",
+  jsx: "import { Settings } from \"icons\"\n  <Settings/>\n  "
+},
+{
+  name: "sql-editor",
+  componentName: "SqlEditor",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name SqlEditor\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03Ljg5ODQ0IDguNDM0MkwxMS41MDA0IDEyLjAzNTZMNy44OTg0NCAxNS42Mzc1TTEyIDE1LjMyOTJIMTYuNU01IDIxLjEwNTVIMTlDMjAuMTA0NiAyMS4xMDU1IDIxIDIwLjIxIDIxIDE5LjEwNTVWNS4xMDU0N0MyMSA0LjAwMDkgMjAuMTA0NiAzLjEwNTQ3IDE5IDMuMTA1NDdINUMzLjg5NTQzIDMuMTA1NDcgMyA0LjAwMDkgMyA1LjEwNTQ3VjE5LjEwNTVDMyAyMC4yMSAzLjg5NTQzIDIxLjEwNTUgNSAyMS4xMDU1WiIgLz4KPC9zdmc+)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst SqlEditor = createSupabaseIcon('SqlEditor', [\n  [\n    'path',\n    {\n      d: 'M7.89844 8.4342L11.5004 12.0356L7.89844 15.6375M12 15.3292H16.5M5 21.1055H19C20.1046 21.1055 21 20.21 21 19.1055V5.10547C21 4.0009 20.1046 3.10547 19 3.10547H5C3.89543 3.10547 3 4.0009 3 5.10547V19.1055C3 20.21 3.89543 21.1055 5 21.1055Z',\n      key: 'orzc99',\n    },\n  ],\n]);\n\nexport default SqlEditor;\n",
+  component: React.lazy(() => import('icons/src/icons/sql-editor')),
+  import: "import { SqlEditor } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M7.89844 8.4342L11.5004 12.0356L7.89844 15.6375M12 15.3292H16.5M5 21.1055H19C20.1046 21.1055 21 20.21 21 19.1055V5.10547C21 4.0009 20.1046 3.10547 19 3.10547H5C3.89543 3.10547 3 4.0009 3 5.10547V19.1055C3 20.21 3.89543 21.1055 5 21.1055Z\" />\n</svg>",
+  jsx: "import { SqlEditor } from \"icons\"\n  <SqlEditor/>\n  "
+},
+{
+  name: "storage",
+  componentName: "Storage",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name Storage\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0xOS40OTk1IDExLjM2ODVWOC41MDcyNUwxNC4wNzIzIDMuMTA1ODRINS40OTk1MUM0Ljk0NzIyIDMuMTA1ODQgNC40OTk1MSAzLjU1MzU1IDQuNDk5NTEgNC4xMDU4NFY5LjEwNTFNMTkuNDQ2OCA4LjQ4MjE4TDE0LjA3MDEgMy4xMDU0N0wxNC4wNzAxIDcuNDgyMThDMTQuMDcwMSA4LjAzNDQ2IDE0LjUxNzggOC40ODIxOCAxNS4wNzAxIDguNDgyMThMMTkuNDQ2OCA4LjQ4MjE4Wk02Ljg2Njc1IDkuMTA1MUgzLjk2MDQ1QzMuNDA4MTYgOS4xMDUxIDIuOTYwNDUgOS41NTI4MiAyLjk2MDQ1IDEwLjEwNTFWMTkuMTA1MUMyLjk2MDQ1IDIwLjIwOTcgMy44NTU4OCAyMS4xMDUxIDQuOTYwNDUgMjEuMTA1MUgxOC45NjA0QzIwLjA2NSAyMS4xMDUxIDIwLjk2MDQgMjAuMjA5NyAyMC45NjA0IDE5LjEwNTFWMTIuMzY4NUMyMC45NjA0IDExLjgxNjIgMjAuNTEyNyAxMS4zNjg1IDE5Ljk2MDUgMTEuMzY4NUg5Ljk4NjIyQzkuNzIzODIgMTEuMzY4NSA5LjQ3MTk0IDExLjI2NTQgOS4yODQ4OSAxMS4wODEzTDcuNTY4MDggOS4zOTIyNkM3LjM4MTAzIDkuMjA4MjQgNy4xMjkxNSA5LjEwNTEgNi44NjY3NSA5LjEwNTFaIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst Storage = createSupabaseIcon('Storage', [\n  [\n    'path',\n    {\n      d: 'M19.4995 11.3685V8.50725L14.0723 3.10584H5.49951C4.94722 3.10584 4.49951 3.55355 4.49951 4.10584V9.1051M19.4468 8.48218L14.0701 3.10547L14.0701 7.48218C14.0701 8.03446 14.5178 8.48218 15.0701 8.48218L19.4468 8.48218ZM6.86675 9.1051H3.96045C3.40816 9.1051 2.96045 9.55282 2.96045 10.1051V19.1051C2.96045 20.2097 3.85588 21.1051 4.96045 21.1051H18.9604C20.065 21.1051 20.9604 20.2097 20.9604 19.1051V12.3685C20.9604 11.8162 20.5127 11.3685 19.9605 11.3685H9.98622C9.72382 11.3685 9.47194 11.2654 9.28489 11.0813L7.56808 9.39226C7.38103 9.20824 7.12915 9.1051 6.86675 9.1051Z',\n      key: '1liyj6',\n    },\n  ],\n]);\n\nexport default Storage;\n",
+  component: React.lazy(() => import('icons/src/icons/storage')),
+  import: "import { Storage } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M19.4995 11.3685V8.50725L14.0723 3.10584H5.49951C4.94722 3.10584 4.49951 3.55355 4.49951 4.10584V9.1051M19.4468 8.48218L14.0701 3.10547L14.0701 7.48218C14.0701 8.03446 14.5178 8.48218 15.0701 8.48218L19.4468 8.48218ZM6.86675 9.1051H3.96045C3.40816 9.1051 2.96045 9.55282 2.96045 10.1051V19.1051C2.96045 20.2097 3.85588 21.1051 4.96045 21.1051H18.9604C20.065 21.1051 20.9604 20.2097 20.9604 19.1051V12.3685C20.9604 11.8162 20.5127 11.3685 19.9605 11.3685H9.98622C9.72382 11.3685 9.47194 11.2654 9.28489 11.0813L7.56808 9.39226C7.38103 9.20824 7.12915 9.1051 6.86675 9.1051Z\" />\n</svg>",
+  jsx: "import { Storage } from \"icons\"\n  <Storage/>\n  "
+},
+{
+  name: "table-editor",
+  componentName: "TableEditor",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name TableEditor\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik0yLjk3MDcgMTUuMzQ5NEwyMC45NzA3IDE1LjM1NU0yMC45NDA1IDkuNjE1ODhIMi45OTY5OU04Ljc3NjYxIDkuNjE1ODhWMjEuMTM2N00yMC45NDA1IDUuODU1NDdWMTkuMTM2N0MyMC45NDA1IDIwLjI0MTMgMjAuMDQ1MSAyMS4xMzY3IDE4Ljk0MDUgMjEuMTM2N0g0Ljk5Njk5QzMuODkyNDIgMjEuMTM2NyAyLjk5Njk5IDIwLjI0MTMgMi45OTY5OSAxOS4xMzY3VjUuODU1NDdDMi45OTY5OSA0Ljc1MDkgMy44OTI0MiAzLjg1NTQ3IDQuOTk2OTkgMy44NTU0N0gxOC45NDA1QzIwLjA0NTEgMy44NTU0NyAyMC45NDA1IDQuNzUwOSAyMC45NDA1IDUuODU1NDdaIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst TableEditor = createSupabaseIcon('TableEditor', [\n  [\n    'path',\n    {\n      d: 'M2.9707 15.3494L20.9707 15.355M20.9405 9.61588H2.99699M8.77661 9.61588V21.1367M20.9405 5.85547V19.1367C20.9405 20.2413 20.0451 21.1367 18.9405 21.1367H4.99699C3.89242 21.1367 2.99699 20.2413 2.99699 19.1367V5.85547C2.99699 4.7509 3.89242 3.85547 4.99699 3.85547H18.9405C20.0451 3.85547 20.9405 4.7509 20.9405 5.85547Z',\n      key: '1qrasg',\n    },\n  ],\n]);\n\nexport default TableEditor;\n",
+  component: React.lazy(() => import('icons/src/icons/table-editor')),
+  import: "import { TableEditor } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M2.9707 15.3494L20.9707 15.355M20.9405 9.61588H2.99699M8.77661 9.61588V21.1367M20.9405 5.85547V19.1367C20.9405 20.2413 20.0451 21.1367 18.9405 21.1367H4.99699C3.89242 21.1367 2.99699 20.2413 2.99699 19.1367V5.85547C2.99699 4.7509 3.89242 3.85547 4.99699 3.85547H18.9405C20.0451 3.85547 20.9405 4.7509 20.9405 5.85547Z\" />\n</svg>",
+  jsx: "import { TableEditor } from \"icons\"\n  <TableEditor/>\n  "
+},
+{
+  name: "user",
+  componentName: "User",
+  deprecated: false,
+  raw: "import createSupabaseIcon from '../createSupabaseIcon';\n\n/**\n * @component @name User\n * @description Supabase SVG icon component, renders SVG Element with children.\n *\n * @preview ![img](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiICAgIHN0cm9rZS13aWR0aD0iMSI+CiAgICA8cGF0aAogICAgICAgIGQ9Ik03LjA2NDczIDE5LjYzMjhDNC42MTY0OCAxOC4wMjQ0IDMgMTUuMjUzNyAzIDEyLjEwNTVDMyA3LjEzNDkxIDcuMDI5NDQgMy4xMDU0NyAxMiAzLjEwNTQ3QzE2Ljk3MDYgMy4xMDU0NyAyMSA3LjEzNDkxIDIxIDEyLjEwNTVDMjEgMTUuMjUzNyAxOS40MjczIDE4LjAwOTQgMTYuOTc5IDE5LjYxNzhNMTYuOTc5OSAyMi4yODQ0VjE5LjcxMzZDMTYuOTc5OSAxNy4wMjU4IDE0LjgwMTEgMTQuODQ2OSAxMi4xMTMzIDE0Ljg0NjlDOS40MjU0NyAxNC44NDY5IDcuMjQ2NTggMTcuMDI1OCA3LjI0NjU4IDE5LjcxMzZWMjIuMjg0NE0xNSAxMS44NDY5QzE1IDEzLjUwMzggMTMuNjU2OSAxNC44NDY5IDEyIDE0Ljg0NjlDMTAuMzQzMSAxNC44NDY5IDkgMTMuNTAzOCA5IDExLjg0NjlDOSAxMC4xOTAxIDEwLjM0MzEgOC44NDY5MiAxMiA4Ljg0NjkyQzEzLjY1NjkgOC44NDY5MiAxNSAxMC4xOTAxIDE1IDExLjg0NjlaIiAvPgo8L3N2Zz4=)\n *\n * @param {Object} props - Supabase icons props and any valid SVG attribute\n * @returns {JSX.Element} JSX Element\n *\n */\nconst User = createSupabaseIcon('User', [\n  [\n    'path',\n    {\n      d: 'M7.06473 19.6328C4.61648 18.0244 3 15.2537 3 12.1055C3 7.13491 7.02944 3.10547 12 3.10547C16.9706 3.10547 21 7.13491 21 12.1055C21 15.2537 19.4273 18.0094 16.979 19.6178M16.9799 22.2844V19.7136C16.9799 17.0258 14.8011 14.8469 12.1133 14.8469C9.42547 14.8469 7.24658 17.0258 7.24658 19.7136V22.2844M15 11.8469C15 13.5038 13.6569 14.8469 12 14.8469C10.3431 14.8469 9 13.5038 9 11.8469C9 10.1901 10.3431 8.84692 12 8.84692C13.6569 8.84692 15 10.1901 15 11.8469Z',\n      key: '173y10',\n    },\n  ],\n]);\n\nexport default User;\n",
+  component: React.lazy(() => import('icons/src/icons/user')),
+  import: "import { User } from 'icons'",
+  svg: "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\"\n    stroke-width=\"1\">\n    <path\n        d=\"M7.06473 19.6328C4.61648 18.0244 3 15.2537 3 12.1055C3 7.13491 7.02944 3.10547 12 3.10547C16.9706 3.10547 21 7.13491 21 12.1055C21 15.2537 19.4273 18.0094 16.979 19.6178M16.9799 22.2844V19.7136C16.9799 17.0258 14.8011 14.8469 12.1133 14.8469C9.42547 14.8469 7.24658 17.0258 7.24658 19.7136V22.2844M15 11.8469C15 13.5038 13.6569 14.8469 12 14.8469C10.3431 14.8469 9 13.5038 9 11.8469C9 10.1901 10.3431 8.84692 12 8.84692C13.6569 8.84692 15 10.1901 15 11.8469Z\" />\n</svg>",
+  jsx: "import { User } from \"icons\"\n  <User/>\n  "
+}
+]
\ No newline at end of file
diff --git a/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx b/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx
index 4f4190aa72..6e620a1dd2 100644
--- a/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx
+++ b/packages/ui-patterns/AssistantChat/AssistantChatForm.tsx
@@ -22,6 +22,8 @@ export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
   icon?: React.ReactNode
   /* The function to handle the form submission */
   onSubmit: React.FormHTMLAttributes<HTMLFormElement>['onSubmit']
+  /* The placeholder of the textarea */
+  placeholder?: string
 }
 
 const AssistantChatForm = React.forwardRef<HTMLFormElement, FormProps>(
@@ -36,6 +38,7 @@ const AssistantChatForm = React.forwardRef<HTMLFormElement, FormProps>(
       onValueChange,
       setCommandsOpen,
       onSubmit,
+      placeholder,
       ...props
     },
     ref
@@ -98,10 +101,10 @@ const AssistantChatForm = React.forwardRef<HTMLFormElement, FormProps>(
           contentEditable
           aria-expanded={false}
           className={cn(
-            icon && 'pl-12',
+            icon ? 'pl-12' : '',
             'transition-all text-sm pr-10 rounded-[18px] resize-none box-border leading-6'
           )}
-          placeholder={props.placeholder}
+          placeholder={placeholder}
           spellCheck={false}
           value={value}
           onChange={(event: ChangeEvent<HTMLTextAreaElement>) => onValueChange(event)}
diff --git a/packages/ui-patterns/Dialogs/ConfirmationModal.tsx b/packages/ui-patterns/Dialogs/ConfirmationModal.tsx
index ec42d30c5f..c575c4c9d8 100644
--- a/packages/ui-patterns/Dialogs/ConfirmationModal.tsx
+++ b/packages/ui-patterns/Dialogs/ConfirmationModal.tsx
@@ -48,7 +48,7 @@ const ConfirmationModal = forwardRef<
       cancelLabel = 'Cancel',
       confirmLabel = 'Submit',
       confirmLabelLoading,
-      alert,
+      alert = undefined,
       children,
       variant = 'default',
       disabled,
diff --git a/packages/ui-patterns/Dialogs/TextConfirmModal.tsx b/packages/ui-patterns/Dialogs/TextConfirmModal.tsx
index d3eb112945..d92dc39a8f 100644
--- a/packages/ui-patterns/Dialogs/TextConfirmModal.tsx
+++ b/packages/ui-patterns/Dialogs/TextConfirmModal.tsx
@@ -37,7 +37,7 @@ export interface TextConfirmModalProps {
   text?: string | ReactNode
   onConfirm: () => void
   onCancel: () => void
-  variant: React.ComponentProps<typeof Alert_Shadcn_>['variant']
+  variant?: React.ComponentProps<typeof Alert_Shadcn_>['variant']
   alert?: {
     base?: React.ComponentProps<typeof Alert_Shadcn_>
     title?: string
@@ -159,7 +159,7 @@ const TextConfirmModal = forwardRef<
               />
               <div className="flex gap-2">
                 {!blockDeleteButton && (
-                  <Button size="medium" block type="default" disabled={loading}>
+                  <Button size="medium" block type="default" disabled={loading} onClick={onCancel}>
                     {cancelLabel}
                   </Button>
                 )}
diff --git a/packages/ui/src/components/PromoToast/PromoBg.tsx b/packages/ui-patterns/PromoToast/PromoBg.tsx
similarity index 99%
rename from packages/ui/src/components/PromoToast/PromoBg.tsx
rename to packages/ui-patterns/PromoToast/PromoBg.tsx
index fd88ddd9db..b2d88078d2 100644
--- a/packages/ui/src/components/PromoToast/PromoBg.tsx
+++ b/packages/ui-patterns/PromoToast/PromoBg.tsx
@@ -1,4 +1,4 @@
-import { cn } from '../../lib/utils/cn'
+import { cn } from 'ui/src/lib/utils/cn'
 
 interface Props {
   className?: string
diff --git a/packages/ui/src/components/PromoToast/PromoToast.tsx b/packages/ui-patterns/PromoToast/PromoToast.tsx
similarity index 89%
rename from packages/ui/src/components/PromoToast/PromoToast.tsx
rename to packages/ui-patterns/PromoToast/PromoToast.tsx
index 6db9b00e07..23e1755636 100644
--- a/packages/ui/src/components/PromoToast/PromoToast.tsx
+++ b/packages/ui-patterns/PromoToast/PromoToast.tsx
@@ -3,8 +3,11 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
-import { Button, cn } from 'ui'
+import { cn } from 'ui/src/lib/utils/cn'
+import { Button } from 'ui/src/components/Button/Button'
 import { LOCAL_STORAGE_KEYS } from 'common'
+import CountdownComponent from 'ui/src/layout/banners/LW11CountdownBanner/Countdown'
+import announcement from 'ui/src/layout/banners/data/Announcement.json'
 import { useTheme } from 'next-themes'
 
 const LW11BGDark =
diff --git a/packages/ui/src/components/PromoToast/index.ts b/packages/ui-patterns/PromoToast/index.ts
similarity index 100%
rename from packages/ui/src/components/PromoToast/index.ts
rename to packages/ui-patterns/PromoToast/index.ts
diff --git a/packages/ui-patterns/form/FormItemLayout/FormItemLayout.stories.tsx b/packages/ui-patterns/form/FormItemLayout/FormItemLayout.stories.tsx
index 4858145c9a..1d44895b3c 100644
--- a/packages/ui-patterns/form/FormItemLayout/FormItemLayout.stories.tsx
+++ b/packages/ui-patterns/form/FormItemLayout/FormItemLayout.stories.tsx
@@ -102,7 +102,6 @@ export const Primary: Story = {
     label: 'Username',
     description: 'this is the description',
     labelOptional: 'optional',
-    placeholder: 'shadcn',
   },
 }
 
@@ -162,7 +161,6 @@ export const withSelect: Story = {
     label: 'Username',
     description: 'this is the description',
     labelOptional: 'optional',
-    placeholder: 'shadcn',
   },
 }
 
@@ -215,7 +213,6 @@ export const withLayoutChange: Story = {
     label: 'Username',
     description: 'this is the description',
     labelOptional: 'optional',
-    placeholder: 'shadcn',
   },
 }
 
@@ -282,6 +279,5 @@ export const withCalendar: Story = {
     label: 'Date of birth',
     description: 'Your date of birth is used to calculate your age.',
     labelOptional: 'optional',
-    placeholder: 'shadcn',
   },
 }
diff --git a/packages/ui-patterns/form/FormLayout.tsx b/packages/ui-patterns/form/FormLayout.tsx
index 6d5c2e5e23..852f7e9287 100644
--- a/packages/ui-patterns/form/FormLayout.tsx
+++ b/packages/ui-patterns/form/FormLayout.tsx
@@ -144,11 +144,7 @@ export const Page = () => {
               layout="flex"
             >
               <FormControl_Shadcn_>
-                <Switch
-                  placeholder="mildtomato"
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
+                <Switch checked={field.value} onCheckedChange={field.onChange} />
               </FormControl_Shadcn_>
             </FormItemLayout>
           )}
diff --git a/packages/ui-patterns/form/FormLayout2.tsx b/packages/ui-patterns/form/FormLayout2.tsx
index 13f0736d18..c4ce253002 100644
--- a/packages/ui-patterns/form/FormLayout2.tsx
+++ b/packages/ui-patterns/form/FormLayout2.tsx
@@ -205,11 +205,7 @@ export const Page = () => {
                     layout="flex"
                   >
                     <FormControl_Shadcn_>
-                      <Switch
-                        placeholder="mildtomato"
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
+                      <Switch checked={field.value} onCheckedChange={field.onChange} />
                     </FormControl_Shadcn_>
                   </FormItemLayout>
                 )}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 6af504ed2c..8e388e2bdf 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -28,8 +28,7 @@ export * from './src/components/NavMenu'
 
 export * from './src/components/Modal'
 export * from './src/components/SidePanel'
-// export * from './src/components/ContextMenu'
-export * from './src/components/PromoToast'
+export * from './src/components/ContextMenu'
 export * from './src/components/Popover'
 export * from './src/layout/PortalToast'
 
@@ -60,9 +59,6 @@ export * from './src/components/Form'
 // layout
 export * from './src/components/LoadingLine'
 
-// banners
-export * from './src/layout/banners'
-
 // ai icon
 export * from './src/layout/ai-icon-animation'
 
@@ -78,10 +74,30 @@ export * from './src/components/shadcn/ui/toast'
 export * from './src/components/shadcn/ui/toaster'
 
 export * from './src/components/shadcn/ui/separator'
-export * from './src/components/shadcn/ui/context-menu'
 export * from './src/components/shadcn/ui/sheet'
 export * from './src/components/shadcn/ui/badge'
 export * from './src/components/shadcn/ui/input-otp'
+export * from './src/components/shadcn/ui/alert-dialog'
+export * from './src/components/shadcn/ui/avatar'
+export * from './src/components/shadcn/ui/drawer'
+export * from './src/components/shadcn/ui/menubar'
+export * from './src/components/shadcn/ui/navigation-menu'
+export * from './src/components/shadcn/ui/progress'
+export * from './src/components/shadcn/ui/skeleton'
+export * from './src/components/shadcn/ui/slider'
+export * from './src/components/shadcn/ui/textarea'
+export * from './src/components/shadcn/ui/toggle-group'
+
+export { Toggle as Toggle_Shadcn_ } from './src/components/shadcn/ui/toggle'
+
+export {
+  Card as Card_Shadcn_,
+  CardContent as CardContent_Shadcn_,
+  CardDescription as CardDescription_Shadcn_,
+  CardFooter as CardFooter_Shadcn_,
+  CardHeader as CardHeader_Shadcn_,
+  CardTitle as CardTitle_Shadcn_,
+} from './src/components/shadcn/ui/card'
 
 export {
   Command as Command_Shadcn_,
@@ -95,6 +111,24 @@ export {
   CommandSeparator as CommandSeparator_Shadcn_,
 } from './src/components/shadcn/ui/command'
 
+export {
+  ContextMenu as ContextMenu_Shadcn_,
+  ContextMenuTrigger as ContextMenuTrigger_Shadcn_,
+  ContextMenuContent as ContextMenuContent_Shadcn_,
+  ContextMenuItem as ContextMenuItem_Shadcn_,
+  ContextMenuSeparator as ContextMenuSeparator_Shadcn_,
+  ContextMenuLabel as ContextMenuLabel_Shadcn_,
+  ContextMenuRadioGroup as ContextMenuRadioGroup_Shadcn_,
+  ContextMenuRadioItem as ContextMenuRadioItem_Shadcn_,
+  ContextMenuShortcut as ContextMenuShortcut_Shadcn_,
+  ContextMenuSub as ContextMenuSub_Shadcn_,
+  ContextMenuSubContent as ContextMenuSubContent_Shadcn_,
+  ContextMenuSubTrigger as ContextMenuSubTrigger_Shadcn_,
+  ContextMenuCheckboxItem as ContextMenuCheckboxItem_Shadcn_,
+  ContextMenuGroup as ContextMenuGroup_Shadcn_,
+  ContextMenuPortal as ContextMenuPortal_Shadcn_,
+} from './src/components/shadcn/ui/context-menu'
+
 export * from './src/components/shadcn/ui/dialog'
 
 export {
@@ -165,6 +199,10 @@ export * from './src/components/shadcn/ui/scroll-area'
 
 export * from './src/components/shadcn/ui/hover-card'
 
+export * from './src/components/shadcn/ui/aspect-ratio'
+
+export * from './src/components/shadcn/ui/table'
+
 export {
   Collapsible as Collapsible_Shadcn_,
   CollapsibleTrigger as CollapsibleTrigger_Shadcn_,
@@ -176,7 +214,7 @@ export {
   TabsContent as TabsContent_Shadcn_,
   TabsList as TabsList_Shadcn_,
   TabsTrigger as TabsTrigger_Shadcn_,
-} from './src/components/shadcn/ui/tabs/tabs'
+} from './src/components/shadcn/ui/tabs'
 
 export {
   TooltipProvider as TooltipProvider_Shadcn_,
@@ -205,6 +243,8 @@ export * from './src/components/shadcn/ui/resizable'
 
 export * from './src/components/TextLink'
 
+export * from './src/layout/banners'
+
 // config
 
 // export { default as Config } from './../ui.config'
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 59ba45a1df..d43da4d95c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -47,6 +47,7 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.9",
@@ -86,6 +87,7 @@
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.6",
     "tailwindcss-radix": "^2.0.0",
+    "vaul": "^0.9.1",
     "yup": "^1.4.0",
     "zod": "^3.22.3"
   },
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index 9004999391..87a587be9b 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -136,6 +136,7 @@ function Select({
           value={value}
           disabled={disabled}
           required={required}
+          // @ts-ignore
           placeholder={placeholder}
           {...props}
         >
diff --git a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
index d33d0f92c4..d75c6e17d6 100644
--- a/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/alert-dialog.tsx
@@ -4,7 +4,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import * as React from 'react'
 
 import { cn } from '../../../lib/utils/cn'
-import { buttonVariants } from './button'
+import { buttonVariants } from './../../Button'
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -93,7 +93,11 @@ const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({ type: 'secondary', size: 'small' }), className)}
+    {...props}
+  />
 ))
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 
@@ -103,7 +107,7 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+    className={cn(buttonVariants({ type: 'default', size: 'small' }), 'mt-2 sm:mt-0', className)}
     {...props}
   />
 ))
diff --git a/packages/ui/src/components/shadcn/ui/avatar.tsx b/packages/ui/src/components/shadcn/ui/avatar.tsx
index 1f2da0ca07..19b83cf60b 100644
--- a/packages/ui/src/components/shadcn/ui/avatar.tsx
+++ b/packages/ui/src/components/shadcn/ui/avatar.tsx
@@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
+      'flex h-full w-full items-center justify-center rounded-full bg-surface-100 border',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/command.tsx b/packages/ui/src/components/shadcn/ui/command.tsx
index 0bd1ab0f50..b036990a45 100644
--- a/packages/ui/src/components/shadcn/ui/command.tsx
+++ b/packages/ui/src/components/shadcn/ui/command.tsx
@@ -91,7 +91,10 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground-light [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-foreground-muted',
+      'overflow-hidden p-1 text-foreground-light [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-foreground-muted',
+      '[&_[cmdk-group-heading]]:font-mono',
+      '[&_[cmdk-group-heading]]:uppercase',
+      '[&_[cmdk-group-heading]]:tracking-wider',
       className
     )}
     {...props}
diff --git a/packages/ui/src/components/shadcn/ui/dialog.tsx b/packages/ui/src/components/shadcn/ui/dialog.tsx
index 046d465235..57bee4b5df 100644
--- a/packages/ui/src/components/shadcn/ui/dialog.tsx
+++ b/packages/ui/src/components/shadcn/ui/dialog.tsx
@@ -61,7 +61,7 @@ const DialogContentVariants = cva(
     'data-[state=closed]:slide-out-to-left-[0%] data-[state=closed]:slide-out-to-top-[0%',
     'data-[state=open]:slide-in-from-left-[0%] data-[state=open]:slide-in-from-top-[0%]',
     'sm:rounded-lg md:w-full',
-    'bg-overlay'
+    'bg-studio'
   ),
   {
     variants: {
diff --git a/packages/ui/src/components/shadcn/ui/drawer.tsx b/packages/ui/src/components/shadcn/ui/drawer.tsx
new file mode 100644
index 0000000000..b37bb45a9a
--- /dev/null
+++ b/packages/ui/src/components/shadcn/ui/drawer.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '../../../lib/utils/cn'
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-black/80', className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/packages/ui/src/components/shadcn/ui/scroll-area.tsx b/packages/ui/src/components/shadcn/ui/scroll-area.tsx
index 37e002984f..1c813da8c4 100644
--- a/packages/ui/src/components/shadcn/ui/scroll-area.tsx
+++ b/packages/ui/src/components/shadcn/ui/scroll-area.tsx
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] shadow-[0_2px_10px]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
diff --git a/packages/ui/src/components/shadcn/ui/tabs/tabs.tsx b/packages/ui/src/components/shadcn/ui/tabs.tsx
similarity index 97%
rename from packages/ui/src/components/shadcn/ui/tabs/tabs.tsx
rename to packages/ui/src/components/shadcn/ui/tabs.tsx
index c05f1755dc..86b8c7b569 100644
--- a/packages/ui/src/components/shadcn/ui/tabs/tabs.tsx
+++ b/packages/ui/src/components/shadcn/ui/tabs.tsx
@@ -3,7 +3,7 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import * as React from 'react'
 
-import { cn } from '../../../../lib/utils/cn'
+import { cn } from '../../../lib/utils/cn'
 
 const Tabs = TabsPrimitive.Root
 
diff --git a/packages/ui/src/components/shadcn/ui/toggle-group.tsx b/packages/ui/src/components/shadcn/ui/toggle-group.tsx
new file mode 100644
index 0000000000..0ecbc1f046
--- /dev/null
+++ b/packages/ui/src/components/shadcn/ui/toggle-group.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../../lib/utils'
+import { toggleVariants } from './toggle'
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }