@ngrok/mantle 0.70.1 → 0.71.0

package/dist/alert-dialog.js.map

@@ -1 +1 @@
-{"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\";\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 = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>\n>(({ ...props }, ref) => (\n\t<AlertDialogPrimitive.Trigger ref={ref} data-slot=\"alert-dialog-trigger\" {...props} />\n));\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\tdata-slot=\"alert-dialog-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>(({ className, preferredWidth = \"max-w-md\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\tdata-slot=\"alert-dialog-content\"\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\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\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\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\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\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 (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"alert-dialog-body\"\n\t\t\t\tclassName={cx(\"flex-1 space-y-4\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#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\tdata-slot=\"alert-dialog-header\"\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\tdata-slot=\"alert-dialog-footer\"\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\tdata-slot=\"alert-dialog-title\"\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\tdata-slot=\"alert-dialog-description\"\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\tdata-slot=\"alert-dialog-action\"\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\tdata-slot=\"alert-dialog-cancel\"\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\tdata-slot=\"alert-dialog-icon\"\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 = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Close>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>\n>(({ ...props }, ref) => (\n\t<AlertDialogPrimitive.Close ref={ref} data-slot=\"alert-dialog-close\" {...props} />\n));\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 * Composition:\n * ```\n * AlertDialog.Root\n * ├── AlertDialog.Trigger\n * └── AlertDialog.Content\n *     ├── AlertDialog.Icon\n *     └── AlertDialog.Body\n *         ├── AlertDialog.Header\n *         │   ├── AlertDialog.Title\n *         │   └── AlertDialog.Description\n *         └── AlertDialog.Footer\n *             ├── AlertDialog.Cancel\n *             └── AlertDialog.Action\n * ```\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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"}
+{"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\";\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 = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Trigger>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>\n>(({ ...props }, ref) => (\n\t<AlertDialogPrimitive.Trigger ref={ref} data-slot=\"alert-dialog-trigger\" {...props} />\n));\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\tdata-slot=\"alert-dialog-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>(({ className, preferredWidth = \"max-w-md\", ...props }, ref) => (\n\t<AlertDialogPortal>\n\t\t<AlertDialogOverlay />\n\t\t<div className=\"fixed inset-4 z-50 flex items-center justify-center\">\n\t\t\t<AlertDialogPrimitive.Content\n\t\t\t\tdata-slot=\"alert-dialog-content\"\n\t\t\t\tdata-mantle-modal-content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\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\"outline-hidden focus-within:outline-hidden\",\n\t\t\t\t\t\"p-6\",\n\t\t\t\t\t\"border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200\",\n\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\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t</AlertDialogPortal>\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 (\n\t\t\t<Component\n\t\t\t\tdata-slot=\"alert-dialog-body\"\n\t\t\t\tclassName={cx(\"flex-1 space-y-4\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\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#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\tdata-slot=\"alert-dialog-header\"\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\tdata-slot=\"alert-dialog-footer\"\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\tdata-slot=\"alert-dialog-title\"\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\tdata-slot=\"alert-dialog-description\"\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\tdata-slot=\"alert-dialog-action\"\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\tdata-slot=\"alert-dialog-cancel\"\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\tdata-slot=\"alert-dialog-icon\"\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 * `AlertDialog.Cancel` already closes the dialog by default. Reach for\n * `AlertDialog.Close` when you need to attach close behavior to a custom\n * element (typically wrapping `AlertDialog.Action` with `asChild` so the\n * action both performs the operation and dismisses the dialog).\n *\n * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\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.Close asChild>\n *           <AlertDialog.Action type=\"button\" onClick={() => doThing()}>\n *             Do thing and close\n *           </AlertDialog.Action>\n *         </AlertDialog.Close>\n *       </AlertDialog.Footer>\n *     </AlertDialog.Body>\n *   </AlertDialog.Content>\n * </AlertDialog.Root>\n * ```\n */\nconst Close = forwardRef<\n\tComponentRef<typeof AlertDialogPrimitive.Close>,\n\tComponentPropsWithoutRef<typeof AlertDialogPrimitive.Close>\n>(({ ...props }, ref) => (\n\t<AlertDialogPrimitive.Close ref={ref} data-slot=\"alert-dialog-close\" {...props} />\n));\nClose.displayName = \"AlertDialogClose\";\n\n/**\n * A modal dialog that interrupts the user with important content and expects a\n * response. Use AlertDialog for destructive or irreversible confirmations\n * (delete, sign out, leave without saving) where the user must explicitly\n * acknowledge before proceeding — it blocks all background interaction by\n * default. For non-destructive input modals or confirmation flows, use\n * `Dialog` instead. For side-panel content (filter panels, detail views,\n * navigation drawers), use `Sheet`.\n *\n * @see https://mantle.ngrok.com/components/alert-dialog\n *\n * @example\n * Composition:\n * ```\n * AlertDialog.Root\n * ├── AlertDialog.Trigger\n * └── AlertDialog.Content\n *     ├── AlertDialog.Icon\n *     └── AlertDialog.Body\n *         ├── AlertDialog.Header\n *         │   ├── AlertDialog.Title\n *         │   └── AlertDialog.Description\n *         └── AlertDialog.Footer\n *             ├── AlertDialog.Cancel\n *             └── AlertDialog.Action\n * ```\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 * The root stateful component for the Alert Dialog. Wraps the trigger and\n\t * content and exposes the required `priority` prop (`\"danger\"` for\n\t * destructive actions, `\"info\"` for informational confirmations) which\n\t * propagates color to descendants like `AlertDialog.Icon` and\n\t * `AlertDialog.Action`.\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </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. Defaults to\n\t * `appearance=\"filled\"` and inherits the priority color from the parent\n\t * `AlertDialog.Root`. Does not close the dialog by default — wrap with\n\t * `AlertDialog.Close asChild` if the action should also dismiss.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogaction\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tAction,\n\t/**\n\t * Contains the main content of the alert dialog. Wraps the header and footer\n\t * inside `AlertDialog.Content` next to `AlertDialog.Icon`.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogbody\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * A button that closes the dialog and cancels the action. Defaults to\n\t * `appearance=\"outlined\"` and `priority=\"neutral\"` so it visually\n\t * de-emphasizes against `AlertDialog.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.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tCancel,\n\t/**\n\t * A button that closes the Alert Dialog. (Unstyled) Typically wrapped\n\t * around `AlertDialog.Action` with `asChild` so the action both performs\n\t * the operation and dismisses the dialog.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogclose\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Close asChild>\n\t *           <AlertDialog.Action type=\"button\" onClick={() => doThing()}>\n\t *             Do thing and close\n\t *           </AlertDialog.Action>\n\t *         </AlertDialog.Close>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The popover alert dialog container. Renders on top of the overlay,\n\t * centered in the viewport.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogcontent\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * An accessible description to be announced when the dialog is opened.\n\t * Renders as a `div` by default; can be changed via the `asChild` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogdescription\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * Contains the footer content of the dialog, including the action and\n\t * 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.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * Contains the header content of the dialog, including the title and\n\t * 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.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * An icon that visually represents the priority of the AlertDialog.\n\t * Defaults to a warning icon for `danger` and an info icon for `info`. Can\n\t * be overridden via the `svg` prop.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogicon\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * An accessible name to be announced when the dialog is opened.\n\t * Alternatively, provide `aria-label` or `aria-labelledby` to\n\t * `AlertDialog.Content` and exclude this component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert-dialog#alertdialogtitle\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 Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\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.Root priority=\"danger\">\n\t *   <AlertDialog.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Show Danger 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>\n\t *           Are you absolutely sure?\n\t *         </AlertDialog.Title>\n\t *         <AlertDialog.Description>\n\t *           Proident quis nisi tempor irure sunt ut minim occaecat mollit sunt.\n\t *         </AlertDialog.Description>\n\t *       </AlertDialog.Header>\n\t *       <AlertDialog.Footer>\n\t *         <AlertDialog.Cancel type=\"button\">Cancel</AlertDialog.Cancel>\n\t *         <AlertDialog.Action type=\"button\">\n\t *           Continue\n\t *         </AlertDialog.Action>\n\t *       </AlertDialog.Footer>\n\t *     </AlertDialog.Body>\n\t *   </AlertDialog.Content>\n\t * </AlertDialog.Root>\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,6 +1,6 @@
-import { t as SvgAttributes } from "./types-DEYyl5LX.js";
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
-import { n as IconButtonProps } from "./icon-button-Cl30yTfu.js";
+import { t as SvgAttributes } from "./types-DoV0R5Ja.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { n as IconButtonProps } from "./icon-button-BnK4K7YK.js";
 import * as _$react from "react";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";

package/dist/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"alert\"\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-icon\"\n\t\t\t\tclassName={cx(\"size-5\", 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 = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"alert-content\"\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-title\"\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\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\tref={ref}\n\t\t\t\tdata-slot=\"alert-description\"\n\t\t\t\tclassName={cx(\"text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-slot=\"alert-dismiss-icon-button\"\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * Composition:\n * ```\n * Alert.Root\n * ├── Alert.Icon\n * └── Alert.Content\n *     ├── Alert.Title\n *     ├── Alert.Description\n *     └── Alert.DismissIconButton\n * ```\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/components/alert/alert.tsx"],"sourcesContent":["import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { MegaphoneIcon } from \"@phosphor-icons/react/Megaphone\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { XIcon } from \"@phosphor-icons/react/X\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes, ReactNode } from \"react\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { $cssProperties, type WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { IconButton, type IconButtonProps } from \"../button/icon-button.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"important\",\n\t\"info\",\n\t// \"neutral\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\nconst appearances = [\"banner\", \"default\"] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype AlertContextValue = {\n\tpriority: Priority;\n};\n\nconst AlertContext = createContext<AlertContextValue | null>(null);\n\nfunction useAlertContext() {\n\tconst context = useContext(AlertContext);\n\tinvariant(context, \"useAlertContext hook used outside of Alert parent!\");\n\treturn context;\n}\n\nconst alertVariants = cva(\n\t\"relative flex w-full gap-1.5 rounded-md border p-2.5 text-sm font-sans\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * The priority of the Alert. Indicates the importance or impact level of the Alert,\n\t\t\t * affecting its color and styling to communicate its purpose to the user.\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger:\n\t\t\t\t\t\"border-danger-500/50 bg-danger-500/10 text-danger-700 [&_code]:bg-danger-500/10 [&_code]:border-danger-500/20 [&_code]:text-danger-900 [&_a]:text-danger-700 [&_a]:underline\",\n\t\t\t\timportant:\n\t\t\t\t\t\"border-important-500/50 bg-important-500/10 text-important-700 [&_code]:bg-important-500/10 [&_code]:border-important-500/20 [&_code]:text-important-900 [&_a]:text-important-700 [&_a]:underline\",\n\t\t\t\tinfo: \"border-info-500/50 bg-info-500/10 text-info-700 [&_code]:bg-info-500/10 [&_code]:border-info-500/20 [&_code]:text-info-900 [&_a]:text-info-700 [&_a]:underline\",\n\t\t\t\t// neutral: \"border-neutral-500/50 bg-neutral-500/10 text-neutral-700\",\n\t\t\t\tsuccess:\n\t\t\t\t\t\"border-success-500/50 bg-success-500/10 text-success-700 [&_code]:bg-success-500/10 [&_code]:border-success-500/20 [&_code]:text-success-900 [&_a]:text-success-700 [&_a]:underline\",\n\t\t\t\twarning:\n\t\t\t\t\t\"border-warning-500/50 bg-warning-500/10 text-warning-700 [&_code]:bg-warning-500/10 [&_code]:border-warning-500/20 [&_code]:text-warning-900 [&_a]:text-warning-700 [&_a]:underline\",\n\t\t\t} as const satisfies Record<Priority, string>,\n\t\t\t/**\n\t\t\t * Controls the visual style of the Alert.\n\t\t\t * - \"default\" provides standard rounded corners and borders.\n\t\t\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t\t\t *\n\t\t\t * @default \"default\"\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tbanner: \"border-x-0 border-t-0 rounded-none z-50 sticky\",\n\t\t\t\tdefault: \"\",\n\t\t\t} as const satisfies Record<Appearance, string>,\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"important\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"info\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"success\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t\t{\n\t\t\t\tpriority: \"warning\",\n\t\t\t\tappearance: \"banner\",\n\t\t\t\tclassName: \"\", // placeholder for different bg-color (color-mix w/ bg-popover)\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype AlertProps = ComponentProps<\"div\"> & {\n\t/**\n\t * Indicates the importance or impact level of the Alert, affecting its\n\t * color and styling to communicate its purpose to the user.\n\t */\n\tpriority: Priority;\n\t/**\n\t * Controls the visual style of the Alert.\n\t * - \"default\" provides standard rounded corners and borders.\n\t * - \"banner\" creates a banner-style alert with no rounded corners, sticky positioning, and no left/right borders.\n\t *\n\t * @default \"default\"\n\t */\n\tappearance?: Appearance;\n};\n\n/**\n * Displays a callout for user attention. Root container for all Alert sub-components.\n *\n * @see https://mantle.ngrok.com/components/alert#alertroot\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, AlertProps>(\n\t({ appearance = \"default\", className, priority, ...props }, ref) => {\n\t\tconst context: AlertContextValue = useMemo(() => ({ priority }), [priority]);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={context}>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tdata-slot=\"alert\"\n\t\t\t\t\tclassName={cx(alertVariants({ appearance, priority }), className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"Alert\";\n\ntype AlertIconProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * An optional icon that renders in place of the default icon for the Alert priority.\n\t */\n\tsvg?: ReactNode;\n};\n\n/**\n * Default `<AlertIcon>` icons for each priority.\n */\nconst defaultIcons = {\n\tdanger: <WarningIcon />,\n\timportant: <MegaphoneIcon mirrored />,\n\tinfo: <InfoIcon />,\n\t// neutral: <BellRinging />,\n\tsuccess: <CheckCircleIcon />,\n\twarning: <WarningDiamondIcon />,\n} as const satisfies Record<Priority, ReactNode>;\n\n/**\n * An optional icon that visually represents the priority of the Alert.\n *\n * The default rendered icon be overridden with a custom icon using the `svg` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alerticon\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Icon = forwardRef<ComponentRef<\"svg\">, AlertIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useAlertContext();\n\t\tconst defaultIcon = defaultIcons[ctx.priority];\n\n\t\treturn (\n\t\t\t<SvgOnly\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-icon\"\n\t\t\t\tclassName={cx(\"size-5\", 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 = \"AlertIcon\";\n\n/**\n * The container for the content slot of an alert. Place the title and description as direct children.\n *\n * @see https://mantle.ngrok.com/components/alert#alertcontent\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tdata-slot=\"alert-content\"\n\t\t\tclassName={cx(\"min-w-0 flex-1 has-data-alert-dismiss:pr-6\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nContent.displayName = \"AlertContent\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of an alert. Default renders as an h5 element, use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/alert#alerttitle\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Title = forwardRef<HTMLHeadingElement, AlertTitleProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"h5\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"alert-title\"\n\t\t\t\tclassName={cx(\"font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"AlertTitle\";\n\ntype AlertDescriptionProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The optional description of an alert.\n * Renders as a `div` by default, but can be changed to any other element using\n * the `asChild` prop.\n *\n * @see https://mantle.ngrok.com/components/alert#alertdescription\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *     <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n * ```\n */\nconst Description = forwardRef<ComponentRef<\"div\">, AlertDescriptionProps>(\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\tref={ref}\n\t\t\t\tdata-slot=\"alert-description\"\n\t\t\t\tclassName={cx(\"text-sm\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nDescription.displayName = \"AlertDescription\";\n\nconst dismissTextColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-700)`;\n\nconst dismissHoverColor = <T extends Priority = Priority>(priority: T) =>\n\t`var(--color-${priority}-800)`;\n\nconst dismissHoverBgColor = <T extends Priority = Priority>(priority: T) =>\n\t`color-mix(in oklab, var(--color-${priority}-500) 10%, transparent)`;\n\ntype AlertDismissIconButtonProps = Partial<Omit<IconButtonProps, \"icon\">> & {\n\t/**\n\t * An optional icon to render inside the dismiss button. Defaults to an X icon.\n\t */\n\ticon?: ReactNode;\n};\n\nconst DismissIconButton = ({\n\tsize = \"sm\",\n\ttype = \"button\",\n\tlabel = \"Dismiss Alert\",\n\tappearance = \"ghost\",\n\tclassName,\n\ticon = <XIcon />,\n\tstyle,\n\t...props\n}: AlertDismissIconButtonProps) => {\n\tconst ctx = useAlertContext();\n\treturn (\n\t\t<IconButton\n\t\t\tappearance={appearance}\n\t\t\ticon={icon}\n\t\t\tlabel={label}\n\t\t\tsize={size}\n\t\t\tdata-slot=\"alert-dismiss-icon-button\"\n\t\t\tdata-alert-dismiss\n\t\t\tclassName={cx(\n\t\t\t\t\"right-1.5 top-1.5 absolute\",\n\t\t\t\t\"text-(--alert-dismiss-icon-color)\",\n\t\t\t\t\"not-disabled:hover:bg-(--alert-dismiss-hover-bg) not-disabled:hover:text-(--alert-dismiss-icon-hover-color)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\ttype={type}\n\t\t\tstyle={$cssProperties({\n\t\t\t\t...style,\n\t\t\t\t\"--alert-dismiss-icon-color\": dismissTextColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-icon-hover-color\": dismissHoverColor(ctx.priority),\n\t\t\t\t\"--alert-dismiss-hover-bg\": dismissHoverBgColor(ctx.priority),\n\t\t\t})}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nDismissIconButton.displayName = \"AlertDismissIconButton\";\n\n/**\n * Displays a callout for user attention.\n *\n * @see https://mantle.ngrok.com/components/alert\n *\n * @example\n * Composition:\n * ```\n * Alert.Root\n * ├── Alert.Icon\n * └── Alert.Content\n *     ├── Alert.Title\n *     ├── Alert.Description\n *     └── Alert.DismissIconButton\n * ```\n *\n * @example\n * ```tsx\n * <Alert priority=\"info\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Alert Title</AlertTitle>\n *      <AlertDismissIconButton />\n *     <AlertDescription>\n *       Alert description text.\n *     </AlertDescription>\n *   </AlertContent>\n * </Alert>\n *```\n */\nconst Alert = {\n\t/**\n\t * The root container of the alert component.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for the content slot of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The optional description of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdescription\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDescription,\n\t/**\n\t * An optional dismiss button that can be used to close the alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alertdismissiconbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.DismissIconButton />\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tDismissIconButton,\n\t/**\n\t * An optional icon that visually represents the priority of the Alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerticon\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tIcon,\n\t/**\n\t * The title of an alert.\n\t *\n\t * @see https://mantle.ngrok.com/components/alert#alerttitle\n\t *\n\t * @example\n\t * ```tsx\n\t * <Alert.Root priority=\"info\">\n\t *   <Alert.Icon />\n\t *   <Alert.Content>\n\t *     <Alert.Title>Alert Title</Alert.Title>\n\t *     <Alert.Description>Alert description text.</Alert.Description>\n\t *   </Alert.Content>\n\t * </Alert.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tAlert,\n};\n"],"mappings":"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"}

