@ngrok/mantle 0.76.11 → 0.78.0

package/dist/list.d.ts

@@ -0,0 +1,295 @@
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/components/list/primitive.d.ts
+/**
+ * ARIA semantics for a {@link Root} / `VirtualRoot` collection and its
+ * {@link Item}s. The element is always a `<div>` — per WAI-ARIA the *role*
+ * carries the semantics, not the tag — so both flavors share one implementation.
+ *
+ * - `"list"` → `<div role="list">` of `<div role="listitem">` rows: a
+ *   non-selecting list of actions/links (e.g. `List`). Native tab
+ *   order, with `ArrowUp` / `ArrowDown` / `Home` / `End` moving real focus
+ *   between the rows' controls (skipping disabled rows).
+ * - `"grid"` → `<div role="grid">` of `<div role="row">` rows carrying
+ *   `aria-selected`, whose children are the `role="gridcell"`s (e.g.
+ *   `SelectableList`): a single tab stop with `aria-activedescendant`
+ *   navigation that works across a virtualized window.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <Root semantics="grid" aria-label="Access keys" onActivate={toggleByIndex}>
+ *   <Item selected>
+ *     <div role="gridcell">Onboarding key</div>
+ *   </Item>
+ * </Root>
+ * ```
+ */
+type ListSemantics = "list" | "grid";
+/**
+ * Props for {@link Root} / `VirtualRoot`. Standard `<div>` props (on the scroll
+ * viewport) plus the collection `semantics` and the grid activation callback;
+ * `aria-label` / `aria-labelledby` name the inner collection element, and
+ * `children` are the composed {@link Item}s.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <Root semantics="list" aria-label="Accounts" className="max-h-80">
+ *   <Item>
+ *     <button type="button">Acme Inc</button>
+ *   </Item>
+ * </Root>
+ * ```
+ */
+type ListRootProps$1 = ComponentProps<"div"> & {
+  /** ARIA semantics for the collection and its rows. Defaults to `"list"`. */
+  semantics?: ListSemantics;
+  /**
+   * Called with the active row's index when it is activated under `"grid"`
+   * semantics — by keyboard (`Space` / `Enter`) or by a bare click anywhere on
+   * the row that isn't handled by an interactive descendant (a checkbox, a
+   * label, a nested link/button). Wire it to selection.
+   */
+  onActivate?: (index: number) => void;
+  /**
+   * The DOM id that `aria-activedescendant` resolves to for a given row index.
+   * Defaults to a per-collection row id set on the {@link Item} element. Override
+   * it to reference an element you own (e.g. the row's checkbox) when your row
+   * element can't take that id.
+   */
+  itemId?: (index: number) => string;
+  /**
+   * Whether the row at an index is disabled — skipped by keyboard navigation
+   * and excluded from grid activation. Defaults to reading the composed row
+   * element's `disabled` prop (covering `<Item disabled>`); pass it when
+   * disabled state lives in your data rather than on the row elements (e.g.
+   * `SelectableList` reads it off `options[].disabled`).
+   */
+  isItemDisabled?: (index: number) => boolean;
+};
+//#endregion
+//#region src/components/list/virtual.d.ts
+/**
+ * Props for {@link VirtualRoot}. The same surface as the plain `Root` plus the
+ * virtualizer knobs.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <VirtualRoot aria-label="Accounts" className="max-h-80" estimateItemHeight={36} overscan={12}>
+ *   <Item>
+ *     <button type="button">Acme Inc</button>
+ *   </Item>
+ * </VirtualRoot>
+ * ```
+ */
+type VirtualRootProps = ListRootProps$1 & {
+  /** Estimated item height in px, used to seed the virtualizer before items are measured. */
+  estimateItemHeight?: number;
+  /** Rows rendered beyond the visible window on each side. The buffer keeps the active row mounted for `aria-activedescendant`. */
+  overscan?: number;
+};
+//#endregion
+//#region src/components/list/list.d.ts
+/**
+ * Props for `List.Root` — the internal list primitive's `Root` props, minus
+ * `semantics` (a `List` is always a `role="list"`) and the grid-only
+ * `onActivate` / `itemId` knobs (inert under list semantics).
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   <List.Item onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.Root>
+ * ```
+ */
+type ListRootProps = Omit<ListRootProps$1, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * Props for `List.VirtualRoot` — the internal list primitive's
+ * `VirtualRoot` props (viewport props plus `estimateItemHeight` / `overscan`),
+ * minus `semantics` and the grid-only `onActivate` / `itemId` knobs.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.VirtualRoot aria-label="Your accounts" className="max-h-80" estimateItemHeight={44}>
+ *   <List.Item onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.VirtualRoot>
+ * ```
+ */
+type ListVirtualRootProps = Omit<VirtualRootProps, "semantics" | "onActivate" | "itemId" | "isItemDisabled">;
+/**
+ * Props for `List.Item`. Extends `<button>` props (minus `type`, which is fixed
+ * to `"button"`) with `asChild` and the optional `current` accent.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   <List.Item current onClick={() => {}}>
+ *     <List.ItemTitle>Acme Inc</List.ItemTitle>
+ *     <List.ItemDescription>Pay-as-you-go</List.ItemDescription>
+ *   </List.Item>
+ * </List.Root>
+ * ```
+ */
+type ListItemProps = Omit<ComponentProps<"button">, "type"> & WithAsChild & {
+  /**
+   * Marks the item as the current one (e.g. the active account) — gives its
+   * pill the accent tint and sets `aria-current` so the state is announced,
+   * not just shown. Optional; omit it for a plain action/navigation list.
+   */
+  current?: boolean;
+};
+/**
+ * A scrollable, optionally-virtualized list of clickable items — the action /
+ * navigation counterpart to `SelectableList` (e.g. an account switcher or SSO
+ * provider picker). Compose `List.Item` children directly inside a
+ * `List.Root`; each item is a `<button>` (or your own element via
+ * `asChild`, e.g. an `<a>`), with an optional `current` accent.
+ *
+ * It is a **non-selecting** semantic list (`role="list"` of `role="listitem"`),
+ * not a selection widget — selection is `SelectableList`'s job. Non-virtualized
+ * by default; swap `Root` → `VirtualRoot` (same children) for windowing.
+ * Both public list components are built on the same internal list primitive
+ * (`./primitive.js`, deliberately unexported — like `dialog/primitive`). Items
+ * keep their native tab order, and `ArrowUp` / `ArrowDown` / `Home` / `End`
+ * also move focus between them — the focused item tints like hover instead of
+ * drawing a focus ring.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/list
+ *
+ * @example
+ * Composition:
+ * ```
+ * List.Root   (or .VirtualRoot)
+ * └── List.Item
+ *     ├── List.ItemTitle
+ *     └── List.ItemDescription
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <List.Root aria-label="Your accounts" className="max-h-80">
+ *   {accounts.map((account) => (
+ *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+ *       <List.ItemTitle>{account.name}</List.ItemTitle>
+ *       <List.ItemDescription>
+ *         {account.plan} · {account.memberCount} members
+ *       </List.ItemDescription>
+ *     </List.Item>
+ *   ))}
+ * </List.Root>
+ * ```
+ */
+declare const List: {
+  /**
+   * The scrollable container (non-virtualized). Give it an `aria-label` and
+   * bound its height. Compose `Item` children.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly Root: import("react").ForwardRefExoticComponent<Omit<ListRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * The virtualized container — windows the same `Item` children. Opt in for
+   * long lists; authored identically to `Root`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/list
+   *
+   * @example
+   * ```tsx
+   * <List.VirtualRoot aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.VirtualRoot>
+   * ```
+   */
+  readonly VirtualRoot: import("react").ForwardRefExoticComponent<Omit<ListVirtualRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  /**
+   * A clickable item — a `<button>` by default, or your own element via
+   * `asChild` (e.g. an `<a>`). Optional `current` gives the accent treatment.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly Item: import("react").ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+  /**
+   * Emphasized title line inside a `List.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly ItemTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+  /**
+   * De-emphasized sub-line inside a `List.Item`.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/list
+   *
+   * @example
+   * ```tsx
+   * <List.Root aria-label="Your accounts" className="max-h-80">
+   *   {accounts.map((account) => (
+   *     <List.Item key={account.id} onClick={() => switchTo(account.id)}>
+   *       <List.ItemTitle>{account.name}</List.ItemTitle>
+   *       <List.ItemDescription>{account.plan}</List.ItemDescription>
+   *     </List.Item>
+   *   ))}
+   * </List.Root>
+   * ```
+   */
+  readonly ItemDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { List, type ListItemProps, type ListRootProps, type ListVirtualRootProps };

package/dist/list.js

@@ -0,0 +1 @@
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{n,r,t as i}from"./virtual-DZMBu7Ch.js";import{forwardRef as a}from"react";import{jsx as o}from"react/jsx-runtime";const s=a((e,t)=>o(r,{ref:t,semantics:`list`,...e}));s.displayName=`ListRoot`;const c=a((e,t)=>o(i,{ref:t,semantics:`list`,...e}));c.displayName=`ListVirtualRoot`;const l=a(({asChild:r,className:i,current:a,disabled:s,onClick:c,...l},u)=>o(n,{selected:a,disabled:s,children:o(r?t:`button`,{ref:u,"data-slot":`list-item-control`,"aria-current":a||void 0,...r?{"aria-disabled":s||void 0,tabIndex:s?-1:void 0}:{type:`button`,disabled:s},onClick:e=>{if(r&&s){e.preventDefault(),e.stopPropagation();return}c?.(e)},className:e(`flex w-full cursor-pointer flex-col gap-0.5 rounded-md bg-transparent px-2 py-1.5 text-left text-sm`,`disabled:cursor-default disabled:opacity-50 aria-disabled:cursor-default aria-disabled:opacity-50 aria-disabled:pointer-events-none`,`focus-visible:outline-hidden`,i),...l,onClickCapture:r&&s?e=>{e.preventDefault(),e.stopPropagation()}:l.onClickCapture})}));l.displayName=`ListItem`;const u=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-title`,className:e(`text-strong font-medium`,t),...n}));u.displayName=`ListItemTitle`;const d=a(({className:t,...n},r)=>o(`span`,{ref:r,"data-slot":`list-item-description`,className:e(`text-body leading-4`,t),...n}));d.displayName=`ListItemDescription`;const f={Root:s,VirtualRoot:c,Item:l,ItemTitle:u,ItemDescription:d};export{f as List};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.76.11)
+# @ngrok/mantle (0.78.0)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 
@@ -24,11 +24,14 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@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`
 - `@ngrok/mantle/code-block`
 - `@ngrok/mantle/color`
@@ -50,6 +53,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/input`
 - `@ngrok/mantle/kbd`
 - `@ngrok/mantle/label`
+- `@ngrok/mantle/list`
 - `@ngrok/mantle/main`
 - `@ngrok/mantle/media-object`
 - `@ngrok/mantle/multi-select`
@@ -61,6 +65,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@ngrok/mantle/radio-group`
 - `@ngrok/mantle/sandboxed-on-click`
 - `@ngrok/mantle/select`
+- `@ngrok/mantle/selectable-list`
 - `@ngrok/mantle/separator`
 - `@ngrok/mantle/sheet`
 - `@ngrok/mantle/skeleton`
@@ -73,6 +78,7 @@ Full text: https://mantle.ngrok.com/llms-full.txt
 - `@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/main.d.ts

@@ -1,31 +1,8 @@
 import { ComponentProps } from "react";
-
 //#region src/components/main/main.d.ts
-/**
- * A focusable `<main>` landmark for the page's primary content. Renders with
- * `id="main"` and `tabIndex={-1}` so a skip link (or any programmatic focus
- * call) can send keyboard users directly to the main content without exposing
- * a visible focus ring on the region itself (`focus:outline-hidden`).
- *
- * Pair with the `<SkipToMainLink>` component at the top of the document.
- *
- * @see https://mantle.ngrok.com/components/main
- *
- * @example
- * ```tsx
- * <SkipToMainLink />
- * <Header />
- * <Main>
- *   <h1>Page title</h1>
- * </Main>
- * ```
- */
-declare const Main: {
-  ({
-    className,
-    ...props
-  }: ComponentProps<"main">): import("react").JSX.Element;
-  displayName: string;
-};
+declare function Main({ className, ...props }: ComponentProps<"main">): import("react").JSX.Element;
+declare namespace Main {
+  var displayName: string;
+}
 //#endregion
 export { Main };

package/dist/main.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{jsx as t}from"react/jsx-runtime";const n=({className:n,...r})=>t(`main`,{...r,"data-slot":`main`,id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,n)});n.displayName=`Main`;export{n as Main};
+import{t as e}from"./cx-IiQEAKf5.js";import{jsx as t}from"react/jsx-runtime";const n=({className:n,...r})=>t(`main`,{...r,"data-slot":`main`,id:`main`,tabIndex:-1,className:e(`focus:outline-hidden`,n)});n.displayName=`Main`;export{n as Main};

package/dist/mantle.css

@@ -501,12 +501,12 @@ MARK: UTILITIES
 		linear-gradient(var(--background-color-base) 30%, --alpha(var(--background-color-base) / 0%))
 			center top,
 		/* Shadow Cover BOTTOM */
-			linear-gradient(--alpha(var(--background-color-base) / 0%), var(--background-color-base) 70%)
+		linear-gradient(--alpha(var(--background-color-base) / 0%), var(--background-color-base) 70%)
 			center bottom,
 		/* Shadow TOP */
-			radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
+		radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
 		/* Shadow BOTTOM */
-			radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
+		radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
 			bottom;
 	background-repeat: no-repeat;
 	background-size:
@@ -719,15 +719,15 @@ MARK: UTILITIES
 			)
 			center top,
 		/* Shadow Cover BOTTOM */
-			linear-gradient(
+		linear-gradient(
 				--alpha(var(--background-color-popover) / 0%),
 				var(--background-color-popover) 70%
 			)
 			center bottom,
 		/* Shadow TOP */
-			radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
+		radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
 		/* Shadow BOTTOM */
-			radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
+		radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
 			bottom;
 	background-repeat: no-repeat;
 	background-size:

package/dist/media-object.d.ts

@@ -1,6 +1,5 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
 import { ComponentProps } from "react";
-
 //#region src/components/media-object/media-object.d.ts
 type Props = ComponentProps<"div"> & WithAsChild;
 /**
@@ -17,7 +16,7 @@ type Props = ComponentProps<"div"> & WithAsChild;
  * - Feature lists, profile cards, attachment previews.
  *
  * **When not to use**
- * - For complex multi-region layouts — reach for {@link https://mantle.ngrok.com/components/card Card} or build a bespoke flex/grid.
+ * - For complex multi-region layouts — reach for {@link https://mantle.ngrok.com/components/structure/card Card} or build a bespoke flex/grid.
  * - When the media is purely decorative and adds no information — drop it
  *   and use a plain block.
  *
@@ -29,7 +28,7 @@ type Props = ComponentProps<"div"> & WithAsChild;
  * **Polymorphism.** Each part accepts `asChild` for swapping the rendered
  * element (e.g. render `Root` as an `<a>` to make the whole row clickable).
  *
- * @see https://mantle.ngrok.com/components/media-object
+ * @see https://mantle.ngrok.com/components/structure/media-object
  *
  * @example
  * Composition:
@@ -68,7 +67,7 @@ declare const MediaObject: {
    * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`
    * components as direct children.
    *
-   * @see https://mantle.ngrok.com/components/media-object#mediaobjectroot
+   * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectroot
    *
    * @example
    * ```tsx
@@ -86,7 +85,7 @@ declare const MediaObject: {
   /**
    * The container for an image or icon to display in the media slot of the media object.
    *
-   * @see https://mantle.ngrok.com/components/media-object#mediaobjectmedia
+   * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectmedia
    *
    * @example
    * ```tsx
@@ -104,7 +103,7 @@ declare const MediaObject: {
   /**
    * The container for the content slot of a media object.
    *
-   * @see https://mantle.ngrok.com/components/media-object#mediaobjectcontent
+   * @see https://mantle.ngrok.com/components/structure/media-object#mediaobjectcontent
    *
    * @example
    * ```tsx

package/dist/media-object.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a}));i.displayName=`MediaObject`;const a=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a}));a.displayName=`MediaObjectMedia`;const o=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a}));o.displayName=`MediaObject.Content`;const s={Root:i,Media:a,Content:o};export{s as MediaObject};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object`,className:e(`flex gap-4`,i),style:o,children:a}));i.displayName=`MediaObject`;const a=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-media`,className:e(`shrink-0 leading-none`,i),style:o,children:a}));a.displayName=`MediaObjectMedia`;const o=n(({asChild:n=!1,className:i,children:a,style:o},s)=>r(n?t:`div`,{ref:s,"data-slot":`media-object-content`,className:e(`min-w-0 flex-1`,i),style:o,children:a}));o.displayName=`MediaObject.Content`;const s={Root:i,Media:a,Content:o};export{s as MediaObject};