@ngrok/mantle 0.65.0 → 0.66.1

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 {\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 { Button, type ButtonPriority, type ButtonProps } 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 { Slot } from \"../slot/index.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(context, \"AlertDialog child component used outside of AlertDialog parent!\");\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#alertdialogroot\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(() => ({ priority }), [priority]);\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#alertdialogtrigger\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<typeof AlertDialogPrimitive.Content> & {\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#alertdialogcontent\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{ className, onInteractOutside, onPointerDownOutside, preferredWidth = \"max-w-md\", ...props },\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#alertdialogbody\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\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#alertdialogheader\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#alertdialogfooter\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#alertdialogtitle\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(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\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#alertdialogdescription\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(\"text-body text-center text-sm font-normal sm:text-start\", className)}\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#alertdialogaction\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#alertdialogcancel\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#alertdialogicon\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 = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.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#alertdialogclose\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#alertdialogroot\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#alertdialogaction\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#alertdialogbody\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#alertdialogcancel\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#alertdialogclose\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#alertdialogcontent\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#alertdialogdescription\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#alertdialogfooter\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#alertdialogheader\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#alertdialogicon\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#alertdialogtitle\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#alertdialogtrigger\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","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,"file":"alert-dialog.js","names":["AlertDialogPrimitive.Root","AlertDialogPrimitive.Trigger","AlertDialogPrimitive.Portal","AlertDialogPrimitive.Overlay","AlertDialogPrimitive.Content","AlertDialogPrimitive.Title","AlertDialogPrimitive.Description","AlertDialogPrimitive.Close"],"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 {\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 { Button, type ButtonPriority, type ButtonProps } 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 { Slot } from \"../slot/index.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(context, \"AlertDialog child component used outside of AlertDialog parent!\");\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#alertdialogroot\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(() => ({ priority }), [priority]);\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#alertdialogtrigger\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<typeof AlertDialogPrimitive.Content> & {\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#alertdialogcontent\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{ className, onInteractOutside, onPointerDownOutside, preferredWidth = \"max-w-md\", ...props },\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\tdata-mantle-modal-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#alertdialogbody\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn <Component className={cx(\"flex-1 space-y-4\", className)} ref={ref} {...props} />;\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#alertdialogheader\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col space-y-2 text-center sm:text-start\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#alertdialogfooter\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<ComponentRef<\"div\">, ComponentProps<\"div\"> & WithAsChild>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#alertdialogtitle\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(\"text-strong text-center text-lg font-medium sm:text-start\", className)}\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#alertdialogdescription\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(\"text-body text-center text-sm font-normal sm:text-start\", className)}\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#alertdialogaction\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#alertdialogcancel\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#alertdialogicon\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 = ctx.priority === \"danger\" ? \"text-danger-600\" : \"text-accent-600\";\n\t\tconst defaultIcon = ctx.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#alertdialogclose\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#alertdialogroot\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#alertdialogaction\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#alertdialogbody\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#alertdialogcancel\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#alertdialogclose\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#alertdialogcontent\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#alertdialogdescription\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#alertdialogfooter\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#alertdialogheader\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#alertdialogicon\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#alertdialogtitle\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#alertdialogtrigger\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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"}

package/dist/alert.d.ts

@@ -1,45 +1,42 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ComponentProps, HTMLAttributes, ReactNode } from 'react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
-import { a as IconButtonProps } from './icon-button-CT71Ti9V.js';
-import { S as SvgAttributes } from './types-BuKAGhC-.js';
-import 'class-variance-authority/types';
-import './variant-props-oDo2u-We.js';
-import 'class-variance-authority';
-import './deep-non-nullable-SmpSvoSd.js';
+import { t as SvgAttributes } from "./types-Dh4BVhXC.js";
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import { n as IconButtonProps } from "./icon-button-2r6S3HVA.js";
+import * as react from "react";
+import { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/components/alert/alert.d.ts
 declare const priorities: readonly ["danger", "info", "success", "warning"];
 type Priority = (typeof priorities)[number];
 declare const appearances: readonly ["banner", "default"];
 type Appearance = (typeof appearances)[number];
 type AlertProps = ComponentProps<"div"> & {
-    /**
-     * Indicates the importance or impact level of the Alert, affecting its
-     * color and styling to communicate its purpose to the user.
-     */
-    priority: Priority;
-    /**
-     * Controls the visual style of the Alert.
-     * - "default" provides standard rounded corners and borders.
-     * - "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.
-     *
-     * @default "default"
-     */
-    appearance?: Appearance;
+  /**
+   * Indicates the importance or impact level of the Alert, affecting its
+   * color and styling to communicate its purpose to the user.
+   */
+  priority: Priority;
+  /**
+   * Controls the visual style of the Alert.
+   * - "default" provides standard rounded corners and borders.
+   * - "banner" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.
+   *
+   * @default "default"
+   */
+  appearance?: Appearance;
 };
 type AlertIconProps = Omit<SvgAttributes, "children"> & {
-    /**
-     * An optional icon that renders in place of the default icon for the Alert priority.
-     */
-    svg?: ReactNode;
+  /**
+   * An optional icon that renders in place of the default icon for the Alert priority.
+   */
+  svg?: ReactNode;
 };
 type AlertDescriptionProps = ComponentProps<"div"> & WithAsChild;
 type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
-    /**
-     * An optional icon to render inside the dismiss button. Defaults to an X icon.
-     */
-    icon?: ReactNode;
+  /**
+   * An optional icon to render inside the dismiss button. Defaults to an X icon.
+   */
+  icon?: ReactNode;
 };
 /**
  * Displays a callout for user attention.
@@ -61,112 +58,122 @@ type AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, "icon">> & {
  *```
  */
 declare const Alert: {
-    /**
-     * The root container of the alert component.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alertroot
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.Description>Alert description</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly Root: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The container for the content slot of an alert.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alertcontent
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.Description>Alert description text.</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly Content: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The optional description of an alert.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alertdescription
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.Description>Alert description text.</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly Description: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * An optional dismiss button that can be used to close the alert.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.DismissIconButton />
-     *     <Alert.Description>Alert description text.</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly DismissIconButton: {
-        ({ size, type, label, appearance, className, icon, style, ...props }: AlertDismissIconButtonProps): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
-    /**
-     * An optional icon that visually represents the priority of the Alert.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alerticon
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.Description>Alert description text.</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly Icon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
-    /**
-     * The title of an alert.
-     *
-     * @see https://mantle.ngrok.com/components/alert#alerttitle
-     *
-     * @example
-     * ```tsx
-     * <Alert.Root priority="info">
-     *   <Alert.Icon />
-     *   <Alert.Content>
-     *     <Alert.Title>Alert Title</Alert.Title>
-     *     <Alert.Description>Alert description text.</Alert.Description>
-     *   </Alert.Content>
-     * </Alert.Root>
-     * ```
-     */
-    readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
+  /**
+   * The root container of the alert component.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alertroot
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Root: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The container for the content slot of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alertcontent
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Content: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The optional description of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alertdescription
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Description: react.ForwardRefExoticComponent<Omit<AlertDescriptionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * An optional dismiss button that can be used to close the alert.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.DismissIconButton />
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly DismissIconButton: {
+    ({
+      size,
+      type,
+      label,
+      appearance,
+      className,
+      icon,
+      style,
+      ...props
+    }: AlertDismissIconButtonProps): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
+  /**
+   * An optional icon that visually represents the priority of the Alert.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alerticon
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Icon: react.ForwardRefExoticComponent<Omit<AlertIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+  /**
+   * The title of an alert.
+   *
+   * @see https://mantle.ngrok.com/components/alert#alerttitle
+   *
+   * @example
+   * ```tsx
+   * <Alert.Root priority="info">
+   *   <Alert.Icon />
+   *   <Alert.Content>
+   *     <Alert.Title>Alert Title</Alert.Title>
+   *     <Alert.Description>Alert description text.</Alert.Description>
+   *   </Alert.Content>
+   * </Alert.Root>
+   * ```
+   */
+  readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
 };