package/dist/anchor-2stEauOz.js.map

@@ -1 +1 @@
-{"version":3,"file":"anchor-2stEauOz.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * Fundamental component for rendering links to external addresses.\n *\n * @note If you need to link to an internal application route, prefer using the\n * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * <Anchor href=\"https://ngrok.com/docs\" target=\"_blank\" icon={<Book />}>\n *   ngrok docs\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\t\"data-slot\": \"anchor\",\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,EACA,CA2CI,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,EAAQ,CACzB,EAAiB,CACtB,YAAa,SACb,UAAW,EAAiB,EAAU,CACtC,MACA,MACA,GAAG,EACH,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA4B,EAAY,CACxC,2EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAEnD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACxF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACpF,IAGN,CACD,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,EAAI,CAEN,CAAC,GADE,IAAI,IAAI,EAAI,CACD,CAC3B,IAAK,GAAS,GAAM,MAAM,CAAC,CAC3B,OAAO,QAAQ,CACf,UAAU,CACV,KAAK,IAAI,EACM,IAAA,GAGX,GAAK,MAAM,EAAI,IAAA"}
+{"version":3,"file":"anchor-2stEauOz.js","names":[],"sources":["../src/components/anchor/anchor.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Slot } from \"../slot/index.js\";\nimport type { Rel } from \"./types.js\";\n\n/**\n * The class names for the `Anchor` component which define the styles for the component.\n */\nconst anchorClassNames = (className?: string) =>\n\tcx(\n\t\t\"cursor-pointer rounded bg-transparent text-accent-600 hover:underline focus:outline-hidden focus-visible:ring-3 focus-visible:ring-focus-accent\",\n\t\tclassName,\n\t);\n\n/**\n * The props for the `Anchor` component.\n */\ntype AnchorProps = Omit<ComponentProps<\"a\">, \"rel\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * An icon to render inside the anchor\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t\t/**\n\t\t * The rel attribute defines the relationship between a linked resource and the current document.\n\t\t *\n\t\t * Every keyword within a space-separated value should be unique within that value.\n\t\t *\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n\t\t */\n\t\trel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];\n\t};\n\n/**\n * A styled hyperlink — a native `<a>` with mantle's link styling, focus\n * treatment, optional leading/trailing icon, and a safer default for the\n * `rel` attribute. Use for links that point _outside_ the current\n * application.\n *\n * **When to use**\n * - External URLs (docs, marketing pages, third-party sites).\n * - Links to files or `mailto:` / `tel:` destinations.\n *\n * **When not to use**\n * - Internal application routes — prefer the framework router's link\n *   primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})\n *   so client-side navigation kicks in. You can keep mantle's styling by\n *   composing: `<Anchor asChild><Link to=\"/foo\">…</Link></Anchor>`.\n * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}\n *   instead. If it doesn't navigate, it's not a link.\n *\n * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally\n * `iconPlacement` (`\"start\"` default, or `\"end\"`) to render a small inline\n * icon — useful for \"external link\" or \"download\" affordances. Icons are\n * decorative; the link text must still describe the destination on its own.\n *\n * **Security.** When `target=\"_blank\"`, `rel` should include\n * `\"noopener noreferrer\"`. The `rel` prop accepts an array — duplicates\n * are de-duped and sorted, so it's safe to merge token sets.\n *\n * **Accessibility.** Link text must be self-describing — avoid \"click\n * here\" / \"read more\". For purely decorative icons, no extra labeling is\n * needed; for icon-only links, provide an `aria-label`.\n *\n * @see https://mantle.ngrok.com/components/anchor\n *\n * @example\n * ```tsx\n * import { Anchor } from \"@ngrok/mantle/anchor\";\n * import { BookIcon } from \"@phosphor-icons/react/Book\";\n * import { Link } from \"react-router\";\n *\n * // Basic external link.\n * <Anchor href=\"https://ngrok.com/\">ngrok.com</Anchor>\n *\n * // External link in a new tab with a leading icon.\n * <Anchor\n *   href=\"https://ngrok.com/docs\"\n *   target=\"_blank\"\n *   rel={[\"noopener\", \"noreferrer\"]}\n *   icon={<BookIcon />}\n * >\n *   ngrok docs\n * </Anchor>\n *\n * // Compose Anchor styling onto a react-router Link for internal navigation.\n * <Anchor asChild>\n *   <Link to=\"/dashboard\">Open dashboard</Link>\n * </Anchor>\n * ```\n */\nconst Anchor = forwardRef<ComponentRef<\"a\">, AnchorProps>(\n\t(\n\t\t{ asChild, children, className, rel: propRel, icon, iconPlacement = \"start\", ...props },\n\t\tref,\n\t) => {\n\t\tconst rel = resolveRel(propRel);\n\t\tconst componentProps = {\n\t\t\t\"data-slot\": \"anchor\",\n\t\t\tclassName: anchorClassNames(className),\n\t\t\tref,\n\t\t\trel,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<AnchorProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Anchor must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...componentProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{icon && iconPlacement === \"start\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block mr-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t\t{icon && iconPlacement === \"end\" && (\n\t\t\t\t\t\t\t\t<Icon className=\"inline-block ml-1.5\" svg={icon} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<a {...componentProps}>\n\t\t\t\t{icon && iconPlacement === \"start\" && <Icon className=\"inline-block mr-1.5\" svg={icon} />}\n\t\t\t\t{children}\n\t\t\t\t{icon && iconPlacement === \"end\" && <Icon className=\"inline-block ml-1.5\" svg={icon} />}\n\t\t\t</a>\n\t\t);\n\t},\n);\nAnchor.displayName = \"Anchor\";\n\n/**\n * Resolves the `rel` attribute to a string.\n *\n * If the value is an array, it will be filtered for empty values, ensure uniqueness, sorted, and joined with a space.\n */\nfunction resolveRel(\n\trel: Rel | (string & {}) | undefined | null | (Rel | (string & {}) | undefined | null)[],\n) {\n\tif (Array.isArray(rel)) {\n\t\tconst uniqueRel = new Set(rel);\n\t\tconst result = [...uniqueRel]\n\t\t\t.map((item) => item?.trim())\n\t\t\t.filter(Boolean)\n\t\t\t.toSorted()\n\t\t\t.join(\" \");\n\t\treturn result || undefined;\n\t}\n\n\treturn rel?.trim() || undefined;\n}\n\nexport {\n\t//,\n\tAnchor,\n\tanchorClassNames,\n\tresolveRel,\n};\n\nexport type {\n\t//,\n\tAnchorProps,\n};\n"],"mappings":"mSAYA,MAAM,EAAoB,GACzB,EACC,kJACA,EACA,CAoFI,EAAS,GAEb,CAAE,UAAS,WAAU,YAAW,IAAK,EAAS,OAAM,gBAAgB,QAAS,GAAG,GAChF,IACI,CACJ,IAAM,EAAM,EAAW,EAAQ,CACzB,EAAiB,CACtB,YAAa,SACb,UAAW,EAAiB,EAAU,CACtC,MACA,MACA,GAAG,EACH,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA4B,EAAY,CACxC,2EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,GAAI,WACR,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,IAAkB,SAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAEnD,EACA,GAAQ,IAAkB,OAC1B,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CAElD,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,IAAD,CAAG,GAAI,WAAP,CACE,GAAQ,IAAkB,SAAW,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACxF,EACA,GAAQ,IAAkB,OAAS,EAAC,EAAD,CAAM,UAAU,sBAAsB,IAAK,EAAQ,CAAA,CACpF,IAGN,CACD,EAAO,YAAc,SAOrB,SAAS,EACR,EACC,CAWD,OAVI,MAAM,QAAQ,EAAI,CAEN,CAAC,GAAG,IADG,IAAI,EACE,CAAC,CAC3B,IAAK,GAAS,GAAM,MAAM,CAAC,CAC3B,OAAO,QAAQ,CACf,UAAU,CACV,KAAK,IACM,EAAI,IAAA,GAGX,GAAK,MAAM,EAAI,IAAA"}

