@ngrok/mantle 0.77.0 → 0.79.0

package/dist/accordion.d.ts

@@ -1,7 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconProps } from "./icon-n49kOh4_.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { n as IconProps } from "./icon-Cevjo93X.js";
 import { ComponentPropsWithoutRef } from "react";
-
 //#region src/components/accordion/accordion.d.ts
 /**
  * `"single"` mode props: at most one item open at a time — opening a section
@@ -16,9 +15,12 @@ type AccordionSingleProps = {
    * previously open one. Must be set explicitly — the default is `"multiple"`,
    * where sections open independently.
    */
-  type: "single"; /** The controlled open item value (`""` for none). */
-  value?: string; /** The initial open item value when uncontrolled. */
-  defaultValue?: string; /** Called with the newly open item value (`""` when collapsed). */
+  type: "single";
+  /** The controlled open item value (`""` for none). */
+  value?: string;
+  /** The initial open item value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the newly open item value (`""` when collapsed). */
   onValueChange?: (value: string) => void;
 };
 /**
@@ -36,9 +38,12 @@ type AccordionMultipleProps = {
    *
    * @default "multiple"
    */
-  type?: "multiple"; /** The controlled list of open item values. */
-  value?: string[]; /** The initial list of open item values when uncontrolled. */
-  defaultValue?: string[]; /** Called with the new list of open item values. */
+  type?: "multiple";
+  /** The controlled list of open item values. */
+  value?: string[];
+  /** The initial list of open item values when uncontrolled. */
+  defaultValue?: string[];
+  /** Called with the new list of open item values. */
   onValueChange?: (value: string[]) => void;
 };
 /**
@@ -52,6 +57,51 @@ type AccordionMultipleProps = {
  * standard `<div>` props (forwarded to the container) plus `asChild`.
  */
 type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> & WithAsChild;
+/**
+ * The icon that indicates the open/closed state of its {@link Trigger}. Defaults
+ * to a downward caret that rotates 180° when the section is open. Pass `svg` to
+ * override it with any icon (the rotation-on-open still applies; override
+ * `className` to change that).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/accordion#api-accordion-trigger-icon
+ *
+ * @example
+ * // Default caret
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ *
+ * @example
+ * // Custom icon
+ * import { PlusIcon } from "@phosphor-icons/react/Plus";
+ *
+ * <Accordion.Root type="single" defaultValue="item-1">
+ *   <Accordion.Item value="item-1">
+ *     <Accordion.Trigger>
+ *       Is it accessible?
+ *       <Accordion.TriggerIcon svg={<PlusIcon />} />
+ *     </Accordion.Trigger>
+ *     <Accordion.Content>
+ *       <Accordion.Body>Yes. It adheres to the WAI-ARIA disclosure pattern.</Accordion.Body>
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion.Root>
+ */
+declare const TriggerIcon: {
+  ({ className, svg, ...props }: Omit<IconProps, "svg"> & {
+    /** The icon to render. Defaults to a downward caret that rotates open. */
+    svg?: IconProps["svg"];
+  }): import("react").JSX.Element;
+  displayName: string;
+};
 /**
  * A vertically stacked set of disclosure sections styled after the shadcn /
  * ngrok.com accordion.
@@ -66,7 +116,7 @@ type AccordionRootProps = (AccordionSingleProps | AccordionMultipleProps) & Omit
  * `Accordion.Root` defaults to `type="multiple"` (sections open independently);
  * pass `type="single"` when opening one section should auto-close the others.
  *
- * @see https://mantle.ngrok.com/components/accordion
+ * @see https://mantle.ngrok.com/components/data-display/accordion
  *
  * @example
  * Composition:
@@ -127,7 +177,8 @@ declare const Accordion: {
    * </Accordion.Root>
    */
   readonly Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /** The unique value identifying this item within its accordion. */value: string;
+    /** The unique value identifying this item within its accordion. */
+    value: string;
   } & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The `<button>` header that toggles a section. See {@link Trigger}.
