@ngrok/mantle 0.55.2 → 0.55.4

package/dist/alert-dialog.js

@@ -1,2 +1,2 @@
-import{a as y,b as A,c as u,d,e as D,f as C,g as P,h as v}from"./chunk-VIKPHWPP.js";import{d as c}from"./chunk-Q2I2F6IG.js";import"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";import{a as m}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as g}from"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{Slot as f}from"@radix-ui/react-slot";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:l="max-w-md",...r},p)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:p,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",l,t),onInteractOutside:s=>{c(s),e?.(s)},onPointerDownOutside:s=>{c(s),o?.(s)},...r})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex-1 space-y-4",e),ref:l,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let l=N(),r="default";return l.priority==="danger"&&(r="danger"),i(m,{appearance:t,priority:r,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...l},r)=>i(d,{asChild:!0,children:i(m,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:r,...l})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},l)=>{let r=N(),p=r.priority==="danger"?"text-danger-600":"text-accent-600",s=r.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:l,className:a("size-12 sm:size-7",p,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=d;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
+import{a as y,b as A,c as u,d,e as D,f as C,g as P,h as v}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{a as m}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import{a as g}from"./chunk-NPTDRQT5.js";import{a}from"./chunk-AZ56JGNY.js";import{InfoIcon as H}from"@phosphor-icons/react/Info";import{WarningIcon as k}from"@phosphor-icons/react/Warning";import{Slot as f}from"@radix-ui/react-slot";import{createContext as M,forwardRef as n,useContext as $,useMemo as q}from"react";import E from"tiny-invariant";import{jsx as i,jsxs as J}from"react/jsx-runtime";var x=M(null);function N(){let t=$(x);return E(t,"AlertDialog child component used outside of AlertDialog parent!"),t}function h({priority:t,...e}){let o=q(()=>({priority:t}),[t]);return i(x.Provider,{value:o,children:i(y,{...e})})}h.displayName="AlertDialog";var R=A;R.displayName="AlertDialogTrigger";var b=u;b.displayName="AlertDialogPortal";var W=n(({className:t,...e},o)=>i(D,{className:a("data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs",t),...e,ref:o}));W.displayName="AlertDialogOverlay";var I=n(({className:t,onInteractOutside:e,onPointerDownOutside:o,preferredWidth:l="max-w-md",...r},p)=>J(b,{children:[i(W,{}),i("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:i(C,{ref:p,className:a("flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start","outline-hidden focus-within:outline-hidden","p-6","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",l,t),onInteractOutside:s=>{c(s),e?.(s)},onPointerDownOutside:s=>{c(s),o?.(s)},...r})})]}));I.displayName="AlertDialogContent";var O=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex-1 space-y-4",e),ref:l,...o}));O.displayName="AlertDialogBody";var w=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col space-y-2 text-center sm:text-start",e),...o}));w.displayName="AlertDialogHeader";var B=n(({asChild:t=!1,className:e,...o},l)=>i(t?f:"div",{className:a("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",e),...o}));B.displayName="AlertDialogFooter";var T=n(({className:t,...e},o)=>i(P,{ref:o,className:a("text-strong text-center text-lg font-medium sm:text-start",t),...e}));T.displayName="AlertDialogTitle";var z=n(({className:t,...e},o)=>i(v,{ref:o,className:a("text-body text-center text-sm font-normal sm:text-start",t),...e}));z.displayName="AlertDialogDescription";var S=n(({appearance:t="filled",...e},o)=>{let l=N(),r="default";return l.priority==="danger"&&(r="danger"),i(m,{appearance:t,priority:r,ref:o,...e})});S.displayName="AlertDialogAction";var j=n(({appearance:t="outlined",className:e,priority:o="neutral",...l},r)=>i(d,{asChild:!0,children:i(m,{appearance:t,className:a("mt-2 sm:mt-0",e),priority:o,ref:r,...l})}));j.displayName="AlertDialogCancel";var V=n(({className:t,svg:e,...o},l)=>{let r=N(),p=r.priority==="danger"?"text-danger-600":"text-accent-600",s=r.priority==="danger"?i(k,{}):i(H,{});return i(g,{ref:l,className:a("size-12 sm:size-7",p,t),svg:e??s,...o})});V.displayName="AlertDialogIcon";var F=d;F.displayName="AlertDialogClose";var G={Root:h,Action:S,Body:O,Cancel:j,Close:F,Content:I,Description:z,Footer:B,Header:w,Icon:V,Title:T,Trigger:R};export{G as AlertDialog};
 //# sourceMappingURL=alert-dialog.js.map

package/dist/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tButton,\n\ttype ButtonPriority,\n\ttype ButtonProps,\n} from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(\n\t\tcontext,\n\t\t\"AlertDialog child component used outside of AlertDialog parent!\",\n\t);\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(\n\t\t() => ({ priority }),\n\t\t[priority],\n\t);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-md\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t),\n);\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"flex-1 space-y-4\", className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex flex-col space-y-2 text-center sm:text-start\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong text-center text-lg font-medium sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-body text-center text-sm font-normal sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor =\n\t\t\tctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon =\n\t\t\tctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n *   <AlertDialog.Action\n *     type=\"button\"\n *     onClick={() => doThing()}\n *   >\n *     Do thing and close\n *   </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Alert Dialog\n\t *     </Button>\n\t *   </AlertDialog.Trigger>\n\t *   <AlertDialog.Content>\n\t *     <AlertDialog.Icon />\n\t *     <AlertDialog.Body>\n\t *       <AlertDialog.Header>\n\t *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t *   <AlertDialog.Action\n\t *     type=\"button\"\n\t *     onClick={() => doThing()}\n\t *   >\n\t *     Do thing and close\n\t *   </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t *   <Button type=\"button\" appearance=\"outlined\">\n\t *     Show Alert Dialog\n\t *   </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"uZAEA,OAAS,YAAAA,MAAgB,6BACzB,OAAS,eAAAC,MAAmB,gCAC5B,OAAS,QAAAC,MAAY,uBACrB,OAKC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,WAAAC,MACM,QACP,OAAOC,MAAe,iBAoFnB,cAAAC,EAyID,QAAAC,MAzIC,oBAhEH,IAAMC,EAAqBC,EAA8C,IAAI,EAE7E,SAASC,GAAwB,CAChC,IAAMC,EAAUC,EAAWJ,CAAkB,EAC7C,OAAAK,EACCF,EACA,iEACD,EACOA,CACR,CA+CA,SAASG,EAAK,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAqB,CACvD,IAAML,EAAmCM,EACxC,KAAO,CAAE,SAAAF,CAAS,GAClB,CAACA,CAAQ,CACV,EAEA,OACCG,EAACV,EAAmB,SAAnB,CAA4B,MAAOG,EACnC,SAAAO,EAAsBJ,EAArB,CAA2B,GAAGE,EAAO,EACvC,CAEF,CACAF,EAAK,YAAc,cAqCnB,IAAMK,EAA+BA,EACrCA,EAAQ,YAAc,qBAOtB,IAAMC,EAAyCC,EAC/CD,EAAkB,YAAc,oBAOhC,IAAME,EAAqBC,EAGzB,CAAC,CAAE,UAAAC,EAAW,GAAGR,CAAM,EAAGS,IAC3BP,EAAsBQ,EAArB,CACA,UAAWC,EACV,iKACAH,CACD,EACC,GAAGR,EACJ,IAAKS,EACN,CACA,EACDH,EAAmB,YAAc,qBAqDjC,IAAMM,EAAUL,EAIf,CACC,CACC,UAAAC,EACA,kBAAAK,EACA,qBAAAC,EACA,eAAAC,EAAiB,WACjB,GAAGf,CACJ,EACAS,IAEAO,EAACZ,EAAA,CACA,UAAAF,EAACI,EAAA,EAAmB,EACpBJ,EAAC,OAAI,UAAU,sDACd,SAAAA,EAAsBU,EAArB,CACA,IAAKH,EACL,UAAWE,EACV,4EACA,6CACA,MACA,wFACA,2KACAI,EACAP,CACD,EACA,kBAAoBS,GAAU,CAC7BC,EAAgCD,CAAK,EACrCJ,IAAoBI,CAAK,CAC1B,EACA,qBAAuBA,GAAU,CAChCC,EAAgCD,CAAK,EACrCH,IAAuBG,CAAK,CAC7B,EACC,GAAGjB,EACL,EACD,GACD,CAEF,EACAY,EAAQ,YAAc,qBAqCtB,IAAMO,EAAOZ,EAGX,CAAC,CAAE,QAAAa,EAAU,GAAO,UAAAZ,EAAW,GAAGR,CAAM,EAAGS,IAI3CP,EAHiBkB,EAAUC,EAAO,MAGjC,CACA,UAAWV,EAAG,mBAAoBH,CAAS,EAC3C,IAAKC,EACJ,GAAGT,EACL,CAED,EACDmB,EAAK,YAAc,kBAqCnB,IAAMG,EAASf,EAGb,CAAC,CAAE,QAAAa,EAAU,GAAO,UAAAZ,EAAW,GAAGR,CAAM,EAAGS,IAI3CP,EAHiBkB,EAAUC,EAAO,MAGjC,CACA,UAAWV,EACV,oDACAH,CACD,EACC,GAAGR,EACL,CAED,EACDsB,EAAO,YAAc,oBAqCrB,IAAMC,EAAShB,EAGb,CAAC,CAAE,QAAAa,EAAU,GAAO,UAAAZ,EAAW,GAAGR,CAAM,EAAGS,IAI3CP,EAHiBkB,EAAUC,EAAO,MAGjC,CACA,UAAWV,EACV,gEACAH,CACD,EACC,GAAGR,EACL,CAED,EACDuB,EAAO,YAAc,oBAwCrB,IAAMC,EAAQjB,EAGZ,CAAC,CAAE,UAAAC,EAAW,GAAGR,CAAM,EAAGS,IAC3BP,EAAsBsB,EAArB,CACA,IAAKf,EACL,UAAWE,EACV,4DACAH,CACD,EACC,GAAGR,EACL,CACA,EACDwB,EAAM,YAAc,mBA0CpB,IAAMC,EAAclB,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGR,CAAM,EAAGS,IAC3BP,EAAsBuB,EAArB,CACA,IAAKhB,EACL,UAAWE,EACV,0DACAH,CACD,EACC,GAAGR,EACL,CACA,EACDyB,EAAY,YAAc,yBA2C1B,IAAMC,EAASnB,EACd,CACC,CAEC,WAAAoB,EAAa,SACb,GAAG3B,CACJ,EACAS,IACI,CACJ,IAAMmB,EAAMlC,EAAsB,EAC9BmC,EAA8C,UAClD,OAAID,EAAI,WAAa,WACpBC,EAAiB,UAIjB3B,EAAC4B,EAAA,CAEA,WAAYH,EACZ,SAAUE,EACV,IAAKpB,EACJ,GAAGT,EACL,CAEF,CACD,EACA0B,EAAO,YAAc,oBA0CrB,IAAMK,EAASxB,EACd,CACC,CAEC,WAAAoB,EAAa,WACb,UAAAnB,EACA,SAAAT,EAAW,UACX,GAAGC,CACJ,EACAS,IAEAP,EAAsB8B,EAArB,CAA2B,QAAO,GAClC,SAAA9B,EAAC4B,EAAA,CACA,WAAYH,EACZ,UAAWhB,EAAG,eAAgBH,CAAS,EACvC,SAAUT,EACV,IAAKU,EACJ,GAAGT,EACL,EACD,CAEF,EACA+B,EAAO,YAAc,oBA8CrB,IAAME,EAAO1B,EACZ,CAAC,CAAE,UAAAC,EAAW,IAAA0B,EAAK,GAAGlC,CAAM,EAAGS,IAAQ,CACtC,IAAMmB,EAAMlC,EAAsB,EAC5ByC,EACLP,EAAI,WAAa,SAAW,kBAAoB,kBAC3CQ,EACLR,EAAI,WAAa,SAAW1B,EAACmC,EAAA,EAAY,EAAKnC,EAACoC,EAAA,EAAS,EAEzD,OACCpC,EAACqC,EAAA,CACA,IAAK9B,EACL,UAAWE,EAAG,oBAAqBwB,EAAc3B,CAAS,EAC1D,IAAK0B,GAAOE,EACX,GAAGpC,EACL,CAEF,CACD,EACAiC,EAAK,YAAc,kBAkBnB,IAAMD,EAA6BA,EACnCA,EAAM,YAAc,mBAsCpB,IAAMQ,EAAc,CA8BnB,KAAA1C,EAcA,OAAA4B,EAuBA,KAAAP,EAcA,OAAAY,EAkBA,MAAAC,EAuBA,QAAApB,EAcA,YAAAa,EAcA,OAAAF,EAcA,OAAAD,EAmBA,KAAAW,EAcA,MAAAT,EAeA,QAAArB,CACD","names":["InfoIcon","WarningIcon","Slot","createContext","forwardRef","useContext","useMemo","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","Root","priority","props","useMemo","jsx","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","Content","onInteractOutside","onPointerDownOutside","preferredWidth","jsxs","event","preventCloseOnPromptInteraction","Body","asChild","Slot","Header","Footer","Title","Description","Action","appearance","ctx","buttonPriority","Button","Cancel","Close","Icon","svg","defaultColor","defaultIcon","WarningIcon","InfoIcon","SvgOnly","AlertDialog"]}
+{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tButton,\n\ttype ButtonPriority,\n\ttype ButtonProps,\n} from \"../button/button.js\";\nimport * as AlertDialogPrimitive from \"../dialog/primitive.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { preventCloseOnPromptInteraction } from \"../toast/toast.js\";\n\nconst priorities = [\"info\", \"danger\"] as const;\ntype Priority = (typeof priorities)[number];\n\ntype AlertDialogContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertDialogContext = createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialogContext() {\n\tconst context = useContext(AlertDialogContext);\n\tinvariant(\n\t\tcontext,\n\t\t\"AlertDialog child component used outside of AlertDialog parent!\",\n\t);\n\treturn context;\n}\n\ntype AlertDialogProps = ComponentProps<typeof AlertDialogPrimitive.Root> & {\n\t/**\n\t * Indicates the importance or impact level of the AlertDialog, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n};\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n * The root stateful component for the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nfunction Root({ priority, ...props }: AlertDialogProps) {\n\tconst context: AlertDialogContextValue = useMemo(\n\t\t() => ({ priority }),\n\t\t[priority],\n\t);\n\n\treturn (\n\t\t<AlertDialogContext.Provider value={context}>\n\t\t\t<AlertDialogPrimitive.Root {...props} />\n\t\t</AlertDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"AlertDialog\";\n\n/**\n * A button that opens the Alert Dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Trigger = AlertDialogPrimitive.Trigger;\nTrigger.displayName = \"AlertDialogTrigger\";\n\n/**\n * The portal for the Alert Dialog.\n *\n * @private\n */\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\n\n/**\n * A layer that covers the inert portion of the view when the dialog is open.\n *\n * @private\n */\nconst AlertDialogOverlay = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Overlay>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay\n\t\tclassName={cx(\n\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 bg-overlay fixed inset-0 z-50 backdrop-blur-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t\tref={ref}\n\t/>\n));\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\n\ntype AlertDialogContentProps = ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `AlertDialogContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `AlertDialog`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `AlertDialogContent`\n\t *\n\t * @default `max-w-md`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The popover alert dialog container.\n *\n * Renders on top of the overlay and is centered in the viewport.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tonInteractOutside,\n\t\t\tonPointerDownOutside,\n\t\t\tpreferredWidth = \"max-w-md\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex w-full flex-1 flex-col items-center gap-4 sm:flex-row sm:items-start\",\n\t\t\t\t\t\t\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\t\t\t\t\t\t\"data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\t\tpreferredWidth,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tonInteractOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonInteractOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\tonPointerDownOutside={(event) => {\n\t\t\t\t\t\tpreventCloseOnPromptInteraction(event);\n\t\t\t\t\t\tonPointerDownOutside?.(event);\n\t\t\t\t\t}}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t),\n);\nContent.displayName = \"AlertDialogContent\";\n\n/**\n * Contains the main content of the alert dialog.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"flex-1 space-y-4\", className)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nBody.displayName = \"AlertDialogBody\";\n\n/**\n * Contains the header content of the dialog, including the title and description.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex flex-col space-y-2 text-center sm:text-start\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nHeader.displayName = \"AlertDialogHeader\";\n\n/**\n * Contains the footer content of the dialog, including the action and cancel buttons.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Footer = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nFooter.displayName = \"AlertDialogFooter\";\n\n/**\n * An accessible name to be announced when the dialog is opened.\n *\n * Alternatively, you can provide `aria-label` or `aria-labelledby` to\n * `AlertDialogContent` and exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Title = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Title>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong text-center text-lg font-medium sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTitle.displayName = \"AlertDialogTitle\";\n\n/**\n * An accessible description to be announced when the dialog is opened.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * Alternatively, you can provide `aria-describedby` to `AlertDialogContent` and\n * exclude this component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Description = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Description>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-body text-center text-sm font-normal sm:text-start\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDescription.displayName = \"AlertDialogDescription\";\n\n/**\n * A button that confirms the Alert Dialog action.\n * Will default to appearance=\"filled\", as well as the priority color from the `AlertDialog`.\n * Does not close the alert dialog by default.\n *\n * These buttons should be distinguished visually from the AlertDialogCancel button.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Action = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"filled\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tlet buttonPriority: NonNullable<ButtonPriority> = \"default\";\n\t\tif (ctx.priority === \"danger\") {\n\t\t\tbuttonPriority = \"danger\";\n\t\t}\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\t//\n\t\t\t\tappearance={appearance}\n\t\t\t\tpriority={buttonPriority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nAction.displayName = \"AlertDialogAction\";\n\n/**\n * A button that closes the dialog and cancels the action.\n * Will default to appearance=\"outlined\" and priority=\"neutral\".\n *\n * This button should be distinguished visually from AlertDialogAction buttons.\n *\n * Composes around the mantle Button component.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Cancel = forwardRef<ComponentRef<\"button\">, ButtonProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\tappearance = \"outlined\",\n\t\t\tclassName,\n\t\t\tpriority = \"neutral\",\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<AlertDialogPrimitive.Close asChild>\n\t\t\t<Button\n\t\t\t\tappearance={appearance}\n\t\t\t\tclassName={cx(\"mt-2 sm:mt-0\", className)}\n\t\t\t\tpriority={priority}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</AlertDialogPrimitive.Close>\n\t),\n);\nCancel.displayName = \"AlertDialogCancel\";\n\ntype AlertDialogIconProps = Omit<SvgAttributes, \"children\"> & {\n\tsvg?: ReactNode;\n};\n\n/**\n * An icon that visually represents the priority of the AlertDialog.\n *\n * Defaults to a warning icon for danger priority and an info icon for info\n * priority with the appropriate color.\n *\n * Can be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertDialogIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertDialogContext();\n\t\tconst defaultColor =\n\t\t\tctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon =\n\t\t\tctx.priority === \"danger\" ? <WarningIcon /> : <InfoIcon />;\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"size-12 sm:size-7\", defaultColor, className)}\n\t\t\t\tsvg={svg ?? defaultIcon}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nIcon.displayName = \"AlertDialogIcon\";\n\n/**\n * A button that closes the Alert Dialog. (Unstyled)\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close\n *\n * @example\n * ```tsx\n * <AlertDialog.Close asChild>\n *   <AlertDialog.Action\n *     type=\"button\"\n *     onClick={() => doThing()}\n *   >\n *     Do thing and close\n *   </AlertDialog.Action>\n * </AlertDialog.Close>\n */\nconst Close = AlertDialogPrimitive.Close;\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * ```tsx\n * <AlertDialog.Root priority=\"danger\">\n *   <AlertDialog.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Show Danger Alert Dialog\n *     </Button>\n *   </AlertDialog.Trigger>\n *   <AlertDialog.Content>\n *     <AlertDialog.Icon />\n *     <AlertDialog.Body>\n *       <AlertDialog.Header>\n *         <AlertDialog.Title>\n *           Are you absolutely sure?\n *         </AlertDialog.Title>\n *         <AlertDialog.Description>\n *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n *         </AlertDialog.Description>\n *       </AlertDialog.Header>\n *       <AlertDialog.Footer>\n *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n *         <AlertDialog.Action type=\"button\">\n *           Continue\n *         </AlertDialog.Action>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst AlertDialog = {\n\t/**\n\t * A modal dialog that interrupts the user with important content and expects a response.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Alert Dialog\n\t *     </Button>\n\t *   </AlertDialog.Trigger>\n\t *   <AlertDialog.Content>\n\t *     <AlertDialog.Icon />\n\t *     <AlertDialog.Body>\n\t *       <AlertDialog.Header>\n\t *         <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *         <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A button that confirms the Alert Dialog action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-action\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-cancel\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled)\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Close asChild>\n\t *   <AlertDialog.Action\n\t *     type=\"button\"\n\t *     onClick={() => doThing()}\n\t *   >\n\t *     Do thing and close\n\t *   </AlertDialog.Action>\n\t * </AlertDialog.Close>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *     <AlertDialog.Footer>\n\t *       <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *       <AlertDialog.Action>Continue</AlertDialog.Action>\n\t *     </AlertDialog.Footer>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-description\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and cancel buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Footer>\n\t *   <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>\n\t *   <AlertDialog.Action>Continue</AlertDialog.Action>\n\t * </AlertDialog.Footer>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and description.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Content>\n\t *   <AlertDialog.Icon />\n\t *   <AlertDialog.Body>\n\t *     <AlertDialog.Header>\n\t *       <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *       <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t *     </AlertDialog.Header>\n\t *   </AlertDialog.Body>\n\t * </AlertDialog.Content>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Header>\n\t *   <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>\n\t *   <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>\n\t * </AlertDialog.Header>\n\t * ```\n\t */\n\tTitle,\n\t/**\n\t * A button that opens the Alert Dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#api-alert-dialog-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <AlertDialog.Trigger asChild>\n\t *   <Button type=\"button\" appearance=\"outlined\">\n\t *     Show Alert Dialog\n\t *   </Button>\n\t * </AlertDialog.Trigger>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tAlertDialog,\n};\n"],"mappings":"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","names":["InfoIcon","WarningIcon","Slot","createContext","forwardRef","useContext","useMemo","invariant","jsx","jsxs","AlertDialogContext","createContext","useAlertDialogContext","context","useContext","invariant","Root","priority","props","useMemo","jsx","Trigger","AlertDialogPortal","Portal","AlertDialogOverlay","forwardRef","className","ref","Overlay","cx","Content","onInteractOutside","onPointerDownOutside","preferredWidth","jsxs","event","preventCloseOnPromptInteraction","Body","asChild","Slot","Header","Footer","Title","Description","Action","appearance","ctx","buttonPriority","Button","Cancel","Close","Icon","svg","defaultColor","defaultIcon","WarningIcon","InfoIcon","SvgOnly","AlertDialog"]}

