@ngrok/mantle 0.68.7 → 0.69.1

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } 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\";\n\n/**\n * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetroot\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Root = SheetPrimitive.Root;\nRoot.displayName = \"Sheet\";\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#sheettrigger\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\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 *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Trigger = SheetPrimitive.Trigger;\nTrigger.displayName = \"SheetTrigger\";\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n * Usually contained within the `Sheet.Footer` 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#sheetclose\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\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 *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Close = SheetPrimitive.Close;\nClose.displayName = \"SheetClose\";\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 `Sheet.Content` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\nSheetPortal.displayName = \"SheetPortal\";\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 `Sheet.Content` 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-xs\",\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 border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in\",\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\tleft: \"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r\",\n\t\t\t\tright:\n\t\t\t\t\t\"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l\",\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<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants> & {\n\t\t/**\n\t\t * The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.\n\t\t *\n\t\t * By default, a `Sheet`'s content width is responsive with a default\n\t\t * preferred width: the maximum width of the `Sheet.Content` when the window\n\t\t * viewport is larger than the mobile breakpoint (`sm`).\n\t\t *\n\t\t * @default `sm:max-w-[30rem]`\n\t\t */\n\t\tpreferredWidth?: `sm:max-w-${string}`;\n\t};\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 `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t({ children, className, preferredWidth = \"sm:max-w-[30rem]\", side = \"right\", ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\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);\nContent.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 `Sheet.Header` as a child of `Sheet.Actions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst CloseIconButton = ({\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={<XIcon />}\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);\nCloseIconButton.displayName = \"SheetCloseIconButton\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetbody\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)} {...props} />\n);\nBody.displayName = \"SheetBody\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetheader\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Header = ({ className, ...props }: 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);\nHeader.displayName = \"SheetHeader\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: 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);\nFooter.displayName = \"SheetFooter\";\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitle\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Title = 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));\nTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst TitleGroup = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex items-center justify-between gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description ref={ref} className={cx(\"text-body text-sm\", className)} {...props} />\n));\nDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetactions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Actions = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex h-full items-center gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nActions.displayName = \"SheetActions\";\n\n/**\n * A container that overlays the current view from the edge of the screen.\n * It is a lightweight way of allowing users to complete a task without losing\n * contextual information of the view beneath it.\n *\n * @see https://mantle.ngrok.com/components/sheet\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Sheet = {\n\t/**\n\t * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n\t * Acts as a stateful provider for the Sheet's open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetroot\n\t *\n\t * @example\n\t * ```tsx\n\t * // Triggering a stateful sheet\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">\n\t *       Open Sheet\n\t *     </Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *     </Sheet.Header>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetactions\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.TitleGroup>\n\t *   <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *   <Sheet.Actions>\n\t *     <Sheet.CloseIconButton />\n\t *   </Sheet.Actions>\n\t * </Sheet.TitleGroup>\n\t * ```\n\t */\n\tActions,\n\t/**\n\t * 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\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Content>\n\t *   <Sheet.Header>\n\t *     <Sheet.TitleGroup>\n\t *       <Sheet.Title>Sheet Title</Sheet.Title>\n\t *       <Sheet.Actions>\n\t *         <Sheet.CloseIconButton />\n\t *       </Sheet.Actions>\n\t *     </Sheet.TitleGroup>\n\t *   </Sheet.Header>\n\t *   <Sheet.Body>\n\t *     <p>This is the sheet content.</p>\n\t *   </Sheet.Body>\n\t * </Sheet.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n\t * Usually contained within the `Sheet.Footer` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Footer>\n\t *   <Sheet.Close asChild>\n\t *     <Button type=\"button\">Close</Button>\n\t *   </Sheet.Close>\n\t * </Sheet.Footer>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the `Sheet` when clicked.\n\t * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Header>\n\t *   <Sheet.TitleGroup>\n\t *     <Sheet.Title>Sheet Title</Sheet.Title>\n\t *     <Sheet.Actions>\n\t *       <Sheet.CloseIconButton />\n\t *     </Sheet.Actions>\n\t *   </Sheet.TitleGroup>\n\t * </Sheet.Header>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders on top of the overlay backdrop.\n\t * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">\n\t *       Open Sheet\n\t *     </Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Sheet Title</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>This is the sheet content.</p>\n\t *     </Sheet.Body>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Header>\n\t *   <Sheet.TitleGroup>\n\t *     <Sheet.Title>Sheet Title</Sheet.Title>\n\t *     <Sheet.Actions>\n\t *       <Sheet.CloseIconButton />\n\t *     </Sheet.Actions>\n\t *   </Sheet.TitleGroup>\n\t *   <Sheet.Description>\n\t *     This action cannot be undone.\n\t *   </Sheet.Description>\n\t * </Sheet.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Content>\n\t *   <Sheet.Header>\n\t *     <Sheet.TitleGroup>\n\t *       <Sheet.Title>Sheet Title</Sheet.Title>\n\t *       <Sheet.Actions>\n\t *         <Sheet.CloseIconButton />\n\t *       </Sheet.Actions>\n\t *     </Sheet.TitleGroup>\n\t *   </Sheet.Header>\n\t *   <Sheet.Body>\n\t *     <p>This is the sheet content.</p>\n\t *   </Sheet.Body>\n\t *   <Sheet.Footer>\n\t *     <Sheet.Close asChild>\n\t *       <Button type=\"button\">Close</Button>\n\t *     </Sheet.Close>\n\t *     <Button type=\"button\" appearance=\"filled\">\n\t *       Save\n\t *     </Button>\n\t *   </Sheet.Footer>\n\t * </Sheet.Content>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Content>\n\t *   <Sheet.Header>\n\t *     <Sheet.TitleGroup>\n\t *       <Sheet.Title>Sheet Title</Sheet.Title>\n\t *       <Sheet.Actions>\n\t *         <Sheet.CloseIconButton />\n\t *       </Sheet.Actions>\n\t *     </Sheet.TitleGroup>\n\t *     <Sheet.Description>\n\t *       This action cannot be undone.\n\t *     </Sheet.Description>\n\t *   </Sheet.Header>\n\t * </Sheet.Content>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Header>\n\t *   <Sheet.TitleGroup>\n\t *     <Sheet.Title>Sheet Title</Sheet.Title>\n\t *     <Sheet.Actions>\n\t *       <Sheet.CloseIconButton />\n\t *     </Sheet.Actions>\n\t *   </Sheet.TitleGroup>\n\t * </Sheet.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Header>\n\t *   <Sheet.TitleGroup>\n\t *     <Sheet.Title>Sheet Title</Sheet.Title>\n\t *     <Sheet.Actions>\n\t *       <Sheet.CloseIconButton />\n\t *     </Sheet.Actions>\n\t *   </Sheet.TitleGroup>\n\t * </Sheet.Header>\n\t * ```\n\t */\n\tTitleGroup,\n\t/**\n\t * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">\n\t *       Open Sheet\n\t *     </Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <p>This is the sheet content.</p>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tSheet,\n};\n"],"mappings":"qVAyGA,MAAM,EAAOA,EACb,EAAK,YAAc,QA2BnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,eAiCtB,MAAM,EAAQC,EACd,EAAM,YAAc,aAQpB,MAAM,EAAcC,EACpB,EAAY,YAAc,cAS1B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACC,MACJ,CAAA,CACD,CACF,EAAa,YAAA,EAAqC,YAElD,MAAM,EAAgB,EACrB,4QACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,4FACD,CACD,CACD,gBAAiB,CAChB,KAAM,QACN,CACD,CACD,CAkEK,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,mBAAoB,OAAO,QAAS,GAAG,GAAS,IACxF,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAgB,CAAA,CAChB,EAACC,EAAD,CACC,4BAAA,GACA,UAAW,EAAG,EAAc,CAAE,OAAM,CAAC,CAAE,EAAgB,EAAU,CAC5D,MACL,GAAI,EAEH,WACuB,CAAA,CACZ,CAAA,CAAA,CAEf,CACD,EAAQ,YAAA,EAAqC,YAqD7C,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,cACR,aAAa,QACb,GAAG,KAEH,EAACH,EAAD,CAAsB,QAAA,YACrB,EAAC,EAAD,CACa,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAExB,EAAgB,YAAc,uBAmD9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,iDAAkD,EAAU,CAAE,GAAI,EAAS,CAAA,CAE/F,EAAK,YAAc,YAmDnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,2EACA,0BACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,2EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACI,EAAD,CACM,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAA,EAAmC,YAkDzC,MAAM,EAAa,GACjB,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CAAK,UAAW,EAAG,0CAA2C,EAAU,CAAE,GAAI,EAAY,MACxF,WACI,CAAA,CAEP,CACD,EAAW,YAAc,kBAkDzB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CAAiC,MAAK,UAAW,EAAG,oBAAqB,EAAU,CAAE,GAAI,EAAS,CAAA,CACjG,CACF,EAAY,YAAA,EAAyC,YAkDrD,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CAAK,UAAW,EAAG,iCAAkC,EAAU,CAAE,GAAI,EAAY,MAC/E,WACI,CAAA,CAEP,CACD,EAAQ,YAAc,eAoGtB,MAAM,EAAQ,CA6Bb,OAgBA,UAwBA,OAiBA,QAmBA,kBAgCA,UAqBA,cAgCA,SAwBA,SAmBA,QAkBA,aAqBA,UACA"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Overlay","SheetPrimitive.Content","SheetPrimitive.Title","SheetPrimitive.Description"],"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef, ComponentRef, HTMLAttributes } 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\";\n\n/**\n * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n * Acts as a stateful provider for the Sheet's open/closed state.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetroot\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Root = SheetPrimitive.Root;\nRoot.displayName = \"Sheet\";\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#sheettrigger\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Trigger = SheetPrimitive.Trigger;\nTrigger.displayName = \"SheetTrigger\";\n\n/**\n * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n * Usually contained within the `Sheet.Footer` 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#sheetclose\n *\n * @example\n * ```tsx\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\n *       <p>Sheet content.</p>\n *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Close = SheetPrimitive.Close;\nClose.displayName = \"SheetClose\";\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 `Sheet.Content` is rendered into.\n *\n * @private\n */\nconst SheetPortal = SheetPrimitive.Portal;\nSheetPortal.displayName = \"SheetPortal\";\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 `Sheet.Content` 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-xs\",\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 border-dialog inset-y-0 h-full w-full fixed z-40 flex flex-col shadow-lg outline-hidden transition ease-in-out focus-within:outline-hidden data-state-closed:duration-100 data-state-closed:animate-out data-state-open:duration-100 data-state-open:animate-in\",\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\tleft: \"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r\",\n\t\t\t\tright:\n\t\t\t\t\t\"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l\",\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<typeof SheetPrimitive.Content> &\n\tVariantProps<typeof SheetVariants> & {\n\t\t/**\n\t\t * The preferred width of the `Sheet.Content` as a tailwind `max-w-` class.\n\t\t *\n\t\t * By default, a `Sheet`'s content width is responsive with a default\n\t\t * preferred width: the maximum width of the `Sheet.Content` when the window\n\t\t * viewport is larger than the mobile breakpoint (`sm`).\n\t\t *\n\t\t * @default `sm:max-w-[30rem]`\n\t\t */\n\t\tpreferredWidth?: `sm:max-w-${string}`;\n\t};\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 `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, SheetContentProps>(\n\t({ children, className, preferredWidth = \"sm:max-w-[30rem]\", side = \"right\", ...props }, ref) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\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);\nContent.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 `Sheet.Header` as a child of `Sheet.Actions`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst CloseIconButton = ({\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={<XIcon />}\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);\nCloseIconButton.displayName = \"SheetCloseIconButton\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetbody\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n\t<div className={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)} {...props} />\n);\nBody.displayName = \"SheetBody\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetheader\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Header = ({ className, ...props }: 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);\nHeader.displayName = \"SheetHeader\";\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 `Sheet.Content`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Footer = ({ className, ...props }: 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);\nFooter.displayName = \"SheetFooter\";\n\n/**\n * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitle\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Title = 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));\nTitle.displayName = SheetPrimitive.Title.displayName;\n\n/**\n * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst TitleGroup = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex items-center justify-between gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nTitleGroup.displayName = \"SheetTitleGroup\";\n\n/**\n * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof SheetPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<SheetPrimitive.Description ref={ref} className={cx(\"text-body text-sm\", className)} {...props} />\n));\nDescription.displayName = SheetPrimitive.Description.displayName;\n\n/**\n * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n *\n * @see https://mantle.ngrok.com/components/sheet#sheetactions\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Actions = forwardRef<ComponentRef<\"div\">, HTMLAttributes<HTMLDivElement>>(\n\t({ children, className, ...props }, ref) => (\n\t\t<div className={cx(\"flex h-full items-center gap-2\", className)} {...props} ref={ref}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nActions.displayName = \"SheetActions\";\n\n/**\n * A container that overlays the current view from the edge of the screen.\n * It is a lightweight way of allowing users to complete a task without losing\n * contextual information of the view beneath it.\n *\n * @see https://mantle.ngrok.com/components/sheet\n *\n * @example\n * Composition:\n * ```\n * Sheet.Root\n * ├── Sheet.Trigger\n * └── Sheet.Content\n *     ├── Sheet.Header\n *     │   ├── Sheet.TitleGroup\n *     │   │   ├── Sheet.Title\n *     │   │   └── Sheet.Actions\n *     │   └── Sheet.Description\n *     ├── Sheet.Body\n *     └── Sheet.Footer\n *         └── Sheet.Close\n * ```\n *\n * @example\n * ```tsx\n * // Triggering a stateful sheet\n * <Sheet.Root>\n *   <Sheet.Trigger asChild>\n *     <Button type=\"button\" appearance=\"filled\">\n *       Open Sheet\n *     </Button>\n *   </Sheet.Trigger>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <Sheet.Content>\n *     <Sheet.Header>\n *       <Sheet.TitleGroup>\n *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n *         <Sheet.Actions>\n *           <IconButton\n *             appearance=\"ghost\"\n *             type=\"button\"\n *             icon={<TrashSimple />}\n *             label=\"Delete\"\n *           />\n *           <Separator orientation=\"vertical\" className=\"h-[80%]\" />\n *           <Sheet.CloseIconButton />\n *         </Sheet.Actions>\n *       </Sheet.TitleGroup>\n *       <Sheet.Description>\n *         This action cannot be undone. This will permanently delete your account and remove your data from our servers.\n *       </Sheet.Description>\n *     </Sheet.Header>\n *     <Sheet.Body>\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 *     </Sheet.Body>\n *     <Sheet.Footer>\n *       <Sheet.Close asChild>\n *         <Button type=\"button\">Close</Button>\n *       </Sheet.Close>\n *       <Button type=\"button\" appearance=\"filled\">\n *         Save\n *       </Button>\n *     </Sheet.Footer>\n *   </Sheet.Content>\n * </Sheet.Root>\n * ```\n */\nconst Sheet = {\n\t/**\n\t * The root component for a `Sheet`. Should compose the `Sheet.Trigger` and `Sheet.Content`.\n\t * Acts as a stateful provider for the Sheet's open/closed state.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A group container for the actions of a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetactions\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tActions,\n\t/**\n\t * 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\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetbody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The close button for a `Sheet`. Should be rendered as a child of the `Sheet.Content` component.\n\t * Usually contained within the `Sheet.Footer` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetclose\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * An icon button that closes the `Sheet` when clicked.\n\t * Should be rendered within the `Sheet.Header` as a child of `Sheet.Actions`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcloseiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tCloseIconButton,\n\t/**\n\t * The main container for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders on top of the overlay backdrop.\n\t * Should contain the `Sheet.Header`, `Sheet.Body`, and `Sheet.Footer`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A description for a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * The footer container for a `Sheet`. This is where you would typically place close and submit buttons.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetfooter\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container for a `Sheet`. This is where you would typically place the title, description, and actions.\n\t * Should be rendered as a child of `Sheet.Content`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheetheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title for a `Sheet`. Typically rendered as a child of `Sheet.TitleGroup`.\n\t * Defaults to an `h2` element, but can be changed via the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A group container for the title and actions of a sheet. Typically rendered as a child of `Sheet.Header`.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettitlegroup\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTitleGroup,\n\t/**\n\t * The button trigger for a `Sheet`. Should be rendered as a child of the `Sheet` component.\n\t * Renders an unstyled button by default, but can be customized with the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/sheet#sheettrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Sheet.Root>\n\t *   <Sheet.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"filled\">Open Sheet</Button>\n\t *   </Sheet.Trigger>\n\t *   <Sheet.Content>\n\t *     <Sheet.Header>\n\t *       <Sheet.TitleGroup>\n\t *         <Sheet.Title>Are you absolutely sure?</Sheet.Title>\n\t *         <Sheet.Actions>\n\t *           <Sheet.CloseIconButton />\n\t *         </Sheet.Actions>\n\t *       </Sheet.TitleGroup>\n\t *       <Sheet.Description>\n\t *         This action cannot be undone.\n\t *       </Sheet.Description>\n\t *     </Sheet.Header>\n\t *     <Sheet.Body>\n\t *       <p>Sheet content.</p>\n\t *     </Sheet.Body>\n\t *     <Sheet.Footer>\n\t *       <Sheet.Close asChild>\n\t *         <Button type=\"button\">Close</Button>\n\t *       </Sheet.Close>\n\t *       <Button type=\"button\" appearance=\"filled\">Save</Button>\n\t *     </Sheet.Footer>\n\t *   </Sheet.Content>\n\t * </Sheet.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tSheet,\n};\n"],"mappings":"qVAyGA,MAAM,EAAOA,EACb,EAAK,YAAc,QAuCnB,MAAM,EAAUC,EAChB,EAAQ,YAAc,eAwCtB,MAAM,EAAQC,EACd,EAAM,YAAc,aAQpB,MAAM,EAAcC,EACpB,EAAY,YAAc,cAS1B,MAAM,EAAe,GAGlB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CACC,UAAW,EACV,iKACA,EACA,CACD,GAAI,EACC,MACJ,CAAA,CACD,CACF,EAAa,YAAA,EAAqC,YAElD,MAAM,EAAgB,EACrB,4QACA,CACC,SAAU,CAIT,KAAM,CACL,KAAM,yFACN,MACC,4FACD,CACD,CACD,gBAAiB,CAChB,KAAM,QACN,CACD,CACD,CAkEK,EAAU,GACd,CAAE,WAAU,YAAW,iBAAiB,mBAAoB,OAAO,QAAS,GAAG,GAAS,IACxF,EAAC,EAAD,CAAA,SAAA,CACC,EAAC,EAAD,EAAgB,CAAA,CAChB,EAACC,EAAD,CACC,4BAAA,GACA,UAAW,EAAG,EAAc,CAAE,OAAM,CAAC,CAAE,EAAgB,EAAU,CAC5D,MACL,GAAI,EAEH,WACuB,CAAA,CACZ,CAAA,CAAA,CAEf,CACD,EAAQ,YAAA,EAAqC,YAqD7C,MAAM,GAAmB,CACxB,OAAO,KACP,OAAO,SACP,QAAQ,cACR,aAAa,QACb,GAAG,KAEH,EAACH,EAAD,CAAsB,QAAA,YACrB,EAAC,EAAD,CACa,aACZ,KAAM,EAAC,EAAD,EAAS,CAAA,CACR,QACD,OACA,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAExB,EAAgB,YAAc,uBAmD9B,MAAM,GAAQ,CAAE,YAAW,GAAG,KAC7B,EAAC,MAAD,CAAK,UAAW,EAAG,iDAAkD,EAAU,CAAE,GAAI,EAAS,CAAA,CAE/F,EAAK,YAAc,YAmDnB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,2EACA,0BACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,GAAU,CAAE,YAAW,GAAG,KAC/B,EAAC,MAAD,CACC,UAAW,EACV,2EACA,EACA,CACD,GAAI,EACH,CAAA,CAEH,EAAO,YAAc,cAmDrB,MAAM,EAAQ,GAGX,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACI,EAAD,CACM,MACL,UAAW,EAAG,kDAAmD,EAAU,CAC3E,GAAI,EACH,CAAA,CACD,CACF,EAAM,YAAA,EAAmC,YAkDzC,MAAM,EAAa,GACjB,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CAAK,UAAW,EAAG,0CAA2C,EAAU,CAAE,GAAI,EAAY,MACxF,WACI,CAAA,CAEP,CACD,EAAW,YAAc,kBAkDzB,MAAM,EAAc,GAGjB,CAAE,YAAW,GAAG,GAAS,IAC3B,EAACC,EAAD,CAAiC,MAAK,UAAW,EAAG,oBAAqB,EAAU,CAAE,GAAI,EAAS,CAAA,CACjG,CACF,EAAY,YAAA,EAAyC,YAkDrD,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,MAAD,CAAK,UAAW,EAAG,iCAAkC,EAAU,CAAE,GAAI,EAAY,MAC/E,WACI,CAAA,CAEP,CACD,EAAQ,YAAc,eAoHtB,MAAM,EAAQ,CAsCb,OAqCA,UAsCA,OAuCA,QAsCA,kBAuCA,UAqCA,cAsCA,SAsCA,SAsCA,QAqCA,aAsCA,UACA"}