@@ -162,16 +213,7 @@ declare const Accordion: {
    *   </Accordion.Item>
    * </Accordion.Root>
    */
-  readonly TriggerIcon: {
-    ({
-      className,
-      svg,
-      ...props
-    }: Omit<IconProps, "svg"> & {
-      /** The icon to render. Defaults to a downward caret that rotates open. */svg?: IconProps["svg"];
-    }): import("react").JSX.Element;
-    displayName: string;
-  };
+  readonly TriggerIcon: typeof TriggerIcon;
   /**
    * The collapsible, find-in-page-discoverable body. See {@link Content}.
    *

package/dist/accordion.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./cx-C1UYP5We.js";import{t as r}from"./icon-SUx16Sl3.js";import{t as i}from"./slot-DT_E5BQx.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=l(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=l(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=s((e,t)=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,...f}=e,m=a!=null,[g,b]=p(()=>v(o)),S=m?v(a):g,C=d(()=>({type:r,openValues:S,setItemOpen:(t,n)=>{let i=_(S,t,n,r);i!==S&&(m||b(i),y(e,i))}}),[r,S,m,e]),w={...f,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:C,children:h(c?i:`div`,{ref:t,...w,children:l})})});T.displayName=`Accordion`;const E=s(({children:e,value:t,...n},r)=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),s=c(e=>{a(t,e)},[a,t]),l=d(()=>({open:o,setOpen:s}),[o,s]);return h(C.Provider,{value:l,children:h(`div`,{ref:r,...n,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})});E.displayName=`AccordionItem`;const D=s(({className:e,children:t,onClick:r,...i},a)=>{let{open:o,setOpen:s}=w(`Accordion.Trigger`);return h(`button`,{ref:a,type:`button`,...i,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})});D.displayName=`AccordionTrigger`;const O=h(a,{weight:`bold`}),k=({className:e,svg:t=O,...i})=>h(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)});k.displayName=`AccordionTriggerIcon`;const A=s(({className:r,children:i,...a},o)=>{let{open:s,setOpen:c}=w(`Accordion.Content`),l=f(null),d=t(l,o);return u(()=>{let e=l.current;if(!e||!b())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=l.current;e&&(s||!b()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:d,...a,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})});A.displayName=`AccordionContent`;const j=s(({className:e,...t},r)=>h(`div`,{ref:r,...t,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)}));j.displayName=`AccordionBody`;const M={Root:T,Item:E,Trigger:D,TriggerIcon:k,Content:A,Body:j};export{M as Accordion};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-Cjf2gfB8.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-CDtYjF_H.js";import{t as i}from"./slot-DmPrjM7N.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,forwardRef as s,useCallback as c,useContext as l,useEffect as u,useMemo as d,useRef as f,useState as p}from"react";import m from"tiny-invariant";import{jsx as h}from"react/jsx-runtime";function g(e,t){return e.includes(t)}function _(e,t,n,r){let i=e.includes(t);return n?r===`single`?i&&e.length===1?e:[t]:i?e:[...e,t]:i?e.filter(e=>e!==t):e}function v(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function y(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function b(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const x=o(null);function S(e){let t=l(x);return m(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const C=o(null);function w(e){let t=l(C);return m(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const T=s((e,t)=>{let{type:r=`multiple`,value:a,defaultValue:o,onValueChange:s,asChild:c,children:l,className:u,...f}=e,m=a!=null,[g,b]=p(()=>v(o)),S=m?v(a):g,C=d(()=>({type:r,openValues:S,setItemOpen:(t,n)=>{let i=_(S,t,n,r);i!==S&&(m||b(i),y(e,i))}}),[r,S,m,e]),w={...f,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,u)};return h(x.Provider,{value:C,children:h(c?i:`div`,{ref:t,...w,children:l})})});T.displayName=`Accordion`;const E=s(({children:e,value:t,...n},r)=>{let{openValues:i,setItemOpen:a}=S(`Accordion.Item`),o=g(i,t),s=c(e=>{a(t,e)},[a,t]),l=d(()=>({open:o,setOpen:s}),[o,s]);return h(C.Provider,{value:l,children:h(`div`,{ref:r,...n,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})});E.displayName=`AccordionItem`;const D=s(({className:e,children:t,onClick:r,...i},a)=>{let{open:o,setOpen:s}=w(`Accordion.Trigger`);return h(`button`,{ref:a,type:`button`,...i,"data-slot":`accordion-trigger`,"data-state":o?`open`:`closed`,"aria-expanded":o,className:n(`group flex w-full cursor-pointer items-center justify-between gap-4 py-4 text-left font-medium outline-none`,`-mx-2 rounded-md px-2`,`transition-[padding] duration-200 ease-out data-state-open:pb-2 motion-reduce:transition-none`,`focus:outline-hidden focus-visible:ring-4 focus-visible:ring-focus-accent`,e),onClick:e=>{r?.(e),s(!o)},children:t})});D.displayName=`AccordionTrigger`;const O=h(a,{weight:`bold`}),k=({className:e,svg:t=O,...i})=>h(r,{...i,"data-slot":`accordion-trigger-icon`,svg:t,className:n(`size-4 shrink-0 text-muted transition-transform duration-200 group-data-state-open:rotate-180`,e)});k.displayName=`AccordionTriggerIcon`;const A=s(({className:r,children:i,...a},o)=>{let{open:s,setOpen:c}=w(`Accordion.Content`),l=f(null),d=t(l,o);return u(()=>{let e=l.current;if(!e||!b())return;let t=()=>{e.removeAttribute(`hidden`),e.style.height=`auto`,c(!0)};return e.addEventListener(`beforematch`,t),()=>{e.removeEventListener(`beforematch`,t)}},[c]),e(()=>{let e=l.current;e&&(s||!b()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),h(`div`,{ref:d,...a,"data-slot":`accordion-content`,"data-state":s?`open`:`closed`,className:n(`h-0 overflow-hidden transition-[height,content-visibility] duration-200 ease-out [interpolate-size:allow-keywords] transition-discrete data-state-open:h-auto motion-reduce:transition-none`,r),children:i})});A.displayName=`AccordionContent`;const j=s(({className:e,...t},r)=>h(`div`,{ref:r,...t,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)}));j.displayName=`AccordionBody`;const M={Root:T,Item:E,Trigger:D,TriggerIcon:k,Content:A,Body:j};export{M as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.77.0",
+	"version": "0.79.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -21,10 +21,12 @@
 		"@ngrok/mantle/alert-dialog",
 		"@ngrok/mantle/anchor",
 		"@ngrok/mantle/badge",
+		"@ngrok/mantle/breadcrumb",
 		"@ngrok/mantle/browser-only",
 		"@ngrok/mantle/button",
 		"@ngrok/mantle/calendar",
 		"@ngrok/mantle/card",
+		"@ngrok/mantle/centered-layout",
 		"@ngrok/mantle/checkbox",
 		"@ngrok/mantle/choice",
 		"@ngrok/mantle/code",
@@ -73,6 +75,7 @@
 		"@ngrok/mantle/tabs",
 		"@ngrok/mantle/text-area",
 		"@ngrok/mantle/theme",
+		"@ngrok/mantle/theme-switcher",
 		"@ngrok/mantle/toast",
 		"@ngrok/mantle/tooltip",
 		"@ngrok/mantle/types",

package/dist/alert-dialog.d.ts

@@ -1,18 +1,19 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { t as SvgAttributes } from "./types-BvUzforF.js";
-import { n as ButtonProps } from "./button-mfYak6Rx.js";
-import { t as Root$1 } from "./primitive-FoWela9a.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { t as SvgAttributes } from "./types-D1RY5Tcj.js";
+import { t as ButtonIntent } from "./intents-DdSKSj1c.js";
+import { n as ButtonAppearance, r as ButtonProps } from "./button-DcXOWUYo.js";
+import { t as Root$1 } from "./primitive-C64-m48O.js";
 import { ComponentProps, ReactNode } from "react";
-
 //#region src/components/alert-dialog/alert-dialog.d.ts
-declare const priorities: readonly ["info", "danger"];
-type Priority = (typeof priorities)[number];
+declare const intents: readonly ["info", "danger"];
+type AlertDialogIntent = (typeof intents)[number];
 type AlertDialogProps = ComponentProps<typeof Root$1> & {
   /**
-   * Indicates the importance or impact level of the AlertDialog, affecting its
-   * color and styling to communicate its purpose to the user.
+   * The intent of the AlertDialog — the tone its color communicates to the
+   * user, affecting the color and styling of descendants like
+   * `AlertDialog.Icon` and `AlertDialog.Action`.
    */
-  priority: Priority;
+  intent: AlertDialogIntent;
 };
 /**
  * A modal dialog that interrupts the user with important content and expects a
@@ -23,13 +24,13 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
  * shared floating z-index. When multiple shared layers are open, the most
  * recently mounted layer renders on top.
  *
- * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogroot
  *
  * @example
  * ```tsx
- * <AlertDialog.Root priority="danger">
+ * <AlertDialog.Root intent="danger">
  *   <AlertDialog.Trigger asChild>
- *     <Button type="button" appearance="outlined">
+ *     <Button type="button" appearance="outlined" intent="neutral">
  *       Show Danger Alert Dialog
  *     </Button>
  *   </AlertDialog.Trigger>
@@ -55,13 +56,42 @@ type AlertDialogProps = ComponentProps<typeof Root$1> & {
  * </AlertDialog.Root>
  * ```
  */