package/dist/browser-only.d.ts

@@ -38,5 +38,22 @@ type Props = {
  * @see useIsHydrated
  */
 declare function BrowserOnly({ children, fallback }: Props): ReactNode;
+/**
+ * Detects whether DOM APIs are available.
+ *
+ * @description
+ * Returns `true` when running in a windowed browser context where both
+ * `window` and a real `document` exist. This will be `false` in SSR/Node.
+ *
+ * Note: Test environments that provide a DOM shim (e.g. JSDOM) will return `true`.
+ *
+ * @returns {boolean} `true` if DOM APIs are available; otherwise `false`.
+ *
+ * @example
+ * if (canUseDOM()) {
+ *   localStorage.setItem("foo", "bar");
+ * }
+ */
+declare function canUseDOM(): boolean;
 
-export { BrowserOnly };
+export { BrowserOnly, canUseDOM };

package/dist/browser-only.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-KMNACVH6.js";function t({children:e,fallback:o=null}){return r()?e():o}export{t as BrowserOnly};
+import{a as r,b as e}from"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";export{r as BrowserOnly,e as canUseDOM};
 //# sourceMappingURL=browser-only.js.map

package/dist/browser-only.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n *   the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n *   {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\nexport {\n\t//,\n\tBrowserOnly,\n};\n"],"mappings":"wCAyCA,SAASA,EAAY,CAAE,SAAAC,EAAU,SAAAC,EAAW,IAAK,EAAU,CAC1D,OAAOC,EAAc,EAAIF,EAAS,EAAIC,CACvC","names":["BrowserOnly","children","fallback","useIsHydrated"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-4CLIEHH3.js

@@ -0,0 +1,2 @@
+import{a as $}from"./chunk-6J7D73WA.js";import{b as T}from"./chunk-NJNFZ2EG.js";import{a as A}from"./chunk-AZ56JGNY.js";import{Fragment as K,jsx as g,jsxs as V}from"react/jsx-runtime";var Q="https://assets.ngrok.com",X=`${Q}/fonts`,Z=["/euclid-square/EuclidSquare-Regular-WebS.woff","/euclid-square/EuclidSquare-RegularItalic-WebS.woff","/euclid-square/EuclidSquare-Medium-WebS.woff","/euclid-square/EuclidSquare-Semibold-WebS.woff","/euclid-square/EuclidSquare-MediumItalic-WebS.woff","/ibm-plex-mono/IBMPlexMono-Text.woff","/ibm-plex-mono/IBMPlexMono-TextItalic.woff","/ibm-plex-mono/IBMPlexMono-SemiBold.woff","/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff"],j=e=>`${X}${e}`,I=({includeNunitoSans:e=!1})=>V(K,{children:[g("link",{rel:"preconnect",href:Q}),Z.map(t=>g("link",{rel:"preload",href:j(t),as:"font",type:"font/woff",crossOrigin:"anonymous"},t)),e&&g(ee,{})]});I.displayName="PreloadFonts";function ee(){return V(K,{children:[g("link",{rel:"preconnect",href:"https://fonts.googleapis.com"}),g("link",{rel:"preconnect",href:"https://fonts.gstatic.com",crossOrigin:"anonymous"}),g("link",{href:"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap",rel:"stylesheet"})]})}var w=["light","dark","light-high-contrast","dark-high-contrast"],F=["system",...w],ve=e=>e;function C(e){return typeof e!="string"?!1:F.includes(e)}var ke=e=>e;function L(e){return typeof e!="string"?!1:w.includes(e)}import{createContext as te,useContext as Y,useEffect as oe,useMemo as G,useRef as ne,useState as se}from"react";import re from"tiny-invariant";import{Fragment as fe,jsx as W,jsxs as Te}from"react/jsx-runtime";var S="(prefers-color-scheme: dark)",b="(prefers-contrast: more)",y="mantle-ui-theme",M="system",ie=["system",()=>null],q=te(ie);function ae({children:e}){let[t,n]=se(()=>{let o=N({cookie:T()?document.cookie:null});return D(o),o}),s=ne(null);oe(()=>{function o(c){let m=c??N({cookie:document.cookie});n(m),D(m)}o();try{"BroadcastChannel"in window&&(s.current=new BroadcastChannel(y),s.current.onmessage=c=>{let m=c?.data?.theme;C(m)&&o(m)})}catch{}function u(c){c.key===`${y}__ping`&&o()}window.addEventListener("storage",u);let a=window.matchMedia(S),p=window.matchMedia(b);function h(){o()}function v(){document.visibilityState==="visible"&&o()}return a.addEventListener("change",h),p.addEventListener("change",h),window.addEventListener("pageshow",h),document.addEventListener("visibilitychange",v),()=>{window.removeEventListener("storage",u),a.removeEventListener("change",h),p.removeEventListener("change",h),window.removeEventListener("pageshow",h),document.removeEventListener("visibilitychange",v);try{s.current?.close()}catch{}s.current=null}},[]);let i=G(()=>[t,o=>{pe(o),n(o),D(o),de(o,{broadcastChannel:s.current,pingKey:`${y}__ping`})}],[t]);return W(q.Provider,{value:i,children:e})}ae.displayName="ThemeProvider";function He(){let e=Y(q);return re(e,"useTheme must be used within a ThemeProvider"),e}function D(e){if(!T())return;let t=window.document.documentElement,n=window.matchMedia(S).matches,s=window.matchMedia(b).matches,i=O(e,{prefersDarkMode:n,prefersHighContrast:s}),o=t.dataset.theme,u=t.dataset.appliedTheme,a=C(o)?o:void 0,p=L(u)?u:void 0;a===e&&p===i||(t.classList.remove(...w),t.classList.add(i),t.dataset.theme=e,t.dataset.appliedTheme=i)}function Re(){if(!T())return{appliedTheme:void 0,theme:void 0};let e=window.document.documentElement,t=C(e.dataset.theme)?e.dataset.theme:void 0;return{appliedTheme:L(e.dataset.appliedTheme)?e.dataset.appliedTheme:void 0,theme:t}}function O(e,{prefersDarkMode:t,prefersHighContrast:n}){return e==="system"?me({prefersDarkMode:t,prefersHighContrast:n}):e}function _e(){let e=Y(q),t=e!=null?e[0]:"system",n=$(S),s=$(b);return O(t,{prefersDarkMode:n,prefersHighContrast:s})}function me({prefersDarkMode:e,prefersHighContrast:t}){return t?e?"dark-high-contrast":"light-high-contrast":e?"dark":"light"}function ce(e){let{storageKey:t,defaultTheme:n,themes:s,resolvedThemes:i,prefersDarkModeMediaQuery:o,prefersHighContrastMediaQuery:u}=e;function a(r){return typeof r=="string"&&s.includes(r)}function p(r){let l=document.cookie;if(!l)return null;try{let x=l.split(";").find(_=>_.trim().startsWith(`${r}=`))?.split("=")[1];return x?decodeURIComponent(x):null}catch{return null}}function h(r,l){let d=new Date;d.setFullYear(d.getFullYear()+1);let R=location.hostname,x=location.protocol,U=R==="ngrok.com"||R.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",_=x==="https:"?"; Secure":"";return`${r}=${encodeURIComponent(l)}; expires=${d.toUTCString()}; path=/${U}; SameSite=Lax${_}`}function v(r,l){try{document.cookie=h(r,l)}catch{}}function c(r,l,d){return r==="system"?d?l?"dark-high-contrast":"light-high-contrast":l?"dark":"light":r}let m=null,k=null,P=null;try{m=p(t)}catch{}if(a(m))P=m;else{try{k=window.localStorage?.getItem(t)??null}catch{}a(k)&&(P=k)}let E=a(P)?P:n,J=matchMedia(o).matches,z=matchMedia(u).matches,H=c(E,J,z),f=document.documentElement;if(f.dataset.appliedTheme!==H||f.dataset.theme!==E){for(let r of i)f.classList.remove(r);f.classList.add(H),f.dataset.theme=E,f.dataset.appliedTheme=H}let B=a(m);try{if(a(k)&&!B){v(t,k);try{window.localStorage.removeItem(t)}catch{}}else B||v(t,E)}catch{}}function le(){let e={storageKey:y,defaultTheme:M,themes:F,resolvedThemes:w,prefersDarkModeMediaQuery:S,prefersHighContrastMediaQuery:b};return`(${ce.toString()})(${JSON.stringify(e)})`}var he=({includeNunitoSans:e=!1,nonce:t})=>Te(fe,{children:[W("script",{dangerouslySetInnerHTML:{__html:le()},nonce:t,suppressHydrationWarning:!0}),W(I,{includeNunitoSans:e})]});he.displayName="MantleThemeHeadContent";function $e(e={}){let{className:t=""}=e??{};return G(()=>{let n,s;if(!T())n=M,s="light";else{let i=window.matchMedia(S).matches,o=window.matchMedia(b).matches;n=N({cookie:document.cookie}),s=O(n,{prefersDarkMode:i,prefersHighContrast:o})}return{className:A(t,s),"data-applied-theme":s,"data-theme":n}},[t])}function N({cookie:e}){if(!e)return M;try{let s=e.split(";").find(o=>o.trim().startsWith(`${y}=`))?.split("=")[1],i=s?globalThis.decodeURIComponent(s):null;return C(i)?i:M}catch{return M}}function de(e,t){let{broadcastChannel:n,pingKey:s}=t;try{if(n){n.postMessage({theme:e,timestamp:Date.now()});return}}catch{}try{localStorage.setItem(s,JSON.stringify({theme:e,timestamp:Date.now()}))}catch{}}function ue(e){let t=new Date;t.setFullYear(t.getFullYear()+1);let{hostname:n,protocol:s}=window.location,i=n==="ngrok.com"||n.endsWith(".ngrok.com")?"; domain=.ngrok.com":"",o=s==="https:"?"; Secure":"";return`${y}=${encodeURIComponent(e)}; expires=${t.toUTCString()}; path=/${i}; SameSite=Lax${o}`}function pe(e){if(T())try{document.cookie=ue(e)}catch{}}export{I as a,w as b,F as c,ve as d,C as e,ke as f,L as g,ae as h,He as i,Re as j,_e as k,le as l,he as m,$e as n,N as o};
+//# sourceMappingURL=chunk-4CLIEHH3.js.map

package/dist/chunk-4CLIEHH3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme/preload-fonts.tsx","../src/components/theme/themes.ts","../src/components/theme/theme-provider.tsx"],"sourcesContent":["const cdnOrigin = \"https://assets.ngrok.com\";\nconst cdnBase = `${cdnOrigin}/fonts`;\n\nconst fonts = [\n\t\"/euclid-square/EuclidSquare-Regular-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-RegularItalic-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Medium-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-Semibold-WebS.woff\",\n\t\"/euclid-square/EuclidSquare-MediumItalic-WebS.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-Text.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-TextItalic.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBold.woff\",\n\t\"/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff\",\n] as const;\n\ntype Font = (typeof fonts)[number];\n\nconst fontHref = <T extends Font = Font>(font: T) =>\n\t`${cdnBase}${font}` as const;\n\ntype Props = {\n\t/**\n\t * If set, will also preload and include the optional Nunito Sans font from Google Fonts.\n\t * @default false\n\t */\n\tincludeNunitoSans?: boolean;\n};\n\n/**\n * Preload custom fonts used in the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-preload-fonts\n *\n * @example\n * ```tsx\n * <PreloadFonts includeNunitoSans />\n * ```\n */\nconst PreloadFonts = ({ includeNunitoSans = false }: Props) => (\n\t<>\n\t\t<link rel=\"preconnect\" href={cdnOrigin} />\n\t\t{fonts.map((font) => (\n\t\t\t<link\n\t\t\t\tkey={font}\n\t\t\t\trel=\"preload\"\n\t\t\t\thref={fontHref(font)}\n\t\t\t\tas=\"font\"\n\t\t\t\ttype=\"font/woff\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t))}\n\t\t{includeNunitoSans && <NunitoSans />}\n\t</>\n);\nPreloadFonts.displayName = \"PreloadFonts\";\n\nexport {\n\t//,\n\tPreloadFonts,\n};\n\nfunction NunitoSans() {\n\treturn (\n\t\t<>\n\t\t\t<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n\t\t\t<link\n\t\t\t\trel=\"preconnect\"\n\t\t\t\thref=\"https://fonts.gstatic.com\"\n\t\t\t\tcrossOrigin=\"anonymous\"\n\t\t\t/>\n\t\t\t<link\n\t\t\t\thref=\"https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap\"\n\t\t\t\trel=\"stylesheet\"\n\t\t\t/>\n\t\t</>\n\t);\n}\n","/**\n * resolvedThemes is a tuple of valid themes that have been resolved from \"system\" to a specific theme.\n */\nconst resolvedThemes = [\n\t\"light\",\n\t\"dark\",\n\t\"light-high-contrast\",\n\t\"dark-high-contrast\",\n] as const;\n\n/**\n * ResolvedTheme is a type that represents a theme that has been resolved from \"system\" to a specific theme.\n */\ntype ResolvedTheme = (typeof resolvedThemes)[number];\n\n/**\n * themes is a tuple of valid themes.\n */\nconst themes = [\"system\", ...resolvedThemes] as const;\n\n/**\n * Theme is a string literal type that represents a valid theme.\n */\ntype Theme = (typeof themes)[number];\n\n/**\n * $theme is a helper which translates the Theme type into a string literal type.\n */\nconst $theme = <T extends Theme = Theme>(value: T) => value;\n\n/**\n * Type predicate that checks if a value is a valid theme.\n */\nfunction isTheme(value: unknown): value is Theme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn themes.includes(value as Theme);\n}\n\n/**\n * $resolvedTheme is a helper which translates the ResolvedTheme type into a string literal type.\n */\nconst $resolvedTheme = <T extends ResolvedTheme = ResolvedTheme>(value: T) =>\n\tvalue;\n\n/**\n * Type predicate that checks if a value is a valid resolved theme.\n */\nfunction isResolvedTheme(value: unknown): value is ResolvedTheme {\n\tif (typeof value !== \"string\") {\n\t\treturn false;\n\t}\n\n\treturn resolvedThemes.includes(value as ResolvedTheme);\n}\n\nexport {\n\t//,\n\tthemes,\n\tresolvedThemes,\n\t$resolvedTheme,\n\t$theme,\n\tisResolvedTheme,\n\tisTheme,\n};\n\nexport type {\n\t//,\n\tTheme,\n\tResolvedTheme,\n};\n","\"use client\";\n\nimport type { ComponentProps, PropsWithChildren } from \"react\";\nimport {\n\tcreateContext,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { useMatchesMediaQuery } from \"../../hooks/use-matches-media-query.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { canUseDOM } from \"../browser-only/browser-only.js\";\nimport { PreloadFonts } from \"./preload-fonts.js\";\nimport {\n\ttype ResolvedTheme,\n\ttype Theme,\n\tisResolvedTheme,\n\tisTheme,\n\tresolvedThemes,\n\tthemes,\n} from \"./themes.js\";\n\n/**\n * prefersDarkModeMediaQuery is the media query used to detect if the user prefers dark mode.\n */\nconst prefersDarkModeMediaQuery = \"(prefers-color-scheme: dark)\";\n\n/**\n * prefersHighContrastMediaQuery is the media query used to detect if the user prefers high contrast mode.\n */\nconst prefersHighContrastMediaQuery = \"(prefers-contrast: more)\";\n\n/**\n * THEME_STORAGE_KEY is the key used to store the theme in cookies.\n */\nconst THEME_STORAGE_KEY = \"mantle-ui-theme\";\n\n/**\n * DEFAULT_THEME is the initial theme to apply if no value is found in storage.\n * {@link themes}\n */\nconst DEFAULT_THEME = \"system\" satisfies Theme;\n\n/**\n * ThemeProviderState is the shape of the state returned by the ThemeProviderContext.\n */\ntype ThemeProviderState = [theme: Theme, setTheme: (theme: Theme) => void];\n\n/**\n * Initial state for the ThemeProviderContext.\n */\nconst initialState: ThemeProviderState = [\"system\", () => null];\n\n/**\n * ThemeProviderContext is a React Context that provides the current theme and a function to set the theme.\n */\nconst ThemeProviderContext = createContext<ThemeProviderState | null>(\n\tinitialState,\n);\n\ntype ThemeProviderProps = PropsWithChildren;\n\n/**\n * ThemeProvider is a React Context Provider that provides the current theme and a function to set the theme.\n *\n * @see https://mantle.ngrok.com/components/theme-provider#api-theme-provider\n *\n * @example\n * ```tsx\n * <ThemeProvider defaultTheme=\"system\" storageKey=\"app-theme\">\n *   <App />\n * </ThemeProvider>\n * ```\n */\nfunction ThemeProvider({ children }: ThemeProviderProps) {\n\t// Init once from cookie and apply immediately to avoid flashes\n\tconst [theme, setTheme] = useState<Theme>(() => {\n\t\tconst storedTheme = getStoredTheme({\n\t\t\tcookie: canUseDOM() ? document.cookie : null,\n\t\t});\n\t\tapplyThemeToHtml(storedTheme);\n\t\treturn storedTheme;\n\t});\n\n\tconst broadcastChannelRef = useRef<BroadcastChannel | null>(null);\n\n\tuseEffect(() => {\n\t\tfunction syncThemeFromCookie(next?: Theme) {\n\t\t\tconst newTheme = next ?? getStoredTheme({ cookie: document.cookie });\n\t\t\tsetTheme(newTheme);\n\t\t\tapplyThemeToHtml(newTheme);\n\t\t}\n\n\t\t// initial sync in case defaultTheme or storageKey changed\n\t\tsyncThemeFromCookie();\n\n\t\t// add cross-tab listeners (prefer broadcast channel, use localStorage as fallback)\n\t\ttry {\n\t\t\tif (\"BroadcastChannel\" in window) {\n\t\t\t\tbroadcastChannelRef.current = new BroadcastChannel(THEME_STORAGE_KEY);\n\t\t\t\tbroadcastChannelRef.current.onmessage = (event) => {\n\t\t\t\t\tconst value: unknown = event?.data?.theme;\n\t\t\t\t\tif (isTheme(value)) {\n\t\t\t\t\t\tsyncThemeFromCookie(value);\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t}\n\t\t} catch (_) {}\n\n\t\tfunction onStorage(event: StorageEvent) {\n\t\t\tif (event.key === `${THEME_STORAGE_KEY}__ping`) {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\t\twindow.addEventListener(\"storage\", onStorage);\n\n\t\t// add media query listeners for system theme changes\n\t\tconst prefersDarkMql = window.matchMedia(prefersDarkModeMediaQuery);\n\t\tconst prefersHighContrastMql = window.matchMedia(\n\t\t\tprefersHighContrastMediaQuery,\n\t\t);\n\n\t\tfunction onChange() {\n\t\t\tsyncThemeFromCookie();\n\t\t}\n\n\t\tfunction onVisibilityChange() {\n\t\t\tif (document.visibilityState === \"visible\") {\n\t\t\t\tsyncThemeFromCookie();\n\t\t\t}\n\t\t}\n\n\t\tprefersDarkMql.addEventListener(\"change\", onChange);\n\t\tprefersHighContrastMql.addEventListener(\"change\", onChange);\n\n\t\t// pageshow fires on bfcache restore (event.persisted === true) and some restore-from-freeze cases.\n\t\twindow.addEventListener(\"pageshow\", onChange);\n\n\t\t// visibilitychange to handle coming back to a tab\n\t\tdocument.addEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t// don't forget to clean up your slop!\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"storage\", onStorage);\n\t\t\tprefersDarkMql.removeEventListener(\"change\", onChange);\n\t\t\tprefersHighContrastMql.removeEventListener(\"change\", onChange);\n\t\t\twindow.removeEventListener(\"pageshow\", onChange);\n\t\t\tdocument.removeEventListener(\"visibilitychange\", onVisibilityChange);\n\n\t\t\ttry {\n\t\t\t\tbroadcastChannelRef.current?.close();\n\t\t\t} catch (_) {}\n\t\t\tbroadcastChannelRef.current = null;\n\t\t};\n\t}, []);\n\n\tconst value: ThemeProviderState = useMemo(\n\t\t() => [\n\t\t\ttheme,\n\t\t\t(next: Theme) => {\n\t\t\t\tsetCookie(next);\n\t\t\t\tsetTheme(next);\n\t\t\t\tapplyThemeToHtml(next);\n\t\t\t\tnotifyOtherTabs(next, {\n\t\t\t\t\tbroadcastChannel: broadcastChannelRef.current,\n\t\t\t\t\tpingKey: `${THEME_STORAGE_KEY}__ping`,\n\t\t\t\t});\n\t\t\t},\n\t\t],\n\t\t[theme],\n\t);\n\n\treturn (\n\t\t<ThemeProviderContext.Provider value={value}>\n\t\t\t{children}\n\t\t</ThemeProviderContext.Provider>\n\t);\n}\nThemeProvider.displayName = \"ThemeProvider\";\n\n/**\n * useTheme returns the current theme and a function to set the theme.\n *\n * @note This function will throw an error if used outside of a ThemeProvider context tree.\n */\nfunction useTheme() {\n\tconst context = useContext(ThemeProviderContext);\n\n\tinvariant(context, \"useTheme must be used within a ThemeProvider\");\n\n\treturn context;\n}\n\n/**\n * Applies the given theme to the `<html>` element.\n */\nfunction applyThemeToHtml(theme: Theme) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\tconst html = window.document.documentElement;\n\n\tconst prefersDarkMode = window.matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst prefersHighContrast = window.matchMedia(\n\t\tprefersHighContrastMediaQuery,\n\t).matches;\n\n\tconst resolvedTheme = resolveTheme(theme, {\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t});\n\n\tconst htmlTheme = html.dataset.theme;\n\tconst htmlAppliedTheme = html.dataset.appliedTheme;\n\n\tconst currentTheme = isTheme(htmlTheme) ? htmlTheme : undefined;\n\tconst currentResolvedTheme = isResolvedTheme(htmlAppliedTheme)\n\t\t? htmlAppliedTheme\n\t\t: undefined;\n\n\tif (currentTheme === theme && currentResolvedTheme === resolvedTheme) {\n\t\t// nothing to do: input theme and resolved class already match\n\t\treturn;\n\t}\n\n\t// Clear any stale theme class, then apply the new one\n\thtml.classList.remove(...resolvedThemes); // ✅ remove all potential theme classes\n\thtml.classList.add(resolvedTheme);\n\thtml.dataset.theme = theme;\n\thtml.dataset.appliedTheme = resolvedTheme;\n}\n\n/**\n * Read the theme and applied theme from the `<html>` element.\n */\nfunction readThemeFromHtmlElement() {\n\tif (!canUseDOM()) {\n\t\treturn {\n\t\t\tappliedTheme: undefined,\n\t\t\ttheme: undefined,\n\t\t};\n\t}\n\n\tconst htmlElement = window.document.documentElement;\n\tconst theme = isTheme(htmlElement.dataset.theme)\n\t\t? htmlElement.dataset.theme\n\t\t: undefined;\n\tconst appliedTheme = isResolvedTheme(htmlElement.dataset.appliedTheme)\n\t\t? htmlElement.dataset.appliedTheme\n\t\t: undefined;\n\n\treturn {\n\t\tappliedTheme,\n\t\ttheme,\n\t};\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction resolveTheme(\n\ttheme: Theme,\n\t{\n\t\tprefersDarkMode,\n\t\tprefersHighContrast,\n\t}: { prefersDarkMode: boolean; prefersHighContrast: boolean },\n) {\n\tif (theme === \"system\") {\n\t\treturn determineThemeFromMediaQuery({\n\t\t\tprefersDarkMode,\n\t\t\tprefersHighContrast,\n\t\t});\n\t}\n\n\treturn theme;\n}\n\n/**\n * If the theme is \"system\", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.\n * This will mirror the result that gets applied to the <html> element.\n */\nfunction useAppliedTheme() {\n\tconst themeContext = useContext(ThemeProviderContext);\n\tconst theme = themeContext != null ? themeContext[0] : \"system\";\n\n\tconst prefersDarkMode = useMatchesMediaQuery(prefersDarkModeMediaQuery);\n\tconst prefersHighContrast = useMatchesMediaQuery(\n\t\tprefersHighContrastMediaQuery,\n\t);\n\n\treturn resolveTheme(theme, { prefersDarkMode, prefersHighContrast });\n}\n\n/**\n * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.\n * @private\n *\n * @example\n * ```tsx\n * const theme = determineThemeFromMediaQuery({\n *   prefersDarkMode: true,\n *   prefersHighContrast: false\n * });\n * // Returns: \"dark\"\n *\n * const themeWithContrast = determineThemeFromMediaQuery({\n *   prefersDarkMode: false,\n *   prefersHighContrast: true\n * });\n * // Returns: \"light-high-contrast\"\n * ```\n */\nexport function determineThemeFromMediaQuery({\n\tprefersDarkMode,\n\tprefersHighContrast,\n}: {\n\tprefersDarkMode: boolean;\n\tprefersHighContrast: boolean;\n}): ResolvedTheme {\n\tif (prefersHighContrast) {\n\t\treturn prefersDarkMode ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t}\n\n\treturn prefersDarkMode ? \"dark\" : \"light\";\n}\n\n/**\n * Script that runs synchronously to prevent FOUC by applying the correct theme\n * before the page renders. This is the actual function that gets stringified and inlined.\n */\nfunction preventThemeFlash(args: {\n\tstorageKey: string;\n\tdefaultTheme: Theme;\n\tthemes: readonly Theme[];\n\tresolvedThemes: readonly ResolvedTheme[];\n\tprefersDarkModeMediaQuery: string;\n\tprefersHighContrastMediaQuery: string;\n}) {\n\tconst {\n\t\tstorageKey,\n\t\tdefaultTheme,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} = args;\n\n\tfunction isTheme(value: unknown): value is Theme {\n\t\treturn typeof value === \"string\" && themes.includes(value as Theme);\n\t}\n\n\tfunction getThemeFromCookie(name: string): string | null {\n\t\tconst cookie = document.cookie;\n\t\tif (!cookie) {\n\t\t\treturn null;\n\t\t}\n\n\t\ttry {\n\t\t\tconst cookies = cookie.split(\";\");\n\t\t\tconst themeCookie = cookies.find((c) => c.trim().startsWith(`${name}=`));\n\t\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\t\tconst storedTheme = cookieValue ? decodeURIComponent(cookieValue) : null;\n\t\t\treturn storedTheme;\n\t\t} catch (_) {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tfunction buildCookie(name: string, val: string): string {\n\t\tconst expires = new Date();\n\t\texpires.setFullYear(expires.getFullYear() + 1);\n\t\tconst hostname = location.hostname;\n\t\tconst protocol = location.protocol;\n\t\tconst domainAttribute =\n\t\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\")\n\t\t\t\t? \"; domain=.ngrok.com\"\n\t\t\t\t: \"\";\n\t\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\t\treturn `${name}=${encodeURIComponent(val)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}`;\n\t}\n\n\tfunction writeCookie(name: string, val: string): void {\n\t\ttry {\n\t\t\tdocument.cookie = buildCookie(name, val);\n\t\t} catch (_) {}\n\t}\n\n\tfunction resolveThemeValue(\n\t\ttheme: Theme,\n\t\tisDark: boolean,\n\t\tisHighContrast: boolean,\n\t): ResolvedTheme {\n\t\tif (theme === \"system\") {\n\t\t\tif (isHighContrast) {\n\t\t\t\treturn isDark ? \"dark-high-contrast\" : \"light-high-contrast\";\n\t\t\t}\n\t\t\treturn isDark ? \"dark\" : \"light\";\n\t\t}\n\t\treturn theme;\n\t}\n\n\t// 1) Read preference: cookie first, fallback to localStorage (migration support)\n\tlet cookieTheme: string | null = null;\n\tlet lsTheme: string | null = null;\n\tlet storedTheme: Theme | null = null;\n\n\ttry {\n\t\tcookieTheme = getThemeFromCookie(storageKey);\n\t} catch (_) {}\n\n\tif (isTheme(cookieTheme)) {\n\t\tstoredTheme = cookieTheme;\n\t} else {\n\t\ttry {\n\t\t\tlsTheme = window.localStorage?.getItem(storageKey) ?? null;\n\t\t} catch (_) {}\n\t\tif (isTheme(lsTheme)) {\n\t\t\tstoredTheme = lsTheme;\n\t\t}\n\t}\n\n\tconst preference = isTheme(storedTheme) ? storedTheme : defaultTheme;\n\n\t// 2) Resolve theme based on media queries\n\tconst isDark = matchMedia(prefersDarkModeMediaQuery).matches;\n\tconst isHighContrast = matchMedia(prefersHighContrastMediaQuery).matches;\n\tconst resolvedTheme = resolveThemeValue(preference, isDark, isHighContrast);\n\n\tconst html = document.documentElement;\n\t// 3) Apply theme to DOM (same order as applyThemeToHtml)\n\tif (\n\t\thtml.dataset.appliedTheme !== resolvedTheme ||\n\t\thtml.dataset.theme !== preference\n\t) {\n\t\t// Remove all theme classes\n\t\tfor (const themeClass of resolvedThemes as readonly string[]) {\n\t\t\thtml.classList.remove(themeClass);\n\t\t}\n\t\t// Add resolved theme class\n\t\thtml.classList.add(resolvedTheme);\n\t\t// Set data attributes\n\t\thtml.dataset.theme = preference;\n\t\thtml.dataset.appliedTheme = resolvedTheme;\n\t}\n\n\t// 4) Handle persistence/migration synchronously to prevent FOUC\n\tconst hadValidCookie = isTheme(cookieTheme);\n\ttry {\n\t\tif (isTheme(lsTheme) && !hadValidCookie) {\n\t\t\t// Migrate from localStorage to cookie\n\t\t\twriteCookie(storageKey, lsTheme);\n\t\t\ttry {\n\t\t\t\twindow.localStorage.removeItem(storageKey);\n\t\t\t} catch (_) {}\n\t\t} else if (!hadValidCookie) {\n\t\t\t// Set default cookie if none existed\n\t\t\twriteCookie(storageKey, preference);\n\t\t}\n\t} catch (_) {}\n}\n\n/**\n * preventWrongThemeFlashScriptContent generates a script that prevents the wrong theme from flashing on initial page load.\n * It checks cookies for a stored theme, and if none is found, it sets the default theme.\n * It also applies the correct theme to the `<html>` element based on the user's media query preferences.\n */\nfunction preventWrongThemeFlashScriptContent() {\n\tconst args = {\n\t\tstorageKey: THEME_STORAGE_KEY,\n\t\tdefaultTheme: DEFAULT_THEME,\n\t\tthemes,\n\t\tresolvedThemes,\n\t\tprefersDarkModeMediaQuery,\n\t\tprefersHighContrastMediaQuery,\n\t} as const satisfies Parameters<typeof preventThemeFlash>[0];\n\n\treturn `(${preventThemeFlash.toString()})(${JSON.stringify(args)})`;\n}\n\ntype MantleThemeHeadContentProps = {\n\t/**\n\t * An optional CSP nonce to allowlist this inline script. Using this can help\n\t * you to avoid using the CSP `unsafe-inline` directive, which disables\n\t * XSS protection and would allowlist all inline scripts or styles.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/nonce\n\t */\n\tnonce?: string;\n} & ComponentProps<typeof PreloadFonts>;\n\n/**\n * MantleThemeHeadContent is a React component that renders a script to prevent\n * Flash of Unstyled Content (FOUC), or the wrong theme from flashing on initial\n * page load.\n *\n * Render as high as possible in the <head> element.\n */\nconst MantleThemeHeadContent = ({\n\tincludeNunitoSans = false,\n\tnonce,\n}: MantleThemeHeadContentProps) => (\n\t<>\n\t\t<script\n\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t__html: preventWrongThemeFlashScriptContent(),\n\t\t\t}}\n\t\t\tnonce={nonce}\n\t\t\tsuppressHydrationWarning\n\t\t/>\n\t\t<PreloadFonts includeNunitoSans={includeNunitoSans} />\n\t</>\n);\nMantleThemeHeadContent.displayName = \"MantleThemeHeadContent\";\n\ntype InitialThemeProps = {\n\tclassName: string;\n\t\"data-applied-theme\": ResolvedTheme;\n\t\"data-theme\": Theme;\n};\n\ntype UseInitialHtmlThemePropsOptions = {\n\tclassName?: string;\n};\n\n/**\n * useInitialHtmlThemeProps returns the initial props that should be applied to the <html> element to prevent react hydration errors.\n */\nfunction useInitialHtmlThemeProps(\n\tprops: UseInitialHtmlThemePropsOptions = {},\n): InitialThemeProps {\n\tconst { className = \"\" } = props ?? {};\n\n\treturn useMemo(() => {\n\t\tlet initialTheme: Theme;\n\t\tlet resolvedTheme: ResolvedTheme;\n\n\t\tif (!canUseDOM()) {\n\t\t\tinitialTheme = DEFAULT_THEME;\n\t\t\tresolvedTheme = \"light\"; // assume \"light\" for SSR\n\t\t} else {\n\t\t\tconst prefersDarkMode = window.matchMedia(\n\t\t\t\tprefersDarkModeMediaQuery,\n\t\t\t).matches;\n\t\t\tconst prefersHighContrast = window.matchMedia(\n\t\t\t\tprefersHighContrastMediaQuery,\n\t\t\t).matches;\n\t\t\tinitialTheme = getStoredTheme({ cookie: document.cookie });\n\t\t\tresolvedTheme = resolveTheme(initialTheme, {\n\t\t\t\tprefersDarkMode,\n\t\t\t\tprefersHighContrast,\n\t\t\t});\n\t\t}\n\n\t\treturn {\n\t\t\tclassName: cx(className, resolvedTheme),\n\t\t\t\"data-applied-theme\": resolvedTheme,\n\t\t\t\"data-theme\": initialTheme,\n\t\t};\n\t}, [className]);\n}\n\ntype GetStoredThemeOptions = {\n\t/**\n\t * raw Cookie header (SSR) or document.cookie (client)\n\t */\n\tcookie: string | null | undefined;\n};\n\n/**\n * Returns the persisted UI theme from a Cookie header string.\n *\n * Looks for a cookie named by {@link THEME_STORAGE_KEY} and returns its value **iff**\n * it’s a valid `Theme` per `isTheme`. Otherwise, falls back to\n * {@link DEFAULT_THEME}. This function never throws; malformed encodings or\n * missing cookies quietly return the default.\n *\n * @example\n * getStoredTheme({ cookie: `${THEME_STORAGE_KEY}=dark; session=abc` }) // \"dark\"\n * @example\n * getStoredTheme({ cookie: \"\" }) // DEFAULT_THEME\n */\nfunction getStoredTheme({ cookie }: GetStoredThemeOptions): Theme {\n\tif (!cookie) {\n\t\treturn DEFAULT_THEME;\n\t}\n\n\ttry {\n\t\tconst cookies = cookie.split(\";\");\n\t\tconst themeCookie = cookies.find((cookie) =>\n\t\t\tcookie.trim().startsWith(`${THEME_STORAGE_KEY}=`),\n\t\t);\n\t\tconst cookieValue = themeCookie?.split(\"=\")[1];\n\t\tconst storedTheme = cookieValue\n\t\t\t? globalThis.decodeURIComponent(cookieValue)\n\t\t\t: null;\n\n\t\treturn isTheme(storedTheme) ? storedTheme : DEFAULT_THEME;\n\t} catch (_) {\n\t\treturn DEFAULT_THEME;\n\t}\n}\n\nexport {\n\t//,\n\tgetStoredTheme,\n\tMantleThemeHeadContent,\n\tpreventWrongThemeFlashScriptContent,\n\treadThemeFromHtmlElement,\n\tThemeProvider,\n\tuseAppliedTheme,\n\tuseInitialHtmlThemeProps,\n\tuseTheme,\n};\n\n/**\n * Notifies other open tabs (same origin) that the theme changed.\n *\n * Prefers a shared {@link BroadcastChannel} for immediate, reliable delivery.\n * Falls back to writing a unique “ping” value to `localStorage`, which triggers\n * the cross-tab `storage` event. Both mechanisms only work across the same origin.\n *\n * Uses a timestamp to ensure the storage value always changes so the event fires.\n *\n * @remarks\n * - Same-origin only: BroadcastChannel and the `storage` event do not cross subdomains\n *   or different schemes/ports. For cross-subdomain sync, use a postMessage hub or server push.\n * - This function is fire-and-forget and intentionally swallows errors.\n * - Receivers should re-read the cookie/source of truth and then apply the theme;\n *   don’t trust the payload blindly.\n *\n * @example\n * // Sender (inside your setter)\n * notifyOtherTabs(nextTheme, {\n *   broadcastChannel: broadcastChannelRef.current,\n *   pingKey: `${storageKey}__ping`,\n * });\n *\n * @example\n * // Receiver (setup once per tab)\n * const bc = new BroadcastChannel(storageKey);\n * bc.onmessage = () => syncThemeFromCookie();\n * window.addEventListener('storage', (e) => {\n *   if (e.key === `${storageKey}__ping`) syncThemeFromCookie();\n * });\n */\nfunction notifyOtherTabs(\n\ttheme: Theme,\n\toptions: {\n\t\tbroadcastChannel: BroadcastChannel | null;\n\t\tpingKey: `${string}__ping`;\n\t},\n) {\n\tconst { broadcastChannel, pingKey } = options;\n\n\t// first try BroadcastChannel\n\ttry {\n\t\tif (broadcastChannel) {\n\t\t\tbroadcastChannel.postMessage({\n\t\t\t\ttheme,\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t});\n\t\t\treturn;\n\t\t}\n\t} catch (_) {}\n\n\t// fallback to storage event: write a \"ping\" key (not the real storageKey)\n\ttry {\n\t\tlocalStorage.setItem(\n\t\t\tpingKey,\n\t\t\tJSON.stringify({ theme, timestamp: Date.now() }),\n\t\t);\n\t} catch (_) {}\n}\n\nfunction buildThemeCookie(value: string) {\n\tconst expires = new Date();\n\texpires.setFullYear(expires.getFullYear() + 1); // 1 year expiration\n\n\t// Only set .ngrok.com domain for ngrok domains, otherwise let it default to current domain\n\tconst { hostname, protocol } = window.location;\n\tconst domainAttribute =\n\t\thostname === \"ngrok.com\" || hostname.endsWith(\".ngrok.com\")\n\t\t\t? \"; domain=.ngrok.com\"\n\t\t\t: \"\";\n\tconst secureAttribute = protocol === \"https:\" ? \"; Secure\" : \"\";\n\n\treturn `${THEME_STORAGE_KEY}=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/${domainAttribute}; SameSite=Lax${secureAttribute}` as const;\n}\n\n/**\n * Sets a cookie with appropriate domain for the current hostname.\n * Uses .ngrok.com for ngrok domains, otherwise no domain (current domain only).\n */\nfunction setCookie(value: string) {\n\tif (!canUseDOM()) {\n\t\treturn;\n\t}\n\n\ttry {\n\t\tdocument.cookie = buildThemeCookie(value);\n\t} catch (_) {\n\t\t// silently swallow errors\n\t}\n}\n"],"mappings":"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","names":["Fragment","jsx","jsxs","cdnOrigin","cdnBase","fonts","fontHref","font","PreloadFonts","includeNunitoSans","NunitoSans","NunitoSans","jsxs","Fragment","jsx","resolvedThemes","themes","$theme","value","isTheme","$resolvedTheme","isResolvedTheme","createContext","useContext","useEffect","useMemo","useRef","useState","invariant","Fragment","jsx","jsxs","prefersDarkModeMediaQuery","prefersHighContrastMediaQuery","THEME_STORAGE_KEY","DEFAULT_THEME","initialState","ThemeProviderContext","createContext","ThemeProvider","children","theme","setTheme","useState","storedTheme","getStoredTheme","canUseDOM","applyThemeToHtml","broadcastChannelRef","useRef","useEffect","syncThemeFromCookie","next","newTheme","event","value","isTheme","onStorage","prefersDarkMql","prefersHighContrastMql","onChange","onVisibilityChange","useMemo","setCookie","notifyOtherTabs","useTheme","context","useContext","invariant","html","prefersDarkMode","prefersHighContrast","resolvedTheme","resolveTheme","htmlTheme","htmlAppliedTheme","currentTheme","currentResolvedTheme","isResolvedTheme","resolvedThemes","readThemeFromHtmlElement","htmlElement","determineThemeFromMediaQuery","useAppliedTheme","themeContext","useMatchesMediaQuery","preventThemeFlash","args","storageKey","defaultTheme","themes","getThemeFromCookie","name","cookie","cookieValue","c","buildCookie","val","expires","hostname","protocol","domainAttribute","secureAttribute","writeCookie","resolveThemeValue","isDark","isHighContrast","cookieTheme","lsTheme","preference","themeClass","hadValidCookie","preventWrongThemeFlashScriptContent","MantleThemeHeadContent","includeNunitoSans","nonce","PreloadFonts","useInitialHtmlThemeProps","props","className","initialTheme","cx","notifyOtherTabs","theme","options","broadcastChannel","pingKey","buildThemeCookie","value","expires","hostname","protocol","domainAttribute","secureAttribute","THEME_STORAGE_KEY","setCookie","canUseDOM"]}

package/dist/chunk-4R4RBAKU.js

@@ -0,0 +1,2 @@
+import{a as p}from"./chunk-MF2QITTY.js";import{a as n}from"./chunk-AZ56JGNY.js";import{forwardRef as s,useEffect as N,useMemo as T,useRef as g,useState as O}from"react";import{jsx as d}from"react/jsx-runtime";var b=s(({children:t,className:o,...r},e)=>{let a=E();return d("div",{className:n("group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full",o),"data-sticky-active":a.state.hasOverflow&&!a.state.scrolledToEnd||void 0,"data-x-overflow":a.state.hasOverflow,"data-x-scroll-end":a.state.hasOverflow&&a.state.scrolledToEnd,ref:p(a.ref,e),...r,children:t})});b.displayName="TableRoot";var v=s(({children:t,className:o,...r},e)=>d("table",{ref:e,className:n("table-auto border-collapse caption-bottom w-full min-w-full text-left",o),...r,children:t}));v.displayName="TableElement";var u=s(({children:t,className:o,...r},e)=>d("thead",{ref:e,className:n("border-b border-card-muted","divide-y divide-card-muted","text-strong bg-base","[&>tr]:bg-base",o),...r,children:t}));u.displayName="TableHead";var h=s(({children:t,className:o,...r},e)=>d("tbody",{className:n("divide-y divide-card-muted","text-body","[thead+&]:border-t [thead+&]:border-card-muted","[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover",o),ref:e,...r,children:t}));h.displayName="TableBody";var y=s(({children:t,className:o,...r},e)=>d("tfoot",{ref:e,className:n("font-medium text-body","border-t border-card-muted","divide-y divide-card-muted","[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover",o),...r,children:t}));y.displayName="TableFoot";var C=s(({children:t,className:o,...r},e)=>d("tr",{ref:e,className:n(o),...r,children:t}));C.displayName="TableRow";var w=s(({children:t,className:o,...r},e)=>d("th",{ref:e,className:n("h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0",o),...r,children:t}));w.displayName="TableHeader";var R=s(({children:t,className:o,...r},e)=>d("td",{ref:e,className:n("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono",o),...r,children:t}));R.displayName="TableCell";var x=s(({children:t,className:o,...r},e)=>d("caption",{ref:e,className:n("py-4 text-sm text-gray-500","border-t border-card-muted",o),...r,children:t}));x.displayName="TableCaption";var z={Body:h,Caption:x,Cell:R,Element:v,Foot:y,Head:u,Header:w,Root:b,Row:C};function E(){let t=g(null),[o,r]=O({hasOverflow:!1,scrolledToEnd:!1});return N(()=>{let e=t.current;if(!e)return;let a=()=>{let i=e.scrollWidth>e.clientWidth,f=Math.abs(e.scrollWidth-e.scrollLeft-e.clientWidth)<1;r(l=>l.hasOverflow!==i||l.scrolledToEnd!==f?{hasOverflow:i,scrolledToEnd:f}:l)},c=new ResizeObserver(a);c.observe(e);let m=new MutationObserver(a);return m.observe(e,{childList:!0,subtree:!0}),e.addEventListener("scroll",a,{passive:!0}),a(),()=>{c.disconnect(),m.disconnect(),e.removeEventListener("scroll",a)}},[]),T(()=>({ref:t,state:o}),[o])}export{z as a};
+//# sourceMappingURL=chunk-4R4RBAKU.js.map

package/dist/chunk-4R4RBAKU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow &&\n\t\t\t\t\t\t!horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow &&\n\t\t\t\t\thorizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-collapse caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-b border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-strong bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[thead+&]:border-t [thead+&]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-caption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-cell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-element\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-foot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-row\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","Root","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Element","Head","Body","Foot","Row","Header","Cell","Caption","Table","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}

package/dist/chunk-NJNFZ2EG.js

@@ -0,0 +1,2 @@
+import{a as e}from"./chunk-KMNACVH6.js";function r({children:o,fallback:n=null}){return e()?o():n}function d(){return typeof window<"u"&&typeof document<"u"}export{r as a,d as b};
+//# sourceMappingURL=chunk-NJNFZ2EG.js.map

package/dist/chunk-NJNFZ2EG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/browser-only/browser-only.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useIsHydrated } from \"../../hooks/use-is-hydrated.js\";\n\ntype Props = {\n\t/**\n\t * Children must be a render function so that evaluation is deferred\n\t * until after hydration has occurred.\n\t */\n\tchildren: () => ReactNode;\n\t/**\n\t * Optional fallback to render on the server (and during hydration)\n\t * before the client-only children are mounted.\n\t * Ideally, this should be the same dimensions as the eventual children\n\t * to avoid layout shift.\n\t */\n\tfallback?: ReactNode;\n};\n\n/**\n * A wrapper component that ensures its children only render in the browser,\n * after hydration has completed.\n *\n * This is useful for components that rely on browser-only APIs\n * (e.g. `window`, `document`, `localStorage`, media queries) or that\n * cannot safely be rendered during server-side rendering (SSR).\n *\n * - On the server, and during the initial hydration pass,\n *   the `fallback` is rendered.\n * - On the client, after hydration, the `children` render function is called.\n *\n * @see https://mantle.ngrok.com/components/browser-only\n *\n * @example\n * ```tsx\n * <BrowserOnly fallback={<div style={{ height: 200 }} />} >\n *   {() => <ExpensiveChart />}\n * </BrowserOnly>\n * ```\n *\n * @see useIsHydrated\n */\nfunction BrowserOnly({ children, fallback = null }: Props) {\n\treturn useIsHydrated() ? children() : fallback;\n}\n\n/**\n * Detects whether DOM APIs are available.\n *\n * @description\n * Returns `true` when running in a windowed browser context where both\n * `window` and a real `document` exist. This will be `false` in SSR/Node.\n *\n * Note: Test environments that provide a DOM shim (e.g. JSDOM) will return `true`.\n *\n * @returns {boolean} `true` if DOM APIs are available; otherwise `false`.\n *\n * @example\n * if (canUseDOM()) {\n *   localStorage.setItem(\"foo\", \"bar\");\n * }\n */\nfunction canUseDOM(): boolean {\n\treturn typeof window !== \"undefined\" && typeof document !== \"undefined\";\n}\n\nexport {\n\t//,\n\tcanUseDOM,\n\tBrowserOnly,\n};\n"],"mappings":"wCAyCA,SAASA,EAAY,CAAE,SAAAC,EAAU,SAAAC,EAAW,IAAK,EAAU,CAC1D,OAAOC,EAAc,EAAIF,EAAS,EAAIC,CACvC,CAkBA,SAASE,GAAqB,CAC7B,OAAO,OAAO,OAAW,KAAe,OAAO,SAAa,GAC7D","names":["BrowserOnly","children","fallback","useIsHydrated","canUseDOM"]}