package/dist/split-button.d.ts

@@ -1,6 +1,6 @@
 import { t as IconButton } from "./icon-button-gO-7F_MZ.js";
 import { t as Button } from "./button-CX98GGHD.js";
-import { t as DropdownMenu } from "./dropdown-menu-D6MiVSR-.js";
+import { t as DropdownMenu } from "./dropdown-menu-CeziL3JH.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$_radix_ui_react_dropdown_menu0 from "@radix-ui/react-dropdown-menu";
@@ -19,6 +19,16 @@ type MenuTriggerProps = Omit<ComponentProps<typeof IconButton>, "appearance" | "
  * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot
  *
  * @example
+ * Composition:
+ * ```
+ * SplitButton.Root
+ * ├── SplitButton.PrimaryAction
+ * ├── SplitButton.MenuTrigger
+ * └── SplitButton.MenuContent
+ *     └── SplitButton.MenuItem
+ * ```
+ *
+ * @example
  * ```tsx
  * <SplitButton.Root>
  *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>

package/dist/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn <DropdownMenu.Item className={cx(\"gap-2\", className)} ref={ref} {...props} />;\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       <Icon svg={<CopyIcon />} />\n *       Copy page\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         <Icon svg={<FileTextIcon />} />\n *         View as Markdown\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"yVAUA,MAAM,EAAO,GACX,CAAE,YAAW,WAAU,MAAK,OAAM,cAAa,eAAc,QAAO,GAAG,GAAS,IAE/E,EAAC,EAAa,KAAd,CACM,MACC,OACO,cACC,eACP,iBAEP,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,sQACA,EACA,CACI,MACL,GAAI,EAEH,WACI,CAAA,CACa,CAAA,CAGtB,CACD,EAAK,YAAc,cAKnB,MAAM,EAAgB,GACpB,CAAE,OAAO,SAAU,GAAG,GAAS,IACxB,EAAC,EAAD,CAAQ,WAAW,WAAW,SAAS,UAAe,MAAW,OAAM,GAAI,EAAS,CAAA,CAE5F,CACD,EAAc,YAAc,2BAU5B,MAAM,EAAc,GAClB,CAAE,OAAM,OAAO,SAAU,GAAG,GAAS,IAEpC,EAAC,EAAa,QAAd,CAAsB,QAAA,GAAQ,UAAU,iBACvC,EAAC,EAAD,CACC,KACC,GACC,EAAC,EAAD,CACC,IACC,EAAC,EAAD,CACC,OAAO,OACP,UAAU,wFACT,CAAA,CAEF,CAAA,CAGJ,WAAW,WACN,MACC,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAGzB,CACD,EAAY,YAAc,yBAE1B,MAAM,EAAc,GAGjB,CAAE,QAAQ,MAAO,GAAG,GAAS,IACxB,EAAC,EAAa,QAAd,CAA6B,QAAY,MAAK,GAAI,EAAS,CAAA,CACjE,CACF,EAAY,YAAc,yBAE1B,MAAM,EAAW,GAGd,CAAE,YAAW,GAAG,GAAS,IACpB,EAAC,EAAa,KAAd,CAAmB,UAAW,EAAG,QAAS,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CACnF,CACF,EAAS,YAAc,sBA+BvB,MAAM,EAAc,CA8BnB,OA4BA,gBA4BA,cA6BA,cA6BA,WACA"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn <DropdownMenu.Item className={cx(\"gap-2\", className)} ref={ref} {...props} />;\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n *\n * @example\n * Composition:\n * ```\n * SplitButton.Root\n * ├── SplitButton.PrimaryAction\n * ├── SplitButton.MenuTrigger\n * └── SplitButton.MenuContent\n *     └── SplitButton.MenuItem\n * ```\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       <Icon svg={<CopyIcon />} />\n *       Copy page\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         <Icon svg={<FileTextIcon />} />\n *         View as Markdown\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"yVAUA,MAAM,EAAO,GACX,CAAE,YAAW,WAAU,MAAK,OAAM,cAAa,eAAc,QAAO,GAAG,GAAS,IAE/E,EAAC,EAAa,KAAd,CACM,MACC,OACO,cACC,eACP,iBAEP,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,sQACA,EACA,CACI,MACL,GAAI,EAEH,WACI,CAAA,CACa,CAAA,CAGtB,CACD,EAAK,YAAc,cAKnB,MAAM,EAAgB,GACpB,CAAE,OAAO,SAAU,GAAG,GAAS,IACxB,EAAC,EAAD,CAAQ,WAAW,WAAW,SAAS,UAAe,MAAW,OAAM,GAAI,EAAS,CAAA,CAE5F,CACD,EAAc,YAAc,2BAU5B,MAAM,EAAc,GAClB,CAAE,OAAM,OAAO,SAAU,GAAG,GAAS,IAEpC,EAAC,EAAa,QAAd,CAAsB,QAAA,GAAQ,UAAU,iBACvC,EAAC,EAAD,CACC,KACC,GACC,EAAC,EAAD,CACC,IACC,EAAC,EAAD,CACC,OAAO,OACP,UAAU,wFACT,CAAA,CAEF,CAAA,CAGJ,WAAW,WACN,MACC,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAGzB,CACD,EAAY,YAAc,yBAE1B,MAAM,EAAc,GAGjB,CAAE,QAAQ,MAAO,GAAG,GAAS,IACxB,EAAC,EAAa,QAAd,CAA6B,QAAY,MAAK,GAAI,EAAS,CAAA,CACjE,CACF,EAAY,YAAc,yBAE1B,MAAM,EAAW,GAGd,CAAE,YAAW,GAAG,GAAS,IACpB,EAAC,EAAa,KAAd,CAAmB,UAAW,EAAG,QAAS,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CACnF,CACF,EAAS,YAAc,sBAyCvB,MAAM,EAAc,CA8BnB,OA4BA,gBA4BA,cA6BA,cA6BA,WACA"}

package/dist/{table-C7BejaFW.d.ts → table-BNq2CbgX.d.ts}

@@ -8,6 +8,21 @@ import * as _$react from "react";
  * @see https://mantle.ngrok.com/components/table
  *
  * @example
+ * Composition:
+ * ```
+ * Table.Root
+ * └── Table.Element
+ *     ├── Table.Caption
+ *     ├── Table.Head
+ *     │   └── Table.Row
+ *     │       └── Table.Header
+ *     ├── Table.Body
+ *     │   └── Table.Row
+ *     │       └── Table.Cell
+ *     └── Table.Foot
+ * ```
+ *
+ * @example
  * ```tsx
  * <Table.Root>
  *   <Table.Element>
