@ngrok/mantle 0.22.0 → 0.22.2

package/dist/sheet.d.ts

@@ -11,76 +11,611 @@ import './variant-props-oDo2u-We.js';
 import './deep-non-nullable-SmpSvoSd.js';
 
 /**
- * The root component for a sheet. Should compose the `SheetTrigger` and `SheetContent`.
- * Acts as a stateful provider for the sheet's open/closed state.
+ * The root component for a `Sheet`. Should compose the `SheetTrigger` and `SheetContent`.
+ * Acts as a stateful provider for the Sheet's open/closed state.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet
+ *
+ * @example
+ * ```tsx
+ * // Triggering a stateful sheet
+ * <Sheet>
+ *   <SheetTrigger asChild>
+ *     <Button type="button" appearance="filled">
+ *       Open Sheet
+ *     </Button>
+ *   </SheetTrigger>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const Sheet: typeof Root;
 /**
- * The trigger for a sheet. Should be rendered as a child of the `Sheet` component.
+ * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.
  * Renders an unstyled button by default, but can be customized with the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-trigger
+ *
+ * @example
+ * ```tsx
+ * <Sheet>
+ *   <SheetTrigger asChild>
+ *     <Button type="button" appearance="filled">
+ *       Open Sheet
+ *     </Button>
+ *   </SheetTrigger>
+ *   <SheetContent>
+ *     <p>
+ *       Consequat do voluptate culpa fugiat consequat nostrud duis
+ *       aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *       aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *       proident amet.
+ *     </p>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetTrigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 /**
- * The close button for a sheet. Should be rendered as a child of the `SheetContent` component.
+ * The close button for a `Sheet`. Should be rendered as a child of the `SheetContent` component.
+ * Usually contained within the `SheetFooter` component.
  * Renders an unstyled button by default, but can be customized with the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-close
+ *
+ * @example
+ * ```tsx
+ * <Sheet>
+ *   <SheetTrigger asChild>
+ *     <Button type="button" appearance="filled">
+ *       Open Sheet
+ *     </Button>
+ *   </SheetTrigger>
+ *   <SheetContent>
+ *     <p>
+ *       Consequat do voluptate culpa fugiat consequat nostrud duis
+ *       aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *       aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *       proident amet.
+ *     </p>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetClose: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 /**
- * The portal for a sheet. Should be rendered as a child of the `Sheet` component.
- * Renders a portal that the `SheetOverlay` and `SheetContent` is rendered into.
+ * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.
+ * Renders on top of the overlay backdrop.
+ * Should contain the `SheetHeader`, `SheetBody`, and `SheetFooter`.
  *
- * You likely don't need to use this component directly, as it is used internally by the `SheetContent` component.
- */
-declare const SheetPortal: react.FC<_radix_ui_react_dialog.DialogPortalProps>;
-/**
- * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-content
  *
- * You likely don't need to use this component directly, as it is used internally by the `SheetContent` component.
- */
-declare const SheetOverlay: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The main container for a sheet. Renders on top of the overlay backdrop.
- * Should compose the `SheetHeader`, `SheetBody`, and `SheetFooter`.
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
 type SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, "icon">>;
 /**
- * An icon button that closes the sheet when clicked. Should be rendered within the `SheetHeader` as a child of `SheetActions`.
+ * An icon button that closes the `Sheet` when clicked.
+ * Should be rendered within the `SheetHeader` as a child of `SheetActions`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-close-icon-button
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetCloseIconButton: ({ size, type, label, appearance, ...props }: SheetCloseIconButtonProps) => react_jsx_runtime.JSX.Element;
 /**
- * The body container for a sheet. This is where you would typically place the main content of the sheet.
+ * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.
  * Should be rendered as a child of `SheetContent`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-body
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetBody: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 /**
- * The header container for a sheet. This is where you would typically place the title, description, and actions.
+ * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.
  * Should be rendered as a child of `SheetContent`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-header
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetHeader: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 /**
- * The footer container for a sheet. This is where you would typically place close and submit buttons.
+ * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.
  * Should be rendered as a child of `SheetContent`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-footer
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 /**
- * The title for a sheet. Typically rendered as a child of `SheetTitleGroup`.
+ * The title for a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.
  * Defaults to an `h2` element, but can be changed via the `asChild` prop.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-title
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetTitle: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
 /**
  * A group container for the title and actions of a sheet. Typically rendered as a child of `SheetHeader`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-title-group
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetTitleGroup: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 /**
  * A description for a sheet. Typically rendered as a child of `SheetHeader`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-description
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetDescription: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
 /**
- * A group container for the actions of a sheet. Typically rendered as a child of `SheetTitleGroup`.
+ * A group container for the actions of a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.
+ *
+ * @see https://mantle.ngrok.com/components/sheet#api-sheet-actions
+ *
+ * @example
+ * ```tsx
+ * // Sheet without a trigger (e.g. router controlled)
+ * <Sheet open opOpenChange={() => onClose()}>
+ *   <SheetContent>
+ *     <SheetHeader>
+ *       <SheetTitleGroup>
+ *         <SheetTitle>Are you absolutely sure?</SheetTitle>
+ *         <SheetActions>
+ *           <IconButton
+ *             appearance="ghost"
+ *             type="button"
+ *             icon={<TrashSimple />}
+ *             label="Delete"
+ *           />
+ *           <Separator orientation="vertical" className="h-[80%]" />
+ *           <SheetCloseIconButton />
+ *         </SheetActions>
+ *       </SheetTitleGroup>
+ *       <SheetDescription>
+ *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+ *       </SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody>
+ *       <p>
+ *         Consequat do voluptate culpa fugiat consequat nostrud duis
+ *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate
+ *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit
+ *         proident amet.
+ *       </p>
+ *     </SheetBody>
+ *     <SheetFooter>
+ *       <SheetClose asChild>
+ *         <Button type="button">Close</Button>
+ *       </SheetClose>
+ *       <Button type="button" appearance="filled">
+ *         Save
+ *       </Button>
+ *     </SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
  */
 declare const SheetActions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 
