@ngrok/mantle 0.81.1 → 0.82.1

package/dist/accordion.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./slot-CDk0Bb9z.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(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 _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"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=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(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)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())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=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"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})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./slot-DpNWVci8.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{createContext as o,useCallback as s,useContext as c,useEffect as l,useMemo as u,useRef as d,useState as f}from"react";import p from"tiny-invariant";import{jsx as m}from"react/jsx-runtime";function h(e,t){return e.includes(t)}function g(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 _(e){return e==null?[]:typeof e==`string`?e===``?[]:[e]:e}function v(e,t){e.type===`single`?e.onValueChange?.(t[0]??``):e.onValueChange?.([...t])}function y(){return typeof document<`u`&&document.body!=null&&`onbeforematch`in document.body}const b=o(null);function x(e){let t=c(b);return p(t,`\`${e}\` must be rendered within \`Accordion.Root\`.`),t}const S=o(null);function C(e){let t=c(S);return p(t,`\`${e}\` must be rendered within \`Accordion.Item\`.`),t}const w=e=>{let{type:t=`multiple`,value:r,defaultValue:a,onValueChange:o,asChild:s,children:c,className:l,ref:d,...p}=e,h=r!=null,[y,x]=f(()=>_(a)),S=h?_(r):y,C=u(()=>({type:t,openValues:S,setItemOpen:(n,r)=>{let i=g(S,n,r,t);i!==S&&(h||x(i),v(e,i))}}),[t,S,h,e]),w={...p,"data-slot":`accordion`,className:n(`w-full divide-y divide-separator`,l)};return m(b.Provider,{value:C,children:m(s?i:`div`,{ref:d,...w,children:c})})},T=({children:e,value:t,ref:n,...r})=>{let{openValues:i,setItemOpen:a}=x(`Accordion.Item`),o=h(i,t),c=s(e=>{a(t,e)},[a,t]),l=u(()=>({open:o,setOpen:c}),[o,c]);return m(S.Provider,{value:l,children:m(`div`,{ref:n,...r,role:`group`,"data-slot":`accordion-item`,"data-state":o?`open`:`closed`,children:e})})},E=({className:e,children:t,onClick:r,ref:i,...a})=>{let{open:o,setOpen:s}=C(`Accordion.Trigger`);return m(`button`,{ref:i,type:`button`,...a,"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=m(a,{weight:`bold`}),O={Root:w,Item:T,Trigger:E,TriggerIcon:({className:e,svg:t=D,...i})=>m(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)}),Content:({className:r,children:i,ref:a,...o})=>{let{open:s,setOpen:c}=C(`Accordion.Content`),u=d(null),f=t(u,a);return l(()=>{let e=u.current;if(!e||!y())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=u.current;e&&(s||!y()?e.removeAttribute(`hidden`):(e.setAttribute(`hidden`,`until-found`),e.style.height=``))},[s]),m(`div`,{ref:f,...o,"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})},Body:({className:e,ref:t,...r})=>m(`div`,{ref:t,...r,"data-slot":`accordion-body`,className:n(`pt-2 pb-4`,e)})};export{O as Accordion};

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.81.1",
+	"version": "0.82.1",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",
@@ -18,8 +18,10 @@
 	"subpaths": [
 		"@ngrok/mantle/accordion",
 		"@ngrok/mantle/alert",
+		"@ngrok/mantle/alert-center",
 		"@ngrok/mantle/alert-dialog",
 		"@ngrok/mantle/anchor",
+		"@ngrok/mantle/app-layout",
 		"@ngrok/mantle/area-chart",
 		"@ngrok/mantle/badge",
 		"@ngrok/mantle/bar-chart",
@@ -69,6 +71,7 @@
 		"@ngrok/mantle/selectable-list",
 		"@ngrok/mantle/separator",
 		"@ngrok/mantle/sheet",
+		"@ngrok/mantle/sidebar",
 		"@ngrok/mantle/skeleton",
 		"@ngrok/mantle/skip-to-main-link",
 		"@ngrok/mantle/slider",

package/dist/alert-BWwNPOMI.d.ts

@@ -0,0 +1,391 @@
+import { n as WithAsChild } from "./as-child-D23mGo4f.js";
+import { t as SvgAttributes } from "./icon-D1RY5Tcj.js";
+import { r as ButtonProps } from "./button-DARFK2KJ.js";
+import { n as IconButtonProps, r as IconButtonAppearance } from "./button-C7vAl6lS.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/alert/alert.d.ts
+declare const intents: readonly ["danger", "important", "info", "success", "warning"];
+type AlertIntent = (typeof intents)[number];
+declare const appearances: readonly ["banner", "default"];
+type Appearance = (typeof appearances)[number];
+type AlertProps = ComponentProps<"div"> & {
+  /**
+   * The intent of the Alert — the status its color communicates to the user,
+   * determining the color and styling of the Alert.
+   */
+  intent: AlertIntent;
+  /**
+   * Controls the visual style of the Alert.
+   * - "default" provides standard rounded corners and borders.
+   * - "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.
+   *
+   * @default "default"
+   */
+  appearance?: Appearance;
+};
+/**
+ * Displays a callout for user attention. Root container for all Alert sub-components.
+ *
+ * Trailing controls inherit these public CSS variables:
+ *
+ * | Variable | Default | Purpose |
+ * | --- | --- | --- |
+ * | `--alert-control-color` | `var(--color-<intent>-700)` | Control text and icon color. |
+ * | `--alert-control-hover-color` | `var(--color-<intent>-800)` | Control text and icon color on hover. |
+ * | `--alert-control-hover-bg` | `color-mix(in oklab, var(--color-<intent>-500) 10%, transparent)` | Control background on hover. |
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Root: ({ appearance, className, intent, ref, style, ...props }: AlertProps) => import("react").JSX.Element;
+type AlertIconProps = Omit<SvgAttributes, "children"> & {
+  /**
+   * An optional icon that renders in place of the default icon for the Alert intent.
+   */
+  svg?: ReactNode;
+};
+/**
+ * An optional icon that visually represents the intent of the Alert.
+ *
+ * The default rendered icon be overridden with a custom icon using the `svg` prop.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const Icon: ({ className, ref, svg, ...props }: AlertIconProps) => import("react").JSX.Element;
+/**
+ * The container for the content slot of an alert. Place the title, description,
+ * and trailing controls as direct children.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Content: ({ className, ref, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
+type AlertTitleProps = ComponentProps<"h5"> & WithAsChild;
+/**
+ * The title of an alert. Default renders as an h5 element, use asChild to render something else.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Title: ({ asChild, className, ref, ...props }: AlertTitleProps) => import("react").JSX.Element;
+type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
+/**
+ * The optional description of an alert.
+ * Renders as a `div` by default, but can be changed to any other element using
+ * the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const Description: ({ asChild, className, ref, ...props }: AlertDescriptionProps) => import("react").JSX.Element;
+type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "appearance" | "icon" | "intent">> & {
+  /**
+   * The visual style of the dismiss button. Optional here —
+   * `Alert.DismissIconButton` defaults to `"ghost"` so the dismiss affordance
+   * stays visually quiet inside the Alert.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonAppearance;
+  /**
+   * An optional icon to render inside the dismiss button. Defaults to an X icon.
+   */
+  icon?: ReactNode;
+};
+/**
+ * A compact, trailing control for dismissing an alert.
+ *
+ * It inherits `--alert-control-color`, `--alert-control-hover-color`, and
+ * `--alert-control-hover-bg` from `Alert.Root`, shared with
+ * `Alert.ExpandButton` when both controls are composed together.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Usage limit approaching</Alert.Title>
+ *     <Alert.DismissIconButton onClick={dismiss} />
+ *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const DismissIconButton: ({ size, type, label, appearance, className, icon, ...props }: AlertDismissIconButtonProps) => import("react").JSX.Element;
+type AlertExpandButtonProps = Omit<ButtonProps, "appearance" | "asChild" | "children" | "icon" | "iconPlacement" | "intent" | "size"> & {
+  /** The number of alerts hidden by a collapsed alert center. */
+  count: number;
+  /** Whether the alerts controlled by this button are currently visible. */
+  expanded: boolean;
+};
+/**
+ * A compact, trailing control for expanding or collapsing related alerts.
+ *
+ * It occupies the trailing control area alongside `Alert.DismissIconButton`
+ * when both are present, and marks the alert so `Alert.Content` reserves room
+ * for its plus-prefixed count and caret on narrow viewports. It shares the
+ * `--alert-control-*` color variables from `Alert.Root` with the dismiss
+ * control.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert#alertexpandbutton
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="warning">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Usage limit approaching</Alert.Title>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ * ```
+ */
+declare const ExpandButton: ({ count, expanded, className, ...props }: AlertExpandButtonProps) => import("react").JSX.Element;
+/**
+ * Displays a callout for user attention.
+ *
+ * @see https://mantle.ngrok.com/components/feedback/alert
+ *
+ * @example
+ * Composition:
+ * ```
+ * Alert.Root
+ * ├── Alert.Icon
+ * ├── Alert.Content
+ *     ├── Alert.Title
+ *     ├── Alert.Description
+ *     ├── Alert.DismissIconButton
+ *     └── Alert.ExpandButton
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Alert.Root intent="info">
+ *   <Alert.Icon />
+ *   <Alert.Content>
+ *     <Alert.Title>Alert Title</Alert.Title>
+ *     <Alert.Description>
+ *       Alert description text.
+ *     </Alert.Description>
+ *     <Alert.DismissIconButton />
+ *     <Alert.ExpandButton count={2} expanded={false} />
+ *   </Alert.Content>
+ * </Alert.Root>
+ *```
+ */
+declare const Alert: {
+  /**
+   * The root container of the alert component.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertroot
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The container for the content slot of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertcontent
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Content: typeof Content;
+  /**
+   * A compact trailing control for expanding or collapsing related alerts.
+   * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
+   * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
+   * dismiss control.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertexpandbutton
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="warning">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Usage limit approaching</Alert.Title>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={isExpanded} onClick={toggle} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly ExpandButton: typeof ExpandButton;
+  /**
+   * The optional description of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdescription
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Description: typeof Description;
+  /**
+   * An optional dismiss button that can be used to close the alert.
+   * It inherits the `--alert-control-color`, `--alert-control-hover-color`, and
+   * `--alert-control-hover-bg` variables from `Alert.Root`, shared with the
+   * expand control.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alertdismissiconbutton
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.DismissIconButton />
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly DismissIconButton: typeof DismissIconButton;
+  /**
+   * An optional icon that visually represents the intent of the Alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerticon
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Icon: typeof Icon;
+  /**
+   * The title of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/feedback/alert#alerttitle
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root intent="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *     <Alert.DismissIconButton />
+   *     <Alert.ExpandButton count={2} expanded={false} />
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Title: typeof Title;
+};
+//#endregion
+export { Alert as t };