package/dist/{chunk-Q2I2F6IG.js → chunk-WVBQX6DT.js}

@@ -1,2 +1,2 @@
-import{l as y}from"./chunk-AINB3F3G.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm font-body",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
-//# sourceMappingURL=chunk-Q2I2F6IG.js.map
+import{k as y}from"./chunk-4CLIEHH3.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as n}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as x}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as w}from"@phosphor-icons/react/Info";import{WarningIcon as A}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as I}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var N=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:i="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:n("toaster overlay-prompt pointer-events-auto *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:i??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};N.displayName="Toaster";var g=P("");function z(t,o){return c.toast.custom(e=>r(g.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var T=P({priority:"info"}),v=d(({asChild:t,children:o,className:e,priority:s,...i},a)=>{let m=t?l:"div";return r(T.Provider,{value:{priority:s},children:k(m,{className:n("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...i,children:[r(S,{priority:s}),o]})})});v.displayName="Toast";var h=d(({className:t,svg:o,...e},s)=>{let i=f(T);switch(i.priority){case"danger":return r(p,{className:n("text-danger-600",t),ref:s,svg:o??r(A,{weight:"fill"}),...e});case"warning":return r(p,{className:n("text-warning-600",t),ref:s,svg:o??r(I,{weight:"fill"}),...e});case"success":return r(p,{className:n("text-success-600",t),ref:s,svg:o??r(x,{weight:"fill"}),...e});case"info":return r(p,{className:n("text-accent-600",t),ref:s,svg:r(w,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${i.priority}`)}});h.displayName="ToastIcon";var C=d(({asChild:t,className:o,onClick:e,...s},i)=>{let a=f(g);return r(t?l:"button",{className:n("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-xs",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:i,...s})});C.displayName="ToastAction";var b=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:n("text-strong flex-1 text-sm font-body",o),ref:s,...e}));b.displayName="ToastMessage";var F={Root:v,Action:C,Icon:h,Message:b};function U(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:n("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{N as a,z as b,F as c,U as d};
+//# sourceMappingURL=chunk-WVBQX6DT.js.map

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-W2SMAR4Q.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as c}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-[[data-table-header-action]]:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0_/_15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
+import{a as r}from"./chunk-4R4RBAKU.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as c}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-[[data-table-header-action]]:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0_/_15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
 //# sourceMappingURL=data-table.js.map

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as f,b as D,c as P,d as m,e as v,f as y,g as u,h as C,i as k}from"./chunk-VIKPHWPP.js";import{d as p}from"./chunk-Q2I2F6IG.js";import"./chunk-AINB3F3G.js";import"./chunk-6J7D73WA.js";import{c}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 F}from"@phosphor-icons/react/X";import{forwardRef as n}from"react";import{jsx as e,jsxs as j}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=D;N.displayName="DialogTrigger";var d=P;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var g=n(({className:o,...t},i)=>e(v,{ref:i,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-50 backdrop-blur-xs",o),...t}));g.displayName="DialogOverlay";var h=n(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>j(d,{children:[e(g,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(y,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:r=>{p(r),i?.(r)},onPointerDownOutside:r=>{p(r),l?.(r)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(c,{appearance:l,icon:e(F,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=n(({className:o,...t},i)=>e(u,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=n(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var H={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:g,Portal:d,Title:O,Trigger:N};export{H as Dialog,k as isDialogOverlayTarget};
+import{a as f,b as D,c as P,d as m,e as v,f as y,g as u,h as C,i as k}from"./chunk-VIKPHWPP.js";import{d as p}from"./chunk-WVBQX6DT.js";import"./chunk-4CLIEHH3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import{c}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 F}from"@phosphor-icons/react/X";import{forwardRef as n}from"react";import{jsx as e,jsxs as j}from"react/jsx-runtime";var x=f;x.displayName="Dialog";var N=D;N.displayName="DialogTrigger";var d=P;d.displayName="DialogPortal";var b=m;b.displayName="DialogClose";var g=n(({className:o,...t},i)=>e(v,{ref:i,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-50 backdrop-blur-xs",o),...t}));g.displayName="DialogOverlay";var h=n(({children:o,className:t,onInteractOutside:i,onPointerDownOutside:l,preferredWidth:s="max-w-lg",...W},z)=>j(d,{children:[e(g,{}),e("div",{className:"fixed inset-4 z-50 flex items-center justify-center",children:e(y,{className:a("flex max-h-full w-full flex-1 flex-col","outline-hidden focus-within:outline-hidden","border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200","data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95",s,t),onInteractOutside:r=>{p(r),i?.(r)},onPointerDownOutside:r=>{p(r),l?.(r)},ref:z,...W,children:o})})]}));h.displayName="DialogContent";var R=({className:o,children:t,...i})=>e("div",{className:a("border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4","has-[.icon-button]:pr-4",o),...i,children:t});R.displayName="DialogHeader";var w=({size:o="md",type:t="button",label:i="Close Dialog",appearance:l="ghost",...s})=>e(m,{asChild:!0,children:e(c,{appearance:l,icon:e(F,{}),label:i,size:o,type:t,...s})});w.displayName="DialogCloseIconButton";var I=({className:o,...t})=>e("div",{className:a("scrollbar text-body flex-1 overflow-y-auto p-6",o),...t});I.displayName="DialogBody";var B=({className:o,...t})=>e("div",{className:a("border-dialog-muted flex shrink-0 flex-row-reverse gap-2 border-t px-6 py-4",o),...t});B.displayName="DialogFooter";var O=n(({className:o,...t},i)=>e(u,{ref:i,className:a("text-strong truncate text-lg font-medium",o),...t}));O.displayName="DialogTitle";var T=n(({className:o,...t},i)=>e(C,{ref:i,className:a("text-muted",o),...t}));T.displayName="DialogDescription";var H={Root:x,Body:I,Close:b,CloseIconButton:w,Content:h,Description:T,Footer:B,Header:R,Overlay:g,Portal:d,Title:O,Trigger:N};export{H as Dialog,k as isDialogOverlayTarget};
 //# sourceMappingURL=dialog.js.map