From a13f7037427491d03da4d3c8d4e602ca9ee2b227 Mon Sep 17 00:00:00 2001
From: Thibault Le Ouay <thibaultleouay@gmail.Com>
Date: Tue, 19 Sep 2023 21:46:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=98=B1=20extract=20ui=20=F0=9F=92=85=20(#?=
 =?UTF-8?q?309)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 😱 extract ui

* 🤯

* 🟢

* 😁

* 😁
---
 apps/web/package.json                         |  20 +-
 apps/web/src/app/_components/event-table.tsx  |   8 +-
 apps/web/src/app/_components/hero-form.tsx    |   4 +-
 apps/web/src/app/_components/input-search.tsx |   3 +-
 .../web/src/app/_components/submit-button.tsx |   3 +-
 .../incidents/_components/action-button.tsx   |  10 +-
 .../_components/delete-incident-update.tsx    |   9 +-
 .../incidents/_components/empty-state.tsx     |   3 +-
 .../incidents/edit/loading.tsx                |   3 +-
 .../[workspaceSlug]/incidents/loading.tsx     |   3 +-
 .../[workspaceSlug]/incidents/page.tsx        |   3 +-
 .../incidents/update/edit/loading.tsx         |   3 +-
 .../[workspaceSlug]/integrations/loading.tsx  |   3 +-
 .../[workspaceSlug]/integrations/page.tsx     |   4 +-
 .../monitors/[id]/data/loading.tsx            |   3 +-
 .../monitors/_components/action-button.tsx    |  10 +-
 .../monitors/_components/empty-state.tsx      |   3 +-
 .../[workspaceSlug]/monitors/edit/loading.tsx |   3 +-
 .../[workspaceSlug]/monitors/edit/page.tsx    |   2 +
 .../[workspaceSlug]/monitors/loading.tsx      |   3 +-
 .../[workspaceSlug]/monitors/page.tsx         |   3 +-
 .../_components/api-keys/create-form.tsx      |   5 +-
 .../api-keys/revoke-button.tsx.tsx            |   7 +-
 .../_components/api-keys/submit-button.tsx    |   3 +-
 .../billing/customer-portal-button.tsx        |   3 +-
 .../[workspaceSlug]/settings/loading.tsx      |   3 +-
 .../[workspaceSlug]/settings/page.tsx         |  10 +-
 .../_components/action-button.tsx             |  10 +-
 .../status-pages/_components/empty-state.tsx  |   2 +-
 .../edit/_components/pro-feature-alert.tsx    |   2 +-
 .../status-pages/edit/loading.tsx             |   3 +-
 .../status-pages/edit/page.tsx                |   3 +-
 .../[workspaceSlug]/status-pages/loading.tsx  |   3 +-
 .../[workspaceSlug]/status-pages/page.tsx     |   4 +-
 .../onboarding/_components/path.tsx           |   9 +-
 .../app/app/(dashboard)/onboarding/page.tsx   |   3 +-
 apps/web/src/app/blog/[slug]/page.tsx         |   3 +-
 apps/web/src/app/layout.tsx                   |   3 +-
 apps/web/src/app/not-found.tsx                |   3 +-
 apps/web/src/app/oss-friends/page.tsx         |   7 +-
 apps/web/src/app/page.tsx                     |   4 +-
 .../play/@modal/(..)monitor/[id]/modal.tsx    |   2 +-
 apps/web/src/app/play/toggle-button.tsx       |   6 +-
 .../[domain]/_components/navigation-link.tsx  |   2 +-
 .../[domain]/_components/user-button.tsx      |   2 +-
 .../src/components/dashboard/container.tsx    |   5 +-
 apps/web/src/components/dashboard/header.tsx  |   3 +-
 .../web/src/components/data-table/columns.tsx |   2 +-
 .../data-table/data-table-column-header.tsx   |   5 +-
 .../data-table-date-ranger-picker.tsx         |   7 +-
 .../data-table/data-table-faceted-filter.tsx  |  11 +-
 .../data-table/data-table-filter-input.tsx    |   2 +-
 .../data-table/data-table-pagination.tsx      |   4 +-
 .../data-table/data-table-row-action.tsx      |   7 +-
 .../data-table/data-table-toolbar.tsx         |   3 +-
 .../src/components/data-table/data-table.tsx  |   3 +-
 .../domains/domain-configuration.tsx          |   2 +-
 .../forms/advanced-monitor-form.tsx           |  13 +-
 .../components/forms/custom-domain-form.tsx   |   8 +-
 .../src/components/forms/incident-form.tsx    |  28 +-
 .../components/forms/incident-update-form.tsx |  24 +-
 .../src/components/forms/montitor-form.tsx    |  22 +-
 .../src/components/forms/skeleton-form.tsx    |   2 +-
 .../src/components/forms/status-page-form.tsx |  12 +-
 .../incidents/affected-monitors.tsx           |   3 +-
 apps/web/src/components/incidents/events.tsx  |   8 +-
 .../src/components/incidents/status-badge.tsx |   3 +-
 apps/web/src/components/layout/app-header.tsx |   4 +-
 apps/web/src/components/layout/app-menu.tsx   |   5 +-
 .../web/src/components/layout/back-button.tsx |   2 +-
 apps/web/src/components/layout/brand-name.tsx |   2 +-
 .../components/layout/marketing-header.tsx    |   3 +-
 .../src/components/layout/skeleton-tabs.tsx   |   2 +-
 apps/web/src/components/marketing/cards.tsx   |   3 +-
 apps/web/src/components/marketing/faqs.tsx    |   2 +-
 apps/web/src/components/marketing/plans.tsx   |   3 +-
 .../components/status-page/monitor-list.tsx   |   2 +-
 apps/web/src/components/tracker.tsx           |   8 +-
 apps/web/src/components/ui/auto-form.tsx      | 473 ----------------
 apps/web/src/hooks/use-toast-action.tsx       |   7 +-
 apps/web/tailwind.config.ts                   |   1 +
 packages/ui/Button.tsx                        |   7 -
 packages/ui/Header.tsx                        |   5 -
 packages/ui/index.tsx                         |   5 -
 packages/ui/package.json                      |  50 +-
 .../ui/src/components}/accordion.tsx          |   2 +-
 .../ui/src/components}/alert-dialog.tsx       |   4 +-
 .../ui/src/components}/alert.tsx              |   2 +-
 .../ui/src/components}/avatar.tsx             |   2 +-
 .../ui/src/components}/badge.tsx              |   2 +-
 .../button-with-disable-tooltip.tsx           |   2 +-
 .../ui/src/components}/button.tsx             |   2 +-
 .../ui/src/components}/calendar.tsx           |   4 +-
 .../ui/src/components}/card.tsx               |   2 +-
 .../ui/src/components}/checkbox.tsx           |   4 +-
 .../ui/src/components}/command.tsx            |   4 +-
 .../ui/src/components}/context-menu.tsx       |   2 +-
 .../ui/src/components}/date-picker.tsx        |  12 +-
 .../ui/src/components}/date-time-picker.tsx   |  16 +-
 .../ui/src/components}/dialog.tsx             |   2 +-
 .../ui/src/components}/dropdown-menu.tsx      |   2 +-
 .../ui/src/components}/form.tsx               |  20 +-
 .../ui/src/components}/hover-card.tsx         |   2 +-
 .../ui/src/components}/input-with-addons.tsx  |   2 +-
 .../ui/src/components}/input.tsx              |   2 +-
 .../ui/src/components}/label.tsx              |   2 +-
 .../ui/src/components}/popover.tsx            |   2 +-
 .../ui/src/components}/radio-group.tsx        |   2 +-
 .../ui/src/components}/select.tsx             |   2 +-
 .../ui/src/components}/separator.tsx          |   2 +-
 .../ui/src/components}/sheet.tsx              |   2 +-
 .../ui/src/components}/skeleton.tsx           |   2 +-
 .../ui/src/components}/switch.tsx             |   2 +-
 .../ui/src/components}/table.tsx              |   2 +-
 .../ui/src/components}/tabs.tsx               |   2 +-
 .../ui/src/components}/textarea.tsx           |   2 +-
 .../ui/src/components}/toast.tsx              |   4 +-
 .../ui/src/components}/toaster.tsx            |   4 +-
 .../ui/src/components}/tooltip.tsx            |   2 +-
 .../ui/src/components}/use-toast.ts           |   6 +-
 packages/ui/src/index.tsx                     | 168 ++++++
 packages/ui/src/lib/utils.ts                  |   7 +
 packages/ui/tailwind.config.ts                |  87 +++
 packages/ui/tsconfig.json                     |   7 +-
 packages/ui/turbo/generators/config.ts        |  30 --
 .../turbo/generators/templates/component.hbs  |  14 -
 pnpm-lock.yaml                                | 509 ++++++++++--------
 127 files changed, 866 insertions(+), 1053 deletions(-)
 delete mode 100644 apps/web/src/components/ui/auto-form.tsx
 delete mode 100644 packages/ui/Button.tsx
 delete mode 100644 packages/ui/Header.tsx
 delete mode 100644 packages/ui/index.tsx
 rename {apps/web/src/components/ui => packages/ui/src/components}/accordion.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/alert-dialog.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/alert.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/avatar.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/badge.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/button-with-disable-tooltip.tsx (96%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/button.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/calendar.tsx (96%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/card.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/checkbox.tsx (95%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/command.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/context-menu.tsx (99%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/date-picker.tsx (79%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/date-time-picker.tsx (88%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/dialog.tsx (99%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/dropdown-menu.tsx (99%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/form.tsx (89%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/hover-card.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/input-with-addons.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/input.tsx (95%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/label.tsx (95%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/popover.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/radio-group.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/select.tsx (99%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/separator.tsx (95%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/sheet.tsx (99%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/skeleton.tsx (87%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/switch.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/table.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/tabs.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/textarea.tsx (95%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/toast.tsx (98%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/toaster.tsx (89%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/tooltip.tsx (97%)
 rename {apps/web/src/components/ui => packages/ui/src/components}/use-toast.ts (95%)
 create mode 100644 packages/ui/src/index.tsx
 create mode 100644 packages/ui/src/lib/utils.ts
 create mode 100644 packages/ui/tailwind.config.ts
 delete mode 100644 packages/ui/turbo/generators/config.ts
 delete mode 100644 packages/ui/turbo/generators/templates/component.hbs

diff --git a/apps/web/package.json b/apps/web/package.json
index 95d00ebb9..114ca057f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -19,25 +19,8 @@
     "@openstatus/plans": "workspace:*",
     "@openstatus/tinybird": "workspace:*",
     "@openstatus/upstash": "workspace:*",
+    "@openstatus/ui": "workspace:*",
     "@openstatus/vercel": "workspace:*",
-    "@radix-ui/react-accordion": "1.1.2",
-    "@radix-ui/react-alert-dialog": "1.0.4",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-checkbox": "1.0.4",
-    "@radix-ui/react-context-menu": "^2.1.4",
-    "@radix-ui/react-dialog": "1.0.4",
-    "@radix-ui/react-dropdown-menu": "2.0.5",
-    "@radix-ui/react-hover-card": "1.0.6",
-    "@radix-ui/react-label": "2.0.2",
-    "@radix-ui/react-popover": "1.0.6",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-select": "1.2.2",
-    "@radix-ui/react-separator": "1.0.3",
-    "@radix-ui/react-slot": "1.0.2",
-    "@radix-ui/react-switch": "1.0.3",
-    "@radix-ui/react-tabs": "1.0.4",
-    "@radix-ui/react-toast": "1.1.4",
-    "@radix-ui/react-tooltip": "1.0.6",
     "@sentry/integrations": "7.65.0",
     "@sentry/nextjs": "7.65.0",
     "@stripe/stripe-js": "2.0.0",
@@ -82,7 +65,6 @@
     "svix": "1.4.12",
     "tailwind-merge": "1.13.2",
     "tailwindcss-animate": "1.0.6",
-    "ui": "workspace:*",
     "zod": "3.21.4"
   },
   "devDependencies": {
diff --git a/apps/web/src/app/_components/event-table.tsx b/apps/web/src/app/_components/event-table.tsx
index eeca608b2..b9a950ab8 100644
--- a/apps/web/src/app/_components/event-table.tsx
+++ b/apps/web/src/app/_components/event-table.tsx
@@ -4,10 +4,9 @@ import React from "react";
 import { formatDistance } from "date-fns";
 
 import type { Ping } from "@openstatus/tinybird";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
+  Badge,
+  Button,
   Table,
   TableBody,
   TableCaption,
@@ -15,7 +14,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
 
 export function EventTable({ events }: { events: Ping[] }) {
diff --git a/apps/web/src/app/_components/hero-form.tsx b/apps/web/src/app/_components/hero-form.tsx
index 5f8c7f1d6..49760f19f 100644
--- a/apps/web/src/app/_components/hero-form.tsx
+++ b/apps/web/src/app/_components/hero-form.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import { toast } from "@/components/ui/use-toast";
+import { Input, toast } from "@openstatus/ui";
+
 import { addToWaitlist, sendWaitingListEmail } from "../action";
 import { SubmitButton } from "./submit-button";
 
diff --git a/apps/web/src/app/_components/input-search.tsx b/apps/web/src/app/_components/input-search.tsx
index 2e0c12ce0..47bd8a18e 100644
--- a/apps/web/src/app/_components/input-search.tsx
+++ b/apps/web/src/app/_components/input-search.tsx
@@ -4,13 +4,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Command as CommandPrimitive, useCommandState } from "cmdk";
 
 import type { Ping } from "@openstatus/tinybird";
-
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandItem,
-} from "@/components/ui/command";
+} from "@openstatus/ui";
 
 // TODO: once stable, use the shallow route to store the search params inside of the search params
 
diff --git a/apps/web/src/app/_components/submit-button.tsx b/apps/web/src/app/_components/submit-button.tsx
index d288c8065..5bfce69f8 100644
--- a/apps/web/src/app/_components/submit-button.tsx
+++ b/apps/web/src/app/_components/submit-button.tsx
@@ -2,8 +2,9 @@
 
 import { experimental_useFormStatus as useFormStatus } from "react-dom";
 
+import { Button } from "@openstatus/ui";
+
 import { LoadingAnimation } from "@/components/loading-animation";
-import { Button } from "@/components/ui/button";
 
 export function SubmitButton() {
   const { pending } = useFormStatus();
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/action-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/action-button.tsx
index c1a8fb960..580ba0396 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/action-button.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/action-button.tsx
@@ -10,8 +10,6 @@ import {
   insertIncidentSchema,
   // insertIncidentUpdateSchema,
 } from "@openstatus/db/src/schema";
-
-import { LoadingAnimation } from "@/components/loading-animation";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,14 +20,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@openstatus/ui";
+
+import { LoadingAnimation } from "@/components/loading-animation";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/delete-incident-update.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/delete-incident-update.tsx
index 9383f7bc1..9450e7d9a 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/delete-incident-update.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/delete-incident-update.tsx
@@ -3,8 +3,6 @@
 import * as React from "react";
 import { useRouter } from "next/navigation";
 
-import { Icons } from "@/components/icons";
-import { LoadingAnimation } from "@/components/loading-animation";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -15,8 +13,11 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+  Button,
+} from "@openstatus/ui";
+
+import { Icons } from "@/components/icons";
+import { LoadingAnimation } from "@/components/loading-animation";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/empty-state.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/empty-state.tsx
index cd637e976..2c09dcdaf 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/empty-state.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/_components/empty-state.tsx
@@ -1,7 +1,8 @@
 import Link from "next/link";
 
+import { Button } from "@openstatus/ui";
+
 import { EmptyState as DefaultEmptyState } from "@/components/dashboard/empty-state";
-import { Button } from "@/components/ui/button";
 
 export function EmptyState() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/edit/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/edit/loading.tsx
index b4dafe86f..41fdbbaa9 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/edit/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/edit/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { SkeletonForm } from "@/components/forms/skeleton-form";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/loading.tsx
index 86c23b149..09bbd4330 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/loading.tsx
@@ -1,5 +1,6 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/page.tsx
index 320da2d3b..896683fa3 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/page.tsx
@@ -2,13 +2,14 @@ import * as React from "react";
 import Link from "next/link";
 import { formatDistance } from "date-fns";
 
+import { Button } from "@openstatus/ui";
+
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
 import { Icons } from "@/components/icons";
 import { AffectedMonitors } from "@/components/incidents/affected-monitors";
 import { Events } from "@/components/incidents/events";
 import { StatusBadge } from "@/components/incidents/status-badge";
-import { Button } from "@/components/ui/button";
 import { statusDict } from "@/data/incidents-dictionary";
 import { api } from "@/trpc/server";
 import { ActionButton } from "./_components/action-button";
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/update/edit/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/update/edit/loading.tsx
index b4dafe86f..41fdbbaa9 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/update/edit/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/incidents/update/edit/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { SkeletonForm } from "@/components/forms/skeleton-form";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/loading.tsx
index 86c23b149..09bbd4330 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/loading.tsx
@@ -1,5 +1,6 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/page.tsx
index a4b7ca3fa..e43a86641 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/integrations/page.tsx
@@ -2,10 +2,10 @@
 
 import * as React from "react";
 
+import { Badge, Button } from "@openstatus/ui";
+
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { api } from "@/trpc/client";
 
 export default async function IncidentPage({
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/loading.tsx
index 48991511e..ca16974a8 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/[id]/data/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/action-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/action-button.tsx
index d5c24a03c..5f27e321b 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/action-button.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/action-button.tsx
@@ -7,8 +7,6 @@ import { MoreVertical } from "lucide-react";
 import type * as z from "zod";
 
 import type { insertMonitorSchema } from "@openstatus/db/src/schema";
-
-import { LoadingAnimation } from "@/components/loading-animation";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,14 +17,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@openstatus/ui";
+
+import { LoadingAnimation } from "@/components/loading-animation";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/empty-state.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/empty-state.tsx
index 533aef4b0..6cb840eee 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/empty-state.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/_components/empty-state.tsx
@@ -1,7 +1,8 @@
 import Link from "next/link";
 
+import { Button } from "@openstatus/ui";
+
 import { EmptyState as DefaultEmptyState } from "@/components/dashboard/empty-state";
-import { Button } from "@/components/ui/button";
 
 export function EmptyState() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/loading.tsx
index b4dafe86f..41fdbbaa9 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { SkeletonForm } from "@/components/forms/skeleton-form";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/page.tsx
index b90a1a6dd..43bed916b 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/edit/page.tsx
@@ -1,6 +1,8 @@
 import { notFound } from "next/navigation";
 import * as z from "zod";
 
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { MonitorForm } from "@/components/forms/montitor-form";
 import { api } from "@/trpc/server";
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
index 42b107881..99f872a29 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
index b30beacc2..f684f5f1e 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/monitors/page.tsx
@@ -2,12 +2,11 @@ import * as React from "react";
 import Link from "next/link";
 
 import { allPlans } from "@openstatus/plans";
+import { Badge, ButtonWithDisableTooltip } from "@openstatus/ui";
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
 import { Limit } from "@/components/dashboard/limit";
-import { Badge } from "@/components/ui/badge";
-import { ButtonWithDisableTooltip } from "@/components/ui/button-with-disable-tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/trpc/server";
 import { ActionButton } from "./_components/action-button";
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/create-form.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/create-form.tsx
index 6ca8a0bb8..fe9ae8dc5 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/create-form.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/create-form.tsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import { useRouter } from "next/navigation";
 
-import { Icons } from "@/components/icons";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -12,7 +11,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+} from "@openstatus/ui";
+
+import { Icons } from "@/components/icons";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { copyToClipboard } from "@/lib/utils";
 import { create } from "./actions";
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/revoke-button.tsx.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/revoke-button.tsx.tsx
index 834db367c..fee6f7f24 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/revoke-button.tsx.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/revoke-button.tsx.tsx
@@ -3,7 +3,6 @@
 import * as React from "react";
 import { useRouter } from "next/navigation";
 
-import { LoadingAnimation } from "@/components/loading-animation";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,8 +13,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+  Button,
+} from "@openstatus/ui";
+
+import { LoadingAnimation } from "@/components/loading-animation";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { revoke } from "./actions";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/submit-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/submit-button.tsx
index 514126554..628d24c90 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/submit-button.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/api-keys/submit-button.tsx
@@ -2,8 +2,9 @@
 
 import { experimental_useFormStatus as useFormStatus } from "react-dom";
 
+import { Button } from "@openstatus/ui";
+
 import { LoadingAnimation } from "@/components/loading-animation";
-import { Button } from "@/components/ui/button";
 
 export function SubmitButton({ children }: { children?: React.ReactNode }) {
   const { pending } = useFormStatus();
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/billing/customer-portal-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/billing/customer-portal-button.tsx
index 895d50727..4efbeb54e 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/billing/customer-portal-button.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/_components/billing/customer-portal-button.tsx
@@ -3,8 +3,9 @@
 import { useTransition } from "react";
 import { useRouter } from "next/navigation";
 
+import { Button } from "@openstatus/ui";
+
 import { LoadingAnimation } from "@/components/loading-animation";
-import { Button } from "@/components/ui/button";
 import { api } from "@/trpc/client";
 
 interface Props {
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
index dfd67ade2..ca0444622 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/loading.tsx
@@ -1,5 +1,6 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
index 15775879d..f488da395 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/settings/page.tsx
@@ -1,8 +1,14 @@
 import * as React from "react";
 
+import {
+  Badge,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
-import { Badge } from "@/components/ui/badge";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/trpc/server";
 import { ApiKeys } from "./_components/api-keys/card";
 import { CustomerPortalButton } from "./_components/billing/customer-portal-button";
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/action-button.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/action-button.tsx
index 4885a9796..b1849fe0d 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/action-button.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/action-button.tsx
@@ -7,8 +7,6 @@ import { MoreVertical } from "lucide-react";
 import type * as z from "zod";
 
 import type { insertPageSchemaWithMonitors } from "@openstatus/db/src/schema";
-
-import { LoadingAnimation } from "@/components/loading-animation";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,14 +17,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@openstatus/ui";
+
+import { LoadingAnimation } from "@/components/loading-animation";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/empty-state.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/empty-state.tsx
index 31a8de733..624bf0f39 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/empty-state.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/_components/empty-state.tsx
@@ -2,9 +2,9 @@ import Link from "next/link";
 import type * as z from "zod";
 
 import type { allMonitorsSchema } from "@openstatus/db/src/schema";
+import { Button } from "@openstatus/ui";
 
 import { EmptyState as DefaultEmptyState } from "@/components/dashboard/empty-state";
-import { Button } from "@/components/ui/button";
 
 export function EmptyState({
   allMonitors,
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/_components/pro-feature-alert.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/_components/pro-feature-alert.tsx
index 08aec92a6..138a71553 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/_components/pro-feature-alert.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/_components/pro-feature-alert.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { AlertTriangle } from "lucide-react";
 
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@openstatus/ui";
 
 export function ProFeatureAlert() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/loading.tsx
index b4dafe86f..41fdbbaa9 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { SkeletonForm } from "@/components/forms/skeleton-form";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/page.tsx
index 975835bd8..7f99c45b7 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/edit/page.tsx
@@ -1,10 +1,11 @@
 import { notFound } from "next/navigation";
 import * as z from "zod";
 
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { CustomDomainForm } from "@/components/forms/custom-domain-form";
 import { StatusPageForm } from "@/components/forms/status-page-form";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { api } from "@/trpc/server";
 import { ProFeatureAlert } from "./_components/pro-feature-alert";
 
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/loading.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/loading.tsx
index 42b107881..99f872a29 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/loading.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/loading.tsx
@@ -1,6 +1,7 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
-import { Skeleton } from "@/components/ui/skeleton";
 
 export default function Loading() {
   return (
diff --git a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/page.tsx b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/page.tsx
index bb8974607..5ee81e667 100644
--- a/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/[workspaceSlug]/status-pages/page.tsx
@@ -2,13 +2,11 @@ import * as React from "react";
 import Link from "next/link";
 
 import { allPlans } from "@openstatus/plans";
+import { Badge, Button, ButtonWithDisableTooltip } from "@openstatus/ui";
 
 import { Container } from "@/components/dashboard/container";
 import { Header } from "@/components/dashboard/header";
 import { Limit } from "@/components/dashboard/limit";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { ButtonWithDisableTooltip } from "@/components/ui/button-with-disable-tooltip";
 import { cn } from "@/lib/utils";
 import { api } from "@/trpc/server";
 import { ActionButton } from "./_components/action-button";
diff --git a/apps/web/src/app/app/(dashboard)/onboarding/_components/path.tsx b/apps/web/src/app/app/(dashboard)/onboarding/_components/path.tsx
index e40120c8a..317ff6d7f 100644
--- a/apps/web/src/app/app/(dashboard)/onboarding/_components/path.tsx
+++ b/apps/web/src/app/app/(dashboard)/onboarding/_components/path.tsx
@@ -2,23 +2,22 @@
 
 import { useRouter } from "next/navigation";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
+  Badge,
+  Button,
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
+} from "@openstatus/ui";
+
 import useUpdateSearchParams from "@/hooks/use-update-search-params";
 
 export function Path() {
diff --git a/apps/web/src/app/app/(dashboard)/onboarding/page.tsx b/apps/web/src/app/app/(dashboard)/onboarding/page.tsx
index 57d27ad05..703def15c 100644
--- a/apps/web/src/app/app/(dashboard)/onboarding/page.tsx
+++ b/apps/web/src/app/app/(dashboard)/onboarding/page.tsx
@@ -2,10 +2,11 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import * as z from "zod";
 
+import { Button } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { MonitorForm } from "@/components/forms/montitor-form";
 import { StatusPageForm } from "@/components/forms/status-page-form";
-import { Button } from "@/components/ui/button";
 import { api } from "@/trpc/server";
 import { Description } from "./_components/description";
 import { Path } from "./_components/path";
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 3f6812ad4..e508f0edf 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -3,6 +3,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { allPosts } from "contentlayer/generated";
 
+import { Avatar, AvatarFallback, AvatarImage } from "@openstatus/ui";
+
 import {
   defaultMetadata,
   ogMetadata,
@@ -11,7 +13,6 @@ import {
 import { Mdx } from "@/components/content/mdx";
 import { Shell } from "@/components/dashboard/shell";
 import { BackButton } from "@/components/layout/back-button";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { formatDate } from "@/lib/utils";
 
 export const dynamic = "force-static";
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 7c1f7003f..dd9eab11f 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -6,13 +6,14 @@ import LocalFont from "next/font/local";
 import { ClerkProvider } from "@clerk/nextjs";
 import PlausibleProvider from "next-plausible";
 
+import { Toaster } from "@openstatus/ui";
+
 import {
   defaultMetadata,
   ogMetadata,
   twitterMetadata,
 } from "@/app/shared-metadata";
 import { TailwindIndicator } from "@/components/tailwind-indicator";
-import { Toaster } from "@/components/ui/toaster";
 import { ClientAnalytics } from "./_components/analytics";
 import Background from "./_components/background";
 
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index dc220e0e3..f235b35ec 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -1,8 +1,9 @@
 import Link from "next/link";
 
+import { Button } from "@openstatus/ui";
+
 import { Header } from "@/components/dashboard/header";
 import { Shell } from "@/components/dashboard/shell";
-import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
   return (
diff --git a/apps/web/src/app/oss-friends/page.tsx b/apps/web/src/app/oss-friends/page.tsx
index 1d8b479ee..ae1cd7efc 100644
--- a/apps/web/src/app/oss-friends/page.tsx
+++ b/apps/web/src/app/oss-friends/page.tsx
@@ -1,15 +1,16 @@
 import Link from "next/link";
 import { z } from "zod";
 
-import { Icons } from "@/components/icons";
-import { MarketingLayout } from "@/components/layout/marketing-layout";
 import {
   Card,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+} from "@openstatus/ui";
+
+import { Icons } from "@/components/icons";
+import { MarketingLayout } from "@/components/layout/marketing-layout";
 
 const OSSFriendSchema = z.object({
   href: z.string(),
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index b513cfd13..2a5ddd174 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,14 +1,14 @@
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
 
+import { Badge, Button } from "@openstatus/ui";
+
 import { Shell } from "@/components/dashboard/shell";
 import { MarketingLayout } from "@/components/layout/marketing-layout";
 import { Cards } from "@/components/marketing/cards";
 import { FAQs } from "@/components/marketing/faqs";
 import { Plans } from "@/components/marketing/plans";
 import { Tracker } from "@/components/tracker";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { getHomeMonitorListData } from "@/lib/tb";
 
 export const revalidate = 600;
diff --git a/apps/web/src/app/play/@modal/(..)monitor/[id]/modal.tsx b/apps/web/src/app/play/@modal/(..)monitor/[id]/modal.tsx
index 750ec233b..56ac1e471 100644
--- a/apps/web/src/app/play/@modal/(..)monitor/[id]/modal.tsx
+++ b/apps/web/src/app/play/@modal/(..)monitor/[id]/modal.tsx
@@ -2,7 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent } from "@openstatus/ui";
 
 export function Modal({ children }: { children: React.ReactNode }) {
   const router = useRouter();
diff --git a/apps/web/src/app/play/toggle-button.tsx b/apps/web/src/app/play/toggle-button.tsx
index 4eac3677f..d0cc61a46 100644
--- a/apps/web/src/app/play/toggle-button.tsx
+++ b/apps/web/src/app/play/toggle-button.tsx
@@ -5,14 +5,14 @@ import { usePathname, useRouter } from "next/navigation";
 import { CalendarDays } from "lucide-react";
 
 import type { GroupByRange } from "@openstatus/tinybird";
-
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@openstatus/ui";
+
 import useUpdateSearchParams from "@/hooks/use-update-search-params";
 
 // TODO: move to @/components folder
diff --git a/apps/web/src/app/status-page/[domain]/_components/navigation-link.tsx b/apps/web/src/app/status-page/[domain]/_components/navigation-link.tsx
index 7408ff14f..e04e449c0 100644
--- a/apps/web/src/app/status-page/[domain]/_components/navigation-link.tsx
+++ b/apps/web/src/app/status-page/[domain]/_components/navigation-link.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { usePathname, useSelectedLayoutSegment } from "next/navigation";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@openstatus/ui";
 
 export default function NavigationLink({
   slug,
diff --git a/apps/web/src/app/status-page/[domain]/_components/user-button.tsx b/apps/web/src/app/status-page/[domain]/_components/user-button.tsx
index 5d76e611b..3c2ca4618 100644
--- a/apps/web/src/app/status-page/[domain]/_components/user-button.tsx
+++ b/apps/web/src/app/status-page/[domain]/_components/user-button.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useUser } from "@clerk/nextjs";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@openstatus/ui";
 
 // Create a button only displayed if you are logged in and are the owner of the status page
 export function UserButton() {
diff --git a/apps/web/src/components/dashboard/container.tsx b/apps/web/src/components/dashboard/container.tsx
index c3b4d8fc9..fe836a638 100644
--- a/apps/web/src/components/dashboard/container.tsx
+++ b/apps/web/src/components/dashboard/container.tsx
@@ -5,9 +5,10 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
+  Skeleton,
+} from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
-import { Skeleton } from "../ui/skeleton";
 
 interface CardProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
diff --git a/apps/web/src/components/dashboard/header.tsx b/apps/web/src/components/dashboard/header.tsx
index 5555065ca..934543b11 100644
--- a/apps/web/src/components/dashboard/header.tsx
+++ b/apps/web/src/components/dashboard/header.tsx
@@ -1,5 +1,6 @@
+import { Skeleton } from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
-import { Skeleton } from "../ui/skeleton";
 
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
diff --git a/apps/web/src/components/data-table/columns.tsx b/apps/web/src/components/data-table/columns.tsx
index 9a0b9ca8d..d875121a2 100644
--- a/apps/web/src/components/data-table/columns.tsx
+++ b/apps/web/src/components/data-table/columns.tsx
@@ -4,8 +4,8 @@ import type { ColumnDef } from "@tanstack/react-table";
 import { format } from "date-fns";
 
 import type { Ping } from "@openstatus/tinybird";
+import { Badge } from "@openstatus/ui";
 
-import { Badge } from "@/components/ui/badge";
 import { regionsDict } from "@/data/regions-dictionary";
 import { cn } from "@/lib/utils";
 import { DataTableColumnHeader } from "./data-table-column-header";
diff --git a/apps/web/src/components/data-table/data-table-column-header.tsx b/apps/web/src/components/data-table/data-table-column-header.tsx
index 17b5e0d50..6232c762f 100644
--- a/apps/web/src/components/data-table/data-table-column-header.tsx
+++ b/apps/web/src/components/data-table/data-table-column-header.tsx
@@ -1,13 +1,14 @@
 import type { Column } from "@tanstack/react-table";
 import { ChevronsUpDown, SortAsc, SortDesc } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
 
 interface DataTableColumnHeaderProps<TData, TValue>
diff --git a/apps/web/src/components/data-table/data-table-date-ranger-picker.tsx b/apps/web/src/components/data-table/data-table-date-ranger-picker.tsx
index 06da1ba29..b6b8f4606 100644
--- a/apps/web/src/components/data-table/data-table-date-ranger-picker.tsx
+++ b/apps/web/src/components/data-table/data-table-date-ranger-picker.tsx
@@ -6,13 +6,14 @@ import { addDays, format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import type { DateRange } from "react-day-picker";
 
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
 import {
+  Button,
+  Calendar,
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@openstatus/ui";
+
 import useUpdateSearchParams from "@/hooks/use-update-search-params";
 import { cn } from "@/lib/utils";
 
diff --git a/apps/web/src/components/data-table/data-table-faceted-filter.tsx b/apps/web/src/components/data-table/data-table-faceted-filter.tsx
index 5bfff9c9a..2f209e287 100644
--- a/apps/web/src/components/data-table/data-table-faceted-filter.tsx
+++ b/apps/web/src/components/data-table/data-table-faceted-filter.tsx
@@ -2,9 +2,9 @@ import * as React from "react";
 import type { Column } from "@tanstack/react-table";
 import { Check, PlusCircle } from "lucide-react";
 
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
+  Badge,
+  Button,
   Command,
   CommandEmpty,
   CommandGroup,
@@ -12,13 +12,12 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@/components/ui/command";
-import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import { Separator } from "@/components/ui/separator";
+  Separator,
+} from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
 
 interface DataTableFacetedFilter<TData, TValue> {
diff --git a/apps/web/src/components/data-table/data-table-filter-input.tsx b/apps/web/src/components/data-table/data-table-filter-input.tsx
index 490c39f77..96384c537 100644
--- a/apps/web/src/components/data-table/data-table-filter-input.tsx
+++ b/apps/web/src/components/data-table/data-table-filter-input.tsx
@@ -2,7 +2,7 @@
 
 import type { Table } from "@tanstack/react-table";
 
-import { Input } from "@/components/ui/input";
+import { Input } from "@openstatus/ui";
 
 interface DataTableFilterInputProps<TData> {
   table: Table<TData>;
diff --git a/apps/web/src/components/data-table/data-table-pagination.tsx b/apps/web/src/components/data-table/data-table-pagination.tsx
index 276ed4352..106f9f684 100644
--- a/apps/web/src/components/data-table/data-table-pagination.tsx
+++ b/apps/web/src/components/data-table/data-table-pagination.tsx
@@ -6,14 +6,14 @@ import {
   ChevronsRight,
 } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
+} from "@openstatus/ui";
 
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
diff --git a/apps/web/src/components/data-table/data-table-row-action.tsx b/apps/web/src/components/data-table/data-table-row-action.tsx
index ce69309e3..d7bb2b8c5 100644
--- a/apps/web/src/components/data-table/data-table-row-action.tsx
+++ b/apps/web/src/components/data-table/data-table-row-action.tsx
@@ -5,23 +5,20 @@ import { MoreHorizontal } from "lucide-react";
 import * as z from "zod";
 
 import { tbBuildResponseList } from "@openstatus/tinybird";
-
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
-import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@openstatus/ui";
 
 // REMINDER: needed because `ResponseList` returns metadata as string, not as Record
 const schema = tbBuildResponseList.extend({
diff --git a/apps/web/src/components/data-table/data-table-toolbar.tsx b/apps/web/src/components/data-table/data-table-toolbar.tsx
index 13c2a6274..a711d38e3 100644
--- a/apps/web/src/components/data-table/data-table-toolbar.tsx
+++ b/apps/web/src/components/data-table/data-table-toolbar.tsx
@@ -3,7 +3,8 @@
 import type { Table } from "@tanstack/react-table";
 import { X } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@openstatus/ui";
+
 import { regionsDict } from "@/data/regions-dictionary";
 import { DataTableDateRangePicker } from "./data-table-date-ranger-picker";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter";
diff --git a/apps/web/src/components/data-table/data-table.tsx b/apps/web/src/components/data-table/data-table.tsx
index 3bb440e07..c512b5589 100644
--- a/apps/web/src/components/data-table/data-table.tsx
+++ b/apps/web/src/components/data-table/data-table.tsx
@@ -22,7 +22,8 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table";
+} from "@openstatus/ui";
+
 import { DataTablePagination } from "./data-table-pagination";
 import { DataTableToolbar } from "./data-table-toolbar";
 
diff --git a/apps/web/src/components/domains/domain-configuration.tsx b/apps/web/src/components/domains/domain-configuration.tsx
index af20450fb..49e744410 100644
--- a/apps/web/src/components/domains/domain-configuration.tsx
+++ b/apps/web/src/components/domains/domain-configuration.tsx
@@ -6,8 +6,8 @@ import type {
   DomainResponse,
   DomainVerificationStatusProps,
 } from "@openstatus/api/src/router/domain";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@openstatus/ui";
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useDomainStatus } from "@/hooks/use-domain-status";
 import { getSubdomain } from "@/lib/domains";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/src/components/forms/advanced-monitor-form.tsx b/apps/web/src/components/forms/advanced-monitor-form.tsx
index 462187463..65b980f04 100644
--- a/apps/web/src/components/forms/advanced-monitor-form.tsx
+++ b/apps/web/src/components/forms/advanced-monitor-form.tsx
@@ -7,8 +7,8 @@ import { Wand2, X } from "lucide-react";
 import { useFieldArray, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Form,
   FormControl,
   FormDescription,
@@ -16,22 +16,19 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
+  Input,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
-import {
+  Textarea,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@openstatus/ui";
+
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 import { LoadingAnimation } from "../loading-animation";
diff --git a/apps/web/src/components/forms/custom-domain-form.tsx b/apps/web/src/components/forms/custom-domain-form.tsx
index b7815c631..7ae43228b 100644
--- a/apps/web/src/components/forms/custom-domain-form.tsx
+++ b/apps/web/src/components/forms/custom-domain-form.tsx
@@ -7,9 +7,8 @@ import { useForm } from "react-hook-form";
 import type * as z from "zod";
 
 import { insertPageSchemaWithMonitors } from "@openstatus/db/src/schema";
-
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Form,
   FormControl,
   FormDescription,
@@ -17,14 +16,15 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
+  InputWithAddons,
+} from "@openstatus/ui";
+
 import { useDomainStatus } from "@/hooks/use-domain-status";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
 import DomainConfiguration from "../domains/domain-configuration";
 import DomainStatusIcon from "../domains/domain-status-icon";
 import { LoadingAnimation } from "../loading-animation";
-import { InputWithAddons } from "../ui/input-with-addons";
 
 const customDomain = insertPageSchemaWithMonitors.pick({
   customDomain: true,
diff --git a/apps/web/src/components/forms/incident-form.tsx b/apps/web/src/components/forms/incident-form.tsx
index 47507e359..8eb5d4cb8 100644
--- a/apps/web/src/components/forms/incident-form.tsx
+++ b/apps/web/src/components/forms/incident-form.tsx
@@ -12,14 +12,10 @@ import {
   insertIncidentSchema,
   StatusEnum,
 } from "@openstatus/db/src/schema";
-
-import { Preview } from "@/components/content/preview";
-import { Icons } from "@/components/icons";
-import { LoadingAnimation } from "@/components/loading-animation";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { DateTimePicker } from "@/components/ui/date-time-picker";
 import {
+  Button,
+  Checkbox,
+  DateTimePicker,
   Form,
   FormControl,
   FormDescription,
@@ -27,11 +23,19 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
+  Input,
+  RadioGroup,
+  RadioGroupItem,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+} from "@openstatus/ui";
+
+import { Preview } from "@/components/content/preview";
+import { Icons } from "@/components/icons";
+import { LoadingAnimation } from "@/components/loading-animation";
 import { statusDict } from "@/data/incidents-dictionary";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/src/components/forms/incident-update-form.tsx b/apps/web/src/components/forms/incident-update-form.tsx
index 897e4ca14..bd0a62624 100644
--- a/apps/web/src/components/forms/incident-update-form.tsx
+++ b/apps/web/src/components/forms/incident-update-form.tsx
@@ -11,13 +11,9 @@ import {
   insertIncidentUpdateSchema,
   StatusEnum,
 } from "@openstatus/db/src/schema";
-
-import { Preview } from "@/components/content/preview";
-import { Icons } from "@/components/icons";
-import { LoadingAnimation } from "@/components/loading-animation";
-import { Button } from "@/components/ui/button";
-import { DateTimePicker } from "@/components/ui/date-time-picker";
 import {
+  Button,
+  DateTimePicker,
   Form,
   FormControl,
   FormDescription,
@@ -25,10 +21,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
+  RadioGroup,
+  RadioGroupItem,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+} from "@openstatus/ui";
+
+import { Preview } from "@/components/content/preview";
+import { Icons } from "@/components/icons";
+import { LoadingAnimation } from "@/components/loading-animation";
 import { statusDict } from "@/data/incidents-dictionary";
 import { useToastAction } from "@/hooks/use-toast-action";
 import { api } from "@/trpc/client";
diff --git a/apps/web/src/components/forms/montitor-form.tsx b/apps/web/src/components/forms/montitor-form.tsx
index 428d3d7cc..dea0afbf5 100644
--- a/apps/web/src/components/forms/montitor-form.tsx
+++ b/apps/web/src/components/forms/montitor-form.tsx
@@ -13,16 +13,13 @@ import {
   periodicityEnum,
 } from "@openstatus/db/src/schema";
 import { allPlans } from "@openstatus/plans";
-
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command";
-import {
   Form,
   FormControl,
   FormDescription,
@@ -30,35 +27,30 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
+  Input,
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
-import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import {
+  Switch,
+  Textarea,
+  toast,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@openstatus/ui";
+
 import { regionsDict } from "@/data/regions-dictionary";
 import { useToastAction } from "@/hooks/use-toast-action";
 import useUpdateSearchParams from "@/hooks/use-update-search-params";
 import { cn } from "@/lib/utils";
 import { api } from "@/trpc/client";
 import { LoadingAnimation } from "../loading-animation";
-import { InputWithAddons } from "../ui/input-with-addons";
 
 const cronJobs = [
   { value: "1m", label: "1 minute" },
diff --git a/apps/web/src/components/forms/skeleton-form.tsx b/apps/web/src/components/forms/skeleton-form.tsx
index 70c4e86f2..aa12520ef 100644
--- a/apps/web/src/components/forms/skeleton-form.tsx
+++ b/apps/web/src/components/forms/skeleton-form.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@openstatus/ui";
 
 export function SkeletonForm() {
   return (
diff --git a/apps/web/src/components/forms/status-page-form.tsx b/apps/web/src/components/forms/status-page-form.tsx
index aaf6ec269..3cf2964de 100644
--- a/apps/web/src/components/forms/status-page-form.tsx
+++ b/apps/web/src/components/forms/status-page-form.tsx
@@ -11,10 +11,9 @@ import type * as z from "zod";
 
 import type { allMonitorsExtendedSchema } from "@openstatus/db/src/schema";
 import { insertPageSchemaWithMonitors } from "@openstatus/db/src/schema";
-
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
+  Button,
+  Checkbox,
   Form,
   FormControl,
   FormDescription,
@@ -22,9 +21,10 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { InputWithAddons } from "@/components/ui/input-with-addons";
+  Input,
+  InputWithAddons,
+} from "@openstatus/ui";
+
 import { useDebounce } from "@/hooks/use-debounce";
 import { useToastAction } from "@/hooks/use-toast-action";
 import useUpdateSearchParams from "@/hooks/use-update-search-params";
diff --git a/apps/web/src/components/incidents/affected-monitors.tsx b/apps/web/src/components/incidents/affected-monitors.tsx
index 5ae5545fa..4619da0d6 100644
--- a/apps/web/src/components/incidents/affected-monitors.tsx
+++ b/apps/web/src/components/incidents/affected-monitors.tsx
@@ -1,8 +1,7 @@
 import type * as z from "zod";
 
 import type { selectPublicMonitorSchema } from "@openstatus/db/src/schema";
-
-import { Badge } from "../ui/badge";
+import { Badge } from "@openstatus/ui";
 
 export function AffectedMonitors({
   monitors,
diff --git a/apps/web/src/components/incidents/events.tsx b/apps/web/src/components/incidents/events.tsx
index f8f837f89..fde4a2ac8 100644
--- a/apps/web/src/components/incidents/events.tsx
+++ b/apps/web/src/components/incidents/events.tsx
@@ -6,15 +6,15 @@ import { format, formatDistance } from "date-fns";
 import type * as z from "zod";
 
 import type { selectIncidentUpdateSchema } from "@openstatus/db/src/schema";
-
-import { Icons } from "@/components/icons";
-import { Button } from "@/components/ui/button";
 import {
+  Button,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@openstatus/ui";
+
+import { Icons } from "@/components/icons";
 import { statusDict } from "@/data/incidents-dictionary";
 import { useProcessor } from "@/hooks/use-preprocessor";
 import { cn } from "@/lib/utils";
diff --git a/apps/web/src/components/incidents/status-badge.tsx b/apps/web/src/components/incidents/status-badge.tsx
index 813757e78..9e917dc26 100644
--- a/apps/web/src/components/incidents/status-badge.tsx
+++ b/apps/web/src/components/incidents/status-badge.tsx
@@ -1,7 +1,8 @@
+import { Badge } from "@openstatus/ui";
+
 import { statusDict } from "@/data/incidents-dictionary";
 import { cn } from "@/lib/utils";
 import { Icons } from "../icons";
-import { Badge } from "../ui/badge";
 
 export function StatusBadge({ status }: { status: keyof typeof statusDict }) {
   const { label, icon } = statusDict[status];
diff --git a/apps/web/src/components/layout/app-header.tsx b/apps/web/src/components/layout/app-header.tsx
index a4270aa3f..961d1837d 100644
--- a/apps/web/src/components/layout/app-header.tsx
+++ b/apps/web/src/components/layout/app-header.tsx
@@ -3,11 +3,11 @@
 import Link from "next/link";
 import { UserButton, useUser } from "@clerk/nextjs";
 
+import { Button, Skeleton } from "@openstatus/ui";
+
 import { socialsConfig } from "@/config/socials";
 import { Shell } from "../dashboard/shell";
 import { Icons } from "../icons";
-import { Button } from "../ui/button";
-import { Skeleton } from "../ui/skeleton";
 
 /**
  * TODO: work on a better breadcrumb navigation like Vercel
diff --git a/apps/web/src/components/layout/app-menu.tsx b/apps/web/src/components/layout/app-menu.tsx
index 4f56b8e33..89ac13cb7 100644
--- a/apps/web/src/components/layout/app-menu.tsx
+++ b/apps/web/src/components/layout/app-menu.tsx
@@ -4,14 +4,15 @@ import * as React from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 import { Menu } from "lucide-react";
 
-import { Button } from "../ui/button";
 import {
+  Button,
   Sheet,
   SheetContent,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from "../ui/sheet";
+} from "@openstatus/ui";
+
 import { AppSidebar } from "./app-sidebar";
 
 export function AppMenu() {
diff --git a/apps/web/src/components/layout/back-button.tsx b/apps/web/src/components/layout/back-button.tsx
index fc9c105e0..2b556503b 100644
--- a/apps/web/src/components/layout/back-button.tsx
+++ b/apps/web/src/components/layout/back-button.tsx
@@ -2,7 +2,7 @@ import type { LinkProps } from "next/link";
 import Link from "next/link";
 import { ChevronLeft } from "lucide-react";
 
-import { Button } from "../ui/button";
+import { Button } from "@openstatus/ui";
 
 interface BackButtonProps extends LinkProps {
   children?: React.ReactNode;
diff --git a/apps/web/src/components/layout/brand-name.tsx b/apps/web/src/components/layout/brand-name.tsx
index 7c264b96f..7367690b8 100644
--- a/apps/web/src/components/layout/brand-name.tsx
+++ b/apps/web/src/components/layout/brand-name.tsx
@@ -6,7 +6,7 @@ import {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@openstatus/ui";
 
 export function BrandName() {
   return (
diff --git a/apps/web/src/components/layout/marketing-header.tsx b/apps/web/src/components/layout/marketing-header.tsx
index a1725bc0f..83ff7ad5f 100644
--- a/apps/web/src/components/layout/marketing-header.tsx
+++ b/apps/web/src/components/layout/marketing-header.tsx
@@ -3,7 +3,8 @@
 import Link from "next/link";
 import { useUser } from "@clerk/nextjs";
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@openstatus/ui";
+
 import { cn } from "@/lib/utils";
 import { BrandName } from "./brand-name";
 
diff --git a/apps/web/src/components/layout/skeleton-tabs.tsx b/apps/web/src/components/layout/skeleton-tabs.tsx
index 720aa19e3..b0c7fe6ef 100644
--- a/apps/web/src/components/layout/skeleton-tabs.tsx
+++ b/apps/web/src/components/layout/skeleton-tabs.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@openstatus/ui";
 
 interface SkeletonTabsProps {
   children?: React.ReactNode;
diff --git a/apps/web/src/components/marketing/cards.tsx b/apps/web/src/components/marketing/cards.tsx
index 314bc650a..538058cc6 100644
--- a/apps/web/src/components/marketing/cards.tsx
+++ b/apps/web/src/components/marketing/cards.tsx
@@ -1,7 +1,8 @@
+import { Badge } from "@openstatus/ui";
+
 import { Shell } from "../dashboard/shell";
 import { Icons } from "../icons";
 import type { ValidIcon } from "../icons";
-import { Badge } from "../ui/badge";
 
 const cardConfig: {
   icon: ValidIcon;
diff --git a/apps/web/src/components/marketing/faqs.tsx b/apps/web/src/components/marketing/faqs.tsx
index eaa30bca5..e2e53dccb 100644
--- a/apps/web/src/components/marketing/faqs.tsx
+++ b/apps/web/src/components/marketing/faqs.tsx
@@ -3,7 +3,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion";
+} from "@openstatus/ui";
 
 // REMINDER: we can create a contentlayer document and the faq into it
 const faqsConfig: Record<"q" | "a", string>[] = [
diff --git a/apps/web/src/components/marketing/plans.tsx b/apps/web/src/components/marketing/plans.tsx
index 93a9bf243..b7cd94224 100644
--- a/apps/web/src/components/marketing/plans.tsx
+++ b/apps/web/src/components/marketing/plans.tsx
@@ -1,12 +1,13 @@
 import Link from "next/link";
 import { Check } from "lucide-react";
 
+import { Button } from "@openstatus/ui";
+
 import type { PlanProps } from "@/config/plans";
 import { plansConfig } from "@/config/plans";
 import { cn } from "@/lib/utils";
 import { Shell } from "../dashboard/shell";
 import { LoadingAnimation } from "../loading-animation";
-import { Button } from "../ui/button";
 
 export function Plans() {
   return (
diff --git a/apps/web/src/components/status-page/monitor-list.tsx b/apps/web/src/components/status-page/monitor-list.tsx
index c6a862fb2..14f5618cc 100644
--- a/apps/web/src/components/status-page/monitor-list.tsx
+++ b/apps/web/src/components/status-page/monitor-list.tsx
@@ -2,9 +2,9 @@ import Link from "next/link";
 import type { z } from "zod";
 
 import type { selectPublicMonitorSchema } from "@openstatus/db/src/schema";
+import { Button } from "@openstatus/ui";
 
 import { EmptyState } from "../dashboard/empty-state";
-import { Button } from "../ui/button";
 import { Monitor } from "./monitor";
 
 export const MonitorList = ({
diff --git a/apps/web/src/components/tracker.tsx b/apps/web/src/components/tracker.tsx
index b417af858..8b7cea353 100644
--- a/apps/web/src/components/tracker.tsx
+++ b/apps/web/src/components/tracker.tsx
@@ -7,19 +7,17 @@ import { format } from "date-fns";
 import { Eye, Info } from "lucide-react";
 
 import type { Monitor } from "@openstatus/tinybird";
-
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@/components/ui/hover-card";
-import { Separator } from "@/components/ui/separator";
-import {
+  Separator,
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@openstatus/ui";
+
 import useWindowSize from "@/hooks/use-window-size";
 import { blacklistDates, getMonitorList, getStatus } from "@/lib/tracker";
 
diff --git a/apps/web/src/components/ui/auto-form.tsx b/apps/web/src/components/ui/auto-form.tsx
deleted file mode 100644
index 0f6f69663..000000000
--- a/apps/web/src/components/ui/auto-form.tsx
+++ /dev/null
@@ -1,473 +0,0 @@
-"use client";
-
-import React from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import type {
-  ControllerRenderProps,
-  DefaultValues,
-  FieldValues,
-} from "react-hook-form";
-import { useForm } from "react-hook-form";
-import type { z } from "zod";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { cn } from "@/lib/utils";
-import { Button } from "./button";
-import { Checkbox } from "./checkbox";
-import { DatePicker } from "./date-picker";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "./form";
-import { Input } from "./input";
-import { Switch } from "./switch";
-
-/**
- * Beautify a camelCase string.
- * e.g. "myString" -> "My String"
- */
-function beautifyObjectName(string: string) {
-  let output = string.replace(/([A-Z])/g, " $1");
-  output = output.charAt(0).toUpperCase() + output.slice(1);
-  return output;
-}
-
-/**
- * Get the type name of the lowest level Zod type.
- * This will unpack optionals, refinements, etc.
- */
-function getBaseType(schema: z.ZodAny): string {
-  if ("innerType" in schema._def) {
-    return getBaseType(schema._def.innerType as z.ZodAny);
-  }
-  if ("schema" in schema._def) {
-    return getBaseType(schema._def.schema as z.ZodAny);
-  }
-  return schema._def.typeName;
-}
-
-/**
- * Search for a "ZodDefult" in the Zod stack and return its value.
- */
-function getDefaultValueInZodStack(schema: z.ZodAny): any {
-  const typedSchema = schema as unknown as z.ZodDefault<
-    z.ZodNumber | z.ZodString
-  >;
-
-  if (typedSchema._def.typeName === "ZodDefault") {
-    return typedSchema._def.defaultValue();
-  }
-
-  if ("innerType" in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      typedSchema._def.innerType as unknown as z.ZodAny,
-    );
-  }
-  if ("schema" in typedSchema._def) {
-    return getDefaultValueInZodStack(
-      (typedSchema._def as any).schema as z.ZodAny,
-    );
-  }
-  return undefined;
-}
-
-/**
- * Get all default values from a Zod schema.
- */
-function getDefaultValues<Schema extends z.ZodObject<any, any>>(
-  schema: Schema,
-) {
-  const { shape } = schema;
-  type DefaultValuesType = DefaultValues<Partial<z.infer<Schema>>>;
-  const defaultValues = {} as DefaultValuesType;
-
-  for (const key of Object.keys(shape)) {
-    const item = shape[key] as z.ZodAny;
-    const defaultValue = getDefaultValueInZodStack(item);
-    if (defaultValue !== undefined) {
-      defaultValues[key as keyof DefaultValuesType] = defaultValue;
-    }
-  }
-
-  return defaultValues;
-}
-
-/**
- * Convert a Zod schema to HTML input props to give direct feedback to the user.
- * Once submitted, the schema will be validated completely.
- */
-function zodToHtmlInputProps(
-  schema:
-    | z.ZodNumber
-    | z.ZodString
-    | z.ZodOptional<z.ZodNumber | z.ZodString>
-    | any,
-): React.InputHTMLAttributes<HTMLInputElement> {
-  if (["ZodOptional", "ZodNullable"].includes(schema._def.typeName)) {
-    const typedSchema = schema as z.ZodOptional<z.ZodNumber | z.ZodString>;
-    return {
-      ...zodToHtmlInputProps(typedSchema._def.innerType),
-      required: false,
-    };
-  }
-
-  const typedSchema = schema as z.ZodNumber | z.ZodString;
-
-  if (!("checks" in typedSchema._def)) return {};
-
-  const { checks } = typedSchema._def;
-  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {
-    required: true,
-  };
-  const type = getBaseType(schema);
-
-  for (const check of checks) {
-    if (check.kind === "min") {
-      if (type === "ZodString") {
-        inputProps.minLength = check.value;
-      } else {
-        inputProps.min = check.value;
-      }
-    }
-    if (check.kind === "max") {
-      if (type === "ZodString") {
-        inputProps.maxLength = check.value;
-      } else {
-        inputProps.max = check.value;
-      }
-    }
-  }
-
-  return inputProps;
-}
-
-export type FieldConfigItem = {
-  description?: React.ReactNode;
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-  fieldType?: keyof typeof INPUT_COMPONENTS;
-
-  startAdornment?: React.ReactNode;
-  endAdornment?: React.ReactNode;
-};
-
-export type FieldConfig<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
-  [key in keyof SchemaType]?: FieldConfigItem;
-};
-
-/**
- * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
- */
-type AutoFormInputComponentProps = {
-  zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
-  field: ControllerRenderProps<FieldValues, any>;
-  fieldConfigItem: FieldConfigItem;
-  label: string;
-  isRequired: boolean;
-  fieldProps: any;
-  zodItem: z.ZodAny;
-};
-
-function AutoFormInput({
-  label,
-  isRequired,
-  fieldConfigItem,
-  fieldProps,
-}: AutoFormInputComponentProps) {
-  return (
-    <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
-      <FormControl>
-        <Input type="text" {...fieldProps} />
-      </FormControl>
-      {fieldConfigItem.description && (
-        <FormDescription>{fieldConfigItem.description}</FormDescription>
-      )}
-      <FormMessage />
-    </FormItem>
-  );
-}
-
-function AutoFormCheckbox({
-  label,
-  isRequired,
-  field,
-  fieldConfigItem,
-  fieldProps,
-}: AutoFormInputComponentProps) {
-  return (
-    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-      <FormControl>
-        <Checkbox
-          checked={field.value}
-          onCheckedChange={field.onChange}
-          {...fieldProps}
-        />
-      </FormControl>
-      <div className="space-y-1 leading-none">
-        <FormLabel>
-          {label}
-          {isRequired && <span className="text-destructive"> *</span>}
-        </FormLabel>
-        {fieldConfigItem.description && (
-          <FormDescription>{fieldConfigItem.description}</FormDescription>
-        )}
-      </div>
-    </FormItem>
-  );
-}
-
-function AutoFormSwitch({
-  label,
-  isRequired,
-  field,
-  fieldConfigItem,
-  fieldProps,
-}: AutoFormInputComponentProps) {
-  return (
-    <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-      <FormControl>
-        <Switch
-          checked={field.value}
-          onCheckedChange={field.onChange}
-          {...fieldProps}
-        />
-      </FormControl>
-      <div className="space-y-1 leading-none">
-        <FormLabel>
-          {label}
-          {isRequired && <span className="text-destructive"> *</span>}
-        </FormLabel>
-        {fieldConfigItem.description && (
-          <FormDescription>{fieldConfigItem.description}</FormDescription>
-        )}
-      </div>
-    </FormItem>
-  );
-}
-
-function AutoFormDate({
-  label,
-  isRequired,
-  field,
-  fieldConfigItem,
-  fieldProps,
-}: AutoFormInputComponentProps) {
-  return (
-    <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
-      <FormControl>
-        <DatePicker
-          date={field.value}
-          setDate={field.onChange}
-          {...fieldProps}
-        />
-      </FormControl>
-      {fieldConfigItem.description && (
-        <FormDescription>{fieldConfigItem.description}</FormDescription>
-      )}
-      <FormMessage />
-    </FormItem>
-  );
-}
-
-function AutoFormEnum({
-  label,
-  isRequired,
-  field,
-  fieldConfigItem,
-  zodItem,
-}: AutoFormInputComponentProps) {
-  const values = (zodItem as unknown as z.ZodEnum<any>)._def.values;
-
-  return (
-    <FormItem>
-      <FormLabel>
-        {label}
-        {isRequired && <span className="text-destructive"> *</span>}
-      </FormLabel>
-      <FormControl>
-        <Select onValueChange={field.onChange} defaultValue={field.value}>
-          <SelectTrigger>
-            <SelectValue className="w-full">
-              {field.value ?? "Select an option"}
-            </SelectValue>
-          </SelectTrigger>
-          <SelectContent>
-            {values.map((value: any) => (
-              <SelectItem value={value} key={value}>
-                {value}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </FormControl>
-      {fieldConfigItem.description && (
-        <FormDescription>{fieldConfigItem.description}</FormDescription>
-      )}
-      <FormMessage />
-    </FormItem>
-  );
-}
-
-const INPUT_COMPONENTS = {
-  checkbox: AutoFormCheckbox,
-  date: AutoFormDate,
-  select: AutoFormEnum,
-  switch: AutoFormSwitch,
-  fallback: AutoFormInput,
-};
-
-/**
- * Define handlers for specific Zod types.
- * You can expand this object to support more types.
- */
-const DEFAULT_ZOD_HANDLERS: {
-  [key: string]: keyof typeof INPUT_COMPONENTS;
-} = {
-  ZodBoolean: "checkbox",
-  ZodDate: "date",
-  ZodEnum: "select",
-};
-
-function AutoFormObject<SchemaType extends z.ZodObject<any, any>>({
-  schema,
-  form,
-  fieldConfig,
-}: {
-  schema: SchemaType;
-  form: ReturnType<typeof useForm>;
-  fieldConfig?: FieldConfig<z.infer<SchemaType>>;
-}) {
-  const { shape } = schema;
-
-  return (
-    <>
-      {Object.keys(shape).map((name) => {
-        const item = shape[name] as z.ZodAny;
-        const fieldConfigItem = fieldConfig?.[name] ?? {};
-        const zodInputProps = zodToHtmlInputProps(item);
-        const isRequired =
-          zodInputProps.required ??
-          fieldConfigItem.inputProps?.required ??
-          false;
-        const zodBaseType = getBaseType(item);
-
-        return (
-          <FormField
-            control={form.control}
-            name={name}
-            key={name}
-            render={({ field }) => {
-              const inputType =
-                fieldConfigItem.fieldType ??
-                DEFAULT_ZOD_HANDLERS[zodBaseType] ??
-                "fallback";
-              const InputComponent = INPUT_COMPONENTS[inputType];
-
-              return (
-                <React.Fragment key={name}>
-                  {fieldConfigItem.startAdornment}
-                  <InputComponent
-                    zodInputProps={zodInputProps}
-                    field={field}
-                    fieldConfigItem={fieldConfigItem}
-                    label={item._def.description ?? beautifyObjectName(name)}
-                    isRequired={isRequired}
-                    zodItem={item}
-                    fieldProps={{
-                      ...zodInputProps,
-                      ...field,
-                      ...fieldConfigItem.inputProps,
-                    }}
-                  />
-                  {fieldConfigItem.endAdornment}
-                </React.Fragment>
-              );
-            }}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-export function AutoFormSubmit({ children }: { children?: React.ReactNode }) {
-  return <Button type="submit">{children ?? "Submit"}</Button>;
-}
-
-function AutoForm<SchemaType extends z.ZodObject<any, any>>({
-  formSchema,
-  values: valuesProp,
-  onValuesChange: onValuesChangeProp,
-  onSubmit: onSubmitProp,
-  fieldConfig,
-  children,
-  className,
-}: {
-  formSchema: SchemaType;
-  values?: Partial<z.infer<SchemaType>>;
-  onValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
-  onSubmit?: (values: z.infer<SchemaType>) => void;
-  fieldConfig?: FieldConfig<z.infer<SchemaType>>;
-  children?: React.ReactNode;
-  className?: string;
-}) {
-  const defaultValues: DefaultValues<z.infer<typeof formSchema>> =
-    getDefaultValues(formSchema);
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues,
-    values: valuesProp,
-  });
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    const parsedValues = formSchema.safeParse(values);
-    if (parsedValues.success) {
-      onSubmitProp?.(parsedValues.data);
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        onChange={() => {
-          const values = form.getValues();
-          const parsedValues = formSchema.safeParse(values);
-          if (parsedValues.success) {
-            onValuesChangeProp?.(parsedValues.data);
-          }
-        }}
-        className={cn("space-y-5", className)}
-      >
-        <AutoFormObject
-          schema={formSchema}
-          form={form}
-          fieldConfig={fieldConfig}
-        />
-
-        {children}
-      </form>
-    </Form>
-  );
-}
-
-export default AutoForm;
diff --git a/apps/web/src/hooks/use-toast-action.tsx b/apps/web/src/hooks/use-toast-action.tsx
index 066feae02..134fdbbd0 100644
--- a/apps/web/src/hooks/use-toast-action.tsx
+++ b/apps/web/src/hooks/use-toast-action.tsx
@@ -1,6 +1,5 @@
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
-import type { Toast } from "@/components/ui/use-toast";
+import { Button, useToast } from "@openstatus/ui";
+import type { ToastType } from "@openstatus/ui";
 
 const config = {
   error: {
@@ -30,7 +29,7 @@ const config = {
   "test-success": {
     title: "Endpoint configuration passed.",
   },
-} as const satisfies Record<string, Toast>;
+} as const satisfies Record<string, ToastType>;
 
 type ToastAction = keyof typeof config;
 
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 05e1d38e4..77f288ca2 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -7,6 +7,7 @@ module.exports = {
     "src/**/*.{ts,tsx}",
     // for vercel integration
     "../../packages/integrations/**/*.{ts,tsx}",
+    "../../packages/ui/**/*.{ts,tsx}",
   ],
   theme: {
     container: {
diff --git a/packages/ui/Button.tsx b/packages/ui/Button.tsx
deleted file mode 100644
index ff7e99d4a..000000000
--- a/packages/ui/Button.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-export const Button = () => {
-  return <button onClick={() => alert("boop")}>Boop</button>;
-};
diff --git a/packages/ui/Header.tsx b/packages/ui/Header.tsx
deleted file mode 100644
index 3a96ae800..000000000
--- a/packages/ui/Header.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export const Header = ({ text }: { text: string }) => {
-  return <h1>{text}</h1>;
-};
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
deleted file mode 100644
index 93afd50b4..000000000
--- a/packages/ui/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-// component exports
-export * from "./Button";
-export * from "./Header";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2cbaecc9e..1beaeb24f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,20 +1,52 @@
 {
-  "name": "ui",
+  "name": "@openstatus/ui",
   "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
   "license": "MIT",
   "scripts": {
-    "lint": "eslint \"**/*.ts*\"",
-    "generate:component": "turbo gen react-component"
+    "lint": "eslint \"**/*.ts*\""
   },
   "devDependencies": {
-    "@types/react": "18.2.16",
-    "@types/react-dom": "18.2.7",
-    "eslint": "8.45.0",
     "@openstatus/eslint-config": "workspace:*",
-    "react": "18.2.0",
     "@openstatus/tsconfig": "workspace:*",
+    "@types/luxon": "^3.3.1",
+    "@types/node": "20.3.1",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.7",
+    "eslint": "8.45.0",
     "typescript": "5.1.6"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "3.1.1",
+    "@radix-ui/react-accordion": "1.1.2",
+    "@radix-ui/react-alert-dialog": "1.0.4",
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-context-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dropdown-menu": "2.0.5",
+    "@radix-ui/react-hover-card": "1.0.6",
+    "@radix-ui/react-label": "2.0.2",
+    "@radix-ui/react-popover": "1.0.6",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-select": "1.2.2",
+    "@radix-ui/react-separator": "1.0.3",
+    "@radix-ui/react-slot": "1.0.2",
+    "@radix-ui/react-switch": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.4",
+    "@radix-ui/react-tooltip": "1.0.6",
+    "class-variance-authority": "0.6.0",
+    "clsx": "1.2.1",
+    "cmdk": "0.2.0",
+    "date-fns": "2.30.0",
+    "lucide-react": "0.244.0",
+    "luxon": "3.3.0",
+    "react": "18.2.0",
+    "react-day-picker": "8.8.0",
+    "react-hook-form": "7.45.1",
+    "tailwind-merge": "1.13.2",
+    "zod": "3.22.2"
   }
 }
diff --git a/apps/web/src/components/ui/accordion.tsx b/packages/ui/src/components/accordion.tsx
similarity index 98%
rename from apps/web/src/components/ui/accordion.tsx
rename to packages/ui/src/components/accordion.tsx
index 1d54a9e9a..3e41a8e10 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/packages/ui/src/components/accordion.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Accordion = AccordionPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/alert-dialog.tsx
similarity index 98%
rename from apps/web/src/components/ui/alert-dialog.tsx
rename to packages/ui/src/components/alert-dialog.tsx
index ec7131525..874513831 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/packages/ui/src/components/alert-dialog.tsx
@@ -3,8 +3,8 @@
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { buttonVariants } from "../components/button";
+import { cn } from "../lib/utils";
 
 const AlertDialog = AlertDialogPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/alert.tsx b/packages/ui/src/components/alert.tsx
similarity index 97%
rename from apps/web/src/components/ui/alert.tsx
rename to packages/ui/src/components/alert.tsx
index 2efb40edc..147297b43 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/packages/ui/src/components/alert.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
diff --git a/apps/web/src/components/ui/avatar.tsx b/packages/ui/src/components/avatar.tsx
similarity index 97%
rename from apps/web/src/components/ui/avatar.tsx
rename to packages/ui/src/components/avatar.tsx
index 08a1359f9..28375f79a 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
diff --git a/apps/web/src/components/ui/badge.tsx b/packages/ui/src/components/badge.tsx
similarity index 97%
rename from apps/web/src/components/ui/badge.tsx
rename to packages/ui/src/components/badge.tsx
index c96fe9333..22318aea6 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/packages/ui/src/components/badge.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
diff --git a/apps/web/src/components/ui/button-with-disable-tooltip.tsx b/packages/ui/src/components/button-with-disable-tooltip.tsx
similarity index 96%
rename from apps/web/src/components/ui/button-with-disable-tooltip.tsx
rename to packages/ui/src/components/button-with-disable-tooltip.tsx
index ddc23c30f..d06dee7d7 100644
--- a/apps/web/src/components/ui/button-with-disable-tooltip.tsx
+++ b/packages/ui/src/components/button-with-disable-tooltip.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 import { Button } from "./button";
 import type { ButtonProps } from "./button";
 import {
diff --git a/apps/web/src/components/ui/button.tsx b/packages/ui/src/components/button.tsx
similarity index 98%
rename from apps/web/src/components/ui/button.tsx
rename to packages/ui/src/components/button.tsx
index 931bc6298..883714427 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
diff --git a/apps/web/src/components/ui/calendar.tsx b/packages/ui/src/components/calendar.tsx
similarity index 96%
rename from apps/web/src/components/ui/calendar.tsx
rename to packages/ui/src/components/calendar.tsx
index 1d1181516..e2168fbfd 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/packages/ui/src/components/calendar.tsx
@@ -4,8 +4,8 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { buttonVariants } from "../components/button";
+import { cn } from "../lib/utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
diff --git a/apps/web/src/components/ui/card.tsx b/packages/ui/src/components/card.tsx
similarity index 98%
rename from apps/web/src/components/ui/card.tsx
rename to packages/ui/src/components/card.tsx
index f5df31597..f6ab25707 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/packages/ui/src/components/card.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
diff --git a/apps/web/src/components/ui/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
similarity index 95%
rename from apps/web/src/components/ui/checkbox.tsx
rename to packages/ui/src/components/checkbox.tsx
index 0b413450e..9d45a5bbc 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -1,8 +1,10 @@
+"use client";
+
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
diff --git a/apps/web/src/components/ui/command.tsx b/packages/ui/src/components/command.tsx
similarity index 97%
rename from apps/web/src/components/ui/command.tsx
rename to packages/ui/src/components/command.tsx
index c96dba404..28073ee8b 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/packages/ui/src/components/command.tsx
@@ -5,8 +5,8 @@ import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
+import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
diff --git a/apps/web/src/components/ui/context-menu.tsx b/packages/ui/src/components/context-menu.tsx
similarity index 99%
rename from apps/web/src/components/ui/context-menu.tsx
rename to packages/ui/src/components/context-menu.tsx
index be4cd2dca..2fe6c1d03 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/packages/ui/src/components/context-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const ContextMenu = ContextMenuPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/date-picker.tsx b/packages/ui/src/components/date-picker.tsx
similarity index 79%
rename from apps/web/src/components/ui/date-picker.tsx
rename to packages/ui/src/components/date-picker.tsx
index ea40cb342..b86664138 100644
--- a/apps/web/src/components/ui/date-picker.tsx
+++ b/packages/ui/src/components/date-picker.tsx
@@ -3,14 +3,10 @@
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
+import { Button } from "../components/button";
+import { Calendar } from "../components/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover";
+import { cn } from "../lib/utils";
 
 export function DatePicker({
   date,
diff --git a/apps/web/src/components/ui/date-time-picker.tsx b/packages/ui/src/components/date-time-picker.tsx
similarity index 88%
rename from apps/web/src/components/ui/date-time-picker.tsx
rename to packages/ui/src/components/date-time-picker.tsx
index 3c00a7c29..c430b6338 100644
--- a/apps/web/src/components/ui/date-time-picker.tsx
+++ b/packages/ui/src/components/date-time-picker.tsx
@@ -6,16 +6,12 @@ import { Calendar as CalendarIcon } from "lucide-react";
 import { DateTime } from "luxon";
 import type { SelectSingleEventHandler } from "react-day-picker";
 
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
+import { Button } from "../components/button";
+import { Calendar } from "../components/calendar";
+import { Input } from "../components/input";
+import { Label } from "../components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover";
+import { cn } from "../lib/utils";
 
 interface DateTimePickerProps {
   date: Date;
diff --git a/apps/web/src/components/ui/dialog.tsx b/packages/ui/src/components/dialog.tsx
similarity index 99%
rename from apps/web/src/components/ui/dialog.tsx
rename to packages/ui/src/components/dialog.tsx
index d1997bd58..813777268 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu.tsx
similarity index 99%
rename from apps/web/src/components/ui/dropdown-menu.tsx
rename to packages/ui/src/components/dropdown-menu.tsx
index 4db3487a7..dbcf6023e 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/form.tsx b/packages/ui/src/components/form.tsx
similarity index 89%
rename from apps/web/src/components/ui/form.tsx
rename to packages/ui/src/components/form.tsx
index 80013bff8..fcd9b3478 100644
--- a/apps/web/src/components/ui/form.tsx
+++ b/packages/ui/src/components/form.tsx
@@ -1,11 +1,13 @@
-import * as React from "react";
+"use client";
+
+import React, { createContext, forwardRef, useContext, useId } from "react";
 import type * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 import { Controller, FormProvider, useFormContext } from "react-hook-form";
 
-import { Label } from "@/components/ui/label";
-import { cn } from "@/lib/utils";
+import { Label } from "../components/label";
+import { cn } from "../lib/utils";
 
 const Form = FormProvider;
 
@@ -16,7 +18,7 @@ type FormFieldContextValue<
   name: TName;
 };
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
+const FormFieldContext = createContext<FormFieldContextValue>(
   {} as FormFieldContextValue,
 );
 
@@ -34,8 +36,8 @@ const FormField = <
 };
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -60,15 +62,15 @@ type FormItemContextValue = {
   id: string;
 };
 
-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-const FormItem = React.forwardRef<
+const FormItem = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId();
+  const id = useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
diff --git a/apps/web/src/components/ui/hover-card.tsx b/packages/ui/src/components/hover-card.tsx
similarity index 97%
rename from apps/web/src/components/ui/hover-card.tsx
rename to packages/ui/src/components/hover-card.tsx
index 62053b782..3c5434ffb 100644
--- a/apps/web/src/components/ui/hover-card.tsx
+++ b/packages/ui/src/components/hover-card.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const HoverCard = HoverCardPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/input-with-addons.tsx b/packages/ui/src/components/input-with-addons.tsx
similarity index 97%
rename from apps/web/src/components/ui/input-with-addons.tsx
rename to packages/ui/src/components/input-with-addons.tsx
index e6abb9b89..1269b8c18 100644
--- a/apps/web/src/components/ui/input-with-addons.tsx
+++ b/packages/ui/src/components/input-with-addons.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 export interface InputWithAddonsProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
diff --git a/apps/web/src/components/ui/input.tsx b/packages/ui/src/components/input.tsx
similarity index 95%
rename from apps/web/src/components/ui/input.tsx
rename to packages/ui/src/components/input.tsx
index 56301bc14..169937400 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
diff --git a/apps/web/src/components/ui/label.tsx b/packages/ui/src/components/label.tsx
similarity index 95%
rename from apps/web/src/components/ui/label.tsx
rename to packages/ui/src/components/label.tsx
index 590c4e7a4..7ad0137cb 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/packages/ui/src/components/label.tsx
@@ -7,7 +7,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
diff --git a/apps/web/src/components/ui/popover.tsx b/packages/ui/src/components/popover.tsx
similarity index 97%
rename from apps/web/src/components/ui/popover.tsx
rename to packages/ui/src/components/popover.tsx
index a361ba7d8..34c12dba5 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/packages/ui/src/components/popover.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/radio-group.tsx b/packages/ui/src/components/radio-group.tsx
similarity index 97%
rename from apps/web/src/components/ui/radio-group.tsx
rename to packages/ui/src/components/radio-group.tsx
index 795baf5c8..236dc5366 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/packages/ui/src/components/radio-group.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
diff --git a/apps/web/src/components/ui/select.tsx b/packages/ui/src/components/select.tsx
similarity index 99%
rename from apps/web/src/components/ui/select.tsx
rename to packages/ui/src/components/select.tsx
index bb709c9f1..0721ea469 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/separator.tsx b/packages/ui/src/components/separator.tsx
similarity index 95%
rename from apps/web/src/components/ui/separator.tsx
rename to packages/ui/src/components/separator.tsx
index 3b9f2b849..a74266c5b 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/packages/ui/src/components/separator.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
diff --git a/apps/web/src/components/ui/sheet.tsx b/packages/ui/src/components/sheet.tsx
similarity index 99%
rename from apps/web/src/components/ui/sheet.tsx
rename to packages/ui/src/components/sheet.tsx
index 7a07dfdbb..22ae898ab 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -6,7 +6,7 @@ import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Sheet = SheetPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/skeleton.tsx b/packages/ui/src/components/skeleton.tsx
similarity index 87%
rename from apps/web/src/components/ui/skeleton.tsx
rename to packages/ui/src/components/skeleton.tsx
index 5788d6758..183a13489 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/packages/ui/src/components/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 function Skeleton({
   className,
diff --git a/apps/web/src/components/ui/switch.tsx b/packages/ui/src/components/switch.tsx
similarity index 97%
rename from apps/web/src/components/ui/switch.tsx
rename to packages/ui/src/components/switch.tsx
index 359b57951..0bd67e8c4 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/packages/ui/src/components/switch.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
diff --git a/apps/web/src/components/ui/table.tsx b/packages/ui/src/components/table.tsx
similarity index 98%
rename from apps/web/src/components/ui/table.tsx
rename to packages/ui/src/components/table.tsx
index c0e3499ba..99a4c2a55 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/packages/ui/src/components/table.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
diff --git a/apps/web/src/components/ui/tabs.tsx b/packages/ui/src/components/tabs.tsx
similarity index 98%
rename from apps/web/src/components/ui/tabs.tsx
rename to packages/ui/src/components/tabs.tsx
index 990017db1..d72e9c80a 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/packages/ui/src/components/tabs.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const Tabs = TabsPrimitive.Root;
 
diff --git a/apps/web/src/components/ui/textarea.tsx b/packages/ui/src/components/textarea.tsx
similarity index 95%
rename from apps/web/src/components/ui/textarea.tsx
rename to packages/ui/src/components/textarea.tsx
index 4a8f56aa6..aa37b11b0 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/packages/ui/src/components/textarea.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
diff --git a/apps/web/src/components/ui/toast.tsx b/packages/ui/src/components/toast.tsx
similarity index 98%
rename from apps/web/src/components/ui/toast.tsx
rename to packages/ui/src/components/toast.tsx
index e9b64326b..70836db9e 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -1,10 +1,12 @@
+"use client";
+
 import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva } from "class-variance-authority";
 import type { VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
diff --git a/apps/web/src/components/ui/toaster.tsx b/packages/ui/src/components/toaster.tsx
similarity index 89%
rename from apps/web/src/components/ui/toaster.tsx
rename to packages/ui/src/components/toaster.tsx
index 7d82ed557..b6f973c9b 100644
--- a/apps/web/src/components/ui/toaster.tsx
+++ b/packages/ui/src/components/toaster.tsx
@@ -7,8 +7,8 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast";
-import { useToast } from "@/components/ui/use-toast";
+} from "../components/toast";
+import { useToast } from "../components/use-toast";
 
 export function Toaster() {
   const { toasts } = useToast();
diff --git a/apps/web/src/components/ui/tooltip.tsx b/packages/ui/src/components/tooltip.tsx
similarity index 97%
rename from apps/web/src/components/ui/tooltip.tsx
rename to packages/ui/src/components/tooltip.tsx
index 1062109d3..0dd180a76 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/packages/ui/src/components/tooltip.tsx
@@ -3,7 +3,7 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils";
+import { cn } from "../lib/utils";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
diff --git a/apps/web/src/components/ui/use-toast.ts b/packages/ui/src/components/use-toast.ts
similarity index 95%
rename from apps/web/src/components/ui/use-toast.ts
rename to packages/ui/src/components/use-toast.ts
index 8323aa845..a182233ae 100644
--- a/apps/web/src/components/ui/use-toast.ts
+++ b/packages/ui/src/components/use-toast.ts
@@ -1,7 +1,7 @@
 // Inspired by react-hot-toast library
 import * as React from "react";
 
-import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+import type { ToastActionElement, ToastProps } from "../components/toast";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
@@ -135,9 +135,9 @@ function dispatch(action: Action) {
   });
 }
 
-export type Toast = Omit<ToasterToast, "id">;
+export type ToastType = Omit<ToasterToast, "id">;
 
-function toast({ ...props }: Toast) {
+function toast({ ...props }: ToastType) {
   const id = genId();
 
   const update = (props: ToasterToast) =>
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
new file mode 100644
index 000000000..e93dad342
--- /dev/null
+++ b/packages/ui/src/index.tsx
@@ -0,0 +1,168 @@
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "./components/accordion";
+export { Avatar, AvatarImage, AvatarFallback } from "./components/avatar";
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./components/alert-dialog";
+export { Alert, AlertTitle, AlertDescription } from "./components/alert";
+export { Badge, badgeVariants } from "./components/badge";
+export { ButtonWithDisableTooltip } from "./components/button-with-disable-tooltip";
+export { Button, buttonVariants } from "./components/button";
+export { Calendar } from "./components/calendar";
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "./components/card";
+export { Checkbox } from "./components/checkbox";
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from "./components/command";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from "./components/context-menu";
+
+export { DatePicker } from "./components/date-picker";
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./components/dialog";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./components/dropdown-menu";
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+} from "./components/form";
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+} from "./components/hover-card";
+export { InputWithAddons } from "./components/input-with-addons";
+export { Input } from "./components/input";
+export { Label } from "./components/label";
+export { Popover, PopoverTrigger, PopoverContent } from "./components/popover";
+export { RadioGroup, RadioGroupItem } from "./components/radio-group";
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "./components/select";
+export { Separator } from "./components/separator";
+export { Skeleton } from "./components/skeleton";
+export { Switch } from "./components/switch";
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./components/table";
+
+export { Textarea } from "./components/textarea";
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+} from "./components/toast";
+export { Toaster } from "./components/toaster";
+export { toast, useToast } from "./components/use-toast";
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from "./components/tooltip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/tabs";
+export { DateTimePicker } from "./components/date-time-picker";
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from "./components/sheet";
+
+export type { ToastType } from "./components/use-toast";
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
new file mode 100644
index 000000000..88283f013
--- /dev/null
+++ b/packages/ui/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
new file mode 100644
index 000000000..4e661cc56
--- /dev/null
+++ b/packages/ui/tailwind.config.ts
@@ -0,0 +1,87 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "src/**/*.{ts,tsx}",
+    // for vercel integration
+    "../../packages/integrations/**/*.{ts,tsx}",
+    "../../packages/ui/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      // REMINDER: added for background.tsx
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+        cal: ["var(--font-calsans)"],
+      },
+      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",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index b2d8b4bef..cec44c664 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,5 +1,10 @@
 {
   "extends": "@openstatus/tsconfig/react-library.json",
   "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
diff --git a/packages/ui/turbo/generators/config.ts b/packages/ui/turbo/generators/config.ts
deleted file mode 100644
index 4653493ce..000000000
--- a/packages/ui/turbo/generators/config.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { PlopTypes } from "@turbo/gen";
-
-// Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
-
-export default function generator(plop: PlopTypes.NodePlopAPI): void {
-  // A simple generator to add a new React component to the internal UI library
-  plop.setGenerator("react-component", {
-    description: "Adds a new react component",
-    prompts: [
-      {
-        type: "input",
-        name: "name",
-        message: "What is the name of the component?",
-      },
-    ],
-    actions: [
-      {
-        type: "add",
-        path: "{{pascalCase name}}.tsx",
-        templateFile: "templates/component.hbs",
-      },
-      {
-        type: "append",
-        path: "index.tsx",
-        pattern: /(\/\/ component exports)/g,
-        template: 'export * from "./{{pascalCase name}}";',
-      },
-    ],
-  });
-}
diff --git a/packages/ui/turbo/generators/templates/component.hbs b/packages/ui/turbo/generators/templates/component.hbs
deleted file mode 100644
index cf7b6369c..000000000
--- a/packages/ui/turbo/generators/templates/component.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from "react";
-
-interface Props {
-  children?: React.ReactNode;
-}
-
-export const {{ pascalCase name }} = ({ children }: Props) => {
-  return (
-    <div>
-      <h1>{{ name }}</h1>
-      {children}
-    </div>
-  );
-};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0be6617be..d8ddfd690 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -130,66 +130,15 @@ importers:
       '@openstatus/tinybird':
         specifier: workspace:*
         version: link:../../packages/tinybird
+      '@openstatus/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@openstatus/upstash':
         specifier: workspace:*
         version: link:../../packages/upstash
       '@openstatus/vercel':
         specifier: workspace:*
         version: link:../../packages/integrations/vercel
-      '@radix-ui/react-accordion':
-        specifier: 1.1.2
-        version: 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-alert-dialog':
-        specifier: 1.0.4
-        version: 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-avatar':
-        specifier: ^1.0.3
-        version: 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-checkbox':
-        specifier: 1.0.4
-        version: 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-context-menu':
-        specifier: ^2.1.4
-        version: 2.1.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dialog':
-        specifier: 1.0.4
-        version: 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: 2.0.5
-        version: 2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-hover-card':
-        specifier: 1.0.6
-        version: 1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-label':
-        specifier: 2.0.2
-        version: 2.0.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popover':
-        specifier: 1.0.6
-        version: 1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.1.3
-        version: 1.1.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-select':
-        specifier: 1.2.2
-        version: 1.2.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-separator':
-        specifier: 1.0.3
-        version: 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-slot':
-        specifier: 1.0.2
-        version: 1.0.2(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-switch':
-        specifier: 1.0.3
-        version: 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-tabs':
-        specifier: 1.0.4
-        version: 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-toast':
-        specifier: 1.1.4
-        version: 1.1.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-tooltip':
-        specifier: 1.0.6
-        version: 1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@sentry/integrations':
         specifier: 7.65.0
         version: 7.65.0
@@ -322,9 +271,6 @@ importers:
       tailwindcss-animate:
         specifier: 1.0.6
         version: 1.0.6(tailwindcss@3.3.2)
-      ui:
-        specifier: workspace:*
-        version: link:../../packages/ui
       zod:
         specifier: 3.21.4
         version: 3.21.4
@@ -647,6 +593,97 @@ importers:
   packages/tsconfig: {}
 
   packages/ui:
+    dependencies:
+      '@hookform/resolvers':
+        specifier: 3.1.1
+        version: 3.1.1(react-hook-form@7.45.1)
+      '@radix-ui/react-accordion':
+        specifier: 1.1.2
+        version: 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-alert-dialog':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-avatar':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-checkbox':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-context-menu':
+        specifier: ^2.1.4
+        version: 2.1.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: 2.0.5
+        version: 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-hover-card':
+        specifier: 1.0.6
+        version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-label':
+        specifier: 2.0.2
+        version: 2.0.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popover':
+        specifier: 1.0.6
+        version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.1.3
+        version: 1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-select':
+        specifier: 1.2.2
+        version: 1.2.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-separator':
+        specifier: 1.0.3
+        version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot':
+        specifier: 1.0.2
+        version: 1.0.2(@types/react@18.2.12)(react@18.2.0)
+      '@radix-ui/react-switch':
+        specifier: 1.0.3
+        version: 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-tabs':
+        specifier: 1.0.4
+        version: 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-toast':
+        specifier: 1.1.4
+        version: 1.1.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-tooltip':
+        specifier: 1.0.6
+        version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      class-variance-authority:
+        specifier: 0.6.0
+        version: 0.6.0(typescript@5.1.6)
+      clsx:
+        specifier: 1.2.1
+        version: 1.2.1
+      cmdk:
+        specifier: 0.2.0
+        version: 0.2.0(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      date-fns:
+        specifier: 2.30.0
+        version: 2.30.0
+      lucide-react:
+        specifier: 0.244.0
+        version: 0.244.0(react@18.2.0)
+      luxon:
+        specifier: 3.3.0
+        version: 3.3.0
+      react:
+        specifier: 18.2.0
+        version: 18.2.0
+      react-day-picker:
+        specifier: 8.8.0
+        version: 8.8.0(date-fns@2.30.0)(react@18.2.0)
+      react-hook-form:
+        specifier: 7.45.1
+        version: 7.45.1(react@18.2.0)
+      tailwind-merge:
+        specifier: 1.13.2
+        version: 1.13.2
+      zod:
+        specifier: 3.22.2
+        version: 3.22.2
     devDependencies:
       '@openstatus/eslint-config':
         specifier: workspace:*
@@ -654,18 +691,21 @@ importers:
       '@openstatus/tsconfig':
         specifier: workspace:*
         version: link:../tsconfig
+      '@types/luxon':
+        specifier: ^3.3.1
+        version: 3.3.1
+      '@types/node':
+        specifier: 20.3.1
+        version: 20.3.1
       '@types/react':
-        specifier: 18.2.16
-        version: 18.2.16
+        specifier: 18.2.12
+        version: 18.2.12
       '@types/react-dom':
         specifier: 18.2.7
         version: 18.2.7
       eslint:
         specifier: 8.45.0
         version: 8.45.0
-      react:
-        specifier: 18.2.0
-        version: 18.2.0
       typescript:
         specifier: 5.1.6
         version: 5.1.6
@@ -1118,7 +1158,7 @@ packages:
       ts-pattern: 4.3.0
       unified: 10.1.2
       yaml: 2.3.2
-      zod: 3.21.4
+      zod: 3.22.2
     transitivePeerDependencies:
       - '@effect-ts/otel-node'
       - esbuild
@@ -1197,10 +1237,10 @@ packages:
     resolution: {integrity: sha512-47gAg0O2pW5Jlo86jfzjdkwL5a7Bzb+Kj5WTmdu4CxYRfWn9ytKjuuYIfsNDW8neuhdKzn+P5wCddgEh0glYyQ==}
     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
+      '@opentelemetry/api': 1.4.1
+      '@opentelemetry/core': 1.13.0
+      '@opentelemetry/exporter-trace-otlp-grpc': 0.39.1
+      '@opentelemetry/sdk-trace-base': 1.13.0
     dependencies:
       '@effect-ts/core': 0.60.5
       '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.4.1)(@opentelemetry/core@1.13.0)(@opentelemetry/sdk-trace-base@1.13.0)
@@ -1214,10 +1254,10 @@ packages:
     resolution: {integrity: sha512-a2sF0ylmn8xOJs8fNeT/spJ1gUcsksAJCALxo9WOfuTCMtTwMVtVhCKEPEeQoL7wFqU+JgPkVdP91+FJ/Rkeow==}
     peerDependencies:
       '@effect-ts/core': ^0.60.2
-      '@opentelemetry/api': ^1.4.0
-      '@opentelemetry/core': ^1.13.0
-      '@opentelemetry/sdk-trace-base': ^1.13.0
-      '@opentelemetry/sdk-trace-node': ^1.13.0
+      '@opentelemetry/api': 1.4.1
+      '@opentelemetry/core': 1.13.0
+      '@opentelemetry/sdk-trace-base': 1.13.0
+      '@opentelemetry/sdk-trace-node': 1.13.0
     dependencies:
       '@effect-ts/core': 0.60.5
       '@effect-ts/otel': 0.15.1(@effect-ts/core@0.60.5)(@opentelemetry/api@1.4.1)(@opentelemetry/core@1.13.0)(@opentelemetry/sdk-trace-base@1.13.0)
@@ -1231,9 +1271,9 @@ packages:
     resolution: {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
+      '@opentelemetry/api': 1.4.1
+      '@opentelemetry/core': 1.13.0
+      '@opentelemetry/sdk-trace-base': 1.13.0
     dependencies:
       '@effect-ts/core': 0.60.5
       '@opentelemetry/api': 1.4.1
@@ -2248,7 +2288,7 @@ packages:
       react: '>=16'
     dependencies:
       '@types/mdx': 2.0.7
-      '@types/react': 18.2.16
+      '@types/react': 18.2.12
       react: 18.2.0
     dev: false
 
@@ -2706,7 +2746,7 @@ packages:
     resolution: {integrity: sha512-pS5fU4lrRjOIPZQqA2V1SUM9QUFXbO+8flubAiy6ntLjnAjJJUdRFOUOxK6v86ZHI2p2S8A0vD0BTu95FZYvjA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
     dev: false
@@ -2715,7 +2755,7 @@ packages:
     resolution: {integrity: sha512-2dBX3Sj99H96uwJKvc2w9NOiNgbvAO6mOFJFramNkKfS9O4Um+VWgpnlAazoYjT6kUJ1MP70KQ5ngD4ed+4NUw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/semantic-conventions': 1.13.0
@@ -2725,7 +2765,7 @@ packages:
     resolution: {integrity: sha512-l5RhLKx6U+yuLhMrtgavTDthX50E1mZM3/SSySC7OPZiArFHV/b/9x9jxAzrOgIQUDxyj4N0V9aLKSA2t7Qzxg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': ^1.0.0
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@grpc/grpc-js': 1.9.3
       '@opentelemetry/api': 1.4.1
@@ -2740,7 +2780,7 @@ packages:
     resolution: {integrity: sha512-Pv5X8fbi6jD/RJBePyn7MnCSuE6MbPB6dl+7YYBWJ5RcMGYMwvLXjd4h2jWsPV2TSUg38H/RoSP0aXvQ06Y7iw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': ^1.0.0
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2750,7 +2790,7 @@ packages:
     resolution: {integrity: sha512-u3ErFRQqQFKjjIMuwLWxz/tLPYInfmiAmSy//fGSCzCh2ZdJgqQjMOAxBgqFtCF2xFL+OmMhyuC2ThMzceGRWA==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': ^1.0.0
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@grpc/grpc-js': 1.9.3
       '@opentelemetry/api': 1.4.1
@@ -2763,7 +2803,7 @@ packages:
     resolution: {integrity: sha512-0hgVnXXz5efI382B/24NxD4b6Zxlh7nxCdJkxkdmQMbn0yRiwoq/ZT+QG8eUL6JNzsBAV1WJlF5aJNsL8skHvw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/api-logs': 0.39.1
@@ -2778,7 +2818,7 @@ packages:
     resolution: {integrity: sha512-HOo91EI4UbuG8xQVLFziTzrcIn0MJQhy8m9jorh8aonb94jFVFi3CFNIiAnIGOabmnshJLOABxpYXsiPB8Xnzg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2788,7 +2828,7 @@ packages:
     resolution: {integrity: sha512-IV9TO+u1Jzm9mUDAD3gyXf89eyvgEJUY1t+GB5QmS4wjVeWrSMUtD0JjH3yG9SNqkrQOqOGJq7YUSSetW+Lf5Q==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2798,7 +2838,7 @@ packages:
     resolution: {integrity: sha512-euqjOkiN6xhjE//0vQYGvbStxoD/WWQRhDiO0OTLlnLBO9Yw2Gd/VoSx2H+svsebjzYk5OxLuREBmcdw6rbUNg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2809,7 +2849,7 @@ packages:
     resolution: {integrity: sha512-/gmgKfZ1ZVFporKuwsewqIyvaUIGpv76JZ7lBpHQQPb37IMpaXO6pdqFI4ebHAWfNIm3akMyhmdtzivcgF3lgw==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.4.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
       '@opentelemetry/api-logs': '>=0.38.0'
     dependencies:
       '@opentelemetry/api': 1.4.1
@@ -2822,7 +2862,7 @@ packages:
     resolution: {integrity: sha512-MOjZX6AnSOqLliCcZUrb+DQKjAWXBiGeICGbHAGe5w0BB18PJIeIo995lO5JSaFfHpmUMgJButTPfJJD27W3Vg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2834,7 +2874,7 @@ packages:
     resolution: {integrity: sha512-moTiQtc0uPR1hQLt6gLDJH9IIkeBhgRb71OKjNHZPE1VF45fHtD6nBDi5J/DkTHTwYP5X3kBJLa3xN7ub6J4eg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/core': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2846,7 +2886,7 @@ packages:
     resolution: {integrity: sha512-FXA85lXKTsnbOflA/TBuBf2pmhD3c8uDjNjG0YqK+ap8UayfALmfJhf+aG1yBOUHevCY0JXJ4/xtbXExxpsMog==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.5.0'
+      '@opentelemetry/api': 1.4.1
     dependencies:
       '@opentelemetry/api': 1.4.1
       '@opentelemetry/context-async-hooks': 1.13.0(@opentelemetry/api@1.4.1)
@@ -2953,7 +2993,7 @@ packages:
       '@babel/runtime': 7.22.15
     dev: false
 
-  /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
     peerDependencies:
       '@types/react': '*'
@@ -2968,21 +3008,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-alert-dialog@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-alert-dialog@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-jbfBCRlKYlhbitueOAv7z74PXYeIQmWpKwm3jllsdkw7fGWNkxqP3v0nY9WmOzcPqpQuoorNtvViBgL46n5gVg==}
     peerDependencies:
       '@types/react': '*'
@@ -2999,16 +3039,16 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
       '@types/react': '*'
@@ -3022,14 +3062,14 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.15
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-avatar@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-avatar@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-9ToF7YNex3Ste45LrAeTlKtONI9yVRt/zOS158iilIkW5K/Apeyb/TUQlcEFTEFvWr8Kzdi2ZYrm1/suiXPajQ==}
     peerDependencies:
       '@types/react': '*'
@@ -3044,16 +3084,16 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
     peerDependencies:
       '@types/react': '*'
@@ -3070,18 +3110,18 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
     peerDependencies:
       '@types/react': '*'
@@ -3099,17 +3139,17 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
       '@types/react': '*'
@@ -3125,10 +3165,10 @@ packages:
       '@babel/runtime': 7.22.15
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3156,7 +3196,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-context-menu@2.1.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-context-menu@2.1.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-HVHLUtZOBiR2Fh5l07qQ9y0IgX4dGZF0S9Gwdk4CVA+DL9afSphvFNa4nRiw6RNgb6quwLV4dLPF/gFDvNaOcQ==}
     peerDependencies:
       '@types/react': '*'
@@ -3172,12 +3212,12 @@ packages:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3232,7 +3272,7 @@ packages:
       - '@types/react'
     dev: false
 
-  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-dialog@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-hJtRy/jPULGQZceSAP2Re6/4NpKo8im6V8P2hUqZsdFiSL8l35kYsw3qbRI6Ay5mQd2+wlLqje770eq+RJ3yZg==}
     peerDependencies:
       '@types/react': '*'
@@ -3249,17 +3289,17 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -3296,7 +3336,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
       '@types/react': '*'
@@ -3312,16 +3352,16 @@ packages:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-dropdown-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xdOrZzOTocqqkCkYo8yRPCib5OkTkqN7lqNCdxwPOdE466DOaNl4N8PkUIlsXthQvW5Wwkd+aEmWpfWlBoDPEw==}
     peerDependencies:
       '@types/react': '*'
@@ -3339,11 +3379,11 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-menu': 2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3385,7 +3425,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
     peerDependencies:
       '@types/react': '*'
@@ -3400,15 +3440,15 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-hover-card@1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-hover-card@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2K3ToJuMk9wjwBOa+jdg2oPma+AmLdcEyTNsG/iC4BDVG3E0/mGCjbY8PEDSLxJcUi+nJi2QII+ec/4kWd88DA==}
     peerDependencies:
       '@types/react': '*'
@@ -3425,14 +3465,14 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3462,7 +3502,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==}
     peerDependencies:
       '@types/react': '*'
@@ -3476,14 +3516,14 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.15
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-menu@2.0.5(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==}
     peerDependencies:
       '@types/react': '*'
@@ -3498,30 +3538,30 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.2.12)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-popover@1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-popover@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-cZ4defGpkZ0qTRtlIBzJLSzL6ht7ofhhW4i1+pkemjV1IKXm0wgCRnee154qlV6r9Ttunmh2TNZhMfV2bavUyA==}
     peerDependencies:
       '@types/react': '*'
@@ -3538,25 +3578,25 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.2.12)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==}
     peerDependencies:
       '@types/react': '*'
@@ -3571,17 +3611,17 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@floating-ui/react-dom': 2.0.2(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/rect': 1.0.1
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3598,7 +3638,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
       '@types/react': '*'
@@ -3612,9 +3652,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.15
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3632,7 +3672,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
       '@types/react': '*'
@@ -3649,7 +3689,7 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3666,7 +3706,7 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
     peerDependencies:
       '@types/react': '*'
@@ -3682,12 +3722,12 @@ packages:
       '@babel/runtime': 7.22.15
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-radio-group@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==}
     peerDependencies:
       '@types/react': '*'
@@ -3705,19 +3745,19 @@ packages:
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==}
     peerDependencies:
       '@types/react': '*'
@@ -3732,21 +3772,21 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-select@1.2.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-select@1.2.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==}
     peerDependencies:
       '@types/react': '*'
@@ -3762,32 +3802,32 @@ packages:
       '@babel/runtime': 7.22.15
       '@radix-ui/number': 1.0.1
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       aria-hidden: 1.2.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
       react-remove-scroll: 2.5.5(@types/react@18.2.12)(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==}
     peerDependencies:
       '@types/react': '*'
@@ -3801,9 +3841,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.15
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -3833,7 +3873,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-switch@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==}
     peerDependencies:
       '@types/react': '*'
@@ -3850,17 +3890,17 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-tabs@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
     peerDependencies:
       '@types/react': '*'
@@ -3878,17 +3918,17 @@ packages:
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-toast@1.1.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-toast@1.1.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wf+fc8DOywrpRK3jlPlWVe+ELYGHdKDaaARJZNuUTWyWYq7+ANCFLp4rTjZ/mcGkJJQ/vZ949Zis9xxEpfq9OA==}
     peerDependencies:
       '@types/react': '*'
@@ -3903,24 +3943,24 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.15
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
-  /@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==}
     peerDependencies:
       '@types/react': '*'
@@ -3937,17 +3977,17 @@ packages:
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-context': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-id': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot': 1.0.2(@types/react@18.2.12)(react@18.2.0)
       '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.12)(react@18.2.0)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -4092,7 +4132,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
+  /@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==}
     peerDependencies:
       '@types/react': '*'
@@ -4106,9 +4146,9 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.15
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.5)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.12)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.12
-      '@types/react-dom': 18.2.5
+      '@types/react-dom': 18.2.7
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
@@ -5131,7 +5171,7 @@ packages:
   /@types/hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==}
     dependencies:
-      '@types/react': 18.2.16
+      '@types/react': 18.2.12
       hoist-non-react-statics: 3.3.2
     dev: false
 
@@ -5279,13 +5319,13 @@ packages:
   /@types/react-dom@18.2.5:
     resolution: {integrity: sha512-sRQsOS/sCLnpQhR4DSKGTtWFE3FZjpQa86KPVbhUqdYMRZ9FEFcfAytKhR/vUG2rH1oFbOOej6cuD7MFSobDRQ==}
     dependencies:
-      '@types/react': 18.2.16
+      '@types/react': 18.2.21
+    dev: true
 
   /@types/react-dom@18.2.7:
     resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
     dependencies:
-      '@types/react': 18.2.16
-    dev: true
+      '@types/react': 18.2.12
 
   /@types/react@18.2.12:
     resolution: {integrity: sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==}
@@ -5294,12 +5334,13 @@ packages:
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
 
-  /@types/react@18.2.16:
-    resolution: {integrity: sha512-LLFWr12ZhBJ4YVw7neWLe6Pk7Ey5R9OCydfuMsz1L8bZxzaawJj2p06Q8/EFEHDeTBQNFLF62X+CG7B2zIyu0Q==}
+  /@types/react@18.2.21:
+    resolution: {integrity: sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==}
     dependencies:
       '@types/prop-types': 15.7.6
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
+    dev: true
 
   /@types/resolve@1.20.2:
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
@@ -5334,7 +5375,7 @@ packages:
   /@types/swagger-ui-react@4.18.0:
     resolution: {integrity: sha512-XtvFXmj46Zibe89tFQwSQknrq1NxEtOep2rZuxth7K88tyPEP00FnoA6H7ATYhocAEA4XUWaNHNFWFRl1KX8aQ==}
     dependencies:
-      '@types/react': 18.2.16
+      '@types/react': 18.2.12
     dev: true
 
   /@types/through@0.0.31:
@@ -7245,7 +7286,7 @@ packages:
       '@cloudflare/workers-types': '>=3'
       '@libsql/client': '*'
       '@neondatabase/serverless': '>=0.1'
-      '@opentelemetry/api': ^1.4.1
+      '@opentelemetry/api': 1.4.1
       '@planetscale/database': '>=1'
       '@types/better-sqlite3': '*'
       '@types/pg': '*'
@@ -10718,7 +10759,7 @@ packages:
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
-      '@opentelemetry/api': ^1.1.0
+      '@opentelemetry/api': 1.4.1
       fibers: '>= 3.1.0'
       react: ^18.2.0
       react-dom: ^18.2.0
@@ -10761,7 +10802,7 @@ packages:
     engines: {node: '>=16.8.0'}
     hasBin: true
     peerDependencies:
-      '@opentelemetry/api': ^1.1.0
+      '@opentelemetry/api': 1.4.1
       react: ^18.2.0
       react-dom: ^18.2.0
       sass: ^1.3.0
@@ -14480,5 +14521,9 @@ packages:
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
 
+  /zod@3.22.2:
+    resolution: {integrity: sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==}
+    dev: false
+
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
-- 
2.51.2