@ngrok/mantle 0.70.2 → 0.71.1

package/dist/alert-dialog.d.ts

@@ -68,7 +68,12 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
 };
 /**
  * A modal dialog that interrupts the user with important content and expects a
- * response.
+ * response. Use AlertDialog for destructive or irreversible confirmations
+ * (delete, sign out, leave without saving) where the user must explicitly
+ * acknowledge before proceeding — it blocks all background interaction by
+ * default. For non-destructive input modals or confirmation flows, use
+ * `Dialog` instead. For side-panel content (filter panels, detail views,
+ * navigation drawers), use `Sheet`.
  *
  * @see https://mantle.ngrok.com/components/alert-dialog
  *
@@ -120,7 +125,11 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
  */
 declare const AlertDialog: {
   /**
-   * A modal dialog that interrupts the user with important content and expects a response.
+   * The root stateful component for the Alert Dialog. Wraps the trigger and
+   * content and exposes the required `priority` prop (`"danger"` for
+   * destructive actions, `"info"` for informational confirmations) which
+   * propagates color to descendants like `AlertDialog.Icon` and
+   * `AlertDialog.Action`.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot
    *
@@ -129,19 +138,25 @@ declare const AlertDialog: {
    * <AlertDialog.Root priority="danger">
    *   <AlertDialog.Trigger asChild>
    *     <Button type="button" appearance="outlined">
-   *       Show Alert Dialog
+   *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
    *   <AlertDialog.Content>
    *     <AlertDialog.Icon />
    *     <AlertDialog.Body>
    *       <AlertDialog.Header>
-   *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
    *       </AlertDialog.Header>
    *       <AlertDialog.Footer>
-   *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *         <AlertDialog.Action>Continue</AlertDialog.Action>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
    *       </AlertDialog.Footer>
    *     </AlertDialog.Body>
    *   </AlertDialog.Content>
@@ -150,22 +165,47 @@ declare const AlertDialog: {
    */
   readonly Root: typeof Root;
   /**
-   * A button that confirms the Alert Dialog action.
+   * A button that confirms the Alert Dialog action. Defaults to
+   * `appearance="filled"` and inherits the priority color from the parent
+   * `AlertDialog.Root`. Does not close the dialog by default — wrap with
+   * `AlertDialog.Close asChild` if the action should also dismiss.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction
    *
    * @example
    * ```tsx
-   * <AlertDialog.Footer>
-   *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *   <AlertDialog.Action>Continue</AlertDialog.Action>
-   * </AlertDialog.Footer>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Action: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -175,7 +215,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -184,45 +224,83 @@ declare const AlertDialog: {
     type: Exclude<ComponentProps<"button">["type"], undefined>;
   }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
   /**
-   * Contains the main content of the alert dialog.
+   * Contains the main content of the alert dialog. Wraps the header and footer
+   * inside `AlertDialog.Content` next to `AlertDialog.Icon`.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody
    *
    * @example
    * ```tsx
-   * <AlertDialog.Content>
-   *   <AlertDialog.Icon />
-   *   <AlertDialog.Body>
-   *     <AlertDialog.Header>
-   *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   *     </AlertDialog.Header>
-   *     <AlertDialog.Footer>
-   *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *       <AlertDialog.Action>Continue</AlertDialog.Action>
-   *     </AlertDialog.Footer>
-   *   </AlertDialog.Body>
-   * </AlertDialog.Content>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Body: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
-   * A button that closes the dialog and cancels the action.
+   * A button that closes the dialog and cancels the action. Defaults to
+   * `appearance="outlined"` and `priority="neutral"` so it visually
+   * de-emphasizes against `AlertDialog.Action`.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel
    *
    * @example
    * ```tsx
-   * <AlertDialog.Footer>
-   *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *   <AlertDialog.Action>Continue</AlertDialog.Action>
-   * </AlertDialog.Footer>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Cancel: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -232,7 +310,7 @@ declare const AlertDialog: {
   }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
     appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
     isLoading?: boolean | null | undefined;
-    priority?: "danger" | "neutral" | "default" | null | undefined;
+    priority?: "default" | "danger" | "neutral" | null | undefined;
   } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
     icon?: ReactNode;
     iconPlacement?: "start" | "end";
@@ -241,43 +319,79 @@ declare const AlertDialog: {
     type: Exclude<ComponentProps<"button">["type"], undefined>;
   }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
   /**
-   * A button that closes the Alert Dialog. (Unstyled)
+   * A button that closes the Alert Dialog. (Unstyled) Typically wrapped
+   * around `AlertDialog.Action` with `asChild` so the action both performs
+   * the operation and dismisses the dialog.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose
    *
    * @example
    * ```tsx
-   * <AlertDialog.Close asChild>
-   *   <AlertDialog.Action
-   *     type="button"
-   *     onClick={() => doThing()}
-   *   >
-   *     Do thing and close
-   *   </AlertDialog.Action>
-   * </AlertDialog.Close>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Close asChild>
+   *           <AlertDialog.Action type="button" onClick={() => doThing()}>
+   *             Do thing and close
+   *           </AlertDialog.Action>
+   *         </AlertDialog.Close>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Close: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogCloseProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
   /**
-   * The popover alert dialog container.
+   * The popover alert dialog container. Renders on top of the overlay,
+   * centered in the viewport.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent
    *
    * @example
    * ```tsx
-   * <AlertDialog.Content>
-   *   <AlertDialog.Icon />
-   *   <AlertDialog.Body>
-   *     <AlertDialog.Header>
-   *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   *     </AlertDialog.Header>
-   *     <AlertDialog.Footer>
-   *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *       <AlertDialog.Action>Continue</AlertDialog.Action>
-   *     </AlertDialog.Footer>
-   *   </AlertDialog.Body>
-   * </AlertDialog.Content>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Content: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -293,76 +407,188 @@ declare const AlertDialog: {
   } & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * An accessible description to be announced when the dialog is opened.
+   * Renders as a `div` by default; can be changed via the `asChild` prop.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription
    *
    * @example
    * ```tsx
-   * <AlertDialog.Header>
-   *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   * </AlertDialog.Header>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Description: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dialog0.DialogDescriptionProps & _$react.RefAttributes<HTMLParagraphElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
-   * Contains the footer content of the dialog, including the action and cancel buttons.
+   * Contains the footer content of the dialog, including the action and
+   * cancel buttons.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter
    *
    * @example
    * ```tsx
-   * <AlertDialog.Footer>
-   *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-   *   <AlertDialog.Action>Continue</AlertDialog.Action>
-   * </AlertDialog.Footer>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Footer: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
-   * Contains the header content of the dialog, including the title and description.
+   * Contains the header content of the dialog, including the title and
+   * description.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader
    *
    * @example
    * ```tsx
-   * <AlertDialog.Header>
-   *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   * </AlertDialog.Header>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Header: _$react.ForwardRefExoticComponent<Omit<_$react.ClassAttributes<HTMLDivElement> & _$react.HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * An icon that visually represents the priority of the AlertDialog.
+   * Defaults to a warning icon for `danger` and an info icon for `info`. Can
+   * be overridden via the `svg` prop.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon
    *
    * @example
    * ```tsx
-   * <AlertDialog.Content>
-   *   <AlertDialog.Icon />
-   *   <AlertDialog.Body>
-   *     <AlertDialog.Header>
-   *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   *     </AlertDialog.Header>
-   *   </AlertDialog.Body>
-   * </AlertDialog.Content>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Icon: _$react.ForwardRefExoticComponent<Omit<AlertDialogIconProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
   /**
    * An accessible name to be announced when the dialog is opened.
+   * Alternatively, provide `aria-label` or `aria-labelledby` to
+   * `AlertDialog.Content` and exclude this component.
    *
    * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle
    *
    * @example
    * ```tsx
-   * <AlertDialog.Header>
-   *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
-   *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
-   * </AlertDialog.Header>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Title: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTitleProps & _$react.RefAttributes<HTMLHeadingElement>, "ref"> & _$react.RefAttributes<HTMLHeadingElement>>;
@@ -373,11 +599,32 @@ declare const AlertDialog: {
    *
    * @example
    * ```tsx
-   * <AlertDialog.Trigger asChild>
-   *   <Button type="button" appearance="outlined">
-   *     Show Alert Dialog
-   *   </Button>
-   * </AlertDialog.Trigger>
+   * <AlertDialog.Root priority="danger">
+   *   <AlertDialog.Trigger asChild>
+   *     <Button type="button" appearance="outlined">
+   *       Show Danger Alert Dialog
+   *     </Button>
+   *   </AlertDialog.Trigger>
+   *   <AlertDialog.Content>
+   *     <AlertDialog.Icon />
+   *     <AlertDialog.Body>
+   *       <AlertDialog.Header>
+   *         <AlertDialog.Title>
+   *           Are you absolutely sure?
+   *         </AlertDialog.Title>
+   *         <AlertDialog.Description>
+   *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.
+   *         </AlertDialog.Description>
+   *       </AlertDialog.Header>
+   *       <AlertDialog.Footer>
+   *         <AlertDialog.Cancel type="button">Cancel</AlertDialog.Cancel>
+   *         <AlertDialog.Action type="button">
+   *           Continue
+   *         </AlertDialog.Action>
+   *       </AlertDialog.Footer>
+   *     </AlertDialog.Body>
+   *   </AlertDialog.Content>
+   * </AlertDialog.Root>
    * ```
    */
   readonly Trigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_dialog0.DialogTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;