@ngrok/mantle 0.55.2 → 0.55.3

package/dist/icons.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { k as SortingMode, A as AlphanumericSortingDirection, T as TimeSortingDirection, S as SortingDirection } from './direction-veAOo2is.js';
 import { S as SvgAttributes } from './types-BuKAGhC-.js';
-import { Theme } from './theme.js';
+import { T as Theme } from './themes-Jy9DUcQe.js';
 import 'react';
 
 type Props = SvgAttributes & ({

package/dist/icons.js

@@ -1,2 +1,2 @@
-import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{l as m}from"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";import{DesktopIcon as u}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as c}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function i(o){let e=m();return t(r,{theme:e,...o})}i.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(u,{...e});case"light":return t(c,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(c,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{i as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
+import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-2PHWBRBD.js";import"./chunk-GYPSB3OK.js";import{k as m}from"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-AZ56JGNY.js";import{DesktopIcon as f}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function c(o){let e=m();return t(r,{theme:e,...o})}c.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(f,{...e});case"light":return t(i,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(i,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{c as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
 //# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/icons/theme.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { type Theme, useAppliedTheme } from \"../theme/theme-provider.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n"],"mappings":"gLAAA,OAAS,eAAAA,MAAmB,gCAC5B,OAAS,YAAAC,MAAgB,6BACzB,OAAS,WAAAC,MAAe,4BAchB,cAAAC,MAAA,oBAHR,SAASC,EAAcC,EAAsB,CAC5C,IAAMC,EAAeC,EAAgB,EAErC,OAAOJ,EAACK,EAAA,CAAU,MAAOF,EAAe,GAAGD,EAAO,CACnD,CACAD,EAAc,YAAc,gBAa5B,SAASI,EAAU,CAAE,MAAAC,EAAO,GAAGJ,CAAM,EAAmB,CACvD,OAAQI,EAAO,CACd,IAAK,SACJ,OAAON,EAACO,EAAA,CAAa,GAAGL,EAAO,EAChC,IAAK,QACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,EAC5B,IAAK,OACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,EAC7B,IAAK,sBACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,OAAO,OAAO,EAC1C,IAAK,qBACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,OAAO,OAAO,CAC5C,CACD,CACAG,EAAU,YAAc","names":["DesktopIcon","MoonIcon","SunIcon","jsx","AutoThemeIcon","props","appliedTheme","useAppliedTheme","ThemeIcon","theme","DesktopIcon","SunIcon","MoonIcon"]}
+{"version":3,"sources":["../src/components/icons/theme.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\nimport type { Theme } from \"../theme/themes.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n"],"mappings":"oQAAA,OAAS,eAAAA,MAAmB,gCAC5B,OAAS,YAAAC,MAAgB,6BACzB,OAAS,WAAAC,MAAe,4BAehB,cAAAC,MAAA,oBAHR,SAASC,EAAcC,EAAsB,CAC5C,IAAMC,EAAeC,EAAgB,EAErC,OAAOJ,EAACK,EAAA,CAAU,MAAOF,EAAe,GAAGD,EAAO,CACnD,CACAD,EAAc,YAAc,gBAa5B,SAASI,EAAU,CAAE,MAAAC,EAAO,GAAGJ,CAAM,EAAmB,CACvD,OAAQI,EAAO,CACd,IAAK,SACJ,OAAON,EAACO,EAAA,CAAa,GAAGL,EAAO,EAChC,IAAK,QACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,EAC5B,IAAK,OACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,EAC7B,IAAK,sBACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,OAAO,OAAO,EAC1C,IAAK,qBACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,OAAO,OAAO,CAC5C,CACD,CACAG,EAAU,YAAc","names":["DesktopIcon","MoonIcon","SunIcon","jsx","AutoThemeIcon","props","appliedTheme","useAppliedTheme","ThemeIcon","theme","DesktopIcon","SunIcon","MoonIcon"]}

package/dist/sheet.js

@@ -1,2 +1,2 @@
-import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-VIKPHWPP.js";import{d as c}from"./chunk-Q2I2F6IG.js";import"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";import{c as y}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("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",e),...t,ref:i}));b.displayName=p.displayName;var V=E("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",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
+import{a as u,b as v,c as S,d as m,e as p,f as d,g as h,h as f}from"./chunk-VIKPHWPP.js";import{d as c}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c as y}from"./chunk-XTCU7MXB.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{XIcon as W}from"@phosphor-icons/react/X";import{cva as E}from"class-variance-authority";import{forwardRef as s}from"react";import{jsx as o,jsxs as z}from"react/jsx-runtime";var P=u;P.displayName="Sheet";var C=v;C.displayName="SheetTrigger";var g=m;g.displayName="SheetClose";var N=S;N.displayName="SheetPortal";var b=s(({className:e,...t},i)=>o(p,{className:a("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",e),...t,ref:i}));b.displayName=p.displayName;var V=E("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",{variants:{side:{left:"data-state-closed:slide-out-to-left data-state-open:slide-in-from-left left-0 border-r",right:"data-state-closed:slide-out-to-right data-state-open:slide-in-from-right right-0 border-l"}},defaultVariants:{side:"right"}}),x=s(({children:e,className:t,onInteractOutside:i,onPointerDownOutside:r,preferredWidth:l="sm:max-w-[30rem]",side:B="right",...O},A)=>z(N,{children:[o(b,{}),o(d,{className:a(V({side:B}),l,t),onInteractOutside:n=>{c(n),i?.(n)},onPointerDownOutside:n=>{c(n),r?.(n)},ref:A,...O,children:e})]}));x.displayName=d.displayName;var T=({size:e="md",type:t="button",label:i="Close Sheet",appearance:r="ghost",...l})=>o(m,{asChild:!0,children:o(y,{appearance:r,icon:o(W,{}),label:i,size:e,type:t,...l})});T.displayName="SheetCloseIconButton";var R=({className:e,...t})=>o("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",e),...t});R.displayName="SheetBody";var H=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 flex-col gap-2 border-b py-4 pl-6 pr-4","has-[.icon-button]:pr-4",e),...t});H.displayName="SheetHeader";var D=({className:e,...t})=>o("div",{className:a("border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-2.5",e),...t});D.displayName="SheetFooter";var L=s(({className:e,...t},i)=>o(h,{ref:i,className:a("text-strong flex-1 truncate text-lg font-medium",e),...t}));L.displayName=h.displayName;var M=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex items-center justify-between gap-2",t),...i,ref:r,children:e}));M.displayName="SheetTitleGroup";var I=s(({className:e,...t},i)=>o(f,{ref:i,className:a("text-body text-sm",e),...t}));I.displayName=f.displayName;var w=s(({children:e,className:t,...i},r)=>o("div",{className:a("flex h-full items-center gap-2",t),...i,ref:r,children:e}));w.displayName="SheetActions";var k={Root:P,Actions:w,Body:R,Close:g,CloseIconButton:T,Content:x,Description:I,Footer:D,Header:H,Title:L,TitleGroup:M,Trigger:C};export{k as Sheet};
 //# sourceMappingURL=sheet.js.map