-export { Sheet, SheetActions, SheetBody, SheetClose, SheetCloseIconButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTitleGroup, SheetTrigger };
+export { Sheet, SheetActions, SheetBody, SheetClose, SheetCloseIconButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTitleGroup, SheetTrigger };

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as P,d as m,e as d,f as p,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-5WFRLY2G.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as y}from"./chunk-ESJ3HLYJ.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-DJGIRPRQ.js";import"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{X as D}from"@phosphor-icons/react/X";import{cva as L}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as i,jsxs as W}from"react/jsx-runtime";var M=u,w=v,O=m,b=P,S=s(({className:e,...t},o)=>i(d,{className:r("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm",e),...t,ref:o}));S.displayName=d.displayName;var A=L("bg-dialog data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none",{variants:{side:{top:"border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top inset-x-0 top-0 border-b",bottom:"border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom inset-x-0 bottom-0 border-t",left:"border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-[30rem]",right:"border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-[30rem]"}},defaultVariants:{side:"right"}}),C=s(({children:e,className:t,onInteractOutside:o,onPointerDownOutside:a,side:l="right",...R},H)=>W(b,{children:[i(S,{}),i(p,{className:r(A({side:l}),t),onInteractOutside:n=>{c(n),o?.(n)},onPointerDownOutside:n=>{c(n),a?.(n)},ref:H,...R,children:e})]}));C.displayName=p.displayName;var B=({size:e="md",type:t="button",label:o="Close Sheet",appearance:a="ghost",...l})=>i(m,{asChild:!0,children:i(y,{appearance:a,icon:i(D,{}),label:o,size:e,type:t,...l})}),I=({className:e,...t})=>i("div",{className:r("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t}),E=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t}),V=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t}),g=s(({className:e,...t},o)=>i(h,{ref:o,className:r("text-strong flex-1 truncate text-lg font-medium",e),...t}));g.displayName=h.displayName;var x=s(({children:e,className:t,...o},a)=>i("div",{className:r("flex items-center justify-between gap-2",t),...o,ref:a,children:e}));x.displayName="SheetTitleGroup";var T=s(({className:e,...t},o)=>i(f,{ref:o,className:r("text-body text-sm",e),...t}));T.displayName=f.displayName;var N=s(({children:e,className:t,...o},a)=>i("div",{className:r("flex h-full items-center gap-2",t),...o,ref:a,children:e}));N.displayName="SheetActions";export{M as Sheet,N as SheetActions,I as SheetBody,O as SheetClose,B as SheetCloseIconButton,C as SheetContent,T as SheetDescription,V as SheetFooter,E as SheetHeader,S as SheetOverlay,b as SheetPortal,g as SheetTitle,x as SheetTitleGroup,w as SheetTrigger};
+import{a as S,b as u,c as v,d as m,e as d,f as p,g as h,h as f}from"./chunk-PBARMKNJ.js";import{g as c}from"./chunk-5WFRLY2G.js";import"./chunk-DOTYPWKO.js";import"./chunk-D3XF6J5A.js";import{a as P}from"./chunk-ESJ3HLYJ.js";import"./chunk-4LSFAAZW.js";import"./chunk-3C5O3AQA.js";import"./chunk-72TJUKMV.js";import"./chunk-DJGIRPRQ.js";import"./chunk-HDPLH5HC.js";import{a as r}from"./chunk-AZ56JGNY.js";import{X as H}from"@phosphor-icons/react/X";import{cva as D}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as i,jsxs as W}from"react/jsx-runtime";var L=S,M=u,w=m,A=v,y=s(({className:e,...t},o)=>i(d,{className:r("bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm",e),...t,ref:o}));y.displayName=d.displayName;var B=D("bg-dialog data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none",{variants:{side:{top:"border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top inset-x-0 top-0 border-b",bottom:"border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom inset-x-0 bottom-0 border-t",left:"border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-[30rem]",right:"border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-[30rem]"}},defaultVariants:{side:"right"}}),b=s(({children:e,className:t,onInteractOutside:o,onPointerDownOutside:a,side:l="right",...N},R)=>W(A,{children:[i(y,{}),i(p,{className:r(B({side:l}),t),onInteractOutside:n=>{c(n),o?.(n)},onPointerDownOutside:n=>{c(n),a?.(n)},ref:R,...N,children:e})]}));b.displayName=p.displayName;var I=({size:e="md",type:t="button",label:o="Close Sheet",appearance:a="ghost",...l})=>i(m,{asChild:!0,children:i(P,{appearance:a,icon:i(H,{}),label:o,size:e,type:t,...l})}),O=({className:e,...t})=>i("div",{className:r("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t}),E=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t}),V=({className:e,...t})=>i("div",{className:r("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t}),C=s(({className:e,...t},o)=>i(h,{ref:o,className:r("text-strong flex-1 truncate text-lg font-medium",e),...t}));C.displayName=h.displayName;var g=s(({children:e,className:t,...o},a)=>i("div",{className:r("flex items-center justify-between gap-2",t),...o,ref:a,children:e}));g.displayName="SheetTitleGroup";var x=s(({className:e,...t},o)=>i(f,{ref:o,className:r("text-body text-sm",e),...t}));x.displayName=f.displayName;var T=s(({children:e,className:t,...o},a)=>i("div",{className:r("flex h-full items-center gap-2",t),...o,ref:a,children:e}));T.displayName="SheetActions";export{L as Sheet,T as SheetActions,O as SheetBody,w as SheetClose,I as SheetCloseIconButton,b as SheetContent,x as SheetDescription,V as SheetFooter,E as SheetHeader,C as SheetTitle,g as SheetTitleGroup,M as SheetTrigger};
 //# sourceMappingURL=sheet.js.map

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a sheet. Should compose the `SheetTrigger` and `SheetContent`.\n * Acts as a stateful provider for the sheet's open/closed state.\n */\nconst Sheet = SheetPrimitive.Root;\n\n/**\n * The trigger for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n */\nconst SheetTrigger = SheetPrimitive.Trigger;\n\n/**\n * The close button for a sheet. Should be rendered as a child of the `SheetContent` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n */\nconst SheetClose = SheetPrimitive.Close;\n\n/**\n * The portal for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders a portal that the `SheetOverlay` and `SheetContent` is rendered into.\n *\n * You likely don't need to use this component directly, as it is used internally by the `SheetContent` component.\n */\nconst SheetPortal = SheetPrimitive.Portal;\n\n/**\n * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.\n *\n * You likely don't need to use this component directly, as it is used internally by the `SheetContent` component.\n */\nconst SheetOverlay = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"bg-dialog data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none\",\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: \"border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top inset-x-0 top-0 border-b\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom inset-x-0 bottom-0 border-t\",\n\t\t\t\tleft: \"border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-[30rem]\",\n\t\t\t\tright:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-[30rem]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = {} & ComponentPropsWithoutRef<\n\ttypeof SheetPrimitive.Content\n> &\n\tVariantProps<typeof SheetVariants>;\n\n/**\n * The main container for a sheet. Renders on top of the overlay backdrop.\n * Should compose the `SheetHeader`, `SheetBody`, and `SheetFooter`.\n */\nconst SheetContent = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the sheet when clicked. Should be rendered within the `SheetHeader` as a child of `SheetActions`.\n */\nconst SheetCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<X />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</SheetPrimitive.Close>\n);\n\n/**\n * The body container for a sheet. This is where you would typically place the main content of the sheet.\n * Should be rendered as a child of `SheetContent`.\n */\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The header container for a sheet. This is where you would typically place the title, description, and actions.\n * Should be rendered as a child of `SheetContent`.\n */\nconst SheetHeader = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The footer container for a sheet. This is where you would typically place close and submit buttons.\n * Should be rendered as a child of `SheetContent`.\n */\nconst SheetFooter = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The title for a sheet. Typically rendered as a child of `SheetTitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n */\nconst SheetTitle = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong flex-1 truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `SheetHeader`.\n */\nconst SheetTitleGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `SheetHeader`.\n */\nconst SheetDescription = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a sheet. Typically rendered as a child of `SheetTitleGroup`.\n */\nconst SheetActions = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetOverlay,\n\tSheetPortal,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"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","names":["X","cva","forwardRef","jsx","jsxs","Sheet","Root","SheetTrigger","Trigger","SheetClose","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","SheetContent","children","onInteractOutside","onPointerDownOutside","side","Content","event","preventCloseOnPromptInteraction","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}
+{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { X } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `SheetTrigger` and `SheetContent`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst Sheet = SheetPrimitive.Root;\n\n/**\n * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-trigger\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\n *     <p>\n *       Consequat do voluptate culpa fugiat consequat nostrud duis\n *       aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *       aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *       proident amet.\n *     </p>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTrigger = SheetPrimitive.Trigger;\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `SheetContent` component.\n * Usually contained within the `SheetFooter` component.\n * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-close\n *\n * @example\n * ```tsx\n * <Sheet>\n *   <SheetTrigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </SheetTrigger>\n *   <SheetContent>\n *     <p>\n *       Consequat do voluptate culpa fugiat consequat nostrud duis\n *       aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *       aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *       proident amet.\n *     </p>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetClose = SheetPrimitive.Close;\n\n/**\n * The portal for a sheet. Should be rendered as a child of the `Sheet` component.\n * Renders a portal that the `SheetOverlay` and `SheetContent` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\n\n/**\n * The overlay backdrop for a sheet. Should be rendered as a child of the `SheetPortal` component.\n *\n * You likely don't need to use this component directly, as it is used internally by the `SheetContent` component.\n *\n * @private\n */\nconst SheetOverlay = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-40 backdrop-blur-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst SheetVariants = cva(\n\t\"bg-dialog data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in fixed z-40 flex flex-col shadow-lg outline-none transition ease-in-out focus-within:outline-none\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The side of the screen the sheet should slide in from.\n\t\t\t */\n\t\t\tside: {\n\t\t\t\ttop: \"border-dialog data-state-closed:slide-out-to-top data-state-open:slide-in-from-top inset-x-0 top-0 border-b\",\n\t\t\t\tbottom:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-bottom data-state-open:slide-in-from-bottom inset-x-0 bottom-0 border-t\",\n\t\t\t\tleft: \"border-dialog data-state-closed:slide-out-to-left data-state-open:slide-in-from-left inset-y-0 left-0 h-full w-full border-r sm:max-w-[30rem]\",\n\t\t\t\tright:\n\t\t\t\t\t\"border-dialog data-state-closed:slide-out-to-right data-state-open:slide-in-from-right inset-y-0 right-0 h-full w-full border-l sm:max-w-[30rem]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: \"right\",\n\t\t},\n\t},\n);\n\ntype SheetContentProps = {} & ComponentPropsWithoutRef<\n\ttypeof SheetPrimitive.Content\n> &\n\tVariantProps<typeof SheetVariants>;\n\n/**\n * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n * Renders on top of the overlay backdrop.\n * Should contain the `SheetHeader`, `SheetBody`, and `SheetFooter`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-content\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetContent = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\ntype SheetCloseIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">>;\n\n/**\n * An icon button that closes the `Sheet` when clicked.\n * Should be rendered within the `SheetHeader` as a child of `SheetActions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-close-icon-button\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetCloseIconButton = ({\n\tsize = \"md\",\n\ttype = \"button\",\n\tlabel = \"Close Sheet\",\n\tappearance = \"ghost\",\n\t...props\n}: SheetCloseIconButtonProps) => (\n\t<SheetPrimitive.Close asChild>\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={<X />}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t/>\n\t</SheetPrimitive.Close>\n);\n\n/**\n * The body container for a `Sheet`. This is where you would typically place the main content of the sheet, such as forms or text.\n * Should be rendered as a child of `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-body\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetBody = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n * Should be rendered as a child of `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-header\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetHeader = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4\",\n\t\t\t\"has-[.icon-button]:pr-4\", // when there are actions in the header, shorten the padding\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n * Should be rendered as a child of `SheetContent`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-footer\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetFooter = ({\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement>) => (\n\t<div\n\t\tclassName={cx(\n\t\t\t\"border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitle = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\"text-strong flex-1 truncate text-lg font-medium\", className)}\n\t\t{...props}\n\t/>\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-title-group\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetTitleGroup = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `SheetHeader`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-description\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetDescription = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `SheetTitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#api-sheet-actions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <SheetContent>\n *     <SheetHeader>\n *       <SheetTitleGroup>\n *         <SheetTitle>Are you absolutely sure?</SheetTitle>\n *         <SheetActions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <SheetCloseIconButton />\n *         </SheetActions>\n *       </SheetTitleGroup>\n *       <SheetDescription>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </SheetDescription>\n *     </SheetHeader>\n *     <SheetBody>\n *       <p>\n *         Consequat do voluptate culpa fugiat consequat nostrud duis\n *         aliqua minim. Tempor voluptate cillum elit velit. Voluptate\n *         aliqua ipsum aliqua dolore in nisi ea fugiat aliqua velit\n *         proident amet.\n *       </p>\n *     </SheetBody>\n *     <SheetFooter>\n *       <SheetClose asChild>\n *         <Button type=\"button\">Close</Button>\n *       </SheetClose>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </SheetFooter>\n *   </SheetContent>\n * </Sheet>\n * ```\n */\nconst SheetActions = forwardRef<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\nSheetActions.displayName = \"SheetActions\";\n\nexport {\n\t//,\n\tSheet,\n\tSheetActions,\n\tSheetBody,\n\tSheetClose,\n\tSheetCloseIconButton,\n\tSheetContent,\n\tSheetDescription,\n\tSheetFooter,\n\tSheetHeader,\n\tSheetTitle,\n\tSheetTitleGroup,\n\tSheetTrigger,\n};\n"],"mappings":"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","names":["X","cva","forwardRef","jsx","jsxs","Sheet","Root","SheetTrigger","Trigger","SheetClose","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","SheetContent","children","onInteractOutside","onPointerDownOutside","side","Content","event","preventCloseOnPromptInteraction","SheetCloseIconButton","size","type","label","appearance","IconButton","X","SheetBody","SheetHeader","SheetFooter","SheetTitle","Title","SheetTitleGroup","SheetDescription","Description","SheetActions"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "clsx": "2.1.1",
     "prismjs": "1.30.0",
     "react-day-picker": "8.10.1",
-    "sonner": "2.0.1",
+    "sonner": "2.0.2",
     "tailwind-merge": "2.6.0",
     "tailwindcss-animate": "1.0.7",
     "tiny-invariant": "1.3.3"
@@ -55,9 +55,9 @@
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "22.13.10",
+    "@types/node": "22.13.14",
     "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.18",
+    "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
     "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "10.4.21",
@@ -67,7 +67,7 @@
     "postcss": "8.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.3.0",
+    "react-router": "7.4.1",
     "tailwindcss": "3.4.17",
     "tsup": "8.4.0",
     "typescript": "5.8.2",