-declare function Root({
-  priority,
-  ...props
-}: AlertDialogProps): import("react").JSX.Element;
-declare namespace Root {
-  var displayName: string;
-}
+declare function Root({ intent, ...props }: AlertDialogProps): import("react").JSX.Element;
+type AlertDialogActionProps = Omit<ButtonProps, "appearance" | "intent"> & {
+  /**
+   * The visual style of the action button. Optional here — `AlertDialog.Action`
+   * defaults to `"filled"` so the confirming action carries the heaviest
+   * visual weight in the dialog.
+   *
+   * @default "filled"
+   */
+  appearance?: ButtonAppearance;
+  /**
+   * The tone of the action button. Optional here — when omitted,
+   * `AlertDialog.Action` derives the tone from the parent `AlertDialog.Root`'s
+   * `intent` (`"danger"` → `"danger"`, `"info"` → `"accent"`), so the Action
+   * carries the dialog's tone the same way its icon does. A passed value
+   * always wins over the context-derived tone.
+   */
+  intent?: ButtonIntent;
+};
+type AlertDialogCancelProps = Omit<ButtonProps, "appearance" | "intent"> & {
+  /**
+   * The visual style of the cancel button. Optional here — `AlertDialog.Cancel`
+   * defaults to `"outlined"` so it visually de-emphasizes against
+   * `AlertDialog.Action`.
+   *
+   * @default "outlined"
+   */
+  appearance?: ButtonAppearance;
+  /**
+   * The tone of the cancel button. Optional here — `AlertDialog.Cancel`
+   * defaults to `"neutral"`, the workhorse tone for routine actions.
+   *
+   * @default "neutral"
+   */
+  intent?: ButtonIntent;
+};
 type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
   svg?: ReactNode;
 };
