@plannotator/ui 0.22.0 → 0.23.0

package/components/OpenInAppButton.tsx

@@ -212,22 +212,24 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
         )}
         {/* Chevron (with primary) or standalone overflow (copy-only). */}
         <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger asChild>
-            <button
-              type="button"
-              disabled={isDisabled}
-              className={`text-xs flex items-center py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
-                openable ? 'px-1 border-l border-border/50' : 'px-1.5'
-              }`}
-              title={openable ? 'Open in…' : 'File actions'}
-              aria-label={openable ? 'Choose app to open in' : 'File actions'}
-            >
-              {openable ? (
-                <ChevronDown className="w-3 h-3" />
-              ) : (
-                <MoreHorizontal className="w-3.5 h-3.5" />
-              )}
-            </button>
+          <DropdownMenuTrigger
+            render={
+              <button
+                type="button"
+                disabled={isDisabled}
+                className={`text-xs flex items-center py-1 transition-colors text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed ${
+                  openable ? 'px-1 border-l border-border/50' : 'px-1.5'
+                }`}
+                title={openable ? 'Open in…' : 'File actions'}
+                aria-label={openable ? 'Choose app to open in' : 'File actions'}
+              />
+            }
+          >
+            {openable ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <MoreHorizontal className="w-3.5 h-3.5" />
+            )}
           </DropdownMenuTrigger>
           <DropdownMenuContent
             align="end"
@@ -235,7 +237,7 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             className="min-w-[12rem]"
             // Don't snap focus (and its focus ring) back onto the trigger when
             // the menu closes — that left-edge bar reads as a stray artifact.