package/dist/anchor.d.ts

@@ -1,4 +1,4 @@
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 
@@ -40,20 +40,61 @@ type AnchorProps = Omit<ComponentProps<"a">, "rel"> & WithAsChild & {
   rel?: Rel | (string & {}) | undefined | (Rel | (string & {}) | undefined | null)[];
 };
 /**
- * Fundamental component for rendering links to external addresses.
+ * A styled hyperlink — a native `<a>` with mantle's link styling, focus
+ * treatment, optional leading/trailing icon, and a safer default for the
+ * `rel` attribute. Use for links that point _outside_ the current
+ * application.
  *
- * @note If you need to link to an internal application route, prefer using the
- * [`react-router` `<Link>`](https://reactrouter.com/en/main/components/link)
+ * **When to use**
+ * - External URLs (docs, marketing pages, third-party sites).
+ * - Links to files or `mailto:` / `tel:` destinations.
+ *
+ * **When not to use**
+ * - Internal application routes — prefer the framework router's link
+ *   primitive ({@link https://reactrouter.com/en/main/components/link `react-router` `<Link>`})
+ *   so client-side navigation kicks in. You can keep mantle's styling by
+ *   composing: `<Anchor asChild><Link to="/foo">…</Link></Anchor>`.
+ * - For triggering an action — use a {@link https://mantle.ngrok.com/components/button Button}
+ *   instead. If it doesn't navigate, it's not a link.
+ *
+ * **Icons.** Pass `icon` (a phosphor or custom SVG) and optionally
+ * `iconPlacement` (`"start"` default, or `"end"`) to render a small inline
+ * icon — useful for "external link" or "download" affordances. Icons are
+ * decorative; the link text must still describe the destination on its own.
+ *
+ * **Security.** When `target="_blank"`, `rel` should include
+ * `"noopener noreferrer"`. The `rel` prop accepts an array — duplicates
+ * are de-duped and sorted, so it's safe to merge token sets.
+ *
+ * **Accessibility.** Link text must be self-describing — avoid "click
+ * here" / "read more". For purely decorative icons, no extra labeling is
+ * needed; for icon-only links, provide an `aria-label`.
  *
  * @see https://mantle.ngrok.com/components/anchor
  *
  * @example
  * ```tsx
+ * import { Anchor } from "@ngrok/mantle/anchor";
+ * import { BookIcon } from "@phosphor-icons/react/Book";
+ * import { Link } from "react-router";
+ *
+ * // Basic external link.
  * <Anchor href="https://ngrok.com/">ngrok.com</Anchor>
  *
- * <Anchor href="https://ngrok.com/docs" target="_blank" icon={<Book />}>
+ * // External link in a new tab with a leading icon.
+ * <Anchor
+ *   href="https://ngrok.com/docs"
+ *   target="_blank"
+ *   rel={["noopener", "noreferrer"]}
+ *   icon={<BookIcon />}
+ * >
  *   ngrok docs
  * </Anchor>
+ *
+ * // Compose Anchor styling onto a react-router Link for internal navigation.
+ * <Anchor asChild>
+ *   <Link to="/dashboard">Open dashboard</Link>
+ * </Anchor>
  * ```
  */
 declare const Anchor: _$react.ForwardRefExoticComponent<Omit<AnchorProps, "ref"> & _$react.RefAttributes<HTMLAnchorElement>>;