-
+//#endregion
 export { Alert };
+//# sourceMappingURL=alert.d.ts.map

package/dist/alert.js

@@ -1,2 +1,2 @@
-import{c as f}from"./chunk-CBRSMQ26.js";import{a as d}from"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as l}from"./chunk-ADF5DAYG.js";import{a as m}from"./chunk-SBQHQ2SJ.js";import{a as i}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as I}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as h}from"@phosphor-icons/react/Info";import{WarningIcon as T}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as R}from"@phosphor-icons/react/WarningDiamond";import{XIcon as w}from"@phosphor-icons/react/X";import{cva as D}from"class-variance-authority";import{createContext as B,forwardRef as c,useContext as H,useMemo as M}from"react";import V from"tiny-invariant";import{jsx as o}from"react/jsx-runtime";var u=B(null);function y(){let t=H(u);return V(t,"useAlertContext hook used outside of Alert parent!"),t}var W=D("relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans",{variants:{priority:{danger:"border-danger-500/50 bg-danger-500/10 text-danger-700",info:"border-info-500/50 bg-info-500/10 text-info-700",success:"border-success-500/50 bg-success-500/10 text-success-700",warning:"border-warning-500/50 bg-warning-500/10 text-warning-700"},appearance:{banner:"border-x-0 border-t-0 rounded-none z-50 sticky",default:""}},compoundVariants:[{priority:"danger",appearance:"banner",className:""},{priority:"info",appearance:"banner",className:""},{priority:"success",appearance:"banner",className:""},{priority:"warning",appearance:"banner",className:""}]}),A=c(({appearance:t="default",className:r,priority:e,...s},n)=>{let a=M(()=>({priority:e}),[e]);return o(u.Provider,{value:a,children:o("div",{ref:n,className:i(W({appearance:t,priority:e}),r),...s})})});A.displayName="Alert";var L={danger:o(T,{}),info:o(h,{}),success:o(I,{}),warning:o(R,{})},g=c(({className:t,svg:r,...e},s)=>{let n=y(),a=L[n.priority];return o(m,{ref:s,className:i("size-5",t),svg:r??a,...e})});g.displayName="AlertIcon";var v=c(({className:t,...r},e)=>o("div",{ref:e,className:i("min-w-0 flex-1 has-data-alert-dismiss:pr-6",t),...r}));v.displayName="AlertContent";var C=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"h5",{ref:s,className:i("font-medium",r),...e}));C.displayName="AlertTitle";var x=c(({asChild:t=!1,className:r,...e},s)=>o(t?l:"div",{ref:s,className:i("text-sm",r),...e}));x.displayName="AlertDescription";var S=t=>`var(--color-${t}-700)`,$=t=>`var(--color-${t}-800)`,k=t=>`var(--color-${t}-900)`,P=({size:t="sm",type:r="button",label:e="Dismiss Alert",appearance:s="ghost",className:n,icon:a=o(w,{}),style:b,...N})=>{let p=y();return o(f,{appearance:s,icon:a,label:e,size:t,"data-alert-dismiss":!0,className:i("right-1.5 top-1.5 absolute","text-(--alert-dismiss-icon-color)","not-disabled:hover:text-(--alert-dismiss-icon-hover-color)","not-disabled:active:text-(--alert-dismiss-icon-active-color)",n),type:r,style:d({...b,"--alert-dismiss-icon-color":S(p.priority),"--alert-dismiss-icon-hover-color":$(p.priority),"--alert-dismiss-icon-active-color":k(p.priority)}),...N})};P.displayName="AlertDismissIconButton";var z={Root:A,Content:v,Description:x,DismissIconButton:P,Icon:g,Title:C};export{z as Alert};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./svg-only-BVLlbQ4e.js";import{t as n}from"./types-884RJJqm.js";import{t as r}from"./slot-DdnjeV2n.js";import{t as i}from"./icon-button-D4e9-dq-.js";import{createContext as a,forwardRef as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u}from"react/jsx-runtime";import{CheckCircleIcon as d}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as f}from"@phosphor-icons/react/Info";import{WarningIcon as p}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as m}from"@phosphor-icons/react/WarningDiamond";import{XIcon as h}from"@phosphor-icons/react/X";import{cva as g}from"class-variance-authority";const _=a(null);function v(){let e=s(_);return l(e,`useAlertContext hook used outside of Alert parent!`),e}const y=g(`relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans`,{variants:{priority:{danger:`border-danger-500/50 bg-danger-500/10 text-danger-700`,info:`border-info-500/50 bg-info-500/10 text-info-700`,success:`border-success-500/50 bg-success-500/10 text-success-700`,warning:`border-warning-500/50 bg-warning-500/10 text-warning-700`},appearance:{banner:`border-x-0 border-t-0 rounded-none z-50 sticky`,default:``}},compoundVariants:[{priority:`danger`,appearance:`banner`,className:``},{priority:`info`,appearance:`banner`,className:``},{priority:`success`,appearance:`banner`,className:``},{priority:`warning`,appearance:`banner`,className:``}]}),b=o(({appearance:t=`default`,className:n,priority:r,...i},a)=>{let o=c(()=>({priority:r}),[r]);return u(_.Provider,{value:o,children:u(`div`,{ref:a,className:e(y({appearance:t,priority:r}),n),...i})})});b.displayName=`Alert`;const x={danger:u(p,{}),info:u(f,{}),success:u(d,{}),warning:u(m,{})},S=o(({className:n,svg:r,...i},a)=>{let o=x[v().priority];return u(t,{ref:a,className:e(`size-5`,n),svg:r??o,...i})});S.displayName=`AlertIcon`;const C=o(({className:t,...n},r)=>u(`div`,{ref:r,className:e(`min-w-0 flex-1 has-data-alert-dismiss:pr-6`,t),...n}));C.displayName=`AlertContent`;const w=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`h5`,{ref:a,className:e(`font-medium`,n),...i}));w.displayName=`AlertTitle`;const T=o(({asChild:t=!1,className:n,...i},a)=>u(t?r:`div`,{ref:a,className:e(`text-sm`,n),...i}));T.displayName=`AlertDescription`;const E=e=>`var(--color-${e}-700)`,D=e=>`var(--color-${e}-800)`,O=e=>`var(--color-${e}-900)`,k=({size:t=`sm`,type:r=`button`,label:a=`Dismiss Alert`,appearance:o=`ghost`,className:s,icon:c=u(h,{}),style:l,...d})=>{let f=v();return u(i,{appearance:o,icon:c,label:a,size:t,"data-alert-dismiss":!0,className:e(`right-1.5 top-1.5 absolute`,`text-(--alert-dismiss-icon-color)`,`not-disabled:hover:text-(--alert-dismiss-icon-hover-color)`,`not-disabled:active:text-(--alert-dismiss-icon-active-color)`,s),type:r,style:n({...l,"--alert-dismiss-icon-color":E(f.priority),"--alert-dismiss-icon-hover-color":D(f.priority),"--alert-dismiss-icon-active-color":O(f.priority)}),...d})};k.displayName=`AlertDismissIconButton`;const A={Root:b,Content:C,Description:T,DismissIconButton:k,Icon:S,Title:w};export{A as Alert};
 //# sourceMappingURL=alert.js.map