-            onCloseAutoFocus={(event) => event.preventDefault()}
+            finalFocus={false}
           >
             {openable &&
               grouped.map((group, gi) => (
@@ -244,10 +246,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
                   {group.map((app) => (
                     <DropdownMenuItem
                       key={app.id}
-                      onSelect={(e) => {
-                        e.preventDefault();
-                        selectApp(app.id);
-                      }}
+                      closeOnClick={false}
+                      onClick={() => selectApp(app.id)}
                       className="text-xs"
                     >
                       <AppIcon id={app.icon} className="w-4 h-4" />
@@ -260,10 +260,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             {openable && (filePath || diffText) && <DropdownMenuSeparator />}
             {filePath && (
               <DropdownMenuItem
-                onSelect={(e) => {
-                  e.preventDefault();
-                  void copyText(filePath);
-                }}
+                closeOnClick={false}
+                onClick={() => void copyText(filePath)}
                 className="text-xs"
               >
                 <Copy className="w-4 h-4" />
@@ -272,10 +270,8 @@ export const OpenInAppButton: React.FC<OpenInAppButtonProps> = ({
             )}
             {diffText && (
               <DropdownMenuItem
-                onSelect={(e) => {
-                  e.preventDefault();
-                  void copyText(diffText);
-                }}
+                closeOnClick={false}
+                onClick={() => void copyText(diffText)}
                 className="text-xs"
               >
                 <Copy className="w-4 h-4" />

package/components/PopoutDialog.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
+import { Dialog } from '@base-ui/react/dialog';
 
 const ANNOTATION_SELECTORS = [
   '.annotation-toolbar',
@@ -14,7 +14,7 @@ interface PopoutDialogProps {
   container?: HTMLElement | null;
   className?: string;
   children: React.ReactNode;
-  /** Extra data attributes to spread onto Dialog.Content */
+  /** Extra data attributes to spread onto the dialog popup */
   dataAttributes?: Record<string, string>;
 }
 
@@ -36,55 +36,69 @@ export const PopoutDialog: React.FC<PopoutDialogProps> = ({
     [onClose],
   );
 
-  const handleInteractOutside = useCallback(
-    (e: Event) => {
-      const target = e.target as Element | null;
-      if (!target) return;
-      if (ANNOTATION_SELECTORS.some((sel) => target.closest(sel))) {
-        e.preventDefault();
+  const handleOpenChange = useCallback(
+    (next: boolean, eventDetails: Dialog.Root.ChangeEventDetails) => {
+      if (next) return;
+      // Interactions with annotation UI (toolbars/popovers portal outside the
+      // dialog) must not dismiss the popout — the Radix version guarded this
+      // via onInteractOutside preventDefault; Base UI expresses it as
+      // cancelling the outside-press/focus-out close reason.
+      if (eventDetails.reason === 'outside-press' || eventDetails.reason === 'focus-out') {
+        // For focus events the annotation UI may sit on either side of the
+        // event (target = element losing focus, relatedTarget = gaining), so
+        // guard both.
+        const event = eventDetails.event as Event | undefined;
+        const candidates = [
+          event?.target as Element | null,
+          (event as FocusEvent | undefined)?.relatedTarget as Element | null,
+        ];
+        if (
+          candidates.some(
+            (el) => el instanceof Element && ANNOTATION_SELECTORS.some((sel) => el.closest(sel)),
+          )
+        ) {
+          eventDetails.cancel();
+          return;
+        }
       }
+      onClose();
     },
-    [],
+    [onClose],
   );
 
   return (
-    <Dialog.Root
-      open={open}
-      onOpenChange={(next) => { if (!next) onClose(); }}
-      modal={false}
-    >
+    <Dialog.Root open={open} onOpenChange={handleOpenChange} modal={false}>
       <Dialog.Portal container={container ?? undefined}>
-        {/* Radix ignores Dialog.Overlay when modal={false}, so we use a plain
-            div for the backdrop. This gives us the dark scrim + blur while
-            keeping annotation toolbars (which portal outside the dialog)
-            interactive. */}
+        {/* Non-modal dialogs render no library backdrop, so we use a plain
+            div for the dark scrim + blur while keeping annotation toolbars
+            (which portal outside the dialog) interactive. */}
         <div
           className="fixed inset-0 z-50 bg-black/50 backdrop-blur-[2px]"
           onClick={handleBackdropClick}
           aria-hidden="true"
         />
-        <Dialog.Content
+        <Dialog.Popup
           className={`fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 bg-background border border-border rounded-xl shadow-2xl flex flex-col overflow-hidden ${className ?? 'w-[calc(100vw-4rem)] max-w-[min(calc(100vw-4rem),1500px)] max-h-[calc(100vh-4rem)]'}`}
           data-popout="true"
-          aria-describedby={undefined}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          onInteractOutside={handleInteractOutside}
+          initialFocus={false}
           {...dataAttributes}
         >
           <Dialog.Title className="sr-only">{title}</Dialog.Title>
-          <Dialog.Close asChild>
-            <button
-              className="absolute top-3 right-3 z-20 p-1.5 rounded-md text-muted-foreground/70 hover:bg-muted hover:text-foreground transition-colors"
-              aria-label="Close"
-            >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
+          <Dialog.Close
+            render={
+              <button
+                className="absolute top-3 right-3 z-20 p-1.5 rounded-md text-muted-foreground/70 hover:bg-muted hover:text-foreground transition-colors"
+                aria-label="Close"
+              />
+            }
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </Dialog.Close>
 
           {children}
-        </Dialog.Content>
+        </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>
   );

package/components/Popover.tsx

@@ -1,27 +1,33 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
 import React from 'react';
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
-  React.ComponentRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 6, children, ...props }, ref) => (
+  HTMLDivElement,
+  PopoverPrimitive.Popup.Props &
+    Pick<PopoverPrimitive.Positioner.Props, 'side' | 'sideOffset' | 'align' | 'alignOffset'>
+>(({ className, side, align = 'center', sideOffset = 6, alignOffset, children, ...props }, ref) => (
   <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
+    <PopoverPrimitive.Positioner
+      side={side}
       align={align}
       sideOffset={sideOffset}
-      className={`bg-popover text-popover-foreground border border-border/50 rounded-lg shadow-xl z-[100] outline-none popover-enter ${className ?? ''}`}
-      {...props}
+      alignOffset={alignOffset}
+      className="isolate z-[100]"
     >
-      {children}
-    </PopoverPrimitive.Content>
+      <PopoverPrimitive.Popup
+        ref={ref}
+        className={`bg-popover text-popover-foreground border border-border/50 rounded-lg shadow-xl z-[100] outline-none origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${className ?? ''}`}
+        {...props}
+      >
+        {children}
+      </PopoverPrimitive.Popup>
+    </PopoverPrimitive.Positioner>
   </PopoverPrimitive.Portal>
 ));
 
 PopoverContent.displayName = 'PopoverContent';
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent };

package/components/SearchableSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef, useCallback, type ReactNode } from 'react';
+import React, { useState, useMemo, useRef, useCallback, type ReactElement, type ReactNode } from 'react';
 import { Popover, PopoverTrigger, PopoverContent } from './Popover';
 
 interface SearchableSelectProps<T extends { id: string }> {
@@ -7,7 +7,7 @@ interface SearchableSelectProps<T extends { id: string }> {
   onSelect: (item: T) => void;
   filterFn: (item: T, query: string) => boolean;
   renderItem: (item: T, state: { isSelected: boolean; isFocused: boolean }) => ReactNode;
-  renderTrigger: (state: { open: boolean }) => ReactNode;
+  renderTrigger: (state: { open: boolean }) => ReactElement;
   headerContent?: ReactNode;
   placeholder?: string;
   emptyMessage?: string;
@@ -85,14 +85,11 @@ export function SearchableSelect<T extends { id: string }>({
 
   return (
     <Popover open={open} onOpenChange={handleOpenChange}>
-      <PopoverTrigger asChild>{renderTrigger({ open })}</PopoverTrigger>
+      <PopoverTrigger render={renderTrigger({ open })} />
       <PopoverContent
         align={align}
         className={`${width} p-0`}
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-          inputRef.current?.focus();
-        }}
+        initialFocus={inputRef}
       >
         {/* Search row */}
         <div className="flex items-center gap-2 border-b border-border/50 px-3 py-2">

package/components/Tooltip.tsx

@@ -1,11 +1,39 @@
 import React from 'react';
-import * as RadixTooltip from '@radix-ui/react-tooltip';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
 
-export const TooltipProvider = RadixTooltip.Provider;
+/**
+ * TooltipProvider keeps the Radix-era prop names (`delayDuration`,
+ * `skipDelayDuration`, `disableHoverableContent`) as its public API and maps
+ * them onto Base UI's Provider (`delay`, `timeout`) — call sites in the apps
+ * stay unchanged. `disableHoverableContent` has no provider-level equivalent
+ * in Base UI (it moved to per-root `disableHoverablePopup`), so it is carried
+ * via context and applied to every Tooltip root under the provider.
+ */
+const DisableHoverablePopupContext = React.createContext(false);
+
+interface TooltipProviderProps {
+  delayDuration?: number;
+  skipDelayDuration?: number;
+  disableHoverableContent?: boolean;
+  children?: React.ReactNode;
+}
+
+export const TooltipProvider: React.FC<TooltipProviderProps> = ({
+  delayDuration,
+  skipDelayDuration,
+  disableHoverableContent = false,
+  children,
+}) => (
+  <BaseTooltip.Provider delay={delayDuration} timeout={skipDelayDuration}>
+    <DisableHoverablePopupContext.Provider value={disableHoverableContent}>
+      {children}
+    </DisableHoverablePopupContext.Provider>
+  </BaseTooltip.Provider>
+);
 
 interface TooltipProps {
   content: React.ReactNode;
-  children: React.ReactNode;
+  children: React.ReactElement;
   side?: 'top' | 'right' | 'bottom' | 'left';
   align?: 'start' | 'center' | 'end';
   delayDuration?: number;
@@ -26,20 +54,22 @@ export const Tooltip: React.FC<TooltipProps> = ({
   delayDuration,
   sideOffset = 8,
   wide = false,
-}) => (
-  <RadixTooltip.Root delayDuration={delayDuration}>
-    <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
-    <RadixTooltip.Portal>
-      <RadixTooltip.Content
-        side={side}
-        align={align}
-        sideOffset={sideOffset}
-        className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--radix-tooltip-content-transform-origin)] transition-[opacity,transform] duration-150 ease-out data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=delayed-open]:opacity-100 data-[state=delayed-open]:scale-100 data-[state=instant-open]:opacity-100 data-[state=instant-open]:scale-100 ${
-          wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
-        }`}
-      >
-        {content}
-      </RadixTooltip.Content>
-    </RadixTooltip.Portal>
-  </RadixTooltip.Root>
-);
+}) => {
+  const disableHoverablePopup = React.useContext(DisableHoverablePopupContext);
+  return (
+    <BaseTooltip.Root disableHoverablePopup={disableHoverablePopup}>
+      <BaseTooltip.Trigger render={children} delay={delayDuration} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner side={side} align={align} sideOffset={sideOffset} className="isolate z-50">
+          <BaseTooltip.Popup
+            className={`z-50 px-2 py-1 text-xs bg-popover text-popover-foreground border border-border rounded shadow-md origin-[var(--transform-origin)] transition-[opacity,scale] duration-150 ease-out data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 ${
+              wide ? 'max-w-[260px] leading-snug whitespace-normal' : 'whitespace-nowrap'
+            }`}
+          >
+            {content}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
+  );
+};

package/components/ui/badge.tsx

@@ -1,4 +1,5 @@
-import { Slot } from "@radix-ui/react-slot";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
@@ -6,8 +7,9 @@ import { cn } from "../../lib/utils";
 
 /**
  * Badge — small labelled token (status, category, count). Token-driven variants.
- * Pass `asChild` to render as a link/button. Override padding/size via className
- * for tighter inline badges (e.g. `px-1.5 py-px text-[10px]`).
+ * Pass `render` (e.g. `render={<a href=... />}`) to render as a link/button.
+ * Override padding/size via className for tighter inline badges
+ * (e.g. `px-1.5 py-px text-[10px]`).
  */
 const badgeVariants = cva(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-auto whitespace-nowrap rounded-md border px-3 py-1 text-xs font-medium transition-[color,box-shadow] [&>svg]:size-3 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
@@ -31,14 +33,17 @@ const badgeVariants = cva(
 function Badge({
   className,
   variant,
-  asChild = false,
+  render,
   ...props
-}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    render,
+    props: mergeProps<"span">(
+      { "data-slot": "badge", className: cn(badgeVariants({ variant }), className) } as React.ComponentProps<"span">,
+      props,
+    ),
+  });
 }
 
 export { Badge, badgeVariants };

package/components/ui/button.tsx

@@ -1,4 +1,4 @@
-import { Slot, Slottable } from "@radix-ui/react-slot";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
@@ -7,7 +7,7 @@ import { cn } from "../../lib/utils";
 /**
  * Button — the canonical action primitive (shared by the frontend shell and the
  * embedded plan/review apps). cva variants + sizes, optional `iconLeft`/`iconRight`
- * slots, and `asChild` for polymorphism.
+ * slots, and Base UI's `render` prop for polymorphism (e.g. `render={<a href=... />}`).
  *
  * `success` (solid, token-driven green) covers the plan app's Approve action; the
  * Feedback action uses `outline`. (No `accent` variant — `text-accent` on `bg-accent`
@@ -51,32 +51,32 @@ function Button({
   className,
   variant,
   size,
-  asChild = false,
   iconLeft,
   iconRight,
   ...props
-}: React.ComponentProps<"button"> &
+}: ButtonPrimitive.Props &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
     iconLeft?: ButtonIcon;
     iconRight?: ButtonIcon;
   }) {
-  const Comp = asChild ? Slot : "button";
-
   return (
-    <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props}>
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
       {iconLeft ? (
         <span data-slot="button-icon" data-side="left" aria-hidden="true" className="shrink-0">
           {iconLeft}
         </span>
       ) : null}
-      <Slottable>{children}</Slottable>
+      {children}
       {iconRight ? (
         <span data-slot="button-icon" data-side="right" aria-hidden="true" className="shrink-0">
           {iconRight}
         </span>
       ) : null}
-    </Comp>
+    </ButtonPrimitive>
   );
 }
 

package/components/ui/dialog.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils";
 
@@ -9,31 +9,31 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+  React.ComponentRef<typeof DialogPrimitive.Backdrop>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Backdrop>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
+  <DialogPrimitive.Backdrop
     ref={ref}
     className={cn(
       "fixed inset-0 z-[110] bg-black/55 backdrop-blur-[2px]",
-      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      "transition-opacity duration-200",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
       className,
     )}
     {...props}
   />
 ));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+DialogOverlay.displayName = "DialogOverlay";
 
 const DialogContent = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  React.ComponentRef<typeof DialogPrimitive.Popup>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Popup> & {
     hideClose?: boolean;
   }
 >(({ className, children, hideClose, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
-    <DialogPrimitive.Content
+    <DialogPrimitive.Popup
       ref={ref}
       className={cn(
         "fixed top-[50%] left-[50%] z-[110] w-full translate-x-[-50%] translate-y-[-50%]",
@@ -41,9 +41,9 @@ const DialogContent = React.forwardRef<
         "flex flex-col overflow-hidden",
         "rounded-2xl border border-border bg-popover text-popover-foreground",
         "shadow-[0_24px_80px_-36px_rgba(15,23,42,0.5)]",
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-        "duration-200",
+        "transition-[opacity,scale] duration-200",
+        "data-starting-style:opacity-0 data-starting-style:scale-95",
+        "data-ending-style:opacity-0 data-ending-style:scale-95",
         className,
       )}
       {...props}
@@ -55,10 +55,10 @@ const DialogContent = React.forwardRef<
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
       )}
-    </DialogPrimitive.Content>
+    </DialogPrimitive.Popup>
   </DialogPortal>
 ));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+DialogContent.displayName = "DialogContent";
 
 function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
@@ -79,7 +79,7 @@ const DialogTitle = React.forwardRef<
     {...props}
   />
 ));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+DialogTitle.displayName = "DialogTitle";
 
 const DialogDescription = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Description>,
@@ -91,7 +91,7 @@ const DialogDescription = React.forwardRef<
     {...props}
   />
 ));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+DialogDescription.displayName = "DialogDescription";
 
 export {
   Dialog,