package/dist/sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `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#api-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 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#api-sheet-trigger\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#api-sheet-close\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<\n\ttypeof SheetPrimitive.Content\n> &\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#api-sheet-content\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(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"sm:max-w-[30rem]\",\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\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#api-sheet-close-icon-button\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <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#api-sheet-body\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\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\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#api-sheet-header\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#api-sheet-footer\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#api-sheet-title\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#api-sheet-title-group\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<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\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#api-sheet-description\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\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\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#api-sheet-actions\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\n\t\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\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#api-sheet\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#api-sheet-actions\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#api-sheet-body\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#api-sheet-close\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#api-sheet-close-icon-button\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#api-sheet-content\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#api-sheet-description\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#api-sheet-footer\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#api-sheet-header\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#api-sheet-title\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#api-sheet-title-group\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#api-sheet-trigger\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":"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","names":["XIcon","cva","forwardRef","jsx","jsxs","Root","Trigger","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","side","event","preventCloseOnPromptInteraction","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Header","Footer","Title","TitleGroup","Description","Actions","Sheet"]}
+{"version":3,"sources":["../src/components/sheet/sheet.tsx"],"sourcesContent":["import { XIcon } from \"@phosphor-icons/react/X\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type {\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tHTMLAttributes,\n} from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport * as SheetPrimitive from \"../dialog/primitive.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\n/**\n * The root component for a `Sheet`. Should compose the `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#api-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 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#api-sheet-trigger\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#api-sheet-close\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<\n\ttypeof SheetPrimitive.Content\n> &\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#api-sheet-content\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(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"sm:max-w-[30rem]\",\n\t\t\tside = \"right\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Content\n\t\t\t\tclassName={cx(SheetVariants({ side }), preferredWidth, className)}\n\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</SheetPrimitive.Content>\n\t\t</SheetPortal>\n\t),\n);\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#api-sheet-close-icon-button\n *\n * @example\n * ```tsx\n * // Sheet without a trigger (e.g. router controlled)\n * <Sheet open opOpenChange={() => onClose()}>\n *   <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#api-sheet-body\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\n\t\tclassName={cx(\"scrollbar text-body flex-1 overflow-y-auto p-6\", className)}\n\t\t{...props}\n\t/>\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#api-sheet-header\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#api-sheet-footer\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#api-sheet-title\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#api-sheet-title-group\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<\n\tComponentRef<\"div\">,\n\tHTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => (\n\t<div\n\t\tclassName={cx(\"flex items-center justify-between gap-2\", className)}\n\t\t{...props}\n\t\tref={ref}\n\t>\n\t\t{children}\n\t</div>\n));\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#api-sheet-description\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\n\t\tref={ref}\n\t\tclassName={cx(\"text-body text-sm\", className)}\n\t\t{...props}\n\t/>\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#api-sheet-actions\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\n\t\t\tclassName={cx(\"flex h-full items-center gap-2\", className)}\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t>\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#api-sheet\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#api-sheet-actions\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#api-sheet-body\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#api-sheet-close\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#api-sheet-close-icon-button\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#api-sheet-content\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#api-sheet-description\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#api-sheet-footer\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#api-sheet-header\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#api-sheet-title\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#api-sheet-title-group\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#api-sheet-trigger\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":"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","names":["XIcon","cva","forwardRef","jsx","jsxs","Root","Trigger","Close","SheetPortal","Portal","SheetOverlay","forwardRef","className","props","ref","Overlay","cx","SheetVariants","cva","Content","children","onInteractOutside","onPointerDownOutside","preferredWidth","side","event","preventCloseOnPromptInteraction","CloseIconButton","size","type","label","appearance","IconButton","XIcon","Body","Header","Footer","Title","TitleGroup","Description","Actions","Sheet"]}

