elevenlabs-webhook-nodejs 1.0.0

package/frontend/src/components/shared/file-upload.tsx

@@ -0,0 +1,140 @@
+import { useCallback, useState, useRef } from "react"
+import { cn } from "@/lib/utils"
+import { Upload, X, FileText, Image, File } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export interface UploadedFile {
+  file: File
+  preview?: string
+  id: string
+}
+
+interface FileUploadProps {
+  accept?: string
+  multiple?: boolean
+  maxSizeMB?: number
+  maxFiles?: number
+  onFilesChange: (files: UploadedFile[]) => void
+  className?: string
+  label?: string
+  description?: string
+}
+
+function getFileIcon(type: string) {
+  if (type.startsWith("image/")) return <Image className="w-5 h-5 text-blue-500" />
+  if (type === "application/pdf") return <FileText className="w-5 h-5 text-red-500" />
+  return <File className="w-5 h-5 text-muted-foreground" />
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1048576).toFixed(1)} MB`
+}
+
+export function FileUpload({
+  accept,
+  multiple = false,
+  maxSizeMB = 10,
+  maxFiles = 10,
+  onFilesChange,
+  className,
+  label = "Upload files",
+  description,
+}: FileUploadProps) {
+  const [files, setFiles] = useState<UploadedFile[]>([])
+  const [dragOver, setDragOver] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const processFiles = useCallback((incoming: FileList | File[]) => {
+    setError(null)
+    const newFiles: UploadedFile[] = []
+
+    for (const file of Array.from(incoming)) {
+      if (file.size > maxSizeMB * 1048576) {
+        setError(`${file.name} exceeds ${maxSizeMB}MB limit`)
+        continue
+      }
+      const uploaded: UploadedFile = {
+        file,
+        id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      }
+      if (file.type.startsWith("image/")) {
+        uploaded.preview = URL.createObjectURL(file)
+      }
+      newFiles.push(uploaded)
+    }
+
+    const combined = multiple ? [...files, ...newFiles].slice(0, maxFiles) : newFiles.slice(0, 1)
+    setFiles(combined)
+    onFilesChange(combined)
+  }, [files, multiple, maxFiles, maxSizeMB, onFilesChange])
+
+  const removeFile = (id: string) => {
+    const updated = files.filter((f) => f.id !== id)
+    setFiles(updated)
+    onFilesChange(updated)
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Drop Zone */}
+      <div
+        className={cn(
+          "relative rounded-xl border-2 border-dashed transition-colors cursor-pointer",
+          dragOver ? "border-primary bg-primary/5" : "border-border hover:border-primary/50 hover:bg-muted/30",
+        )}
+        onDragOver={(e) => { e.preventDefault(); setDragOver(true) }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => { e.preventDefault(); setDragOver(false); processFiles(e.dataTransfer.files) }}
+        onClick={() => inputRef.current?.click()}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          className="hidden"
+          onChange={(e) => e.target.files && processFiles(e.target.files)}
+        />
+        <div className="flex flex-col items-center py-8 px-4 text-center">
+          <div className={cn("rounded-full p-3 mb-3", dragOver ? "bg-primary/10" : "bg-muted")}>
+            <Upload className={cn("w-5 h-5", dragOver ? "text-primary" : "text-muted-foreground")} />
+          </div>
+          <p className="text-sm font-medium">{label}</p>
+          <p className="text-xs text-muted-foreground mt-1">
+            {description ?? `Drag & drop or click to browse. Max ${maxSizeMB}MB${multiple ? `, up to ${maxFiles} files` : ""}.`}
+          </p>
+        </div>
+      </div>
+
+      {/* Error */}
+      {error && <p className="text-xs text-destructive">{error}</p>}
+
+      {/* File List */}
+      {files.length > 0 && (
+        <div className="space-y-2">
+          {files.map((f) => (
+            <div key={f.id} className="flex items-center gap-3 rounded-lg border border-border bg-card p-2.5">
+              {f.preview ? (
+                <img src={f.preview} alt="" className="w-10 h-10 rounded-md object-cover" />
+              ) : (
+                <div className="w-10 h-10 rounded-md bg-muted flex items-center justify-center">
+                  {getFileIcon(f.file.type)}
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">{f.file.name}</p>
+                <p className="text-xs text-muted-foreground">{formatSize(f.file.size)}</p>
+              </div>
+              <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={(e) => { e.stopPropagation(); removeFile(f.id) }}>
+                <X className="w-3.5 h-3.5" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/frontend/src/components/shared/index.ts

@@ -0,0 +1,20 @@
+export { PageHeader } from "./page-header"
+export { StatCard } from "./stat-card"
+export { EmptyState } from "./empty-state"
+export { StatusDot } from "./status-dot"
+export { StatusBadge } from "./status-badge"
+export { ConfirmDialog } from "./confirm-dialog"
+export { DataTableToolbar } from "./data-table-toolbar"
+export { DataTablePagination } from "./data-table-pagination"
+export { AppointmentCalendar } from "./appointment-calendar"
+export type { CalendarEvent } from "./appointment-calendar"
+export { ChatBubble } from "./chat-bubble"
+export { ActivityTimeline } from "./activity-timeline"
+export type { TimelineItem } from "./activity-timeline"
+export { FileUpload } from "./file-upload"
+export type { UploadedFile } from "./file-upload"
+export { NotificationDropdown } from "./notification-dropdown"
+export type { Notification } from "./notification-dropdown"
+export { Combobox } from "./combobox"
+export type { ComboboxOption } from "./combobox"
+export { LanguageSwitcher } from "./language-switcher"

package/frontend/src/components/shared/language-switcher.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+interface LanguageSwitcherProps {
+  className?: string
+}
+
+export function LanguageSwitcher({ className }: LanguageSwitcherProps) {
+  const { i18n } = useTranslation()
+
+  const toggle = () => {
+    const next = i18n.language === "tr" ? "en" : "tr"
+    i18n.changeLanguage(next)
+    localStorage.setItem("language", next)
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      className={cn("text-xs font-semibold", className)}
+      title={i18n.language === "tr" ? "Switch to English" : "Türkçe'ye geç"}
+    >
+      {i18n.language === "tr" ? "EN" : "TR"}
+    </Button>
+  )
+}

package/frontend/src/components/shared/notification-dropdown.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react"
+import { Bell } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { format } from "date-fns"
+
+export interface Notification {
+  id: string
+  title: string
+  body: string
+  type: "info" | "success" | "warning" | "error"
+  read: boolean
+  timestamp: Date | string
+}
+
+const typeColors = {
+  info: "bg-blue-500",
+  success: "bg-green-500",
+  warning: "bg-yellow-500",
+  error: "bg-red-500",
+}
+
+interface NotificationDropdownProps {
+  notifications: Notification[]
+  onMarkRead?: (id: string) => void
+  onMarkAllRead?: () => void
+  onClear?: () => void
+  className?: string
+}
+
+export function NotificationDropdown({
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+  onClear,
+  className,
+}: NotificationDropdownProps) {
+  const [open, setOpen] = useState(false)
+  const unreadCount = notifications.filter((n) => !n.read).length
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className={cn("relative inline-flex items-center justify-center rounded-lg border border-input bg-input-background h-9 w-9 shadow-xs hover:bg-muted cursor-pointer", className)}>
+        <Bell className="w-4 h-4" />
+        {unreadCount > 0 && (
+          <span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </span>
+        )}
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-80 p-0">
+        <div className="flex items-center justify-between px-4 py-3">
+          <h4 className="text-sm font-semibold">Notifications</h4>
+          {unreadCount > 0 && (
+            <button
+              onClick={onMarkAllRead}
+              className="text-xs text-primary hover:underline cursor-pointer"
+            >
+              Mark all read
+            </button>
+          )}
+        </div>
+        <Separator />
+        <ScrollArea className="max-h-80">
+          {notifications.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">No notifications</p>
+          ) : (
+            <div>
+              {notifications.map((n) => (
+                <button
+                  key={n.id}
+                  onClick={() => onMarkRead?.(n.id)}
+                  className={cn(
+                    "w-full text-left px-4 py-3 hover:bg-muted/50 transition-colors cursor-pointer border-b border-border last:border-0",
+                    !n.read && "bg-primary/5"
+                  )}
+                >
+                  <div className="flex gap-3">
+                    <span className={cn("w-2 h-2 rounded-full mt-1.5 shrink-0", typeColors[n.type])} />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-baseline justify-between gap-2">
+                        <p className={cn("text-sm truncate", !n.read && "font-medium")}>{n.title}</p>
+                        <span className="text-[10px] text-muted-foreground shrink-0 tabular-nums">
+                          {format(new Date(n.timestamp), "HH:mm")}
+                        </span>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{n.body}</p>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+        {notifications.length > 0 && (
+          <>
+            <Separator />
+            <div className="p-2">
+              <Button variant="ghost" size="sm" className="w-full text-xs" onClick={onClear}>
+                Clear all
+              </Button>
+            </div>
+          </>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}

package/frontend/src/components/shared/page-header.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react"
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  children?: ReactNode  // action buttons go here
+}
+
+export function PageHeader({ title, description, children }: PageHeaderProps) {
+  return (
+    <div className="flex items-start justify-between gap-4">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        {description && (
+          <p className="text-muted-foreground">{description}</p>
+        )}
+      </div>
+      {children && (
+        <div className="flex items-center gap-2 shrink-0">{children}</div>
+      )}
+    </div>
+  )
+}

package/frontend/src/components/shared/stat-card.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+interface StatCardProps {
+  title: string
+  value: string | number
+  description?: string
+  icon?: ReactNode
+  trend?: { value: string; positive: boolean }
+  className?: string
+}
+
+export function StatCard({ title, value, description, icon, trend, className }: StatCardProps) {
+  return (
+    <Card className={cn("", className)}>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+      </CardHeader>
+      <CardContent>
+        <div className="text-3xl font-bold">{value}</div>
+        {(description || trend) && (
+          <p className="text-xs text-muted-foreground mt-1">
+            {trend && (
+              <span className={trend.positive ? "text-green-600" : "text-red-600"}>
+                {trend.positive ? "+" : ""}{trend.value}
+              </span>
+            )}
+            {trend && description && " "}
+            {description}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/frontend/src/components/shared/status-badge.tsx

@@ -0,0 +1,70 @@
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+const statusStyles: Record<string, string> = {
+  // Appointment statuses
+  scheduled: "bg-yellow-500/15 text-yellow-700 border-yellow-500/20 dark:text-yellow-400",
+  confirmed: "bg-primary/15 text-primary border-primary/20",
+  in_progress: "bg-blue-500/15 text-blue-700 border-blue-500/20 dark:text-blue-400",
+  completed: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+  cancelled: "bg-red-500/15 text-red-700 border-red-500/20 dark:text-red-400",
+  no_show: "bg-red-500/15 text-red-600 border-red-500/20 dark:text-red-400",
+
+  // Session statuses
+  active: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+  waiting: "bg-yellow-500/15 text-yellow-700 border-yellow-500/20 dark:text-yellow-400",
+  resolved: "bg-gray-500/15 text-gray-600 border-gray-500/20 dark:text-gray-400",
+
+  // Lead statuses
+  new_lead: "bg-blue-500/15 text-blue-700 border-blue-500/20 dark:text-blue-400",
+  contacted: "bg-primary/15 text-primary border-primary/20",
+  appointment_scheduled: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+  lost: "bg-gray-500/15 text-gray-600 border-gray-500/20 dark:text-gray-400",
+  expired: "bg-gray-500/15 text-gray-500 border-gray-500/20 dark:text-gray-500",
+
+  // Operator statuses
+  pending: "bg-yellow-500/15 text-yellow-700 border-yellow-500/20 dark:text-yellow-400",
+  responded: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+
+  // Campaign statuses
+  draft: "bg-gray-500/15 text-gray-600 border-gray-500/20 dark:text-gray-400",
+  running: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+  paused: "bg-yellow-500/15 text-yellow-700 border-yellow-500/20 dark:text-yellow-400",
+  submitted: "bg-blue-500/15 text-blue-700 border-blue-500/20 dark:text-blue-400",
+
+  // Call statuses
+  failed: "bg-red-500/15 text-red-700 border-red-500/20 dark:text-red-400",
+  no_answer: "bg-orange-500/15 text-orange-700 border-orange-500/20 dark:text-orange-400",
+  voicemail: "bg-purple-500/15 text-purple-700 border-purple-500/20 dark:text-purple-400",
+
+  // Generic
+  success: "bg-green-500/15 text-green-700 border-green-500/20 dark:text-green-400",
+  error: "bg-red-500/15 text-red-700 border-red-500/20 dark:text-red-400",
+  warning: "bg-yellow-500/15 text-yellow-700 border-yellow-500/20 dark:text-yellow-400",
+  info: "bg-blue-500/15 text-blue-700 border-blue-500/20 dark:text-blue-400",
+}
+
+const statusLabels: Record<string, string> = {
+  new_lead: "New",
+  no_show: "No Show",
+  in_progress: "In Progress",
+  appointment_scheduled: "Appt Scheduled",
+  no_answer: "No Answer",
+}
+
+interface StatusBadgeProps {
+  status: string
+  label?: string
+  className?: string
+}
+
+export function StatusBadge({ status, label, className }: StatusBadgeProps) {
+  const style = statusStyles[status] ?? statusStyles.info
+  const displayLabel = label ?? statusLabels[status] ?? status.replace(/_/g, " ")
+
+  return (
+    <Badge variant="outline" className={cn("capitalize", style, className)}>
+      {displayLabel}
+    </Badge>
+  )
+}

package/frontend/src/components/shared/status-dot.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+
+const statusColors = {
+  online: "bg-green-500",
+  offline: "bg-gray-400",
+  active: "bg-green-500",
+  waiting: "bg-yellow-500",
+  busy: "bg-red-500",
+  scheduled: "bg-blue-500",
+  completed: "bg-green-500",
+  cancelled: "bg-red-500",
+  no_show: "bg-red-400",
+  in_progress: "bg-blue-500",
+  confirmed: "bg-primary",
+  pending: "bg-yellow-500",
+  expired: "bg-gray-400",
+  responded: "bg-green-500",
+} as const
+
+type StatusType = keyof typeof statusColors
+
+interface StatusDotProps {
+  status: StatusType | string
+  pulse?: boolean
+  className?: string
+  label?: string
+}
+
+export function StatusDot({ status, pulse = false, className, label }: StatusDotProps) {
+  const color = statusColors[status as StatusType] ?? "bg-gray-400"
+
+  return (
+    <span className={cn("inline-flex items-center gap-1.5", className)}>
+      <span className="relative flex h-2.5 w-2.5">
+        {pulse && (
+          <span className={cn("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", color)} />
+        )}
+        <span className={cn("relative inline-flex h-2.5 w-2.5 rounded-full", color)} />
+      </span>
+      {label && <span className="text-sm">{label}</span>}
+    </span>
+  )
+}

package/frontend/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}