"use client"; import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"; import { cn } from "~/lib/utils";import {  DIALOG_BACKDROP_CLASS,  DIALOG_MOBILE_SHEET_CLASS,  DIALOG_POPUP_CLASS,} from "~/components/ui/dialog-styles"; const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle; const AlertDialog = AlertDialogPrimitive.Root; const AlertDialogPortal = AlertDialogPrimitive.Portal; function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;} function AlertDialogBackdrop({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {  return (    <AlertDialogPrimitive.Backdrop      forceRender      className={cn(DIALOG_BACKDROP_CLASS, className)}      data-slot="alert-dialog-backdrop"      {...props}    />  );} function AlertDialogViewport({ className, ...props }: AlertDialogPrimitive.Viewport.Props) {  return (    <AlertDialogPrimitive.Viewport      className={cn(        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_1fr] justify-items-center p-4",        className,      )}      data-slot="alert-dialog-viewport"      {...props}    />  );} function AlertDialogPopup({  className,  bottomStickOnMobile = true,  portalContainer,  ...props}: AlertDialogPrimitive.Popup.Props & {  bottomStickOnMobile?: boolean;  portalContainer?: AlertDialogPrimitive.Portal.Props["container"];}) {  return (    <AlertDialogPortal container={portalContainer}>      <AlertDialogBackdrop />      <AlertDialogViewport        className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}      >        <AlertDialogPrimitive.Popup          className={cn(            DIALOG_POPUP_CLASS,            "row-start-2 max-h-full max-w-lg text-popover-foreground",            bottomStickOnMobile && DIALOG_MOBILE_SHEET_CLASS,            className,          )}          data-slot="alert-dialog-popup"          {...props}        />      </AlertDialogViewport>    </AlertDialogPortal>  );} function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {  return (    <div      className={cn("flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left", className)}      data-slot="alert-dialog-header"      {...props}    />  );} function AlertDialogFooter({  className,  variant = "default",  ...props}: React.ComponentProps<"div"> & {  variant?: "default" | "bare";}) {  return (    <div      className={cn(        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",        variant === "default" && "border-t bg-muted/72 py-4",        variant === "bare" && "pb-6",        className,      )}      data-slot="alert-dialog-footer"      {...props}    />  );} function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {  return (    <AlertDialogPrimitive.Title      className={cn("font-heading font-semibold text-xl leading-none", className)}      data-slot="alert-dialog-title"      {...props}    />  );} function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {  return (    <AlertDialogPrimitive.Description      className={cn("text-muted-foreground text-sm", className)}      data-slot="alert-dialog-description"      {...props}    />  );} function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {  return <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />;} export {  AlertDialogCreateHandle,  AlertDialog,  AlertDialogPortal,  AlertDialogBackdrop,  AlertDialogBackdrop as AlertDialogOverlay,  AlertDialogTrigger,  AlertDialogPopup,  AlertDialogPopup as AlertDialogContent,  AlertDialogHeader,  AlertDialogFooter,  AlertDialogTitle,  AlertDialogDescription,  AlertDialogClose,  AlertDialogViewport,};