package/dist/theme.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentProps, PropsWithChildren } from 'react';
+import { T as Theme, R as ResolvedTheme } from './themes-Jy9DUcQe.js';
+export { a as $resolvedTheme, $ as $theme, i as isResolvedTheme, b as isTheme, r as resolvedThemes, t as themes } from './themes-Jy9DUcQe.js';
 
 type Props = {
     /**
@@ -23,66 +25,11 @@ declare const PreloadFonts: {
     displayName: string;
 };
 
-/**
- * resolvedThemes is a tuple of valid themes that have been resolved from "system" to a specific theme.
- */
-declare const resolvedThemes: readonly ["light", "dark", "light-high-contrast", "dark-high-contrast"];
-/**
- * ResolvedTheme is a type that represents a theme that has been resolved from "system" to a specific theme.
- */
-type ResolvedTheme = (typeof resolvedThemes)[number];
-/**
- * themes is a tuple of valid themes.
- */
-declare const themes: readonly ["system", "light", "dark", "light-high-contrast", "dark-high-contrast"];
-/**
- * Theme is a string literal type that represents a valid theme.
- */
-type Theme = (typeof themes)[number];
-/**
- * $theme is a helper which translates the Theme type into a string literal type.
- */
-declare const $theme: <T extends Theme = Theme>(value: T) => T;
-/**
- * Type predicate that checks if a value is a valid theme.
- */
-declare function isTheme(value: unknown): value is Theme;
-/**
- * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.
- */
-declare const $resolvedTheme: <T extends ResolvedTheme = ResolvedTheme>(value: T) => T;
-/**
- * Type predicate that checks if a value is a valid resolved theme.
- */
-declare function isResolvedTheme(value: unknown): value is ResolvedTheme;
 /**
  * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.
  */
 type ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];
-/**
- * Props for the {@link ThemeProvider} component.
- */
-type ThemeProviderProps = PropsWithChildren & {
-    /**
-     * The initial theme to apply if no value is found in storage.
-     *
-     * Possible values {@link themes}:
-     * - `"system"` – follow the user’s system preferences (default).
-     * - `"light"` – force light mode.
-     * - `"dark"` – force dark mode.
-     * - `"light-high-contrast"` – light mode with increased contrast.
-     * - `"dark-high-contrast"` – dark mode with increased contrast.
-     */
-    defaultTheme?: Theme;
-    /**
-     * The key used to persist the selected theme in cookies or storage.
-     *
-     * Defaults to `"theme"` (or the {@link DEFAULT_STORAGE_KEY} constant).
-     * Useful if you need to isolate theme settings across multiple apps
-     * or contexts.
-     */
-    storageKey?: string;
-};
+type ThemeProviderProps = PropsWithChildren;
 /**
  * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.
  *
@@ -95,7 +42,7 @@ type ThemeProviderProps = PropsWithChildren & {
  * </ThemeProvider>
  * ```
  */