@@ -395,4 +410,4 @@ declare const Table: {
 };
 //#endregion
 export { Table as t };
-//# sourceMappingURL=table-C7BejaFW.d.ts.map
+//# sourceMappingURL=table-BNq2CbgX.d.ts.map

package/dist/table-CX43SNek.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-CX43SNek.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableroot\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow = useHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow && horizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none\",\n\t\t\t\t\t\t// When the table contains a sticky right column (e.g., DataTable.ActionCell\n\t\t\t\t\t\t// / DataTable.ActionHeader), suppress the container's right-side fade so the\n\t\t\t\t\t\t// pinned column stays fully opaque. The pinned column provides its own\n\t\t\t\t\t\t// left-side gradient for the scroll-under effect.\n\t\t\t\t\t\t\"has-data-mantle-table-sticky-right:[--_fade-right:black]\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-scroll-left={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToStart) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tdata-scroll-right={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableelement\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<thead> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-muted bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablebody\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<tbody> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablefoot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t// In border-separate, <tr>/<tfoot> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablerow\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecaption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"py-4 text-sm text-gray-500\", \"border-t border-card-muted\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecaption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableelement\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablefoot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToStart: true,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet frameId = 0;\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToStart = element.scrollLeft < 1;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToStart !== scrolledToStart ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToStart, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\t// Coalesce rapid-fire events (scroll, mutation, resize) into a single\n\t\t// layout read per animation frame to avoid redundant work.\n\t\tconst scheduleCheck = () => {\n\t\t\tif (frameId === 0) {\n\t\t\t\tframeId = requestAnimationFrame(() => {\n\t\t\t\t\tframeId = 0;\n\t\t\t\t\tcheckState();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(scheduleCheck);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(scheduleCheck);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", scheduleCheck, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frameId);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", scheduleCheck);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"sNA+CA,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAqB,GAAoD,CAE/E,OACC,EAAC,MAAD,CACC,UAAW,EACV,sGACA,EACA,CACD,qBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,eACnE,IAAA,GAED,kBAAiB,EAAmB,MAAM,YAC1C,oBACC,EAAmB,MAAM,aAAe,EAAmB,MAAM,cAElE,GAAI,WAEJ,EAAC,MAAD,CACC,UAAW,EACV,4EAKA,2DACA,CACD,mBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,iBACnE,IAAA,GAED,oBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,eACnE,IAAA,GAED,IAAK,EAAY,EAAmB,IAAK,EAAI,CAE5C,WACI,CAAA,CACD,CAAA,EAGR,CACD,EAAK,YAAc,YAmEnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IAElC,EAAC,QAAD,CACM,MACL,UAAW,EACV,yFACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAGV,CACD,EAAQ,YAAc,eAiDtB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAIV,qEACA,qDACA,qBACA,iBACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA+CnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACC,UAAW,EAIV,qDACA,YACA,qDACA,EACA,CACI,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YAiDnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAEV,wBAGA,uEACA,qDACA,kDACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAM,GACV,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EAEV,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAI,YAAc,WAgDlB,MAAM,EAAS,GACb,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qFACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAO,YAAc,cA8CrB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qEACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,UAAD,CACM,MACL,UAAW,EAAG,6BAA8B,6BAA8B,EAAU,CACpF,GAAI,EAEH,WACQ,CAAA,CAEX,CACD,EAAQ,YAAc,eAyCtB,MAAM,EAAQ,CAuCb,OAuCA,UAuCA,OAuCA,UAuCA,OAuCA,OAuCA,SAuCA,OAuCA,MACA,CAaD,SAAS,GAAuD,CAC/D,IAAM,EAAM,EAAiB,KAAK,CAC5B,CAAC,EAAO,GAAY,EAAS,CAClC,YAAa,GACb,gBAAiB,GACjB,cAAe,GACf,CAAC,CAyDF,OAvDA,MAAsB,CACrB,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,EACJ,OAGD,IAAI,EAAU,EAER,MAAmB,CACxB,IAAM,EAAc,EAAQ,YAAc,EAAQ,YAC5C,EAAkB,EAAQ,WAAa,EACvC,EACL,KAAK,IAAI,EAAQ,YAAc,EAAQ,WAAa,EAAQ,YAAY,CAAG,EAE5E,EAAU,GAER,EAAS,cAAgB,GACzB,EAAS,kBAAoB,GAC7B,EAAS,gBAAkB,EAEpB,CAAE,cAAa,kBAAiB,gBAAe,CAEhD,EACN,EAKG,MAAsB,CACvB,IAAY,IACf,EAAU,0BAA4B,CACrC,EAAU,EACV,GAAY,EACX,GAIE,EAAiB,IAAI,eAAe,EAAc,CACxD,EAAe,QAAQ,EAAQ,CAE/B,IAAM,EAAmB,IAAI,iBAAiB,EAAc,CAO5D,OANA,EAAiB,QAAQ,EAAS,CAAE,UAAW,GAAM,QAAS,GAAM,CAAC,CAErE,EAAQ,iBAAiB,SAAU,EAAe,CAAE,QAAS,GAAM,CAAC,CAEpE,GAAY,KAEC,CACZ,qBAAqB,EAAQ,CAC7B,EAAe,YAAY,CAC3B,EAAiB,YAAY,CAC7B,EAAQ,oBAAoB,SAAU,EAAc,GAEnD,EAAE,CAAC,CAEC,OAAe,CAAE,MAAK,QAAO,EAAG,CAAC,EAAM,CAAC"}
+{"version":3,"file":"table-CX43SNek.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableroot\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow = useHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow && horizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none\",\n\t\t\t\t\t\t// When the table contains a sticky right column (e.g., DataTable.ActionCell\n\t\t\t\t\t\t// / DataTable.ActionHeader), suppress the container's right-side fade so the\n\t\t\t\t\t\t// pinned column stays fully opaque. The pinned column provides its own\n\t\t\t\t\t\t// left-side gradient for the scroll-under effect.\n\t\t\t\t\t\t\"has-data-mantle-table-sticky-right:[--_fade-right:black]\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-scroll-left={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToStart) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tdata-scroll-right={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableelement\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<thead> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-muted bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablebody\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<tbody> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablefoot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t// In border-separate, <tr>/<tfoot> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablerow\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecaption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"py-4 text-sm text-gray-500\", \"border-t border-card-muted\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * Composition:\n * ```\n * Table.Root\n * └── Table.Element\n *     ├── Table.Caption\n *     ├── Table.Head\n *     │   └── Table.Row\n *     │       └── Table.Header\n *     ├── Table.Body\n *     │   └── Table.Row\n *     │       └── Table.Cell\n *     └── Table.Foot\n * ```\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecaption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableelement\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablefoot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToStart: true,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet frameId = 0;\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToStart = element.scrollLeft < 1;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToStart !== scrolledToStart ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToStart, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\t// Coalesce rapid-fire events (scroll, mutation, resize) into a single\n\t\t// layout read per animation frame to avoid redundant work.\n\t\tconst scheduleCheck = () => {\n\t\t\tif (frameId === 0) {\n\t\t\t\tframeId = requestAnimationFrame(() => {\n\t\t\t\t\tframeId = 0;\n\t\t\t\t\tcheckState();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(scheduleCheck);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(scheduleCheck);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", scheduleCheck, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frameId);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", scheduleCheck);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"sNA+CA,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAqB,GAAoD,CAE/E,OACC,EAAC,MAAD,CACC,UAAW,EACV,sGACA,EACA,CACD,qBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,eACnE,IAAA,GAED,kBAAiB,EAAmB,MAAM,YAC1C,oBACC,EAAmB,MAAM,aAAe,EAAmB,MAAM,cAElE,GAAI,WAEJ,EAAC,MAAD,CACC,UAAW,EACV,4EAKA,2DACA,CACD,mBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,iBACnE,IAAA,GAED,oBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,eACnE,IAAA,GAED,IAAK,EAAY,EAAmB,IAAK,EAAI,CAE5C,WACI,CAAA,CACD,CAAA,EAGR,CACD,EAAK,YAAc,YAmEnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IAElC,EAAC,QAAD,CACM,MACL,UAAW,EACV,yFACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAGV,CACD,EAAQ,YAAc,eAiDtB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAIV,qEACA,qDACA,qBACA,iBACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA+CnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACC,UAAW,EAIV,qDACA,YACA,qDACA,EACA,CACI,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YAiDnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAEV,wBAGA,uEACA,qDACA,kDACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAM,GACV,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EAEV,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAI,YAAc,WAgDlB,MAAM,EAAS,GACb,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qFACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAO,YAAc,cA8CrB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qEACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,UAAD,CACM,MACL,UAAW,EAAG,6BAA8B,6BAA8B,EAAU,CACpF,GAAI,EAEH,WACQ,CAAA,CAEX,CACD,EAAQ,YAAc,eAwDtB,MAAM,EAAQ,CAuCb,OAuCA,UAuCA,OAuCA,UAuCA,OAuCA,OAuCA,SAuCA,OAuCA,MACA,CAaD,SAAS,GAAuD,CAC/D,IAAM,EAAM,EAAiB,KAAK,CAC5B,CAAC,EAAO,GAAY,EAAS,CAClC,YAAa,GACb,gBAAiB,GACjB,cAAe,GACf,CAAC,CAyDF,OAvDA,MAAsB,CACrB,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,EACJ,OAGD,IAAI,EAAU,EAER,MAAmB,CACxB,IAAM,EAAc,EAAQ,YAAc,EAAQ,YAC5C,EAAkB,EAAQ,WAAa,EACvC,EACL,KAAK,IAAI,EAAQ,YAAc,EAAQ,WAAa,EAAQ,YAAY,CAAG,EAE5E,EAAU,GAER,EAAS,cAAgB,GACzB,EAAS,kBAAoB,GAC7B,EAAS,gBAAkB,EAEpB,CAAE,cAAa,kBAAiB,gBAAe,CAEhD,EACN,EAKG,MAAsB,CACvB,IAAY,IACf,EAAU,0BAA4B,CACrC,EAAU,EACV,GAAY,EACX,GAIE,EAAiB,IAAI,eAAe,EAAc,CACxD,EAAe,QAAQ,EAAQ,CAE/B,IAAM,EAAmB,IAAI,iBAAiB,EAAc,CAO5D,OANA,EAAiB,QAAQ,EAAS,CAAE,UAAW,GAAM,QAAS,GAAM,CAAC,CAErE,EAAQ,iBAAiB,SAAU,EAAe,CAAE,QAAS,GAAM,CAAC,CAEpE,GAAY,KAEC,CACZ,qBAAqB,EAAQ,CAC7B,EAAe,YAAY,CAC3B,EAAiB,YAAY,CAC7B,EAAQ,oBAAoB,SAAU,EAAc,GAEnD,EAAE,CAAC,CAEC,OAAe,CAAE,MAAK,QAAO,EAAG,CAAC,EAAM,CAAC"}