@@ -78,7 +108,7 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
  * shared floating z-index. When multiple shared layers are open, the most
  * recently mounted layer renders on top.
  *
- * @see https://mantle.ngrok.com/components/alert-dialog
+ * @see https://mantle.ngrok.com/components/overlays/alert-dialog
  *
  * @example
  * Composition:
@@ -98,9 +128,9 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
  *
  * @example
  * ```tsx
- * <AlertDialog.Root priority="danger">
+ * <AlertDialog.Root intent="danger">
  *   <AlertDialog.Trigger asChild>
- *     <Button type="button" appearance="outlined">
+ *     <Button type="button" appearance="outlined" intent="neutral">
  *       Show Danger Alert Dialog
  *     </Button>
  *   </AlertDialog.Trigger>
@@ -129,22 +159,22 @@ type AlertDialogIconProps = Omit<SvgAttributes, "children"> & {
 declare const AlertDialog: {
   /**
    * 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`.
+   * content and exposes the required `intent` prop (`"danger"` for
+   * destructive actions, `"info"` for informational confirmations) — the tone
+   * its color communicates — which propagates color to descendants like
+   * `AlertDialog.Icon` and `AlertDialog.Action`.
    *
    * `AlertDialog` renders its floating layer at Tailwind `z-50`, Mantle's
    * shared floating z-index. When multiple shared layers are open, the most
    * recently mounted layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogroot
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogroot
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -173,17 +203,19 @@ declare const AlertDialog: {
   readonly Root: typeof Root;
   /**
    * 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.
+   * `appearance="filled"`, with a tone derived from the parent
+   * `AlertDialog.Root`'s intent: danger dialogs get a danger button, info
+   * dialogs get an accent one — the Action carries the dialog's tone the
+   * same way its icon does. 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
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogaction
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -209,18 +241,18 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Action: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Action: import("react").ForwardRefExoticComponent<Omit<AlertDialogActionProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * 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
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogbody
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -249,16 +281,16 @@ declare const AlertDialog: {
   readonly Body: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * A button that closes the dialog and cancels the action. Defaults to
-   * `appearance="outlined"` and `priority="neutral"` so it visually
+   * `appearance="outlined"` and `intent="neutral"` so it visually
    * de-emphasizes against `AlertDialog.Action`.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcancel
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcancel
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -284,19 +316,19 @@ declare const AlertDialog: {
    * </AlertDialog.Root>
    * ```
    */
-  readonly Cancel: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  readonly Cancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogCancelProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   /**
    * 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
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogclose
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -333,13 +365,13 @@ declare const AlertDialog: {
    * Mantle's shared floating z-index. When multiple shared layers are open,
    * the most recently mounted layer renders on top.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogcontent
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -380,13 +412,13 @@ declare const AlertDialog: {
    * 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
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogdescription
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -417,13 +449,13 @@ declare const AlertDialog: {
    * Contains the footer content of the dialog, including the action and
    * cancel buttons.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogfooter
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogfooter
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -454,13 +486,13 @@ declare const AlertDialog: {
    * Contains the header content of the dialog, including the title and
    * description.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogheader
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogheader
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -488,17 +520,17 @@ declare const AlertDialog: {
    */
   readonly Header: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & WithAsChild, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
-   * An icon that visually represents the priority of the AlertDialog.
+   * An icon that visually represents the intent 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
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogicon
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -530,13 +562,13 @@ declare const AlertDialog: {
    * Alternatively, provide `aria-label` or `aria-labelledby` to
    * `AlertDialog.Content` and exclude this component.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtitle
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>
@@ -566,13 +598,13 @@ declare const AlertDialog: {
   /**
    * A button that opens the Alert Dialog.
    *
-   * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtrigger
+   * @see https://mantle.ngrok.com/components/overlays/alert-dialog#alertdialogtrigger
    *
    * @example
    * ```tsx
-   * <AlertDialog.Root priority="danger">
+   * <AlertDialog.Root intent="danger">
    *   <AlertDialog.Trigger asChild>
-   *     <Button type="button" appearance="outlined">
+   *     <Button type="button" appearance="outlined" intent="neutral">
    *       Show Danger Alert Dialog
    *     </Button>
    *   </AlertDialog.Trigger>

package/dist/alert-dialog.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./svg-only-CSOaF1tL.js";import{t as n}from"./slot-DT_E5BQx.js";import{t as r}from"./button-C9GW9nAr.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-BuVqb6zf.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({priority:e,...t}){let n=h(()=>({priority:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N=p(({appearance:e=`filled`,...t},n)=>{let i=S(),a=`default`;return i.priority===`danger`&&(a=`danger`),_(r,{appearance:e,"data-slot":`alert-dialog-action`,priority:a,ref:n,...t})});N.displayName=`AlertDialogAction`;const P=p(({appearance:t=`outlined`,className:n,priority:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),priority:i,ref:o,...a})}));P.displayName=`AlertDialogCancel`;const F=p(({className:n,svg:r,...i},a)=>{let o=S(),s=o.priority===`danger`?`text-danger-600`:`text-accent-600`,c=o.priority===`danger`?_(b,{}):_(y,{});return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});F.displayName=`AlertDialogIcon`;const I=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));I.displayName=`AlertDialogClose`;const L={Root:C,Action:N,Body:O,Cancel:P,Close:I,Content:D,Description:M,Footer:A,Header:k,Icon:F,Title:j,Trigger:w};export{L as AlertDialog};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./svg-only-DDx6FtJd.js";import{t as n}from"./slot-DmPrjM7N.js";import{t as r}from"./button-ClC60Nzg.js";import{a as i,c as a,i as o,n as s,o as c,r as l,s as u,t as d}from"./primitive-M-kZdNIS.js";import{createContext as f,forwardRef as p,useContext as m,useMemo as h}from"react";import g from"tiny-invariant";import{jsx as _,jsxs as v}from"react/jsx-runtime";import{InfoIcon as y}from"@phosphor-icons/react/Info";import{WarningIcon as b}from"@phosphor-icons/react/Warning";const x=f(null);function S(){let e=m(x);return g(e,`AlertDialog child component used outside of AlertDialog parent!`),e}function C({intent:e,...t}){let n=h(()=>({intent:e}),[e]);return _(x.Provider,{value:n,children:_(c,{...t})})}C.displayName=`AlertDialog`;const w=p(({...e},t)=>_(a,{ref:t,"data-slot":`alert-dialog-trigger`,...e}));w.displayName=`AlertDialogTrigger`;const T=i;T.displayName=`AlertDialogPortal`;const E=p(({className:t,...n},r)=>_(o,{"data-slot":`alert-dialog-overlay`,className:e(`data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs`,t),...n,ref:r}));E.displayName=`AlertDialogOverlay`;const D=p(({className:t,preferredWidth:n=`max-w-md`,...r},i)=>v(T,{children:[_(E,{}),_(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:_(s,{"data-slot":`alert-dialog-content`,"data-mantle-modal-content":!0,ref:i,className:e(`flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start`,`outline-hidden focus-within:outline-hidden`,`p-6`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,n,t),...r})})]}));D.displayName=`AlertDialogContent`;const O=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-body`,className:e(`flex-1 space-y-4`,r),ref:a,...i}));O.displayName=`AlertDialogBody`;const k=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-header`,className:e(`flex flex-col space-y-2 text-center sm:text-start`,r),ref:a,...i}));k.displayName=`AlertDialogHeader`;const A=p(({asChild:t=!1,className:r,...i},a)=>_(t?n:`div`,{"data-slot":`alert-dialog-footer`,className:e(`flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2`,r),ref:a,...i}));A.displayName=`AlertDialogFooter`;const j=p(({className:t,...n},r)=>_(u,{ref:r,"data-slot":`alert-dialog-title`,className:e(`text-strong text-center text-lg font-medium sm:text-start`,t),...n}));j.displayName=`AlertDialogTitle`;const M=p(({className:t,...n},r)=>_(l,{ref:r,"data-slot":`alert-dialog-description`,className:e(`text-body text-center text-sm font-normal sm:text-start`,t),...n}));M.displayName=`AlertDialogDescription`;const N={danger:`danger`,info:`accent`},P=p(({appearance:e=`filled`,intent:t,...n},i)=>{let a=S(),o=N[a.intent];return _(r,{appearance:e,"data-slot":`alert-dialog-action`,intent:t??o,ref:i,...n})});P.displayName=`AlertDialogAction`;const F=p(({appearance:t=`outlined`,className:n,intent:i=`neutral`,...a},o)=>_(d,{asChild:!0,children:_(r,{appearance:t,"data-slot":`alert-dialog-cancel`,className:e(`mt-2 sm:mt-0`,n),intent:i,ref:o,...a})}));F.displayName=`AlertDialogCancel`;const I={danger:_(b,{}),info:_(y,{})},L={danger:`text-danger-600`,info:`text-accent-600`},R=p(({className:n,svg:r,...i},a)=>{let o=S(),s=L[o.intent],c=I[o.intent];return _(t,{ref:a,"data-slot":`alert-dialog-icon`,className:e(`size-12 sm:size-7`,s,n),svg:r??c,...i})});R.displayName=`AlertDialogIcon`;const z=p(({...e},t)=>_(d,{ref:t,"data-slot":`alert-dialog-close`,...e}));z.displayName=`AlertDialogClose`;const B={Root:C,Action:P,Body:O,Cancel:F,Close:z,Content:D,Description:M,Footer:A,Header:k,Icon:R,Title:j,Trigger:w};export{B as AlertDialog};