-declare function ThemeProvider({ children, defaultTheme, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare namespace ThemeProvider {
     var displayName: string;
 }
@@ -105,10 +52,6 @@ declare namespace ThemeProvider {
  * @note This function will throw an error if used outside of a ThemeProvider context tree.
  */
 declare function useTheme(): ThemeProviderState;
-/**
- * Applies the given theme to the `<html>` element.
- */
-declare function applyTheme(theme: Theme): void;
 /**
  * Read the theme and applied theme from the `<html>` element.
  */
@@ -121,22 +64,13 @@ declare function readThemeFromHtmlElement(): {
  * This will mirror the result that gets applied to the <html> element.
  */
 declare function useAppliedTheme(): "dark" | "light" | "light-high-contrast" | "dark-high-contrast";
-type PreventWrongThemeFlashScriptContentOptions = {
-    defaultTheme?: Theme;
-    storageKey?: string;
-};
 /**
  * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.
  * It checks cookies for a stored theme, and if none is found, it sets the default theme.
  * It also applies the correct theme to the `<html>` element based on the user's media query preferences.
  */
-declare function preventWrongThemeFlashScriptContent(options?: PreventWrongThemeFlashScriptContentOptions): string;
+declare function preventWrongThemeFlashScriptContent(): string;
 type MantleThemeHeadContentProps = {
-    /**
-     * The default theme to use if no theme is stored in cookies.
-     * @default "system"
-     */
-    defaultTheme?: Theme;
     /**
      * An optional CSP nonce to allowlist this inline script. Using this can help
      * you to avoid using the CSP `unsafe-inline` directive, which disables
@@ -145,11 +79,6 @@ type MantleThemeHeadContentProps = {
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce
      */
     nonce?: string;
-    /**
-     * The key used to store the theme in cookies.
-     * @default "mantle-ui-theme"
-     */
-    storageKey?: string;
 } & ComponentProps<typeof PreloadFonts>;
 /**
  * MantleThemeHeadContent is a React component that renders a script to prevent
@@ -159,7 +88,7 @@ type MantleThemeHeadContentProps = {
  * Render as high as possible in the <head> element.
  */
 declare const MantleThemeHeadContent: {
-    ({ defaultTheme, includeNunitoSans, nonce, storageKey, }: MantleThemeHeadContentProps): react_jsx_runtime.JSX.Element;
+    ({ includeNunitoSans, nonce, }: MantleThemeHeadContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 type InitialThemeProps = {
@@ -167,13 +96,32 @@ type InitialThemeProps = {
     "data-applied-theme": ResolvedTheme;
     "data-theme": Theme;
 };
+type UseInitialHtmlThemePropsOptions = {
+    className?: string;
+};
 /**
  * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.
  */
-declare function useInitialHtmlThemeProps(props?: {
-    className?: string;
-    defaultTheme?: Theme;
-    storageKey?: string;
-}): InitialThemeProps;
+declare function useInitialHtmlThemeProps(props?: UseInitialHtmlThemePropsOptions): InitialThemeProps;
+type GetStoredThemeOptions = {
+    /**
+     * raw Cookie header (SSR) or document.cookie (client)
+     */
+    cookie: string | null | undefined;
+};
+/**
+ * Returns the persisted UI theme from a Cookie header string.
+ *
+ * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**
+ * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to
+ * {@link DEFAULT_THEME}. This function never throws; malformed encodings or
+ * missing cookies quietly return the default.
+ *
+ * @example
+ * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // "dark"
+ * @example
+ * getStoredTheme({ cookie: "" }) // DEFAULT_THEME
+ */
+declare function getStoredTheme({ cookie }: GetStoredThemeOptions): Theme;
 
-export { $resolvedTheme, $theme, MantleThemeHeadContent, PreloadFonts, type Theme, ThemeProvider, type ThemeProviderProps, applyTheme, isResolvedTheme, isTheme, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, resolvedThemes, themes, useAppliedTheme, useInitialHtmlThemeProps, useTheme };
+export { MantleThemeHeadContent, PreloadFonts, ResolvedTheme, Theme, ThemeProvider, getStoredTheme, preventWrongThemeFlashScriptContent, readThemeFromHtmlElement, useAppliedTheme, useInitialHtmlThemeProps, useTheme };

package/dist/theme.js

@@ -1,2 +1,2 @@
-import{a as e,b as m,c as r,d as o,e as t,f as h,g as s,h as T,i as p,j as l,k as d,l as n,m as i,n as a,o as v}from"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";export{h as $resolvedTheme,o as $theme,a as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,l as applyTheme,s as isResolvedTheme,t as isTheme,i as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,r as themes,n as useAppliedTheme,v as useInitialHtmlThemeProps,p as useTheme};
+import{a as e,b as m,c as t,d as o,e as r,f as h,g as s,h as T,i as l,j as d,k as n,l as p,m as i,n as a,o as v}from"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-AZ56JGNY.js";export{h as $resolvedTheme,o as $theme,i as MantleThemeHeadContent,e as PreloadFonts,T as ThemeProvider,v as getStoredTheme,s as isResolvedTheme,r as isTheme,p as preventWrongThemeFlashScriptContent,d as readThemeFromHtmlElement,m as resolvedThemes,t as themes,n as useAppliedTheme,a as useInitialHtmlThemeProps,l as useTheme};
 //# sourceMappingURL=theme.js.map

package/dist/themes-Jy9DUcQe.d.ts

@@ -0,0 +1,34 @@
+/**
+ * resolvedThemes is a tuple of valid themes that have been resolved from "system" to a specific theme.
+ */
+declare const resolvedThemes: readonly ["light", "dark", "light-high-contrast", "dark-high-contrast"];
+/**
+ * ResolvedTheme is a type that represents a theme that has been resolved from "system" to a specific theme.
+ */
+type ResolvedTheme = (typeof resolvedThemes)[number];
+/**
+ * themes is a tuple of valid themes.
+ */
+declare const themes: readonly ["system", "light", "dark", "light-high-contrast", "dark-high-contrast"];
+/**
+ * Theme is a string literal type that represents a valid theme.
+ */
+type Theme = (typeof themes)[number];
+/**
+ * $theme is a helper which translates the Theme type into a string literal type.
+ */
+declare const $theme: <T extends Theme = Theme>(value: T) => T;
+/**
+ * Type predicate that checks if a value is a valid theme.
+ */
+declare function isTheme(value: unknown): value is Theme;
+/**
+ * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.
+ */
+declare const $resolvedTheme: <T extends ResolvedTheme = ResolvedTheme>(value: T) => T;
+/**
+ * Type predicate that checks if a value is a valid resolved theme.
+ */
+declare function isResolvedTheme(value: unknown): value is ResolvedTheme;
+
+export { $theme as $, type ResolvedTheme as R, type Theme as T, $resolvedTheme as a, isTheme as b, isResolvedTheme as i, resolvedThemes as r, themes as t };

package/dist/toast.js

@@ -1,2 +1,2 @@
-import{a as o,b as t,c as r}from"./chunk-Q2I2F6IG.js";import"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Toast,o as Toaster,t as makeToast};
+import{a as o,b as t,c as r}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import"./chunk-AZ56JGNY.js";export{r as Toast,o as Toaster,t as makeToast};
 //# sourceMappingURL=toast.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.55.2",
+  "version": "0.55.3",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "node": "^22.0.0"
   },
   "dependencies": {
-    "@ariakit/react": "0.4.18",
+    "@ariakit/react": "0.4.19",
     "@headlessui/react": "2.2.9",
     "@radix-ui/react-accordion": "1.2.12",
     "@radix-ui/react-dialog": "1.1.15",
@@ -43,11 +43,11 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "prismjs": "1.30.0",
-    "react-day-picker": "9.11.0",
+    "react-day-picker": "9.11.1",
     "sonner": "2.0.7",
     "tailwind-merge": "3.3.1",
-    "tw-animate-css": "1.4.0",
-    "tiny-invariant": "1.3.3"
+    "tiny-invariant": "1.3.3",
+    "tw-animate-css": "1.4.0"
   },
   "devDependencies": {
     "@phosphor-icons/react": "2.1.10",
@@ -56,14 +56,14 @@
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/prismjs": "1.26.5",
-    "@types/react": "18.3.25",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "18.3.26",
+    "@types/react-dom": "19.2.2",
     "browserslist": "4.26.3",
     "date-fns": "4.1.0",
     "jsdom": "27.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.9.3",
+    "react-router": "7.9.4",
     "tailwindcss": "4.1.14",
     "tsup": "8.5.0",
     "typescript": "5.9.3",