package/dist/{as-child-CJ2vTesV.d.ts → as-child-DQHfEmYB.d.ts}

@@ -28,4 +28,4 @@ type WithAsChild = {
  */
 //#endregion
 export { WithAsChild as t };
-//# sourceMappingURL=as-child-CJ2vTesV.d.ts.map
+//# sourceMappingURL=as-child-DQHfEmYB.d.ts.map

package/dist/badge.d.ts

@@ -1,5 +1,5 @@
-import { t as WithAsChild } from "./as-child-CJ2vTesV.js";
-import { t as Color } from "./index-B6SPk_xb.js";
+import { t as WithAsChild } from "./as-child-DQHfEmYB.js";
+import { t as Color } from "./index-DkMUaYsw.js";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -21,16 +21,45 @@ type BadgeProps = ComponentProps<"span"> & WithAsChild & {
   appearance: Appearance;
 };
 /**
- * A Badge is a non-interactive component used to highlight important
- * information or to visually indicate the status of an item.
+ * A non-interactive label used to highlight short, scannable information —
+ * a status, a category tag, or a count — in the smallest possible footprint.
+ *
+ * **When to use**
+ * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.
+ * - Category or tag chips alongside list items, table rows, or cards.
+ * - Counts (e.g. `12 new`) when paired with brief context.
+ *
+ * **When not to use**
+ * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/button Button}
+ *   or {@link https://mantle.ngrok.com/components/anchor Anchor} (optionally with `asChild` styling) instead.
+ * - For long-form text. Keep labels to one or two short words.
+ * - As the sole signal of meaning. Pair color with a label or icon so the
+ *   distinction works without color (color blindness, monochrome themes).
+ *
+ * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,
+ * `danger`, `info`, `accent`, `neutral`) for status meaning so theming
+ * stays coherent. Reach for named hues only when the badge's semantic role
+ * isn't already covered.
+ *
+ * **Polymorphism.** Pass `asChild` to render the badge as a single child
+ * element — useful when the badge wraps a link or other semantic element
+ * while keeping the badge styling.
  *
  * @see https://mantle.ngrok.com/components/badge
  *
  * @example
  * ```tsx
- * <Badge appearance="muted" color="success">
+ * import { Badge } from "@ngrok/mantle/badge";
+ * import { CheckCircleIcon } from "@phosphor-icons/react/CheckCircle";
+ *
+ * <Badge appearance="muted" color="success" icon={<CheckCircleIcon />}>
  *   Succeeded
  * </Badge>
+ *
+ * // Polymorphic — render the badge as a link, preserving its styling.
+ * <Badge appearance="muted" color="info" asChild>
+ *   <a href="/status">Operational</a>
+ * </Badge>
  * ```
  */
 declare const Badge: {

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A Badge is a non-interactive component used to highlight important\n * information or to visually indicate the status of an item.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * <Badge appearance=\"muted\" color=\"success\">\n *   Succeeded\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\timportant: \"bg-important-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\timportant: \"text-important-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAwCA,MAAM,GAAS,CACd,aACA,UAAU,GACV,WACA,YACA,QAAQ,UACR,OACA,GAAG,KACc,CACjB,IAAM,EAAU,EAAe,EAAO,EAAW,CAC3C,EAAY,EAAiB,EAAO,EAAW,CAE/C,EAAe,EACpB,mHACA,GAAQ,OACR,EACA,EACA,EACA,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA2B,EAAY,CACvC,0EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WACnD,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACC,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,OAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WAArD,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACK,IAGT,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,UAAW,sBACX,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,oBACT,CAED,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG,EAIhE,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,UAAW,qBACX,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,mBACT,CAED,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG"}
+{"version":3,"file":"badge.js","names":[],"sources":["../src/components/badge/badge.tsx"],"sourcesContent":["import { Children, type ComponentProps, type ReactNode, cloneElement, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { Color } from \"../../utils/color/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { SvgOnly } from \"../icon/svg-only.js\";\nimport { Slot } from \"../slot/index.js\";\n\nconst appearances = [\"muted\" /*\"strong\" */] as const;\ntype Appearance = (typeof appearances)[number];\n\ntype BadgeProps = ComponentProps<\"span\"> &\n\tWithAsChild & {\n\t\t/**\n\t\t * The color variant of the badge. Accepts named colors and functional colors from the mantle color palette.\n\t\t */\n\t\tcolor?: Color;\n\t\t/**\n\t\t * The icon to render inside the badge.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The visual style of the badge.\n\t\t */\n\t\tappearance: Appearance;\n\t};\n\n/**\n * A non-interactive label used to highlight short, scannable information —\n * a status, a category tag, or a count — in the smallest possible footprint.\n *\n * **When to use**\n * - Status indicators: `Succeeded`, `Failed`, `Pending`, `Beta`.\n * - Category or tag chips alongside list items, table rows, or cards.\n * - Counts (e.g. `12 new`) when paired with brief context.\n *\n * **When not to use**\n * - For interactive UI. Badges are not buttons or links — use {@link https://mantle.ngrok.com/components/button Button}\n *   or {@link https://mantle.ngrok.com/components/anchor Anchor} (optionally with `asChild` styling) instead.\n * - For long-form text. Keep labels to one or two short words.\n * - As the sole signal of meaning. Pair color with a label or icon so the\n *   distinction works without color (color blindness, monochrome themes).\n *\n * **Choosing a `color`.** Prefer functional colors (`success`, `warning`,\n * `danger`, `info`, `accent`, `neutral`) for status meaning so theming\n * stays coherent. Reach for named hues only when the badge's semantic role\n * isn't already covered.\n *\n * **Polymorphism.** Pass `asChild` to render the badge as a single child\n * element — useful when the badge wraps a link or other semantic element\n * while keeping the badge styling.\n *\n * @see https://mantle.ngrok.com/components/badge\n *\n * @example\n * ```tsx\n * import { Badge } from \"@ngrok/mantle/badge\";\n * import { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\n *\n * <Badge appearance=\"muted\" color=\"success\" icon={<CheckCircleIcon />}>\n *   Succeeded\n * </Badge>\n *\n * // Polymorphic — render the badge as a link, preserving its styling.\n * <Badge appearance=\"muted\" color=\"info\" asChild>\n *   <a href=\"/status\">Operational</a>\n * </Badge>\n * ```\n */\nconst Badge = ({\n\tappearance,\n\tasChild = false,\n\tchildren,\n\tclassName,\n\tcolor = \"neutral\",\n\ticon,\n\t...props\n}: BadgeProps) => {\n\tconst bgColor = computeBgColor(color, appearance);\n\tconst textColor = computeTextColor(color, appearance);\n\n\tconst badgeClasses = cx(\n\t\t\"inline-flex w-fit shrink-0 cursor-default items-center gap-1 rounded px-1.5 py-0.5 font-medium text-xs font-sans\",\n\t\ticon && \"ps-1\",\n\t\tbgColor,\n\t\ttextColor,\n\t\tclassName,\n\t);\n\n\tif (asChild) {\n\t\tconst singleChild = Children.only(children);\n\t\tinvariant(\n\t\t\tisValidElement<BadgeProps>(singleChild),\n\t\t\t\"When using `asChild`, Badge must be passed a single child as a JSX tag.\",\n\t\t);\n\t\tconst grandchildren = singleChild.props?.children;\n\n\t\treturn (\n\t\t\t<Slot data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t\t{cloneElement(\n\t\t\t\t\tsingleChild,\n\t\t\t\t\t{},\n\t\t\t\t\t<>\n\t\t\t\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t</>,\n\t\t\t\t)}\n\t\t\t</Slot>\n\t\t);\n\t}\n\n\treturn (\n\t\t<span data-slot=\"badge\" className={badgeClasses} {...props}>\n\t\t\t{icon && <SvgOnly className=\"size-4\" svg={icon} />}\n\t\t\t{children}\n\t\t</span>\n\t);\n};\nBadge.displayName = \"Badge\";\n\n// MARK: - Exports\n\nexport {\n\t//,\n\tBadge,\n};\n\nexport type {\n\t//,\n\tBadgeProps,\n};\n\n// MARK: - Private\n\nconst mutedBgColorLookup = {\n\tamber: \"bg-amber-500/20\",\n\tblue: \"bg-blue-500/20\",\n\tcyan: \"bg-cyan-500/20\",\n\temerald: \"bg-emerald-500/20\",\n\tfuchsia: \"bg-fuchsia-500/20\",\n\tgray: \"bg-gray-500/20\",\n\tgreen: \"bg-green-500/20\",\n\tindigo: \"bg-indigo-500/20\",\n\tlime: \"bg-lime-500/20\",\n\torange: \"bg-orange-500/20\",\n\tpink: \"bg-pink-500/20\",\n\tpurple: \"bg-purple-500/20\",\n\tred: \"bg-red-500/20\",\n\trose: \"bg-rose-500/20\",\n\tsky: \"bg-sky-500/20\",\n\tteal: \"bg-teal-500/20\",\n\tviolet: \"bg-violet-500/20\",\n\tyellow: \"bg-yellow-500/20\",\n\taccent: \"bg-accent-500/20\",\n\tdanger: \"bg-danger-500/20\",\n\timportant: \"bg-important-500/20\",\n\tinfo: \"bg-info-500/20\",\n\tneutral: \"bg-neutral-500/20\",\n\tsuccess: \"bg-success-500/20\",\n\twarning: \"bg-warning-500/20\",\n} satisfies Record<Color, string>;\n\nfunction computeBgColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn mutedBgColorLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n\nconst textColorMutedLookup = {\n\tamber: \"text-amber-700\",\n\tblue: \"text-blue-700\",\n\tcyan: \"text-cyan-700\",\n\temerald: \"text-emerald-700\",\n\tfuchsia: \"text-fuchsia-700\",\n\tgray: \"text-gray-700\",\n\tgreen: \"text-green-700\",\n\tindigo: \"text-indigo-700\",\n\tlime: \"text-lime-700\",\n\torange: \"text-orange-700\",\n\tpink: \"text-pink-700\",\n\tpurple: \"text-purple-700\",\n\tred: \"text-red-700\",\n\trose: \"text-rose-700\",\n\tsky: \"text-sky-700\",\n\tteal: \"text-teal-700\",\n\tviolet: \"text-violet-700\",\n\tyellow: \"text-yellow-700\",\n\taccent: \"text-accent-700\",\n\tdanger: \"text-danger-700\",\n\timportant: \"text-important-700\",\n\tinfo: \"text-info-700\",\n\tneutral: \"text-neutral-700\",\n\tsuccess: \"text-success-700\",\n\twarning: \"text-warning-700\",\n} satisfies Record<Color, string>;\n\nfunction computeTextColor(color: Color, appearance: Appearance) {\n\tswitch (appearance) {\n\t\tcase \"muted\":\n\t\t\treturn textColorMutedLookup[color];\n\t\tdefault:\n\t\t\tinvariant(false, `Invalid appearance: ${String(appearance)}`);\n\t}\n}\n"],"mappings":"uRAqEA,MAAM,GAAS,CACd,aACA,UAAU,GACV,WACA,YACA,QAAQ,UACR,OACA,GAAG,KACc,CACjB,IAAM,EAAU,EAAe,EAAO,EAAW,CAC3C,EAAY,EAAiB,EAAO,EAAW,CAE/C,EAAe,EACpB,mHACA,GAAQ,OACR,EACA,EACA,EACA,CAED,GAAI,EAAS,CACZ,IAAM,EAAc,EAAS,KAAK,EAAS,CAC3C,EACC,EAA2B,EAAY,CACvC,0EACA,CACD,IAAM,EAAgB,EAAY,OAAO,SAEzC,OACC,EAAC,EAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WACnD,EACA,EACA,EAAE,CACF,EAAA,EAAA,CAAA,SAAA,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACC,CAAA,CAAA,CACH,CACK,CAAA,CAIT,OACC,EAAC,OAAD,CAAM,YAAU,QAAQ,UAAW,EAAc,GAAI,WAArD,CACE,GAAQ,EAAC,EAAD,CAAS,UAAU,SAAS,IAAK,EAAQ,CAAA,CACjD,EACK,IAGT,EAAM,YAAc,QAgBpB,MAAM,EAAqB,CAC1B,MAAO,kBACP,KAAM,iBACN,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACN,MAAO,kBACP,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,KAAM,iBACN,OAAQ,mBACR,IAAK,gBACL,KAAM,iBACN,IAAK,gBACL,KAAM,iBACN,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,OAAQ,mBACR,UAAW,sBACX,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,QAAS,oBACT,CAED,SAAS,EAAe,EAAc,EAAwB,CAC7D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAmB,GAC3B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG,EAIhE,MAAM,EAAuB,CAC5B,MAAO,iBACP,KAAM,gBACN,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,KAAM,gBACN,MAAO,iBACP,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,KAAM,gBACN,OAAQ,kBACR,IAAK,eACL,KAAM,gBACN,IAAK,eACL,KAAM,gBACN,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,OAAQ,kBACR,UAAW,qBACX,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,QAAS,mBACT,CAED,SAAS,EAAiB,EAAc,EAAwB,CAC/D,OAAQ,EAAR,CACC,IAAK,QACJ,OAAO,EAAqB,GAC7B,QACC,EAAU,GAAO,uBAAuB,OAAO,EAAW,GAAG"}

package/dist/{button-DDK6nEac.d.ts → button-Bq0x5Pv4.d.ts}

@@ -1,5 +1,5 @@
-import { t as DeepNonNullable } from "./deep-non-nullable-DwBZzk4x.js";
-import { t as VariantProps$1 } from "./variant-props-DszdagRm.js";
+import { t as DeepNonNullable } from "./deep-non-nullable-VFm1T3JZ.js";
+import { t as VariantProps$1 } from "./variant-props-DUmSIQK8.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$class_variance_authority0 from "class-variance-authority";
@@ -9,7 +9,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 declare const buttonVariants: (props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonVariants = VariantProps$1<typeof buttonVariants>;
 /**
@@ -93,7 +93,7 @@ type ButtonProps = ComponentProps<"button"> & ButtonVariants & {
 declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -139,7 +139,7 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref"> | Omit<_$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & Partial<DeepNonNullable<_$class_variance_authority0.VariantProps<(props?: ({
   appearance?: "filled" | "link" | "ghost" | "outlined" | null | undefined;
   isLoading?: boolean | null | undefined;
-  priority?: "danger" | "neutral" | "default" | null | undefined;
+  priority?: "default" | "danger" | "neutral" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string>>> & {
   /**
    * An icon to render inside the button. If the `state` is `"pending"`, then
@@ -172,4 +172,4 @@ declare const Button: _$react.ForwardRefExoticComponent<(Omit<_$react.ClassAttri
 }, "ref">) & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ButtonProps as n, Button as t };
-//# sourceMappingURL=button-DDK6nEac.d.ts.map
+//# sourceMappingURL=button-Bq0x5Pv4.d.ts.map

package/dist/button.d.ts

@@ -1,4 +1,4 @@
-import { n as IconButtonProps, t as IconButton } from "./icon-button-Cl30yTfu.js";
-import { n as ButtonProps, t as Button } from "./button-DDK6nEac.js";
-import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DU3SQJ46.js";
+import { n as IconButtonProps, t as IconButton } from "./icon-button-BnK4K7YK.js";
+import { n as ButtonProps, t as Button } from "./button-Bq0x5Pv4.js";
+import { n as ButtonGroupProps, t as ButtonGroup } from "./index-DOJUH34Z.js";
 export { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, IconButtonProps };